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