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