fifth part of syncing LCARStrek with Firefox 34 windows theme changes
[themes.git] / LCARStrek / browser / devtools / widgets.css
... / ...
CommitLineData
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 === */