Commit | Line | Data |
---|---|---|
cc7e70eb RK |
1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public | |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
5 | ||
6 | /* Generic pane helpers */ | |
7 | ||
8 | .generic-toggled-side-pane { | |
cc7e70eb RK |
9 | -moz-margin-start: 0px !important; |
10 | /* Unfortunately, transitions don't work properly with locale-aware properties, | |
11 | so both the left and right margins are set via js, while the start margin | |
12 | is always overridden here. */ | |
13 | } | |
14 | ||
15 | .generic-toggled-side-pane[animated] { | |
16 | transition: margin 0.25s ease-in-out; | |
17 | } | |
18 | ||
19 | /* BreacrumbsWidget */ | |
20 | ||
21 | .breadcrumbs-widget-container { | |
22 | -moz-margin-end: 3px; | |
23 | /* A fake 1px-shadow is included in the border-images of the | |
24 | breadcrumbs-widget-items, to match toolbar-buttons style. | |
25 | This negative margin compensates the extra row of pixels created | |
26 | by the shadow.*/ | |
f7774352 | 27 | /* margin: -1px 0;*/ |
cc7e70eb RK |
28 | } |
29 | ||
30 | /* Preloading hack, LTR */ | |
31 | ||
32 | .breadcrumbs-widget-container:-moz-locale-dir(ltr)::after { | |
33 | content: ''; | |
34 | display: block; | |
35 | background-image: | |
36 | url("breadcrumbs/ltr-start.png"), | |
37 | url("breadcrumbs/ltr-start-selected.png"), | |
38 | url("breadcrumbs/ltr-start-pressed.png"), | |
39 | url("breadcrumbs/ltr-start-selected-pressed.png"), | |
40 | url("breadcrumbs/ltr-middle.png"), | |
41 | url("breadcrumbs/ltr-middle-selected.png"), | |
42 | url("breadcrumbs/ltr-middle-pressed.png"), | |
43 | url("breadcrumbs/ltr-middle-selected-pressed.png"), | |
44 | url("breadcrumbs/ltr-end.png"), | |
45 | url("breadcrumbs/ltr-end-selected.png"), | |
46 | url("breadcrumbs/ltr-end-pressed.png"), | |
47 | url("breadcrumbs/ltr-end-selected-pressed.png"); | |
48 | } | |
49 | ||
50 | /* Preloading hack, RTL */ | |
51 | ||
52 | .breadcrumbs-widget-container:-moz-locale-dir(rtl)::after { | |
53 | content: ''; | |
54 | display: block; | |
55 | background-image: | |
56 | url("breadcrumbs/rtl-start.png"), | |
57 | url("breadcrumbs/rtl-start-selected.png"), | |
58 | url("breadcrumbs/rtl-start-pressed.png"), | |
59 | url("breadcrumbs/rtl-start-selected-pressed.png"), | |
60 | url("breadcrumbs/rtl-middle.png"), | |
61 | url("breadcrumbs/rtl-middle-selected.png"), | |
62 | url("breadcrumbs/rtl-middle-pressed.png"), | |
63 | url("breadcrumbs/rtl-middle-selected-pressed.png"), | |
64 | url("breadcrumbs/rtl-end.png"), | |
65 | url("breadcrumbs/rtl-end-selected.png"), | |
66 | url("breadcrumbs/rtl-end-pressed.png"), | |
67 | url("breadcrumbs/rtl-end-selected-pressed.png"); | |
68 | } | |
69 | ||
70 | .scrollbutton-up, | |
71 | .scrollbutton-down { | |
72 | min-height: 25px; | |
73 | margin-top: 0; | |
74 | margin-bottom: 0; | |
75 | } | |
76 | ||
77 | .scrollbutton-up { | |
78 | -moz-margin-end: 1px; | |
79 | } | |
80 | ||
81 | .scrollbutton-down { | |
82 | -moz-margin-end: 0; | |
83 | } | |
84 | ||
85 | .scrollbutton-up:not([disabled]):active:hover, | |
86 | .scrollbutton-down:not([disabled]):active:hover { | |
87 | } | |
88 | ||
89 | .scrollbutton-up > .toolbarbutton-icon, | |
90 | .scrollbutton-down > .toolbarbutton-icon { | |
91 | /* margin: 0 5px; */ | |
92 | } | |
93 | ||
94 | .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, | |
95 | .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { | |
96 | } | |
97 | ||
98 | .scrollbutton-up[disabled] > .toolbarbutton-icon, | |
99 | .scrollbutton-down[disabled] > .toolbarbutton-icon { | |
100 | } | |
101 | ||
102 | .scrollbutton-up:-moz-locale-dir(ltr) { | |
103 | border-top-right-radius: 0; | |
104 | border-bottom-right-radius: 0; | |
105 | } | |
106 | ||
107 | .scrollbutton-down:-moz-locale-dir(ltr) { | |
108 | border-top-left-radius: 0; | |
109 | border-bottom-left-radius: 0; | |
110 | } | |
111 | ||
112 | .scrollbutton-up:-moz-locale-dir(rtl) { | |
113 | border-top-left-radius: 0; | |
114 | border-bottom-left-radius: 0; | |
115 | } | |
116 | ||
117 | .scrollbutton-down:-moz-locale-dir(rtl) { | |
118 | border-top-right-radius: 0; | |
119 | border-bottom-right-radius: 0; | |
120 | } | |
121 | ||
122 | .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), | |
123 | .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { | |
124 | /* transform: scaleX(-1); */ | |
125 | } | |
126 | ||
127 | .breadcrumbs-widget-item { | |
128 | background-color: #000000; | |
129 | overflow: hidden; | |
130 | min-width: 85px; | |
131 | max-width: 250px; | |
132 | min-height: 25px; | |
133 | border-style: solid; | |
134 | border-width: 2px 13px; | |
135 | border-radius: 0; | |
136 | margin: 0 -11px 0 0; | |
137 | padding: 0 9px; | |
138 | outline: none; | |
139 | color: #FF9F00; | |
140 | } | |
141 | ||
142 | .breadcrumbs-widget-item:hover { | |
143 | background-color: #FFCF00; | |
144 | color: #000000; | |
145 | } | |
146 | ||
147 | .breadcrumbs-widget-item[checked]:not(:hover) { | |
148 | background-color: #008484; | |
149 | color: #000000; | |
150 | } | |
151 | ||
152 | .breadcrumbs-widget-item[siblings-menu-open], | |
153 | .breadcrumbs-widget-item:active { | |
154 | background-color: #FF9F00; | |
155 | color: #000000; | |
156 | } | |
157 | ||
158 | .breadcrumbs-widget-item:-moz-focusring > label { | |
159 | border-bottom: 1px dotted #008484; | |
160 | } | |
161 | ||
162 | .breadcrumbs-widget-item:-moz-focusring > .button-box { | |
163 | border-width: 0; | |
164 | } | |
165 | ||
166 | .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag { | |
167 | /* color: hsl(208,100%,60%); */ | |
168 | } | |
169 | ||
170 | .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id { | |
171 | /* color: hsl(205,100%,70%); */ | |
172 | } | |
173 | ||
174 | .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes { | |
175 | color: #FF9F00; | |
176 | } | |
177 | ||
178 | .breadcrumbs-widget-item-id, | |
179 | .breadcrumbs-widget-item-classes { | |
180 | /* color: #8d99a6; */ | |
181 | } | |
182 | ||
183 | .breadcrumbs-widget-item-pseudo-classes { | |
184 | color: #FFCF00; | |
185 | } | |
186 | ||
187 | /* Breadcrumbs LTR */ | |
188 | ||
189 | .breadcrumbs-widget-item:-moz-locale-dir(ltr) { | |
190 | border-image: url("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; | |
191 | } | |
192 | ||
193 | .breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) { | |
194 | border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch; | |
195 | } | |
196 | ||
197 | .breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) { | |
198 | border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch; | |
199 | } | |
200 | ||
201 | .breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) { | |
202 | border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch; | |
203 | } | |
204 | ||
205 | .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) { | |
206 | border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch; | |
207 | } | |
208 | ||
209 | .breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { | |
210 | border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch; | |
211 | } | |
212 | ||
213 | .breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) { | |
214 | border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch; | |
215 | } | |
216 | ||
217 | .breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) { | |
218 | border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch; | |
219 | } | |
220 | ||
221 | .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) { | |
222 | border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch; | |
223 | } | |
224 | ||
225 | .breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { | |
226 | border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch; | |
227 | } | |
228 | ||
229 | .breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) { | |
230 | border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch; | |
231 | } | |
232 | ||
233 | .breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) { | |
234 | border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch; | |
235 | } | |
236 | ||
237 | .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) { | |
238 | } | |
239 | ||
240 | .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) { | |
241 | } | |
242 | ||
243 | /* Breadcrumbs RTL */ | |
244 | ||
245 | .breadcrumbs-widget-item:-moz-locale-dir(rtl) { | |
246 | border-image: url("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch; | |
247 | } | |
248 | ||
249 | .breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) { | |
250 | border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch; | |
251 | } | |
252 | ||
253 | .breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) { | |
254 | border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch; | |
255 | } | |
256 | ||
257 | .breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) { | |
258 | border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch; | |
259 | } | |
260 | ||
261 | .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) { | |
262 | border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch; | |
263 | } | |
264 | ||
265 | .breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { | |
266 | border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch; | |
267 | } | |
268 | ||
269 | .breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) { | |
270 | border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch; | |
271 | } | |
272 | ||
273 | .breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) { | |
274 | border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch; | |
275 | } | |
276 | ||
277 | .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) { | |
278 | border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch; | |
279 | } | |
280 | ||
281 | .breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { | |
282 | border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch; | |
283 | } | |
284 | ||
285 | .breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) { | |
286 | border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch; | |
287 | } | |
288 | ||
289 | .breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) { | |
290 | border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch; | |
291 | } | |
292 | ||
293 | .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) { | |
294 | } | |
295 | ||
296 | .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) { | |
297 | } | |
298 | ||
299 | /* SideMenuWidget */ | |
300 | ||
301 | .side-menu-widget-container { | |
dfa34f73 RK |
302 | /* Hack: force hardware acceleration */ |
303 | transform: translateZ(1px); | |
304 | ||
cc7e70eb RK |
305 | background-color: #000000; |
306 | color: #FF9F00; | |
307 | } | |
308 | ||
7600e0b1 RK |
309 | /* SideMenuWidget container */ |
310 | ||
de57e474 RK |
311 | .side-menu-widget-container:-moz-locale-dir(ltr), |
312 | .side-menu-widget-empty-notice-container:-moz-locale-dir(ltr) { | |
cc7e70eb RK |
313 | } |
314 | ||
de57e474 RK |
315 | .side-menu-widget-container:-moz-locale-dir(rtl), |
316 | .side-menu-widget-empty-notice-container:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) { | |
cc7e70eb RK |
317 | } |
318 | ||
de57e474 | 319 | .side-menu-widget-group { |
7600e0b1 RK |
320 | /* To allow visibility of the dark margin shadow. */ |
321 | /* -moz-margin-end: 1px; */ | |
322 | } | |
323 | ||
324 | .side-menu-widget-container[with-arrows=true] .side-menu-widget-item { | |
325 | /* To compensate for the arrow image's dark margin. */ | |
326 | /* -moz-margin-end: -1px; */ | |
327 | } | |
328 | ||
329 | /* SideMenuWidget groups */ | |
330 | ||
cc7e70eb | 331 | .side-menu-widget-group-title { |
cc7e70eb | 332 | padding: 4px; |
3a0880a9 RK |
333 | |
334 | background-color: #A09090; | |
cc7e70eb | 335 | color: #000000; |
cc7e70eb RK |
336 | } |
337 | ||
7600e0b1 RK |
338 | /* SideMenuWidget items */ |
339 | ||
cc7e70eb RK |
340 | .side-menu-widget-item { |
341 | border-top: 1px solid #9C9CFF; | |
1b13529a RK |
342 | margin-top: -1px; |
343 | margin-bottom: -1px; | |
cc7e70eb RK |
344 | } |
345 | ||
346 | .side-menu-widget-item:last-of-type { | |
347 | border-bottom: 1px solid #9C9CFF; | |
348 | } | |
349 | ||
350 | .side-menu-widget-item.selected { | |
351 | background-color: #008484 !important; | |
352 | color: #000000; | |
353 | } | |
354 | ||
355 | .side-menu-widget-item.selected > .side-menu-widget-item-arrow { | |
356 | background-size: auto, 1px 100%; | |
357 | background-repeat: no-repeat; | |
358 | } | |
359 | ||
360 | .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { | |
361 | background-image: url("itemArrow-ltr.png"), linear-gradient(to right, #000000, #000000); | |
362 | background-position: center right, top right; | |
363 | } | |
364 | ||
365 | .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { | |
366 | background-image: url("itemArrow-rtl.png"), linear-gradient(to right, #000000, #000000); | |
367 | background-position: center left, top left; | |
368 | } | |
369 | ||
7600e0b1 RK |
370 | /* SideMenuWidget items contents */ |
371 | ||
e447dcba RK |
372 | .side-menu-widget-item-contents { |
373 | padding: 2px; | |
374 | } | |
375 | ||
1b13529a RK |
376 | .side-menu-widget-item-label { |
377 | padding: 4px 0px; | |
1b13529a RK |
378 | } |
379 | ||
cc7e70eb RK |
380 | .side-menu-widget-item-arrow { |
381 | -moz-margin-start: -8px; | |
382 | width: 8px; | |
383 | } | |
384 | ||
cc7e70eb RK |
385 | .side-menu-widget-item-other { |
386 | background-color: #000000; | |
387 | margin: 0 -4px; | |
388 | -moz-padding-start: 5px; | |
389 | } | |
390 | ||
391 | .side-menu-widget-item-other.selected { | |
392 | background-color: #008484; | |
393 | color: #000000; | |
394 | } | |
395 | ||
cc7e70eb | 396 | .side-menu-widget-item-other:first-of-type { |
1b13529a | 397 | /* border-top-left-radius: 4px; */ |
cc7e70eb RK |
398 | } |
399 | ||
400 | .side-menu-widget-item-other:not(.selected) > label { | |
401 | color: #9C9CFF; | |
402 | } | |
403 | ||
6568957a RK |
404 | /* SideMenuWidget checkboxes */ |
405 | ||
406 | .side-menu-widget-group-checkbox { | |
407 | margin: 0; | |
408 | -moz-margin-end: 4px; | |
409 | } | |
410 | ||
411 | .side-menu-widget-item-checkbox { | |
412 | margin: 0; | |
413 | -moz-margin-start: 4px; | |
414 | -moz-margin-end: -4px; | |
415 | } | |
416 | ||
7600e0b1 RK |
417 | /* SideMenuWidget misc */ |
418 | ||
cc7e70eb | 419 | .side-menu-widget-empty-notice-container { |
cc7e70eb | 420 | padding: 12px; |
3a0880a9 RK |
421 | |
422 | background-color: #000000; | |
cc7e70eb | 423 | font-weight: 600; |
3a0880a9 | 424 | color: #A09090; |
cc7e70eb RK |
425 | } |
426 | ||
427 | /* VariablesView */ | |
428 | ||
dfa34f73 RK |
429 | .variables-view-container:not([empty]) { |
430 | /* Hack: force hardware acceleration */ | |
431 | transform: translateZ(1px); | |
432 | } | |
433 | ||
cc7e70eb RK |
434 | .variables-view-empty-notice { |
435 | color: #A09090; | |
436 | padding: 2px; | |
437 | } | |
438 | ||
439 | .variables-view-scope > .title { | |
440 | background-color: #A09090; | |
441 | color: #000000; | |
442 | } | |
443 | ||
dfa34f73 | 444 | /* Generic variables traits */ |
cc7e70eb | 445 | |
dfa34f73 RK |
446 | .variables-view-variable:not(:last-child) { |
447 | border-bottom: 1px solid #A09090; | |
448 | } | |
cc7e70eb | 449 | |
dfa34f73 RK |
450 | .variables-view-variable > .title > .name { |
451 | font-weight: 600; | |
cc7e70eb RK |
452 | } |
453 | ||
dfa34f73 RK |
454 | /* Generic variables *and* properties traits */ |
455 | ||
456 | .variable-or-property:focus > .title > label { | |
457 | color: inherit !important; | |
cc7e70eb RK |
458 | } |
459 | ||
460 | .variable-or-property > .title > .value { | |
d2ce251d | 461 | -moz-box-flex: 1; |
cc7e70eb RK |
462 | } |
463 | ||
dfa34f73 RK |
464 | .variable-or-property > .title > .arrow { |
465 | -moz-margin-start: 3px; | |
cc7e70eb RK |
466 | } |
467 | ||
2a8b2b48 | 468 | .variable-or-property:not([untitled]) > .variables-view-element-details { |
dfa34f73 | 469 | -moz-margin-start: 7px; |
cc7e70eb RK |
470 | } |
471 | ||
dfa34f73 | 472 | /* Traits applied when variables or properties are changed or overridden */ |
cc7e70eb | 473 | |
dfa34f73 RK |
474 | .variable-or-property:not([overridden]) { |
475 | transition: background 1s ease-in-out, color 1s ease-in-out; | |
d2ce251d RK |
476 | } |
477 | ||
dfa34f73 RK |
478 | .variable-or-property:not([overridden])[changed] { |
479 | color: #000000; | |
480 | transition-duration: .4s; | |
cc7e70eb RK |
481 | } |
482 | ||
dfa34f73 RK |
483 | .variable-or-property[overridden] { |
484 | background: rgba(160,144,144,0.0.5); | |
cc7e70eb RK |
485 | } |
486 | ||
dfa34f73 RK |
487 | .variable-or-property[overridden] .title > label { |
488 | /* Cross out the title for this variable and all child properties. */ | |
489 | font-style: italic; | |
490 | text-decoration: line-through; | |
491 | border-bottom: none !important; | |
492 | color: #A09090; | |
493 | opacity: 0.7; | |
cc7e70eb RK |
494 | } |
495 | ||
dfa34f73 RK |
496 | /* Traits applied when variables or properties are editable */ |
497 | ||
498 | .variable-or-property[editable] > .title > .value { | |
499 | cursor: text; | |
500 | } | |
501 | ||
502 | .variable-or-property[overridden] .title > .value { | |
503 | /* Disallow editing this variable and all child properties. */ | |
504 | pointer-events: none; | |
505 | } | |
cc7e70eb | 506 | |
e2734cc7 RK |
507 | /* Custom configurable/enumerable/writable or frozen/sealed/extensible |
508 | * variables and properties */ | |
cc7e70eb | 509 | |
dfa34f73 | 510 | .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { |
de57e474 | 511 | opacity: 0.6; |
cc7e70eb RK |
512 | } |
513 | ||
dfa34f73 | 514 | .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name { |
cc7e70eb RK |
515 | border-bottom: 1px dashed #9C9CFF; |
516 | } | |
517 | ||
dfa34f73 | 518 | .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name { |
cc7e70eb RK |
519 | border-bottom: 1px dashed #FF0000; |
520 | } | |
521 | ||
dfa34f73 | 522 | .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name { |
de57e474 RK |
523 | border-bottom: 1px dashed #A09090; |
524 | } | |
525 | ||
e2734cc7 | 526 | .variable-or-property-non-writable-icon { |
cc7e70eb RK |
527 | background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; |
528 | width: 16px; | |
529 | height: 16px; | |
530 | opacity: 0.5; | |
531 | } | |
532 | ||
533 | @media (min-resolution: 2dppx) { | |
e2734cc7 | 534 | .variable-or-property-non-writable-icon > .title:after { |
cc7e70eb RK |
535 | background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); |
536 | background-size: 32px; | |
537 | } | |
538 | } | |
539 | ||
e2734cc7 RK |
540 | .variable-or-property-frozen-label, |
541 | .variable-or-property-sealed-label, | |
542 | .variable-or-property-non-extensible-label { | |
543 | -moz-padding-end: 4px; | |
b27cc46e RK |
544 | } |
545 | ||
546 | .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, | |
547 | .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, | |
548 | .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { | |
e2734cc7 RK |
549 | color: #A09090; |
550 | } | |
551 | ||
7600e0b1 RK |
552 | /* Aligned values */ |
553 | ||
554 | .variables-view-container[aligned-values] .title > .separator { | |
555 | -moz-box-flex: 1; | |
556 | } | |
557 | ||
558 | .variables-view-container[aligned-values] .title > .value { | |
d2ce251d | 559 | -moz-box-flex: 0; |
7600e0b1 RK |
560 | width: 70vw; |
561 | } | |
562 | ||
563 | .variables-view-container[aligned-values] .title > .element-value-input { | |
564 | width: calc(70vw - 10px); | |
565 | } | |
566 | ||
567 | /* Actions first */ | |
568 | ||
d2ce251d RK |
569 | .variables-view-container[actions-first] .variables-view-delete, |
570 | .variables-view-container[actions-first] .variables-view-add-property { | |
7600e0b1 RK |
571 | -moz-box-ordinal-group: 0; |
572 | } | |
573 | ||
d2ce251d RK |
574 | .variables-view-container[actions-first] [invisible] { |
575 | visibility: hidden; | |
576 | } | |
577 | ||
cc7e70eb RK |
578 | /* Variables and properties tooltips */ |
579 | ||
580 | .variable-or-property > tooltip > label { | |
581 | margin: 0 2px 0 2px; | |
582 | } | |
583 | ||
dfa34f73 RK |
584 | .variable-or-property[non-enumerable] > tooltip > label.enumerable, |
585 | .variable-or-property[non-configurable] > tooltip > label.configurable, | |
586 | .variable-or-property[non-writable] > tooltip > label.writable | |
587 | .variable-or-property[non-extensible] > tooltip > label.extensible { | |
e2734cc7 | 588 | color: #A09090; |
cc7e70eb RK |
589 | text-decoration: line-through; |
590 | } | |
591 | ||
dfa34f73 RK |
592 | .variable-or-property[overridden] > tooltip > label.overridden { |
593 | -moz-padding-start: 4px; | |
594 | -moz-border-start: 1px dotted #9C9CFF; | |
595 | } | |
596 | ||
597 | .variable-or-property[safe-getter] > tooltip > label.WebIDL { | |
e2734cc7 RK |
598 | -moz-padding-start: 4px; |
599 | -moz-border-start: 1px dotted #9C9CFF; | |
600 | color: #008484; | |
c4460289 RK |
601 | } |
602 | ||
cc7e70eb RK |
603 | /* Variables and properties editing */ |
604 | ||
605 | .variables-view-delete { | |
b27cc46e | 606 | list-style-image: url("chrome://browser/skin/devtools/vview-delete.png"); |
cc7e70eb | 607 | -moz-image-region: rect(0, 16px, 16px, 0); |
cc7e70eb RK |
608 | } |
609 | ||
610 | .variables-view-delete:hover { | |
b27cc46e | 611 | -moz-image-region: rect(0, 32px, 16px, 16px); |
cc7e70eb RK |
612 | } |
613 | ||
b27cc46e RK |
614 | .variables-view-delete:active { |
615 | -moz-image-region: rect(0, 48px, 16px, 32px); | |
616 | } | |
617 | ||
cc7e70eb | 618 | .variables-view-edit { |
b27cc46e | 619 | background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat; |
cc7e70eb RK |
620 | width: 20px; |
621 | height: 16px; | |
622 | cursor: pointer; | |
623 | } | |
624 | ||
625 | .variables-view-throbber { | |
626 | background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; | |
627 | width: 16px; | |
628 | height: 16px; | |
629 | } | |
630 | ||
631 | .element-value-input { | |
dfa34f73 | 632 | -moz-margin-start: -2px !important; |
cc7e70eb RK |
633 | -moz-margin-end: 2px !important; |
634 | } | |
635 | ||
636 | .element-name-input { | |
637 | -moz-margin-start: -2px !important; | |
638 | -moz-margin-end: 2px !important; | |
cc7e70eb RK |
639 | font-weight: 600; |
640 | } | |
641 | ||
642 | .element-value-input, | |
643 | .element-name-input { | |
644 | border: 1px solid #008484 !important; | |
de57e474 | 645 | color: inherit; |
cc7e70eb RK |
646 | } |
647 | ||
648 | /* Variables and properties searching */ | |
649 | ||
650 | .variables-view-searchinput { | |
651 | min-height: 24px; | |
652 | } | |
653 | ||
2a8b2b48 | 654 | .variable-or-property[unmatched] { |
cc7e70eb RK |
655 | border: none; |
656 | margin: 0; | |
657 | } | |
658 | ||
659 | /* Expand/collapse arrow */ | |
660 | ||
661 | .arrow { | |
82b4252f | 662 | background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat; |
cc7e70eb | 663 | width: 9px; |
e447dcba | 664 | height: 16px; |
cc7e70eb RK |
665 | -moz-margin-start: 5px; |
666 | -moz-margin-end: 5px; | |
667 | } | |
668 | ||
669 | .variables-view-scope > .title > .arrow { | |
670 | background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif"); | |
671 | } | |
672 | ||
673 | .arrow[open] { | |
e447dcba | 674 | background-image: url("chrome://global/skin/tree/twisty-open.gif"); |
cc7e70eb RK |
675 | } |
676 | ||
677 | .variables-view-scope > .title > .arrow[open] { | |
678 | background-image: url("chrome://global/skin/tree/twisty-open-selected.gif"); | |
679 | } | |
680 | ||
681 | .arrow[invisible] { | |
682 | visibility: hidden; | |
683 | } | |
7600e0b1 RK |
684 | |
685 | /* === BEGIN manifest-editor.inc.css === */ | |
686 | ||
687 | /* Manifest Editor overrides */ | |
688 | ||
689 | .variables-view-container.manifest-editor { | |
690 | background-color: #000000; | |
d2ce251d | 691 | padding: 20px 2px; |
7600e0b1 RK |
692 | } |
693 | ||
694 | .manifest-editor .variable-or-property:focus > .title { | |
695 | /* background-color: #EDEDED; | |
696 | color: #000; */ | |
697 | border-radius: 4px; | |
698 | } | |
699 | ||
700 | .manifest-editor .variables-view-property > .title > .name { | |
701 | /* color: #27406A; */ | |
702 | } | |
703 | ||
d2ce251d RK |
704 | .manifest-editor .variable-or-property > .title > label, |
705 | .manifest-editor textbox { | |
7600e0b1 RK |
706 | font-family: monospace; |
707 | } | |
708 | ||
709 | .manifest-editor .variable-or-property > .title > .token-string { | |
710 | /* color: #54BC6A; */ | |
711 | font-weight: bold; | |
712 | } | |
713 | ||
714 | .manifest-editor .variable-or-property > .title > .token-boolean, | |
715 | .manifest-editor .variable-or-property > .title > .token-number { | |
716 | /* color: #009BD4; */ | |
717 | font-weight: bold; | |
718 | } | |
719 | ||
720 | .manifest-editor .variable-or-property > .title > .token-undefined { | |
721 | /* color: #bbb; */ | |
722 | } | |
723 | ||
724 | .manifest-editor .variable-or-property > .title > .token-null { | |
725 | /* color: #999; */ | |
726 | } | |
727 | ||
728 | .manifest-editor .variable-or-property > .title > .token-other { | |
729 | /* color: #333; */ | |
730 | } | |
731 | ||
732 | .manifest-editor .variables-view-variable { | |
733 | border-bottom: none; | |
734 | } | |
735 | ||
736 | .manifest-editor .variables-view-delete, | |
737 | .manifest-editor .variables-view-delete:hover, | |
d2ce251d RK |
738 | .manifest-editor .variables-view-delete:active, |
739 | .manifest-editor .variables-view-add-property:hover, | |
740 | .manifest-editor .variables-view-add-property:active { | |
7600e0b1 RK |
741 | list-style-image: none; |
742 | -moz-image-region: initial; | |
743 | } | |
744 | ||
d2ce251d RK |
745 | .manifest-editor .variables-view-delete::before, |
746 | .manifest-editor .variables-view-add-property::before { | |
747 | width: 11px; | |
748 | height: 11px; | |
7600e0b1 RK |
749 | content: ""; |
750 | display: inline-block; | |
d2ce251d RK |
751 | background-size: 11px auto; |
752 | } | |
753 | ||
754 | .manifest-editor .variables-view-delete::before { | |
7600e0b1 RK |
755 | background-image: url("app-manager/remove.svg"); |
756 | background-size: 12px auto; | |
757 | } | |
758 | ||
d2ce251d RK |
759 | .manifest-editor .variables-view-add-property::before { |
760 | background-image: url("app-manager/add.svg"); | |
761 | -moz-margin-end: 2px; | |
762 | } | |
763 | ||
7600e0b1 | 764 | /* === END manifest-editor.inc.css === */ |