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