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