common.css (25697B)
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 --tab-line-hover-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); 17 18 --tab-line-selected-color: var(--blue-50); 19 --toggle-thumb-color: light-dark(white, var(--grey-40)); 20 --toggle-thumb-color-pressed: white; 21 --toggle-track-color: var(--grey-50); 22 --toggle-track-color-pressed: var(--blue-55); 23 --toggle-track-border-color: transparent; 24 /* In regular themes, the disabled style is handled by the lowered opacity, 25 the colors fall back to their "default" values */ 26 --toggle-disabled-track-border-color: var(--toggle-track-border-color); 27 --toggle-disabled-track-color-pressed: var(--toggle-track-color-pressed); 28 --toggle-disabled-thumb-color: var(--toggle-disabled-thumb-color); 29 --toggle-track-disabled-opacity: 0.5; 30 /* We don't have distinct :hover style in regular themes, the colors fall back to their 31 "default" values */ 32 --toggle-hover-track-color: var(--toggle-track-color); 33 --toggle-hover-track-border-color: var(--toggle-track-border-color); 34 --toggle-hover-track-color-pressed: var(--toggle-track-color-pressed); 35 --toggle-hover-thumb-color: var(--toggle-thumb-color); 36 37 --searchbox-no-match-background-color: light-dark(#ffe5e5, #402325); 38 --searchbox-no-match-stroke-color: light-dark(var(--red-60), var(--red-50)); 39 --searchbox-background-color: transparent; 40 --searchbox-border-color: transparent; 41 42 --devtools-searchinput-clear-cross-color: transparent; 43 --devtools-searchinput-clear-hover-cross-color: transparent; 44 --devtools-searchinput-clear-opacity: 0.8; 45 46 --devtools-twisty-size: 14px; 47 48 /* Don't allow forced colors in DevTools if they're not supported */ 49 &:not([forced-colors-active]) { 50 forced-color-adjust: none; 51 } 52 53 /* Forced Colors / High Contrast Mode specifics */ 54 &[forced-colors-active] { 55 --toggle-track-color: ButtonFace; 56 --toggle-track-color-pressed: ButtonText; 57 --toggle-thumb-color: ButtonText; 58 --toggle-thumb-color-pressed: ButtonFace; 59 --toggle-track-border-color: ButtonText; 60 --toggle-hover-track-color: SelectedItemText; 61 --toggle-hover-track-border-color: SelectedItem; 62 --toggle-hover-track-color-pressed: SelectedItem; 63 --toggle-hover-thumb-color: SelectedItem; 64 /* In High Contrast Mode, the opacity is not lowered, so the disabled style is 65 handled by modifiying the colors */ 66 --toggle-disabled-track-border-color: GrayText; 67 --toggle-disabled-track-color-pressed: GrayText; 68 --toggle-disabled-thumb-color: GrayText; 69 --toggle-track-disabled-opacity: 1; 70 71 /* From High Contrast Mode guidelines: 72 > Error inputs in our traditional design system use color to indicate they are destructive. 73 > We cannot do this in HCM, so the default INPUT style should be used instead. 74 Given this, we should use the default color. 75 */ 76 --searchbox-no-match-stroke-color: var(--theme-icon-color); 77 --searchbox-background-color: ButtonFace; 78 --searchbox-border-color: ButtonText; 79 80 --devtools-searchinput-clear-opacity: 1; 81 --devtools-searchinput-clear-cross-color: ButtonFace; 82 --devtools-searchinput-clear-hover-cross-color: SelectedItemText; 83 } 84 } 85 86 :root.theme-light { 87 color-scheme: light; 88 } 89 90 :root.theme-dark { 91 color-scheme: dark; 92 } 93 94 :root[platform="mac"] { 95 --monospace-font-family: Menlo, monospace; 96 } 97 98 :root[platform="win"] { 99 --monospace-font-family: Consolas, monospace; 100 } 101 102 :root[platform="linux"] { 103 --monospace-font-family: monospace; 104 } 105 106 /** 107 * Customize the dark theme's scrollbar colors to avoid excessive contrast. 108 */ 109 :root.theme-dark { 110 scrollbar-color: var(--grey-50) var(--theme-splitter-color); 111 } 112 113 /** 114 * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts 115 * between the light theme and the selected GTK theme (see bug 1471163). 116 * This removes GTK scrollbars and uses a fallback design (see bug 1464723). 117 */ 118 :root[platform="linux"].theme-light { 119 scrollbar-color: var(--grey-40) var(--grey-20); 120 } 121 122 ::selection { 123 background-color: var(--theme-selection-background); 124 color: var(--theme-selection-color); 125 } 126 127 .devtools-monospace { 128 font-family: var(--monospace-font-family); 129 font-size: var(--theme-code-font-size); 130 } 131 132 /** 133 * For text that needs to be cut with an ellipsis … 134 */ 135 .devtools-ellipsis-text { 136 overflow: hidden; 137 text-overflow: ellipsis; 138 white-space: nowrap; 139 } 140 141 /** 142 * Override global.css input styles 143 */ 144 html|input { 145 margin: revert; 146 } 147 148 /** 149 * Override wrong system font from forms.css 150 * Bug 1458224: buttons use a wrong default font-size on Linux 151 */ 152 html|button, 153 html|select, 154 html|input { 155 font: message-box; 156 font-size: var(--theme-body-font-size); 157 } 158 159 /* Devtools rely on the old Gecko/HTML4 button hit testing */ 160 html|button > * { 161 pointer-events: none; 162 } 163 164 /* Prevent buttons from having a text selection highlight. Bug 1546366 */ 165 button::selection { 166 all: unset; 167 } 168 169 iframe { 170 border: 0; 171 min-width: 0; 172 min-height: 0; 173 } 174 175 /* Autocomplete Popup */ 176 .devtools-autocomplete-popup { 177 overflow: hidden; 178 179 /* Devtools autocompletes display technical english keywords and should be displayed 180 using LTR direction. */ 181 direction: ltr !important; 182 } 183 184 /* Reset list styles. */ 185 .devtools-autocomplete-popup ul { 186 list-style: none; 187 } 188 189 .devtools-autocomplete-popup ul, 190 .devtools-autocomplete-popup li { 191 margin: 0; 192 } 193 194 .devtools-autocomplete-listbox { 195 --autocomplete-item-padding-inline: 8px; 196 --autocomplete-item-color-swatch-size: 1em; 197 --autocomplete-item-color-swatch-margin-inline: 5px; 198 appearance: none !important; 199 background-color: transparent; 200 border-width: 0 !important; 201 margin: 0; 202 padding: 0; 203 overflow-x: hidden; 204 max-height: 20rem; 205 box-sizing: border-box; 206 } 207 208 .devtools-autocomplete-listbox .autocomplete-item { 209 width: 100%; 210 box-sizing: border-box; 211 background-color: transparent; 212 color: var(--theme-popup-color); 213 padding: 1px var(--autocomplete-item-padding-inline); 214 cursor: default; 215 text-overflow: ellipsis; 216 white-space: pre; 217 overflow: hidden; 218 } 219 220 .devtools-autocomplete-listbox .autocomplete-item > .initial-value, 221 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { 222 margin: 0; 223 padding: 0; 224 float: inline-start; 225 } 226 227 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-postlabel { 228 font-style: italic; 229 float: inline-end; 230 padding-inline-end: 3px; 231 } 232 233 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { 234 text-align: end; 235 } 236 237 .devtools-autocomplete-listbox .autocomplete-swatch { 238 cursor: pointer; 239 border-radius: 50%; 240 box-shadow: 0 0 0 1px #c4c4c4; 241 width: var(--autocomplete-item-color-swatch-size); 242 height: var(--autocomplete-item-color-swatch-size); 243 vertical-align: middle; 244 /* align the swatch with its value */ 245 margin-top: -1px; 246 margin-inline: var(--autocomplete-item-color-swatch-margin-inline); 247 display: inline-block; 248 position: relative; 249 } 250 251 /* Rest of the dark and light theme */ 252 .devtools-autocomplete-popup, 253 .tooltip-panel.devtools-autocomplete-popup, 254 .CodeMirror-hints, 255 .CodeMirror-Tern-tooltip { 256 border: 1px solid var(--theme-popup-border-color); 257 background-color: var(--theme-popup-background); 258 color: var(--theme-popup-color); 259 } 260 261 .devtools-autocomplete-listbox .autocomplete-item:hover { 262 background-color: var(--theme-popup-hover-background); 263 color: var(--theme-popup-hover-color); 264 } 265 266 .devtools-autocomplete-listbox .autocomplete-selected, 267 .devtools-autocomplete-listbox .autocomplete-selected:hover { 268 background-color: var(--theme-selection-background); 269 color: var(--theme-selection-color); 270 } 271 272 /* In High Contrast Mode, we want to distinguish betweeen hover and selected items. 273 Since hover is already adding a "SelectedItem" background we can't rely on the color 274 here, so add an outline as we do for focused element. This follows the HCM design 275 for dropdown (e.g. the Reader Mode voice selector) */ 276 :root[forced-colors-active] .devtools-autocomplete-listbox .autocomplete-selected { 277 outline: var(--theme-focus-outline); 278 outline-offset: -1px; 279 &:not(:hover) { 280 background-color: unset; 281 color: unset; 282 } 283 } 284 285 .devtools-autocomplete-listbox .autocomplete-selected > .initial-value { 286 font-weight: bold; 287 :root[forced-colors-active] & { 288 background-color: Mark; 289 color: MarkText; 290 } 291 } 292 293 /* Autocomplete list clone used for accessibility. */ 294 295 .devtools-autocomplete-list-aria-clone { 296 /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */ 297 position: fixed; 298 overflow: hidden; 299 margin: 0; 300 width: 0; 301 height: 0; 302 } 303 304 .devtools-autocomplete-list-aria-clone li { 305 /* Prevent screen readers from prefacing every item with 'bullet'. */ 306 list-style-type: none; 307 } 308 309 /* Keyboard focus highlight styles */ 310 311 :focus-visible { 312 outline: var(--theme-focus-outline); 313 outline-offset: var(--theme-outline-offset); 314 box-shadow: var(--theme-outline-box-shadow); 315 316 /* override properties set in global-shared.css for links */ 317 a& { 318 outline-color: var(--theme-focus-outline-color) !important; 319 outline-width: var(--theme-focus-outline-size) !important; 320 } 321 322 /* offset the outline for checkbox and radio buttons so it doesn't conflict with existing border */ 323 :is(input[type="radio"], input[type="checkbox"], checkbox)& { 324 outline-offset: 2px; 325 } 326 327 :is(input[type="text"], input[type="search"], input:not([type]))& { 328 outline-color: var(--theme-focus-textinput-outline-color); 329 } 330 } 331 332 /* Toolbar buttons */ 333 .devtools-togglebutton, 334 .devtools-button { 335 appearance: none; 336 background: transparent; 337 border: none; 338 border-radius: 2px; 339 color: var(--theme-body-color); 340 align-items: center; 341 text-shadow: none; 342 padding: 2px; 343 margin: 1px; 344 345 /* Button text should not wrap on multiple lines */ 346 white-space: nowrap; 347 } 348 349 .devtools-togglebutton { 350 padding: 1px 6px; 351 border-block: 2px solid transparent; 352 /* Separate the outline from the button as it might have a similar background color */ 353 outline-offset: 2px; 354 355 :root[forced-colors-active] & { 356 border: 1px solid currentColor; 357 } 358 } 359 360 /* Button with text */ 361 .devtools-button:not(:empty) { 362 padding-inline: 5px; 363 background: var(--toolbarbutton-background); 364 } 365 366 /* Button icon */ 367 .devtools-button::before { 368 content: none; 369 display: inline-block; 370 vertical-align: middle; 371 width: 16px; 372 height: 16px; 373 margin: 0 3px; 374 color: var(--theme-icon-color); 375 font-size: 11px; 376 -moz-context-properties: fill; 377 fill: currentColor; 378 background-position: center; 379 background-repeat: no-repeat; 380 } 381 382 /* Reveal the icon */ 383 .devtools-button:empty::before { 384 content: ""; 385 } 386 387 .devtools-button:is(.checked, [aria-pressed="true"])::before { 388 color: var(--theme-icon-checked-color); 389 } 390 391 /* Icon-only buttons */ 392 .devtools-button:hover::before, 393 .devtools-button:is(.checked, [aria-pressed="true"])::before { 394 opacity: 1; 395 } 396 397 /* Button states */ 398 .devtools-button:disabled { 399 pointer-events: none; 400 401 &::before { 402 fill: var(--theme-icon-disabled-color); 403 } 404 } 405 406 .devtools-button:empty:not([aria-expanded="true"], [aria-pressed="true"], .checked):hover { 407 background: var(--toolbarbutton-hover-background); 408 color: var(--toolbarbutton-hover-color); 409 410 &::before { 411 color: var(--theme-icon-hover-color); 412 } 413 } 414 415 /* Standalone buttons */ 416 .devtools-button.devtools-button-standalone { 417 min-height: 28px; 418 padding: 4px 6px; 419 border: 1px solid light-dark(rgba(138, 161, 180, 0.2), var(--grey-50)); 420 background: var(--toolbarbutton-background); 421 /* prettier-ignore */ 422 color: light-dark( 423 var(--grey-70), 424 /* In dark mode, --grey-40 will only give us a AA contrast score, but --grey-30 425 is a bit too harsh, so we mix the color just enough to get a AAA score */ 426 color-mix(in srgb, var(--grey-30) 70%, var(--grey-40)) 427 ); 428 } 429 430 /* Selectable button which is unchecked. */ 431 432 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover, 433 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] { 434 background-color: var(--toolbarbutton-hover-background); 435 color: var(--toolbarbutton-hover-color); 436 } 437 438 .devtools-button:empty:is(.checked, [aria-pressed="true"]) { 439 background-color: var(--toolbarbutton-checked-background); 440 } 441 442 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active { 443 background-color: var(--theme-selection-background-hover); 444 } 445 446 .devtools-togglebutton:not([aria-pressed="true"]) { 447 background: var(--theme-toolbarbutton-background); 448 color: var(--theme-toolbarbutton-color); 449 } 450 451 .devtools-togglebutton:hover:not([aria-pressed="true"], :active) { 452 background-color: var(--theme-toolbarbutton-hover-background); 453 color: var(--theme-toolbarbutton-hover-color); 454 } 455 456 /* Selectable button which is checked. */ 457 458 .devtools-button:not(:empty):is(.checked, [aria-pressed="true"]) { 459 background: var(--toolbarbutton-checked-background); 460 color: var(--toolbarbutton-checked-color); 461 } 462 463 .devtools-togglebutton[aria-pressed="true"] { 464 background-color: var(--theme-toolbarbutton-checked-background); 465 color: var(--theme-toolbarbutton-checked-color); 466 border-block-end-color: currentColor; 467 } 468 469 .devtools-togglebutton[aria-pressed="true"]:hover:not(:active) { 470 background: var(--theme-toolbarbutton-checked-hover-background); 471 color: var(--theme-toolbarbutton-checked-hover-color); 472 } 473 474 /* Only apply active style on non High Contrast Mode */ 475 :root:not([forced-colors-active]) .devtools-togglebutton:active { 476 background: var(--theme-toolbarbutton-active-background); 477 } 478 479 /* Icons */ 480 481 .devtools-button.devtools-clear-icon::before { 482 background-image: url("chrome://devtools/skin/images/clear.svg"); 483 } 484 485 .devtools-option-toolbarbutton { 486 list-style-image: url("chrome://devtools/skin/images/settings.svg"); 487 } 488 489 .devtools-button.devtools-feature-callout::after { 490 content: url("chrome://global/skin/icons/badge-blue.svg"); 491 width: 14px; 492 height: 14px; 493 display: block; 494 position: absolute; 495 top: -2px; 496 right: 0; 497 } 498 499 /* Text input */ 500 501 .devtools-textinput, 502 .devtools-searchinput, 503 .devtools-filterinput { 504 appearance: none; 505 margin: 0; 506 padding: 0 4px; 507 font: inherit; 508 border: 1px solid transparent; 509 background-color: var(--theme-body-background); 510 color: var(--theme-body-color); 511 flex-grow: 1; 512 513 &::placeholder { 514 /* override UA style */ 515 opacity: 1; 516 /* Set a dimmed color that still gives us enough contrast */ 517 color: var(--theme-text-color-alt); 518 } 519 } 520 521 .devtools-searchinput, 522 .devtools-filterinput { 523 padding-inline-start: 22px; 524 background-position: 7px center; 525 background-size: 12px; 526 background-repeat: no-repeat; 527 -moz-context-properties: fill; 528 fill: var(--theme-icon-dimmed-color); 529 } 530 531 .devtools-searchinput { 532 background-image: url(chrome://devtools/skin/images/search.svg); 533 } 534 535 .devtools-filterinput { 536 background-image: url(chrome://devtools/skin/images/filter-small.svg); 537 } 538 539 .devtools-searchinput:-moz-locale-dir(rtl), 540 .devtools-searchinput:dir(rtl), 541 .devtools-filterinput:-moz-locale-dir(rtl), 542 .devtools-filterinput:dir(rtl) { 543 background-position-x: right 7px; 544 } 545 546 .devtools-searchinput .textbox-input::placeholder, 547 .devtools-filterinput .textbox-input::placeholder { 548 font-style: normal; 549 } 550 551 /* Don't show the "native" search input clear button. Wrap in :where so it's easier to 552 override for specific elements. 553 This should be removed when all dependencies of Bug 1956650 are fixed. */ 554 :where(input[type="search"])::-moz-search-clear-button { 555 display: none; 556 } 557 558 /* Searchbox with extra button(s) (MDN help or clear button) */ 559 .devtools-searchbox { 560 display: inline-flex; 561 flex-grow: 1; 562 gap: 4px; 563 padding-inline-end: 4px; 564 position: relative; 565 border: 1px solid var(--searchbox-border-color); 566 background-color: var(--searchbox-background-color); 567 height: 100%; 568 box-sizing: border-box; 569 } 570 571 .devtools-searchbox > .devtools-searchinput, 572 .devtools-searchbox > .devtools-filterinput { 573 /* Those classes can be applied on <input>, which have a default styling. 574 We want .devtools-searchbox to handle the background, border and outline, so we 575 need to reset them here */ 576 background-color: transparent; 577 border: none; 578 outline: none; 579 box-shadow: none; 580 flex-grow: 1; 581 min-width: 0; 582 width: 100%; 583 } 584 585 /* Display an outline on the container when the child input is focused. If another element 586 is focused (e.g. a button), we only want the outline on that element */ 587 .devtools-searchbox:focus-within:has(input:focus-visible) { 588 outline: var(--theme-focus-outline); 589 outline-color: var(--theme-focus-textinput-outline-color); 590 outline-offset: -2px; 591 592 &.devtools-searchbox-no-match { 593 outline-color: var(--searchbox-no-match-stroke-color); 594 } 595 } 596 597 .devtools-searchbox-no-match { 598 background-color: var(--searchbox-no-match-background-color); 599 border-color: var(--searchbox-no-match-stroke-color); 600 } 601 602 /* Clear icon within the searchbox */ 603 .devtools-searchinput-clear { 604 flex: 0 0 auto; 605 align-self: center; 606 margin: 0; 607 padding: 0; 608 border: 0; 609 width: 16px; 610 height: 16px; 611 background-color: transparent; 612 background-image: url("chrome://devtools/skin/images/search-clear.svg"); 613 -moz-context-properties: fill, fill-opacity, stroke; 614 fill: var(--theme-icon-color); 615 fill-opacity: var(--devtools-searchinput-clear-opacity); 616 stroke: var(--devtools-searchinput-clear-cross-color); 617 618 &:hover { 619 fill-opacity: 1; 620 fill: var(--theme-icon-hover-color); 621 stroke: var(--devtools-searchinput-clear-hover-cross-color); 622 } 623 } 624 625 .devtools-searchbox-no-match > .devtools-searchinput-clear { 626 fill: var(--searchbox-no-match-stroke-color); 627 } 628 629 /* MDN link within the searchbox */ 630 .devtools-searchbox .learn-more-link::before { 631 opacity: 0.6; 632 } 633 634 .devtools-searchbox:not(:hover) .learn-more-link { 635 visibility: hidden; 636 } 637 638 .devtools-searchbox .devtools-searchinput-summary { 639 flex-basis: auto; 640 flex-grow: 0; 641 flex-shrink: 0; 642 color: var(--theme-comment); 643 align-self: center; 644 } 645 646 /* Autocomplete popup within the searchbox */ 647 .devtools-searchbox .devtools-autocomplete-popup { 648 position: absolute; 649 left: 0; 650 top: 100%; 651 width: 100%; 652 line-height: initial !important; 653 /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index 654 is more than z-index of requests-list-headers-wrapper in netmonitor */ 655 z-index: 1001; 656 } 657 658 /* Highlighting search results */ 659 660 ::highlight(devtools-search) { 661 color: var(--theme-search-results-color); 662 background-color: var(--theme-search-results-background); 663 text-decoration: 1px underline var(--theme-search-results-border-color); 664 text-decoration-skip-ink: none; 665 } 666 667 /* Twisty and checkbox controls */ 668 669 .theme-twisty { 670 width: var(--devtools-twisty-size); 671 height: var(--devtools-twisty-size); 672 cursor: pointer; 673 background-image: url("chrome://devtools/skin/images/arrow.svg"); 674 background-position: center; 675 background-repeat: no-repeat; 676 background-size: 10px; 677 -moz-context-properties: fill; 678 /* Set color and use currentColor in fill so we adapt in High Contrast Mode */ 679 color: var(--theme-icon-dimmed-color); 680 fill: currentColor; 681 transform: rotate(-90deg); 682 } 683 684 /* Mirror the twisty for rtl direction */ 685 .theme-twisty:dir(rtl), 686 .theme-twisty:-moz-locale-dir(rtl) { 687 transform: rotate(90deg); 688 } 689 690 .theme-selected ~ .theme-twisty { 691 color: var(--theme-selection-color); 692 } 693 694 .theme-twisty:is(.open, [open], [aria-expanded="true"]) { 695 transform: none; 696 } 697 698 .theme-twisty[invisible] { 699 visibility: hidden; 700 } 701 702 /* Throbbers */ 703 .devtools-throbber::before { 704 content: ""; 705 display: inline-block; 706 vertical-align: bottom; 707 margin-inline-end: 0.5em; 708 width: 1em; 709 height: 1em; 710 border: 2px solid currentColor; 711 border-right-color: transparent; 712 border-radius: 50%; 713 animation: 1.1s linear throbber-spin infinite; 714 } 715 716 @keyframes throbber-spin { 717 from { 718 transform: none; 719 } 720 to { 721 transform: rotate(360deg); 722 } 723 } 724 725 /* Common tabs styles */ 726 727 .all-tabs-menu { 728 position: absolute; 729 730 top: 0; 731 inset-inline-end: 0; 732 width: 15px; 733 height: 100%; 734 735 padding: 0; 736 border: none; 737 border-inline-start: 1px solid var(--theme-splitter-color); 738 739 background: var(--theme-tab-toolbar-background); 740 background-image: url("chrome://devtools/skin/images/dropmarker.svg"); 741 background-repeat: no-repeat; 742 background-position: center; 743 -moz-context-properties: fill; 744 fill: var(--theme-icon-color); 745 /* The button is often displayed next to the window edge, so adjust the layout to make the offset visible */ 746 outline-offset: -2px; 747 } 748 749 .all-tabs-menu:hover { 750 background-color: var(--theme-toolbar-hover); 751 } 752 753 .all-tabs-menu:hover:active { 754 background-color: var(--theme-toolbar-hover-active); 755 } 756 757 .devtools-tab-line { 758 position: absolute; 759 top: 0; 760 left: 0; 761 width: 100%; 762 height: 2px; 763 background: transparent; 764 transition: 765 transform 250ms var(--animation-curve), 766 opacity 250ms var(--animation-curve); 767 opacity: 0; 768 transform: scaleX(0); 769 770 :root[forced-colors-active] & { 771 display: none; 772 } 773 } 774 775 .devtools-tab:hover .devtools-tab-line, 776 .tabs-menu-item:hover .devtools-tab-line { 777 background: var(--tab-line-hover-color); 778 opacity: 1; 779 transform: scaleX(1); 780 } 781 782 .devtools-tab.selected .devtools-tab-line, 783 /* don't show the line when focus is visible to prevent overlapping with the outline */ 784 .tabs-menu-item.is-active .devtools-tab-line:not(:has(+ [role="tab"]:focus-visible)) { 785 background: var(--tab-line-selected-color); 786 opacity: 1; 787 transform: scaleX(1); 788 } 789 790 @media (prefers-reduced-motion) { 791 .devtools-tab-line { 792 transition: none; 793 } 794 } 795 796 .devtools-tab:not(.selected):focus .devtools-tab-line { 797 background: var(--tab-line-hover-color); 798 opacity: 1; 799 transform: scaleX(1); 800 } 801 802 /* No result message styles */ 803 804 .devtools-sidepanel-no-result { 805 font-style: italic; 806 padding: 0.5em 20px; 807 user-select: none; 808 font-size: 12px; 809 line-height: calc(16 / 12); 810 } 811 812 /* Checkbox Toggle */ 813 814 .devtools-checkbox-toggle { 815 --x-pos: 0.15em; 816 /* Reset native checkbox styling. */ 817 appearance: none; 818 background-color: var(--toggle-track-color); 819 cursor: pointer; 820 /* Change font-size to scale. */ 821 font-size: 16px; 822 width: 2em; 823 height: 1em; 824 border-radius: 1em; 825 border: 1px solid var(--toggle-track-border-color); 826 box-sizing: content-box; 827 828 &:checked { 829 --x-pos: 1.15em; 830 background-color: var(--toggle-track-color-pressed); 831 } 832 833 &:hover:not(:active, [disabled]) { 834 background-color: var(--toggle-hover-track-color); 835 border-color: var(--toggle-hover-track-border-color); 836 837 &:checked { 838 background-color: var(--toggle-hover-track-color-pressed); 839 } 840 841 &:not(:checked)::before { 842 background-color: var(--toggle-hover-thumb-color); 843 } 844 } 845 846 &[disabled] { 847 opacity: var(--toggle-track-disabled-opacity); 848 --toggle-track-border-color: var(--toggle-disabled-track-border-color); 849 --toggle-track-color-pressed: var(--toggle-disabled-track-color-pressed); 850 --toggle-thumb-color: var(--toggle-disabled-thumb-color); 851 } 852 } 853 854 /* For right-to-left layout, the toggle thumb goes in the opposite direction. */ 855 html[dir="rtl"] .devtools-checkbox-toggle { 856 --x-pos: -0.15em; 857 } 858 859 html[dir="rtl"] .devtools-checkbox-toggle:checked { 860 --x-pos: -1.15em; 861 } 862 863 .devtools-checkbox-toggle::before { 864 position: relative; 865 width: calc(1em - 0.3em); 866 height: calc(1em - 0.3em); 867 transform: translateY(0.15em) translateX(var(--x-pos)); 868 border-radius: 100%; 869 display: block; 870 content: ""; 871 background-color: var(--toggle-thumb-color); 872 transition: transform 0.1s ease-out; 873 } 874 875 .devtools-checkbox-toggle:checked::before { 876 background-color: var(--toggle-thumb-color-pressed); 877 } 878 879 /* Remove transition on toggle when prefers reduced motion is enabled */ 880 @media (prefers-reduced-motion) { 881 .devtools-checkbox-toggle, 882 .devtools-checkbox-toggle::before { 883 transition: none; 884 } 885 } 886 887 .devtools-checkered-background { 888 background-color: #eee; 889 background-image: 890 linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 891 linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); 892 background-size: 20px 20px; 893 background-position: 894 0 0, 895 10px 10px; 896 } 897 898 /******************************************************************************/ 899 /* Jump to definition button */ 900 901 button.jump-definition { 902 display: inline-block; 903 height: 16px; 904 width: 20px; 905 margin-left: 0.25em; 906 vertical-align: middle; 907 background: center url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg") no-repeat; 908 border-color: transparent; 909 stroke: var(--theme-icon-color); 910 -moz-context-properties: stroke; 911 cursor: pointer; 912 } 913 914 button.jump-definition:hover { 915 stroke: var(--theme-icon-checked-color); 916 } 917 918 :root[forced-colors-active] button.jump-definition { 919 border: 1px solid ButtonText; 920 border-radius: 2px; 921 background-color: ButtonFace; 922 } 923 924 :root[forced-colors-active] button.jump-definition:hover { 925 stroke: var(--theme-icon-hover-color); 926 border-color: var(--theme-icon-hover-color); 927 } 928 929 /* In High Contrast Mode, the button has a solid background, so we only need 930 to set a different color for the icon when we are not in HCM */ 931 :root:not([forced-colors-active]) .tree-node.focused button.jump-definition { 932 stroke: currentColor; 933 }