LCARStrek/devtools/toolbars.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 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
   7 .theme-light,
   8 .theme-dark {
   9   --searchbox-background-color: #000000;
  10   --searchbox-border-color: #9C9CFF;
  11   --searcbox-no-match-background-color: #400000;
  12   --searcbox-no-match-border-color: #FF0000;
  13
  14   /* Toolbox buttons */
  15   --command-paintflashing-image: url(images/command-paintflashing.svg);
  16   --command-screenshot-image: url(images/command-screenshot.svg);
  17   --command-responsive-image: url(images/command-responsivemode.svg);
  18   --command-scratchpad-image: url(images/command-scratchpad.svg);
  19   --command-pick-image: url(images/command-pick.svg);
  20   --command-frames-image: url(images/command-frames.svg);
  21   --command-splitconsole-image: url(images/command-console.svg);
  22   --command-noautohide-image: url(images/command-noautohide.svg);
  23   --command-eyedropper-image: url(images/command-eyedropper.svg);
  24   --command-rulers-image: url(images/command-rulers.svg);
  25   --command-measure-image: url(images/command-measure.svg);
  26 }
  27
  28 /* Toolbars */
  29 .devtools-toolbar,
  30 .devtools-sidebar-tabs tabs {
  31 }
  32
  33 .devtools-toolbar {
  34 }
  35
  36 .devtools-toolbar checkbox {
  37   /* LCARStrek checkbox colors don't work well against toolbar background */
  38   background-color: var(--theme-toolbar-background);
  39   padding: 2px;
  40   line-height: -moz-block-height;
  41 }
  42 .devtools-toolbar checkbox .checkbox-check {
  43 }
  44 .devtools-toolbar checkbox .checkbox-label-box {
  45 }
  46 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
  47 }
  48
  49 /* Toolbar buttons */
  50
  51 .devtools-menulist,
  52 .devtools-toolbarbutton,
  53 .devtools-button {
  54 /*  transition: background 0.05s ease-in-out; */
  55 }
  56
  57 .devtools-menulist,
  58 .devtools-toolbarbutton {
  59 }
  60
  61 .devtools-menulist:-moz-focusring,
  62 .devtools-toolbarbutton:-moz-focusring {
  63   outline: 1px dotted var(--theme-selection-color);
  64 }
  65
  66 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
  67 .devtools-button::before {
  68   width: 16px;
  69   height: 16px;
  70 /*  transition: opacity 0.05s ease-in-out;*/
  71 }
  72
  73 /* HTML buttons */
  74 .devtools-button {
  75   margin: 0;
  76   padding: 0;
  77   min-width: 32px;
  78   background: var(--theme-toolbar-background);
  79   color: var(--theme-body-color);
  80   /* The icon is absolutely positioned in the button using ::before */
  81   position: relative;
  82 }
  83
  84 .devtools-button:not([disabled]):hover {
  85   background: var(--theme-hover-background);
  86   color: var(--theme-hover-color);
  87 }
  88
  89 .devtools-button:not([disabled]):hover:active {
  90   background: var(--theme-active-background);
  91   color: var(--theme-active-color);
  92 }
  93
  94 /* Menu type buttons and checked states */
  95 .devtools-button[checked] {
  96   background: var(--theme-selection-background);
  97   color: var(--theme-selection-color);
  98 }
  99
 100 .devtools-button::before {
 101   content: "";
 102   display: block;
 103   position: absolute;
 104   left: 50%;
 105   top: 50%;
 106   margin: -8px 0 0 -8px;
 107   background-size: cover;
 108   background-repeat: no-repeat;
 109 /*  transition: opacity 0.05s ease-in-out;*/
 110 }
 111
 112 /* Standalone buttons */
 113 .devtools-button[standalone],
 114 .devtools-button[data-standalone],
 115 .devtools-toolbarbutton[standalone],
 116 .devtools-toolbarbutton[data-standalone] {
 117   border: none;
 118 /*  min-height: 32px; */
 119   background-color: var(--theme-button-background);
 120 }
 121
 122 .devtools-toolbarbutton[standalone] {
 123 }
 124 .devtools-toolbarbutton[label][standalone] {
 125 }
 126
 127 /* Icon button styles */
 128 .devtools-toolbarbutton:not([label]),
 129 .devtools-toolbarbutton[text-as-image] {
 130   min-width: 20px;
 131 }
 132
 133 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 134   -moz-padding-start: 5px;
 135   -moz-padding-end: 5px;
 136   min-width: inherit;
 137 }
 138
 139 #toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
 140 /*  background: transparent; */
 141 }
 142 #toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
 143   padding: 0 2px;
 144 }
 145
 146 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
 147   display: none;
 148 }
 149
 150 .devtools-toolbar .devtools-toolbarbutton {
 151   -moz-margin-start: 2px;
 152 }
 153
 154 .devtools-toolbarbutton > .toolbarbutton-icon {
 155 }
 156
 157 /* Menu button styles (eg. web console filters) */
 158 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 159 /*  -moz-box-orient: horizontal; */
 160 }
 161
 162 .devtools-toolbarbutton[type=menu-button] {
 163 }
 164
 165 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 166 }
 167
 168 .devtools-menulist > .menulist-dropmarker {
 169 }
 170
 171 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 172 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 173 }
 174
 175 /* Icon-only buttons */
 176 .devtools-button:empty::before,
 177 .devtools-toolbarbutton:not([label]):not([disabled]) > image {
 178 /*  opacity: 0.8;*/
 179 }
 180
 181 .devtools-button:hover:empty::before,
 182 .devtools-button[checked]:empty::before,
 183 .devtools-button[open]:empty::before,
 184 .devtools-toolbarbutton:not([label]):hover > image,
 185 .devtools-toolbarbutton:not([label])[checked=true] > image,
 186 .devtools-toolbarbutton:not([label])[open=true] > image {
 187 /*  opacity: 1;*/
 188 }
 189
 190 .devtools-button:disabled,
 191 .devtools-button[disabled],
 192 .devtools-toolbarbutton[disabled] {
 193 /*  opacity: 0.5 !important;*/
 194 }
 195
 196 .devtools-button[checked]:empty::before,
 197 .devtools-button[open]:empty::before,
 198 .devtools-toolbarbutton:not([label])[checked=true] > image,
 199 .devtools-toolbarbutton:not([label])[open=true] > image {
 200   filter: url(images/filters.svg#checked-icon-state);
 201 }
 202
 203 /* Text-only buttons */
 204 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 205 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 206 /*  background-color: rgba(0, 0, 0, .2); / Splitter */
 207 }
 208
 209 /* Text-only button states */
 210 .devtools-button:not(:empty):not([disabled]):hover,
 211 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
 212 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
 213 /*  background: rgba(0, 0, 0, .3); / Splitters */
 214 }
 215
 216 .devtools-button:not(:empty):not([disabled]):hover:active,
 217 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
 218 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
 219 /*  background: rgba(0, 0, 0, .4); / Splitters */
 220 }
 221
 222 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 223 .devtools-toolbarbutton:not([disabled])[label][open],
 224 .devtools-button:not(:empty)[checked=true],
 225 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
 226 /*  background: rgba(29, 79, 115, .7); / Select highlight blue /
 227   color: var(--theme-selection-color); */
 228 }
 229
 230 .devtools-menulist[open=true],
 231 .devtools-toolbarbutton[open=true],
 232 .devtools-toolbarbutton[open=true]:hover,
 233 .devtools-toolbarbutton[open=true]:hover:active,
 234 .devtools-toolbarbutton[checked=true],
 235 .devtools-toolbarbutton[checked=true]:hover,
 236 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 237 /*  background: rgba(29, 79, 115, .8); / Select highlight blue /
 238   color: var(--theme-selection-color); */
 239 }
 240
 241 .devtools-toolbarbutton[checked=true]:hover {
 242 }
 243
 244 .devtools-option-toolbarbutton {
 245   list-style-image: url("chrome://devtools/skin/images/tool-options-tbutton.svg");
 246 }
 247
 248 /* Toolbar button groups */
 249 .devtools-toolbarbutton-group > .devtools-toolbarbutton {
 250 }
 251
 252 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
 253 }
 254
 255 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
 256 }
 257
 258 .devtools-separator + .devtools-toolbarbutton {
 259 }
 260
 261 :root {
 262   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
 263 }
 264
 265 .devtools-button.devtools-clear-icon::before {
 266   background-image: var(--clear-icon-url);
 267 }
 268
 269 .devtools-toolbarbutton.devtools-clear-icon {
 270   list-style-image: var(--clear-icon-url);
 271 }
 272
 273 /* Text input */
 274
 275 .devtools-textinput,
 276 .devtools-searchinput {
 277 /*  -moz-appearance: none;
 278   margin: 0 3px;
 279   border: 1px solid rgb(88, 94, 101);
 280   border-radius: 2px;
 281   background-color: rgba(24, 29, 32, 1);
 282   padding: 4px 6px;
 283   color: rgba(184, 200, 217, 1);*/
 284 }
 285
 286 :root[platform="mac"] .devtools-textinput,
 287 :root[platform="mac"] .devtools-searchinput {
 288 /*  border-radius: 20px;*/
 289 }
 290
 291
 292 .devtools-searchinput {
 293 /*  margin-top: 1px;
 294   margin-bottom: 1px;
 295   padding: 0;*/
 296   -moz-padding-start: 22px;
 297   -moz-padding-end: 4px;
 298   background-position: 8px center;
 299   background-size: 11px 11px;
 300   background-repeat: no-repeat;
 301   font-size: inherit;
 302
 303   background-image: url("magnifying-glass.png");
 304 }
 305
 306 .devtools-searchinput:-moz-locale-dir(rtl),
 307 .devtools-searchinput:-moz-dir(rtl) {
 308   background-position: calc(100% - 8px) center;
 309 }
 310
 311 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
 312   visibility: hidden;
 313 }
 314
 315 /* Searchbox is a div container element for a search input element */
 316 .devtools-searchbox {
 317   display: flex;
 318   flex: 1;
 319   position: relative;
 320 }
 321
 322 .devtools-rule-searchbox {
 323   -moz-box-flex: 1;
 324   width: 100%;
 325   font: inherit;
 326 }
 327
 328 .devtools-rule-searchbox[filled] {
 329   background-color: var(--searchbox-background-color);
 330   border-color: var(--searchbox-border-color);
 331   -moz-padding-end: 23px;
 332 }
 333
 334 .devtools-style-searchbox-no-match {
 335   background-color: var(--searcbox-no-match-background-color) !important;
 336   border-color: var(--searcbox-no-match-border-color) !important;
 337 }
 338
 339 .devtools-no-search-result {
 340   border-color: var(--theme-highlight-red) !important;
 341 }
 342
 343 .devtools-searchinput-clear {
 344   position: absolute;
 345   top: 3.5px;
 346   right: 7px;
 347   padding: 0;
 348   border: 0;
 349   width: 16px;
 350   height: 16px;
 351   background-position: 0 0;
 352   background-repeat: no-repeat;
 353   background-color: transparent;
 354 }
 355
 356 .devtools-searchinput-clear:-moz-dir(rtl) {
 357   right: unset;
 358   left: 7px;
 359 }
 360
 361 .devtools-searchinput-clear {
 362   background-image: url("chrome://devtools/skin/search-clear.svg");
 363 }
 364
 365 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
 366   background-image: url("chrome://devtools/skin/search-clear-failed.svg") !important;
 367 }
 368
 369 .devtools-searchinput-clear:hover {
 370   background-position: -16px 0;
 371 }
 372
 373 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
 374   list-style-image: url("chrome://devtools/skin/search-clear.svg");
 375   -moz-image-region: rect(0, 16px, 16px, 0);
 376 }
 377
 378 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
 379   -moz-image-region: rect(0, 32px, 16px, 16px);
 380 }
 381
 382 @media (min-resolution: 1.1dppx) {
 383   .devtools-searchinput {
 384     background-image: url("magnifying-glass@2x.png");
 385   }
 386 }
 387
 388 /* Close button */
 389
 390 .devtools-closebutton {
 391   min-width: 16px;
 392   width: 16px;
 393 }
 394
 395 .devtools-closebutton > image {
 396   width: 16px;
 397   height: 16px;
 398   -moz-appearance: none;
 399   background-size: 32px 16px;
 400   background-image: url("chrome://devtools/skin/close@2x.png");
 401   background-position: 0 center;
 402   background-repeat: no-repeat;
 403 }
 404
 405 .devtools-closebutton:hover > image,
 406 .devtools-closebutton:hover:active > image {
 407   background-position: -16px center;
 408 }
 409
 410 .devtools-closebutton > .toolbarbutton-text {
 411   display: none;
 412 }
 413
 414 #toolbox-close::before {
 415   background-image: url("chrome://devtools/skin/close@2x.png");
 416 }
 417
 418 /* In-tools sidebar */
 419
 420 .devtools-sidebar-tabs {
 421 }
 422
 423 .devtools-sidebar-tabs > tabpanels {
 424   padding: 0;
 425   border: 0;
 426 }
 427
 428 .devtools-sidebar-tabs tabs {
 429   position: static;
 430   overflow: hidden;
 431 }
 432
 433 .devtools-sidebar-alltabs {
 434 /*  height: 24px;
 435   line-height: 24px;
 436   padding: 0 4px;
 437   margin: 0;
 438   border-width: 0 0 1px 0;
 439   -moz-border-start-width: 1px;
 440   border-style: solid;*/
 441 }
 442
 443 .devtools-sidebar-alltabs .toolbarbutton-icon {
 444   display: none;
 445 }
 446
 447 .devtools-sidebar-tabs tabs > .tabs-right,
 448 .devtools-sidebar-tabs tabs > .tabs-left {
 449   display: none;
 450 }
 451
 452 .devtools-sidebar-tabs tabs > tab {
 453   min-width: 78px;
 454   text-align: center;
 455   -moz-box-flex: 1;
 456   position: static;
 457   margin-top: 0;
 458 }
 459
 460 .devtools-sidebar-tabs tabs > tab:-moz-focusring {
 461   position: static;
 462 }
 463
 464 .devtools-sidebar-tabs tabs > tab:first-of-type {
 465   -moz-margin-start: 0;
 466 }
 467
 468 .devtools-sidebar-tabs tabs > tab:last-of-type {
 469   -moz-border-end-width: 0;
 470 }
 471
 472 .devtools-sidebar-tabs tabs > tab {
 473 }
 474
 475 .devtools-sidebar-tabs tabs > tab[selected],
 476 .devtools-sidebar-tabs tabs > tab[selected] + tab {
 477 }
 478
 479 .devtools-sidebar-tabs tabs > tab:first-child {
 480 }
 481
 482 .devtools-sidebar-tabs tabs > tab:hover {
 483 }
 484
 485 .devtools-sidebar-tabs tabs > tab:hover:active {
 486 }
 487
 488 .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
 489 }
 490
 491 .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
 492 }
 493
 494 .devtools-sidebar-tabs tabs > tab[selected],
 495 .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
 496 }
 497
 498 /* Toolbox - moved from toolbox.css.
 499  * Rules that apply to the global toolbox like command buttons,
 500  * devtools tabs, docking buttons, etc. */
 501
 502 #toolbox-controls > toolbarbutton,
 503 #toolbox-dock-buttons > toolbarbutton {
 504   min-width: 16px;
 505 /*  padding: 1px 3px; */
 506 }
 507
 508 #toolbox-dock-buttons > toolbarbutton > image {
 509   width: 16px;
 510   height: 16px;
 511   background-size: 32px 16px;
 512   background-position: 0 center;
 513   background-repeat: no-repeat;
 514 }
 515
 516 #toolbox-dock-buttons > toolbarbutton:hover > image {
 517   background-position: -16px center;
 518 }
 519
 520 #toolbox-dock-bottom::before,
 521 #toolbox-dock-bottom > image {
 522   background-image: url("chrome://devtools/skin/dock-bottom@2x.png");
 523 }
 524
 525 #toolbox-dock-side::before,
 526 #toolbox-dock-side > image {
 527   background-image: url("chrome://devtools/skin/dock-side@2x.png");
 528 }
 529
 530 #toolbox-dock-window::before,
 531 #toolbox-dock-window > image {
 532   background-image: url("chrome://devtools/skin/undock@2x.png");
 533 }
 534
 535 #toolbox-dock-bottom-minimize {
 536   /* Bug 1177463 - The minimize button is currently hidden until we agree on
 537      the UI for it, and until bug 1173849 is fixed too. */
 538   display: none;
 539 }
 540
 541 #toolbox-dock-bottom-minimize > image {
 542   background-image: url("chrome://devtools/skin/dock-bottom-minimize@2x.png");
 543 }
 544
 545 #toolbox-dock-bottom-minimize.minimized > image {
 546   background-image: url("chrome://devtools/skin/dock-bottom-maximize@2x.png");
 547 }
 548
 549 #toolbox-dock-window,
 550 #toolbox-dock-bottom,
 551 #toolbox-dock-side {
 552 }
 553
 554 #toolbox-dock-window:hover,
 555 #toolbox-dock-bottom:hover,
 556 #toolbox-dock-side:hover {
 557 }
 558
 559 .devtools-separator {
 560   margin: 0 2px;
 561   width: 2px;
 562 }
 563
 564 #toolbox-buttons:empty + .devtools-separator,
 565 .devtools-separator[invisible] {
 566   visibility: hidden;
 567 }
 568
 569 #toolbox-controls-separator {
 570   margin: 0;
 571   width: 1px;
 572 }
 573
 574 /* Command buttons */
 575
 576 .command-button {
 577   -moz-appearance: none;
 578   border: none;
 579 /*  padding: 0 8px; */
 580 /*  margin: 0; */
 581   width: 16px;
 582   position: relative;
 583   -moz-user-focus: normal;
 584 }
 585
 586 .command-button:hover {
 587 /*  background-color: var(--toolbar-tab-hover); */
 588 }
 589 .command-button:hover:active, .command-button[checked=true]:not(:hover) {
 590 /*  background-color: var(--toolbar-tab-hover-active) */
 591 }
 592
 593 #command-button-frames {
 594   width: 32px;
 595 }
 596
 597 #toolbox-close::before,
 598 .toolbox-dock-button::before,
 599 .command-button::before,
 600 .command-button > image {
 601   width: 16px;
 602   height: 16px;
 603   background-size: cover;
 604   background-position: 0 center;
 605   background-repeat: no-repeat;
 606 }
 607
 608 #toolbox-close:hover::before,
 609 #toolbox-close:hover:active::before,
 610 .toolbox-dock-button:hover::before,
 611 .toolbox-dock-button:hover:active::before,
 612 .command-button:hover::before,
 613 .command-button:hover:active::before,
 614 .command-button[checked=true]::before,
 615 .command-button[open=true]::before,
 616 .command-button:hover > image,
 617 .command-button:hover:active > image,
 618 .command-button[checked=true] > image,
 619 .command-button[open=true] > image {
 620   filter: url(images/filters.svg#checked-icon-state);
 621 }
 622
 623 #command-button-paintflashing > image,
 624 #command-button-paintflashing::before {
 625   background-image: var(--command-paintflashing-image);
 626 }
 627
 628 #command-button-screenshot > image,
 629 #command-button-screenshot::before {
 630   background-image: var(--command-screenshot-image);
 631 }
 632
 633 #command-button-responsive > image,
 634 #command-button-responsive::before {
 635   background-image: var(--command-responsive-image);
 636 }
 637
 638 #command-button-scratchpad > image,
 639 #command-button-scratchpad::before {
 640   background-image: var(--command-scratchpad-image);
 641 }
 642
 643 #command-button-pick > image,
 644 #command-button-pick::before {
 645   background-image: var(--command-pick-image);
 646 }
 647
 648 #command-button-splitconsole > image,
 649 #command-button-splitconsole::before {
 650   background-image: var(--command-splitconsole-image);
 651 }
 652
 653 #command-button-noautohide > image,
 654 #command-button-noautohide::before {
 655   background-image: var(--command-noautohide-image);
 656 }
 657
 658 #command-button-eyedropper > image,
 659 #command-button-eyedropper::before {
 660   background-image: var(--command-eyedropper-image);
 661 }
 662
 663 #command-button-rulers > image,
 664 #command-button-rulers::before {
 665   background-image: var(--command-rulers-image);
 666 }
 667
 668 #command-button-measure > image,
 669 #command-button-measure::before {
 670   background-image: var(--command-measure-image);
 671 }
 672
 673 #command-button-frames > image,
 674 #command-button-frames::before {
 675   background-image: var(--command-frames-image);
 676 }
 677
 678 /* Tabs */
 679
 680 .devtools-tabbar {
 681 }
 682
 683 #toolbox-tabs {
 684   padding-inline-start: 3px;
 685   margin-inline-start: 2px; /* this is only needed for the old button design */
 686   margin-inline-end: 3px; /* this is for the new ::before-based button design */
 687   background-color: #000000;
 688   color: #FFCF00;
 689 }
 690
 691 .toolbox-panel {
 692   display: -moz-box;
 693   -moz-box-flex: 1;
 694   visibility: collapse;
 695 }
 696
 697 #toolbox-deck[selectedIndex] > .toolbox-panel, /* workaround for Firefox 47 and older */
 698 .toolbox-panel[selected] {
 699   visibility: visible;
 700 }
 701
 702 .devtools-tab {
 703   min-width: 32px;
 704   max-width: 110px;
 705   color: #000000;
 706   margin: 0;
 707   -moz-margin-end: 3px;
 708   padding: 1px;
 709   -moz-padding-start: 3px;
 710   background-color: #C09070;
 711   border-radius: 8px 8px 0 0;
 712 }
 713
 714 .devtools-tab > image {
 715   -moz-margin-end: 0px;
 716 /*  -moz-margin-start: 4px; */
 717   max-height: 16px;
 718   width: 16px; /* Prevents collapse during theme switching */
 719 }
 720
 721 .devtools-tab:hover > image {
 722 }
 723
 724 .devtools-tab:active > image,
 725 .devtools-tab[selected] > image {
 726 }
 727
 728 .devtools-tab:hover,
 729 .devtools-tab:hover:active {
 730   background-color: var(--theme-hover-background);
 731   color: var(--theme-hover-color);
 732 }
 733
 734 .devtools-tab[selected] {
 735   background-color: var(--theme-selection-background);
 736   color: var(--theme-selection-color);
 737 }
 738
 739 .devtools-tab > spacer {
 740   max-width: 0;
 741   -moz-box-flex: 0;
 742 }
 743
 744 .devtools-tab > image {
 745   -moz-margin-end: 0;
 746   -moz-margin-start: 0;
 747 }
 748
 749 #toolbox-picker-container {
 750   margin-inline-start: 1px;
 751 }
 752
 753 #toolbox-option-container {
 754   background-color: #000000;
 755   padding-inline-start: 3px;
 756   margin-inline-end: 1px;
 757 }
 758
 759 #toolbox-tab-options {
 760   min-width: 20px;
 761 }
 762
 763 #toolbox-tab-options > image {
 764   -moz-margin-end: 3px;
 765 }
 766
 767 .devtools-tab:not([highlighted]) > .highlighted-icon,
 768 .devtools-tab[selected] > .highlighted-icon,
 769 .devtools-tab:not([selected])[highlighted] > .default-icon {
 770   visibility: collapse;
 771 }
 772
 773 .devtools-tab:not([selected])[highlighted] {
 774 }
 775
 776 .devtools-tab:not([selected])[highlighted] {
 777   color: #FFCF00;
 778 }
 779
 780 .devtools-tab:not([highlighted]) > .highlighted-icon,
 781 .devtools-tab[selected] > .highlighted-icon,
 782 .devtools-tab:not([selected])[highlighted] > .default-icon {
 783   visibility: collapse;
 784 }
 785
 786 /* The options tab is special - it doesn't have the same parent
 787    as the other tabs (toolbox-option-container vs toolbox-tabs) */
 788 #toolbox-option-container .devtools-tab:not([selected]) {
 789 /*  background-color: transparent;*/
 790 }
 791 #toolbox-option-container .devtools-tab {
 792 /*  border-color: transparent;
 793   border-width: 0;
 794   -moz-padding-start: 1px;*/
 795 }
 796 #toolbox-tab-options > image {
 797 /*  margin: 0 8px;*/
 798 }
 799
 800 .hidden-labels-box:not(.visible) > label,
 801 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
 802   display: none;
 803 }
 804
 805 .devtools-horizontal-splitter {
 806 /*  border-bottom: 1px solid var(--theme-splitter-color); */
 807 }
 808
 809 .devtools-side-splitter {
 810 /*  -moz-border-end: 1px solid var(--theme-splitter-color);
 811   border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
 812 }
 813 /* Throbbers */
 814
 815 .devtools-throbber::before {
 816   content: "";
 817   display: inline-block;
 818   vertical-align: bottom;
 819   -moz-margin-end: 0.5em;
 820   width: 1em;
 821   height: 1em;
 822   border: 2px solid currentColor;
 823   border-right-color: transparent;
 824   border-radius: 50%;
 825   animation: 1.1s linear throbber-spin infinite;
 826 }
 827
 828 @keyframes throbber-spin {
 829   from {
 830     transform: none;
 831   }
 832   to {
 833     transform: rotate(360deg);
 834   }
 835 }