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