diff -r 000000000000 -r 6474c204b198 browser/themes/shared/devtools/splitview.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/browser/themes/shared/devtools/splitview.css Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,156 @@ +/* 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/. */ + +%filter substitution +%define smw_marginDark #000 +%define smw_marginLight #aaa +%define smw_itemDarkTopBorder rgba(0,0,0,0.2) +%define smw_itemDarkBottomBorder rgba(128,128,128,0.15) +%define smw_itemLightTopBorder rgba(128,128,128,0.15) +%define smw_itemLightBottomBorder transparent + +.loading .splitview-nav-container { + background-image: url(chrome://global/skin/icons/loading_16.png); + background-repeat: no-repeat; + background-position: center center; +} + +.theme-dark .splitview-nav-container { + background: url(background-noise-toolbar.png), #343c45; +} + +.splitview-nav { + -moz-appearance: none; + list-style-image: none; + list-style: none; + padding: 0; + margin: 0; +} + +.theme-dark .splitview-nav { + box-shadow: inset -1px 0 0 @smw_marginDark@; +} + +.theme-dark .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 @smw_marginDark@; +} + +.theme-light .splitview-nav { + box-shadow: inset -1px 0 0 @smw_marginLight@; +} + +.theme-light .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 @smw_marginLight@; +} + +.splitview-nav > li { + /* To compensate for the top and bottom borders */ + margin-top: -1px; + margin-bottom: -1px; + -moz-padding-end: 8px; + -moz-box-align: center; + outline: 0; + vertical-align: bottom; +} + +.theme-dark .splitview-nav > li { + border-top: 1px solid @smw_itemDarkTopBorder@; + border-bottom: 1px solid @smw_itemDarkBottomBorder@; +} + +.theme-dark .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@; +} + +.theme-light .splitview-nav > li { + border-top: 1px solid @smw_itemLightTopBorder@; + border-bottom: 1px solid @smw_itemLightBottomBorder@; +} + +.theme-light .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@; +} + +.placeholder { + -moz-box-flex: 1; + text-align: center; +} + +.splitview-nav > li.splitview-active { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center right, center right, top left; + background-size: auto, 1px, auto; +} + +.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center left, center left, top right; +} + +.theme-dark .splitview-nav > li.splitview-active { + background-image: url(itemArrow-dark-ltr.png), + linear-gradient(@smw_marginDark@, @smw_marginDark@), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-dark-rtl.png), + linear-gradient(@smw_marginDark@, @smw_marginDark@), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-light .splitview-nav > li.splitview-active { + background-image: url(itemArrow-ltr.svg), + linear-gradient(@smw_marginLight@, @smw_marginLight@), + linear-gradient(#4c9ed9, #4c9ed9); +} + +.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-rtl.svg), + linear-gradient(@smw_marginLight@, @smw_marginLight@), + linear-gradient(#4c9ed9, #4c9ed9); +} + +/* Toolbars */ + +.splitview-main > .devtools-toolbar { + background-origin: border-box; + background-clip: border-box; +} + +.theme-dark .splitview-main > toolbar, +.theme-dark .loading .splitview-nav-container { + -moz-border-end: 1px solid @smw_marginDark@; +} + +.theme-light .splitview-main > toolbar, +.theme-light .loading .splitview-nav-container { + -moz-border-end: 1px solid @smw_marginLight@; +} + +.splitview-main > .devtools-toolbarbutton { + font-size: 11px; + padding: 0 8px; + width: auto; + min-width: 48px; + min-height: 0; +} + + +/* Resizers */ + +.splitview-portrait-resizer { + -moz-appearance: none; + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); + height: 12px; + background-size: 10px 2px, 100% 12px; + background-clip: content-box, border-box; + background-repeat: repeat-y, no-repeat; + background-position: center center; + padding: 2px 0; + border-top: 1px solid hsla(210,8%,5%,.5); + border-bottom: 1px solid hsla(210,8%,5%,.5); +}