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