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