devtools/client/themes/common.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://devtools/skin/splitters.css");
   6 @namespace html url("http://www.w3.org/1999/xhtml");
   7
   8 :root {
   9   /* Bug 1458224: the initial `font-size` is different on Mac/Windows
  10    * (appears fixed to 11px) and Linux (bigger, depends on user settings).
  11    * Workaround: specify font-size on root, on form inputs, and whenever
  12    * we're using the `font` shorthand. */
  13   font: message-box;
  14   font-size: var(--theme-body-font-size);
  15
  16   /* TODO(bug 1022557): Perhaps we want to allow forced colors in devtools */
  17   forced-color-adjust: none;
  18
  19   --tab-line-hover-color: rgba(0,0,0,.2);
  20   --tab-line-selected-color: var(--blue-50);
  21   --toggle-thumb-color: white;
  22   --toggle-track-color: var(--grey-50);
  23
  24   --searchbox-no-match-background-color: #ffe5e5;
  25   --searchbox-no-match-stroke-color: var(--red-60);
  26 }
  27
  28 :root.theme-light {
  29   color-scheme: light;
  30 }
  31
  32 :root.theme-dark {
  33   color-scheme: dark;
  34
  35   --tab-line-hover-color: rgba(255,255,255,.2);
  36   --toggle-thumb-color: var(--grey-40);
  37
  38   --searchbox-no-match-background-color: #402325;
  39   --searchbox-no-match-stroke-color: var(--red-50);
  40 }
  41
  42 :root[platform="mac"] {
  43   --monospace-font-family: Menlo, monospace;
  44 }
  45
  46 :root[platform="win"] {
  47   --monospace-font-family: Consolas, monospace;
  48 }
  49
  50 :root[platform="linux"] {
  51   --monospace-font-family: monospace;
  52 }
  53
  54 /**
  55  * Customize the dark theme's scrollbar colors to avoid excessive contrast.
  56  */
  57 :root.theme-dark {
  58   scrollbar-color: var(--grey-50) var(--theme-splitter-color);
  59 }
  60
  61 /**
  62  * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
  63  * between the light theme and the selected GTK theme (see bug 1471163).
  64  * This removes GTK scrollbars and uses a fallback design (see bug 1464723).
  65  */
  66 :root[platform="linux"].theme-light {
  67   scrollbar-color: var(--grey-40) var(--grey-20);
  68 }
  69
  70 ::selection {
  71   background-color: var(--theme-selection-background);
  72   color: var(--theme-selection-color);
  73 }
  74
  75 .devtools-monospace {
  76   font-family: var(--monospace-font-family);
  77   font-size: var(--theme-code-font-size);
  78 }
  79
  80 /**
  81  * For text that needs to be cut with an ellipsis …
  82  */
  83 .devtools-ellipsis-text {
  84   overflow: hidden;
  85   text-overflow: ellipsis;
  86   white-space: nowrap;
  87 }
  88
  89 /**
  90  * Override global.css input styles
  91  */
  92 html|input {
  93   margin: revert;
  94 }
  95
  96 /**
  97  * Override wrong system font from forms.css
  98  * Bug 1458224: buttons use a wrong default font-size on Linux
  99  */
 100 html|button, html|select, html|input {
 101   font: message-box;
 102   font-size: var(--theme-body-font-size);
 103 }
 104
 105 /* Devtools rely on the old Gecko/HTML4 button hit testing */
 106 html|button > * {
 107   pointer-events: none;
 108 }
 109
 110 /* Prevent buttons from having a text selection highlight. Bug 1546366 */
 111 button::selection {
 112   all: unset;
 113 }
 114
 115 iframe {
 116   border: 0;
 117   min-width: 0;
 118   min-height: 0;
 119 }
 120
 121 /* Autocomplete Popup */
 122 .devtools-autocomplete-popup {
 123   overflow: hidden;
 124
 125   /* Devtools autocompletes display technical english keywords and should be displayed
 126      using LTR direction. */
 127   direction: ltr !important;
 128 }
 129
 130 /* Reset list styles. */
 131 .devtools-autocomplete-popup ul {
 132   list-style: none;
 133 }
 134
 135 .devtools-autocomplete-popup ul,
 136 .devtools-autocomplete-popup li {
 137   margin: 0;
 138 }
 139
 140 .devtools-autocomplete-listbox {
 141   --autocomplete-item-padding-inline: 8px;
 142   --autocomplete-item-color-swatch-size: 1em;
 143   --autocomplete-item-color-swatch-margin-inline: 5px;
 144   appearance: none !important;
 145   background-color: transparent;
 146   border-width: 0px !important;
 147   margin: 0;
 148   padding: 0;
 149   overflow-x: hidden;
 150   max-height: 20rem;
 151   box-sizing: border-box;
 152 }
 153
 154 .devtools-autocomplete-listbox .autocomplete-item {
 155   width: 100%;
 156   box-sizing: border-box;
 157   background-color: transparent;
 158   color: var(--theme-popup-color);
 159   padding: 1px var(--autocomplete-item-padding-inline);
 160   cursor: default;
 161   text-overflow: ellipsis;
 162   white-space: pre;
 163   overflow: hidden;
 164 }
 165
 166 .devtools-autocomplete-listbox .autocomplete-item > .initial-value,
 167 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
 168   margin: 0;
 169   padding: 0;
 170   float: inline-start;
 171 }
 172
 173 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-postlabel {
 174   font-style: italic;
 175   float: inline-end;
 176   padding-inline-end: 3px;
 177 }
 178
 179 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
 180   text-align: end;
 181 }
 182
 183 .devtools-autocomplete-listbox .autocomplete-swatch {
 184   cursor: pointer;
 185   border-radius: 50%;
 186   box-shadow: 0 0 0 1px #c4c4c4;
 187   width: var(--autocomplete-item-color-swatch-size);
 188   height: var(--autocomplete-item-color-swatch-size);
 189   vertical-align: middle;
 190   /* align the swatch with its value */
 191   margin-top: -1px;
 192   margin-inline: var(--autocomplete-item-color-swatch-margin-inline);
 193   display: inline-block;
 194   position: relative;
 195 }
 196
 197 /* Rest of the dark and light theme */
 198 .devtools-autocomplete-popup,
 199 .tooltip-panel.devtools-autocomplete-popup,
 200 .CodeMirror-hints,
 201 .CodeMirror-Tern-tooltip {
 202   border: 1px solid var(--theme-popup-border-color);
 203   background-color: var(--theme-popup-background);
 204   color: var(--theme-popup-color);
 205 }
 206
 207 .devtools-autocomplete-listbox .autocomplete-item:hover {
 208   background-color: var(--theme-popup-dimmed);
 209 }
 210
 211 .devtools-autocomplete-listbox .autocomplete-selected,
 212 .devtools-autocomplete-listbox .autocomplete-selected:hover {
 213   background-color: var(--theme-selection-background);
 214   color: var(--theme-selection-color);
 215 }
 216
 217 .devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
 218   font-weight: bold;
 219 }
 220
 221 /* Autocomplete list clone used for accessibility. */
 222
 223 .devtools-autocomplete-list-aria-clone {
 224   /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
 225   position: fixed;
 226   overflow: hidden;
 227   margin: 0;
 228   width: 0;
 229   height: 0;
 230 }
 231
 232 .devtools-autocomplete-list-aria-clone li {
 233   /* Prevent screen readers from prefacing every item with 'bullet'. */
 234   list-style-type: none;
 235 }
 236
 237 /* Keyboard focus highlight styles */
 238
 239 :focus-visible {
 240   outline: var(--theme-focus-outline);
 241   outline-offset: var(--theme-outline-offset);
 242   box-shadow: var(--theme-outline-box-shadow);
 243
 244   /* override properties set in global-shared.css for links  */
 245   a& {
 246     outline-color: var(--theme-focus-outline-color) !important;
 247     outline-width: var(--theme-focus-outline-size) !important;
 248   }
 249
 250   /* offset the outline for checkbox and radio buttons so it doesn't conflict with existing border */
 251   :is(input[type="radio"], input[type="checkbox"], checkbox)& {
 252     outline-offset: 2px;
 253   }
 254 }
 255
 256 /* Toolbar buttons */
 257 .devtools-togglebutton,
 258 .devtools-button {
 259   appearance: none;
 260   background: transparent;
 261   border: none;
 262   border-radius: 2px;
 263   color: var(--theme-body-color);
 264   transition: background-color 0.05s ease-in-out;
 265   align-items: center;
 266   text-shadow: none;
 267   padding: 2px;
 268   margin: 1px;
 269
 270   /* Button text should not wrap on multiple lines */
 271   white-space: nowrap;
 272 }
 273
 274 .devtools-togglebutton {
 275   padding: 1px 6px;
 276   /* Separate the outline from the button as it might have a similar background color (after Bug 1590432) */
 277   outline-offset: 2px;
 278 }
 279
 280 /* Remove system form border from devtools-button. */
 281 .devtools-button::-moz-focus-inner {
 282   border: 0;
 283 }
 284
 285 /* Button with text */
 286 .devtools-button:not(:empty) {
 287   padding-inline: 5px;
 288   background: var(--toolbarbutton-background);
 289 }
 290
 291 /* Button icon */
 292 .devtools-button::before {
 293   content: none;
 294   display: inline-block;
 295   vertical-align: middle;
 296   width: 16px;
 297   height: 16px;
 298   margin: 0 3px;
 299   transition: opacity 0.05s ease-in-out;
 300   color: var(--theme-icon-color);
 301   font-size: 11px;
 302   -moz-context-properties: fill;
 303   fill: currentColor;
 304   background-position: center;
 305   background-repeat: no-repeat;
 306 }
 307
 308 /* Reveal the icon */
 309 .devtools-button:empty::before {
 310   content: "";
 311 }
 312
 313 .devtools-button:is(.checked, [aria-pressed="true"])::before {
 314   color: var(--theme-icon-checked-color);
 315 }
 316
 317 /* Icon-only buttons */
 318 .devtools-button:hover::before,
 319 .devtools-button:is(.checked, [aria-pressed="true"])::before {
 320   opacity: 1;
 321 }
 322
 323 /* Button states */
 324 .devtools-button:disabled {
 325   pointer-events: none;
 326   opacity: 0.5 !important;
 327 }
 328
 329 .devtools-button:empty:not([aria-expanded="true"]):hover {
 330   background: var(--toolbarbutton-hover-background);
 331 }
 332
 333 /* Standalone buttons */
 334 .devtools-button[data-standalone] {
 335   min-height: 28px;
 336   padding: 4px 6px;
 337   border: 1px solid transparent;
 338   background: var(--toolbarbutton-background);
 339 }
 340
 341 .theme-light .devtools-button[data-standalone] {
 342   border-color: rgba(138,161,180,0.2);
 343 }
 344
 345 /* Selectable button which is unchecked. */
 346
 347 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover,
 348 .devtools-button:empty:is(:hover:active,.checked, [aria-pressed="true"]),
 349 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
 350   background-color: var(--toolbarbutton-hover-background);
 351 }
 352
 353 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active {
 354   background-color: var(--theme-selection-background-hover);
 355 }
 356
 357 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):focus {
 358   background-color: var(--toolbarbutton-focus-background);
 359   color: var(--toolbarbutton-focus-color);
 360 }
 361
 362 .devtools-togglebutton:not([aria-pressed="true"]) {
 363   background: var(--theme-toolbarbutton-background);
 364   color: var(--theme-toolbarbutton-color);
 365 }
 366
 367 .devtools-togglebutton:hover:not([aria-pressed="true"], :active) {
 368   background-color: var(--theme-toolbarbutton-hover-background);
 369 }
 370
 371 /* Selectable button which is checked. */
 372
 373 .devtools-button:not(:empty):is(.checked, [aria-pressed="true"]) {
 374   background: var(--toolbarbutton-checked-background);
 375   color: var(--toolbarbutton-checked-color);
 376
 377   &:focus {
 378     background-color: var(--toolbarbutton-checked-focus-background);
 379   }
 380 }
 381
 382 .devtools-togglebutton[aria-pressed="true"] {
 383   background-color: var(--theme-toolbarbutton-checked-background);
 384   color: var(--theme-toolbarbutton-checked-color);
 385 }
 386
 387 .devtools-togglebutton[aria-pressed="true"]:hover:not(:active) {
 388   background: var(--theme-toolbarbutton-checked-hover-background);
 389   color: var(--theme-toolbarbutton-checked-hover-color);
 390 }
 391
 392 .devtools-togglebutton:active {
 393   background: var(--theme-toolbarbutton-active-background);
 394   color: var(--theme-toolbarbutton-active-color);
 395 }
 396
 397 .devtools-togglebutton::-moz-focus-inner {
 398   border-color: transparent;
 399 }
 400
 401 /* Icons */
 402
 403 .devtools-button.devtools-clear-icon::before {
 404   background-image: url("chrome://devtools/skin/images/clear.svg");
 405 }
 406
 407 .devtools-option-toolbarbutton {
 408   list-style-image: url("chrome://devtools/skin/images/settings.svg");
 409 }
 410
 411 .devtools-button.devtools-feature-callout::after {
 412   content: url("chrome://global/skin/icons/badge-blue.svg");
 413   width: 14px;
 414   height: 14px;
 415   display: block;
 416   position: absolute;
 417   top: -2px;
 418   right: 0;
 419 }
 420
 421 /* Text input */
 422
 423 .devtools-textinput,
 424 .devtools-searchinput,
 425 .devtools-filterinput {
 426   appearance: none;
 427   margin: 0;
 428   padding: 0 4px;
 429   font: inherit;
 430   border: 1px solid transparent;
 431   background-color: var(--theme-body-background);
 432   color: var(--theme-body-color);
 433   flex-grow: 1;
 434
 435   &::placeholder {
 436     /* override UA style */
 437     opacity: 1;
 438     /* Set a dimmed color that still gives us enough contrast  */
 439     color: var(--theme-text-color-alt);
 440   }
 441 }
 442
 443 .devtools-searchinput,
 444 .devtools-filterinput {
 445   padding-inline-start: 22px;
 446   background-position: 7px center;
 447   background-size: 12px;
 448   background-repeat: no-repeat;
 449   -moz-context-properties: fill;
 450   fill: var(--theme-icon-dimmed-color);
 451 }
 452
 453 .devtools-searchinput {
 454   background-image: url(chrome://devtools/skin/images/search.svg);
 455 }
 456
 457 .devtools-filterinput {
 458   background-image: url(chrome://devtools/skin/images/filter-small.svg);
 459 }
 460
 461 .devtools-searchinput:-moz-locale-dir(rtl),
 462 .devtools-searchinput:dir(rtl),
 463 .devtools-filterinput:-moz-locale-dir(rtl),
 464 .devtools-filterinput:dir(rtl) {
 465   background-position-x: right 7px;
 466 }
 467
 468 .devtools-searchinput .textbox-input::placeholder,
 469 .devtools-filterinput .textbox-input::placeholder {
 470   font-style: normal;
 471 }
 472
 473 /* Searchbox with extra button(s) (MDN help or clear button) */
 474 .devtools-searchbox {
 475   display: inline-flex;
 476   flex-grow: 1;
 477   position: relative;
 478   border: 1px solid transparent;
 479   height: 100%;
 480   box-sizing: border-box;
 481 }
 482
 483 .devtools-searchbox > .devtools-searchinput,
 484 .devtools-searchbox > .devtools-filterinput {
 485   /* Those classes can be applied on <input>, which have a default styling.
 486      We want .devtools-searchbox to handle the background, border and outline, so we
 487      need to reset them here */
 488   background-color: transparent;
 489   border: none;
 490   outline: none;
 491   box-shadow: none;
 492   flex-grow: 1;
 493   min-width: 0;
 494   width: 100%;
 495 }
 496
 497 /* Display an outline on the container when the child input is focused. If another element
 498    is focused (e.g. a button), we only want the outline on that element */
 499 .devtools-searchbox:focus-within:has(input:focus-visible) {
 500   outline: var(--theme-focus-outline);
 501   outline-offset: -2px;
 502
 503   &.devtools-searchbox-no-match {
 504     outline-color: var(--searchbox-no-match-stroke-color);
 505   }
 506 }
 507
 508 .devtools-searchbox-no-match {
 509   background-color: var(--searchbox-no-match-background-color);
 510   border-color: var(--searchbox-no-match-stroke-color);
 511 }
 512
 513 /* Clear icon within the searchbox */
 514 .devtools-searchinput-clear {
 515   flex: 0 0 auto;
 516   align-self: center;
 517   margin: 0 4px;
 518   padding: 0;
 519   border: 0;
 520   width: 16px;
 521   height: 16px;
 522   background-color: transparent;
 523   background-image: url("chrome://devtools/skin/images/search-clear.svg");
 524   -moz-context-properties: fill, fill-opacity;
 525   fill: var(--theme-icon-color);
 526   fill-opacity: 0.8;
 527 }
 528
 529 .devtools-searchbox-no-match > .devtools-searchinput-clear {
 530   fill: var(--searchbox-no-match-stroke-color);
 531 }
 532
 533 .devtools-searchinput-clear:hover {
 534   fill-opacity: 1;
 535 }
 536
 537 /* MDN link within the searchbox */
 538 .devtools-searchbox .learn-more-link::before {
 539   opacity: 0.6;
 540 }
 541
 542 .devtools-searchbox:not(:hover) .learn-more-link {
 543   visibility: hidden;
 544 }
 545
 546 .devtools-searchbox .devtools-searchinput-summary {
 547   flex-basis: auto;
 548   flex-grow: 0;
 549   flex-shrink: 0;
 550   color: var(--theme-comment);
 551   align-self: center;
 552 }
 553
 554 /* Autocomplete popup within the searchbox */
 555 .devtools-searchbox .devtools-autocomplete-popup {
 556   position: absolute;
 557   left: 0;
 558   top: 100%;
 559   width: 100%;
 560   line-height: initial !important;
 561   /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index
 562   is more than z-index of requests-list-headers-wrapper in netmonitor */
 563   z-index: 1001;
 564 }
 565
 566 /* Twisty and checkbox controls */
 567
 568 .theme-twisty {
 569   width: 14px;
 570   height: 14px;
 571   cursor: pointer;
 572   background-image: url("chrome://devtools/skin/images/arrow.svg");
 573   background-position: center;
 574   background-repeat: no-repeat;
 575   background-size: 10px;
 576   -moz-context-properties: fill;
 577   fill: var(--theme-icon-dimmed-color);
 578   transform: rotate(-90deg);
 579 }
 580
 581 /* Mirror the twisty for rtl direction */
 582 .theme-twisty:dir(rtl),
 583 .theme-twisty:-moz-locale-dir(rtl) {
 584   transform: rotate(90deg);
 585 }
 586
 587 .theme-selected ~ .theme-twisty {
 588   fill: var(--theme-selection-color);
 589 }
 590
 591 .theme-twisty:is(
 592   .open,
 593   [open],
 594   [aria-expanded="true"]
 595 ) {
 596   transform: none;
 597 }
 598
 599 .theme-twisty[invisible] {
 600   visibility: hidden;
 601 }
 602
 603 /* Throbbers */
 604 .devtools-throbber::before {
 605   content: "";
 606   display: inline-block;
 607   vertical-align: bottom;
 608   margin-inline-end: 0.5em;
 609   width: 1em;
 610   height: 1em;
 611   border: 2px solid currentColor;
 612   border-right-color: transparent;
 613   border-radius: 50%;
 614   animation: 1.1s linear throbber-spin infinite;
 615 }
 616
 617 @keyframes throbber-spin {
 618   from {
 619     transform: none;
 620   }
 621   to {
 622     transform: rotate(360deg);
 623   }
 624 }
 625
 626 /* Common tabs styles */
 627
 628 .all-tabs-menu {
 629   position: absolute;
 630
 631   top: 0;
 632   inset-inline-end: 0;
 633   width: 15px;
 634   height: 100%;
 635
 636   padding: 0;
 637   border: none;
 638   border-inline-start: 1px solid var(--theme-splitter-color);
 639
 640   background: var(--theme-tab-toolbar-background);
 641   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
 642   background-repeat: no-repeat;
 643   background-position: center;
 644   -moz-context-properties: fill;
 645   fill: var(--theme-icon-color);
 646   /* The button is often displayed next to the window edge, so adjust the layout to make the offset visible */
 647   outline-offset: -2px;
 648 }
 649
 650 .all-tabs-menu:hover {
 651   background-color: var(--theme-toolbar-hover);
 652 }
 653
 654 .all-tabs-menu:hover:active {
 655   background-color: var(--theme-toolbar-hover-active);
 656 }
 657
 658 .devtools-tab-line {
 659   position: absolute;
 660   top: 0;
 661   left: 0;
 662   width: 100%;
 663   height: 2px;
 664   background: transparent;
 665   transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
 666   opacity: 0;
 667   transform: scaleX(0);
 668 }
 669
 670 .devtools-tab:hover .devtools-tab-line,
 671 .tabs-menu-item:hover .devtools-tab-line {
 672   background: var(--tab-line-hover-color);
 673   opacity: 1;
 674   transform: scaleX(1);
 675 }
 676
 677 .devtools-tab.selected .devtools-tab-line,
 678 .tabs-menu-item.is-active .devtools-tab-line {
 679   background: var(--tab-line-selected-color);
 680   opacity: 1;
 681   transform: scaleX(1);
 682 }
 683
 684 @media (prefers-reduced-motion) {
 685   .devtools-tab-line {
 686     transition: none;
 687   }
 688 }
 689
 690 .devtools-tab:not(.selected):focus .devtools-tab-line {
 691   background: var(--tab-line-hover-color);
 692   opacity: 1;
 693   transform: scaleX(1);
 694 }
 695
 696 /* No result message styles */
 697
 698 .devtools-sidepanel-no-result {
 699   font-style: italic;
 700   padding: 0.5em 20px;
 701   user-select: none;
 702   font-size: 12px;
 703   line-height: calc(16 / 12);
 704 }
 705
 706 /* Checkbox Toggle */
 707
 708 .devtools-checkbox-toggle {
 709   --x-pos: .15em;
 710   /* Reset native checkbox styling. */
 711   appearance: none;
 712   background-color: var(--toggle-track-color);
 713   cursor: pointer;
 714   /* Change font-size to scale. */
 715   font-size: 16px;
 716   width: 2em;
 717   height: 1em;
 718   border-radius: 1em;
 719   border: 1px solid transparent;
 720   box-sizing: content-box;
 721   /* Animate the thumb position between states of the checkbox. */
 722   transition: background-color .1s ease-out;
 723 }
 724
 725 .devtools-checkbox-toggle[disabled]{
 726   opacity: 0.5;
 727 }
 728
 729 /* For right-to-left layout, the toggle thumb goes in the opposite direction. */
 730 html[dir="rtl"] .devtools-checkbox-toggle {
 731   --x-pos: -.15em;
 732 }
 733
 734 .devtools-checkbox-toggle:checked {
 735   --x-pos: 1.15em;
 736   background-color: var(--blue-55);
 737 }
 738
 739 html[dir="rtl"] .devtools-checkbox-toggle:checked {
 740   --x-pos: -1.15em;
 741 }
 742
 743 .devtools-checkbox-toggle::before {
 744   position: relative;
 745   width: calc(1em - .3em);
 746   height: calc(1em - .3em);
 747   transform: translateY(.15em) translateX(var(--x-pos));
 748   border-radius: 100%;
 749   display: block;
 750   content: "";
 751   background-color: var(--toggle-thumb-color);
 752   transition: transform .1s ease-out;
 753 }
 754
 755 .devtools-checkbox-toggle:checked::before {
 756   background-color: white;
 757 }