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