Commit | Line | Data |
---|---|---|
2efcd25d RK |
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 | ||
a5cb6e53 RK |
5 | /* CSS Variables specific to this panel that aren't defined by the themes */ |
6 | ||
7 | .theme-light { | |
8 | --rule-highlight-background-color: #402800; | |
e9fbfc3a | 9 | --rule-filter-icon: url("magnifying-glass.png"); |
a5cb6e53 RK |
10 | } |
11 | ||
2efcd25d RK |
12 | .ruleview { |
13 | height: 100%; | |
14 | } | |
15 | ||
16 | .ruleview-rule-source { | |
a21f2959 | 17 | text-align: end; |
2efcd25d RK |
18 | float: right; |
19 | -moz-user-select: none; | |
5497455b | 20 | margin-bottom: 2px; |
2efcd25d RK |
21 | } |
22 | ||
3d64e0ce RK |
23 | .ruleview-rule-source > label { |
24 | cursor: pointer; | |
5497455b | 25 | margin: 0; |
3d64e0ce RK |
26 | } |
27 | ||
28 | .ruleview-rule-source[unselectable], | |
29 | .ruleview-rule-source[unselectable] > label { | |
30 | cursor: default; | |
31 | } | |
32 | ||
33 | .ruleview-rule-source:not([unselectable]):hover { | |
34 | text-decoration: underline; | |
35 | } | |
36 | ||
1b13529a | 37 | .ruleview-header { |
2efcd25d RK |
38 | border-top-width: 1px; |
39 | border-bottom-width: 1px; | |
40 | border-top-style: solid; | |
41 | border-bottom-style: solid; | |
42 | padding: 1px 4px; | |
43 | margin-top: 4px; | |
44 | -moz-user-select: none; | |
dfa34f73 | 45 | word-wrap: break-word; |
2efcd25d RK |
46 | } |
47 | ||
ed1a91c6 RK |
48 | .ruleview-rule, |
49 | #noResults { | |
2efcd25d RK |
50 | padding: 2px 4px; |
51 | } | |
52 | ||
2e389898 RK |
53 | /** |
54 | * Display rules that don't match the current selected element and uneditable | |
55 | * user agent styles differently | |
56 | */ | |
57 | .ruleview-rule[unmatched=true], | |
832af407 | 58 | .ruleview-rule[uneditable=true] { |
28e80a05 | 59 | background: var(--theme-toolbar-background); |
3d64e0ce RK |
60 | } |
61 | ||
62 | .ruleview-rule[uneditable=true] :focus { | |
63 | outline: none; | |
64 | } | |
65 | ||
66 | .ruleview-rule[uneditable=true] .theme-link { | |
28e80a05 | 67 | color: var(--theme-text-blue); |
3d64e0ce RK |
68 | } |
69 | ||
70 | .ruleview-rule[uneditable=true] .ruleview-enableproperty { | |
71 | visibility: hidden; | |
72 | } | |
73 | ||
9168a62c RK |
74 | .ruleview-rule[uneditable=true] .ruleview-colorswatch, |
75 | .ruleview-rule[uneditable=true] .ruleview-bezierswatch { | |
3d64e0ce RK |
76 | cursor: default; |
77 | } | |
78 | ||
3d64e0ce | 79 | .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, |
d74db938 RK |
80 | .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > |
81 | .ruleview-propertyvalue { | |
3d64e0ce RK |
82 | border-bottom-color: transparent; |
83 | } | |
84 | ||
ed1a91c6 RK |
85 | #noResults { |
86 | font: message-box; | |
87 | color: #8050B0; | |
88 | } | |
89 | ||
2efcd25d RK |
90 | .ruleview-rule + .ruleview-rule { |
91 | border-top-width: 1px; | |
92 | border-top-style: dotted; | |
93 | } | |
94 | ||
95 | .ruleview-warning { | |
dc9d5d64 | 96 | background: url("images/alerticon-warning.png"); |
2efcd25d | 97 | -moz-margin-start: 5px; |
1b13529a | 98 | display: inline-block; |
2efcd25d RK |
99 | width: 13px; |
100 | height: 12px; | |
101 | } | |
102 | ||
024a65e9 | 103 | @media (min-resolution: 1.1dppx) { |
dccbbf95 | 104 | .ruleview-warning { |
dc9d5d64 | 105 | background-image: url("images/alerticon-warning@2x.png"); |
dccbbf95 RK |
106 | } |
107 | } | |
108 | ||
e9fbfc3a RK |
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; | |
114 | width: 11px; | |
115 | height: 11px; | |
116 | } | |
117 | ||
2efcd25d RK |
118 | .ruleview-ruleopen { |
119 | -moz-padding-end: 5px; | |
120 | } | |
121 | ||
122 | .ruleview-ruleclose { | |
123 | cursor: text; | |
124 | padding-right: 20px; | |
125 | } | |
126 | ||
127 | .ruleview-propertylist { | |
128 | list-style: none; | |
129 | padding: 0; | |
130 | margin: 0; | |
131 | } | |
132 | ||
133 | .ruleview-rule:not(:hover) .ruleview-enableproperty { | |
134 | visibility: hidden; | |
135 | } | |
136 | ||
137 | .ruleview-expander { | |
138 | display: inline-block; | |
139 | } | |
140 | ||
141 | .ruleview-newproperty { | |
142 | /* (enable checkbox width: 12px) + (expander width: 15px) */ | |
143 | -moz-margin-start: 27px; | |
144 | } | |
145 | ||
146 | .ruleview-namecontainer, | |
d74db938 | 147 | .ruleview-propertyvaluecontainer, |
2efcd25d RK |
148 | .ruleview-propertyname, |
149 | .ruleview-propertyvalue { | |
150 | text-decoration: inherit; | |
151 | } | |
152 | ||
153 | .ruleview-computedlist { | |
154 | list-style: none; | |
155 | padding: 0; | |
156 | } | |
157 | ||
158 | .ruleview-computed { | |
159 | -moz-margin-start: 35px; | |
160 | } | |
161 | ||
5497455b | 162 | .ruleview-swatch { |
3d64e0ce | 163 | cursor: pointer; |
3a0880a9 | 164 | border-radius: 50%; |
5497455b RK |
165 | width: 0.9em; |
166 | height: 0.9em; | |
167 | vertical-align: middle; | |
3a0880a9 | 168 | -moz-margin-end: 5px; |
dccbbf95 | 169 | display: inline-block; |
ed88669c | 170 | position: relative; |
dccbbf95 RK |
171 | } |
172 | ||
173 | .ruleview-colorswatch::before { | |
174 | content: ''; | |
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; | |
180 | position: absolute; | |
181 | border-radius: 50%; | |
ed88669c RK |
182 | top: 0; |
183 | left: 0; | |
184 | right: 0; | |
185 | bottom: 0; | |
dccbbf95 | 186 | z-index: -1; |
3a0880a9 RK |
187 | } |
188 | ||
9168a62c | 189 | .ruleview-bezierswatch { |
dc9d5d64 | 190 | background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png"); |
9168a62c RK |
191 | background-size: 1em; |
192 | } | |
193 | ||
024a65e9 | 194 | @media (min-resolution: 1.1dppx) { |
9168a62c | 195 | .ruleview-bezierswatch { |
dc9d5d64 | 196 | background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png"); |
9168a62c RK |
197 | background-size: 1em; |
198 | } | |
199 | } | |
200 | ||
2efcd25d RK |
201 | .ruleview-overridden { |
202 | text-decoration: line-through; | |
203 | } | |
204 | ||
205 | .styleinspector-propertyeditor { | |
206 | border: 1px solid #A09090; | |
207 | padding: 0; | |
208 | } | |
209 | ||
210 | .ruleview-property { | |
589b5528 | 211 | border-left: 3px solid transparent; |
dfa34f73 | 212 | clear: right; |
2efcd25d RK |
213 | } |
214 | ||
d74db938 | 215 | .ruleview-propertycontainer > * { |
2efcd25d RK |
216 | vertical-align: middle; |
217 | } | |
218 | ||
219 | .ruleview-property[dirty] { | |
28e80a05 | 220 | border-left-color: var(--theme-highlight-green); |
2efcd25d RK |
221 | } |
222 | ||
a5cb6e53 RK |
223 | .ruleview-highlight { |
224 | background-color: var(--rule-highlight-background-color); | |
225 | } | |
226 | ||
2efcd25d | 227 | .ruleview-namecontainer > .ruleview-propertyname, |
d74db938 | 228 | .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { |
2efcd25d RK |
229 | border-bottom: 1px dashed transparent; |
230 | } | |
231 | ||
232 | .ruleview-namecontainer:hover > .ruleview-propertyname, | |
d74db938 | 233 | .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { |
2efcd25d RK |
234 | border-bottom-color: #008484; |
235 | } | |
236 | ||
19988d2d | 237 | .ruleview-selectorcontainer { |
dfa34f73 | 238 | word-wrap: break-word; |
19988d2d | 239 | cursor: text; |
dfa34f73 RK |
240 | } |
241 | ||
2efcd25d RK |
242 | .ruleview-selector-separator, .ruleview-selector-unmatched { |
243 | color: #8050B0; | |
244 | } | |
05148fed | 245 | |
19988d2d RK |
246 | .ruleview-selector-matched > .ruleview-selector-attribute { |
247 | /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ | |
248 | } | |
249 | ||
250 | .ruleview-selector-matched > .ruleview-selector-pseudo-class { | |
251 | /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ | |
252 | } | |
253 | ||
254 | .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { | |
255 | font-weight: bold; | |
256 | color: var(--theme-highlight-orange); | |
257 | } | |
258 | ||
05148fed | 259 | .ruleview-selectorhighlighter { |
dc9d5d64 | 260 | background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; |
05148fed RK |
261 | padding-left: 16px; |
262 | margin-left: 5px; | |
263 | cursor: pointer; | |
264 | } | |
265 | ||
266 | .ruleview-selectorhighlighter:hover { | |
267 | background-position: -32px 0; | |
268 | } | |
269 | ||
270 | .ruleview-selectorhighlighter:active, | |
271 | .ruleview-selectorhighlighter.highlighted { | |
272 | background-position: -16px 0; | |
273 | } | |
1f756abf RK |
274 | |
275 | #pseudo-class-panel:not([hidden]) { | |
276 | border-bottom: 1px solid var(--theme-splitter-color); | |
277 | } | |
278 | ||
279 | #ruleview-add-rule-button::before { | |
dc9d5d64 | 280 | background-image: url("chrome://devtools/skin/images/add.svg#add"); |
1f756abf RK |
281 | background-size: cover; |
282 | } | |
283 | #ruleview-add-rule-button:hover::before { | |
dc9d5d64 | 284 | background-image: url("chrome://devtools/skin/images/add.svg#add-checked"); |
1f756abf RK |
285 | } |
286 | ||
287 | #pseudo-class-panel-toggle::before { | |
dc9d5d64 | 288 | background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class"); |
1f756abf RK |
289 | background-size: cover; |
290 | } | |
291 | #pseudo-class-panel-toggle:hover::before, | |
292 | #pseudo-class-panel-toggle[checked]::before { | |
dc9d5d64 | 293 | background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class-checked"); |
1f756abf RK |
294 | filter: none !important; |
295 | } | |
b336389b RK |
296 | |
297 | /** | |
298 | * These buttons are using opacity instead of background color to indicate | |
299 | * the state | |
300 | */ | |
301 | /* | |
302 | #ruleview-add-rule-button, | |
e9fbfc3a RK |
303 | #pseudo-class-panel-toggle, |
304 | .ruleview-overridden-rule-filter { | |
b336389b RK |
305 | opacity: 0.8; |
306 | } | |
307 | ||
308 | #ruleview-add-rule-button:not([disabled]):hover, | |
309 | #pseudo-class-panel-toggle:hover, | |
e9fbfc3a RK |
310 | #pseudo-class-panel-toggle[checked], |
311 | .ruleview-overridden-rule-filter:hover { | |
b336389b RK |
312 | opacity: 1; |
313 | } | |
314 | ||
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; | |
320 | } | |
321 | */ |