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