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