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;
9 --rule-filter-icon: url("magnifying-glass.png");
16 .ruleview-rule-source {
19 -moz-user-select: none;
23 .ruleview-rule-source > label {
28 .ruleview-rule-source[unselectable],
29 .ruleview-rule-source[unselectable] > label {
33 .ruleview-rule-source:not([unselectable]):hover {
34 text-decoration: underline;
38 border-top-width: 1px;
39 border-bottom-width: 1px;
40 border-top-style: solid;
41 border-bottom-style: solid;
44 -moz-user-select: none;
45 word-wrap: break-word;
54 * Display rules that don't match the current selected element and uneditable
55 * user agent styles differently
57 .ruleview-rule[unmatched=true],
58 .ruleview-rule[uneditable=true] {
59 background: var(--theme-toolbar-background);
62 .ruleview-rule[uneditable=true] :focus {
66 .ruleview-rule[uneditable=true] .theme-link {
67 color: var(--theme-text-blue);
70 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
74 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
75 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
79 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
80 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
81 .ruleview-propertyvalue {
82 border-bottom-color: transparent;
90 .ruleview-rule + .ruleview-rule {
91 border-top-width: 1px;
92 border-top-style: dotted;
96 background: url("alerticon-warning.png");
97 -moz-margin-start: 5px;
98 display: inline-block;
103 @media (min-resolution: 1.1dppx) {
105 background-image: url("alerticon-warning@2x.png");
109 .ruleview-overridden-rule-filter {
110 background-image: var(--rule-filter-icon);
111 background-size: 11px 11px;
112 -moz-margin-start: 5px;
113 display: inline-block;
119 -moz-padding-end: 5px;
122 .ruleview-ruleclose {
127 .ruleview-propertylist {
133 .ruleview-rule:not(:hover) .ruleview-enableproperty {
138 display: inline-block;
141 .ruleview-newproperty {
142 /* (enable checkbox width: 12px) + (expander width: 15px) */
143 -moz-margin-start: 27px;
146 .ruleview-namecontainer,
147 .ruleview-propertyvaluecontainer,
148 .ruleview-propertyname,
149 .ruleview-propertyvalue {
150 text-decoration: inherit;
153 .ruleview-computedlist {
159 -moz-margin-start: 35px;
167 vertical-align: middle;
168 -moz-margin-end: 5px;
169 display: inline-block;
173 .ruleview-colorswatch::before {
175 background-color: #9C9CFF;
176 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
177 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
178 background-size: 12px 12px;
179 background-position: 0 0, 6px 6px;
189 .ruleview-bezierswatch {
190 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
191 background-size: 1em;
194 @media (min-resolution: 1.1dppx) {
195 .ruleview-bezierswatch {
196 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
197 background-size: 1em;
201 .ruleview-overridden {
202 text-decoration: line-through;
205 .styleinspector-propertyeditor {
206 border: 1px solid #A09090;
211 border-left: 3px solid transparent;
215 .ruleview-propertycontainer > * {
216 vertical-align: middle;
219 .ruleview-property[dirty] {
220 border-left-color: var(--theme-highlight-green);
223 .ruleview-highlight {
224 background-color: var(--rule-highlight-background-color);
227 .ruleview-namecontainer > .ruleview-propertyname,
228 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
229 border-bottom: 1px dashed transparent;
232 .ruleview-namecontainer:hover > .ruleview-propertyname,
233 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
234 border-bottom-color: #008484;
237 .ruleview-selectorcontainer {
238 word-wrap: break-word;
242 .ruleview-selector-separator, .ruleview-selector-unmatched {
246 .ruleview-selector-matched > .ruleview-selector-attribute {
247 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
250 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
251 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
254 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
256 color: var(--theme-highlight-orange);
259 .ruleview-selectorhighlighter {
260 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
266 .ruleview-selectorhighlighter:hover {
267 background-position: -32px 0;
270 .ruleview-selectorhighlighter:active,
271 .ruleview-selectorhighlighter.highlighted {
272 background-position: -16px 0;
275 #pseudo-class-panel:not([hidden]) {
276 border-bottom: 1px solid var(--theme-splitter-color);
279 #ruleview-add-rule-button::before {
280 background-image: url("chrome://browser/skin/devtools/add.svg#add");
281 background-size: cover;
283 #ruleview-add-rule-button:hover::before {
284 background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
287 #pseudo-class-panel-toggle::before {
288 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
289 background-size: cover;
291 #pseudo-class-panel-toggle:hover::before,
292 #pseudo-class-panel-toggle[checked]::before {
293 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
294 filter: none !important;
298 * These buttons are using opacity instead of background color to indicate
302 #ruleview-add-rule-button,
303 #pseudo-class-panel-toggle,
304 .ruleview-overridden-rule-filter {
308 #ruleview-add-rule-button:not([disabled]):hover,
309 #pseudo-class-panel-toggle:hover,
310 #pseudo-class-panel-toggle[checked],
311 .ruleview-overridden-rule-filter:hover {
315 #ruleview-add-rule-button,
316 #pseudo-class-panel-toggle,
317 #pseudo-class-panel-toggle:hover,
318 #pseudo-class-panel-toggle[checked]::before {
319 background-color: transparent !important;