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;
228 .ruleview-selectorcontainer {
229 word-wrap: break-word;
233 .ruleview-selector-separator, .ruleview-selector-unmatched {
237 .ruleview-selector-matched > .ruleview-selector-attribute {
238 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
241 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
242 /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
245 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
247 color: var(--theme-highlight-orange);
250 .ruleview-selectorhighlighter {
251 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
257 .ruleview-selectorhighlighter:hover {
258 background-position: -32px 0;
261 .ruleview-selectorhighlighter:active,
262 .ruleview-selectorhighlighter.highlighted {
263 background-position: -16px 0;
266 #pseudo-class-panel:not([hidden]) {
267 border-bottom: 1px solid var(--theme-splitter-color);
270 #ruleview-add-rule-button::before {
271 background-image: url("chrome://browser/skin/devtools/add.svg#add");
272 background-size: cover;
274 #ruleview-add-rule-button:hover::before {
275 background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
278 #pseudo-class-panel-toggle::before {
279 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
280 background-size: cover;
282 #pseudo-class-panel-toggle:hover::before,
283 #pseudo-class-panel-toggle[checked]::before {
284 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
285 filter: none !important;
289 * These buttons are using opacity instead of background color to indicate
293 #ruleview-add-rule-button,
294 #pseudo-class-panel-toggle {
298 #ruleview-add-rule-button:not([disabled]):hover,
299 #pseudo-class-panel-toggle:hover,
300 #pseudo-class-panel-toggle[checked] {
304 #ruleview-add-rule-button,
305 #pseudo-class-panel-toggle,
306 #pseudo-class-panel-toggle:hover,
307 #pseudo-class-panel-toggle[checked]::before {
308 background-color: transparent !important;