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