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 {
16 -moz-padding-start: 5px;
19 -moz-user-select: none;
22 .ruleview-rule-source,
23 .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;
52 /* User agent styles are not editable, display them differently */
53 .ruleview-rule[uneditable=true] {
54 background: var(--theme-toolbar-background);
57 .ruleview-rule[uneditable=true] :focus {
61 .ruleview-rule[uneditable=true] .theme-link {
62 color: var(--theme-text-blue);
65 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
69 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
70 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
74 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
75 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
76 .ruleview-propertyvalue {
77 border-bottom-color: transparent;
85 .ruleview-rule + .ruleview-rule {
86 border-top-width: 1px;
87 border-top-style: dotted;
91 background: url("alerticon-warning.png");
92 -moz-margin-start: 5px;
93 display: inline-block;
99 @media (min-resolution: 1.25dppx) {
101 background-image: url("alerticon-warning@2x.png");
106 -moz-padding-end: 5px;
109 .ruleview-ruleclose {
114 .ruleview-propertylist {
120 .ruleview-rule:not(:hover) .ruleview-enableproperty {
125 display: inline-block;
128 .ruleview-newproperty {
129 /* (enable checkbox width: 12px) + (expander width: 15px) */
130 -moz-margin-start: 27px;
133 .ruleview-namecontainer,
134 .ruleview-propertyvaluecontainer,
135 .ruleview-propertyname,
136 .ruleview-propertyvalue {
137 text-decoration: inherit;
140 .ruleview-computedlist {
146 -moz-margin-start: 35px;
149 .ruleview-colorswatch,
150 .ruleview-bezierswatch {
155 vertical-align: text-top;
156 -moz-margin-end: 5px;
157 display: inline-block;
161 .ruleview-colorswatch::before {
163 background-color: #9C9CFF;
164 background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
165 linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
166 background-size: 12px 12px;
167 background-position: 0 0, 6px 6px;
177 .ruleview-bezierswatch {
178 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
179 background-size: 1em;
182 @media (min-resolution: 1.25dppx) {
183 .ruleview-bezierswatch {
184 background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
185 background-size: 1em;
189 .ruleview-overridden {
190 text-decoration: line-through;
193 .styleinspector-propertyeditor {
194 border: 1px solid #A09090;
199 border-left: 3px solid transparent;
203 .ruleview-propertycontainer > * {
204 vertical-align: middle;
207 .ruleview-property[dirty] {
208 border-left-color: var(--theme-highlight-green);
211 .ruleview-highlight {
212 background-color: var(--rule-highlight-background-color);
215 .ruleview-namecontainer > .ruleview-propertyname,
216 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
217 border-bottom: 1px dashed transparent;
220 .ruleview-namecontainer:hover > .ruleview-propertyname,
221 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
222 border-bottom-color: #008484;
226 word-wrap: break-word;
229 .ruleview-selector-separator, .ruleview-selector-unmatched {
233 .ruleview-selectorhighlighter {
234 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
240 .ruleview-selectorhighlighter:hover {
241 background-position: -32px 0;
244 .ruleview-selectorhighlighter:active,
245 .ruleview-selectorhighlighter.highlighted {
246 background-position: -16px 0;
249 #pseudo-class-panel:not([hidden]) {
250 border-bottom: 1px solid var(--theme-splitter-color);
253 #ruleview-add-rule-button::before {
254 background-image: url("chrome://browser/skin/devtools/add.svg#add");
255 background-size: cover;
257 #ruleview-add-rule-button:hover::before {
258 background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
261 #pseudo-class-panel-toggle::before {
262 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
263 background-size: cover;
265 #pseudo-class-panel-toggle:hover::before,
266 #pseudo-class-panel-toggle[checked]::before {
267 background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
268 filter: none !important;