inspector-swatches.css (5353B)
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 /* Style swatches as rendered by the OutputParser. This needs to be in a shared file as 6 those classes are used in the Rules view and the CSS variable tooltip. */ 7 8 .inspector-flex, 9 .inspector-grid, 10 .inspector-shapeswatch, 11 .inspector-swatch { 12 --swatch-size: 1em; 13 width: var(--swatch-size); 14 height: var(--swatch-size); 15 vertical-align: middle; 16 17 /* align the swatch with its value */ 18 margin-top: -1px; 19 margin-inline-end: 5px; 20 display: inline-block; 21 position: relative; 22 23 /* Set pointer cursor when swatch is interactive */ 24 &:is(button, [role="button"]) { 25 cursor: pointer; 26 } 27 } 28 29 /* Icon swatches not using the .inspector-swatch class (flex, grid, shape) */ 30 31 .inspector-flex, 32 .inspector-grid, 33 .inspector-shapeswatch { 34 background-color: transparent; 35 border: none; 36 -moz-context-properties: stroke; 37 stroke: var(--theme-icon-color); 38 /* Prevent line break when copy/pasting an entire rule */ 39 user-select: auto; 40 41 &:hover { 42 stroke: var(--theme-icon-alternate-hover-color); 43 } 44 } 45 46 :is(.inspector-flex, .inspector-grid, .inspector-shapeswatch)[aria-pressed="true"] { 47 background-color: var(--theme-toolbarbutton-checked-background); 48 stroke: var(--theme-toolbarbutton-checked-color); 49 } 50 51 .inspector-flex { 52 background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg"); 53 background-size: 13px 11px; 54 width: 13px; 55 height: 11px; 56 } 57 58 .inspector-grid { 59 background-image: url("chrome://devtools/skin/images/grid.svg"); 60 } 61 62 .inspector-grid[disabled] { 63 cursor: default; 64 opacity: 0.5; 65 } 66 67 .inspector-shapeswatch { 68 background-image: url("chrome://devtools/skin/images/shape-swatch.svg"); 69 background-size: 110%; 70 width: 1.45em; 71 height: 1.45em; 72 } 73 74 .inspector-shape-point.active, 75 .inspector-shapeswatch[aria-pressed="true"] + .inspector-shape > .inspector-shape-point:hover { 76 background-color: var(--inspector-highlight-background-color); 77 color: var(--inspector-highlight-color); 78 /* Add an outline so when the property is highlighted because of search, 79 the active point still stands out */ 80 outline: 1px solid var(--theme-contrast-border); 81 } 82 83 .inspector-variable { 84 color: var(--theme-highlight-blue); 85 } 86 87 /* Round swatches using the .inspector-swatch class (color, bezier, filter and angle) */ 88 89 .inspector-swatch { 90 background-size: var(--swatch-size); 91 border-radius: 50%; 92 box-shadow: 0 0 0 1px light-dark(#c4c4c4, #818181); 93 94 :root[forced-colors-active] &:not(:focus-visible) { 95 /* The box-shadow isn't rendered in High Contrast Mode, and we do want to have a "border" 96 for those without impacting the size of the elements */ 97 outline: 1px solid var(--theme-icon-color); 98 99 &:hover { 100 outline-color: var(--theme-icon-hover-color); 101 } 102 } 103 } 104 105 /* Create a stacking context for the color swatch so its before pseudo element can be 106 display below it (see next rule) */ 107 .color-swatch-container { 108 position: relative; 109 z-index: 1; 110 } 111 112 /* We want to display a checker below the current swatch color that would be visible 113 if the swatch color isn't opaque */ 114 .inspector-colorswatch::before { 115 content: ""; 116 background-color: #eee; 117 --checker-color: #ccc; 118 --background-gradient: linear-gradient(45deg, var(--checker-color) 25%, transparent 25% 75%, var(--checker-color) 75%); 119 background-image: var(--background-gradient), var(--background-gradient); 120 background-size: var(--swatch-size) var(--swatch-size); 121 background-position: 122 0 0, 123 calc(var(--swatch-size) / 2) calc(var(--swatch-size) / 2); 124 position: absolute; 125 border-radius: 50%; 126 inset: 0; 127 z-index: -1; 128 } 129 130 .inspector-swatch.inspector-colorswatch { 131 border: none; 132 padding: 0; 133 /* Adjust outline so it doesn't conflate with the color swatch, which could have a similar background 134 color as the outline */ 135 outline-offset: 2px; 136 /* Make sure that the background color is properly set in High Contrast Mode */ 137 forced-color-adjust: none; 138 } 139 140 .inspector-bezierswatch { 141 background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg"); 142 -moz-context-properties: stroke, fill; 143 fill: #fff; 144 stroke: #808080; 145 } 146 147 .inspector-filterswatch { 148 background-image: url("chrome://devtools/skin/images/filter-swatch.svg"); 149 -moz-context-properties: stroke, fill; 150 fill: #fff; 151 stroke: #aeb0b1; 152 } 153 154 .inspector-angleswatch { 155 background-image: url("chrome://devtools/skin/images/angle-swatch.svg"); 156 -moz-context-properties: stroke, fill; 157 fill: #fff; 158 stroke: #aeb0b1; 159 } 160 161 .inspector-lineareasingswatch { 162 background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg"); 163 -moz-context-properties: stroke, fill; 164 fill: #fff; 165 stroke: #808080; 166 } 167 168 :root[forced-colors-active] :is(.inspector-bezierswatch, .inspector-lineareasingswatch, .inspector-filterswatch, .inspector-angleswatch) { 169 fill: ButtonFace; 170 stroke: var(--theme-icon-color); 171 /* For some icons, the outline can conflate with the background image in a weird way 172 on low-dpi screens. Adjust the offset a bit so there's a clear separation between 173 the icon and the outline for a cleaner look */ 174 outline-offset: 1px; 175 176 &:hover { 177 stroke: var(--theme-icon-hover-color); 178 } 179 }