1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/splitview.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,156 @@
1.4 +/* vim:set ts=2 sw=2 sts=2 et: */
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +
1.9 +%filter substitution
1.10 +%define smw_marginDark #000
1.11 +%define smw_marginLight #aaa
1.12 +%define smw_itemDarkTopBorder rgba(0,0,0,0.2)
1.13 +%define smw_itemDarkBottomBorder rgba(128,128,128,0.15)
1.14 +%define smw_itemLightTopBorder rgba(128,128,128,0.15)
1.15 +%define smw_itemLightBottomBorder transparent
1.16 +
1.17 +.loading .splitview-nav-container {
1.18 + background-image: url(chrome://global/skin/icons/loading_16.png);
1.19 + background-repeat: no-repeat;
1.20 + background-position: center center;
1.21 +}
1.22 +
1.23 +.theme-dark .splitview-nav-container {
1.24 + background: url(background-noise-toolbar.png), #343c45;
1.25 +}
1.26 +
1.27 +.splitview-nav {
1.28 + -moz-appearance: none;
1.29 + list-style-image: none;
1.30 + list-style: none;
1.31 + padding: 0;
1.32 + margin: 0;
1.33 +}
1.34 +
1.35 +.theme-dark .splitview-nav {
1.36 + box-shadow: inset -1px 0 0 @smw_marginDark@;
1.37 +}
1.38 +
1.39 +.theme-dark .splitview-nav:-moz-locale-dir(rtl) {
1.40 + box-shadow: inset 1px 0 0 @smw_marginDark@;
1.41 +}
1.42 +
1.43 +.theme-light .splitview-nav {
1.44 + box-shadow: inset -1px 0 0 @smw_marginLight@;
1.45 +}
1.46 +
1.47 +.theme-light .splitview-nav:-moz-locale-dir(rtl) {
1.48 + box-shadow: inset 1px 0 0 @smw_marginLight@;
1.49 +}
1.50 +
1.51 +.splitview-nav > li {
1.52 + /* To compensate for the top and bottom borders */
1.53 + margin-top: -1px;
1.54 + margin-bottom: -1px;
1.55 + -moz-padding-end: 8px;
1.56 + -moz-box-align: center;
1.57 + outline: 0;
1.58 + vertical-align: bottom;
1.59 +}
1.60 +
1.61 +.theme-dark .splitview-nav > li {
1.62 + border-top: 1px solid @smw_itemDarkTopBorder@;
1.63 + border-bottom: 1px solid @smw_itemDarkBottomBorder@;
1.64 +}
1.65 +
1.66 +.theme-dark .splitview-nav > li:last-of-type {
1.67 + box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
1.68 +}
1.69 +
1.70 +.theme-light .splitview-nav > li {
1.71 + border-top: 1px solid @smw_itemLightTopBorder@;
1.72 + border-bottom: 1px solid @smw_itemLightBottomBorder@;
1.73 +}
1.74 +
1.75 +.theme-light .splitview-nav > li:last-of-type {
1.76 + box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
1.77 +}
1.78 +
1.79 +.placeholder {
1.80 + -moz-box-flex: 1;
1.81 + text-align: center;
1.82 +}
1.83 +
1.84 +.splitview-nav > li.splitview-active {
1.85 + background-repeat: no-repeat, no-repeat, repeat-x;
1.86 + background-position: center right, center right, top left;
1.87 + background-size: auto, 1px, auto;
1.88 +}
1.89 +
1.90 +.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
1.91 + background-repeat: no-repeat, no-repeat, repeat-x;
1.92 + background-position: center left, center left, top right;
1.93 +}
1.94 +
1.95 +.theme-dark .splitview-nav > li.splitview-active {
1.96 + background-image: url(itemArrow-dark-ltr.png),
1.97 + linear-gradient(@smw_marginDark@, @smw_marginDark@),
1.98 + linear-gradient(#1d4f73, #1d4f73);
1.99 +}
1.100 +
1.101 +.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
1.102 + background-image: url(itemArrow-dark-rtl.png),
1.103 + linear-gradient(@smw_marginDark@, @smw_marginDark@),
1.104 + linear-gradient(#1d4f73, #1d4f73);
1.105 +}
1.106 +
1.107 +.theme-light .splitview-nav > li.splitview-active {
1.108 + background-image: url(itemArrow-ltr.svg),
1.109 + linear-gradient(@smw_marginLight@, @smw_marginLight@),
1.110 + linear-gradient(#4c9ed9, #4c9ed9);
1.111 +}
1.112 +
1.113 +.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
1.114 + background-image: url(itemArrow-rtl.svg),
1.115 + linear-gradient(@smw_marginLight@, @smw_marginLight@),
1.116 + linear-gradient(#4c9ed9, #4c9ed9);
1.117 +}
1.118 +
1.119 +/* Toolbars */
1.120 +
1.121 +.splitview-main > .devtools-toolbar {
1.122 + background-origin: border-box;
1.123 + background-clip: border-box;
1.124 +}
1.125 +
1.126 +.theme-dark .splitview-main > toolbar,
1.127 +.theme-dark .loading .splitview-nav-container {
1.128 + -moz-border-end: 1px solid @smw_marginDark@;
1.129 +}
1.130 +
1.131 +.theme-light .splitview-main > toolbar,
1.132 +.theme-light .loading .splitview-nav-container {
1.133 + -moz-border-end: 1px solid @smw_marginLight@;
1.134 +}
1.135 +
1.136 +.splitview-main > .devtools-toolbarbutton {
1.137 + font-size: 11px;
1.138 + padding: 0 8px;
1.139 + width: auto;
1.140 + min-width: 48px;
1.141 + min-height: 0;
1.142 +}
1.143 +
1.144 +
1.145 +/* Resizers */
1.146 +
1.147 +.splitview-portrait-resizer {
1.148 + -moz-appearance: none;
1.149 + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
1.150 + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%));
1.151 + height: 12px;
1.152 + background-size: 10px 2px, 100% 12px;
1.153 + background-clip: content-box, border-box;
1.154 + background-repeat: repeat-y, no-repeat;
1.155 + background-position: center center;
1.156 + padding: 2px 0;
1.157 + border-top: 1px solid hsla(210,8%,5%,.5);
1.158 + border-bottom: 1px solid hsla(210,8%,5%,.5);
1.159 +}
