LCARStrek/browser/devtools/dark-theme.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* According to:
   7  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
   8  */
   9 :root {
  10   --theme-body-background: #000000;
  11   --theme-sidebar-background: #000000;
  12   --theme-contrast-background: #402800;
  13   --theme-contrast-border: #A09090;
  14   --theme-contrast-background2: #795900;
  15
  16 /*  --theme-tab-toolbar-background: #.252c33; */
  17   --theme-toolbar-background: #000000;
  18   --theme-hover-background: #FFCF00;
  19   --theme-hover-color: #000000;
  20   --theme-selection-background: #008484;
  21   --theme-selection-color: #000000;
  22   --theme-selection-background2: #004242;
  23   --theme-selection-color2: #FF9F00;
  24   --theme-splitter-color: #9C9CFF;
  25   --theme-comment: #A09090;
  26
  27   --theme-contrastsidebar-background: #A09090;
  28   --theme-contrastsidebar-color: #000000;
  29   --theme-contrastsidebar-bordercolor: #000000;
  30
  31   --theme-body-color: #FF9F00;
  32   --theme-body-color-alt: #A09090;
  33   --theme-content-color1: #FF9F00;
  34   --theme-content-color2: #A09090;
  35   --theme-content-color3: #FF9F00;
  36   --theme-content-disabled: #8050B0;
  37
  38   --theme-text-blue: #3333FF;
  39   --theme-highlight-green: #008484;
  40   --theme-highlight-blue: #9C9CFF;
  41   --theme-highlight-bluegrey: #A09090;
  42   --theme-highlight-purple: #C09070;
  43   --theme-highlight-darkpurple: #6000CF;
  44   --theme-highlight-lightorange: #FFCF00;
  45   --theme-highlight-orange: #FF9F00;
  46   --theme-highlight-red: #FF0000;
  47   --theme-highlight-pink: #E7ADE7;
  48 }
  49
  50 .theme-body {
  51   background: var(--theme-body-background);
  52   color: var(--theme-body-color);
  53 }
  54
  55 .theme-sidebar {
  56   background: var(--theme-sidebar-background);
  57   color: var(--theme-content-color1);
  58 }
  59
  60 ::-moz-selection {
  61   background-color: var(--theme-selection-background);
  62   color: var(--theme-selection-color);
  63 }
  64
  65 .theme-bg-darker {
  66   background-color: rgba(0,0,0,0.5);
  67 }
  68
  69 .theme-selected,
  70 .CodeMirror-hint-active {
  71   background-color: var(--theme-selection-background2);
  72   color: var(--theme-selection-color2);
  73 }
  74
  75 .theme-bg-contrast,
  76 .variable-or-property:not([overridden])[changed] {
  77   background: var(--theme-contrast-background);
  78 }
  79
  80 .theme-link,
  81 .cm-s-mozilla .cm-link { /* original: blue */
  82   color: var(--theme-text-blue);
  83 }
  84
  85 /*
  86  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  87  * failures in debug builds.
  88  */
  89 .theme-link:visited,
  90 .cm-s-mozilla .cm-link:visited,
  91 .CodeMirror-Tern-type {
  92   color: var(--theme-text-blue);
  93 }
  94
  95 .theme-comment,
  96 .cm-s-mozilla .cm-meta,
  97 .cm-s-mozilla .cm-hr,
  98 .cm-s-mozilla .cm-comment,
  99 .variable-or-property .token-undefined,
 100 .variable-or-property .token-null,
 101 .CodeMirror-Tern-completion-unknown:before {
 102   color: var(--theme-comment);
 103 }
 104
 105 .theme-gutter {
 106   background-color: #000000;
 107   color: var(--theme-content-color3);
 108   border-color: #9C9CFF;
 109 }
 110
 111 .theme-separator { /* original: grey */
 112   border-color: #8050B0;
 113 }
 114
 115 .theme-fg-color1,
 116 .cm-s-mozilla .cm-number,
 117 .variable-or-property .token-number,
 118 .variable-or-property[return] > .title > .name,
 119 .variable-or-property[scope] > .title > .name {
 120   color: var(--theme-highlight-green);
 121 }
 122
 123 .CodeMirror-Tern-completion-number:before {
 124   background-color: #008484;
 125 }
 126
 127 .theme-fg-color2,
 128 .cm-s-mozilla .cm-attribute,
 129 .cm-s-mozilla .cm-variable,
 130 .cm-s-mozilla .cm-def,
 131 .cm-s-mozilla .cm-property,
 132 .cm-s-mozilla .cm-qualifier,
 133 .variables-view-variable > .title > .name {
 134   color: var(--theme-highlight-blue);
 135 }
 136
 137 .CodeMirror-Tern-completion-object:before {
 138   background-color: #9C9CFF;
 139 }
 140
 141 .cm-s-mozilla .cm-unused-line {
 142   text-decoration: line-through;
 143   text-decoration-color: #8050B0;
 144 }
 145
 146 .cm-s-mozilla .cm-executed-line {
 147   background-color: #404000;
 148 }
 149
 150 .theme-fg-color3,
 151 .cm-s-mozilla .cm-builtin,
 152 .cm-s-mozilla .cm-tag,
 153 .cm-s-mozilla .cm-header,
 154 .cm-s-mozilla .cm-bracket,
 155 .variables-view-property > .title > .name,
 156 .variable-or-property[safe-getter] > .title > .name {
 157   color: var(--theme-highlight-pink);
 158 }
 159
 160 .CodeMirror-Tern-completion-array:before {
 161   color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
 162 }
 163
 164 .theme-fg-color4 {
 165   color: var(--theme-highlight-purple);
 166 }
 167
 168 .theme-fg-color5,
 169 .cm-s-mozilla .cm-keyword {
 170   color: var(--theme-highlight-lightorange);
 171 }
 172
 173 .theme-fg-color6,
 174 .cm-s-mozilla .cm-string,
 175 .cm-s-mozilla .cm-string-2,
 176 .variable-or-property .token-string,
 177 .CodeMirror-Tern-farg {
 178   color: var(--theme-highlight-pink); /* -orange? */
 179 }
 180
 181 .CodeMirror-Tern-completion-string:before,
 182 .CodeMirror-Tern-completion-fn:before {
 183   background-color: #E7ADE7;
 184 }
 185
 186 .theme-fg-color7,
 187 .cm-s-mozilla .cm-atom,
 188 .cm-s-mozilla .cm-quote,
 189 .cm-s-mozilla .cm-error,
 190 .variable-or-property .token-boolean,
 191 .variable-or-property .token-domnode,
 192 .variable-or-property[exception] > .title > .name {
 193   color: var(--theme-highlight-red);
 194 }
 195
 196 .CodeMirror-Tern-completion-bool:before {
 197   background-color: #FF0000;
 198 }
 199
 200 .variable-or-property .token-domnode {
 201   font-weight: bold;
 202 }
 203
 204 .theme-toolbar,
 205 .devtools-toolbar,
 206 .devtools-sidebar-tabs > tabs,
 207 .CodeMirror-dialog { /* General toolbar styling */
 208 /*  color: var(--theme-body-color-alt);
 209   background-color: var(--theme-toolbar-background);*/
 210 }
 211
 212
 213 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 214   color: #FFCF00;
 215 }
 216
 217 .ruleview-colorswatch,
 218 .computedview-colorswatch,
 219 .ruleview-bezierswatch {
 220 /*  box-shadow: 0 0 0 1px #818181; */
 221 }
 222
 223 .variables-view-scope:focus > .title,
 224 .variable-or-property:focus > .title {
 225   background-color: #008484; /* fg-color2 */
 226   color: #000000;
 227 }
 228
 229 /* CodeMirror specific styles.
 230  * Best effort to match the existing theme, some of the colors
 231  * are duplicated here to prevent weirdness in the main theme. */
 232
 233 .CodeMirror { /* Inherit platform specific font sizing and styles */
 234   font-family: inherit;
 235   font-size: inherit;
 236   background: transparent;
 237 }
 238
 239 .CodeMirror pre,
 240 .cm-s-mozilla .cm-variable-2,
 241 .cm-s-mozilla .cm-variable-3,
 242 .cm-s-mozilla .cm-operator,
 243 .cm-s-mozilla .cm-special {
 244   color: var(--theme-content-color1);
 245 }
 246
 247 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 248   border-left: solid 1px #FF9F00;
 249 }
 250
 251 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 252   background: #008484;
 253   color: #FFCF00;
 254 }
 255
 256 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 257   background: #008484;
 258   color: #000000;
 259 }
 260
 261 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 262   background: rgba(0, 132, 132, .25);
 263 }
 264
 265 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 266   outline: solid 1px rgba(0, 132, 132, .4);
 267   color: #FFCF00;
 268 }
 269
 270 /* Highlight for a line that contains an error. */
 271 div.CodeMirror div.error-line {
 272   background: rgba(255, 0, 0, 0.2);
 273 }
 274
 275 /* Highlight for a line that represents a stack frame's location. */
 276 div.CodeMirror div.debug-line {
 277   background: rgba(156, 156, 255, 0.2);
 278 }
 279
 280 /* Generic highlighted text */
 281 div.CodeMirror span.marked-text {
 282   background: rgba(255,207,0,0.2);
 283   border: 1px dashed rgba(156, 156, 255, 0.6);
 284   -moz-margin-start: -1px;
 285   -moz-margin-end: -1px;
 286 }
 287
 288 /* Highlight for evaluating current statement. */
 289 div.CodeMirror span.eval-text {
 290   background-color: #403800;
 291 }
 292
 293 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 294   color: var(--theme-content-color2);
 295 }
 296
 297 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 298   border-right-color: var(--theme-contrast-border);
 299   background-color: var(--theme-contrast-background);
 300 }
 301
 302 .cm-s-markup-view pre {
 303   line-height: 1.4em;
 304   min-height: 1.4em;
 305 }
 306
 307 /* Twisty and checkbox controls */
 308 .theme-twisty, .theme-checkbox {
 309   width: 14px;
 310   height: 14px;
 311   background-repeat: no-repeat;
 312   background-image: url("chrome://browser/skin/devtools/controls.png");
 313   background-size: 28px 28px;
 314 }
 315
 316 .theme-twisty {
 317   cursor: pointer;
 318   background-position: -0px -14px;
 319 }
 320
 321 .theme-twisty:-moz-focusring {
 322   outline-style: none;
 323 }
 324
 325 .theme-twisty[open] {
 326   background-position: -14px -14px;
 327 }
 328
 329 .theme-twisty[invisible] {
 330   visibility: hidden;
 331 }
 332
 333 .theme-checkbox {
 334   display: inline-block;
 335   border: 0;
 336   padding: 0;
 337   outline: none;
 338   background-position: 0 0;
 339 }
 340
 341 .theme-checkbox[checked] {
 342   background-position: -14px 0;
 343 }
 344
 345 @media (min-resolution: 2dppx) {
 346   .theme-twisty, .theme-checkbox {
 347     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
 348   }
 349 }
 350
 351 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
 352
 353 .theme-tooltip-panel .panel-arrowcontent {
 354 /*  padding: 5px; */
 355   background: rgba(0, 0, 0, .9);
 356 /*  border-radius: 5px;
 357   box-shadow: none;
 358   border: 3px solid #9C9CFF; */
 359 }
 360
 361 /* Overring panel arrow images to fit with our light and dark themes */
 362 /*
 363 .theme-tooltip-panel .panel-arrow[side="top"] {
 364   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 365   margin-bottom: -4px;
 366 }
 367
 368 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 369   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 370   margin-top: -4px;
 371 }
 372
 373 .theme-tooltip-panel .panel-arrow[side="left"] {
 374   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 375   margin-right: -4px;
 376 }
 377
 378 .theme-tooltip-panel .panel-arrow[side="right"] {
 379   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 380   margin-left: -4px;
 381 }
 382
 383 @media (min-resolution: 2dppx) {
 384   .theme-tooltip-panel .panel-arrow[side="top"],
 385   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 386     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
 387   }
 388
 389   .theme-tooltip-panel .panel-arrow[side="left"],
 390   .theme-tooltip-panel .panel-arrow[side="right"] {
 391     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
 392   }
 393 }
 394 */
 395 .theme-tooltip-panel .devtools-tooltip-simple-text {
 396 /*  color: white; */
 397   border-bottom: 1px solid #A09090;
 398 }
 399
 400 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 401  border-bottom: 0;
 402 }
 403
 404 .devtools-horizontal-splitter {
 405 /*  border-bottom: 1px solid var(--theme-splitter-color); */
 406 }
 407
 408 .devtools-side-splitter {
 409 /*  -moz-border-end: 1px solid var(--theme-splitter-color);
 410   border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
 411 }
 412
 413 .devtools-textinput,
 414 .devtools-searchinput {
 415   background-color: #000000;
 416   color: #E7ADE7;
 417 }
 418
 419 .CodeMirror-Tern-fname {
 420   color: #A09090;
 421 }
 422
 423 .CodeMirror-hints,
 424 .CodeMirror-Tern-tooltip {
 425   background-color: #000000;
 426   color: var(--theme-body-color);
 427 }
 428
 429 /* === BEGIN toolbars.inc.css === */
 430
 431 /* Toolbars */
 432 .devtools-toolbar,
 433 .devtools-sidebar-tabs > tabs {
 434 }
 435
 436 .devtools-toolbar {
 437 }
 438
 439 .devtools-toolbar checkbox {
 440   /* LCARStrek checkbox colors don't work well against toolbar background */
 441   background-color: var(--theme-toolbar-background);
 442   padding: 2px;
 443 }
 444 .devtools-toolbar checkbox .checkbox-check {
 445 }
 446 .devtools-toolbar checkbox .checkbox-label-box {
 447 }
 448 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
 449 }
 450
 451 /* Toolbar buttons */
 452 .devtools-menulist,
 453 .devtools-toolbarbutton {
 454 /*  transition: background 0.05s ease-in-out; */
 455 }
 456
 457 .devtools-menulist:-moz-focusring,
 458 .devtools-toolbarbutton:-moz-focusring {
 459   outline: 1px dotted var(--theme-selection-color);
 460 }
 461
 462 .devtools-toolbarbutton[standalone] {
 463 }
 464 .devtools-toolbarbutton[label][standalone] {
 465 }
 466
 467 .devtools-toolbarbutton:not([label]),
 468 .devtools-toolbarbutton[text-as-image] {
 469   min-width: 20px;
 470 }
 471
 472 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 473   -moz-padding-start: 5px;
 474   -moz-padding-end: 5px;
 475   min-width: inherit;
 476 }
 477
 478 /* Command buttons with menupopups should be styled slightly differently -
 479    no background color and a bit more narrow */
 480 #toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
 481   background: transparent;
 482 }
 483 #toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
 484   padding: 0 2px;
 485 }
 486
 487 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
 488   display: none;
 489 }
 490
 491 .devtools-toolbar .devtools-toolbarbutton {
 492 }
 493
 494 .devtools-toolbarbutton > .toolbarbutton-icon {
 495 }
 496
 497 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 498 /*  -moz-box-orient: horizontal; */
 499 }
 500
 501 .devtools-toolbarbutton[type=menu-button] {
 502 }
 503
 504 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 505 }
 506
 507 .devtools-menulist > .menulist-dropmarker {
 508 }
 509
 510 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 511 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 512 }
 513
 514 .devtools-menulist,
 515 .devtools-toolbarbutton {
 516 }
 517
 518 /* Text-only buttons */
 519 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 520 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 521 /*  background-color: rgba(0, 0, 0, .2); / Splitter */
 522 }
 523
 524 /* Button States */
 525 .devtools-toolbarbutton:hover,
 526 #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover,
 527 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
 528 /*  background: rgba(0, 0, 0, .3); / Splitters */
 529 }
 530
 531 .devtools-toolbarbutton:hover:active,
 532 #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover:active,
 533 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
 534 /*  background: rgba(0, 0, 0, .4); / Splitters */
 535 }
 536
 537 /* Menu type buttons and checked states */
 538 .devtools-toolbarbutton[checked=true],
 539 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 540 /*  background: rgba(29, 79, 115, .7); / Select highlight blue /
 541   color: var(--theme-selection-color); */
 542 }
 543
 544 .devtools-menulist[open=true],
 545 .devtools-toolbarbutton[open=true],
 546 .devtools-toolbarbutton[open=true]:hover,
 547 .devtools-toolbarbutton[open=true]:hover:active,
 548 .devtools-toolbarbutton[checked=true],
 549 .devtools-toolbarbutton[checked=true]:hover,
 550 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 551 /*  background: rgba(29, 79, 115, .8); / Select highlight blue /
 552   color: var(--theme-selection-color); */
 553 }
 554
 555 .devtools-toolbarbutton[checked=true]:hover {
 556 }
 557
 558 .devtools-option-toolbarbutton {
 559   list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
 560 /*  background: none;
 561   border: none; */
 562 }
 563
 564 .devtools-option-toolbarbutton:hover,
 565 .devtools-option-toolbarbutton[open=true] {
 566   list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
 567 }
 568
 569 /* Toolbar button groups */
 570 .devtools-toolbarbutton-group > .devtools-toolbarbutton {
 571 }
 572
 573 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
 574 }
 575
 576 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
 577 }
 578
 579 .devtools-separator + .devtools-toolbarbutton {
 580 }
 581
 582 /* Text input */
 583
 584 .devtools-textinput,
 585 .devtools-searchinput {
 586 /*  -moz-appearance: none;
 587   margin: 0 3px;
 588   border: 1px solid rgb(88, 94, 101);
 589   border-radius: 2px;
 590   background-color: rgba(24, 29, 32, 1);
 591   padding: 4px 6px;
 592   color: rgba(184, 200, 217, 1);*/
 593 }
 594
 595 .devtools-searchinput {
 596 /*  margin-top: 1px;
 597   margin-bottom: 1px;
 598   padding: 0;*/
 599   -moz-padding-start: 22px;
 600   -moz-padding-end: 12px;
 601   background-position: 8px center;
 602   background-size: 11px 11px;
 603   background-repeat: no-repeat;
 604   font-size: inherit;
 605
 606   background-image: url("magnifying-glass.png");
 607 }
 608
 609 @media (min-resolution: 2dppx) {
 610   .devtools-searchinput {
 611     background-image: url("magnifying-glass@2x.png");
 612   }
 613 }
 614
 615 .devtools-searchinput:-moz-locale-dir(rtl) {
 616   background-position: calc(100% - 8px) center;
 617 }
 618
 619 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
 620   display: none;
 621 }
 622
 623 .devtools-no-search-result {
 624   border-color: var(--theme-highlight-red) !important;
 625 }
 626
 627 /* Close button */
 628
 629 .devtools-closebutton {
 630   min-width: 16px;
 631   width: 16px;
 632 }
 633
 634 .devtools-closebutton > image {
 635   width: 16px;
 636   height: 16px;
 637   -moz-appearance: none;
 638   background-size: 32px 16px;
 639   background-image: url("chrome://browser/skin/devtools/close@2x.png");
 640   background-position: 0 center;
 641   background-repeat: no-repeat;
 642 }
 643
 644 .devtools-closebutton:hover > image,
 645 .devtools-closebutton:hover:active > image {
 646   background-position: -16px center;
 647 }
 648
 649 .devtools-closebutton > .toolbarbutton-text {
 650   display: none;
 651 }
 652
 653 /* In-tools sidebar */
 654
 655 .devtools-sidebar-tabs {
 656 }
 657
 658 .devtools-sidebar-tabs > tabpanels {
 659   padding: 0;
 660   border: 0;
 661 }
 662
 663 .devtools-sidebar-tabs > tabs {
 664   position: static;
 665   overflow: hidden;
 666 }
 667
 668 .devtools-sidebar-tabs > tabs > .tabs-right,
 669 .devtools-sidebar-tabs > tabs > .tabs-left {
 670   display: none;
 671 }
 672
 673 .devtools-sidebar-tabs > tabs > tab {
 674   min-width: 78px;
 675   text-align: center;
 676   -moz-box-flex: 1;
 677   position: static;
 678   margin-top: 0;
 679 }
 680
 681 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
 682   position: static;
 683 }
 684
 685 .devtools-sidebar-tabs > tabs > tab:last-of-type {
 686   -moz-border-end-width: 0;
 687 }
 688
 689 .devtools-sidebar-tabs > tabs > tab:first-child {
 690 }
 691
 692 .devtools-sidebar-tabs > tabs > tab:hover {
 693 }
 694
 695 .devtools-sidebar-tabs > tabs > tab:hover:active {
 696 }
 697
 698 .devtools-sidebar-tabs > tabs > tab[selected] + tab {
 699 }
 700
 701 .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
 702 }
 703
 704 .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
 705 }
 706
 707 .devtools-sidebar-tabs > tabs > tab[selected],
 708 .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
 709 }
 710
 711 /* Toolbox - moved from toolbox.css.
 712  * Rules that apply to the global toolbox like command buttons,
 713  * devtools tabs, docking buttons, etc. */
 714
 715 #toolbox-controls > toolbarbutton,
 716 #toolbox-dock-buttons > toolbarbutton {
 717   min-width: 16px;
 718 /*  padding: 1px 3px; */
 719 }
 720
 721 #toolbox-dock-buttons > toolbarbutton > image {
 722   width: 16px;
 723   height: 16px;
 724   background-size: 32px 16px;
 725   background-position: 0 center;
 726   background-repeat: no-repeat;
 727 }
 728
 729 #toolbox-dock-buttons > toolbarbutton:hover > image {
 730   background-position: -16px center;
 731 }
 732
 733 #toolbox-dock-bottom > image {
 734   background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
 735 }
 736
 737 #toolbox-dock-side > image {
 738   background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
 739 }
 740
 741 #toolbox-dock-window > image {
 742   background-image: url("chrome://browser/skin/devtools/undock@2x.png");
 743 }
 744
 745 #toolbox-dock-window,
 746 #toolbox-dock-bottom,
 747 #toolbox-dock-side {
 748 }
 749
 750 #toolbox-dock-window:hover,
 751 #toolbox-dock-bottom:hover,
 752 #toolbox-dock-side:hover {
 753 }
 754
 755 .devtools-separator {
 756   margin: 0 2px;
 757   width: 2px;
 758 }
 759
 760 #toolbox-buttons:empty + .devtools-separator,
 761 .devtools-separator[invisible] {
 762   visibility: hidden;
 763 }
 764
 765 #toolbox-controls-separator {
 766   margin: 0;
 767 }
 768
 769 /* Command buttons */
 770
 771 .command-button {
 772 /*  padding: 1px 4px; */
 773   min-width: 16px;
 774 }
 775
 776 .command-button:hover {
 777 }
 778 .command-button:hover:active {
 779 }
 780
 781 .command-button > image {
 782   width: 16px;
 783   height: 16px;
 784   background-size: 32px 16px;
 785   background-position: 0 center;
 786   background-repeat: no-repeat;
 787 }
 788
 789 .command-button:hover > image,
 790 .command-button:hover:active > image,
 791 .command-button[checked=true] > image,
 792 .command-button[open=true] > image {
 793   background-position: -16px center;
 794 }
 795
 796 #command-button-paintflashing > image {
 797   background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
 798 }
 799
 800 #command-button-screenshot > image {
 801   background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
 802 }
 803
 804 #command-button-responsive > image {
 805   background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
 806 }
 807
 808 #command-button-tilt > image {
 809   background-image: url("chrome://browser/skin/devtools/command-tilt.png");
 810 }
 811
 812 #command-button-scratchpad > image {
 813   background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
 814 }
 815
 816 #command-button-pick > image {
 817   background-image: url("chrome://browser/skin/devtools/command-pick.png");
 818 }
 819
 820 #command-button-frames > image {
 821   background-image: url("chrome://browser/skin/devtools/command-frames.png");
 822 }
 823
 824 #command-button-splitconsole > image {
 825   background-image: url("chrome://browser/skin/devtools/command-console.png");
 826 }
 827
 828 #command-button-eyedropper > image {
 829   background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
 830 }
 831
 832 @media (min-resolution: 2dppx) {
 833   #command-button-paintflashing > image {
 834     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
 835   }
 836
 837   #command-button-screenshot > image {
 838     background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
 839   }
 840
 841   #command-button-responsive > image {
 842     background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
 843   }
 844
 845   #command-button-tilt > image {
 846     background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
 847   }
 848
 849   #command-button-scratchpad > image {
 850     background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
 851   }
 852
 853   #command-button-pick > image {
 854     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
 855   }
 856
 857   #command-button-frames > image {
 858     background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
 859   }
 860
 861   #command-button-splitconsole > image {
 862     background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
 863   }
 864
 865   #command-button-eyedropper > image {
 866     background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
 867   }
 868 }
 869
 870 /* Tabs */
 871
 872 .devtools-tabbar {
 873 }
 874
 875 #toolbox-tabs {
 876   margin: 0 2px;
 877   -moz-padding-start: 3px;
 878   background-color: #000000;
 879   color: #FFCF00;
 880 }
 881
 882 .devtools-tab {
 883   min-width: 32px;
 884   max-width: 110px;
 885   color: #000000;
 886   margin: 0;
 887   -moz-margin-end: 3px;
 888   padding: 1px;
 889   -moz-padding-start: 3px;
 890   background-color: #C09070;
 891   border-radius: 8px 8px 0 0;
 892 }
 893
 894 .devtools-tab > image {
 895   -moz-margin-end: 0px;
 896 /*  -moz-margin-start: 4px; */
 897   max-height: 16px;
 898   width: 16px; /* Prevents collapse during theme switching */
 899 }
 900
 901 .devtools-tab:hover > image {
 902 }
 903
 904 .devtools-tab:active > image,
 905 .devtools-tab[selected] > image {
 906 }
 907
 908 .devtools-tab:hover,
 909 .devtools-tab:hover:active {
 910   background-color: var(--theme-hover-background);
 911   color: var(--theme-hover-color);
 912 }
 913
 914 .devtools-tab[selected] {
 915   background-color: var(--theme-selection-background);
 916   color: var(--theme-selection-color);
 917 }
 918
 919 .devtools-tab > spacer {
 920   max-width: 0;
 921   -moz-box-flex: 0;
 922 }
 923
 924 .devtools-tab > image {
 925   -moz-margin-end: 0;
 926   -moz-margin-start: 0;
 927 }
 928
 929 #toolbox-option-container {
 930   background-color: #000000;
 931   -moz-padding-start: 3px;
 932 }
 933
 934 #toolbox-tab-options {
 935   min-width: 20px;
 936 }
 937
 938 #toolbox-tab-options > image {
 939   -moz-margin-end: 3px;
 940 }
 941
 942 .devtools-tab:not([highlighted]) > .highlighted-icon,
 943 .devtools-tab[selected] > .highlighted-icon,
 944 .devtools-tab:not([selected])[highlighted] > .default-icon {
 945   visibility: collapse;
 946 }
 947
 948 .devtools-tab:not([selected])[highlighted] {
 949   color: #FFCF00;
 950 }
 951
 952 .devtools-tab:not([highlighted]) > .highlighted-icon,
 953 .devtools-tab[selected] > .highlighted-icon,
 954 .devtools-tab:not([selected])[highlighted] > .default-icon {
 955   visibility: collapse;
 956 }
 957
 958 /* The options tab is special - it doesn't have the same parent
 959    as the other tabs (toolbox-option-container vs toolbox-tabs) */
 960 #toolbox-option-container .devtools-tab:not([selected]) {
 961 /*  background-color: transparent;*/
 962 }
 963 #toolbox-option-container .devtools-tab {
 964 /*  border-color: transparent;
 965   border-width: 0;
 966   -moz-padding-start: 1px;*/
 967 }
 968 #toolbox-tab-options > image {
 969 /*  margin: 0 8px;*/
 970 }
 971
 972 .hidden-labels-box:not(.visible) > label,
 973 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
 974   display: none;
 975 }
 976
 977 /* === END toolbars.inc.css === */