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/. */
6 /* === BEGIN widgets.inc.css === */
8 /* Generic pane helpers */
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. */
17 .generic-toggled-side-pane[animated] {
18 transition: margin 0.25s ease-in-out;
21 /* Responsive container */
23 .devtools-responsive-container {
24 -moz-box-orient: horizontal;
27 @media (max-width: 700px) {
28 .devtools-responsive-container {
29 -moz-box-orient: vertical;
32 .devtools-responsive-container > .devtools-side-splitter {
38 /* In some edge case the cursor is not changed to n-resize */
42 .devtools-responsive-container > .devtools-sidebar-tabs {
48 /* BreacrumbsWidget */
50 .breadcrumbs-widget-container {
51 -moz-margin-start: 2px;
52 -moz-margin-start: 2px;
53 max-height: 24px; /* Set max-height for proper sizing on linux */
54 height: 24px; /* Set height to prevent starting small waiting for content */
59 background: transparent;
74 .scrollbutton-up > .toolbarbutton-icon,
75 .scrollbutton-down > .toolbarbutton-icon {
79 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
80 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
83 .scrollbutton-up[disabled] > .toolbarbutton-icon,
84 .scrollbutton-down[disabled] > .toolbarbutton-icon {
87 .scrollbutton-up:-moz-locale-dir(ltr) {
88 border-top-right-radius: 0;
89 border-bottom-right-radius: 0;
92 .scrollbutton-down:-moz-locale-dir(ltr) {
93 border-top-left-radius: 0;
94 border-bottom-left-radius: 0;
97 .scrollbutton-up:-moz-locale-dir(rtl) {
98 border-top-left-radius: 0;
99 border-bottom-left-radius: 0;
102 .scrollbutton-down:-moz-locale-dir(rtl) {
103 border-top-right-radius: 0;
104 border-bottom-right-radius: 0;
107 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
109 .scrollbutton-up:-moz-locale-dir(ltr),
110 .scrollbutton-down:-moz-locale-dir(rtl) {
111 border-right: solid 1px rgba(255, 255, 255, .1);
112 border-left: solid 1px transparent;
113 box-shadow: 3px 0px 3px -3px #181d20;
116 .scrollbutton-down:-moz-locale-dir(ltr),
117 .scrollbutton-up:-moz-locale-dir(rtl) {
118 border-right: solid 1px transparent;
119 border-left: solid 1px rgba(255, 255, 255, .1);
120 box-shadow: -3px 0px 3px -3px #181d20;
123 .scrollbutton-up[disabled],
124 .scrollbutton-down[disabled] {
126 border-color: transparent;
130 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
131 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
132 /* transform: scaleX(-1); */
135 /* The breadcrumb separator elements are used as background images with
136 * -moz-element, so we position them offscreen since we don't care about
137 * seeing the original elements.
139 .breadcrumb-separator-container {
145 #breadcrumb-separator-before,
146 #breadcrumb-separator-after,
147 #breadcrumb-separator-normal {
153 #breadcrumb-separator-before,
154 #breadcrumb-separator-after:after {
155 background: #008484; /* Select Highlight Blue */
158 #breadcrumb-separator-after,
159 #breadcrumb-separator-before:after {
160 background: #000000; /* Toolbars */
163 /* This chevron arrow cannot be replicated easily in CSS, so we are using
164 * a background image for it (still keeping it in a separate element so
165 * we can handle RTL support with a CSS transform).
167 #breadcrumb-separator-normal {
168 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
169 background-size: 12px 24px;
172 /* Fake a triangle by rotating a rectangle inside the elements */
173 #breadcrumb-separator-before:after,
174 #breadcrumb-separator-after:after {
179 transform: translateX(-18px) rotate(45deg);
180 box-sizing: border-box;
183 .breadcrumbs-widget-item {
184 background-color: #000000;
188 padding: 0 8px 0 20px;
195 .breadcrumbs-widget-item:hover {
196 background-color: #FFCF00;
200 .breadcrumbs-widget-item[checked]:not(:hover) {
201 background-color: #008484;
205 .breadcrumbs-widget-item[siblings-menu-open],
206 .breadcrumbs-widget-item:active {
207 background-color: #FF9F00;
211 .breadcrumbs-widget-item > .button-box {
217 .breadcrumbs-widget-item:not([checked]) {
218 background-image: -moz-element(#breadcrumb-separator-normal);
219 background-repeat: no-repeat;
220 background-position: center left;
223 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
224 background-image: -moz-element(#breadcrumb-separator-after);
225 background-repeat: no-repeat;
226 background-position: 0 0;
229 .breadcrumbs-widget-item[checked] {
230 background-image: -moz-element(#breadcrumb-separator-before);
231 background-repeat: no-repeat;
232 background-position: 0 0;
233 background-color: #008484; /* Select Highlight Blue */
236 .breadcrumbs-widget-item:first-child {
237 background-image: none;
240 /* RTL support: move the images that were on the left to the right,
241 * and move images that were on the right to the left.
243 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
244 padding: 0 20px 0 8px;
247 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
248 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
249 background-position: center right;
252 #breadcrumb-separator-before:-moz-locale-dir(rtl),
253 #breadcrumb-separator-after:-moz-locale-dir(rtl),
254 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
255 transform: scaleX(-1);
258 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
259 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
260 transform: translateX(-5px) rotate(45deg);
263 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
264 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
265 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
266 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
267 color: #FF9F00; /* Foreground (Text) - Light */
270 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
271 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
272 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
273 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
274 color: #000000 !important;
277 .breadcrumbs-widget-item {
278 color: #FFCF00; /* Foreground (Text) - Light */
281 .breadcrumbs-widget-item-id {
282 color: #A09090; /* Foreground (Text) - Grey */
285 .breadcrumbs-widget-item-classes {
286 color: #FF9F00; /* Content (Text) - Light */
289 .breadcrumbs-widget-item-pseudo-classes {
290 color: #FFCF00; /* Light Orange */
293 /* SimpleListWidget */
295 .simple-list-widget-container {
296 /* Hack: force hardware acceleration */
297 transform: translateZ(1px);
300 .simple-list-widget-item.selected {
301 background-color: #008484; /* Select Highlight Blue */
302 color: #FFCF00; /* Light foreground text */
305 .simple-list-widget-item:not(.selected):hover {
306 background-color: #FFCF00;
310 .simple-list-widget-perma-text,
311 .simple-list-widget-empty-text {
318 .fast-list-widget-container {
319 /* Hack: force hardware acceleration */
320 transform: translateZ(1px);
323 /* dark/light theme */
324 .fast-list-widget-empty-text {
332 /* SideMenuWidget container */
334 .side-menu-widget-container {
335 /* Hack: force hardware acceleration */
336 transform: translateZ(1px);
338 background-color: #000000;
342 .side-menu-widget-container:-moz-locale-dir(ltr),
343 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
346 .side-menu-widget-container:-moz-locale-dir(rtl),
347 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
350 .side-menu-widget-group {
351 /* To allow visibility of the dark margin shadow. */
352 /* -moz-margin-end: 1px; */
355 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
356 /* To compensate for the arrow image's dark margin. */
357 /* -moz-margin-end: -1px; */
360 /* SideMenuWidget groups */
362 .side-menu-widget-group-title {
365 background-color: #A09090;
369 /* SideMenuWidget items */
371 .side-menu-widget-item {
372 border-top: 1px solid #9C9CFF;
373 /* To compensate for the top and bottom borders */
376 background-clip: padding-box;
379 .side-menu-widget-item:last-of-type {
380 border-bottom: 1px solid #9C9CFF;
383 .side-menu-widget-item.selected {
384 background-color: #008484 !important;
388 .side-menu-widget-item-arrow {
389 -moz-margin-start: -7px;
390 width: 7px; /* The image's width is 7 pixels */
391 /* Cover the border of the side-menu-widget-item */
396 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
397 background-size: auto, 1px 100%;
398 background-repeat: no-repeat;
401 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
402 background-position: center right;
405 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
406 background-position: center left;
409 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
410 background-image: url("itemArrow-ltr.svg");
413 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
414 background-image: url("itemArrow-rtl.svg");
417 /* SideMenuWidget items contents */
419 .side-menu-widget-item-contents {
421 /* To avoid having content overlapping the arrow image. */
422 -moz-padding-end: 8px;
425 .side-menu-widget-item-other {
426 /* To avoid having content overlapping the arrow image. */
427 -moz-padding-end: 8px;
428 /* To compensate for the .side-menu-widget-item-contents padding. */
429 -moz-margin-start: -4px;
430 -moz-margin-end: -8px;
432 background-color: #000000;
435 .side-menu-widget-item-other.selected {
436 background-color: #008484;
440 .side-menu-widget-item-other:first-of-type {
442 /* border-top-left-radius: 4px; */
445 .side-menu-widget-item-other:last-of-type {
449 .side-menu-widget-item-other:not(.selected) > label {
453 /* SideMenuWidget checkboxes */
455 .side-menu-widget-group-checkbox {
457 -moz-margin-end: 4px;
460 .side-menu-widget-item-checkbox {
462 -moz-margin-start: 4px;
463 -moz-margin-end: -4px;
466 /* SideMenuWidget misc */
468 .side-menu-widget-empty-text {
471 background-color: #000000;
478 .variables-view-container:not([empty]) {
479 /* Hack: force hardware acceleration */
480 transform: translateZ(1px);
483 .variables-view-empty-notice {
488 .variables-view-scope:focus > .title,
489 .theme-dark .variable-or-property:focus > .title {
490 background-color: #008484; /* Selection colors */
494 .variables-view-scope > .title {
495 background-color: #A09090;
499 /* Generic variables traits */
501 .variables-view-variable:not(:last-child) {
502 border-bottom: 1px solid #A09090;
505 .variables-view-variable > .title > .name {
509 /* Generic variables *and* properties traits */
511 .variable-or-property:focus > .title > label {
512 color: inherit !important;
515 .variables-view-container .theme-twisty {
519 .variable-or-property > .title > .theme-twisty {
520 -moz-margin-start: 5px;
523 .variable-or-property:not([untitled]) > .variables-view-element-details {
524 -moz-margin-start: 7px;
527 /* Traits applied when variables or properties are changed or overridden */
529 .variable-or-property:not([overridden]) {
530 transition: background 1s ease-in-out, color 1s ease-in-out;
533 .variable-or-property:not([overridden])[changed] {
535 transition-duration: .4s;
538 .variable-or-property[overridden] {
539 background: rgba(160,144,144,0.0.5);
542 .variable-or-property[overridden] .title > label {
543 /* Cross out the title for this variable and all child properties. */
545 text-decoration: line-through;
546 border-bottom: none !important;
551 /* Traits applied when variables or properties are editable */
553 .variable-or-property[editable] > .title > .value {
557 .variable-or-property[overridden] .title > .value {
558 /* Disallow editing this variable and all child properties. */
559 pointer-events: none;
562 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
563 * variables and properties */
565 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
569 .variable-or-property-non-writable-icon {
570 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
571 background-size: cover;
577 @media (min-resolution: 2dppx) {
578 .variable-or-property-non-writable-icon > .title:after {
579 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
583 .variable-or-property-frozen-label,
584 .variable-or-property-sealed-label,
585 .variable-or-property-non-extensible-label {
587 -moz-padding-end: 4px;
590 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
591 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
592 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
598 .variables-view-container[aligned-values] .title > .separator {
602 .variables-view-container[aligned-values] .title > .value {
607 .variables-view-container[aligned-values] .title > .element-value-input {
608 width: calc(70vw - 10px);
613 .variables-view-open-inspector {
614 -moz-box-ordinal-group: 1;
617 .variables-view-edit,
618 .variables-view-add-property {
619 -moz-box-ordinal-group: 2;
622 .variable-or-property-frozen-label,
623 .variable-or-property-sealed-label,
624 .variable-or-property-non-extensible-label,
625 .variable-or-property-non-writable-icon {
626 -moz-box-ordinal-group: 3;
629 .variables-view-delete {
630 -moz-box-ordinal-group: 4;
633 .variables-view-container[actions-first] .variables-view-delete,
634 .variables-view-container[actions-first] .variables-view-add-property,
635 .variables-view-container[actions-first] .variables-view-open-inspector {
636 -moz-box-ordinal-group: 0;
639 .variables-view-container[actions-first] [invisible] {
643 /* Variables and properties tooltips */
645 .variable-or-property > tooltip > label {
649 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
650 .variable-or-property[non-configurable] > tooltip > label.configurable,
651 .variable-or-property[non-writable] > tooltip > label.writable
652 .variable-or-property[non-extensible] > tooltip > label.extensible {
654 text-decoration: line-through;
657 .variable-or-property[overridden] > tooltip > label.overridden {
658 -moz-padding-start: 4px;
659 -moz-border-start: 1px dotted #9C9CFF;
662 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
663 -moz-padding-start: 4px;
664 -moz-border-start: 1px dotted #9C9CFF;
668 /* Variables and properties editing */
670 .variables-view-delete {
671 background: url("chrome://browser/skin/devtools/vview-delete.png");
672 background-size: cover;
677 @media (min-resolution: 2dppx) {
678 .variables-view-delete {
679 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
683 .variables-view-delete:hover {
684 background-position: 32px;
687 .variables-view-delete:active {
688 background-position: 16px;
691 .variable-or-property:focus > .title > .variables-view-delete {
692 /* background-position: 0px; */
695 .variables-view-edit {
696 background: url("chrome://browser/skin/devtools/vview-edit.png");
697 background-size: cover;
703 @media (min-resolution: 2dppx) {
704 .variables-view-edit {
705 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
709 .variables-view-edit:hover {
710 background-position: 32px;
713 .variables-view-edit:active {
714 background-position: 16px;
717 .variable-or-property:focus > .title > .variables-view-edit {
718 /* background-position: 0px; */
721 .variables-view-open-inspector {
722 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
723 background-size: cover;
729 .variables-view-open-inspector:hover {
730 background-position: 32px;
733 .variables-view-open-inspector:active {
734 background-position: 16px;
737 .variable-or-property:focus > .title > .variables-view-open-inspector {
738 /* background-position: 0px; */
741 /* Variables and properties input boxes */
743 .variable-or-property > .title > .separator + .element-value-input {
744 -moz-margin-start: -2px !important;
745 -moz-margin-end: 2px !important;
748 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
749 -moz-margin-start: 4px !important;
750 -moz-margin-end: 2px !important;
753 .element-name-input {
754 -moz-margin-start: -2px !important;
755 -moz-margin-end: 2px !important;
759 .element-value-input,
760 .element-name-input {
761 border: 1px solid #008484 !important;
765 /* Variables and properties searching */
767 .variable-or-property[unmatched] {
774 .graph-widget-container {
778 .graph-widget-canvas {
783 .graph-widget-canvas[input=hovering-background] {
787 .graph-widget-canvas[input=hovering-region] {
791 .graph-widget-canvas[input=hovering-selection-start-boundary],
792 .graph-widget-canvas[input=hovering-selection-end-boundary],
793 .graph-widget-canvas[input=adjusting-selection-boundary] {
797 .graph-widget-canvas[input=hovering-selection-contents] {
801 .graph-widget-canvas[input=dragging-selection-contents] {
805 /* Line graph widget */
807 .line-graph-widget-canvas {
811 .line-graph-widget-gutter {
818 border-right: 1px solid #9C9CFF;
819 pointer-events: none;
822 .line-graph-widget-gutter-line {
825 border-top: 1px solid;
826 transform: translateY(-1px);
829 .line-graph-widget-gutter-line[type=maximum] {
830 border-color: #008484;
833 .line-graph-widget-gutter-line[type=minimum] {
834 border-color: #FF0000;
837 .line-graph-widget-gutter-line[type=average] {
838 border-color: #FF9F00;
841 .line-graph-widget-tooltip {
846 -moz-padding-start: 6px;
847 -moz-padding-end: 6px;
848 transform: translateY(-50%);
851 pointer-events: none;
854 .line-graph-widget-tooltip::before {
857 border-top: 3px solid transparent;
858 border-bottom: 3px solid transparent;
859 top: calc(50% - 3px);
862 .line-graph-widget-tooltip[arrow=start]::before {
863 -moz-border-end: 3px solid #9C9CFF;
867 .line-graph-widget-tooltip[arrow=end]::before {
868 -moz-border-start: 3px solid #9C9CFF;
872 .line-graph-widget-tooltip[type=maximum] {
873 left: calc(10px + 6px);
876 .line-graph-widget-tooltip[type=minimum] {
877 left: calc(10px + 6px);
880 .line-graph-widget-tooltip[type=average] {
884 .line-graph-widget-tooltip > [text=info] {
888 .line-graph-widget-tooltip > [text=value] {
889 -moz-margin-start: 3px;
892 .line-graph-widget-tooltip > [text=metric] {
893 -moz-margin-start: 1px;
897 .line-graph-widget-tooltip > [text=value],
898 .line-graph-widget-tooltip > [text=metric] {
899 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
900 -1px 0px rgba(255,255,255,0.6),
901 0px -1px rgba(255,255,255,0.6),
902 0px 1px rgba(255,255,255,0.6);*/
905 .line-graph-widget-tooltip[type=maximum] > [text=value] {
909 .line-graph-widget-tooltip[type=minimum] > [text=value] {
913 .line-graph-widget-tooltip[type=average] > [text=value] {
917 /* Bar graph widget */
919 .bar-graph-widget-canvas {
923 .bar-graph-widget-legend {
929 pointer-events: none;
932 .bar-graph-widget-legend-item {
934 -moz-margin-end: 8px;
937 .bar-graph-widget-legend-item > [view="color"],
938 .bar-graph-widget-legend-item > [view="label"] {
939 vertical-align: middle;
942 .bar-graph-widget-legend-item > [view="color"] {
943 display: inline-block;
946 border: 1px solid #9C9CFF;
948 -moz-margin-end: 4px;
949 pointer-events: none;
952 .bar-graph-widget-legend-item > [view="label"] {
953 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
954 -1px 0px rgba(255,255,255,0.8),
955 0px -1px rgba(255,255,255,0.8),
956 0px 1px rgba(255,255,255,0.8);*/
961 .generic-chart-container {
962 /* Hack: force hardware acceleration */
963 transform: translateZ(1px);
966 .generic-chart-container {
967 color: #A09090; /* Light foreground text */
970 .chart-colored-blob {
971 fill: #9C9CFF; /* Light content text */
986 .pie-chart-slice[largest] {
993 dominant-baseline: middle;
994 pointer-events: none;
1001 .pie-chart-container[slices="1"] > .pie-chart-slice {
1007 transition: all 0.1s ease-out;
1010 .pie-chart-slice:not(:hover):not([focused]),
1011 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1012 transform: none !important;
1017 .table-chart-title {
1018 padding-bottom: 10px;
1028 .table-chart-grid:hover > .table-chart-row {
1029 transition: opacity 0.1s ease-in-out;
1032 .table-chart-grid:not(:hover) > .table-chart-row {
1033 transition: opacity 0.2s ease-in-out;
1036 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1037 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1041 .table-chart-row-box {
1044 -moz-margin-end: 10px;
1047 .table-chart-row-label {
1049 -moz-padding-end: 6px;
1053 .table-chart-totals {
1058 .table-chart-totals {
1059 border-top: 1px solid #A09090; /* Grey foreground text */
1062 .table-chart-summary-label {
1067 .table-chart-summary-label {
1068 color: #A09090; /* Light foreground text */
1075 .table-widget-body > .devtools-side-splitter {
1079 .table-widget-body {
1083 .table-widget-body {
1084 background: #000000; /* Background-Sidebar */
1087 .table-widget-body:-moz-locale-dir(ltr) {
1088 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1091 .table-widget-body:-moz-locale-dir(rtl) {
1092 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1095 .table-widget-body:-moz-locale-dir(ltr) {
1096 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1099 .table-widget-body:-moz-locale-dir(rtl) {
1100 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1103 /* Column Headers */
1105 .table-widget-column-header,
1106 .table-widget-cell {
1107 -moz-border-end: 1px solid #A09090;
1110 /* Table widget column header colors are taken from netmonitor.inc.css to match
1111 the look of both the tables. This needs to be updated along with netmonitor
1112 header colors in bug 951714 */
1114 .table-widget-column-header {
1115 background: rgba(0,0,0,0);
1121 padding: 8px 0 0 !important;
1124 font-weight: inherit !important;
1125 transition: background-color 0.1s ease-in-out;
1128 .table-widget-column-header:hover {
1129 background: #FFCF00;
1132 .table-widget-column-header:hover:active {
1133 background: #FF9F00;
1136 .table-widget-column-header:not(:active)[sorted] {
1137 background: #008484;
1140 .table-widget-column-header:not(:active)[sorted=ascending] {
1141 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1142 background-size: 100% 1px;
1143 background-repeat: no-repeat;
1146 .table-widget-column-header:not(:active)[sorted=descending] {
1147 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1148 background-size: 100% 1px;
1149 background-repeat: no-repeat;
1150 background-position: bottom;
1155 .table-widget-cell {
1157 margin: -1px 0 !important;
1159 background-clip: padding-box;
1161 -moz-user-focus: normal;
1164 .table-widget-cell {
1165 border-top: 1px solid #A09090;
1166 border-bottom: 1px solid #A09090;
1167 color: #FF9F00; /* Light foreground text */
1170 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1171 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1172 .table-widget-cell:not(.theme-selected)[odd] {
1173 background: #404000;
1176 .table-widget-cell:last-of-type {
1177 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1180 .table-widget-cell.flash-out {
1181 animation: flash-out 0.5s ease-in;
1184 @keyframes flash-out {
1186 background: #795900;
1190 /* Empty text and initial text */
1192 .table-widget-empty-text {
1196 margin-top: -20px !important;
1199 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1200 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1206 .tree-widget-container {
1213 -moz-margin-end: 40px;
1216 .tree-widget-container:-moz-focusring,
1217 .tree-widget-container *:-moz-focusring {
1218 outline-style: none;
1221 .tree-widget-empty-text {
1224 background: transparent;
1229 .tree-widget-container .tree-widget-item {
1230 padding: 2px 0px 4px;
1231 /* OSX has line-height 14px by default, which causes weird alignment issues
1232 * because of 20px high icons. thus making line-height consistent with that of
1235 line-height: 17px !important;
1236 display: inline-block;
1238 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1239 breaking in multiple lines */
1242 .tree-widget-container .tree-widget-children {
1248 .tree-widget-item[level="1"] {
1253 .tree-widget-item:before {
1258 margin: 3px 2px -3px;
1259 background-repeat: no-repeat;
1260 background-image: url("chrome://browser/skin/devtools/controls.png");
1261 background-size: 56px 28px;
1263 background-position: -28px -14px;
1266 .tree-widget-item:-moz-locale-dir(rtl):before {
1268 transform: scaleX(-1);
1271 .theme-light .tree-widget-item:before {
1272 background-position: 0 -14px;
1275 .tree-widget-item[empty]:before {
1276 background: transparent;
1279 .tree-widget-item[expanded]:before {
1280 background-position: -42px -14px;
1283 .theme-light .tree-widget-item[expanded]:before {
1284 background-position: -14px -14px;
1287 .tree-widget-item + ul {
1289 animation: collapse-tree-item 0.2s;
1293 .tree-widget-item[expanded] + ul {
1294 animation: expand-tree-item 0.3s;
1298 @keyframes collapse-tree-item {
1307 @keyframes expand-tree-item {
1316 @media (min-resolution: 2dppx) {
1317 .tree-widget-item:before {
1318 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1322 /* Indentation of child items in the tree */
1325 .tree-widget-item[level] + ul > li > .tree-widget-item {
1326 -moz-padding-start: 98px;
1330 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1331 -moz-padding-start: 14px;
1335 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1336 -moz-padding-start: 28px;
1340 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1341 -moz-padding-start: 42px;
1345 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1346 -moz-padding-start: 56px;
1350 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1351 -moz-padding-start: 70px;
1355 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1356 -moz-padding-start: 84px;
1359 /* Custom icons for certain tree items indicating the type of the item */
1361 .tree-widget-item[type]:after {
1366 -moz-margin-end: 4px;
1367 background-repeat: no-repeat;
1368 background-size: 20px auto;
1369 filter: url('filters.svg#invert');
1370 background-position: 0 0;
1371 background-size: auto 20px;
1374 .tree-widget-item:-moz-locale-dir(rtl):after {
1378 .theme-dark .tree-widget-item[type]:after {
1379 filter: url('filters.svg#invert-white');
1382 .tree-widget-item[type="dir"]:after {
1383 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1384 background-position: 2px 0;
1385 background-size: auto 16px;
1389 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1390 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1393 .tree-widget-item[type="url"]:after {
1394 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1395 background-size: auto 18px;
1399 /* === BEGIN manifest-editor.inc.css === */
1401 /* Manifest Editor overrides */
1403 .variables-view-container.manifest-editor {
1404 background-color: #000000;
1408 .manifest-editor .variable-or-property:focus > .title {
1409 /* background-color: #EDEDED;
1414 .manifest-editor .variables-view-property > .title > .name {
1415 /* color: #27406A; */
1418 .manifest-editor .variable-or-property > .title > label,
1419 .manifest-editor textbox {
1420 font-family: monospace;
1423 .manifest-editor .variable-or-property > .title > .token-string {
1424 /* color: #54BC6A; */
1428 .manifest-editor .variable-or-property > .title > .token-boolean,
1429 .manifest-editor .variable-or-property > .title > .token-number {
1430 /* color: #009BD4; */
1434 .manifest-editor .variable-or-property > .title > .token-undefined {
1438 .manifest-editor .variable-or-property > .title > .token-null {
1442 .manifest-editor .variable-or-property > .title > .token-other {
1446 .manifest-editor .variables-view-variable {
1447 border-bottom: none;
1450 .manifest-editor .variables-view-delete,
1451 .manifest-editor .variables-view-delete:hover,
1452 .manifest-editor .variables-view-delete:active,
1453 .manifest-editor .variable-or-property:focus .variables-view-delete,
1454 .manifest-editor .variables-view-add-property,
1455 .manifest-editor .variables-view-add-property:hover,
1456 .manifest-editor .variables-view-add-property:active,
1457 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1458 list-style-image: none;
1459 -moz-image-region: initial;
1462 .manifest-editor .variables-view-delete::before,
1463 .manifest-editor .variables-view-add-property::before {
1467 display: inline-block;
1468 background-size: 11px auto;
1471 .manifest-editor .variables-view-delete::before {
1472 background-image: url("app-manager/remove.svg");
1473 background-size: 12px auto;
1476 .manifest-editor .variables-view-add-property::before {
1477 background-image: url("app-manager/add.svg");
1478 -moz-margin-end: 2px;
1481 /* === END manifest-editor.inc.css === */
1483 /* === END widgets.inc.css === */