diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/dark-theme.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/devtools/dark-theme.css | 1463 |
1 files changed, 0 insertions, 1463 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css deleted file mode 100644 index 22480b2..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ /dev/null @@ -1,1463 +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/. */ - -/* Colors are taken from: - * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. - * Changes should be kept in sync with commandline.css and commandline.inc.css. - */ -:root { - --theme-body-background: #14171a; - --theme-sidebar-background: #181d20; - --theme-contrast-background: #b28025; - - --theme-tab-toolbar-background: #252c33; - --theme-toolbar-background: #343c45; - --theme-selection-background: #1d4f73; - --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); - --theme-selection-color: #f5f7fa; - --theme-splitter-color: black; - --theme-comment: #757873; - - --theme-body-color: #8fa1b2; - --theme-body-color-alt: #b6babf; - --theme-content-color1: #a9bacb; - --theme-content-color2: #8fa1b2; - --theme-content-color3: #5f7387; - - --theme-highlight-green: #70bf53; - --theme-highlight-blue: #46afe3; - --theme-highlight-bluegrey: #5e88b0; - --theme-highlight-purple: #6b7abb; - --theme-highlight-lightorange: #d99b28; - --theme-highlight-orange: #d96629; - --theme-highlight-red: #eb5368; - --theme-highlight-pink: #df80ff; - - /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ - --theme-graphs-green: #70bf53; - --theme-graphs-blue: #46afe3; - --theme-graphs-bluegrey: #5e88b0; - --theme-graphs-purple: #df80ff; - --theme-graphs-yellow: #d99b28; - --theme-graphs-red: #eb5368; - --theme-graphs-grey: #757873; -} - -.theme-body { - background: var(--theme-body-background); - color: var(--theme-body-color); -} - -.theme-sidebar { - background: var(--theme-sidebar-background); - color: var(--theme-content-color1); -} - -::-moz-selection { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-darker { - background-color: var(--theme-selection-background-semitransparent); -} - -.theme-selected, -.CodeMirror-hint-active { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-contrast, -.variable-or-property:not([overridden])[changed] { - background: var(--theme-contrast-background); -} - -.theme-link, -.cm-s-mozilla .cm-link { - color: var(--theme-highlight-blue); -} - -/* - * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion - * failures in debug builds. - */ -.theme-link:visited, -.cm-s-mozilla .cm-link:visited, -.CodeMirror-Tern-type { - color: var(--theme-highlight-blue); -} - - -.theme-comment, -.cm-s-mozilla .cm-meta, -.cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment, -.variable-or-property .token-undefined, -.variable-or-property .token-null, -.CodeMirror-Tern-completion-unknown:before { - color: var(--theme-comment); -} - -.theme-gutter { - background-color: #0f171f; - color: var(--theme-content-color3); - border-color: #303b47; -} - -.theme-separator { /* grey */ - border-color: #303b47; -} - -.theme-fg-color1, -.cm-s-mozilla .cm-number, -.variable-or-property .token-number, -.variable-or-property[return] > .title > .name, -.variable-or-property[scope] > .title > .name { - color: var(--theme-highlight-green); -} - -.CodeMirror-Tern-completion-number:before { - background-color: #5c9966; -} - -.theme-fg-color2, -.cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-variable, -.cm-s-mozilla .cm-def, -.cm-s-mozilla .cm-property, -.cm-s-mozilla .cm-qualifier, -.variables-view-variable > .title > .name { - color: var(--theme-highlight-blue); -} - -.CodeMirror-Tern-completion-object:before { - background-color: #3689b2; -} - -.cm-s-mozilla .cm-unused-line { - text-decoration: line-through; - text-decoration-color: #0072ab; -} - -.cm-s-mozilla .cm-executed-line { - background-color: #133c26; -} - -.theme-fg-color3, -.cm-s-mozilla .cm-builtin, -.cm-s-mozilla .cm-tag, -.cm-s-mozilla .cm-header, -.cm-s-mozilla .cm-bracket, -.variables-view-property > .title > .name { - color: var(--theme-highlight-pink); -} - -.CodeMirror-Tern-completion-array:before { - background-color: var(--theme-highlight-bluegrey); -} - -.theme-fg-color4 { - color: var(--theme-highlight-purple); -} - -.theme-fg-color5, -.cm-s-mozilla .cm-keyword { - color: var(--theme-highlight-lightorange); -} - -.theme-fg-color6, -.cm-s-mozilla .cm-string, -.cm-s-mozilla .cm-string-2, -.variable-or-property .token-string, -.CodeMirror-Tern-farg { - color: var(--theme-highlight-orange); -} - -.CodeMirror-Tern-completion-string:before, -.CodeMirror-Tern-completion-fn:before { - background-color: #b26b47; -} - -.theme-fg-color7, -.cm-s-mozilla .cm-atom, -.cm-s-mozilla .cm-quote, -.cm-s-mozilla .cm-error, -.variable-or-property .token-boolean, -.variable-or-property .token-domnode, -.variable-or-property[exception] > .title > .name { - color: var(--theme-highlight-red); -} - -.CodeMirror-Tern-completion-bool:before { - background-color: #bf5656; -} - -.variable-or-property .token-domnode { - font-weight: bold; -} - -.theme-toolbar, -.devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs, -.CodeMirror-dialog { /* General toolbar styling */ - color: var(--theme-body-color-alt); - background-color: var(--theme-toolbar-background); - border-color: hsla(210,8%,5%,.6); -} - -.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ - color: black; -} - -.ruleview-swatch, -.computedview-colorswatch { - box-shadow: 0 0 0 1px #818181; -} - -/* CodeMirror specific styles. - * Best effort to match the existing theme, some of the colors - * are duplicated here to prevent weirdness in the main theme. */ - -.CodeMirror { /* Inherit platform specific font sizing and styles */ - font-family: inherit; - font-size: inherit; - background: transparent; -} - -.CodeMirror pre, -.cm-s-mozilla .cm-variable-2, -.cm-s-mozilla .cm-variable-3, -.cm-s-mozilla .cm-operator, -.cm-s-mozilla .cm-special { - color: var(--theme-content-color1); -} - -.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { - border-left: solid 1px #fff; -} - -.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ - background: rgb(185, 215, 253); -} - -.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ - background: rgb(176, 176, 176); -} - -.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ - background: rgba(185, 215, 253, .15); -} - -div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ - outline: solid 1px rgba(255, 255, 255, .25); - color: white; -} - -/* Highlight for a line that contains an error. */ -div.CodeMirror div.error-line { - background: rgba(255,0,0,0.2); -} - -/* Highlight for a line that represents a stack frame's location. */ -div.CodeMirror div.debug-line { - background: rgba(0,128,255,0.1); - box-shadow: - 0 1px 0 0 rgba(0,128,255,0.4), - 0 -1px 0 0 rgba(0,128,255,0.4); -} - -/* Generic highlighted text */ -div.CodeMirror span.marked-text { - background: rgba(255,255,0,0.2); - border: 1px dashed rgba(192,192,0,0.6); - -moz-margin-start: -1px; - -moz-margin-end: -1px; -} - -/* Highlight for evaluating current statement. */ -div.CodeMirror span.eval-text { - background-color: #556; -} - -.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ - color: var(--theme-content-color3); -} - -.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ - border-right-color: var(--theme-toolbar-background); - background-color: var(--theme-sidebar-background); -} - -.cm-s-markup-view pre { - line-height: 1.4em; - min-height: 1.4em; -} - -/* Twisty and checkbox controls */ -.theme-twisty, .theme-checkbox { - width: 14px; - height: 14px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-size: 56px 28px; -} - -.theme-twisty { - cursor: pointer; - background-position: -28px -14px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty[open] { - background-position: -42px -14px; -} - -.theme-twisty[invisible] { - visibility: hidden; -} - -.theme-checkbox { - display: inline-block; - border: 0; - padding: 0; - outline: none; - background-position: -28px 0; -} - -.theme-checkbox[checked] { - background-position: -42px 0; -} - -@media (min-resolution: 1.1dppx) { - .theme-twisty, .theme-checkbox { - background-image: url("chrome://browser/skin/devtools/controls@2x.png"); - } -} - -/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ - -.theme-tooltip-panel .panel-arrowcontent { - padding: 5px; - background: rgba(19, 28, 38, .9); - border-radius: 5px; - box-shadow: none; - border: 3px solid #434850; -} - -/* Overring panel arrow images to fit with our light and dark themes */ - -.theme-tooltip-panel .panel-arrow[side="top"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); - margin-bottom: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); - margin-top: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="left"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); - margin-right: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); - margin-left: -4px; -} - -@media (min-resolution: 1.1dppx) { - .theme-tooltip-panel .panel-arrow[side="top"], - .theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); - } - - .theme-tooltip-panel .panel-arrow[side="left"], - .theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png"); - } -} - -.theme-tooltip-panel .devtools-tooltip-simple-text { - color: white; - border-bottom: 1px solid #434850; -} - -.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { - border-bottom: 0; -} - -.devtools-textinput, -.devtools-searchinput { - background-color: rgba(24, 29, 32, 1); - color: rgba(184, 200, 217, 1); -} - -.CodeMirror-Tern-fname { - color: #f7f7f7; -} - -.CodeMirror-hints, -.CodeMirror-Tern-tooltip { - box-shadow: 0 0 4px rgba(255, 255, 255, .3); - background-color: #0f171f; - color: var(--theme-body-color); -} - - - -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light { - --searchbox-background-color: #ffee99; - --searchbox-border-color: #ffbf00; - --searcbox-no-match-background-color: #ffe5e5; - --searcbox-no-match-border-color: #e52e2e; -} - -.theme-dark { - --searchbox-background-color: #4d4222; - --searchbox-border-color: #d99f2b; - --searcbox-no-match-background-color: #402325; - --searcbox-no-match-border-color: #cc3d3d; -} - -/* Toolbars */ -.devtools-toolbar, -.devtools-sidebar-tabs tabs { - -moz-appearance: none; - padding: 0; - border-width: 0; - border-bottom-width: 1px; - border-style: solid; - height: 24px; - line-height: 24px; - box-sizing: border-box; -} - -.devtools-toolbar { - padding: 0 3px; -} - -.devtools-toolbar checkbox { - margin: 0 2px; - padding: 0; - line-height: -moz-block-height; -} -.devtools-toolbar checkbox .checkbox-check { - margin: 0; - padding: 0; - vertical-align: bottom; -} -.devtools-toolbar checkbox .checkbox-label-box { - border: none !important; /* overrides .checkbox-label-box from checkbox.css */ -} -.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { - margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ - padding: 0; -} - -/* Toolbar buttons */ -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - background: transparent; - min-width: 78px; - min-height: 18px; - padding: 1px; - text-shadow: none; - border: none; - border-radius: 0; - margin: 2px 3px; - color: inherit; - transition: background 0.05s ease-in-out; - color: var(--theme-content-color1); - background-color: var(--theme-toolbar-background); -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton[standalone] { - -moz-margin-end: 5px; - border-width: 1px; - border-style: solid; -} -.devtools-toolbarbutton[label][standalone] { - min-height: 2em; -} - -.devtools-toolbarbutton:not([label]), -.devtools-toolbarbutton[text-as-image] { - min-width: 32px; -} - -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { - -moz-padding-start: 5px; - -moz-padding-end: 5px; - min-width: inherit; -} - -/* Command buttons with menupopups should be styled slightly differently - - no background color and a bit more narrow */ -#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { - background: transparent; -} -#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { - padding: 0 2px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbar .devtools-toolbarbutton { - border-width: 0; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { - margin: 0; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - color: inherit; - border-width: 0; - -moz-box-orient: horizontal; - padding: 0; -} - -.devtools-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-margin-end: 4px; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - display: -moz-box; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - min-width: 16px; -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { - -moz-appearance: none !important; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - padding: 0 3px; -} - -.theme-dark .devtools-menulist, -.theme-dark .devtools-toolbarbutton { - border-color: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-menulist, -.theme-light .devtools-toolbarbutton { - border-color: rgba(170, 170, 170, .5); /* Splitters */ -} - -/* Text-only buttons */ -.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(170, 170, 170, .2); /* Splitter */ -} -.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(0, 0, 0, .2); /* Splitter */ -} - -/* Button States */ -.theme-dark .devtools-toolbarbutton:not([disabled]):hover, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-toolbarbutton[checked=true], -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(29, 79, 115, .7); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-toolbarbutton[checked=true], -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(76, 158, 217, .2); /* Select highlight blue */ -} - -.theme-dark .devtools-menulist[open=true], -.theme-dark .devtools-toolbarbutton[open=true], -.theme-dark .devtools-toolbarbutton[open=true]:hover, -.theme-dark .devtools-toolbarbutton[open=true]:hover:active, -.theme-dark .devtools-toolbarbutton[checked=true]:hover { - background: rgba(29, 79, 115, .8); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-menulist[open=true], -.theme-light .devtools-toolbarbutton[open=true], -.theme-light .devtools-toolbarbutton[open=true]:hover, -.theme-light .devtools-toolbarbutton[open=true]:hover:active, -.theme-light .devtools-toolbarbutton[checked=true]:hover { - background: rgba(76, 158, 217, .4); /* Select highlight blue */ -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/tool-options.svg"); - background: none; - opacity: .8; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - opacity: 1; -} - -/* Toolbar button groups */ -.devtools-toolbarbutton-group > .devtools-toolbarbutton { - margin-left: 1px; - margin-right: 1px; - outline-offset: -3px; - box-shadow: none; -} - -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { - -moz-margin-end: 0; -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { - -moz-margin-start: 3px; -} - -.devtools-separator + .devtools-toolbarbutton { - -moz-margin-start: 1px; -} - -/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ - -.devtools-button { - border: 0 solid var(--theme-splitter-color); - background: var(--theme-toolbar-background); - color: var(--theme-body-color); - margin: 0; - padding: 0; - min-width: 32px; - min-height: 18px; - /* The icon is absolutely positioned in the button using ::before */ - position: relative; -} - -.devtools-button[standalone] { - min-height: 32px; - border-width: 1px; -} - -/* Button States */ -.theme-dark .devtools-button:not([disabled]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-button:not([disabled]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-button[checked] { - background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-button[checked] { - background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ -} - -.devtools-button::before { - content: ""; - display: block; - width: 16px; - height: 16px; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; - background-repeat: no-repeat; -} - -.devtools-button[disabled]::before, -.devtools-button:disabled::before { - opacity: 0.5; -} - -@media (min-resolution: 1.1dppx) { - .devtools-button::before { - background-size: 32px; - } -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - border: 1px solid; - border-radius: 2px; - padding: 4px 6px; - border-color: var(--theme-splitter-color); -} - -.devtools-searchinput { - margin-top: 1px; - margin-bottom: 1px; - padding: 0; - -moz-padding-start: 22px; - -moz-padding-end: 4px; - background-position: 8px center; - background-size: 11px 11px; - background-repeat: no-repeat; - font-size: inherit; -} - -.theme-dark .devtools-searchinput { - background-image: url(magnifying-glass.png); -} - -.theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light.png); -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} - -.devtools-rule-searchbox { - -moz-box-flex: 1; - padding-right: 23px; - width: 100%; - font: inherit; -} - -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); -} - -.devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; -} - -.devtools-no-search-result { - border-color: var(--theme-highlight-red) !important; -} - -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.theme-dark .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); -} - -.theme-light .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -@media (min-resolution: 1.1dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - -/* Close button */ - -.devtools-closebutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.8; -} - -.devtools-closebutton > image { - width: 16px; - height: 16px; - -moz-appearance: none; - background-size: 16px 16px; - background-image: url("chrome://browser/skin/devtools/close@2x.png"); - background-position: center center; - background-repeat: no-repeat; -} - -.devtools-closebutton > .toolbarbutton-icon { - /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must - use evil CSS to give the impression of smaller content */ - margin: -4px; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 1; -} - -/* In-tools sidebar */ -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - -moz-appearance: none; - background: transparent; - padding: 0; - border: 0; -} - -.theme-light .devtools-sidebar-tabs > tabpanels { - background: var(--theme-sidebar-background); - color: var(--theme-body-color); -} - -.devtools-sidebar-tabs tabs { - position: static; - font: inherit; - margin-bottom: 0; - overflow: hidden; -} - -.devtools-sidebar-alltabs { - -moz-appearance: none; - height: 24px; - line-height: 24px; - padding: 0 4px; - margin: 0; - border-width: 0 0 1px 0; - -moz-border-start-width: 1px; - border-style: solid; -} - -.devtools-sidebar-alltabs .toolbarbutton-icon { - display: none; -} - -.devtools-sidebar-tabs tabs > .tabs-right, -.devtools-sidebar-tabs tabs > .tabs-left { - display: none; -} - -.devtools-sidebar-tabs tabs > tab { - -moz-appearance: none; - /* We want to match the height of a toolbar with a toolbarbutton - * First, we need to replicated the padding of toolbar (4px), - * then we need to take the border of the buttons into account (1px). - */ - padding: 0 3px; - margin: 0; - min-width: 78px; - text-align: center; - background-color: transparent; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - -moz-border-start-width: 1px; - border-style: solid; - border-radius: 0; - position: static; - text-shadow: none; -} - -.devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -} - -.devtools-sidebar-tabs tabs > tab:first-child { - -moz-border-start-width: 0; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover { - background: hsla(206,37%,4%,.2); -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { - background: hsla(206,37%,4%,.4); -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: hsla(206,37%,4%,.2); -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { - background: hsla(206,37%,4%,.4); -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected], -.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #1d4f73; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover { - background: #ddd; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { - background: #ddd; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: #ddd; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected], -.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #4c9ed9; -} - -/* Toolbox - moved from toolbox.css. - * Rules that apply to the global toolbox like command buttons, - * devtools tabs, docking buttons, etc. */ - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-controls > toolbarbutton > .toolbarbutton-text, -#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, -.command-button > .toolbarbutton-text { - display: none; -} - -#toolbox-dock-buttons > toolbarbutton > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 16px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-dock-bottom > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png"); -} - -#toolbox-dock-side > image { - background-image: url("chrome://browser/skin/devtools/dock-side@2x.png"); -} - -#toolbox-dock-window > image { - background-image: url("chrome://browser/skin/devtools/undock@2x.png"); -} - -#toolbox-dock-bottom-minimize { - /* Bug 1177463 - The minimize button is currently hidden until we agree on - the UI for it, and until bug 1173849 is fixed too. */ - display: none; -} - -#toolbox-dock-bottom-minimize > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); -} - -#toolbox-dock-bottom-minimize.minimized > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.8; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -.devtools-separator { - margin: 0 2px; - width: 2px; - background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), - linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), - linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; -} - -#toolbox-buttons:empty + .devtools-separator, -.devtools-separator[invisible] { - visibility: hidden; -} - -#toolbox-controls-separator { - margin: 0; -} - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - border: none; - padding: 0 8px; - margin: 0; - width: 32px; - position: relative; -} - -.command-button:hover { - background-color: hsla(206,37%,4%,.2); -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { - background-color: hsla(206,37%,4%,.4); -} - -.command-button > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 64px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} -.command-button:hover > image { - background-position: -16px center; -} -.command-button:hover:active > image { - background-position: -32px center; -} -.command-button[checked=true] > image { - background-position: -48px center; -} -.command-button[open=true] > image { - background-position: 0 center; -} - -#command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); -} - -#command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot.png"); -} - -#command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); -} - -#command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt.png"); -} - -#command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - background-size: 48px 16px; -} - -#command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick.png"); -} - -#command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames.png"); -} - -#command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console.png"); -} - -#command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); -} - -#command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers.png"); -} - -@media (min-resolution: 1.1dppx) { - #command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); - } - - #command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png"); - } - - #command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png"); - } - - #command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png"); - } - - #command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png"); - } - - #command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); - } - - #command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames@2x.png"); - } - - #command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console@2x.png"); - } - - #command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); - } - - #command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); - } -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - min-height: 24px; - border: 0px solid; - border-bottom-width: 1px; - padding: 0; - background: var(--theme-tab-toolbar-background); - border-bottom-color: var(--theme-splitter-color); -} - -.theme-light .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; -} - -.theme-dark .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); - -moz-box-align: center; - min-width: 32px; - min-height: 24px; - max-width: 110px; - margin: 0; - padding: 0; - border-style: solid; - border-width: 0; - -moz-border-start-width: 1px; - -moz-box-align: center; -} - -.theme-dark .devtools-tab { - color: var(--theme-body-color-alt); - border-color: #42484f; -} - -.theme-light .devtools-tab { - color: var(--theme-body-color); - border-color: var(--theme-splitter-color); -} - -.theme-dark .devtools-tab:hover { - background-color: hsla(206,37%,4%,.2); - color: #ced3d9; -} - -.theme-light .devtools-tab:hover { - background-color: rgba(170,170,170,.2); -} - -.theme-dark .devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.4); - color: var(--theme-selection-color); -} - -.theme-light .devtools-tab:hover:active { - background-color: rgba(170,170,170,.4); -} - -.devtools-tab:not([selected])[highlighted] { - box-shadow: 0 2px 0 var(--theme-highlight-green) inset; -} - -.theme-dark .devtools-tab:not([selected])[highlighted] { - background-color: hsla(99,100%,14%,.2); -} - -.theme-light .devtools-tab:not([selected])[highlighted] { - background-color: rgba(44, 187, 15, .2); -} - -.devtools-tab > image { - border: none; - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; - max-height: 16px; - width: 16px; /* Prevents collapse during theme switching */ -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected] > image { - opacity: 1; -} - -.devtools-tabbar .devtools-tab[selected], -.devtools-tabbar .devtools-tab[selected]:hover:active { - color: var(--theme-selection-color); - background-color: var(--theme-selection-background); -} - -.theme-dark .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.2) inset; -} - -.theme-light .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.06) inset; -} - -#toolbox-tabs .devtools-tab[selected], -#toolbox-tabs .devtools-tab[highlighted] { - border-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab[selected]:last-child, -#toolbox-tabs .devtools-tab[highlighted]:last-child { - -moz-padding-end: 1px; -} - -#toolbox-tabs .devtools-tab[selected] + .devtools-tab, -#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { - -moz-border-start-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab:first-child[selected] { - -moz-border-start-width: 0; -} - -#toolbox-tabs .devtools-tab:last-child { - -moz-border-end-width: 1px; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -/* The options tab is special - it doesn't have the same parent - as the other tabs (toolbox-option-container vs toolbox-tabs) */ -#toolbox-option-container .devtools-tab:not([selected]) { - background-color: transparent; -} -#toolbox-option-container .devtools-tab { - border-color: transparent; - border-width: 0; - -moz-padding-start: 1px; -} -#toolbox-tab-options > image { - margin: 0 8px; -} - -/* Invert the colors of certain dark theme images for displaying - * inside of the light theme. - */ -.theme-light .devtools-tab[icon-invertable] > image, -.theme-light #toolbox-dock-buttons > toolbarbutton > image, -.theme-light .command-button-invertable > image, -.theme-light .command-button-invertable:active > image, -.theme-light .devtools-closebutton > image, -.theme-light .devtools-toolbarbutton > image, -.theme-light .devtools-option-toolbarbutton > image, -.theme-light #breadcrumb-separator-normal, -.theme-light .scrollbutton-up > .toolbarbutton-icon, -.theme-light .scrollbutton-down > .toolbarbutton-icon, -.theme-light #black-boxed-message-button .button-icon, -.theme-light .notice-container button .button-icon, -.theme-light #requests-menu-perf-notice-button .button-icon, -.theme-light #requests-menu-network-summary-button .button-icon, -.theme-light .event-tooltip-debugger-icon, -.theme-light .devtools-button::before { - filter: url(filters.svg#invert); -} - -/* Since selected backgrounds are blue, we want to use the normal - * (light) icons. */ -.theme-light .command-button-invertable[checked=true]:not(:active) > image, -.theme-light .devtools-tab[icon-invertable][selected] > image, -.theme-light .devtools-tab[icon-invertable][highlighted] > image, -.theme-light #record-snapshot[checked] > image, -.theme-light #profiler-start[checked] > image, -.theme-light .notice-container button[checked] .button-icon { - filter: none !important; -} - -.theme-light .command-button:hover { - background-color: inherit; -} - -.theme-light .command-button:hover:active, -.theme-light .command-button[checked=true]:not(:hover) { - background-color: inherit; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} - -.devtools-invisible-splitter { - border-color: transparent; -} - -.devtools-horizontal-splitter { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.devtools-side-splitter { - -moz-border-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ -} - -/* Throbbers */ -.devtools-throbber::before { - content: ""; - display: inline-block; - vertical-align: bottom; - -moz-margin-end: 0.5em; - width: 1em; - height: 1em; - border: 2px solid currentColor; - border-right-color: transparent; - border-radius: 50%; - animation: 1.1s linear throbber-spin infinite; -} - -@keyframes throbber-spin { - from { - transform: none; - } - to { - transform: rotate(360deg); - } -} |