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