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   border: 1px solid #9C9CFF;
 423 }
 424
 425 .devtools-textinput:focus,
 426 .devtools-searchinput:focus {
 427   border-color: #008484;
 428 }
 429
 430 .CodeMirror-Tern-fname {
 431   color: #A09090;
 432 }
 433
 434 .CodeMirror-hints,
 435 .CodeMirror-Tern-tooltip {
 436   background-color: #000000;
 437   color: var(--theme-body-color);
 438 }
 439
 440 /* === BEGIN toolbars.inc.css === */
 441
 442 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 443 .theme-light,
 444 .theme-dark {
 445   --searchbox-background-color: #000000;
 446   --searchbox-border-color: #9C9CFF;
 447   --searcbox-no-match-background-color: #400000;
 448   --searcbox-no-match-border-color: #FF0000;
 449 }
 450
 451 /* Toolbars */
 452 .devtools-toolbar,
 453 .devtools-sidebar-tabs tabs {
 454 }
 455
 456 .devtools-toolbar {
 457 }
 458
 459 .devtools-toolbar checkbox {
 460   /* LCARStrek checkbox colors don't work well against toolbar background */
 461   background-color: var(--theme-toolbar-background);
 462   padding: 2px;
 463   line-height: -moz-block-height;
 464 }
 465 .devtools-toolbar checkbox .checkbox-check {
 466 }
 467 .devtools-toolbar checkbox .checkbox-label-box {
 468 }
 469 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
 470 }
 471
 472 /* Toolbar buttons */
 473 .devtools-menulist,
 474 .devtools-toolbarbutton {
 475 /*  transition: background 0.05s ease-in-out; */
 476 }
 477
 478 .devtools-menulist:-moz-focusring,
 479 .devtools-toolbarbutton:-moz-focusring {
 480   outline: 1px dotted var(--theme-selection-color);
 481 }
 482
 483 .devtools-toolbarbutton[standalone] {
 484 }
 485 .devtools-toolbarbutton[label][standalone] {
 486 }
 487
 488 .devtools-toolbarbutton:not([label]),
 489 .devtools-toolbarbutton[text-as-image] {
 490   min-width: 20px;
 491 }
 492
 493 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 494   -moz-padding-start: 5px;
 495   -moz-padding-end: 5px;
 496   min-width: inherit;
 497 }
 498
 499 /* Command buttons with menupopups should be styled slightly differently -
 500    no background color and a bit more narrow */
 501 #toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
 502   background: transparent;
 503 }
 504 #toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
 505   padding: 0 2px;
 506 }
 507
 508 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
 509   display: none;
 510 }
 511
 512 .devtools-toolbar .devtools-toolbarbutton {
 513   -moz-margin-start: 2px;
 514 }
 515
 516 .devtools-toolbarbutton > .toolbarbutton-icon {
 517 }
 518
 519 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 520 /*  -moz-box-orient: horizontal; */
 521 }
 522
 523 .devtools-toolbarbutton[type=menu-button] {
 524 }
 525
 526 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 527 }
 528
 529 .devtools-menulist > .menulist-dropmarker {
 530 }
 531
 532 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 533 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 534 }
 535
 536 .devtools-menulist,
 537 .devtools-toolbarbutton {
 538 }
 539
 540 /* Text-only buttons */
 541 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 542 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 543 /*  background-color: rgba(0, 0, 0, .2); / Splitter */
 544 }
 545
 546 /* Button States */
 547 .devtools-toolbarbutton:not([disabled]):hover,
 548 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
 549 .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
 550 /*  background: rgba(0, 0, 0, .3); / Splitters */
 551 }
 552
 553 .devtools-toolbarbutton:not([disabled]):hover:active,
 554 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
 555 .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
 556 /*  background: rgba(0, 0, 0, .4); / Splitters */
 557 }
 558
 559 /* Menu type buttons and checked states */
 560 .devtools-toolbarbutton[checked=true],
 561 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 562 /*  background: rgba(29, 79, 115, .7); / Select highlight blue /
 563   color: var(--theme-selection-color); */
 564 }
 565
 566 .devtools-menulist[open=true],
 567 .devtools-toolbarbutton[open=true],
 568 .devtools-toolbarbutton[open=true]:hover,
 569 .devtools-toolbarbutton[open=true]:hover:active,
 570 .devtools-toolbarbutton[checked=true],
 571 .devtools-toolbarbutton[checked=true]:hover,
 572 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 573 /*  background: rgba(29, 79, 115, .8); / Select highlight blue /
 574   color: var(--theme-selection-color); */
 575 }
 576
 577 .devtools-toolbarbutton[checked=true]:hover {
 578 }
 579
 580 .devtools-option-toolbarbutton {
 581   list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
 582 /*  background: none;
 583   border: none; */
 584 }
 585
 586 .devtools-option-toolbarbutton:hover,
 587 .devtools-option-toolbarbutton[open=true] {
 588   list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
 589 }
 590
 591 /* Toolbar button groups */
 592 .devtools-toolbarbutton-group > .devtools-toolbarbutton {
 593 }
 594
 595 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
 596 }
 597
 598 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
 599 }
 600
 601 .devtools-separator + .devtools-toolbarbutton {
 602 }
 603
 604 /* HTML buttons, similar to toolbar buttons, but work in HTML documents */
 605
 606 .devtools-button {
 607   border: 0 solid var(--theme-splitter-color);
 608   background: var(--theme-toolbar-background);
 609   margin: 0;
 610   padding: 0;
 611   min-width: 32px;
 612   min-height: 18px;
 613   /* The icon is absolutely positioned in the button using ::before */
 614   position: relative;
 615 }
 616
 617 .devtools-button[standalone] {
 618   min-height: 32px;
 619   border-width: 1px;
 620 }
 621
 622 /* Button States */
 623 .devtools-button:not([disabled]):hover {
 624   background: var(--theme-hover-background);
 625   color: var(--theme-hover-color);
 626 }
 627
 628 .devtools-button:not([disabled]):hover:active {
 629   background: var(--theme-active-background);
 630   color: var(--theme-active-color);
 631 }
 632
 633 /* Menu type buttons and checked states */
 634 .devtools-button[checked] {
 635   background: var(--theme-selection-background);
 636   color: var(--theme-selection-color);
 637 }
 638
 639 .devtools-button::before {
 640   content: "";
 641   display: block;
 642   width: 16px;
 643   height: 16px;
 644   position: absolute;
 645   left: 50%;
 646   top: 50%;
 647   margin: -8px 0 0 -8px;
 648   background-repeat: no-repeat;
 649 }
 650
 651 @media (min-resolution: 1.25dppx) {
 652   .devtools-button::before {
 653     background-size: 32px;
 654   }
 655 }
 656
 657 /* Text input */
 658
 659 .devtools-textinput,
 660 .devtools-searchinput {
 661 /*  -moz-appearance: none;
 662   margin: 0 3px;
 663   border: 1px solid rgb(88, 94, 101);
 664   border-radius: 2px;
 665   background-color: rgba(24, 29, 32, 1);
 666   padding: 4px 6px;
 667   color: rgba(184, 200, 217, 1);*/
 668 }
 669
 670 .devtools-searchinput {
 671 /*  margin-top: 1px;
 672   margin-bottom: 1px;
 673   padding: 0;*/
 674   -moz-padding-start: 22px;
 675   -moz-padding-end: 4px;
 676   background-position: 8px center;
 677   background-size: 11px 11px;
 678   background-repeat: no-repeat;
 679   font-size: inherit;
 680
 681   background-image: url("magnifying-glass.png");
 682 }
 683
 684 .devtools-searchinput:-moz-locale-dir(rtl) {
 685   background-position: calc(100% - 8px) center;
 686 }
 687
 688 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
 689   visibility: hidden;
 690 }
 691
 692 /* Searchbox is a div container element for a search input element */
 693 .devtools-searchbox {
 694   display: -moz-box;
 695   -moz-box-flex: 1;
 696   position: relative;
 697 }
 698
 699 .devtools-rule-searchbox {
 700   -moz-box-flex: 1;
 701   padding-right: 23px;
 702   width: 100%;
 703   font: inherit;
 704 }
 705
 706 .devtools-rule-searchbox[filled] {
 707   background-color: var(--searchbox-background-color);
 708   border-color: var(--searchbox-border-color);
 709 }
 710
 711 .devtools-style-searchbox-no-match {
 712   background-color: var(--searcbox-no-match-background-color) !important;
 713   border-color: var(--searcbox-no-match-border-color) !important;
 714 }
 715
 716 .devtools-no-search-result {
 717   border-color: var(--theme-highlight-red) !important;
 718 }
 719
 720 .devtools-searchinput-clear {
 721   position: absolute;
 722   top: 3.5px;
 723   right: 7px;
 724   padding: 0;
 725   border: 0;
 726   width: 16px;
 727   height: 16px;
 728   background-position: 0 0;
 729   background-repeat: no-repeat;
 730   background-color: transparent;
 731 }
 732
 733 .devtools-searchinput-clear {
 734   background-image: url("chrome://browser/skin/devtools/search-clear.svg");
 735 }
 736
 737 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
 738   background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important;
 739 }
 740
 741 .devtools-searchinput-clear:hover {
 742   background-position: -16px 0;
 743 }
 744
 745 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
 746   list-style-image: url("chrome://browser/skin/devtools/search-clear.svg");
 747   -moz-image-region: rect(0, 16px, 16px, 0);
 748 }
 749
 750 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
 751   -moz-image-region: rect(0, 32px, 16px, 16px);
 752 }
 753
 754 @media (min-resolution: 1.25dppx) {
 755   .devtools-searchinput {
 756     background-image: url("magnifying-glass@2x.png");
 757   }
 758 }
 759
 760 /* Close button */
 761
 762 .devtools-closebutton {
 763   min-width: 16px;
 764   width: 16px;
 765 }
 766
 767 .devtools-closebutton > image {
 768   width: 16px;
 769   height: 16px;
 770   -moz-appearance: none;
 771   background-size: 32px 16px;
 772   background-image: url("chrome://browser/skin/devtools/close@2x.png");
 773   background-position: 0 center;
 774   background-repeat: no-repeat;
 775 }
 776
 777 .devtools-closebutton:hover > image,
 778 .devtools-closebutton:hover:active > image {
 779   background-position: -16px center;
 780 }
 781
 782 .devtools-closebutton > .toolbarbutton-text {
 783   display: none;
 784 }
 785
 786 /* In-tools sidebar */
 787
 788 .devtools-sidebar-tabs {
 789 }
 790
 791 .devtools-sidebar-tabs > tabpanels {
 792   padding: 0;
 793   border: 0;
 794 }
 795
 796 .devtools-sidebar-tabs tabs {
 797   position: static;
 798   overflow: hidden;
 799 }
 800
 801 .devtools-sidebar-alltabs {
 802 /*  height: 24px;
 803   line-height: 24px;
 804   padding: 0 4px;
 805   margin: 0;
 806   border-width: 0 0 1px 0;
 807   -moz-border-start-width: 1px;
 808   border-style: solid;*/
 809 }
 810
 811 .devtools-sidebar-alltabs .toolbarbutton-icon {
 812   display: none;
 813 }
 814
 815 .devtools-sidebar-tabs tabs > .tabs-right,
 816 .devtools-sidebar-tabs tabs > .tabs-left {
 817   display: none;
 818 }
 819
 820 .devtools-sidebar-tabs tabs > tab {
 821   min-width: 78px;
 822   text-align: center;
 823   -moz-box-flex: 1;
 824   position: static;
 825   margin-top: 0;
 826 }
 827
 828 .devtools-sidebar-tabs tabs > tab:-moz-focusring {
 829   position: static;
 830 }
 831
 832 .devtools-sidebar-tabs tabs > tab:last-of-type {
 833   -moz-border-end-width: 0;
 834 }
 835
 836 .devtools-sidebar-tabs tabs > tab:first-child {
 837 }
 838
 839 .devtools-sidebar-tabs tabs > tab:hover {
 840 }
 841
 842 .devtools-sidebar-tabs tabs > tab:hover:active {
 843 }
 844
 845 .devtools-sidebar-tabs tabs > tab[selected] + tab {
 846 }
 847
 848 .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
 849 }
 850
 851 .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
 852 }
 853
 854 .devtools-sidebar-tabs tabs > tab[selected],
 855 .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
 856 }
 857
 858 /* Toolbox - moved from toolbox.css.
 859  * Rules that apply to the global toolbox like command buttons,
 860  * devtools tabs, docking buttons, etc. */
 861
 862 #toolbox-controls > toolbarbutton,
 863 #toolbox-dock-buttons > toolbarbutton {
 864   min-width: 16px;
 865 /*  padding: 1px 3px; */
 866 }
 867
 868 #toolbox-dock-buttons > toolbarbutton > image {
 869   width: 16px;
 870   height: 16px;
 871   background-size: 32px 16px;
 872   background-position: 0 center;
 873   background-repeat: no-repeat;
 874 }
 875
 876 #toolbox-dock-buttons > toolbarbutton:hover > image {
 877   background-position: -16px center;
 878 }
 879
 880 #toolbox-dock-bottom > image {
 881   background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
 882 }
 883
 884 #toolbox-dock-side > image {
 885   background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
 886 }
 887
 888 #toolbox-dock-window > image {
 889   background-image: url("chrome://browser/skin/devtools/undock@2x.png");
 890 }
 891
 892 #toolbox-dock-bottom-minimize {
 893   /* Bug 1177463 - The minimize button is currently hidden until we agree on
 894      the UI for it, and until bug 1173849 is fixed too. */
 895   display: none;
 896 }
 897
 898 #toolbox-dock-bottom-minimize > image {
 899   background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png");
 900 }
 901
 902 #toolbox-dock-bottom-minimize.minimized > image {
 903   background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png");
 904 }
 905
 906 #toolbox-dock-window,
 907 #toolbox-dock-bottom,
 908 #toolbox-dock-side {
 909 }
 910
 911 #toolbox-dock-window:hover,
 912 #toolbox-dock-bottom:hover,
 913 #toolbox-dock-side:hover {
 914 }
 915
 916 .devtools-separator {
 917   margin: 0 2px;
 918   width: 2px;
 919 }
 920
 921 #toolbox-buttons:empty + .devtools-separator,
 922 .devtools-separator[invisible] {
 923   visibility: hidden;
 924 }
 925
 926 #toolbox-controls-separator {
 927   margin: 0;
 928 }
 929
 930 /* Command buttons */
 931
 932 .command-button {
 933 /*  padding: 1px 4px; */
 934   min-width: 16px;
 935 }
 936
 937 .command-button:hover {
 938 }
 939 .command-button:hover:active {
 940 }
 941
 942 .command-button > image {
 943   width: 16px;
 944   height: 16px;
 945   background-size: 32px 16px;
 946   background-position: 0 center;
 947   background-repeat: no-repeat;
 948 }
 949
 950 .command-button:hover > image,
 951 .command-button:hover:active > image,
 952 .command-button[checked=true] > image,
 953 .command-button[open=true] > image {
 954   background-position: -16px center;
 955 }
 956
 957 #command-button-paintflashing > image {
 958   background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
 959 }
 960
 961 #command-button-screenshot > image {
 962   background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
 963 }
 964
 965 #command-button-responsive > image {
 966   background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
 967 }
 968
 969 #command-button-tilt > image {
 970   background-image: url("chrome://browser/skin/devtools/command-tilt.png");
 971 }
 972
 973 #command-button-scratchpad > image {
 974   background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
 975 }
 976
 977 #command-button-pick > image {
 978   background-image: url("chrome://browser/skin/devtools/command-pick.png");
 979 }
 980
 981 #command-button-frames > image {
 982   background-image: url("chrome://browser/skin/devtools/command-frames.png");
 983 }
 984
 985 #command-button-splitconsole > image {
 986   background-image: url("chrome://browser/skin/devtools/command-console.png");
 987 }
 988
 989 #command-button-eyedropper > image {
 990   background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
 991 }
 992
 993 #command-button-rulers > image {
 994   background-image: url("chrome://browser/skin/devtools/command-rulers.png");
 995 }
 996
 997 @media (min-resolution: 1.25dppx) {
 998   #command-button-paintflashing > image {
 999     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
1000   }
1001
1002   #command-button-screenshot > image {
1003     background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
1004   }
1005
1006   #command-button-responsive > image {
1007     background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
1008   }
1009
1010   #command-button-tilt > image {
1011     background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
1012   }
1013
1014   #command-button-scratchpad > image {
1015     background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
1016   }
1017
1018   #command-button-pick > image {
1019     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
1020   }
1021
1022   #command-button-frames > image {
1023     background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
1024   }
1025
1026   #command-button-splitconsole > image {
1027     background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
1028   }
1029
1030   #command-button-eyedropper > image {
1031     background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
1032   }
1033
1034   #command-button-rulers > image {
1035     background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png");
1036   }
1037 }
1038
1039 /* Tabs */
1040
1041 .devtools-tabbar {
1042 }
1043
1044 #toolbox-tabs {
1045   margin: 0 2px;
1046   -moz-padding-start: 3px;
1047   background-color: #000000;
1048   color: #FFCF00;
1049 }
1050
1051 .devtools-tab {
1052   min-width: 32px;
1053   max-width: 110px;
1054   color: #000000;
1055   margin: 0;
1056   -moz-margin-end: 3px;
1057   padding: 1px;
1058   -moz-padding-start: 3px;
1059   background-color: #C09070;
1060   border-radius: 8px 8px 0 0;
1061 }
1062
1063 .devtools-tab > image {
1064   -moz-margin-end: 0px;
1065 /*  -moz-margin-start: 4px; */
1066   max-height: 16px;
1067   width: 16px; /* Prevents collapse during theme switching */
1068 }
1069
1070 .devtools-tab:hover > image {
1071 }
1072
1073 .devtools-tab:active > image,
1074 .devtools-tab[selected] > image {
1075 }
1076
1077 .devtools-tab:hover,
1078 .devtools-tab:hover:active {
1079   background-color: var(--theme-hover-background);
1080   color: var(--theme-hover-color);
1081 }
1082
1083 .devtools-tab[selected] {
1084   background-color: var(--theme-selection-background);
1085   color: var(--theme-selection-color);
1086 }
1087
1088 .devtools-tab > spacer {
1089   max-width: 0;
1090   -moz-box-flex: 0;
1091 }
1092
1093 .devtools-tab > image {
1094   -moz-margin-end: 0;
1095   -moz-margin-start: 0;
1096 }
1097
1098 #toolbox-option-container {
1099   background-color: #000000;
1100   -moz-padding-start: 3px;
1101 }
1102
1103 #toolbox-tab-options {
1104   min-width: 20px;
1105 }
1106
1107 #toolbox-tab-options > image {
1108   -moz-margin-end: 3px;
1109 }
1110
1111 .devtools-tab:not([highlighted]) > .highlighted-icon,
1112 .devtools-tab[selected] > .highlighted-icon,
1113 .devtools-tab:not([selected])[highlighted] > .default-icon {
1114   visibility: collapse;
1115 }
1116
1117 .devtools-tab:not([selected])[highlighted] {
1118 }
1119
1120 .devtools-tab:not([selected])[highlighted] {
1121   color: #FFCF00;
1122 }
1123
1124 .devtools-tab:not([highlighted]) > .highlighted-icon,
1125 .devtools-tab[selected] > .highlighted-icon,
1126 .devtools-tab:not([selected])[highlighted] > .default-icon {
1127   visibility: collapse;
1128 }
1129
1130 /* The options tab is special - it doesn't have the same parent
1131    as the other tabs (toolbox-option-container vs toolbox-tabs) */
1132 #toolbox-option-container .devtools-tab:not([selected]) {
1133 /*  background-color: transparent;*/
1134 }
1135 #toolbox-option-container .devtools-tab {
1136 /*  border-color: transparent;
1137   border-width: 0;
1138   -moz-padding-start: 1px;*/
1139 }
1140 #toolbox-tab-options > image {
1141 /*  margin: 0 8px;*/
1142 }
1143
1144 .hidden-labels-box:not(.visible) > label,
1145 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
1146   display: none;
1147 }
1148
1149 .devtools-horizontal-splitter {
1150 /*  border-bottom: 1px solid var(--theme-splitter-color); */
1151 }
1152
1153 .devtools-side-splitter {
1154 /*  -moz-border-end: 1px solid var(--theme-splitter-color);
1155   border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
1156 }
1157 /* Throbbers */
1158
1159 .devtools-throbber::before {
1160   content: "";
1161   display: inline-block;
1162   vertical-align: bottom;
1163   -moz-margin-end: 0.5em;
1164   width: 1em;
1165   height: 1em;
1166   border: 2px solid currentColor;
1167   border-right-color: transparent;
1168   border-radius: 50%;
1169   animation: 1.1s linear throbber-spin infinite;
1170 }
1171
1172 @keyframes throbber-spin {
1173   from {
1174     transform: none;
1175   }
1176   to {
1177     transform: rotate(360deg);
1178   }
1179 }
1180
1181 /* === END toolbars.inc.css === */