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