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