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