1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/widgets.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,1015 @@
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 +/* Generic pane helpers */
1.10 +
1.11 +.generic-toggled-side-pane {
1.12 + -moz-margin-start: 0 !important;
1.13 + /* Unfortunately, transitions don't work properly with locale-aware properties,
1.14 + so both the left and right margins are set via js, while the start margin
1.15 + is always overridden here. */
1.16 +}
1.17 +
1.18 +.generic-toggled-side-pane[animated] {
1.19 + transition: margin 0.25s ease-in-out;
1.20 +}
1.21 +
1.22 +/* Responsive container */
1.23 +
1.24 +.devtools-responsive-container {
1.25 + -moz-box-orient: horizontal;
1.26 +}
1.27 +
1.28 +@media (max-width: 700px) {
1.29 + .devtools-responsive-container {
1.30 + -moz-box-orient: vertical;
1.31 + }
1.32 +
1.33 + .devtools-responsive-container > .devtools-side-splitter {
1.34 + border-width: 0;
1.35 + border-top-width: 1px;
1.36 + border-top-style: solid;
1.37 + margin: 0;
1.38 + min-height: 3px;
1.39 + height: 3px;
1.40 + margin-bottom: -3px;
1.41 + /* In some edge case the cursor is not changed to n-resize */
1.42 + cursor: n-resize;
1.43 + }
1.44 +
1.45 + .devtools-responsive-container > .devtools-sidebar-tabs {
1.46 + min-height: 35vh;
1.47 + max-height: 75vh;
1.48 + }
1.49 +}
1.50 +
1.51 +/* BreacrumbsWidget */
1.52 +
1.53 +.breadcrumbs-widget-container {
1.54 + -moz-margin-end: 3px;
1.55 + max-height: 25px; /* Set max-height for proper sizing on linux */
1.56 + height: 25px; /* Set height to prevent starting small waiting for content */
1.57 + /* A fake 1px-shadow is included in the border-images of the
1.58 + breadcrumbs-widget-items, to match toolbar-buttons style.
1.59 + This negative margin compensates the extra row of pixels created
1.60 + by the shadow.*/
1.61 + margin-bottom: -1px;
1.62 +}
1.63 +
1.64 +.scrollbutton-up,
1.65 +.scrollbutton-down {
1.66 + -moz-appearance: none;
1.67 + background: transparent;
1.68 + box-shadow: none;
1.69 + border: none;
1.70 + list-style-image: none;
1.71 + margin: 0;
1.72 + padding: 0;
1.73 +}
1.74 +
1.75 +.scrollbutton-up > .toolbarbutton-icon,
1.76 +.scrollbutton-down > .toolbarbutton-icon {
1.77 + -moz-appearance: none;
1.78 + width: 7px;
1.79 + height: 16px;
1.80 + background-size: 14px 16px;
1.81 + background-position: 0 center;
1.82 + background-repeat: no-repeat;
1.83 + background-image: url("breadcrumbs-scrollbutton.png");
1.84 + list-style-image: none;
1.85 + margin: 0 8px;
1.86 + padding: 0;
1.87 +}
1.88 +
1.89 +@media (min-resolution: 2dppx) {
1.90 + .scrollbutton-up > .toolbarbutton-icon,
1.91 + .scrollbutton-down > .toolbarbutton-icon {
1.92 + background-image: url("breadcrumbs-scrollbutton@2x.png");
1.93 + }
1.94 +}
1.95 +
1.96 +.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
1.97 +.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
1.98 + background-position: -7px center;
1.99 +}
1.100 +
1.101 +.scrollbutton-up[disabled] > .toolbarbutton-icon,
1.102 +.scrollbutton-down[disabled] > .toolbarbutton-icon {
1.103 + opacity: 0.5;
1.104 +}
1.105 +
1.106 +/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
1.107 +.scrollbutton-up:-moz-locale-dir(ltr),
1.108 +.scrollbutton-down:-moz-locale-dir(rtl) {
1.109 + border-right: solid 1px rgba(255, 255, 255, .1);
1.110 + border-left: solid 1px transparent;
1.111 + box-shadow: 3px 0px 3px -3px #181d20;
1.112 +}
1.113 +
1.114 +.scrollbutton-down:-moz-locale-dir(ltr),
1.115 +.scrollbutton-up:-moz-locale-dir(rtl) {
1.116 + border-right: solid 1px transparent;
1.117 + border-left: solid 1px rgba(255, 255, 255, .1);
1.118 + box-shadow: -3px 0px 3px -3px #181d20;
1.119 +}
1.120 +
1.121 +.scrollbutton-up[disabled],
1.122 +.scrollbutton-down[disabled] {
1.123 + box-shadow: none;
1.124 + border-color: transparent;
1.125 +}
1.126 +
1.127 +.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
1.128 +.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
1.129 + transform: scaleX(-1);
1.130 +}
1.131 +
1.132 +/* The breadcrumb separator elements are used as background images with
1.133 + * -moz-element, so we position them offscreen since we don't care about
1.134 + * seeing the original elements.
1.135 + */
1.136 +.breadcrumb-separator-container {
1.137 + position: fixed;
1.138 + top: -1000px;
1.139 + left: -1000px;
1.140 +}
1.141 +
1.142 +#breadcrumb-separator-before,
1.143 +#breadcrumb-separator-after,
1.144 +#breadcrumb-separator-normal {
1.145 + width: 12px;
1.146 + height: 25px;
1.147 + overflow: hidden;
1.148 +}
1.149 +
1.150 +.theme-dark #breadcrumb-separator-before,
1.151 +.theme-dark #breadcrumb-separator-after:after {
1.152 + background: #1d4f73; /* Select Highlight Blue */
1.153 +}
1.154 +
1.155 +.theme-dark #breadcrumb-separator-after,
1.156 +.theme-dark #breadcrumb-separator-before:after {
1.157 + background: #343c45; /* Toolbars */
1.158 +}
1.159 +
1.160 +.theme-light #breadcrumb-separator-before,
1.161 +.theme-light #breadcrumb-separator-after:after {
1.162 + background: #4c9ed9; /* Select Highlight Blue */
1.163 +}
1.164 +
1.165 +.theme-light #breadcrumb-separator-after,
1.166 +.theme-light #breadcrumb-separator-before:after {
1.167 + background: #f0f1f2; /* Toolbars */
1.168 +}
1.169 +
1.170 +/* This chevron arrow cannot be replicated easily in CSS, so we are using
1.171 + * a background image for it (still keeping it in a separate element so
1.172 + * we can handle RTL support with a CSS transform).
1.173 + */
1.174 +#breadcrumb-separator-normal {
1.175 + background: url(breadcrumbs-divider@2x.png) no-repeat center right;
1.176 + background-size: 12px 24px;
1.177 +}
1.178 +
1.179 +/* Fake a triangle by rotating a rectangle inside the elements */
1.180 +#breadcrumb-separator-before:after,
1.181 +#breadcrumb-separator-after:after {
1.182 + content: "";
1.183 + display: block;
1.184 + width: 25px;
1.185 + height: 25px;
1.186 + transform: translateX(-18px) rotate(45deg);
1.187 + -moz-box-sizing: border-box;
1.188 +}
1.189 +
1.190 +.breadcrumbs-widget-item {
1.191 + background-color: transparent;
1.192 + -moz-appearance: none;
1.193 + min-height: 25px;
1.194 + min-width: 65px;
1.195 + margin: 0;
1.196 + padding: 0 8px 0 20px;
1.197 + border: none;
1.198 + outline: none;
1.199 + color: hsl(210,30%,85%);
1.200 +}
1.201 +
1.202 +.breadcrumbs-widget-item:not([checked]) {
1.203 + background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
1.204 +}
1.205 +
1.206 +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
1.207 + background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
1.208 +}
1.209 +
1.210 +.breadcrumbs-widget-item[checked] {
1.211 + background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
1.212 +}
1.213 +
1.214 +.theme-dark .breadcrumbs-widget-item[checked] {
1.215 + background-color: #1d4f73; /* Select Highlight Blue */
1.216 +}
1.217 +
1.218 +.theme-light .breadcrumbs-widget-item[checked] {
1.219 + background-color: #4c9ed9; /* Select Highlight Blue */
1.220 +}
1.221 +
1.222 +.breadcrumbs-widget-item:first-child {
1.223 + background-image: none;
1.224 +}
1.225 +
1.226 +/* RTL support: move the images that were on the left to the right,
1.227 + * and move images that were on the right to the left.
1.228 + */
1.229 +.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
1.230 + padding: 0 20px 0 8px;
1.231 +}
1.232 +
1.233 +.breadcrumbs-widget-item:-moz-locale-dir(rtl),
1.234 +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
1.235 + background-position: center right;
1.236 +}
1.237 +
1.238 +#breadcrumb-separator-before:-moz-locale-dir(rtl),
1.239 +#breadcrumb-separator-after:-moz-locale-dir(rtl),
1.240 +#breadcrumb-separator-normal:-moz-locale-dir(rtl) {
1.241 + transform: scaleX(-1);
1.242 +}
1.243 +
1.244 +#breadcrumb-separator-before:-moz-locale-dir(rtl):after,
1.245 +#breadcrumb-separator-after:-moz-locale-dir(rtl):after {
1.246 + transform: translateX(-5px) rotate(45deg);
1.247 +}
1.248 +
1.249 +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
1.250 +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
1.251 +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
1.252 +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
1.253 + color: #f5f7fa; /* Foreground (Text) - Light */
1.254 +}
1.255 +
1.256 +.theme-dark .breadcrumbs-widget-item {
1.257 + color: #f5f7fa; /* Foreground (Text) - Light */
1.258 +}
1.259 +
1.260 +.theme-light .breadcrumbs-widget-item {
1.261 + color: #18191a; /* Foreground (Text) - Dark */
1.262 +}
1.263 +
1.264 +.theme-dark .breadcrumbs-widget-item-id {
1.265 + color: #b6babf; /* Foreground (Text) - Grey */
1.266 +}
1.267 +
1.268 +.theme-light .breadcrumbs-widget-item-id {
1.269 + color: #585959; /* Foreground (Text) - Grey */
1.270 +}
1.271 +
1.272 +.theme-dark .breadcrumbs-widget-item-classes {
1.273 + color: #a9bacb; /* Content (Text) - Light */
1.274 +}
1.275 +
1.276 +.theme-light .breadcrumbs-widget-item-classes {
1.277 + color: #667380; /* Content (Text) - Dark Grey */
1.278 +}
1.279 +
1.280 +.theme-dark .breadcrumbs-widget-item-pseudo-classes {
1.281 + color: #d99b28; /* Light Orange */
1.282 +}
1.283 +
1.284 +.theme-light .breadcrumbs-widget-item-pseudo-classes {
1.285 + color: #d97e00; /* Light Orange */
1.286 +}
1.287 +
1.288 +.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
1.289 + color: white;
1.290 +}
1.291 +
1.292 +.theme-light .breadcrumbs-widget-item:not([checked]):hover label {
1.293 + color: black;
1.294 +}
1.295 +
1.296 +/* SimpleListWidget */
1.297 +
1.298 +.simple-list-widget-container {
1.299 + /* Hack: force hardware acceleration */
1.300 + transform: translateZ(1px);
1.301 +}
1.302 +
1.303 +.theme-dark .simple-list-widget-item.selected {
1.304 + background-color: #1d4f73; /* Select Highlight Blue */
1.305 + color: #f5f7fa; /* Light foreground text */
1.306 +}
1.307 +
1.308 +.theme-light .simple-list-widget-item.selected {
1.309 + background-color: #4c9ed9; /* Select Highlight Blue */
1.310 + color: #f5f7fa; /* Light foreground text */
1.311 +}
1.312 +
1.313 +.theme-dark .simple-list-widget-item:not(.selected):hover {
1.314 + background-color: rgba(255,255,255,.05);
1.315 +}
1.316 +
1.317 +.theme-light .simple-list-widget-item:not(.selected):hover {
1.318 + background-color: rgba(0,0,0,.05);
1.319 +}
1.320 +
1.321 +.simple-list-widget-empty-text,
1.322 +.simple-list-widget-perma-text {
1.323 + padding: 4px 8px;
1.324 +}
1.325 +
1.326 +.theme-dark .simple-list-widget-empty-text,
1.327 +.theme-dark .simple-list-widget-perma-text {
1.328 + color: #b6babf; /* Light foreground text */
1.329 +}
1.330 +
1.331 +.theme-light .simple-list-widget-empty-text,
1.332 +.theme-light .simple-list-widget-perma-text {
1.333 + color: #585959; /* Grey foreground text */
1.334 +}
1.335 +
1.336 +/* FastListWidget */
1.337 +
1.338 +.fast-list-widget-container {
1.339 + /* Hack: force hardware acceleration */
1.340 + transform: translateZ(1px);
1.341 +}
1.342 +
1.343 +.fast-list-widget-empty-text {
1.344 + padding: 4px 8px;
1.345 +}
1.346 +
1.347 +.theme-dark .fast-list-widget-empty-text {
1.348 + color: #b6babf; /* Light foreground text */
1.349 +}
1.350 +
1.351 +.theme-light .fast-list-widget-empty-text {
1.352 + color: #585959; /* Grey foreground text */
1.353 +}
1.354 +
1.355 +/* SideMenuWidget */
1.356 +
1.357 +%filter substitution
1.358 +%define smw_marginDark #000
1.359 +%define smw_marginLight #aaa
1.360 +%define smw_itemDarkTopBorder rgba(0,0,0,0.2)
1.361 +%define smw_itemDarkBottomBorder rgba(128,128,128,0.15)
1.362 +%define smw_itemLightTopBorder rgba(128,128,128,0.15)
1.363 +%define smw_itemLightBottomBorder transparent
1.364 +
1.365 +.side-menu-widget-container {
1.366 + /* Hack: force hardware acceleration */
1.367 + transform: translateZ(1px);
1.368 +}
1.369 +
1.370 +/* SideMenuWidget container */
1.371 +
1.372 +.theme-dark .side-menu-widget-container,
1.373 +.theme-dark .side-menu-widget-empty-text {
1.374 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.375 +}
1.376 +
1.377 +.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr),
1.378 +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
1.379 + box-shadow: inset -1px 0 0 @smw_marginDark@;
1.380 +}
1.381 +
1.382 +.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl),
1.383 +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) {
1.384 + box-shadow: inset 1px 0 0 @smw_marginDark@;
1.385 +}
1.386 +
1.387 +.side-menu-widget-container:-moz-locale-dir(ltr),
1.388 +.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
1.389 + box-shadow: inset -1px 0 0 @smw_marginLight@;
1.390 +}
1.391 +
1.392 +.side-menu-widget-container:-moz-locale-dir(rtl),
1.393 +.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
1.394 + box-shadow: inset 1px 0 0 @smw_marginLight@;
1.395 +}
1.396 +
1.397 +.side-menu-widget-group {
1.398 + /* To allow visibility of the dark margin shadow. */
1.399 + -moz-margin-end: 1px;
1.400 +}
1.401 +
1.402 +.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
1.403 + /* To compensate for the arrow image's dark margin. */
1.404 + -moz-margin-end: -1px;
1.405 +}
1.406 +
1.407 +/* SideMenuWidget groups */
1.408 +
1.409 +.side-menu-widget-group-title {
1.410 + padding: 4px;
1.411 +}
1.412 +
1.413 +.theme-dark .side-menu-widget-group-title {
1.414 + background-color: #252c33; /* Tab toolbar */
1.415 + color: #a9bacb; /* Light content text */
1.416 +}
1.417 +
1.418 +.theme-light .side-menu-widget-group-title {
1.419 + background-color: #ebeced; /* Tab toolbar */
1.420 + color: #667380; /* Dark grey content text */
1.421 +}
1.422 +
1.423 +/* SideMenuWidget items */
1.424 +
1.425 +.side-menu-widget-item {
1.426 + /* To compensate for the top and bottom borders */
1.427 + margin-top: -1px;
1.428 + margin-bottom: -1px;
1.429 + background-clip: padding-box;
1.430 +}
1.431 +
1.432 +.theme-dark .side-menu-widget-item {
1.433 + border-top: 1px solid @smw_itemDarkTopBorder@;
1.434 + border-bottom: 1px solid @smw_itemDarkBottomBorder@;
1.435 + color: #f5f7fa; /* Light foreground text */
1.436 +}
1.437 +
1.438 +.theme-dark .side-menu-widget-item:last-of-type {
1.439 + box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
1.440 +}
1.441 +
1.442 +.theme-light .side-menu-widget-item {
1.443 + border-top: 1px solid @smw_itemLightTopBorder@;
1.444 + border-bottom: 1px solid @smw_itemLightBottomBorder@;
1.445 + color: #18191a; /* Dark foreground text */
1.446 +}
1.447 +
1.448 +.theme-light .side-menu-widget-item:last-of-type {
1.449 + box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
1.450 +}
1.451 +
1.452 +.theme-dark .side-menu-widget-item.selected {
1.453 + background-color: #1d4f73; /* Select Highlight Blue */
1.454 + color: #f5f7fa; /* Light foreground text */
1.455 +}
1.456 +
1.457 +.theme-light .side-menu-widget-item.selected {
1.458 + background-color: #4c9ed9; /* Select Highlight Blue */
1.459 + color: #f5f7fa; /* Light foreground text */
1.460 +}
1.461 +
1.462 +.side-menu-widget-item-arrow {
1.463 + -moz-margin-start: -7px;
1.464 + width: 7px; /* The image's width is 7 pixels */
1.465 + /* Cover the border of the side-menu-widget-item */
1.466 + margin-top: -1px;
1.467 + margin-bottom: -1px;
1.468 +}
1.469 +
1.470 +.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
1.471 + background-size: auto, 1px 100%;
1.472 + background-repeat: no-repeat;
1.473 +}
1.474 +
1.475 +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
1.476 + background-position: center right, top right;
1.477 +}
1.478 +
1.479 +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
1.480 + background-position: center left, top left;
1.481 +}
1.482 +
1.483 +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
1.484 + background-image: url(itemArrow-dark-ltr.png), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@);
1.485 +}
1.486 +
1.487 +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
1.488 + background-image: url(itemArrow-dark-rtl.png), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@);
1.489 +}
1.490 +
1.491 +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
1.492 + background-image: url(itemArrow-ltr.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@);
1.493 +}
1.494 +
1.495 +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
1.496 + background-image: url(itemArrow-rtl.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@);
1.497 +}
1.498 +
1.499 +/* SideMenuWidget items contents */
1.500 +
1.501 +.side-menu-widget-item-contents {
1.502 + padding: 4px;
1.503 + /* To avoid having content overlapping the arrow image. */
1.504 + -moz-padding-end: 8px;
1.505 +}
1.506 +
1.507 +.side-menu-widget-item-other {
1.508 + /* To avoid having content overlapping the arrow image. */
1.509 + -moz-padding-end: 8px;
1.510 + /* To compensate for the .side-menu-widget-item-contents padding. */
1.511 + -moz-margin-start: -4px;
1.512 + -moz-margin-end: -8px;
1.513 +}
1.514 +
1.515 +.side-menu-widget-item-other:first-of-type {
1.516 + margin-top: 4px;
1.517 +}
1.518 +
1.519 +.side-menu-widget-item-other:last-of-type {
1.520 + margin-bottom: -4px;
1.521 +}
1.522 +
1.523 +.theme-dark .side-menu-widget-item-other {
1.524 + background: url(background-noise-toolbar.png), rgba(0,0,0,.1);
1.525 +}
1.526 +
1.527 +.theme-light .side-menu-widget-item-other {
1.528 + background: url(background-noise-toolbar.png), rgba(128,128,128,.1);
1.529 +}
1.530 +
1.531 +.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
1.532 + background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
1.533 + color: #f5f7fa; /* Light foreground text */
1.534 +}
1.535 +
1.536 +.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
1.537 + background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
1.538 + color: #18191a; /* Dark foreground text */
1.539 +}
1.540 +
1.541 +.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
1.542 + background-color: transparent;
1.543 + color: #f5f7fa; /* Light foreground text */
1.544 +}
1.545 +
1.546 +.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
1.547 + background-color: transparent;
1.548 + color: #f5f7fa; /* Light foreground text */
1.549 +}
1.550 +
1.551 +/* SideMenuWidget checkboxes */
1.552 +
1.553 +.side-menu-widget-group-checkbox {
1.554 + margin: 0;
1.555 + -moz-margin-end: 4px;
1.556 +}
1.557 +
1.558 +.side-menu-widget-item-checkbox {
1.559 + margin: 0;
1.560 + -moz-margin-start: 4px;
1.561 +}
1.562 +
1.563 +/* SideMenuWidget misc */
1.564 +
1.565 +.side-menu-widget-empty-text {
1.566 + padding: 4px 8px;
1.567 +}
1.568 +
1.569 +.theme-dark .side-menu-widget-empty-text {
1.570 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.571 + color: #b6babf; /* Foreground (Text) - Grey */
1.572 +}
1.573 +
1.574 +.theme-light .side-menu-widget-empty-text {
1.575 + background: #f7f7f7; /* Toolbars */
1.576 + color: #585959; /* Grey foreground text */
1.577 +}
1.578 +
1.579 +/* VariablesView */
1.580 +
1.581 +.variables-view-container {
1.582 + /* Hack: force hardware acceleration */
1.583 + transform: translateZ(1px);
1.584 +}
1.585 +
1.586 +.variables-view-empty-notice {
1.587 + padding: 2px;
1.588 +}
1.589 +
1.590 +.theme-dark .variables-view-empty-notice {
1.591 + color: #b6babf; /* Foreground (Text) - Grey */
1.592 +}
1.593 +
1.594 +.theme-light .variables-view-empty-notice {
1.595 + color: #585959; /* Grey foreground text */
1.596 +}
1.597 +
1.598 +.theme-dark .variables-view-scope:focus > .title,
1.599 +.theme-dark .variable-or-property:focus > .title {
1.600 + background-color: #1d4f73; /* Selection colors */
1.601 + color: #f5f7fa;
1.602 +}
1.603 +
1.604 +.theme-light .variables-view-scope:focus > .title,
1.605 +.theme-light .variable-or-property:focus > .title {
1.606 + background-color: #4c9ed9; /* Selection colors */
1.607 + color: #f5f7fa;
1.608 +}
1.609 +
1.610 +.variables-view-scope > .title {
1.611 + border-top-width: 1px;
1.612 + border-top-style: solid;
1.613 + margin-top: -1px;
1.614 +}
1.615 +
1.616 +/* Generic variables traits */
1.617 +
1.618 +.variables-view-variable:not(:last-child) {
1.619 + border-bottom: 1px solid rgba(128, 128, 128, .15);
1.620 +}
1.621 +
1.622 +.variables-view-variable > .title > .name {
1.623 + font-weight: 600;
1.624 +}
1.625 +
1.626 +/* Generic variables *and* properties traits */
1.627 +
1.628 +.variable-or-property:focus > .title > label {
1.629 + color: inherit !important;
1.630 +}
1.631 +
1.632 +.variable-or-property > .title > .arrow {
1.633 + -moz-margin-start: 3px;
1.634 +}
1.635 +
1.636 +.variable-or-property:not([untitled]) > .variables-view-element-details {
1.637 + -moz-margin-start: 7px;
1.638 +}
1.639 +
1.640 +/* Traits applied when variables or properties are changed or overridden */
1.641 +
1.642 +.variable-or-property:not([overridden]) {
1.643 + transition: background 1s ease-in-out;
1.644 +}
1.645 +
1.646 +.variable-or-property:not([overridden])[changed] {
1.647 + transition-duration: .4s;
1.648 +}
1.649 +
1.650 +.variable-or-property[overridden] {
1.651 + background: rgba(128,128,128,0.05);
1.652 +}
1.653 +
1.654 +.variable-or-property[overridden] .title > label {
1.655 + /* Cross out the title for this variable and all child properties. */
1.656 + font-style: italic;
1.657 + text-decoration: line-through;
1.658 + border-bottom: none !important;
1.659 + color: rgba(128,128,128,0.9);
1.660 + opacity: 0.7;
1.661 +}
1.662 +
1.663 +/* Traits applied when variables or properties are editable */
1.664 +
1.665 +.variable-or-property[editable] > .title > .value {
1.666 + cursor: text;
1.667 +}
1.668 +
1.669 +.variable-or-property[overridden] .title > .value {
1.670 + /* Disallow editing this variable and all child properties. */
1.671 + pointer-events: none;
1.672 +}
1.673 +
1.674 +/* Custom configurable/enumerable/writable or frozen/sealed/extensible
1.675 + * variables and properties */
1.676 +
1.677 +.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
1.678 + opacity: 0.6;
1.679 +}
1.680 +
1.681 +.variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
1.682 + border-bottom: 1px dashed #99f;
1.683 +}
1.684 +
1.685 +.variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
1.686 + border-bottom: 1px dashed #f99;
1.687 +}
1.688 +
1.689 +.variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
1.690 + border-bottom: 1px dashed #8b0;
1.691 +}
1.692 +
1.693 +.variable-or-property-non-writable-icon {
1.694 + background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
1.695 + width: 16px;
1.696 + height: 16px;
1.697 +}
1.698 +
1.699 +/*@media (min-resolution: 2dppx) {
1.700 + .variable-or-property-non-writable-icon {
1.701 + background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
1.702 + background-size: 32px;
1.703 + }
1.704 +}
1.705 +*/
1.706 +.variable-or-property-frozen-label,
1.707 +.variable-or-property-sealed-label,
1.708 +.variable-or-property-non-extensible-label {
1.709 + -moz-padding-end: 4px;
1.710 +}
1.711 +
1.712 +.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
1.713 +.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
1.714 +.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
1.715 + color: #666;
1.716 +}
1.717 +
1.718 +/* Aligned values */
1.719 +
1.720 +.variables-view-container[aligned-values] .title > .separator {
1.721 + -moz-box-flex: 1;
1.722 +}
1.723 +
1.724 +.variables-view-container[aligned-values] .title > .value {
1.725 + -moz-box-flex: 0;
1.726 + width: 70vw;
1.727 +}
1.728 +
1.729 +.variables-view-container[aligned-values] .title > .element-value-input {
1.730 + width: calc(70vw - 10px);
1.731 +}
1.732 +
1.733 +/* Actions first */
1.734 +
1.735 +.variables-view-container[actions-first] .variables-view-delete,
1.736 +.variables-view-container[actions-first] .variables-view-open-inspector,
1.737 +.variables-view-container[actions-first] .variables-view-add-property {
1.738 + -moz-box-ordinal-group: 0;
1.739 +}
1.740 +
1.741 +.variables-view-container[actions-first] [invisible] {
1.742 + visibility: hidden;
1.743 +}
1.744 +
1.745 +/* Variables and properties tooltips */
1.746 +
1.747 +.variable-or-property > tooltip > label {
1.748 + margin: 0 2px 0 2px;
1.749 +}
1.750 +
1.751 +.variable-or-property[non-enumerable] > tooltip > label.enumerable,
1.752 +.variable-or-property[non-configurable] > tooltip > label.configurable,
1.753 +.variable-or-property[non-writable] > tooltip > label.writable,
1.754 +.variable-or-property[non-extensible] > tooltip > label.extensible {
1.755 + color: #800;
1.756 + text-decoration: line-through;
1.757 +}
1.758 +
1.759 +.variable-or-property[overridden] > tooltip > label.overridden {
1.760 + -moz-padding-start: 4px;
1.761 + -moz-border-start: 1px dotted #000;
1.762 +}
1.763 +
1.764 +.variable-or-property[safe-getter] > tooltip > label.WebIDL {
1.765 + -moz-padding-start: 4px;
1.766 + -moz-border-start: 1px dotted #000;
1.767 + color: #080;
1.768 +}
1.769 +
1.770 +/* Variables and properties editing */
1.771 +
1.772 +.variables-view-delete {
1.773 + list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
1.774 + -moz-image-region: rect(0,16px,16px,0);
1.775 +}
1.776 +
1.777 +.variables-view-delete:hover {
1.778 + -moz-image-region: rect(0,48px,16px,32px);
1.779 +}
1.780 +
1.781 +.variables-view-delete:active {
1.782 + -moz-image-region: rect(0,32px,16px,16px);
1.783 +}
1.784 +
1.785 +.variable-or-property:focus .variables-view-delete {
1.786 + -moz-image-region: rect(0,16px,16px,0);
1.787 +}
1.788 +
1.789 +.variables-view-edit {
1.790 + list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
1.791 + -moz-image-region: rect(0,16px,16px,0);
1.792 + cursor: pointer;
1.793 + padding-left: 2px;
1.794 +}
1.795 +
1.796 +.variables-view-edit:hover {
1.797 + -moz-image-region: rect(0,48px,16px,32px);
1.798 +}
1.799 +
1.800 +.variables-view-edit:active {
1.801 + -moz-image-region: rect(0,32px,16px,16px);
1.802 +}
1.803 +
1.804 +.variable-or-property:focus .variables-view-edit {
1.805 + -moz-image-region: rect(0,16px,16px,0);
1.806 +}
1.807 +
1.808 +.variables-view-open-inspector {
1.809 + list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
1.810 + -moz-image-region: rect(0,16px,16px,0);
1.811 + cursor: pointer;
1.812 +}
1.813 +
1.814 +.variables-view-open-inspector:hover {
1.815 + -moz-image-region: rect(0,48px,16px,32px);
1.816 +}
1.817 +
1.818 +.variables-view-open-inspector:active {
1.819 + -moz-image-region: rect(0,32px,16px,16px);
1.820 +}
1.821 +
1.822 +.variable-or-property:focus .variables-view-open-inspector {
1.823 + -moz-image-region: rect(0,16px,16px,0);
1.824 +}
1.825 +
1.826 +.variables-view-throbber {
1.827 + background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
1.828 + width: 16px;
1.829 + height: 16px;
1.830 +}
1.831 +
1.832 +.element-value-input {
1.833 + -moz-margin-start: -2px !important;
1.834 + -moz-margin-end: 2px !important;
1.835 +}
1.836 +
1.837 +.element-name-input {
1.838 + -moz-margin-start: -2px !important;
1.839 + -moz-margin-end: 2px !important;
1.840 + font-weight: 600;
1.841 +}
1.842 +
1.843 +.element-value-input,
1.844 +.element-name-input {
1.845 + border: 1px solid rgba(128, 128, 128, .5) !important;
1.846 + border-radius: 0;
1.847 + color: inherit;
1.848 +}
1.849 +
1.850 +/* Variables and properties searching */
1.851 +
1.852 +.variables-view-searchinput {
1.853 + min-height: 24px;
1.854 +}
1.855 +
1.856 +.variable-or-property[unmatched] {
1.857 + border: none;
1.858 + margin: 0;
1.859 +}
1.860 +
1.861 +/* Expand/collapse arrow */
1.862 +
1.863 +.arrow {
1.864 + -moz-appearance: treetwisty;
1.865 + width: 20px;
1.866 + height: 20px;
1.867 +}
1.868 +
1.869 +.arrow[open] {
1.870 + -moz-appearance: treetwistyopen;
1.871 +}
1.872 +
1.873 +.arrow[invisible] {
1.874 + visibility: hidden;
1.875 +}
1.876 +
1.877 +/* Charts */
1.878 +
1.879 +.generic-chart-container {
1.880 + /* Hack: force hardware acceleration */
1.881 + transform: translateZ(1px);
1.882 +}
1.883 +
1.884 +.theme-dark .generic-chart-container {
1.885 + color: #f5f7fa; /* Light foreground text */
1.886 +}
1.887 +
1.888 +.theme-light .generic-chart-container {
1.889 + color: #585959; /* Grey foreground text */
1.890 +}
1.891 +
1.892 +.theme-dark .chart-colored-blob {
1.893 + fill: #a9bacb; /* Light content text */
1.894 + background: #a9bacb;
1.895 +}
1.896 +
1.897 +.theme-light .chart-colored-blob {
1.898 + fill: #8fa1b2; /* Grey content text */
1.899 + background: #8fa1b2;
1.900 +}
1.901 +
1.902 +/* Charts: Pie */
1.903 +
1.904 +.pie-chart-slice {
1.905 + stroke-width: 1px;
1.906 + cursor: pointer;
1.907 +}
1.908 +
1.909 +.theme-dark .pie-chart-slice {
1.910 + stroke: rgba(0,0,0,0.2);
1.911 +}
1.912 +
1.913 +.theme-light .pie-chart-slice {
1.914 + stroke: rgba(255,255,255,0.8);
1.915 +}
1.916 +
1.917 +.theme-dark .pie-chart-slice[largest] {
1.918 + stroke-width: 2px;
1.919 + stroke: #fff;
1.920 +}
1.921 +
1.922 +.theme-light .pie-chart-slice[largest] {
1.923 + stroke: #000;
1.924 +}
1.925 +
1.926 +.pie-chart-label {
1.927 + text-anchor: middle;
1.928 + dominant-baseline: middle;
1.929 + pointer-events: none;
1.930 +}
1.931 +
1.932 +.theme-dark .pie-chart-label {
1.933 + fill: #000;
1.934 +}
1.935 +
1.936 +.theme-light .pie-chart-label {
1.937 + fill: #fff;
1.938 +}
1.939 +
1.940 +.pie-chart-container[slices="1"] > .pie-chart-slice {
1.941 + stroke-width: 0px;
1.942 +}
1.943 +
1.944 +.pie-chart-slice,
1.945 +.pie-chart-label {
1.946 + transition: all 0.1s ease-out;
1.947 +}
1.948 +
1.949 +.pie-chart-slice:not(:hover):not([focused]),
1.950 +.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1.951 + transform: none !important;
1.952 +}
1.953 +
1.954 +/* Charts: Table */
1.955 +
1.956 +.table-chart-title {
1.957 + padding-bottom: 10px;
1.958 + font-size: 120%;
1.959 + font-weight: 600;
1.960 +}
1.961 +
1.962 +.table-chart-row {
1.963 + margin-top: 1px;
1.964 + cursor: pointer;
1.965 +}
1.966 +
1.967 +.table-chart-grid:hover > .table-chart-row {
1.968 + transition: opacity 0.1s ease-in-out;
1.969 +}
1.970 +
1.971 +.table-chart-grid:not(:hover) > .table-chart-row {
1.972 + transition: opacity 0.2s ease-in-out;
1.973 +}
1.974 +
1.975 +.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1.976 +.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1.977 + opacity: 0.4;
1.978 +}
1.979 +
1.980 +.table-chart-row-box {
1.981 + width: 8px;
1.982 + height: 1.5em;
1.983 + -moz-margin-end: 10px;
1.984 +}
1.985 +
1.986 +.table-chart-row-label {
1.987 + width: 8em;
1.988 + -moz-padding-end: 6px;
1.989 + cursor: inherit;
1.990 +}
1.991 +
1.992 +.table-chart-totals {
1.993 + margin-top: 8px;
1.994 + padding-top: 6px;
1.995 +}
1.996 +
1.997 +.theme-dark .table-chart-totals {
1.998 + border-top: 1px solid #b6babf; /* Grey foreground text */
1.999 +}
1.1000 +
1.1001 +.theme-light .table-chart-totals {
1.1002 + border-top: 1px solid #585959; /* Grey foreground text */
1.1003 +}
1.1004 +
1.1005 +.table-chart-summary-label {
1.1006 + font-weight: 600;
1.1007 + padding: 1px 0px;
1.1008 +}
1.1009 +
1.1010 +.theme-dark .table-chart-summary-label {
1.1011 + color: #f5f7fa; /* Light foreground text */
1.1012 +}
1.1013 +
1.1014 +.theme-light .table-chart-summary-label {
1.1015 + color: #18191a; /* Dark foreground text */
1.1016 +}
1.1017 +
1.1018 +%include ../../shared/devtools/app-manager/manifest-editor.inc.css
