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