tweaks for making devtools look nicer
[themes.git] / LCARStrek / browser / devtools / widgets.css
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.*/
28 /*  margin: -1px 0;*/
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
307 .side-menu-widget-container[with-arrow=true]:-moz-locale-dir(ltr),
308 .side-menu-widget-group[with-arrow=true]:-moz-locale-dir(ltr),
309 .side-menu-widget-item[with-arrow=true]:-moz-locale-dir(ltr) {
310 }
311
312 .side-menu-widget-container[with-arrow=true]:-moz-locale-dir(rtl),
313 .side-menu-widget-group[with-arrow=true]:-moz-locale-dir(rtl),
314 .side-menu-widget-item[with-arrow=true]:-moz-locale-dir(rtl) {
315 }
316
317 .side-menu-widget-group-title {
318   background-color: #A09090;
319   padding: 4px;
320   color: #000000;
321   transition-property: background-color;
322   transition-duration: 0.3s;
323 }
324
325 .side-menu-widget-group:hover > .side-menu-widget-group-title {
326   background-color: #FFCF00;
327 }
328
329 .side-menu-widget-item {
330   border-top: 1px solid #9C9CFF;
331   cursor: pointer;
332 }
333
334 .side-menu-widget-item:last-of-type {
335   border-bottom: 1px solid #9C9CFF;
336 }
337
338 .side-menu-widget-item.selected {
339   background-color: #008484 !important;
340   color: #000000;
341 }
342
343 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
344   background-size: auto, 1px 100%;
345   background-repeat: no-repeat;
346 }
347
348 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
349   background-image: url("itemArrow-ltr.png"), linear-gradient(to right, #000000, #000000);
350   background-position: center right, top right;
351 }
352
353 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
354   background-image: url("itemArrow-rtl.png"), linear-gradient(to right, #000000, #000000);
355   background-position: center left, top left;
356 }
357
358 .side-menu-widget-item-arrow {
359   -moz-margin-start: -8px;
360   width: 8px;
361 }
362
363 .side-menu-widget-item-contents {
364   padding: 4px;
365 }
366
367 .side-menu-widget-item label {
368   cursor: inherit;
369 }
370
371 .side-menu-widget-item-other {
372   background-color: #000000;
373   margin: 0 -4px;
374   -moz-padding-start: 5px;
375 }
376
377 .side-menu-widget-item-other.selected {
378   background-color: #008484;
379   color: #000000;
380 }
381
382 .side-menu-widget-item.selected .side-menu-widget-item-other:first-of-type {
383   border-top: 1px dotted #9C9CFF;
384   margin-top: 3px;
385 }
386
387 .side-menu-widget-item-other:first-of-type {
388   margin-top: 4px;
389 }
390
391 .side-menu-widget-item-other:last-of-type {
392   margin-bottom: -4px;
393 }
394
395 .side-menu-widget-item-other:not(.selected) > label {
396   color: #9C9CFF;
397 }
398
399 .side-menu-widget-empty-notice-container {
400   background-color: #000000;
401   padding: 12px;
402   color: #A09090;
403   font-weight: 600;
404 }
405
406 /* VariablesView */
407
408 .variables-view-container {
409   background: #000000;
410 }
411
412 .variables-view-empty-notice {
413   color: #A09090;
414   padding: 2px;
415 }
416
417 .variables-view-scope > .title {
418   background-color: #A09090;
419   color: #000000;
420 }
421
422 .variables-view-scope:focus > .title {
423   background-color: #008484;
424   color: #000000;
425 }
426
427 .variables-view-scope > .variables-view-element-details:not(:empty) {
428   margin-top: 1px;
429   -moz-margin-start: 2px;
430   -moz-margin-end: 1px;
431 }
432
433 .variables-view-scope > .variables-view-element-details.enum:not(:empty) {
434   border-bottom: 1px solid #9C9CFF;
435 }
436
437 /* Generic traits applied to both variables and properties */
438
439 .variable-or-property {
440   transition: background 1s ease-in-out;
441   color: #FF9F00;
442 }
443
444 .variable-or-property[changed] {
445   background: rgba(255, 207, 0, 0.3);
446   transition-duration: 0.4s;
447 }
448
449 .variable-or-property > .title > .value {
450   -moz-padding-start: 6px;
451   -moz-padding-end: 4px;
452 }
453
454 .variable-or-property:focus > .title {
455   background-color: #008484;
456   color: #000000;
457   border-radius: 5px;
458 }
459
460 .variable-or-property[editable] > .title > .value {
461   cursor: text;
462 }
463
464 .variable-or-property:not([non-header]) > .variables-view-element-details {
465   -moz-margin-start: 10px;
466 }
467
468 /* Custom variables and properties traits */
469
470 .variables-view-variable {
471   -moz-margin-start: 1px;
472   -moz-margin-end: 1px;
473   border-bottom: 1px solid #A09090;
474 }
475
476 .variables-view-variable > .title > .name {
477   font-weight: 600;
478 }
479
480 .variables-view-variable:not(:focus) > .title > .name {
481   color: #FF9F00;
482 }
483
484 .variables-view-property:not(:focus) > .title > .name {
485   color: #E7ADE7;
486 }
487
488 /* Token value colors */
489
490 .variable-or-property:not(:focus) > .title > .token-undefined {
491   color: #8050B0;
492 }
493
494 .variable-or-property:not(:focus) > .title > .token-null {
495   color: #008484;
496 }
497
498 .variable-or-property:not(:focus) > .title > .token-boolean {
499   color: #FFCF00;
500 }
501
502 .variable-or-property:not(:focus) > .title > .token-number {
503   color: #E7ADE7;
504 }
505
506 .variable-or-property:not(:focus) > .title > .token-string {
507   color: #9C9CFF;
508 }
509
510 .variable-or-property:not(:focus) > .title > .token-other {
511   color: #FF9F00;
512 }
513
514 /* Non enumerable, configurable and writable variables and properties */
515
516 .variable-or-property[proto] > .title > .name,
517 .variable-or-property[non-enumerable]:not([self]):not([exception]) > .title > .name {
518   opacity: 0.5;
519 }
520
521 .variable-or-property[non-configurable] > .title > .name {
522   border-bottom: 1px dashed #9C9CFF;
523 }
524
525 .variable-or-property[non-configurable][non-writable] > .title > .name {
526   border-bottom: 1px dashed #FF0000;
527 }
528
529 .variable-or-property[safe-getter] > .title > .name {
530   border-bottom: 1px dashed #A09090;
531 }
532
533 .variable-or-property[non-writable] > .title:after {
534   content: " ";
535   display: inline-block;
536   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
537   width: 16px;
538   height: 16px;
539   opacity: 0.5;
540 }
541
542 @media (min-resolution: 2dppx) {
543   .variable-or-property[non-writable] > .title:after {
544     background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
545     background-size: 32px;
546   }
547 }
548
549 .variable-or-property[exception]:not(:focus) > .title > .name {
550   color: #FF0000;
551 }
552
553 /* Variables and properties tooltips */
554
555 .variable-or-property > tooltip > label {
556   margin: 0 2px 0 2px;
557 }
558
559 .variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
560 .variable-or-property[non-configurable] > tooltip > label[value=configurable],
561 .variable-or-property[non-writable] > tooltip > label[value=writable] {
562   text-decoration: line-through;
563 }
564
565 .variable-or-property:not([safe-getter]) > tooltip > label[value=native-getter] {
566   display: none;
567 }
568
569 /* Variables and properties editing */
570
571 .variables-view-delete {
572   list-style-image: url("chrome://global/skin/icons/close.png");
573   -moz-image-region: rect(0, 16px, 16px, 0);
574   opacity: 0;
575 }
576
577 .variables-view-delete:hover {
578   opacity: 1;
579 }
580
581 *:hover > .title > .variables-view-delete:not(:hover),
582 *:focus > .title > .variables-view-delete:not(:hover) {
583   opacity: 0.5;
584   transition: opacity 0.2s ease-in-out;
585 }
586
587 .variables-view-delete > .toolbarbutton-text {
588   display: none;
589 }
590
591 .variables-view-edit {
592   background: url("chrome://browser/skin/tabview/edit-light.png") center no-repeat;
593   width: 20px;
594   height: 16px;
595   cursor: pointer;
596 }
597
598 .variables-view-throbber {
599   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
600   width: 16px;
601   height: 16px;
602 }
603
604 .element-value-input {
605   -moz-margin-start: 4px !important;
606   -moz-margin-end: 2px !important;
607 }
608
609 .element-name-input {
610   -moz-margin-start: -2px !important;
611   -moz-margin-end: 2px !important;
612   color: #E7ADE7;
613   font-weight: 600;
614 }
615
616 .element-value-input,
617 .element-name-input {
618   border: 1px solid #008484 !important;
619 }
620
621 /* Variables and properties searching */
622
623 .variables-view-searchinput {
624   min-height: 24px;
625 }
626
627 .variable-or-property[non-match] {
628   border: none;
629   margin: 0;
630 }
631
632 /* Expand/collapse arrow */
633
634 .arrow {
635   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
636   width: 9px;
637   height: 20px;
638   -moz-margin-start: 5px;
639   -moz-margin-end: 5px;
640 }
641
642 .variables-view-scope > .title > .arrow {
643   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
644 }
645
646 .arrow[open] {
647   background-image: url("chrome://global/skin/tree/twisty-open.png");
648 }
649
650 .variables-view-scope > .title > .arrow[open] {
651   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
652 }
653
654 .arrow[invisible] {
655   visibility: hidden;
656 }