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