fifth part of syncing LCARStrek with Firefox 34 windows theme changes
[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 /* === BEGIN widgets.inc.css === */
7
8 /* Generic pane helpers */
9
10 .generic-toggled-side-pane {
11   -moz-margin-start: 0px !important;
12   /* Unfortunately, transitions don't work properly with locale-aware properties,
13      so both the left and right margins are set via js, while the start margin
14      is always overridden here. */
15 }
16
17 .generic-toggled-side-pane[animated] {
18   transition: margin 0.25s ease-in-out;
19 }
20
21 /* Responsive container */
22
23 .devtools-responsive-container {
24   -moz-box-orient: horizontal;
25 }
26
27 .devtools-main-content {
28   min-width: 50px;
29 }
30
31 .devtools-main-content,
32 .devtools-sidebar-tabs {
33   /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
34   position: relative;
35 }
36
37 @media (max-width: 700px) {
38   .devtools-responsive-container {
39     -moz-box-orient: vertical;
40   }
41
42   .devtools-responsive-container > .devtools-side-splitter {
43     border: 0;
44     margin: 0;
45     min-height: 3px;
46     height: 3px;
47     margin-bottom: -3px;
48     /* In some edge case the cursor is not changed to n-resize */
49     cursor: n-resize;
50   }
51
52   .devtools-responsive-container > .devtools-sidebar-tabs {
53     min-height: 35vh;
54     max-height: 75vh;
55   }
56 }
57
58 /* BreacrumbsWidget */
59
60 .breadcrumbs-widget-container {
61   -moz-margin-start: 2px;
62   -moz-margin-start: 2px;
63   max-height: 24px; /* Set max-height for proper sizing on linux */
64   height: 24px; /* Set height to prevent starting small waiting for content */
65 }
66
67 .scrollbutton-up,
68 .scrollbutton-down {
69   background: transparent;
70   box-shadow: none;
71   border: none;
72   margin: 0;
73   padding: 0;
74 }
75
76 .scrollbutton-up {
77   -moz-margin-end: 1px;
78 }
79
80 .scrollbutton-down {
81   -moz-margin-end: 0;
82 }
83
84 .scrollbutton-up > .toolbarbutton-icon,
85 .scrollbutton-down > .toolbarbutton-icon {
86   /* margin: 0 5px; */
87 }
88
89 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
90 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
91 }
92
93 .scrollbutton-up[disabled] > .toolbarbutton-icon,
94 .scrollbutton-down[disabled] > .toolbarbutton-icon {
95 }
96
97 .scrollbutton-up:-moz-locale-dir(ltr) {
98   border-top-right-radius: 0;
99   border-bottom-right-radius: 0;
100 }
101
102 .scrollbutton-down:-moz-locale-dir(ltr) {
103   border-top-left-radius: 0;
104   border-bottom-left-radius: 0;
105 }
106
107 .scrollbutton-up:-moz-locale-dir(rtl) {
108   border-top-left-radius: 0;
109   border-bottom-left-radius: 0;
110 }
111
112 .scrollbutton-down:-moz-locale-dir(rtl) {
113   border-top-right-radius: 0;
114   border-bottom-right-radius: 0;
115 }
116
117 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
118 /*
119 .scrollbutton-up:-moz-locale-dir(ltr),
120 .scrollbutton-down:-moz-locale-dir(rtl) {
121   border-right: solid 1px rgba(255, 255, 255, .1);
122   border-left: solid 1px transparent;
123   box-shadow: 3px 0px 3px -3px #181d20;
124 }
125
126 .scrollbutton-down:-moz-locale-dir(ltr),
127 .scrollbutton-up:-moz-locale-dir(rtl) {
128   border-right: solid 1px transparent;
129   border-left: solid 1px rgba(255, 255, 255, .1);
130   box-shadow: -3px 0px 3px -3px #181d20;
131 }
132
133 .scrollbutton-up[disabled],
134 .scrollbutton-down[disabled] {
135   box-shadow: none;
136   border-color: transparent;
137 }
138 */
139
140 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
141 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
142 /*  transform: scaleX(-1); */
143 }
144
145 /* The breadcrumb separator elements are used as background images with
146  * -moz-element, so we position them offscreen since we don't care about
147  * seeing the original elements.
148  */
149 .breadcrumb-separator-container {
150   position: fixed;
151   top: -1000px;
152   left: -1000px;
153 }
154
155 #breadcrumb-separator-before,
156 #breadcrumb-separator-after,
157 #breadcrumb-separator-normal {
158   width: 12px;
159   height: 24px;
160   overflow: hidden;
161 }
162
163 #breadcrumb-separator-before,
164 #breadcrumb-separator-after:after {
165   background: #008484; /* Select Highlight Blue */
166 }
167
168 #breadcrumb-separator-after,
169 #breadcrumb-separator-before:after {
170   background: #000000; /* Toolbars */
171 }
172
173 /* This chevron arrow cannot be replicated easily in CSS, so we are using
174  * a background image for it (still keeping it in a separate element so
175  * we can handle RTL support with a CSS transform).
176  */
177 #breadcrumb-separator-normal {
178   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
179   background-size: 12px 24px;
180 }
181
182 /* Fake a triangle by rotating a rectangle inside the elements */
183 #breadcrumb-separator-before:after,
184 #breadcrumb-separator-after:after {
185   content: "";
186   display: block;
187   width: 25px;
188   height: 24px;
189   transform: translateX(-18px) rotate(45deg);
190   box-sizing: border-box;
191 }
192
193 .breadcrumbs-widget-item {
194   background-color: #000000;
195   min-height: 24px;
196   min-width: 65px;
197   margin: 0;
198   padding: 0 8px 0 20px;
199   border: none;
200   border-radius: 0;
201   outline: none;
202   color: #FF9F00;
203 }
204
205 .breadcrumbs-widget-item:hover {
206   background-color: #FFCF00;
207   color: #000000;
208 }
209
210 .breadcrumbs-widget-item[checked]:not(:hover) {
211   background-color: #008484;
212   color: #000000;
213 }
214
215 .breadcrumbs-widget-item[siblings-menu-open],
216 .breadcrumbs-widget-item:active {
217   background-color: #FF9F00;
218   color: #000000;
219 }
220
221 .breadcrumbs-widget-item > .button-box {
222   border: none;
223   padding-top: 0;
224   padding-bottom: 0;
225 }
226
227 .breadcrumbs-widget-item:not([checked]) {
228   background-image: -moz-element(#breadcrumb-separator-normal);
229   background-repeat: no-repeat;
230   background-position: center left;
231 }
232
233 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
234   background-image: -moz-element(#breadcrumb-separator-after);
235   background-repeat: no-repeat;
236   background-position: 0 0;
237 }
238
239 .breadcrumbs-widget-item[checked] {
240   background-image: -moz-element(#breadcrumb-separator-before);
241   background-repeat: no-repeat;
242   background-position: 0 0;
243   background-color: #008484; /* Select Highlight Blue */
244 }
245
246 .breadcrumbs-widget-item:first-child {
247   background-image: none;
248 }
249
250 /* RTL support: move the images that were on the left to the right,
251  * and move images that were on the right to the left.
252  */
253 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
254   padding: 0 20px 0 8px;
255 }
256
257 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
258 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
259   background-position: center right;
260 }
261
262 #breadcrumb-separator-before:-moz-locale-dir(rtl),
263 #breadcrumb-separator-after:-moz-locale-dir(rtl),
264 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
265   transform: scaleX(-1);
266 }
267
268 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
269 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
270   transform: translateX(-5px) rotate(45deg);
271 }
272
273 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
274 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
275 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
276 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
277   color: #FF9F00; /* Foreground (Text) - Light */
278 }
279
280 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
281 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
282 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
283 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
284   color: #000000 !important;
285 }
286
287 .breadcrumbs-widget-item {
288   color: #FFCF00; /* Foreground (Text) - Light */
289 }
290
291 .breadcrumbs-widget-item-id {
292   color: #A09090; /* Foreground (Text) - Grey */
293 }
294
295 .breadcrumbs-widget-item-classes {
296   color: #FF9F00; /* Content (Text) - Light */
297 }
298
299 .breadcrumbs-widget-item-pseudo-classes {
300   color: #FFCF00; /* Light Orange */
301 }
302
303 /* SimpleListWidget */
304
305 .simple-list-widget-container {
306   /* Hack: force hardware acceleration */
307   transform: translateZ(1px);
308 }
309
310 .simple-list-widget-item.selected {
311   background-color: #008484; /* Select Highlight Blue */
312   color: #FFCF00; /* Light foreground text */
313 }
314
315 .simple-list-widget-item:not(.selected):hover {
316   background-color: #FFCF00;
317   color: #FFCF00;
318 }
319
320 .simple-list-widget-perma-text,
321 .simple-list-widget-empty-text {
322   color: #8050B0;
323   padding: 4px 8px;
324 }
325
326 /* FastListWidget */
327
328 .fast-list-widget-container {
329   /* Hack: force hardware acceleration */
330   transform: translateZ(1px);
331 }
332
333 /* dark/light theme */
334 .fast-list-widget-empty-text {
335   padding: 12px;
336   font-weight: 600;
337   color: #8050B0;
338 }
339
340 /* SideMenuWidget */
341
342 /* SideMenuWidget container */
343
344 .side-menu-widget-container {
345   /* Hack: force hardware acceleration */
346   transform: translateZ(1px);
347
348   background-color: #000000;
349   color: #FF9F00;
350 }
351
352 .side-menu-widget-container:-moz-locale-dir(ltr),
353 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
354 }
355
356 .side-menu-widget-container:-moz-locale-dir(rtl),
357 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
358 }
359
360 .side-menu-widget-group {
361   /* To allow visibility of the dark margin shadow. */
362 /*  -moz-margin-end: 1px; */
363 }
364
365 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
366   /* To compensate for the arrow image's dark margin. */
367 /*  -moz-margin-end: -1px; */
368 }
369
370 /* SideMenuWidget groups */
371
372 .side-menu-widget-group-title {
373   padding: 4px;
374
375   background-color: #A09090;
376   color: #000000;
377 }
378
379 /* SideMenuWidget items */
380
381 .side-menu-widget-item {
382   border-top: 1px solid #9C9CFF;
383   /* To compensate for the top and bottom borders */
384   margin-top: -1px;
385   margin-bottom: -1px;
386   background-clip: padding-box;
387 }
388
389 .side-menu-widget-item:last-of-type {
390   border-bottom: 1px solid #9C9CFF;
391 }
392
393 .side-menu-widget-item.selected {
394   background-color: #008484 !important;
395   color: #000000;
396 }
397
398 .side-menu-widget-item-arrow {
399   -moz-margin-start: -7px;
400   width: 7px; /* The image's width is 7 pixels */
401   /* Cover the border of the side-menu-widget-item */
402   margin-top: -1px;
403   margin-bottom: -1px;
404 }
405
406 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
407   background-size: auto, 1px 100%;
408   background-repeat: no-repeat;
409 }
410
411 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
412   background-position: center right;
413 }
414
415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
416   background-position: center left;
417 }
418
419 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
420   background-image: url("itemArrow-ltr.svg");
421 }
422
423 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
424   background-image: url("itemArrow-rtl.svg");
425 }
426
427 /* SideMenuWidget items contents */
428
429 .side-menu-widget-item-contents {
430   padding: 4px;
431   /* To avoid having content overlapping the arrow image. */
432   -moz-padding-end: 8px;
433 }
434
435 .side-menu-widget-item-other {
436   /* To avoid having content overlapping the arrow image. */
437   -moz-padding-end: 8px;
438   /* To compensate for the .side-menu-widget-item-contents padding. */
439   -moz-margin-start: -4px;
440   -moz-margin-end: -8px;
441
442   background-color: #000000;
443 }
444
445 .side-menu-widget-item-other.selected {
446   background-color: #008484;
447   color: #000000;
448 }
449
450 .side-menu-widget-item-other:first-of-type {
451   margin-top: 4px;
452 /*  border-top-left-radius: 4px; */
453 }
454
455 .side-menu-widget-item-other:last-of-type {
456   margin-bottom: -4px;
457 }
458
459 .side-menu-widget-item-other:not(.selected) > label {
460   color: #9C9CFF;
461 }
462
463 /* SideMenuWidget checkboxes */
464
465 .side-menu-widget-group-checkbox {
466   margin: 0;
467   -moz-margin-end: 4px;
468 }
469
470 .side-menu-widget-item-checkbox {
471   margin: 0;
472   -moz-margin-start: 4px;
473   -moz-margin-end: -4px;
474 }
475
476 /* SideMenuWidget misc */
477
478 .side-menu-widget-empty-text {
479   padding: 12px;
480
481   background-color: #000000;
482   font-weight: 600;
483   color: #A09090;
484 }
485
486 /* VariablesView */
487
488 .variables-view-container:not([empty]) {
489   /* Hack: force hardware acceleration */
490   transform: translateZ(1px);
491 }
492
493 .variables-view-empty-notice {
494   color: #A09090;
495   padding: 2px;
496 }
497
498 .variables-view-scope:focus > .title,
499 .theme-dark .variable-or-property:focus > .title {
500   background-color: #008484; /* Selection colors */
501   color: #FFCF00;
502 }
503
504 .variables-view-scope > .title {
505   background-color: #A09090;
506   color: #000000;
507 }
508
509 /* Generic variables traits */
510
511 .variables-view-variable:not(:last-child) {
512   border-bottom: 1px solid #A09090;
513 }
514
515 .variables-view-variable > .title > .name {
516   font-weight: 600;
517 }
518
519 /* Generic variables *and* properties traits */
520
521 .variable-or-property:focus > .title > label {
522   color: inherit !important;
523 }
524
525 .variables-view-container .theme-twisty {
526   margin: 2px;
527 }
528
529 .variable-or-property > .title > .theme-twisty {
530   -moz-margin-start: 5px;
531 }
532
533 .variable-or-property:not([untitled]) > .variables-view-element-details {
534   -moz-margin-start: 7px;
535 }
536
537 /* Traits applied when variables or properties are changed or overridden */
538
539 .variable-or-property:not([overridden]) {
540   transition: background 1s ease-in-out, color 1s ease-in-out;
541 }
542
543 .variable-or-property:not([overridden])[changed] {
544   color: #000000;
545   transition-duration: .4s;
546 }
547
548 .variable-or-property[overridden] {
549   background: rgba(160,144,144,0.0.5);
550 }
551
552 .variable-or-property[overridden] .title > label {
553   /* Cross out the title for this variable and all child properties. */
554   font-style: italic;
555   text-decoration: line-through;
556   border-bottom: none !important;
557   color: #A09090;
558   opacity: 0.7;
559 }
560
561 /* Traits applied when variables or properties are editable */
562
563 .variable-or-property[editable] > .title > .value {
564   cursor: text;
565 }
566
567 .variable-or-property[overridden] .title > .value {
568   /* Disallow editing this variable and all child properties. */
569   pointer-events: none;
570 }
571
572 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
573  * variables and properties */
574
575 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
576   opacity: 0.6;
577 }
578
579 .variable-or-property-non-writable-icon {
580   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
581   background-size: cover;
582   width: 16px;
583   height: 16px;
584   opacity: 0.5;
585 }
586
587 @media (min-resolution: 2dppx) {
588   .variable-or-property-non-writable-icon > .title:after {
589     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
590   }
591 }
592
593 .variable-or-property-frozen-label,
594 .variable-or-property-sealed-label,
595 .variable-or-property-non-extensible-label {
596   height: 16px;
597   -moz-padding-end: 4px;
598 }
599
600 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
601 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
602 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
603   color: #A09090;
604 }
605
606 /* Aligned values */
607
608 .variables-view-container[aligned-values] .title > .separator {
609   -moz-box-flex: 1;
610 }
611
612 .variables-view-container[aligned-values] .title > .value {
613   -moz-box-flex: 0;
614   width: 70vw;
615 }
616
617 .variables-view-container[aligned-values] .title > .element-value-input {
618   width: calc(70vw - 10px);
619 }
620
621 /* Actions first */
622
623 .variables-view-open-inspector {
624   -moz-box-ordinal-group: 1;
625 }
626
627 .variables-view-edit,
628 .variables-view-add-property {
629   -moz-box-ordinal-group: 2;
630 }
631
632 .variable-or-property-frozen-label,
633 .variable-or-property-sealed-label,
634 .variable-or-property-non-extensible-label,
635 .variable-or-property-non-writable-icon {
636   -moz-box-ordinal-group: 3;
637 }
638
639 .variables-view-delete {
640   -moz-box-ordinal-group: 4;
641 }
642
643 .variables-view-container[actions-first] .variables-view-delete,
644 .variables-view-container[actions-first] .variables-view-add-property,
645 .variables-view-container[actions-first] .variables-view-open-inspector {
646   -moz-box-ordinal-group: 0;
647 }
648
649 .variables-view-container[actions-first] [invisible] {
650   visibility: hidden;
651 }
652
653 /* Variables and properties tooltips */
654
655 .variable-or-property > tooltip > label {
656   margin: 0 2px 0 2px;
657 }
658
659 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
660 .variable-or-property[non-configurable] > tooltip > label.configurable,
661 .variable-or-property[non-writable] > tooltip > label.writable
662 .variable-or-property[non-extensible] > tooltip > label.extensible {
663   color: #A09090;
664   text-decoration: line-through;
665 }
666
667 .variable-or-property[overridden] > tooltip > label.overridden {
668   -moz-padding-start: 4px;
669   -moz-border-start: 1px dotted #9C9CFF;
670 }
671
672 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
673   -moz-padding-start: 4px;
674   -moz-border-start: 1px dotted #9C9CFF;
675   color: #008484;
676 }
677
678 /* Variables and properties editing */
679
680 .variables-view-delete {
681   background: url("chrome://browser/skin/devtools/vview-delete.png");
682   background-size: cover;
683   width: 16px;
684   height: 16px;
685 }
686
687 @media (min-resolution: 2dppx) {
688   .variables-view-delete {
689     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
690   }
691 }
692
693 .variables-view-delete:hover {
694   background-position: 32px;
695 }
696
697 .variables-view-delete:active {
698   background-position: 16px;
699 }
700
701 .variable-or-property:focus > .title > .variables-view-delete {
702 /*  background-position: 0px; */
703 }
704
705 .variables-view-edit {
706   background: url("chrome://browser/skin/devtools/vview-edit.png");
707   background-size: cover;
708   width: 16px;
709   height: 16px;
710   cursor: pointer;
711 }
712
713 @media (min-resolution: 2dppx) {
714   .variables-view-edit {
715     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
716   }
717 }
718
719 .variables-view-edit:hover {
720   background-position: 32px;
721 }
722
723 .variables-view-edit:active {
724   background-position: 16px;
725 }
726
727 .variable-or-property:focus > .title > .variables-view-edit {
728 /*  background-position: 0px; */
729 }
730
731 .variables-view-open-inspector {
732   background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
733   background-size: cover;
734   width: 16px;
735   height: 16px;
736   cursor: pointer;
737 }
738
739 .variables-view-open-inspector:hover {
740   background-position: 32px;
741 }
742
743 .variables-view-open-inspector:active {
744   background-position: 16px;
745 }
746
747 .variable-or-property:focus > .title > .variables-view-open-inspector {
748 /*  background-position: 0px; */
749 }
750
751 /* Variables and properties input boxes */
752
753 .variable-or-property > .title > .separator + .element-value-input {
754   -moz-margin-start: -2px !important;
755   -moz-margin-end: 2px !important;
756 }
757
758 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
759   -moz-margin-start: 4px !important;
760   -moz-margin-end: 2px !important;
761 }
762
763 .element-name-input {
764   -moz-margin-start: -2px !important;
765   -moz-margin-end: 2px !important;
766   font-weight: 600;
767 }
768
769 .element-value-input,
770 .element-name-input {
771   border: 1px solid #008484 !important;
772   color: inherit;
773 }
774
775 /* Variables and properties searching */
776
777 .variable-or-property[unmatched] {
778   border: none;
779   margin: 0;
780 }
781
782 /* Canvas graphs */
783
784 .graph-widget-container {
785   position: relative;
786 }
787
788 .graph-widget-canvas {
789   width: 100%;
790   height: 100%;
791 }
792
793 .graph-widget-canvas[input=hovering-background] {
794   cursor: text;
795 }
796
797 .graph-widget-canvas[input=hovering-region] {
798   cursor: pointer;
799 }
800
801 .graph-widget-canvas[input=hovering-selection-start-boundary],
802 .graph-widget-canvas[input=hovering-selection-end-boundary],
803 .graph-widget-canvas[input=adjusting-selection-boundary] {
804   cursor: col-resize;
805 }
806
807 .graph-widget-canvas[input=hovering-selection-contents] {
808   cursor: grab;
809 }
810
811 .graph-widget-canvas[input=dragging-selection-contents] {
812   cursor: grabbing;
813 }
814
815 /* Line graph widget */
816
817 .line-graph-widget-canvas {
818   background: #000000;
819 }
820
821 .line-graph-widget-gutter {
822   position: absolute;
823   background: #000000;
824   width: 10px;
825   height: 100%;
826   top: 0;
827   left: 0;
828   border-right: 1px solid #9C9CFF;
829   pointer-events: none;
830 }
831
832 .line-graph-widget-gutter-line {
833   position: absolute;
834   width: 100%;
835   border-top: 1px solid;
836   transform: translateY(-1px);
837 }
838
839 .line-graph-widget-gutter-line[type=maximum] {
840   border-color: #008484;
841 }
842
843 .line-graph-widget-gutter-line[type=minimum] {
844   border-color: #FF0000;
845 }
846
847 .line-graph-widget-gutter-line[type=average] {
848   border-color: #FF9F00;
849 }
850
851 .line-graph-widget-tooltip {
852   position: absolute;
853   background: #404000;
854   border-radius: 2px;
855   line-height: 15px;
856   -moz-padding-start: 6px;
857   -moz-padding-end: 6px;
858   transform: translateY(-50%);
859   font-size: 80%;
860   z-index: 1;
861   pointer-events: none;
862 }
863
864 .line-graph-widget-tooltip::before {
865   content: "";
866   position: absolute;
867   border-top: 3px solid transparent;
868   border-bottom: 3px solid transparent;
869   top: calc(50% - 3px);
870 }
871
872 .line-graph-widget-tooltip[arrow=start]::before {
873   -moz-border-end: 3px solid #9C9CFF;
874   left: -3px;
875 }
876
877 .line-graph-widget-tooltip[arrow=end]::before {
878   -moz-border-start: 3px solid #9C9CFF;
879   right: -3px;
880 }
881
882 .line-graph-widget-tooltip[type=maximum] {
883   left: calc(10px + 6px);
884 }
885
886 .line-graph-widget-tooltip[type=minimum] {
887   left: calc(10px + 6px);
888 }
889
890 .line-graph-widget-tooltip[type=average] {
891   right: 6px;
892 }
893
894 .line-graph-widget-tooltip > [text=info] {
895   color: #A09090;
896 }
897
898 .line-graph-widget-tooltip > [text=value] {
899   -moz-margin-start: 3px;
900 }
901
902 .line-graph-widget-tooltip > [text=metric] {
903   -moz-margin-start: 1px;
904   color: #9C9CFF;
905 }
906
907 .line-graph-widget-tooltip > [text=value],
908 .line-graph-widget-tooltip > [text=metric] {
909 /*  text-shadow: 1px  0px rgba(255,255,255,0.6),
910               -1px  0px rgba(255,255,255,0.6),
911                0px -1px rgba(255,255,255,0.6),
912                0px  1px rgba(255,255,255,0.6);*/
913 }
914
915 .line-graph-widget-tooltip[type=maximum] > [text=value] {
916   color: #008484;
917 }
918
919 .line-graph-widget-tooltip[type=minimum] > [text=value] {
920   color: #FF0000;
921 }
922
923 .line-graph-widget-tooltip[type=average] > [text=value] {
924   color: #FF9F00;
925 }
926
927 /* Bar graph widget */
928
929 .bar-graph-widget-canvas {
930   background: #000000;
931 }
932
933 .bar-graph-widget-legend {
934   position: absolute;
935   top: 4px;
936   left: 8px;
937   color: #A09090;
938   font-size: 80%;
939   pointer-events: none;
940 }
941
942 .bar-graph-widget-legend-item {
943   float: left;
944  -moz-margin-end: 8px;
945 }
946
947 .bar-graph-widget-legend-item > [view="color"],
948 .bar-graph-widget-legend-item > [view="label"] {
949   vertical-align: middle;
950 }
951
952 .bar-graph-widget-legend-item > [view="color"] {
953   display: inline-block;
954   width: 8px;
955   height: 8px;
956   border: 1px solid #9C9CFF;
957   border-radius: 1px;
958   -moz-margin-end: 4px;
959   pointer-events: none;
960 }
961
962 .bar-graph-widget-legend-item > [view="label"] {
963 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
964               -1px  0px rgba(255,255,255,0.8),
965                0px -1px rgba(255,255,255,0.8),
966                0px  1px rgba(255,255,255,0.8);*/
967 }
968
969 /* Charts */
970
971 .generic-chart-container {
972   /* Hack: force hardware acceleration */
973   transform: translateZ(1px);
974 }
975
976 .generic-chart-container {
977   color: #A09090; /* Light foreground text */
978 }
979
980 .chart-colored-blob {
981   fill: #9C9CFF; /* Light content text */
982   background: #9C9CFF;
983 }
984
985 /* Charts: Pie */
986
987 .pie-chart-slice {
988   stroke-width: 1px;
989   cursor: pointer;
990 }
991
992 .pie-chart-slice {
993   stroke: #A09090;
994 }
995
996 .pie-chart-slice[largest] {
997   stroke-width: 2px;
998   stroke: #9C9CFF;
999 }
1000
1001 .pie-chart-label {
1002   text-anchor: middle;
1003   dominant-baseline: middle;
1004   pointer-events: none;
1005 }
1006
1007 .pie-chart-label {
1008   fill: #000;
1009 }
1010
1011 .pie-chart-container[slices="1"] > .pie-chart-slice {
1012   stroke-width: 0px;
1013 }
1014
1015 .pie-chart-slice,
1016 .pie-chart-label {
1017   transition: all 0.1s ease-out;
1018 }
1019
1020 .pie-chart-slice:not(:hover):not([focused]),
1021 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1022   transform: none !important;
1023 }
1024
1025 /* Charts: Table */
1026
1027 .table-chart-title {
1028   padding-bottom: 10px;
1029   font-size: 120%;
1030   font-weight: 600;
1031 }
1032
1033 .table-chart-row {
1034   margin-top: 1px;
1035   cursor: pointer;
1036 }
1037
1038 .table-chart-grid:hover > .table-chart-row {
1039   transition: opacity 0.1s ease-in-out;
1040 }
1041
1042 .table-chart-grid:not(:hover) > .table-chart-row {
1043   transition: opacity 0.2s ease-in-out;
1044 }
1045
1046 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1047 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1048   opacity: 0.4;
1049 }
1050
1051 .table-chart-row-box {
1052   width: 8px;
1053   height: 1.5em;
1054   -moz-margin-end: 10px;
1055 }
1056
1057 .table-chart-row-label {
1058   width: 8em;
1059   -moz-padding-end: 6px;
1060   cursor: inherit;
1061 }
1062
1063 .table-chart-totals {
1064   margin-top: 8px;
1065   padding-top: 6px;
1066 }
1067
1068 .table-chart-totals {
1069   border-top: 1px solid #A09090; /* Grey foreground text */
1070 }
1071
1072 .table-chart-summary-label {
1073   font-weight: 600;
1074   padding: 1px 0px;
1075 }
1076
1077 .table-chart-summary-label {
1078   color: #A09090; /* Light foreground text */
1079 }
1080
1081 /* Table Widget */
1082
1083 /* Table body */
1084
1085 .table-widget-body > .devtools-side-splitter {
1086   border: none;
1087 }
1088
1089 .table-widget-body {
1090   overflow: auto;
1091 }
1092
1093 .table-widget-body {
1094   background: #000000; /* Background-Sidebar */
1095 }
1096
1097 .table-widget-body:-moz-locale-dir(ltr) {
1098 /*  box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1099 }
1100
1101 .table-widget-body:-moz-locale-dir(rtl) {
1102 /*  box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1103 }
1104
1105 .table-widget-body:-moz-locale-dir(ltr) {
1106 /*  box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1107 }
1108
1109 .table-widget-body:-moz-locale-dir(rtl) {
1110 /*  box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1111 }
1112
1113 /* Column Headers */
1114
1115 .table-widget-column-header,
1116 .table-widget-cell {
1117   -moz-border-end: 1px solid #A09090;
1118 }
1119
1120 /* Table widget column header colors are taken from netmonitor.inc.css to match
1121    the look of both the tables. This needs to be updated along with netmonitor
1122    header colors in bug 951714 */
1123
1124 .table-widget-column-header {
1125   background: rgba(0,0,0,0);
1126   position: sticky;
1127   top: 0;
1128   min-height: 32px;
1129   width: 100%;
1130   border: none;
1131   padding: 8px 0 0 !important;
1132   color: inherit;
1133   text-align: center;
1134   font-weight: inherit !important;
1135   transition: background-color 0.1s ease-in-out;
1136 }
1137
1138 .table-widget-column-header:hover {
1139   background: #FFCF00;
1140 }
1141
1142 .table-widget-column-header:hover:active {
1143   background: #FF9F00;
1144 }
1145
1146 .table-widget-column-header:not(:active)[sorted] {
1147   background: #008484;
1148 }
1149
1150 .table-widget-column-header:not(:active)[sorted=ascending] {
1151   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1152   background-size: 100% 1px;
1153   background-repeat: no-repeat;
1154 }
1155
1156 .table-widget-column-header:not(:active)[sorted=descending] {
1157   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1158   background-size: 100% 1px;
1159   background-repeat: no-repeat;
1160   background-position: bottom;
1161 }
1162
1163 /* Cells */
1164
1165 .table-widget-cell {
1166   width: 100%;
1167   margin: -1px 0 !important;
1168   padding: 3px 4px;
1169   background-clip: padding-box;
1170   min-width: 100px;
1171   -moz-user-focus: normal;
1172 }
1173
1174 .table-widget-cell {
1175   border-top: 1px solid #A09090;
1176   border-bottom: 1px solid #A09090;
1177   color: #FF9F00; /* Light foreground text */
1178 }
1179
1180 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1181 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1182 .table-widget-cell:not(.theme-selected)[odd] {
1183   background: #404000;
1184 }
1185
1186 .table-widget-cell:last-of-type {
1187 /*  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1188 }
1189
1190 .table-widget-cell.flash-out {
1191   animation: flash-out 0.5s ease-in;
1192 }
1193
1194 @keyframes flash-out {
1195   to {
1196     background: #795900;
1197   }
1198 }
1199
1200 /* Empty text and initial text */
1201
1202 .table-widget-empty-text {
1203   display: none;
1204   text-align: center;
1205   font-size: large;
1206   margin-top: -20px !important;
1207 }
1208
1209 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1210 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1211   display: block;
1212 }
1213
1214 /* Tree Widget */
1215
1216 .tree-widget-container {
1217   padding: 0;
1218   margin: 0;
1219   width: 100%;
1220   height: 100%;
1221   list-style: none;
1222   overflow: hidden;
1223   -moz-margin-end: 40px;
1224 }
1225
1226 .tree-widget-container:-moz-focusring,
1227 .tree-widget-container *:-moz-focusring {
1228   outline-style: none;
1229 }
1230
1231 .tree-widget-empty-text {
1232   padding: 10px 20px;
1233   font-size: medium;
1234   background: transparent;
1235   pointer-events: none;
1236 }
1237
1238 /* Tree Item */
1239
1240 .tree-widget-container .tree-widget-item {
1241   padding: 2px 0px 4px;
1242   /* OSX has line-height 14px by default, which causes weird alignment issues
1243    * because of 20px high icons. thus making line-height consistent with that of
1244    * windows.
1245    */
1246   line-height: 17px !important;
1247   display: inline-block;
1248   width: 100%;
1249   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1250                            breaking in multiple lines */
1251 }
1252
1253 .tree-widget-container .tree-widget-children {
1254   margin: 0;
1255   padding: 0;
1256   list-style: none;
1257 }
1258
1259 .tree-widget-item[level="1"] {
1260   font-weight: 800;
1261 }
1262
1263 /* Twisties */
1264 .tree-widget-item:before {
1265   content: "";
1266   width: 14px;
1267   height: 14px;
1268   float: left;
1269   margin: 3px 2px -3px;
1270   background-repeat: no-repeat;
1271   background-image: url("chrome://browser/skin/devtools/controls.png");
1272   background-size: 56px 28px;
1273   cursor: pointer;
1274   background-position: -28px -14px;
1275 }
1276
1277 .tree-widget-item:-moz-locale-dir(rtl):before {
1278   float: right;
1279   transform: scaleX(-1);
1280 }
1281
1282 .theme-light .tree-widget-item:before {
1283   background-position: 0 -14px;
1284 }
1285
1286 .tree-widget-item[empty]:before {
1287   background: transparent;
1288 }
1289
1290 .tree-widget-item[expanded]:before {
1291   background-position: -42px -14px;
1292 }
1293
1294 .theme-light .tree-widget-item[expanded]:before {
1295   background-position: -14px -14px;
1296 }
1297
1298 .tree-widget-item + ul {
1299   overflow: hidden;
1300   animation: collapse-tree-item 0.2s;
1301   max-height: 0;
1302 }
1303
1304 .tree-widget-item[expanded] + ul {
1305   animation: expand-tree-item 0.3s;
1306   max-height: unset;
1307 }
1308
1309 @keyframes collapse-tree-item {
1310   from {
1311     max-height: 300px;
1312   }
1313   to {
1314     max-height: 0;
1315   }
1316 }
1317
1318 @keyframes expand-tree-item {
1319   from {
1320     max-height: 0;
1321   }
1322   to {
1323     max-height: 500px;
1324   }
1325 }
1326
1327 @media (min-resolution: 2dppx) {
1328   .tree-widget-item:before {
1329     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1330   }
1331 }
1332
1333 /* Indentation of child items in the tree */
1334
1335 /* For level > 6 */
1336 .tree-widget-item[level] + ul > li > .tree-widget-item {
1337   -moz-padding-start: 98px;
1338 }
1339
1340 /* First level */
1341 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1342   -moz-padding-start: 14px;
1343 }
1344
1345 /* Second level */
1346 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1347   -moz-padding-start: 28px;
1348 }
1349
1350 /* Third level */
1351 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1352   -moz-padding-start: 42px;
1353 }
1354
1355 /* Fourth level */
1356 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1357   -moz-padding-start: 56px;
1358 }
1359
1360 /* Fifth level */
1361 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1362   -moz-padding-start: 70px;
1363 }
1364
1365 /* Sixth level */
1366 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1367   -moz-padding-start: 84px;
1368 }
1369
1370 /* Custom icons for certain tree items indicating the type of the item */
1371
1372 .tree-widget-item[type]:after {
1373   content: "";
1374   float: left;
1375   width: 16px;
1376   height: 17px;
1377   -moz-margin-end: 4px;
1378   background-repeat: no-repeat;
1379   background-size: 20px auto;
1380   filter: url('filters.svg#invert');
1381   background-position: 0 0;
1382   background-size: auto 20px;
1383 }
1384
1385 .tree-widget-item:-moz-locale-dir(rtl):after {
1386   float: right;
1387 }
1388
1389 .theme-dark .tree-widget-item[type]:after {
1390   filter: url('filters.svg#invert-white');
1391 }
1392
1393 .tree-widget-item[type="dir"]:after {
1394   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1395   background-position: 2px 0;
1396   background-size: auto 16px;
1397   width: 20px;
1398 }
1399
1400 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1401   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1402 }
1403
1404 .tree-widget-item[type="url"]:after {
1405   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1406   background-size: auto 18px;
1407   width: 18px;
1408 }
1409
1410 /* === BEGIN manifest-editor.inc.css === */
1411
1412 /* Manifest Editor overrides */
1413
1414 .variables-view-container.manifest-editor {
1415   background-color: #000000;
1416   padding: 20px 2px;
1417 }
1418
1419 .manifest-editor .variable-or-property:focus > .title {
1420 /*  background-color: #EDEDED;
1421   color: #000; */
1422   border-radius: 4px;
1423 }
1424
1425 .manifest-editor .variables-view-property > .title > .name {
1426 /*  color: #27406A; */
1427 }
1428
1429 .manifest-editor .variable-or-property > .title > label,
1430 .manifest-editor textbox {
1431   font-family: monospace;
1432 }
1433
1434 .manifest-editor .variable-or-property > .title > .token-string {
1435 /*  color: #54BC6A; */
1436   font-weight: bold;
1437 }
1438
1439 .manifest-editor .variable-or-property > .title > .token-boolean,
1440 .manifest-editor .variable-or-property > .title > .token-number {
1441 /*  color: #009BD4; */
1442   font-weight: bold;
1443 }
1444
1445 .manifest-editor .variable-or-property > .title > .token-undefined {
1446 /*  color: #bbb; */
1447 }
1448
1449 .manifest-editor .variable-or-property > .title > .token-null {
1450 /*  color: #999; */
1451 }
1452
1453 .manifest-editor .variable-or-property > .title > .token-other {
1454 /*  color: #333; */
1455 }
1456
1457 .manifest-editor .variables-view-variable {
1458   border-bottom: none;
1459 }
1460
1461 .manifest-editor .variables-view-delete,
1462 .manifest-editor .variables-view-delete:hover,
1463 .manifest-editor .variables-view-delete:active,
1464 .manifest-editor .variable-or-property:focus .variables-view-delete,
1465 .manifest-editor .variables-view-add-property,
1466 .manifest-editor .variables-view-add-property:hover,
1467 .manifest-editor .variables-view-add-property:active,
1468 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1469   list-style-image: none;
1470   -moz-image-region: initial;
1471 }
1472
1473 .manifest-editor .variables-view-delete::before,
1474 .manifest-editor .variables-view-add-property::before {
1475   width: 11px;
1476   height: 11px;
1477   content: "";
1478   display: inline-block;
1479   background-size: 11px auto;
1480 }
1481
1482 .manifest-editor .variables-view-delete::before {
1483   background-image: url("app-manager/remove.svg");
1484   background-size: 12px auto;
1485 }
1486
1487 .manifest-editor .variables-view-add-property::before {
1488   background-image: url("app-manager/add.svg");
1489   -moz-margin-end: 2px;
1490 }
1491
1492 /* === END manifest-editor.inc.css === */
1493
1494 /* === END widgets.inc.css === */