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