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