From f06074efbeadc6be9f5bca2bfca426b6a94a049d Mon Sep 17 00:00:00 2001 From: Brian Grinstead Date: Mon, 2 Dec 2013 08:57:58 -0600 Subject: [PATCH] Bug 941673 - DevTools themes - move toolbar and tab styles into shared CSS file;r=paul --HG-- rename : browser/devtools/framework/toolbox.css => browser/devtools/framework/options-panel.css --- browser/devtools/framework/options-panel.css | 59 +++ .../devtools/framework/toolbox-options.xul | 3 +- browser/devtools/framework/toolbox.css | 32 -- browser/devtools/framework/toolbox.xul | 2 - browser/devtools/jar.mn | 2 +- browser/themes/linux/devtools/toolbox.css | 288 -------------- browser/themes/linux/jar.mn | 7 +- browser/themes/osx/devtools/common.css | 354 ----------------- browser/themes/osx/devtools/toolbox.css | 274 ------------- browser/themes/osx/jar.mn | 7 +- .../devtools/{common.inc.css => common.css} | 44 +++ browser/themes/shared/devtools/dark-theme.css | 2 + .../themes/shared/devtools/light-theme.css | 2 + .../devtools/toolbars.inc.css} | 326 +++++++++++++--- browser/themes/windows/devtools/common.css | 364 ------------------ browser/themes/windows/devtools/toolbox.css | 283 -------------- browser/themes/windows/jar.mn | 14 +- 17 files changed, 396 insertions(+), 1667 deletions(-) create mode 100644 browser/devtools/framework/options-panel.css delete mode 100644 browser/devtools/framework/toolbox.css delete mode 100644 browser/themes/linux/devtools/toolbox.css delete mode 100644 browser/themes/osx/devtools/common.css delete mode 100644 browser/themes/osx/devtools/toolbox.css rename browser/themes/shared/devtools/{common.inc.css => common.css} (86%) rename browser/themes/{linux/devtools/common.css => shared/devtools/toolbars.inc.css} (53%) delete mode 100644 browser/themes/windows/devtools/common.css delete mode 100644 browser/themes/windows/devtools/toolbox.css diff --git a/browser/devtools/framework/options-panel.css b/browser/devtools/framework/options-panel.css new file mode 100644 index 000000000000..cf3a0a51bff4 --- /dev/null +++ b/browser/devtools/framework/options-panel.css @@ -0,0 +1,59 @@ +/* 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/. */ + +#options-panel-container { + overflow: auto; +} + +#options-panel { + overflow-y: auto; + display: block; +} + +.options-vertical-pane { + display: inline; + float: left; +} + +.options-vertical-pane > label { + display: block; +} + +.options-vertical-pane { + margin: 5px; + width: calc(50% - 30px); + min-width: 400px; + -moz-padding-start: 5px; +} + +.options-vertical-pane > label { + padding: 2px 0; + font-size: 1.4rem; +} + +.options-groupbox { + -moz-margin-start: 15px; + padding: 2px; +} + +.options-groupbox > * { + padding: 2px; +} + +.options-citation-label { + font-size: 1rem !important; + /* !important is required otherwise font-size will still be 1.4rem */ + font-style: italic; + padding: 4px 0 0; /* To align it with the checkbox */ +} + +.options-citation-label + label { + padding: 3px 0 0 !important; /* To align it with the checkbox */ + font-style: italic; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} diff --git a/browser/devtools/framework/toolbox-options.xul b/browser/devtools/framework/toolbox-options.xul index 63dc3a35f6df..2a683fd5d807 100644 --- a/browser/devtools/framework/toolbox-options.xul +++ b/browser/devtools/framework/toolbox-options.xul @@ -7,8 +7,7 @@ %toolboxDTD; ]> - - + diff --git a/browser/devtools/framework/toolbox.css b/browser/devtools/framework/toolbox.css deleted file mode 100644 index 25d5d872043c..000000000000 --- a/browser/devtools/framework/toolbox.css +++ /dev/null @@ -1,32 +0,0 @@ -/* 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/. */ - -.devtools-tab { - -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); - -moz-box-align: center; -} - -#toolbox-controls > toolbarbutton > .toolbarbutton-text, -#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, -.command-button > .toolbarbutton-text { - display: none; -} - -#options-panel-container { - overflow: auto; -} - -#options-panel { - overflow-y: auto; - display: block; -} - -.options-vertical-pane { - display: inline; - float: left; -} - -.options-vertical-pane > label { - display: block; -} diff --git a/browser/devtools/framework/toolbox.xul b/browser/devtools/framework/toolbox.xul index 1d161c2ef184..6507a1410cb8 100644 --- a/browser/devtools/framework/toolbox.xul +++ b/browser/devtools/framework/toolbox.xul @@ -7,9 +7,7 @@ %toolboxDTD; ]> - - diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn index f5c996548c62..8df451b43e38 100644 --- a/browser/devtools/jar.mn +++ b/browser/devtools/jar.mn @@ -75,7 +75,7 @@ browser.jar: content/browser/devtools/framework/toolbox-options.xul (framework/toolbox-options.xul) content/browser/devtools/framework/toolbox-options.js (framework/toolbox-options.js) * content/browser/devtools/framework/toolbox.xul (framework/toolbox.xul) - content/browser/devtools/framework/toolbox.css (framework/toolbox.css) + content/browser/devtools/framework/options-panel.css (framework/options-panel.css) content/browser/devtools/framework/toolbox-process-window.xul (framework/toolbox-process-window.xul) content/browser/devtools/framework/toolbox-process-window.js (framework/toolbox-process-window.js) content/browser/devtools/inspector/inspector.xul (inspector/inspector.xul) diff --git a/browser/themes/linux/devtools/toolbox.css b/browser/themes/linux/devtools/toolbox.css deleted file mode 100644 index 9fb921cd85d7..000000000000 --- a/browser/themes/linux/devtools/toolbox.css +++ /dev/null @@ -1,288 +0,0 @@ -/* 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/. */ - -#toolbox-controls { - margin: 0 4px; -} - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-bottom { - list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); -} - -#toolbox-dock-side { - list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); -} - -#toolbox-dock-window { - list-style-image: url("chrome://browser/skin/devtools/undock.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.6; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -#toolbox-controls-separator { - width: 3px; - background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), - linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), - linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; - -moz-margin-start: 8px; -} - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - padding: 0 8px; - margin: 0; - width: 16px; -} - -.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-paintflashing { - list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-paintflashing:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-paintflashing:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-paintflashing[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-responsive { - list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-responsive:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-responsive:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-responsive[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-tilt { - list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-tilt:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-tilt:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -#command-button-tilt[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-scratchpad { - list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#command-button-scratchpad:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-scratchpad:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - background-image: url("background-noise-toolbar.png"), - linear-gradient(#303840, #2d3640); - border-color: #060a0d; - border-style: solid; - border-width: 1px 0; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, - 0 -1px 0 hsla(206,37%,4%,.1) inset; - min-height: 32px; - padding: 0; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - min-width: 32px; - min-height: 32px; - max-width: 127px; - color: #b6babf; - margin: 0; - padding: 0; - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: left, right; - border-right: 1px solid hsla(206,37%,4%,.45); - -moz-box-align: center; -} - -.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 */ -} - -#toolbox-tab-options > image { - margin: 0 8px; -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected=true] > label { - opacity: 1; -} - -.devtools-tab:hover { - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); - background-size: 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - repeat-x; - background-position: left, right; - color: #ced3d9; -} -.devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.2); - color: #f5f7fa; -} - -.devtools-tab[selected=true] { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), - radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), - linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; - box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; -} - -.devtools-tab:not([selected=true]).highlighted { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), - radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; -} - -.devtools-tab:not(.highlighted) > .highlighted-icon, -.devtools-tab[selected=true] > .highlighted-icon, -.devtools-tab:not([selected=true]).highlighted > .default-icon { - visibility: collapse; -} - -.options-vertical-pane { - margin: 5px; - width: calc(50% - 30px); - min-width: 400px; - -moz-padding-start: 5px; -} - -.options-vertical-pane > label { - padding: 2px 0; - font-size: 1.4rem; -} - -.options-groupbox { - -moz-margin-start: 15px; - padding: 2px; -} - -.options-groupbox > * { - padding: 2px; -} - -.options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ - font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ -} - -.options-citation-label + label { - padding: 3px 0 0 !important; /* To align it with the checkbox */ - font-style: italic; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index fa679297638d..35ac13c92152 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -146,9 +146,9 @@ browser.jar: skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png) skin/classic/browser/tabview/tabview.png (tabview/tabview.png) skin/classic/browser/tabview/tabview.css (tabview/tabview.css) -* skin/classic/browser/devtools/common.css (devtools/common.css) - skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) - skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) +* skin/classic/browser/devtools/common.css (../shared/devtools/common.css) +* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) +* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png) @@ -229,7 +229,6 @@ browser.jar: skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css) skin/classic/browser/devtools/inspector.css (devtools/inspector.css) skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png) - skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css) skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png) skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png) skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png) diff --git a/browser/themes/osx/devtools/common.css b/browser/themes/osx/devtools/common.css deleted file mode 100644 index d38043cf448f..000000000000 --- a/browser/themes/osx/devtools/common.css +++ /dev/null @@ -1,354 +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/. */ - -%include ../shared.inc - -/* Font for code */ - -:root { - font: message-box; -} - -.devtools-monospace { - font-family: Menlo, monospace; -} - -/* Toolbar and Toolbar items */ - -.devtools-toolbar { - -moz-appearance: none; - padding: 4px 3px; - border-bottom-width: 1px; - border-bottom-style: solid; -} - -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - min-width: 78px; - min-height: 22px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - border: 1px solid hsla(210,8%,5%,.45); - border-radius: @toolbarbuttonCornerRadius@; - background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box; - box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15); - color: inherit; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.devtools-menulist { - margin: 0 2px; -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton > .toolbarbutton-text { - margin: 1px 6px; -} - -.devtools-toolbarbutton:not([label]) { - min-width: 32px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbarbutton:not([checked=true]):hover:active { - border-color: hsla(210,8%,5%,.6); - background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3)); - box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); -} - -.devtools-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[checked=true] { - border-color: hsla(210,8%,5%,.6); - background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); - box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); -} - -.devtools-toolbarbutton[checked=true] { - color: hsl(208,100%,60%) !important; -} - -.devtools-toolbarbutton[checked=true]:hover:active { - background-color: hsla(210,8%,5%,.2); -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/option-icon.png"); - -moz-image-region: rect(0px 16px 16px 0px); - background: none; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - -moz-image-region: rect(0px 32px 16px 16px); -} - -.devtools-menulist > .menulist-label-box { - text-align: center; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - background-color: transparent; - display: -moz-box; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - border-width: 0; - min-width: 18px; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - border-width: 0; - -moz-border-end: 1px solid hsla(210,8%,5%,.45); - box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15); - padding: 0 1px; -} - -.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { - box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15); -} - -.devtools-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.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.png"); - border: 0; -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - min-height: 22px; - background-color: transparent; - border: 1px solid hsla(210,8%,5%,.6); - border-radius: 20px; - background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - padding: 3px 8px; - box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset, - 0 0 0 1px hsla(210,16%,76%,.1) inset, - 0 1px 0 hsla(210,16%,76%,.15); - color: inherit; -} - -.devtools-searchinput { - background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - background-repeat: no-repeat; - background-position: 4px center, top left, top left; - padding-top: 0; - padding-bottom: 0; - -moz-padding-start: 18px; - -moz-padding-end: 12px; - font-size: inherit; -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 4px) center, top left, top left; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; -} - -.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder { - opacity: 1.0; - color: hsl(208,10%,66%); -} - -.devtools-no-search-result { - box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35); - border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important; - background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75)); -} - -/* Close button */ - -.devtools-closebutton { - list-style-image: url("chrome://browser/skin/devtools/close.png"); - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.6; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 0.8; -} - -.devtools-closebutton:active { - opacity: 1; -} - -/* Splitters */ - -.devtools-horizontal-splitter { - -moz-appearance: none; - background-image: none; - border-top: 1px solid black; - border-bottom-width: 0; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - position: relative; -} - -.devtools-side-splitter { - -moz-appearance: none; - background-image: none; - border: 0; - -moz-border-start: 1px solid black; - min-width: 0; - width: 3px; - -moz-margin-end: -3px; - position: relative; - cursor: e-resize; -} - -/* In-tools sidebar */ - -.devtools-toolbox-side-iframe { - min-width: 465px; -} - -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - padding: 0; -} - -.devtools-sidebar-tabs > tabs { - -moz-appearance: none; - font: inherit; - position: static; - color: #b6babf; - margin-bottom: 0; - padding: 0; - background-color: #343c45; - border-width: 0 0 1px 0; - border-color: hsla(210,8%,5%,.6); - border-style: solid; - overflow: hidden; -} - -.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: 5px 3px !important; - -moz-padding-start: 6px; - padding: 0; - min-width: 78px; - /* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px. - * -1px because the parent element () comes with a 1px bottom border. - */ - min-height: 32px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - text-align: center; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - position: static; - -moz-margin-start: -1px; -} - -.devtools-sidebar-tabs > tabs > tab:-moz-focusring { - position: static; -} - -.devtools-sidebar-tabs > tabs > tab:first-of-type { - -moz-margin-start: -3px; -} - -.devtools-sidebar-tabs > tabs > tab { - background-size: calc(100% - 2px) 100%, 1px 100%; - background-repeat: no-repeat; - background-position: 1px, 0; -} - -.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab { - background-position: calc(100% - 1px), 100%; -} - -.devtools-sidebar-tabs > tabs > tab:last-of-type { - -moz-border-end-width: 0; -} - -%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) -%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d) - -.devtools-sidebar-tabs > tabs > tab { - background-image: linear-gradient(transparent, transparent), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab { - background-image: linear-gradient(transparent, transparent), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] { - color: #f5f7fa; - background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover { - background-image: linear-gradient(#274f64, #274f64), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active { - background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@; -} - -%include ../../shared/devtools/common.inc.css diff --git a/browser/themes/osx/devtools/toolbox.css b/browser/themes/osx/devtools/toolbox.css deleted file mode 100644 index 38c223249aae..000000000000 --- a/browser/themes/osx/devtools/toolbox.css +++ /dev/null @@ -1,274 +0,0 @@ -/* 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/. */ - -#toolbox-controls { - margin: 0 4px; -} - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-bottom { - list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); -} - -#toolbox-dock-side { - list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); -} - -#toolbox-dock-window { - list-style-image: url("chrome://browser/skin/devtools/undock.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.6; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -/* Command buttons */ - -.command-button { - padding: 0 8px; - margin: 0; - border-width: 0; - width: 16px; -} - -.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-paintflashing { - list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-paintflashing:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-paintflashing:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-paintflashing[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-responsive { - list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-responsive:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-responsive:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-responsive[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-tilt { - list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-tilt:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-tilt:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -#command-button-tilt[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-scratchpad { - list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#command-button-scratchpad:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-scratchpad:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - background-image: url("background-noise-toolbar.png"), - linear-gradient(#303840, #2d3640); - border-color: #060a0d; - border-style: solid; - border-width: 1px 0; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, - 0 -1px 0 hsla(206,37%,4%,.1) inset; - min-height: 32px; - padding: 0; -} - -#toolbox-tabs { - margin: 0; - border-left: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab { - -moz-appearance: none; - min-width: 32px; - min-height: 32px; - max-width: 110px; - color: #b6babf; - margin: 0; - padding: 0; - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: left, right; - border-right: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab > image { - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; - width: 16px; /* Prevents collapse during theme switching */ -} - -#toolbox-tab-options > image { - margin: 0 8px; -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected=true] > image { - opacity: 1; -} - -.devtools-tab:hover { - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); - background-size: 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - repeat-x; - background-position: left, right; - color: #ced3d9; -} -.devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.2); - color: #f5f7fa; -} - -.devtools-tab[selected=true] { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), - radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), - linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; - box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; -} - -.devtools-tab:not([selected=true]).highlighted { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), - radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; -} - -.devtools-tab:not(.highlighted) > .highlighted-icon, -.devtools-tab[selected=true] > .highlighted-icon, -.devtools-tab:not([selected=true]).highlighted > .default-icon { - visibility: collapse; -} - -.options-vertical-pane { - margin: 5px; - width: calc(50% - 30px); - min-width: 400px; - -moz-padding-start: 5px; -} - -.options-vertical-pane > label { - padding: 2px 0; - font-size: 1.4rem; -} - -.options-groupbox { - -moz-margin-start: 15px; - padding: 2px; -} - -.options-groupbox > * { - padding: 2px; -} - -.options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ - font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ -} - -.options-citation-label + label { - padding: 3px 0 0 !important; /* To align it with the checkbox */ - font-style: italic; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index 5f16a38f4242..a09d60f5bdb0 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -248,9 +248,9 @@ browser.jar: skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png) skin/classic/browser/tabview/tabview.png (tabview/tabview.png) skin/classic/browser/tabview/tabview.css (tabview/tabview.css) -* skin/classic/browser/devtools/common.css (devtools/common.css) - skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) - skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) +* skin/classic/browser/devtools/common.css (../shared/devtools/common.css) +* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) +* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png) @@ -331,7 +331,6 @@ browser.jar: skin/classic/browser/devtools/dock-side.png (devtools/dock-side.png) * skin/classic/browser/devtools/inspector.css (devtools/inspector.css) skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png) - skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css) skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png) skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png) skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png) diff --git a/browser/themes/shared/devtools/common.inc.css b/browser/themes/shared/devtools/common.css similarity index 86% rename from browser/themes/shared/devtools/common.inc.css rename to browser/themes/shared/devtools/common.css index a9e486076bfd..a86c37883cbc 100644 --- a/browser/themes/shared/devtools/common.inc.css +++ b/browser/themes/shared/devtools/common.css @@ -4,6 +4,50 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ %endif +:root { + font: message-box; +} + +.devtools-monospace { +%ifdef XP_MACOSX + font-family: Menlo, monospace; +%endif +%ifdef XP_LINUX + font-family: monospace; + font-size: 80%; +%endif +%ifdef XP_WIN + font-family: Consolas, monospace; +%endif +} + +/* Splitters */ +.devtools-horizontal-splitter { + -moz-appearance: none; + border-top: 1px solid black; + border-bottom-width: 0; + min-height: 3px; + height: 3px; + margin-bottom: -3px; + position: relative; +} + +.devtools-side-splitter { + -moz-appearance: none; + border: 0; + -moz-border-start: 1px solid black; + min-width: 0; + width: 3px; + background-color: transparent; + -moz-margin-end: -3px; + position: relative; + cursor: e-resize; +} + +.devtools-toolbox-side-iframe { + min-width: 465px; +} + /* Autocomplete Popup */ /* Dark and light theme */ diff --git a/browser/themes/shared/devtools/dark-theme.css b/browser/themes/shared/devtools/dark-theme.css index c5543bbc7c1d..8a01beea70c5 100644 --- a/browser/themes/shared/devtools/dark-theme.css +++ b/browser/themes/shared/devtools/dark-theme.css @@ -279,3 +279,5 @@ div.CodeMirror span.eval-text { .theme-tooltip-panel .devtools-tooltip-simple-text:last-child { border-bottom: 0; } + +%include toolbars.inc.css diff --git a/browser/themes/shared/devtools/light-theme.css b/browser/themes/shared/devtools/light-theme.css index 4bca9699871d..9f50212d3757 100644 --- a/browser/themes/shared/devtools/light-theme.css +++ b/browser/themes/shared/devtools/light-theme.css @@ -278,3 +278,5 @@ div.CodeMirror span.eval-text { .theme-tooltip-panel .devtools-tooltip-simple-text:last-child { border-bottom: 0; } + +%include toolbars.inc.css \ No newline at end of file diff --git a/browser/themes/linux/devtools/common.css b/browser/themes/shared/devtools/toolbars.inc.css similarity index 53% rename from browser/themes/linux/devtools/common.css rename to browser/themes/shared/devtools/toolbars.inc.css index a58bbf12c6a1..38a15b161c4d 100644 --- a/browser/themes/linux/devtools/common.css +++ b/browser/themes/shared/devtools/toolbars.inc.css @@ -1,20 +1,11 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ +%if 0 /* 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/. */ - -/* Font for code */ - -:root { - font: message-box; -} - -.devtools-monospace { - font-family: monospace; - font-size: 80%; -} - -/* Toolbar and Toolbar items */ +%endif +%filter substitution +%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) +%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d) .devtools-toolbar { -moz-appearance: none; @@ -71,7 +62,7 @@ } .devtools-toolbarbutton[checked=true] { - color: hsl(208,100%,60%) !important; + color: hsl(208,100%,60%); } .devtools-toolbarbutton[checked=true]:hover { @@ -139,7 +130,7 @@ margin: 0 3px; min-height: 22px; border: 1px solid hsla(210,8%,5%,.6); - border-radius: 2px; + border-radius: 20px; background-color: transparent; background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); padding: 3px; @@ -209,36 +200,8 @@ opacity: 1; } -/* Splitters */ - -.devtools-horizontal-splitter { - -moz-appearance: none; - border-top: 1px solid black; - border-bottom-width: 0; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - position: relative; -} - -.devtools-side-splitter { - -moz-appearance: none; - border: 0; - -moz-border-start: 1px solid black; - min-width: 0; - width: 3px; - background-color: transparent; - -moz-margin-end: -3px; - position: relative; - cursor: e-resize; -} - /* In-tools sidebar */ -.devtools-toolbox-side-iframe { - min-width: 465px; -} - .devtools-sidebar-tabs { -moz-appearance: none; margin: 0; @@ -253,6 +216,7 @@ .devtools-sidebar-tabs > tabs { -moz-appearance: none; position: static; + font: inherit; color: #b6babf; margin-bottom: 0; padding: 0; @@ -287,8 +251,6 @@ color: inherit; -moz-box-flex: 1; border-width: 0; - background: transparent; - border-radius: 0; position: static; -moz-margin-start: -1px; } @@ -307,11 +269,8 @@ background-position: calc(100% - 1px), 100%; } -%filter substitution -%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) -%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d) - .devtools-sidebar-tabs > tabs > tab { + background-color: transparent; background-image: linear-gradient(transparent, transparent), @smallSeparator@; } @@ -348,4 +307,269 @@ background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@; } -%include ../../shared/devtools/common.inc.css +/* Toolbox - moved from toolbox.css. + * Rules that apply to the global toolbox like command buttons, + * devtools tabs, docking buttons, etc. */ + +#toolbox-controls { + margin: 0 4px; +} + +#toolbox-controls > toolbarbutton, +#toolbox-dock-buttons > toolbarbutton { + -moz-appearance: 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-bottom { + list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); +} + +#toolbox-dock-side { + list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); +} + +#toolbox-dock-window { + list-style-image: url("chrome://browser/skin/devtools/undock.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { + opacity: 0.6; +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { + opacity: 1; +} + +#toolbox-controls-separator { + width: 3px; + background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), + linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), + linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; + -moz-margin-start: 8px; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + padding: 0 8px; + margin: 0; + width: 16px; +} + +.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-paintflashing { + list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} +#command-button-paintflashing:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} +#command-button-paintflashing:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} +#command-button-paintflashing[checked=true] { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} + +#command-button-responsive { + list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} +#command-button-responsive:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} +#command-button-responsive:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} +#command-button-responsive[checked=true] { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} + +#command-button-tilt { + list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} +#command-button-tilt:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#command-button-tilt:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +#command-button-tilt[checked=true] { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} + +#command-button-scratchpad { + list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +#command-button-scratchpad:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#command-button-scratchpad:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +/* Tabs */ + +.devtools-tabbar { + -moz-appearance: none; + background-image: url("background-noise-toolbar.png"), + linear-gradient(#303840, #2d3640); + border-color: #060a0d; + border-style: solid; + border-width: 1px 0; + box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, + 0 -1px 0 hsla(206,37%,4%,.1) inset; + min-height: 32px; + padding: 0; +} + +#toolbox-tabs { + margin: 0; +} + +.devtools-tab { + -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); + -moz-box-align: center; +} + +.devtools-tab { + -moz-appearance: none; + min-width: 32px; + min-height: 32px; + max-width: 127px; + color: #b6babf; + margin: 0; + padding: 0; + background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: left, right; + border-right: 1px solid hsla(206,37%,4%,.45); + -moz-box-align: center; +} + +.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 */ +} + +#toolbox-tab-options > image { + margin: 0 8px; +} + +.devtools-tab > label { + white-space: nowrap; +} + +.devtools-tab:hover > image { + opacity: 0.8; +} + +.devtools-tab:active > image, +.devtools-tab[selected=true] > label { + opacity: 1; +} + +.devtools-tab:hover { + background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); + background-size: 1px 100%, + 1px 100%, + 100%; + background-repeat: no-repeat, + no-repeat, + repeat-x; + background-position: left, right; + color: #ced3d9; +} +.devtools-tab:hover:active { + background-color: hsla(206,37%,4%,.2); + color: #f5f7fa; +} + +.devtools-tab[selected=true] { + color: #f5f7fa; + background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), + radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), + linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), + linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); + background-size: 100% 1px, + 100% 5px, + 1px 100%, + 1px 100%, + 100%; + background-repeat: no-repeat, + no-repeat, + no-repeat, + no-repeat, + repeat-x; + background-position: top right, top left, left, right; + box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; +} + +.devtools-tab:not([selected=true]).highlighted { + color: #f5f7fa; + background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), + radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), + linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), + linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); + background-size: 100% 1px, + 100% 5px, + 1px 100%, + 1px 100%, + 100%; + background-repeat: no-repeat, + no-repeat, + no-repeat, + no-repeat, + repeat-x; + background-position: top right, top left, left, right; +} + +.devtools-tab:not(.highlighted) > .highlighted-icon, +.devtools-tab[selected=true] > .highlighted-icon, +.devtools-tab:not([selected=true]).highlighted > .default-icon { + visibility: collapse; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} diff --git a/browser/themes/windows/devtools/common.css b/browser/themes/windows/devtools/common.css deleted file mode 100644 index e866b41c4d98..000000000000 --- a/browser/themes/windows/devtools/common.css +++ /dev/null @@ -1,364 +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/. */ - -/* Font for code */ - -:root { - font: message-box; -} - -.devtools-monospace { - font-family: Consolas, monospace; -} - -/* Toolbar and Toolbar items */ - -.devtools-toolbar { - -moz-appearance: none; - padding: 4px 3px; - border-bottom-width: 1px; - border-bottom-style: solid; -} - -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - min-width: 78px; - min-height: 22px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - border: 1px solid hsla(211,68%,6%,.5); - border-radius: 3px; - background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box; - box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); - margin: 0; - -moz-margin-end: 3px; - color: inherit; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { - margin: 0; -} - -.devtools-toolbarbutton:not([label]) { - min-width: 32px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbarbutton:not([checked=true]):hover:active { - background-color: hsla(210,18%,9%,.1); - background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)); - box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); -} - -.devtools-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[checked=true] { - border-color: hsla(211,68%,6%,.6); - background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2)); - box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); -} - -.devtools-toolbarbutton[checked=true] { - color: hsl(200,100%,60%) !important; -} - -.devtools-toolbarbutton[checked=true]:hover:active { - background-color: hsla(211,68%,6%,.2); -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/option-icon.png"); - -moz-image-region: rect(0px 16px 16px 0px); - background: none; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - -moz-image-region: rect(0px 32px 16px 16px); -} - -.devtools-menulist > .menulist-label-box { - text-align: center; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - border-width: 0; - background-color: transparent; -} - -.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box { - color: hsl(210,30%,85%) !important; - background-color: transparent; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - color: inherit; - border-width: 0; - -moz-border-end: 1px solid hsla(210,8%,5%,.45); - box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15); -} - -.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { - box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15); -} - -.devtools-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.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.png"); - -moz-box-align: center; -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - min-height: 22px; - border: 1px solid hsla(211,68%,6%,.6); - box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1); - border-radius: 2px; - background-color: transparent; - background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - padding: 3px; - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; - color: inherit; -} - -.devtools-searchinput { - background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - background-repeat: no-repeat; - background-position: 4px center, top left, top left; - padding-top: 0; - padding-bottom: 0; - -moz-padding-start: 18px; - -moz-padding-end: 12px; - font-size: inherit; -} - -.devtools-searchinput[focused] { - border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%); - background-origin: padding-box; - background-clip: padding-box; - box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1); -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 4px) center, top left, top left; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; -} - -.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder { - opacity: 1.0; - color: hsl(208,10%,66%); -} - -.devtools-no-search-result { - box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35); - border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important; - background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75)); -} - -/* Close button */ - -.devtools-closebutton { - list-style-image: url("chrome://browser/skin/devtools/close.png"); - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.6; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 0.8; -} - -.devtools-closebutton:hover:active { - opacity: 1; -} - -/* Splitters */ - -.devtools-horizontal-splitter { - -moz-appearance: none; - border-width: 1px 0 0 0; - -moz-border-top-colors: black; - background-color: transparent; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - position: relative; -} - -.devtools-side-splitter { - border: 0; - -moz-border-start: 1px solid #242b33; - min-width: 0; - width: 3px; - background-color: transparent; - -moz-margin-end: -3px; - position: relative; - cursor: e-resize; -} - -/* In-tools sidebar */ - -.devtools-toolbox-side-iframe { - min-width: 465px; -} - -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - -moz-appearance: none; - padding: 0; - border: 0; -} - -.devtools-sidebar-tabs > tabs { - -moz-appearance: none; - position: static; - color: #b6babf; - margin-bottom: 0; - padding: 0; - background-color: #343c45; - border-width: 0 0 1px 0; - border-color: hsla(210,8%,5%,.6); - border-style: solid; - overflow: hidden; -} - -.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: 5px 3px; - -moz-padding-start: 6px; - margin: 0; - min-width: 78px; - /* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px. - * -1px because the parent element () comes with a 1px bottom border. - */ - min-height: 32px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - text-align: center; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - background: transparent; - border-radius: 0; - position: static; - -moz-margin-start: -1px; -} - -.devtools-sidebar-tabs > tabs > tab:-moz-focusring { - position: static; -} - -.devtools-sidebar-tabs > tabs > tab:last-of-type { - -moz-border-end-width: 0; -} - -.devtools-sidebar-tabs > tabs > tab:first-of-type { - -moz-margin-start: -3px; -} - -.devtools-sidebar-tabs > tabs > tab { - background-size: calc(100% - 2px) 100%, 1px 100%; - background-repeat: no-repeat; - background-position: 1px, 0; -} - -.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab { - background-position: calc(100% - 1px), 100%; -} - -%filter substitution -%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) -%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d) - -.devtools-sidebar-tabs > tabs > tab { - background-image: linear-gradient(transparent, transparent), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab { - background-image: linear-gradient(transparent, transparent), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] { - color: #f5f7fa; - background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover { - background-image: linear-gradient(#274f64, #274f64), @solidSeparator@; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active { - background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@; -} - -%include ../../shared/devtools/common.inc.css diff --git a/browser/themes/windows/devtools/toolbox.css b/browser/themes/windows/devtools/toolbox.css deleted file mode 100644 index 20f368b5f14b..000000000000 --- a/browser/themes/windows/devtools/toolbox.css +++ /dev/null @@ -1,283 +0,0 @@ -/* 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/. */ - -#toolbox-controls { - margin: 0 4px; -} - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-bottom { - list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); -} - -#toolbox-dock-side { - list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); -} - -#toolbox-dock-window { - list-style-image: url("chrome://browser/skin/devtools/undock.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.6; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -#toolbox-controls-separator { - width: 3px; - background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), - linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), - linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; - -moz-margin-start: 8px; -} - - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - border: none; - margin: 0; - padding: 0 8px; - width: 16px; -} - -.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-paintflashing { - list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-paintflashing:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-paintflashing:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-paintflashing[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-responsive { - list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-responsive:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-responsive:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-responsive[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-tilt { - list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-tilt:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-tilt:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -#command-button-tilt[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-scratchpad { - list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#command-button-scratchpad:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-scratchpad:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - background-image: url("background-noise-toolbar.png"), - linear-gradient(#303840, #2d3640); - border-bottom: 1px solid #060a0d; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, - 0 -1px 0 hsla(206,37%,4%,.1) inset; - min-height: 32px; - padding: 0; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - min-width: 32px; - min-height: 32px; - max-width: 110px; - color: #b6babf; - margin: 0; - padding: 0; - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: left, right; - border-top: 1px solid #060a0d; - border-right: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab > image { - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; - width: 16px; /* Prevents collapse during theme switching */ -} - -#toolbox-tab-options > image { - margin: 0 8px; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected=true] > image { - opacity: 1; -} - -.devtools-tab:hover { - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); - background-size: 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - repeat-x; - background-position: left, right; - color: #ced3d9; -} -.devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.2); - color: #f5f7fa; -} - -.devtools-tab[selected=true] { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), - radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), - linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; - box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; -} - -.devtools-tab:not([selected=true]).highlighted { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), - radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; -} - -.devtools-tab:not(.highlighted) > .highlighted-icon, -.devtools-tab[selected=true] > .highlighted-icon, -.devtools-tab:not([selected=true]).highlighted > .default-icon { - visibility: collapse; -} - -.options-vertical-pane { - margin: 5px; - width: calc(50% - 30px); - min-width: 400px; - -moz-padding-start: 5px; -} - -.options-vertical-pane > label { - padding: 2px 0; - font-size: 1.4rem; -} - -.options-groupbox { - -moz-margin-start: 15px; - padding: 2px; -} - -.options-groupbox > * { - padding: 2px; -} - -.options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ - font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ -} - -.options-citation-label + label { - padding: 3px 0 0 !important; /* To align it with the checkbox */ - font-style: italic; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index eddec78410d7..1875cdf2573b 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -170,9 +170,9 @@ browser.jar: skin/classic/browser/tabview/tabview.png (tabview/tabview.png) skin/classic/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png) skin/classic/browser/tabview/tabview.css (tabview/tabview.css) -* skin/classic/browser/devtools/common.css (devtools/common.css) - skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) - skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) +* skin/classic/browser/devtools/common.css (../shared/devtools/common.css) +* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) +* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png) * skin/classic/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png) @@ -253,7 +253,6 @@ browser.jar: skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css) skin/classic/browser/devtools/inspector.css (devtools/inspector.css) skin/classic/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png) - skin/classic/browser/devtools/toolbox.css (devtools/toolbox.css) skin/classic/browser/devtools/tool-options.png (devtools/tool-options.png) skin/classic/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png) skin/classic/browser/devtools/tool-debugger.png (devtools/tool-debugger.png) @@ -472,9 +471,9 @@ browser.jar: skin/classic/aero/browser/tabview/tabview.png (tabview/tabview.png) skin/classic/aero/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png) skin/classic/aero/browser/tabview/tabview.css (tabview/tabview.css) -* skin/classic/aero/browser/devtools/common.css (devtools/common.css) - skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) - skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) +* skin/classic/aero/browser/devtools/common.css (../shared/devtools/common.css) +* skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css) +* skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css) skin/classic/aero/browser/devtools/controls.png (../shared/devtools/controls.png) * skin/classic/aero/browser/devtools/widgets.css (devtools/widgets.css) skin/classic/aero/browser/devtools/commandline-icon.png (devtools/commandline-icon.png) @@ -555,7 +554,6 @@ browser.jar: skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css) skin/classic/aero/browser/devtools/inspector.css (devtools/inspector.css) skin/classic/aero/browser/devtools/profiler-stopwatch.png (devtools/profiler-stopwatch.png) - skin/classic/aero/browser/devtools/toolbox.css (devtools/toolbox.css) skin/classic/aero/browser/devtools/tool-options.png (devtools/tool-options.png) skin/classic/aero/browser/devtools/tool-webconsole.png (devtools/tool-webconsole.png) skin/classic/aero/browser/devtools/tool-debugger.png (devtools/tool-debugger.png)