rules.css (25525B)
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 /* CSS Variables specific to this panel that aren't defined by the themes */ 6 :root { 7 --rule-highlight-propertyname: light-dark(var(--blue-60), var(--theme-highlight-blue)); 8 --rule-highlight-propertyvalue: light-dark(var(--magenta-70), var(--theme-highlight-red)); 9 --rule-highlight-unmatched-unused-color: light-dark(var(--grey-55), var(--grey-40)); 10 --rule-header-background-color: light-dark(var(--theme-toolbar-background), #222225); 11 --rule-computed-margin-inline-start: 35px; 12 --rule-enableproperty-size: 12px; 13 --rule-enableproperty-margin-inline-start: 3px; 14 --rule-enableproperty-margin-inline-end: 9px; 15 16 &:is([platform="win"], [platform="linux"]) { 17 --rule-enableproperty-size: 14px; 18 /* it's important to keep the px unit here as this is used in a `calc()` */ 19 --rule-enableproperty-margin-inline-start: 0px; 20 --rule-enableproperty-margin-inline-end: 10px; 21 } 22 23 &[forced-colors-active] { 24 --rule-highlight-propertyname: var(--theme-contrast-color); 25 --rule-highlight-propertyvalue: var(--theme-contrast-color); 26 --rule-highlight-unmatched-unused-color: var(--theme-contrast-color); 27 } 28 } 29 30 /* Rule View Tabpanel */ 31 32 #sidebar-panel-ruleview { 33 margin: 0; 34 display: flex; 35 flex-direction: column; 36 width: 100%; 37 height: 100%; 38 39 /* Override the min-width from .inspector-tabpanel, as the rule panel can support small 40 widths */ 41 min-width: 100px; 42 } 43 44 /* Rule View Toolbar */ 45 46 #ruleview-toolbar-container { 47 line-height: var(--theme-toolbar-height); 48 } 49 50 #ruleview-toolbar { 51 flex-wrap: wrap; 52 height: auto; 53 } 54 55 #ruleview-toolbar .devtools-searchbox { 56 flex-basis: 7em; 57 height: var(--theme-toolbar-height); 58 } 59 60 #ruleview-command-toolbar { 61 display: flex; 62 } 63 64 .ruleview-reveal-panel { 65 border-bottom: 1px solid var(--theme-splitter-color); 66 display: flex; 67 overflow: hidden; 68 flex-wrap: wrap; 69 margin: 2px; 70 } 71 72 .ruleview-reveal-panel[hidden] { 73 display: none; 74 } 75 76 .ruleview-reveal-panel .add-class { 77 height: var(--theme-toolbar-height); 78 line-height: normal; 79 } 80 81 .ruleview-reveal-panel label { 82 user-select: none; 83 display: flex; 84 align-items: center; 85 } 86 87 #pseudo-class-panel, 88 #ruleview-class-panel .classes { 89 padding: 0 3px; 90 } 91 92 /* Pseudo Class toggle panel */ 93 94 #pseudo-class-panel { 95 grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); 96 } 97 98 #pseudo-class-panel:not([hidden]) { 99 display: grid; 100 } 101 102 /* Class toggle panel */ 103 104 #ruleview-class-panel { 105 flex-direction: column; 106 } 107 108 #ruleview-class-panel .classes { 109 border-top: 1px solid var(--theme-splitter-color); 110 display: flex; 111 flex-direction: row; 112 flex-wrap: wrap; 113 max-height: 100px; 114 overflow-y: auto; 115 } 116 117 #ruleview-class-panel .classes label { 118 flex: 0 0; 119 max-width: 50%; 120 min-width: 100px; 121 } 122 123 #ruleview-class-panel .classes label span { 124 white-space: nowrap; 125 text-overflow: ellipsis; 126 overflow: hidden; 127 } 128 129 #ruleview-class-panel .no-classes { 130 flex: 1; 131 color: var(--theme-text-color-inactive); 132 margin: 0; 133 text-align: center; 134 } 135 136 /* Rule View Container */ 137 138 #ruleview-container { 139 user-select: text; 140 overflow: auto; 141 flex: auto; 142 height: 100%; 143 /* Adjust outline so it's visible */ 144 outline-offset: -2px; 145 } 146 147 /* This extra wrapper only serves as a way to get the content of the view focusable. 148 So that when the user reaches it either via keyboard or mouse, we know that the view 149 is focused and therefore can handle shortcuts. 150 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab 151 through it, and the outline is hidden. */ 152 #ruleview-container-focusable { 153 height: 100%; 154 outline: none; 155 } 156 157 #ruleview-container.non-interactive { 158 pointer-events: none; 159 visibility: collapse; 160 transition: visibility 0.25s; 161 } 162 163 #ruleview-container .accordion ._content { 164 padding: 0; 165 } 166 167 .ruleview-property:not(:hover) > .ruleview-enableproperty { 168 pointer-events: none; 169 } 170 171 .ruleview-expandable-container { 172 display: block; 173 } 174 175 .ruleview-namecontainer { 176 cursor: text; 177 } 178 179 .ruleview-computed { 180 margin-inline-start: var(--rule-computed-margin-inline-start); 181 /* Add a small indent for wrapping lines */ 182 text-indent: 1em hanging; 183 } 184 185 .ruleview-computed > .ruleview-namecontainer { 186 margin: 0; 187 } 188 189 .ruleview-propertyvaluecontainer { 190 cursor: text; 191 padding-right: 5px; 192 } 193 194 .ruleview-propertyvaluecontainer a { 195 color: var(--theme-highlight-purple); 196 cursor: pointer; 197 } 198 199 .ruleview-computedlist, 200 [hidden]:is( 201 .ruleview-expandable-container, 202 .ruleview-overridden-items, 203 .ruleview-overridden-rule-filter, 204 .ruleview-warning, 205 .ruleview-inactive-css-warning, 206 .ruleview-compatibility-warning, 207 .ruleview-used, 208 .ruleview-invalid-at-computed-value-time-warning, 209 210 ), 211 .ruleview-overridden .inspector-grid { 212 display: none; 213 } 214 215 .ruleview-computedlist[user-open], 216 .ruleview-computedlist[filter-open], 217 .ruleview-overridden-items { 218 display: block; 219 } 220 221 .ruleview-rule-source { 222 text-align: end; 223 float: right; 224 max-width: 100%; 225 226 /* Force RTL direction to crop the source link at the beginning. */ 227 direction: rtl; 228 overflow: hidden; 229 text-overflow: ellipsis; 230 231 user-select: none; 232 margin-bottom: 2px; 233 margin-left: 1ch; 234 235 /* Because of the overflow hidden, the outline that would be set on the child link 236 would not be visible, so we need to set it here */ 237 &:focus-within:has(a:focus-visible) { 238 outline: var(--theme-focus-outline); 239 } 240 } 241 242 .ruleview-rule-source-label { 243 white-space: nowrap; 244 margin: 0; 245 cursor: pointer; 246 247 /* Create an LTR embed to avoid special characters being shifted to the start due to the 248 parent node direction: rtl; */ 249 direction: ltr; 250 unicode-bidi: embed; 251 252 /* We don't always have a link (e.g. for inline style, it's a simple span), and in such 253 case, we shouldn't set the color the same as link color */ 254 &:is(a) { 255 color: var(--theme-internal-link-color); 256 257 /* The outline is set on ruleview-rule-source */ 258 &:focus-visible { 259 outline: none; 260 } 261 262 &:visited { 263 color: var(--theme-internal-link-color); 264 } 265 } 266 } 267 268 .ruleview-rule-source.disabled > .ruleview-rule-source-label, 269 .ruleview-rule-source[unselectable] > .ruleview-rule-source-label { 270 cursor: default; 271 } 272 273 .ruleview-rule-source:not([unselectable]) { 274 text-decoration: underline; 275 text-decoration-skip-ink: none; 276 } 277 278 .ruleview-header { 279 --ruleview-header-padding: 4px; 280 background: var(--rule-header-background-color); 281 border-bottom: 1px solid var(--theme-splitter-color); 282 color: var(--theme-toolbar-color); 283 font-size: 12px; 284 line-height: 16px; 285 padding: var(--ruleview-header-padding); 286 width: 100%; 287 align-items: center; 288 display: flex; 289 user-select: none; 290 } 291 292 .ruleview-expandable-header { 293 cursor: pointer; 294 /* Reset padding set on ruleview-header since we're going to put it on the button instead */ 295 padding: 0; 296 297 & button[aria-expanded] { 298 display: flex; 299 align-items: center; 300 /* Space between arrow and label */ 301 gap: 2px; 302 width: 100%; 303 padding: var(--ruleview-header-padding); 304 305 background-color: var(--theme-accordion-header-background); 306 color: var(--theme-accordion-header-color); 307 308 /* Reset button-specific styles */ 309 border: none; 310 text-align: start; 311 /* Apply same font-size as set on ruleview-header */ 312 font-size: 1em; 313 outline-offset: -2px; 314 315 &:hover { 316 background-color: var(--theme-accordion-header-hover-background); 317 color: var(--theme-accordion-header-hover-color); 318 319 :root[forced-colors-active] & .theme-twisty { 320 color: currentColor; 321 } 322 } 323 324 &[aria-expanded="true"] .theme-twisty { 325 rotate: 90deg; 326 } 327 } 328 } 329 330 .ruleview-rule-pseudo-element { 331 padding-left: 20px; 332 border-left: solid 10px; 333 } 334 335 .ruleview-rule { 336 border-bottom: 1px solid var(--theme-splitter-color); 337 padding: 2px 4px; 338 direction: ltr; 339 } 340 341 #ruleview-container-focusable > .ruleview-rule:last-child { 342 border-bottom: none; 343 } 344 345 /** 346 * Display rules that don't match the current selected element and uneditable 347 * user agent styles differently. 348 * Use :where() to get a 0-specificity rule so the background-color can be overridden 349 * if needed (e.g. when highlighted by `.theme-bg-contrast`) 350 */ 351 /* prettier-ignore */ 352 :where( 353 .ruleview-rule.unmatched, 354 .ruleview-rule[unmatched="true"], 355 .ruleview-rule[uneditable="true"] 356 ) { 357 background: var(--theme-tab-toolbar-background); 358 } 359 360 :root[forced-colors-active] .ruleview-rule:is(.unmatched, [unmatched="true"]) { 361 /* Set an inactive color in High Contrast Mode as we don't have the 362 distinct background that is set in regular mode */ 363 color: var(--theme-text-color-inactive); 364 } 365 366 .ruleview-rule[uneditable="true"] :focus { 367 outline: none; 368 } 369 370 .ruleview-rule[uneditable="true"] .theme-link { 371 color: var(--theme-highlight-bluegrey); 372 } 373 374 .ruleview-rule[uneditable="true"] .ruleview-enableproperty { 375 visibility: hidden; 376 } 377 378 .ruleview-rule[uneditable="true"] .inspector-swatch { 379 cursor: default; 380 } 381 382 .ruleview-rule[uneditable="true"] .ruleview-namecontainer > .ruleview-propertyname, 383 .ruleview-rule[uneditable="true"] .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { 384 text-decoration: none; 385 } 386 387 /* Display a lock before the selector for uneditable rules */ 388 .ruleview-rule[uneditable="true"] .ruleview-selectors-container::before { 389 content: url(images/lock.svg) / "read only"; 390 display: inline-block; 391 translate: 0 1px; 392 margin-inline-end: 2px; 393 -moz-context-properties: fill; 394 fill: var(--theme-icon-dimmed-color); 395 } 396 397 .ruleview-overridden-rule-filter { 398 display: inline-block; 399 width: 14px; 400 height: 14px; 401 margin-inline-start: 3px; 402 background-image: url(chrome://devtools/skin/images/filter-small.svg); 403 background-position: center; 404 background-repeat: no-repeat; 405 background-size: 12px; 406 -moz-context-properties: fill; 407 fill: var(--theme-icon-dimmed-color); 408 background-color: transparent; 409 border: none; 410 411 &:is(:hover, :focus-visible) { 412 fill: var(--theme-icon-color); 413 } 414 } 415 416 .ruleview-ruleopen { 417 padding-inline-end: 5px; 418 } 419 420 .ruleview-ruleclose { 421 clear: both; 422 cursor: text; 423 padding-right: 20px; 424 } 425 426 .ruleview-ancestor-ruleopen, 427 .ruleview-ancestor-ruleclose { 428 color: var(--theme-comment); 429 } 430 431 .ruleview-rule-indent, 432 .ruleview-ancestor-ruleclose { 433 white-space: pre; 434 /* 435 * We do want to keep the underlying chars for the indent for user to copy/paste, 436 * but we can reduce the inline space it takes. 437 * Tweaking word-spacing instead of using font-size as the latter could be odd when 438 * the text is selected. 439 * Avoid using letter-spacing as this can cause visual glitches on low-dpi screen (see Bug 1845517). 440 */ 441 word-spacing: -0.5ch; 442 } 443 444 .ruleview-rule-indent.clipboard-only { 445 position: absolute; 446 left: -9999px; 447 overflow: hidden; 448 width: 0; 449 height: 0; 450 padding: 0; 451 border: 0; 452 margin: 0; 453 } 454 455 .ruleview-propertylist { 456 list-style: none; 457 padding: 0; 458 margin: 0; 459 } 460 461 .ruleview-expandable-container.registered-properties .ruleview-propertylist { 462 /* Since we don't have a toggle checkbox for registered property definitions, we set 463 a padding so they have the same indent as properties in regular rules */ 464 padding-inline-start: 28px; 465 } 466 467 .ruleview-enableproperty { 468 position: relative; 469 margin-top: 0; 470 margin-bottom: 0; 471 } 472 473 .ruleview-enableproperty { 474 box-sizing: border-box; 475 margin-inline-start: var(--rule-enableproperty-margin-inline-start); 476 margin-inline-end: var(--rule-enableproperty-margin-inline-end); 477 width: var(--rule-enableproperty-size); 478 height: var(--rule-enableproperty-size); 479 480 /* The SVG checkbox on Windows and Linux */ 481 :root:is([platform="win"], [platform="linux"]) & { 482 appearance: none; 483 float: left; 484 box-sizing: content-box; 485 display: inline-block; 486 border: 0; 487 padding: 0; 488 background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box; 489 /* Using fill to paint the border, and stroke for the tick */ 490 -moz-context-properties: fill, stroke; 491 fill: rgba(0, 0, 0, 0.3); 492 stroke: transparent; 493 } 494 495 :root[platform="mac"] & { 496 appearance: auto; 497 -moz-default-appearance: checkbox; 498 } 499 } 500 501 :root[platform="win"].theme-dark .ruleview-enableproperty, 502 :root[platform="linux"].theme-dark .ruleview-enableproperty { 503 fill: rgba(255, 255, 255, 0.4); 504 } 505 506 :root[platform="win"] .ruleview-enableproperty:checked, 507 :root[platform="linux"] .ruleview-enableproperty:checked { 508 stroke: rgba(0, 0, 0, 0.6); 509 } 510 511 :root[platform="win"].theme-dark .ruleview-enableproperty:checked, 512 :root[platform="linux"].theme-dark .ruleview-enableproperty:checked { 513 stroke: rgba(255, 255, 255, 0.8); 514 } 515 516 .ruleview-warning, 517 .ruleview-inactive-css-warning, 518 .ruleview-compatibility-warning, 519 .ruleview-invalid-at-computed-value-time-warning { 520 display: inline-block; 521 width: 12px; 522 height: 12px; 523 background-size: 12px; 524 background-repeat: no-repeat; 525 -moz-context-properties: fill; 526 } 527 528 .ruleview-warning { 529 background-image: url(resource://devtools-shared-images/alert-small.svg); 530 fill: var(--yellow-60); 531 } 532 533 .ruleview-invalid-at-computed-value-time-warning { 534 background-image: var(--invalid-at-computed-value-time-icon); 535 fill: var(--invalid-at-computed-value-time-fill-color); 536 } 537 538 .ruleview-inactive-css-warning { 539 background-image: url(resource://devtools-shared-images/info-small.svg); 540 background-color: var(--theme-sidebar-background); 541 fill: var(--theme-icon-dimmed-color); 542 } 543 544 .ruleview-compatibility-warning { 545 background-image: url(chrome://devtools/skin/images/report.svg); 546 background-color: var(--theme-sidebar-background); 547 fill: var(--theme-icon-dimmed-color); 548 } 549 550 .ruleview-inactive-css-warning:hover, 551 .ruleview-compatibility-warning:hover { 552 fill: var(--theme-icon-color); 553 stroke: var(--theme-icon-color); 554 } 555 556 .ruleview-rule:not(:hover, :focus-within) .ruleview-enableproperty { 557 /* Use opacity to hide the checkbox instead of visibility:hidden, 558 so that it's possible to focus it with the keyboard. */ 559 opacity: 0; 560 } 561 562 .ruleview-expander { 563 vertical-align: middle; 564 } 565 566 .ruleview-propertycontainer .ruleview-expander { 567 margin-left: -6px; 568 border: none; 569 background-color: transparent; 570 /* Prevent line break when copy/pasting an entire rule */ 571 user-select: auto; 572 } 573 574 .ruleview-propertycontainer .ruleview-expander:dir(rtl)[aria-expanded="false"] { 575 /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */ 576 transform: rotate(-90deg); 577 } 578 579 .ruleview-propertycontainer .ruleview-variable-link { 580 /* Prevent line break when copy/pasting an entire rule */ 581 user-select: auto; 582 } 583 584 .ruleview-newproperty { 585 /* As we don't have the checkbox displayed before the input, we need to align it 586 with the property name above it. */ 587 margin-inline-start: calc(var(--rule-enableproperty-size) + var(--rule-enableproperty-margin-inline-start) + var(--rule-enableproperty-margin-inline-end)); 588 } 589 590 .ruleview-namecontainer, 591 .ruleview-propertyvaluecontainer, 592 .ruleview-propertyname, 593 .ruleview-propertyvalue { 594 text-decoration: inherit; 595 } 596 597 .ruleview-computedlist { 598 list-style: none; 599 margin: 0; 600 padding: 0; 601 } 602 603 .ruleview-overridden-items { 604 margin-block: 0; 605 list-style: none; 606 line-height: 1.5em; 607 } 608 609 .ruleview-overridden-item { 610 position: relative; 611 } 612 613 .ruleview-overridden-item::before, 614 .ruleview-overridden-item::after { 615 content: ""; 616 position: absolute; 617 display: block; 618 border: 0 solid var(--theme-text-color-alt); 619 } 620 621 .ruleview-overridden-item::before { 622 top: 0; 623 left: -15px; 624 height: 0.8em; 625 width: 10px; 626 border-left-width: 0.5px; 627 border-bottom-width: 0.5px; 628 } 629 630 .ruleview-overridden-item::after { 631 left: -15px; 632 bottom: -7px; 633 height: 100%; 634 border-left-width: 0.5px; 635 } 636 637 .ruleview-overridden-item:last-child::after { 638 display: none; 639 } 640 641 .ruleview-overridden-item .ruleview-namecontainer { 642 margin-left: 0; 643 } 644 645 .ruleview-overridden, 646 .ruleview-invalid { 647 text-decoration: line-through solid var(--theme-text-color-inactive); 648 } 649 650 /** 651 * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules. 652 * .inspector-swatch is a base class for many tool swatches (shapes, color, bezier curves) 653 * .inspector-flex and .inspector-grid are custom 654 */ 655 .ruleview-overridden .inspector-flex, 656 .ruleview-overridden .inspector-grid, 657 .ruleview-overridden .inspector-shapeswatch, 658 .ruleview-overridden .inspector-swatch { 659 display: none; 660 } 661 662 .ruleview-font-family.used-font { 663 text-decoration: underline; 664 } 665 666 .styleinspector-propertyeditor { 667 padding: 0; 668 margin-block: -1px; 669 border: none; 670 outline-offset: 1px; 671 &:focus-visible { 672 /* Unset the outline box shadow to prevent overlapping previous/next properties. 673 This is safe since those input won't be this part of the UI won't get */ 674 --theme-outline-box-shadow: initial; 675 } 676 } 677 678 .ruleview-property { 679 border-left: 3px solid transparent; 680 clear: both; 681 overflow-wrap: break-word; 682 /* When the text of the property wraps, we want the wrapping lines to have an indent so 683 they don't go under the checkbox */ 684 text-indent: var(--rule-computed-margin-inline-start) hanging; 685 686 :root[forced-colors-active] & { 687 /* We opt-out of forced-colors because we want the left border to be actually transparent 688 in High Contrast Mode when the declaration isn't new/updated, and green when it is */ 689 forced-color-adjust: none; 690 /* But we opt-in forced colors on direct child so we have expected High Contrast colors 691 for the children */ 692 & > * { 693 forced-color-adjust: auto; 694 } 695 } 696 } 697 698 .ruleview-propertycontainer > * { 699 vertical-align: middle; 700 } 701 702 .ruleview-property[dirty] { 703 border-left-color: var(--theme-highlight-green); 704 } 705 706 .ruleview-highlight { 707 /* 708 * If we'd rely solely on background color change for highlighted element, we would need 709 * to pick a color that would bring at least 3:1 ratio (see 1.4.11 Non-text Contrast). 710 * As this would be too disturbing for the user, we need to indicate impacted element 711 * with another graphical mean. 712 * So here we'll use a bottom box-shadow (not a border to avoid impacting the layout) 713 * which will match the style we have in Debugger for search results. 714 */ 715 background-color: var(--inspector-highlight-background-color); 716 /* Put the box-shadow inside the element so it's still visible when sibling elements are highlighted */ 717 box-shadow: inset 0 -1px 0 0 var(--theme-contrast-border); 718 719 /* property name and value and unmatched/inactive colors need to be adjusted 720 in order to have enough contrast against the highlighted background */ 721 & .ruleview-propertyname { 722 color: var(--rule-highlight-propertyname); 723 } 724 725 & .ruleview-propertyvalue { 726 color: var(--rule-highlight-propertyvalue); 727 } 728 729 &.ruleview-selector.unmatched, 730 & .inspector-unmatched, 731 .ruleview-property:is(.inactive-css, .ruleview-overridden) & :is(.ruleview-propertyname, .ruleview-propertyvalue) { 732 color: var(--rule-highlight-unmatched-unused-color); 733 } 734 735 /* In High Contrast Mode, we need to specifiy an additional color for elements which 736 don't have specific highlighted colors (selectors, semi colons, stylesheet location, ...) */ 737 :root[forced-colors-active] & { 738 color: var(--theme-contrast-color); 739 a, 740 .theme-twisty { 741 color: var(--theme-contrast-color); 742 } 743 744 /* the overridden class is set on a parent element of the ruleview-highlight one */ 745 .ruleview-overridden:has(&) { 746 text-decoration-color: var(--theme-contrast-color); 747 } 748 } 749 } 750 751 .ruleview-namecontainer:hover > .ruleview-propertyname, 752 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { 753 text-decoration: 1px underline dashed hsl(0, 0%, 50%); 754 } 755 756 /* ancestor rules info element (parent at-rules, parent of nested rules, …) */ 757 .ruleview-rule-ancestor-data { 758 max-width: 100%; 759 display: inline-block; 760 list-style: none; 761 padding: 0; 762 margin: 0; 763 } 764 765 .ruleview-rule-ancestor-data [role="listitem"] { 766 /* When there's a search and this element is highlighted, this prevents the background 767 color to be applied to the whole width of the parent ul block */ 768 max-width: max-content; 769 } 770 771 .ruleview-rule-ancestor-data [role="listitem"].has-tooltip:hover .container-query-declaration { 772 text-decoration: underline; 773 text-decoration-color: var(--theme-highlight-blue); 774 text-decoration-style: dotted; 775 text-decoration-skip-ink: none; 776 text-decoration-thickness: 2px; 777 text-underline-offset: 2px; 778 } 779 780 .ruleview-rule-ancestor-data [role="listitem"] :is(button, [role="button"]).open-inspector { 781 /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */ 782 margin-inline: 1ch 0; 783 user-select: auto; 784 } 785 786 .ruleview-selectors-container, 787 .ruleview-registered-property-name { 788 word-wrap: break-word; 789 cursor: text; 790 } 791 792 .ruleview-selector-separator { 793 color: var(--theme-text-color-alt); 794 } 795 796 .ruleview-rule:is(.unmatched, [unmatched="true"]) .ruleview-selector, 797 .ruleview-selector.unmatched, 798 /* prettier-ignore */ 799 .ruleview-property:is( 800 .inactive-css, 801 .ruleview-overridden, 802 .ruleview-invalid 803 ) :is(.ruleview-propertyname, .ruleview-propertyvalue) { 804 color: var(--theme-text-color-inactive); 805 } 806 807 /* We use a dimmer color for those unmatching element, but we can't convey state change 808 only with colors, so let's add a line-through line */ 809 :is( 810 .ruleview-selector.unmatched, 811 .inspector-unmatched, 812 .ruleview-invalid-at-computed-value-time, 813 .ruleview-rule:is(.unmatched, [unmatched=true]) .ruleview-selector, 814 ):not( 815 /* don't show the strike through when the element is hovered so it's more legible */ 816 :hover 817 ) { 818 text-decoration: line-through solid currentColor; 819 } 820 821 .ruleview-selector.matched > .ruleview-selector-attribute { 822 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ 823 } 824 825 .ruleview-selector.matched > .ruleview-selector-pseudo-class { 826 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ 827 } 828 829 .ruleview-selector.matched > .ruleview-selector-pseudo-class-lock { 830 color: var(--pseudo-class-text-color); 831 } 832 833 .ruleview-selector-warnings { 834 display: inline-block; 835 width: 16px; 836 height: 12px; 837 margin-inline-start: 2px; 838 vertical-align: text-top; 839 border-radius: 2px; 840 841 border: 1px solid var(--theme-warning-border); 842 background-color: var(--theme-warning-background); 843 background-repeat: no-repeat; 844 background-position: center; 845 fill: var(--theme-warning-color); 846 -moz-context-properties: fill; 847 848 /* Default warning icon */ 849 background-image: url(resource://devtools-shared-images/alert-small.svg); 850 background-size: 10px; 851 852 &.slow { 853 background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg); 854 background-size: 12px; 855 } 856 } 857 858 /* When hovering the selector warnings icon, highlight the selector it applies to */ 859 .ruleview-selector:has(.ruleview-selector-warnings:hover) { 860 background-color: var(--theme-warning-background); 861 /* We're not using --theme-warning-border to make it more visible */ 862 outline: 1px solid var(--theme-warning-color); 863 864 & .ruleview-selector-warnings { 865 /* In such case, hide the icon border to make it cleaner */ 866 border-color: transparent; 867 } 868 } 869 870 .ruleview-selectorhighlighter { 871 display: inline-block; 872 border: none; 873 vertical-align: top; 874 width: 15px; 875 height: 15px; 876 margin-left: 5px; 877 background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat 0 0; 878 background-size: contain; 879 cursor: pointer; 880 -moz-context-properties: fill; 881 fill: var(--theme-icon-dimmed-color); 882 /* Prevent line break when copy/pasting an entire rule */ 883 user-select: auto; 884 } 885 886 .ruleview-selectorhighlighter:hover { 887 fill: var(--theme-icon-color); 888 } 889 890 .ruleview-selectorhighlighter:active, 891 .ruleview-selectorhighlighter.highlighted { 892 fill: var(--theme-icon-checked-color); 893 /* Since the icon is quite thin, it can be hard to differentiate it 894 from its regular state. Adding some background helps make it pop a bit */ 895 background-color: var(--dimmed-highlighter-box-content-color); 896 } 897 898 #ruleview-add-rule-button::before { 899 background-image: url("chrome://devtools/skin/images/add.svg"); 900 background-size: 14px; 901 } 902 903 #pseudo-class-panel-toggle::before { 904 content: ":hov"; 905 } 906 907 #class-panel-toggle::before { 908 content: ".cls"; 909 } 910 911 #pseudo-class-panel-toggle::before, 912 #class-panel-toggle::before { 913 display: flex; 914 align-items: center; 915 justify-content: center; 916 font-weight: 600; 917 direction: ltr; 918 } 919 920 #print-simulation-toggle::before { 921 background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg"); 922 } 923 924 #color-scheme-simulation-light-toggle::before { 925 background-image: url("chrome://devtools/skin/images/rules-view-light-mode-simulation.svg"); 926 -moz-context-properties: fill, stroke; 927 stroke: currentColor; 928 } 929 930 #color-scheme-simulation-dark-toggle::before { 931 background-image: url("chrome://devtools/skin/images/rules-view-dark-mode-simulation.svg"); 932 } 933 934 .flash-out { 935 transition: background 1s; 936 } 937 938 .ruleview-propertyvalue-draggable { 939 cursor: col-resize; 940 } 941 942 .ruleview-propertyvalue-dragging { 943 user-select: none; 944 } 945 946 .ruleview-propertyvalue-break-spaces { 947 white-space: break-spaces; 948 } 949 950 .ruleview-show-unused-custom-css-properties { 951 margin-block: 4px; 952 /* Align the button with the properties above it. */ 953 /* prettier-ignore */ 954 margin-inline-start: calc( 955 var(--rule-enableproperty-size) + 956 var(--rule-enableproperty-margin-inline-start) + 957 var(--rule-enableproperty-margin-inline-end) 958 ); 959 }