diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/widgets.css')
-rw-r--r-- | arc-firefox-theme/chrome/browser/devtools/widgets.css | 1590 |
1 files changed, 0 insertions, 1590 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css deleted file mode 100644 index a23f0f5..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ /dev/null @@ -1,1590 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -.theme-dark { - --table-splitter-color: rgba(255,255,255,0.15); - --table-zebra-background: rgba(255,255,255,0.05); -} -.theme-light { - --table-splitter-color: rgba(0,0,0,0.15); - --table-zebra-background: rgba(0,0,0,0.05); -} - -/* Generic pane helpers */ - -.generic-toggled-side-pane { - -moz-margin-start: 0 !important; - /* Unfortunately, transitions don't work properly with locale-aware properties, - so both the left and right margins are set via js, while the start margin - is always overridden here. */ -} - -.generic-toggled-side-pane[animated] { - transition: margin 0.25s ease-in-out; -} - -/* Responsive container */ - -.devtools-responsive-container { - -moz-box-orient: horizontal; -} - -.devtools-main-content { - min-width: 50px; -} - -.devtools-main-content, -.devtools-sidebar-tabs { - /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ - position: relative; -} - -@media (max-width: 700px) { - .devtools-responsive-container { - -moz-box-orient: vertical; - } - - .devtools-responsive-container > .devtools-side-splitter { - /* This is a normally vertical splitter, but we have turned it horizontal - due to the smaller resolution */ - min-height: 3px; - height: 3px; - margin-top: -3px; - - /* Reset the vertical splitter styles */ - border-width: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - -moz-margin-start: 0; - width: auto; - min-width: 0; - - /* In some edge case the cursor is not changed to n-resize */ - cursor: n-resize; - } - - .devtools-responsive-container > .devtools-sidebar-tabs { - min-height: 35vh; - max-height: 75vh; - } -} - -/* BreacrumbsWidget */ - -.breadcrumbs-widget-container { - -moz-margin-end: 3px; - max-height: 24px; /* Set max-height for proper sizing on linux */ - height: 24px; /* Set height to prevent starting small waiting for content */ -} - -.scrollbutton-up, -.scrollbutton-down { - -moz-appearance: none; - background: transparent; - box-shadow: none; - border: none; - list-style-image: none; - margin: 0; - padding: 0; -} - -.scrollbutton-up > .toolbarbutton-icon, -.scrollbutton-down > .toolbarbutton-icon { - -moz-appearance: none; - width: 7px; - height: 16px; - background-size: 14px 16px; - background-position: 0 center; - background-repeat: no-repeat; - background-image: url("breadcrumbs-scrollbutton.png"); - list-style-image: none; - margin: 0 8px; - padding: 0; -} - -@media (min-resolution: 1.1dppx) { - .scrollbutton-up > .toolbarbutton-icon, - .scrollbutton-down > .toolbarbutton-icon { - background-image: url("breadcrumbs-scrollbutton@2x.png"); - } -} - -.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, -.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { - background-position: -7px center; -} - -.scrollbutton-up[disabled] > .toolbarbutton-icon, -.scrollbutton-down[disabled] > .toolbarbutton-icon { - opacity: 0.5; -} - -/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ -.scrollbutton-up:-moz-locale-dir(ltr), -.scrollbutton-down:-moz-locale-dir(rtl) { - border-right: solid 1px rgba(255, 255, 255, .1); - border-left: solid 1px transparent; - box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-down:-moz-locale-dir(ltr), -.scrollbutton-up:-moz-locale-dir(rtl) { - border-right: solid 1px transparent; - border-left: solid 1px rgba(255, 255, 255, .1); - box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-up[disabled], -.scrollbutton-down[disabled] { - box-shadow: none; - border-color: transparent; -} - -.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), -.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { - transform: scaleX(-1); -} - -/* The breadcrumb separator elements are used as background images with - * -moz-element, so we position them offscreen since we don't care about - * seeing the original elements. - */ -.breadcrumb-separator-container { - position: fixed; - top: -1000px; - left: -1000px; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after, -#breadcrumb-separator-normal { - width: 12px; - height: 24px; - overflow: hidden; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after:after { - background: var(--theme-selection-background); -} - -#breadcrumb-separator-after, -#breadcrumb-separator-before:after { - background: var(--theme-toolbar-background); -} - -/* This chevron arrow cannot be replicated easily in CSS, so we are using - * a background image for it (still keeping it in a separate element so - * we can handle RTL support with a CSS transform). - */ -#breadcrumb-separator-normal { - background: url(breadcrumbs-divider@2x.png) no-repeat center right; - background-size: 12px 24px; -} - -/* Fake a triangle by rotating a rectangle inside the elements */ -#breadcrumb-separator-before:after, -#breadcrumb-separator-after:after { - content: ""; - display: block; - width: 25px; - height: 24px; - transform: translateX(-18px) rotate(45deg); - -moz-box-sizing: border-box; -} - -.breadcrumbs-widget-item { - background-color: transparent; - -moz-appearance: none; - min-height: 24px; - min-width: 65px; - margin: 0; - padding: 0 8px 0 20px; - border: none; - outline: none; - color: hsl(210,30%,85%); -} - -.breadcrumbs-widget-item > .button-box { - border: none; - padding-top: 0; - padding-bottom: 0; -} - - -.breadcrumbs-widget-item:not([checked]) { - background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; -} - -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { - background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; -} - -.breadcrumbs-widget-item[checked] { - background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0; -} - -.breadcrumbs-widget-item[checked] { - background-color: var(--theme-selection-background); -} - -.breadcrumbs-widget-item:first-child { - background-image: none; -} - -/* RTL support: move the images that were on the left to the right, - * and move images that were on the right to the left. - */ -.breadcrumbs-widget-item:-moz-locale-dir(rtl) { - padding: 0 20px 0 8px; -} - -.breadcrumbs-widget-item:-moz-locale-dir(rtl), -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { - background-position: center right; -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl), -#breadcrumb-separator-after:-moz-locale-dir(rtl), -#breadcrumb-separator-normal:-moz-locale-dir(rtl) { - transform: scaleX(-1); -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl):after, -#breadcrumb-separator-after:-moz-locale-dir(rtl):after { - transform: translateX(-5px) rotate(45deg); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { - color: var(--theme-selection-color); -} - -.theme-dark .breadcrumbs-widget-item { - color: var(--theme-selection-color); -} - -.theme-light .breadcrumbs-widget-item { - color: var(--theme-body-color); -} - -.breadcrumbs-widget-item-id { - color: var(--theme-body-color-alt); -} - -.breadcrumbs-widget-item-classes { - color: var(--theme-content-color1); -} - -.breadcrumbs-widget-item-pseudo-classes { - color: var(--theme-highlight-lightorange); -} - -.theme-dark .breadcrumbs-widget-item:not([checked]):hover label { - color: white; -} - -.theme-light .breadcrumbs-widget-item:not([checked]):hover label { - color: black; -} - -/* SimpleListWidget */ - -.simple-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.simple-list-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-dark .simple-list-widget-item:not(.selected):hover { - background-color: rgba(255,255,255,.05); -} - -.theme-light .simple-list-widget-item:not(.selected):hover { - background-color: rgba(0,0,0,.05); -} - -.simple-list-widget-empty-text, -.simple-list-widget-perma-text { - padding: 4px 8px; -} - -.simple-list-widget-empty-text, -.simple-list-widget-perma-text { - color: var(--theme-body-color-alt); -} - -/* FastListWidget */ - -.fast-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.fast-list-widget-empty-text { - padding: 4px 8px; -} - -.fast-list-widget-empty-text { - color: var(--theme-body-color-alt); -} - -/* SideMenuWidget */ - -.side-menu-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -/* SideMenuWidget container */ - -.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr), -.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #000; -} - -.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl), -.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #000; -} - -.side-menu-widget-container:-moz-locale-dir(ltr), -.side-menu-widget-empty-text:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #aaa; -} - -.side-menu-widget-container:-moz-locale-dir(rtl), -.side-menu-widget-empty-text:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #aaa; -} - -.side-menu-widget-group { - /* To allow visibility of the dark margin shadow. */ - -moz-margin-end: 1px; -} - -.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { - /* To compensate for the arrow image's dark margin. */ - -moz-margin-end: -1px; -} - -/* SideMenuWidget groups */ - -.side-menu-widget-group-title { - padding: 4px; - background-color: var(--theme-tab-toolbar-background); -} - -.theme-dark .side-menu-widget-group-title { - color: var(--theme-content-color1); -} - -.theme-light .side-menu-widget-group-title { - color: var(--theme-content-color3); -} - -/* SideMenuWidget items */ - -.side-menu-widget-item { - /* To compensate for the top and bottom borders */ - margin-top: -1px; - margin-bottom: -1px; - background-clip: padding-box; -} - -.theme-dark .side-menu-widget-item { - border-top: 1px solid rgba(0,0,0,0.2); - border-bottom: 1px solid rgba(128,128,128,0.15); - color: var(--theme-selection-color); -} - -.theme-dark .side-menu-widget-item:last-of-type { - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -} - -.theme-light .side-menu-widget-item { - border-top: 1px solid rgba(128,128,128,0.15); - border-bottom: 1px solid transparent; - color: var(--theme-body-color); -} - -.theme-light .side-menu-widget-item:last-of-type { - box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); -} - -.side-menu-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.side-menu-widget-item-arrow { - -moz-margin-start: -7px; - width: 7px; /* The image's width is 7 pixels */ - /* Cover the border of the side-menu-widget-item */ - margin-top: -1px; - margin-bottom: -1px; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow { - background-size: auto, 1px 100%; - background-repeat: no-repeat; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-position: center right, top right; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-position: center left, top left; -} - -.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: url(itemArrow-dark-ltr.svg), linear-gradient(to right, #000, #000); -} - -.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url(itemArrow-dark-rtl.svg), linear-gradient(to right, #000, #000); -} - -.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: url(itemArrow-ltr.svg), linear-gradient(to right, #aaa, #aaa); -} - -.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url(itemArrow-rtl.svg), linear-gradient(to right, #aaa, #aaa); -} - -/* SideMenuWidget items contents */ - -.side-menu-widget-item-contents { - padding: 4px; - /* To avoid having content overlapping the arrow image. */ - -moz-padding-end: 8px; -} - -.side-menu-widget-item-other { - /* To avoid having content overlapping the arrow image. */ - -moz-padding-end: 8px; - /* To compensate for the .side-menu-widget-item-contents padding. */ - -moz-margin-start: -4px; - -moz-margin-end: -8px; -} - -.side-menu-widget-item-other:first-of-type { - margin-top: 4px; -} - -.side-menu-widget-item-other:last-of-type { - margin-bottom: -4px; -} - -.theme-dark .side-menu-widget-item-other { - background-color: rgba(0,0,0,.1); -} - -.theme-light .side-menu-widget-item-other { - background-color: rgba(128,128,128,.1); -} - -.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other { - background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */ - color: var(--theme-selection-color); -} - -.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other { - background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */ - color: var(--theme-body-color); -} - -.side-menu-widget-item.selected .side-menu-widget-item-other.selected { - background-color: transparent; - color: var(--theme-selection-color); -} - -/* SideMenuWidget checkboxes */ - -.side-menu-widget-group-checkbox { - margin: 0; - -moz-margin-end: 4px; -} - -.side-menu-widget-item-checkbox { - margin: 0; - -moz-margin-start: 4px; -} - -/* SideMenuWidget misc */ - -.theme-dark .side-menu-widget-container, -.theme-dark .side-menu-widget-empty-text { - background-color: var(--theme-toolbar-background); -} - -.side-menu-widget-empty-text { - padding: 4px 8px; -} - -/* VariablesView */ - -.variables-view-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.variables-view-empty-notice { - padding: 2px; -} - -.variables-view-empty-notice { - color: var(--theme-body-color-alt); -} - -.variables-view-scope:focus > .title, -.variable-or-property:focus > .title { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.variables-view-scope > .title { - border-top-width: 1px; - border-top-style: solid; - margin-top: -1px; -} - -/* Generic variables traits */ - -.variables-view-variable:not(:last-child) { - border-bottom: 1px solid rgba(128, 128, 128, .15); -} - -.variables-view-variable > .title > .name { - font-weight: 600; -} - -/* Generic variables *and* properties traits */ - -.variable-or-property:focus > .title > label { - color: inherit !important; -} - -.variables-view-container .theme-twisty { - margin: 2px; -} - -.variable-or-property > .title > .theme-twisty { - -moz-margin-start: 5px; -} - -.variable-or-property:not([untitled]) > .variables-view-element-details { - -moz-margin-start: 7px; -} - -/* Traits applied when variables or properties are changed or overridden */ - -.variable-or-property:not([overridden]) { - transition: background 1s ease-in-out; -} - -.variable-or-property:not([overridden])[changed] { - transition-duration: .4s; -} - -.variable-or-property[overridden] { - background: rgba(128,128,128,0.05); -} - -.variable-or-property[overridden] .title > label { - /* Cross out the title for this variable and all child properties. */ - font-style: italic; - text-decoration: line-through; - border-bottom: none !important; - color: rgba(128,128,128,0.9); - opacity: 0.7; -} - -/* Traits applied when variables or properties are editable */ - -.variable-or-property[editable] > .title > .value { - cursor: text; -} - -.variable-or-property[overridden] .title > .value { - /* Disallow editing this variable and all child properties. */ - pointer-events: none; -} - -/* Custom configurable/enumerable/writable or frozen/sealed/extensible - * variables and properties */ - -.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { - opacity: 0.6; -} - -.variable-or-property-non-writable-icon { - background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat; - background-size: cover; - width: 16px; - height: 16px; -} - -@media (min-resolution: 1.1dppx) { - .variable-or-property-non-writable-icon { - background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); - } -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label { - height: 16px; - -moz-padding-end: 4px; -} - -.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { - color: #666; -} - -/* Aligned values */ - -.variables-view-container[aligned-values] .title > .separator { - -moz-box-flex: 1; -} - -.variables-view-container[aligned-values] .title > .value { - -moz-box-flex: 0; - width: 70vw; -} - -.variables-view-container[aligned-values] .title > .element-value-input { - width: calc(70vw - 10px); -} - -/* Actions first */ - -.variables-view-open-inspector { - -moz-box-ordinal-group: 1; -} - -.variables-view-edit, -.variables-view-add-property { - -moz-box-ordinal-group: 2; -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label, -.variable-or-property-non-writable-icon { - -moz-box-ordinal-group: 3; -} - -.variables-view-delete { - -moz-box-ordinal-group: 4; -} - -.variables-view-container[actions-first] .variables-view-delete, -.variables-view-container[actions-first] .variables-view-add-property, -.variables-view-container[actions-first] .variables-view-open-inspector { - -moz-box-ordinal-group: 0; -} - -.variables-view-container[actions-first] [invisible] { - visibility: hidden; -} - -/* Variables and properties tooltips */ - -.variable-or-property > tooltip > label { - margin: 0 2px 0 2px; -} - -.variable-or-property[non-enumerable] > tooltip > label.enumerable, -.variable-or-property[non-configurable] > tooltip > label.configurable, -.variable-or-property[non-writable] > tooltip > label.writable, -.variable-or-property[non-extensible] > tooltip > label.extensible { - color: #800; - text-decoration: line-through; -} - -.variable-or-property[overridden] > tooltip > label.overridden { - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000; -} - -.variable-or-property[safe-getter] > tooltip > label.WebIDL { - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000; - color: #080; -} - -/* Variables and properties editing */ - -.variables-view-delete { - background: url("chrome://browser/skin/devtools/vview-delete.png"); - background-size: cover; - width: 16px; - height: 16px; -} - -@media (min-resolution: 1.1dppx) { - .variables-view-delete { - background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); - } -} - -.variables-view-delete:hover { - background-position: 16px; -} - -.variables-view-delete:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-delete { - background-position: 0px; -} - -.variables-view-edit { - background: url("chrome://browser/skin/devtools/vview-edit.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; -} - -@media (min-resolution: 1.1dppx) { - .variables-view-edit { - background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); - } -} - -.variables-view-edit:hover { - background-position: 16px; -} - -.variables-view-edit:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-edit { - background-position: 0px; -} - -.variables-view-open-inspector { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; -} - -@media (min-resolution: 1.1dppx) { - .variables-view-open-inspector { - background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); - } -} - -.variables-view-open-inspector:hover { - background-position: 16px; -} - -.variables-view-open-inspector:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-open-inspector { - background-position: 0px; -} - -/* Variables and properties input boxes */ - -.variable-or-property > .title > .separator + .element-value-input { - -moz-margin-start: -2px !important; - -moz-margin-end: 2px !important; -} - -.variable-or-property > .title > .separator[hidden=true] + .element-value-input { - -moz-margin-start: 4px !important; - -moz-margin-end: 2px !important; -} - -.element-name-input { - -moz-margin-start: -2px !important; - -moz-margin-end: 2px !important; - font-weight: 600; -} - -.element-value-input, -.element-name-input { - border: 1px solid rgba(128, 128, 128, .5) !important; - border-radius: 0; - color: inherit; -} - -/* Variables and properties searching */ - -.variable-or-property[unmatched] { - border: none; - margin: 0; -} - -/* Canvas graphs */ - -.graph-widget-container { - position: relative; -} - -.graph-widget-canvas { - width: 100%; - height: 100%; -} - -.graph-widget-canvas[input=hovering-background] { - cursor: text; -} - -.graph-widget-canvas[input=hovering-region] { - cursor: pointer; -} - -.graph-widget-canvas[input=hovering-selection-start-boundary], -.graph-widget-canvas[input=hovering-selection-end-boundary], -.graph-widget-canvas[input=adjusting-selection-boundary] { - cursor: col-resize; -} - -.graph-widget-canvas[input=adjusting-view-area] { - cursor: grabbing; -} - -.graph-widget-canvas[input=hovering-selection-contents] { - cursor: grab; -} - -.graph-widget-canvas[input=dragging-selection-contents] { - cursor: grabbing; -} - -/* Line graph widget */ - -.line-graph-widget-gutter { - position: absolute; - width: 10px; - height: 100%; - top: 0; - left: 0; - pointer-events: none; - -moz-border-end: 1px solid; -} - -.theme-light .line-graph-widget-gutter { - background: rgba(255,255,255,0.75); - -moz-border-end-color: rgba(255,255,255,0.25); -} - -.theme-dark .line-graph-widget-gutter { - background: rgba(0,0,0,0.5); - -moz-border-end-color: rgba(0,0,0,0.25); -} - -.line-graph-widget-gutter-line { - position: absolute; - width: 100%; - border-top: 1px solid; -} - -.line-graph-widget-gutter-line[type=maximum] { - border-color: #2cbb0f; -} - -.line-graph-widget-gutter-line[type=minimum] { - border-color: #ed2655; -} - -.line-graph-widget-gutter-line[type=average] { - border-color: #d97e00; -} - -.line-graph-widget-tooltip { - position: absolute; - border-radius: 2px; - line-height: 15px; - -moz-padding-start: 6px; - -moz-padding-end: 6px; - transform: translateY(-50%); - font-size: 0.8rem !important; - z-index: 1; - pointer-events: none; -} - -.theme-light .line-graph-widget-tooltip { - background: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip { - background: rgba(0,0,0,0.5); -} - -.line-graph-widget-tooltip[with-arrows=true]::before { - content: ""; - position: absolute; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - top: calc(50% - 3px); -} - -.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end: 3px solid; - left: -3px; -} - -.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start: 3px solid; - right: -3px; -} - -.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(0,0,0,0.5); -} - -.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(0,0,0,0.5); -} - -.line-graph-widget-tooltip[type=maximum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=minimum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=average] { - right: 4px; -} - -.line-graph-widget-tooltip > [text=info] { - color: var(--theme-content-color1); -} - -.line-graph-widget-tooltip > [text=value] { - -moz-margin-start: 3px; -} - -.line-graph-widget-tooltip > [text=metric] { - -moz-margin-start: 1px; - color: var(--theme-content-color3); -} - -.theme-light .line-graph-widget-tooltip > [text=value], -.theme-light .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(255,255,255,0.5), - -1px 0px rgba(255,255,255,0.5), - 0px -1px rgba(255,255,255,0.5), - 0px 1px rgba(255,255,255,0.5); -} - -.theme-dark .line-graph-widget-tooltip > [text=value], -.theme-dark .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(0,0,0,0.5), - -1px 0px rgba(0,0,0,0.5), - 0px -1px rgba(0,0,0,0.5), - 0px 1px rgba(0,0,0,0.5); -} - -.line-graph-widget-tooltip[type=maximum] > [text=value] { - color: var(--theme-highlight-green); -} - -.line-graph-widget-tooltip[type=minimum] > [text=value] { - color: var(--theme-highlight-red); -} - -.line-graph-widget-tooltip[type=average] > [text=value] { - color: var(--theme-highlight-orange); -} - -/* Bar graph widget */ - -.bar-graph-widget-legend { - position: absolute; - top: 4px; - left: 8px; - color: #292e33; - font-size: 80%; - pointer-events: none; -} - -.bar-graph-widget-legend-item { - float: left; - -moz-margin-end: 8px; -} - -.bar-graph-widget-legend-item > [view="color"], -.bar-graph-widget-legend-item > [view="label"] { - vertical-align: middle; -} - -.bar-graph-widget-legend-item > [view="color"] { - display: inline-block; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-radius: 1px; - -moz-margin-end: 4px; - pointer-events: all; - cursor: pointer; -} - -.bar-graph-widget-legend-item > [view="label"] { - text-shadow: 1px 0px rgba(255,255,255,0.8), - -1px 0px rgba(255,255,255,0.8), - 0px -1px rgba(255,255,255,0.8), - 0px 1px rgba(255,255,255,0.8); -} - -/* Charts */ - -.generic-chart-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.theme-dark .generic-chart-container { - color: var(--theme-selection-color); -} - -.theme-light .generic-chart-container { - color: var(--theme-body-color-alt); -} - -.chart-colored-blob { - fill: var(--theme-content-color2); - background: var(--theme-content-color2); -} - -/* Charts: Pie */ - -.pie-chart-slice { - stroke-width: 1px; - cursor: pointer; -} - -.theme-dark .pie-chart-slice { - stroke: rgba(0,0,0,0.2); -} - -.theme-light .pie-chart-slice { - stroke: rgba(255,255,255,0.8); -} - -.theme-dark .pie-chart-slice[largest] { - stroke-width: 2px; - stroke: #fff; -} - -.theme-light .pie-chart-slice[largest] { - stroke: #000; -} - -.pie-chart-label { - text-anchor: middle; - dominant-baseline: middle; - pointer-events: none; -} - -.theme-dark .pie-chart-label { - fill: #000; -} - -.theme-light .pie-chart-label { - fill: #fff; -} - -.pie-chart-container[slices="1"] > .pie-chart-slice { - stroke-width: 0px; -} - -.pie-chart-slice, -.pie-chart-label { - transition: all 0.1s ease-out; -} - -.pie-chart-slice:not(:hover):not([focused]), -.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { - transform: none !important; -} - -/* Charts: Table */ - -.table-chart-title { - padding-bottom: 10px; - font-size: 120%; - font-weight: 600; -} - -.table-chart-row { - margin-top: 1px; - cursor: pointer; -} - -.table-chart-grid:hover > .table-chart-row { - transition: opacity 0.1s ease-in-out; -} - -.table-chart-grid:not(:hover) > .table-chart-row { - transition: opacity 0.2s ease-in-out; -} - -.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover), -.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) { - opacity: 0.4; -} - -.table-chart-row-box { - width: 8px; - height: 1.5em; - -moz-margin-end: 10px; -} - -.table-chart-row-label { - width: 8em; - -moz-padding-end: 6px; - cursor: inherit; -} - -.table-chart-totals { - margin-top: 8px; - padding-top: 6px; -} - -.table-chart-totals { - border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */ -} - -.table-chart-summary-label { - font-weight: 600; - padding: 1px 0px; -} - -.theme-dark .table-chart-summary-label { - color: var(--theme-selection-color); -} - -.theme-light .table-chart-summary-label { - color: var(--theme-body-color); -} - -/* Table Widget */ - -/* Table body */ - -.table-widget-body > .devtools-side-splitter { - border: none; -} - -.table-widget-body { - overflow: auto; -} - -.table-widget-body, -.table-widget-empty-text { - background-color: var(--theme-body-background); -} - -/* Column Headers */ - -.table-widget-column-header, -.table-widget-cell { - -moz-border-end: 1px solid var(--table-splitter-color) !important; -} - -/* Table widget column header colors are taken from netmonitor.inc.css to match - the look of both the tables. This needs to be updated along with netmonitor - header colors in bug 951714 */ - -.table-widget-column-header { - background: rgba(0,0,0,0); - position: sticky; - top: 0; - width: 100%; - padding: 5px 0 0 !important; - color: inherit; - text-align: center; - font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; -} - -.table-widget-column-header:hover { - background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)); -} - -.table-widget-column-header:hover:active { - background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)); -} - -.table-widget-column-header:not(:active)[sorted] { - background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); -} - -.table-widget-column-header:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), - linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); - background-size: 100% 1px, auto; - background-repeat: no-repeat, repeat; -} - -.table-widget-column-header:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), - linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); - background-size: 100% 1px, auto; - background-repeat: no-repeat, repeat; - background-position: bottom; -} - -/* Cells */ - -.table-widget-cell { - width: 100%; - padding: 3px 4px; - background-clip: padding-box; - min-width: 100px; - -moz-user-focus: normal; - margin-bottom: -1px !important; - border-bottom: 1px solid transparent; - color: var(--theme-body-color); -} - -.table-widget-cell:last-child { - border-bottom: 1px solid var(--table-splitter-color); -} - -:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.table-widget-cell:not(.theme-selected)[odd] { - background: var(--table-zebra-background); -} - -.table-widget-cell.flash-out { - animation: flash-out 0.5s ease-in; -} - -@keyframes flash-out { - to { - background: var(--theme-contrast-background); - } -} - -/* Empty text and initial text */ - -.table-widget-empty-text { - display: none; - text-align: center; - font-size: large; - margin-top: -20px !important; -} - -.table-widget-body:empty + .table-widget-empty-text:not([value=""]), -.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { - display: block; -} - -/* Tree Widget */ - -.tree-widget-container { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - list-style: none; - overflow: hidden; - -moz-margin-end: 40px; -} - -.tree-widget-container:-moz-focusring, -.tree-widget-container *:-moz-focusring { - outline-style: none; -} - -.tree-widget-empty-text { - padding: 10px 20px; - font-size: medium; - background: transparent; - pointer-events: none; -} - -/* Tree Item */ - -.tree-widget-container .tree-widget-item { - padding: 2px 0px 4px; - /* OSX has line-height 14px by default, which causes weird alignment issues - * because of 20px high icons. thus making line-height consistent with that of - * windows. - */ - line-height: 17px !important; - display: inline-block; - width: 100%; - word-break: keep-all; /* To prevent long urls like http://foo.com/bar from - breaking in multiple lines */ -} - -.tree-widget-container .tree-widget-children { - margin: 0; - padding: 0; - list-style: none; -} - -.tree-widget-item[level="1"] { - font-weight: 700; -} - -/* Twisties */ -.tree-widget-item::before { - content: ""; - width: 14px; - height: 14px; - float: left; - margin: 3px 2px -3px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-size: 56px 28px; - cursor: pointer; - background-position: -28px -14px; -} - -.tree-widget-item:-moz-locale-dir(rtl)::before { - float: right; - transform: scaleX(-1); -} - -.theme-light .tree-widget-item:not(.theme-selected)::before { - background-position: 0 -14px; -} - -.tree-widget-item[empty]::before { - background: transparent; -} - -.tree-widget-item[expanded]::before { - background-position: -42px -14px; -} - -.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before { - background-position: -14px -14px; -} - -.tree-widget-item + ul { - overflow: hidden; - animation: collapse-tree-item 0.2s; - max-height: 0; -} - -.tree-widget-item[expanded] + ul { - animation: expand-tree-item 0.3s; - max-height: unset; -} - -@keyframes collapse-tree-item { - from { - max-height: 300px; - } - to { - max-height: 0; - } -} - -@keyframes expand-tree-item { - from { - max-height: 0; - } - to { - max-height: 500px; - } -} - -@media (min-resolution: 1.1dppx) { - .tree-widget-item:before { - background-image: url("chrome://browser/skin/devtools/controls@2x.png"); - } -} - -/* Indentation of child items in the tree */ - -/* For level > 6 */ -.tree-widget-item[level] + ul > li > .tree-widget-item { - -moz-padding-start: 98px; -} - -/* First level */ -.tree-widget-item[level="1"] + ul > li > .tree-widget-item { - -moz-padding-start: 14px; -} - -/* Second level */ -.tree-widget-item[level="2"] + ul > li > .tree-widget-item { - -moz-padding-start: 28px; -} - -/* Third level */ -.tree-widget-item[level="3"] + ul > li > .tree-widget-item { - -moz-padding-start: 42px; -} - -/* Fourth level */ -.tree-widget-item[level="4"] + ul > li > .tree-widget-item { - -moz-padding-start: 56px; -} - -/* Fifth level */ -.tree-widget-item[level="5"] + ul > li > .tree-widget-item { - -moz-padding-start: 70px; -} - -/* Sixth level */ -.tree-widget-item[level="6"] + ul > li > .tree-widget-item { - -moz-padding-start: 84px; -} - -/* Custom icons for certain tree items indicating the type of the item */ - -.tree-widget-item[type]::after { - content: ""; - float: left; - width: 16px; - height: 17px; - -moz-margin-end: 4px; - background-repeat: no-repeat; - background-size: 20px auto; - background-position: 0 0; - background-size: auto 20px; - opacity: 0.75; -} - -.tree-widget-item.theme-selected[type]::after { - opacity: 1; -} - -.tree-widget-item:-moz-locale-dir(rtl)::after { - float: right; -} - -.theme-light .tree-widget-item.theme-selected[type]::after, -.theme-dark .tree-widget-item[type]::after { - filter: invert(1); -} - -.tree-widget-item[type="dir"]::after { - background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg); - background-position: 2px 0; - background-size: auto 16px; - width: 20px; -} - -.tree-widget-item[type="dir"][expanded]:not([empty])::after { - background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg); -} - -.tree-widget-item[type="url"]::after { - background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); - background-size: auto 18px; - width: 18px; -} - -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* Manifest Editor overrides */ - -.variables-view-container.manifest-editor { - background-color: #F5F5F5; - padding: 20px 2px; -} - -.manifest-editor .variable-or-property:focus > .title { - background-color: #EDEDED; - color: #000; - border-radius: 4px; -} - -.manifest-editor .variables-view-property > .title > .name { - color: #27406A; -} - -.manifest-editor .variable-or-property > .title > label, -.manifest-editor textbox { - font-family: monospace; -} - -.manifest-editor .variable-or-property > .title > .token-string { - color: #54BC6A; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-boolean, -.manifest-editor .variable-or-property > .title > .token-number { - color: #009BD4; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-undefined { - color: #bbb; -} - -.manifest-editor .variable-or-property > .title > .token-null { - color: #999; -} - -.manifest-editor .variable-or-property > .title > .token-other { - color: #333; -} - -.manifest-editor .variables-view-variable { - border-bottom: none; -} - -.manifest-editor .variables-view-delete, -.manifest-editor .variables-view-delete:hover, -.manifest-editor .variables-view-delete:active, -.manifest-editor .variable-or-property:focus .variables-view-delete, -.manifest-editor .variables-view-add-property, -.manifest-editor .variables-view-add-property:hover, -.manifest-editor .variables-view-add-property:active, -.manifest-editor .variable-or-property:focus .variables-view-add-property { - list-style-image: none; - -moz-image-region: initial; -} - -.manifest-editor .variables-view-delete::before, -.manifest-editor .variables-view-add-property::before { - width: 11px; - height: 11px; - content: ""; - display: inline-block; - background-size: 11px auto; -} - -.manifest-editor .variables-view-delete::before { - background-image: url("app-manager/remove.svg"); -} - -.manifest-editor .variables-view-add-property::before { - background-image: url("app-manager/add.svg"); - -moz-margin-end: 2px; -} |