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