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