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/. */
5 /* CSS Variables specific to this panel that aren't defined by the themes */
8 --rule-highlight-background-color: #402800;
15 .ruleview-rule-source {
18 -moz-user-select: none;
22 .ruleview-rule-source > label {
27 .ruleview-rule-source[unselectable],
28 .ruleview-rule-source[unselectable] > label {
32 .ruleview-rule-source:not([unselectable]):hover {
33 text-decoration: underline;
37 border-top-width: 1px;
38 border-bottom-width: 1px;
39 border-top-style: solid;
40 border-bottom-style: solid;
43 -moz-user-select: none;
44 word-wrap: break-word;
53 * Display rules that don't match the current selected element and uneditable
54 * user agent styles differently
56 .ruleview-rule[unmatched=true],
57 .ruleview-rule[uneditable=true] {
58 background: var(--theme-toolbar-background);
61 .ruleview-rule[uneditable=true] :focus {
65 .ruleview-rule[uneditable=true] .theme-link {
66 color: var(--theme-text-blue);
69 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
73 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
74 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
78 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
79 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
80 .ruleview-propertyvalue {
81 border-bottom-color: transparent;
89 .ruleview-rule + .ruleview-rule {
90 border-top-width: 1px;
91 border-top-style: dotted;
95 background: url("alerticon-warning.png");
96 -moz-margin-start: 5px;
97 display: inline-block;
103 @media (min-resolution: 1.25dppx) {
105 background-image: url("alerticon-warning@2x.png");
110 -moz-padding-end: 5px;
113 .ruleview-ruleclose {
118 .ruleview-propertylist {
124 .ruleview-rule:not(:hover) .ruleview-enableproperty {
129 display: inline-block;
132 .ruleview-newproperty {
133 /* (enable checkbox width: 12px) + (expander width: 15px) */
134 -moz-margin-start: 27px;
137 .ruleview-namecontainer,
138 .ruleview-propertyvaluecontainer,
139 .ruleview-propertyname,
140 .ruleview-propertyvalue {
141 text-decoration: inherit;
144 .ruleview-computedlist {
150 -moz-margin-start: 35px;
158 vertical-align: middle;
159 -moz-margin-end: 5px;
160 display: inline-block;
164 .ruleview-colorswatch::before {
166 background-color: #9C9CFF;
167 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
168 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
169 background-size: 12px 12px;
170 background-position: 0 0, 6px 6px;
180 .ruleview-bezierswatch {
181 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
182 background-size: 1em;
185 @media (min-resolution: 1.25dppx) {
186 .ruleview-bezierswatch {
187 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
188 background-size: 1em;
192 .ruleview-overridden {
193 text-decoration: line-through;
196 .styleinspector-propertyeditor {
197 border: 1px solid #A09090;
202 border-left: 3px solid transparent;
206 .ruleview-propertycontainer > * {
207 vertical-align: middle;
210 .ruleview-property[dirty] {
211 border-left-color: var(--theme-highlight-green);
214 .ruleview-highlight {
215 background-color: var(--rule-highlight-background-color);
218 .ruleview-namecontainer > .ruleview-propertyname,
219 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
220 border-bottom: 1px dashed transparent;
223 .ruleview-namecontainer:hover > .ruleview-propertyname,
224 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
225 border-bottom-color: #008484;
229 word-wrap: break-word;
232 .ruleview-selector-separator, .ruleview-selector-unmatched {
236 .ruleview-selectorhighlighter {
237 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
243 .ruleview-selectorhighlighter:hover {
244 background-position: -32px 0;
247 .ruleview-selectorhighlighter:active,
248 .ruleview-selectorhighlighter.highlighted {
249 background-position: -16px 0;
252 #pseudo-class-panel:not([hidden]) {
253 border-bottom: 1px solid var(--theme-splitter-color);
256 #ruleview-add-rule-button::before {
257 background-image: url("chrome://browser/skin/devtools/add.svg#add");
258 background-size: cover;
260 #ruleview-add-rule-button:hover::before {
261 background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
264 #pseudo-class-panel-toggle::before {
265 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
266 background-size: cover;
268 #pseudo-class-panel-toggle:hover::before,
269 #pseudo-class-panel-toggle[checked]::before {
270 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
271 filter: none !important;
275 * These buttons are using opacity instead of background color to indicate
279 #ruleview-add-rule-button,
280 #pseudo-class-panel-toggle {
284 #ruleview-add-rule-button:not([disabled]):hover,
285 #pseudo-class-panel-toggle:hover,
286 #pseudo-class-panel-toggle[checked] {
290 #ruleview-add-rule-button,
291 #pseudo-class-panel-toggle,
292 #pseudo-class-panel-toggle:hover,
293 #pseudo-class-panel-toggle[checked]::before {
294 background-color: transparent !important;