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: 25px; /* Set max-height for proper sizing on linux */
54 height: 25px; /* Set height to prevent starting small waiting for content */
55 /* A fake 1px-shadow is included in the border-images of the
56 breadcrumbs-widget-items, to match toolbar-buttons style.
57 This negative margin compensates the extra row of pixels created
64 background: transparent;
79 .scrollbutton-up > .toolbarbutton-icon,
80 .scrollbutton-down > .toolbarbutton-icon {
84 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
85 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
88 .scrollbutton-up[disabled] > .toolbarbutton-icon,
89 .scrollbutton-down[disabled] > .toolbarbutton-icon {
92 .scrollbutton-up:-moz-locale-dir(ltr) {
93 border-top-right-radius: 0;
94 border-bottom-right-radius: 0;
97 .scrollbutton-down:-moz-locale-dir(ltr) {
98 border-top-left-radius: 0;
99 border-bottom-left-radius: 0;
102 .scrollbutton-up:-moz-locale-dir(rtl) {
103 border-top-left-radius: 0;
104 border-bottom-left-radius: 0;
107 .scrollbutton-down:-moz-locale-dir(rtl) {
108 border-top-right-radius: 0;
109 border-bottom-right-radius: 0;
112 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
114 .scrollbutton-up:-moz-locale-dir(ltr),
115 .scrollbutton-down:-moz-locale-dir(rtl) {
116 border-right: solid 1px rgba(255, 255, 255, .1);
117 border-left: solid 1px transparent;
118 box-shadow: 3px 0px 3px -3px #181d20;
121 .scrollbutton-down:-moz-locale-dir(ltr),
122 .scrollbutton-up:-moz-locale-dir(rtl) {
123 border-right: solid 1px transparent;
124 border-left: solid 1px rgba(255, 255, 255, .1);
125 box-shadow: -3px 0px 3px -3px #181d20;
128 .scrollbutton-up[disabled],
129 .scrollbutton-down[disabled] {
131 border-color: transparent;
135 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
136 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
137 /* transform: scaleX(-1); */
140 /* The breadcrumb separator elements are used as background images with
141 * -moz-element, so we position them offscreen since we don't care about
142 * seeing the original elements.
144 .breadcrumb-separator-container {
150 #breadcrumb-separator-before,
151 #breadcrumb-separator-after,
152 #breadcrumb-separator-normal {
158 #breadcrumb-separator-before,
159 #breadcrumb-separator-after:after {
160 background: #008484; /* Select Highlight Blue */
163 #breadcrumb-separator-after,
164 #breadcrumb-separator-before:after {
165 background: #000000; /* Toolbars */
168 /* This chevron arrow cannot be replicated easily in CSS, so we are using
169 * a background image for it (still keeping it in a separate element so
170 * we can handle RTL support with a CSS transform).
172 #breadcrumb-separator-normal {
173 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
174 background-size: 12px 24px;
177 /* Fake a triangle by rotating a rectangle inside the elements */
178 #breadcrumb-separator-before:after,
179 #breadcrumb-separator-after:after {
184 transform: translateX(-18px) rotate(45deg);
185 box-sizing: border-box;
188 .breadcrumbs-widget-item {
189 background-color: #000000;
193 padding: 0 8px 0 20px;
200 .breadcrumbs-widget-item:hover {
201 background-color: #FFCF00;
205 .breadcrumbs-widget-item[checked]:not(:hover) {
206 background-color: #008484;
210 .breadcrumbs-widget-item[siblings-menu-open],
211 .breadcrumbs-widget-item:active {
212 background-color: #FF9F00;
216 .breadcrumbs-widget-item:not([checked]) {
217 background-image: -moz-element(#breadcrumb-separator-normal);
218 background-repeat: no-repeat;
219 background-position: center left;
222 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
223 background-image: -moz-element(#breadcrumb-separator-after);
224 background-repeat: no-repeat;
225 background-position: 0 0;
228 .breadcrumbs-widget-item[checked] {
229 background-image: -moz-element(#breadcrumb-separator-before);
230 background-repeat: no-repeat;
231 background-position: 0 0;
232 background-color: #008484; /* Select Highlight Blue */
235 .breadcrumbs-widget-item:first-child {
236 background-image: none;
239 /* RTL support: move the images that were on the left to the right,
240 * and move images that were on the right to the left.
242 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
243 padding: 0 20px 0 8px;
246 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
247 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
248 background-position: center right;
251 #breadcrumb-separator-before:-moz-locale-dir(rtl),
252 #breadcrumb-separator-after:-moz-locale-dir(rtl),
253 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
254 transform: scaleX(-1);
257 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
258 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
259 transform: translateX(-5px) rotate(45deg);
262 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
263 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
264 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
265 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
266 color: #FF9F00; /* Foreground (Text) - Light */
269 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
270 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
271 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
272 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
273 color: #000000 !important;
276 .breadcrumbs-widget-item {
277 color: #FFCF00; /* Foreground (Text) - Light */
280 .breadcrumbs-widget-item-id {
281 color: #A09090; /* Foreground (Text) - Grey */
284 .breadcrumbs-widget-item-classes {
285 color: #FF9F00; /* Content (Text) - Light */
288 .breadcrumbs-widget-item-pseudo-classes {
289 color: #FFCF00; /* Light Orange */
292 /* SimpleListWidget */
294 .simple-list-widget-container {
295 /* Hack: force hardware acceleration */
296 transform: translateZ(1px);
299 .simple-list-widget-item.selected {
300 background-color: #008484; /* Select Highlight Blue */
301 color: #FFCF00; /* Light foreground text */
304 .simple-list-widget-item:not(.selected):hover {
305 background-color: #FFCF00;
309 .simple-list-widget-perma-text,
310 .simple-list-widget-empty-text {
317 .fast-list-widget-container {
318 /* Hack: force hardware acceleration */
319 transform: translateZ(1px);
322 /* dark/light theme */
323 .fast-list-widget-empty-text {
331 /* SideMenuWidget container */
333 .side-menu-widget-container {
334 /* Hack: force hardware acceleration */
335 transform: translateZ(1px);
337 background-color: #000000;
341 .side-menu-widget-container:-moz-locale-dir(ltr),
342 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
345 .side-menu-widget-container:-moz-locale-dir(rtl),
346 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
349 .side-menu-widget-group {
350 /* To allow visibility of the dark margin shadow. */
351 /* -moz-margin-end: 1px; */
354 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
355 /* To compensate for the arrow image's dark margin. */
356 /* -moz-margin-end: -1px; */
359 /* SideMenuWidget groups */
361 .side-menu-widget-group-title {
364 background-color: #A09090;
368 /* SideMenuWidget items */
370 .side-menu-widget-item {
371 border-top: 1px solid #9C9CFF;
372 /* To compensate for the top and bottom borders */
375 background-clip: padding-box;
378 .side-menu-widget-item:last-of-type {
379 border-bottom: 1px solid #9C9CFF;
382 .side-menu-widget-item.selected {
383 background-color: #008484 !important;
387 .side-menu-widget-item-arrow {
388 -moz-margin-start: -7px;
389 width: 7px; /* The image's width is 7 pixels */
390 /* Cover the border of the side-menu-widget-item */
395 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
396 background-size: auto, 1px 100%;
397 background-repeat: no-repeat;
400 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
401 background-position: center right;
404 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
405 background-position: center left;
408 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
409 background-image: url("itemArrow-ltr.svg");
412 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
413 background-image: url("itemArrow-rtl.svg");
416 /* SideMenuWidget items contents */
418 .side-menu-widget-item-contents {
420 /* To avoid having content overlapping the arrow image. */
421 -moz-padding-end: 8px;
424 .side-menu-widget-item-other {
425 /* To avoid having content overlapping the arrow image. */
426 -moz-padding-end: 8px;
427 /* To compensate for the .side-menu-widget-item-contents padding. */
428 -moz-margin-start: -4px;
429 -moz-margin-end: -8px;
431 background-color: #000000;
434 .side-menu-widget-item-other.selected {
435 background-color: #008484;
439 .side-menu-widget-item-other:first-of-type {
441 /* border-top-left-radius: 4px; */
444 .side-menu-widget-item-other:last-of-type {
448 .side-menu-widget-item-other:not(.selected) > label {
452 /* SideMenuWidget checkboxes */
454 .side-menu-widget-group-checkbox {
456 -moz-margin-end: 4px;
459 .side-menu-widget-item-checkbox {
461 -moz-margin-start: 4px;
462 -moz-margin-end: -4px;
465 /* SideMenuWidget misc */
467 .side-menu-widget-empty-text {
470 background-color: #000000;
477 .variables-view-container:not([empty]) {
478 /* Hack: force hardware acceleration */
479 transform: translateZ(1px);
482 .variables-view-empty-notice {
487 .variables-view-scope:focus > .title,
488 .theme-dark .variable-or-property:focus > .title {
489 background-color: #008484; /* Selection colors */
493 .variables-view-scope > .title {
494 background-color: #A09090;
498 /* Generic variables traits */
500 .variables-view-variable:not(:last-child) {
501 border-bottom: 1px solid #A09090;
504 .variables-view-variable > .title > .name {
508 /* Generic variables *and* properties traits */
510 .variable-or-property:focus > .title > label {
511 color: inherit !important;
514 .variable-or-property > .title > .arrow {
515 -moz-margin-start: 3px;
518 .variable-or-property:not([untitled]) > .variables-view-element-details {
519 -moz-margin-start: 7px;
522 /* Traits applied when variables or properties are changed or overridden */
524 .variable-or-property:not([overridden]) {
525 transition: background 1s ease-in-out, color 1s ease-in-out;
528 .variable-or-property:not([overridden])[changed] {
530 transition-duration: .4s;
533 .variable-or-property[overridden] {
534 background: rgba(160,144,144,0.0.5);
537 .variable-or-property[overridden] .title > label {
538 /* Cross out the title for this variable and all child properties. */
540 text-decoration: line-through;
541 border-bottom: none !important;
546 /* Traits applied when variables or properties are editable */
548 .variable-or-property[editable] > .title > .value {
552 .variable-or-property[overridden] .title > .value {
553 /* Disallow editing this variable and all child properties. */
554 pointer-events: none;
557 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
558 * variables and properties */
560 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
564 .variable-or-property-non-writable-icon {
565 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
566 background-size: cover;
572 @media (min-resolution: 2dppx) {
573 .variable-or-property-non-writable-icon > .title:after {
574 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
578 .variable-or-property-frozen-label,
579 .variable-or-property-sealed-label,
580 .variable-or-property-non-extensible-label {
582 -moz-padding-end: 4px;
585 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
586 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
587 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
593 .variables-view-container[aligned-values] .title > .separator {
597 .variables-view-container[aligned-values] .title > .value {
602 .variables-view-container[aligned-values] .title > .element-value-input {
603 width: calc(70vw - 10px);
608 .variables-view-open-inspector {
609 -moz-box-ordinal-group: 1;
612 .variables-view-edit,
613 .variables-view-add-property {
614 -moz-box-ordinal-group: 2;
617 .variable-or-property-frozen-label,
618 .variable-or-property-sealed-label,
619 .variable-or-property-non-extensible-label,
620 .variable-or-property-non-writable-icon {
621 -moz-box-ordinal-group: 3;
624 .variables-view-delete {
625 -moz-box-ordinal-group: 4;
628 .variables-view-container[actions-first] .variables-view-delete,
629 .variables-view-container[actions-first] .variables-view-add-property,
630 .variables-view-container[actions-first] .variables-view-open-inspector {
631 -moz-box-ordinal-group: 0;
634 .variables-view-container[actions-first] [invisible] {
638 /* Variables and properties tooltips */
640 .variable-or-property > tooltip > label {
644 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
645 .variable-or-property[non-configurable] > tooltip > label.configurable,
646 .variable-or-property[non-writable] > tooltip > label.writable
647 .variable-or-property[non-extensible] > tooltip > label.extensible {
649 text-decoration: line-through;
652 .variable-or-property[overridden] > tooltip > label.overridden {
653 -moz-padding-start: 4px;
654 -moz-border-start: 1px dotted #9C9CFF;
657 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
658 -moz-padding-start: 4px;
659 -moz-border-start: 1px dotted #9C9CFF;
663 /* Variables and properties editing */
665 .variables-view-delete {
666 background: url("chrome://browser/skin/devtools/vview-delete.png");
667 background-size: cover;
672 @media (min-resolution: 2dppx) {
673 .variables-view-delete {
674 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
678 .variables-view-delete:hover {
679 background-position: 32px;
682 .variables-view-delete:active {
683 background-position: 16px;
686 .variable-or-property:focus > .title > .variables-view-delete {
687 /* background-position: 0px; */
690 .variables-view-edit {
691 background: url("chrome://browser/skin/devtools/vview-edit.png");
692 background-size: cover;
698 @media (min-resolution: 2dppx) {
699 .variables-view-edit {
700 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
704 .variables-view-edit:hover {
705 background-position: 32px;
708 .variables-view-edit:active {
709 background-position: 16px;
712 .variable-or-property:focus > .title > .variables-view-edit {
713 /* background-position: 0px; */
716 .variables-view-open-inspector {
717 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
718 background-size: cover;
724 .variables-view-open-inspector:hover {
725 background-position: 32px;
728 .variables-view-open-inspector:active {
729 background-position: 16px;
732 .variable-or-property:focus > .title > .variables-view-open-inspector {
733 /* background-position: 0px; */
736 /* Variables and properties input boxes */
738 .variable-or-property > .title > .separator + .element-value-input {
739 -moz-margin-start: -2px !important;
740 -moz-margin-end: 2px !important;
743 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
744 -moz-margin-start: 4px !important;
745 -moz-margin-end: 2px !important;
748 .element-name-input {
749 -moz-margin-start: -2px !important;
750 -moz-margin-end: 2px !important;
754 .element-value-input,
755 .element-name-input {
756 border: 1px solid #008484 !important;
760 /* Variables and properties searching */
762 .variables-view-searchinput {
766 .variable-or-property[unmatched] {
771 /* Expand/collapse arrow */
774 background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
777 -moz-margin-start: 5px;
778 -moz-margin-end: 5px;
781 .variables-view-scope > .title > .arrow {
782 background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
786 background-image: url("chrome://global/skin/tree/twisty-open.gif");
789 .variables-view-scope > .title > .arrow[open] {
790 background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
799 .graph-widget-canvas {
804 .graph-widget-canvas[input=hovering-background] {
808 .graph-widget-canvas[input=hovering-region] {
812 .graph-widget-canvas[input=hovering-selection-start-boundary],
813 .graph-widget-canvas[input=hovering-selection-end-boundary],
814 .graph-widget-canvas[input=adjusting-selection-boundary] {
818 .graph-widget-canvas[input=hovering-selection-contents] {
822 .graph-widget-canvas[input=dragging-selection-contents] {
826 .graph-widget-canvas ~ * {
827 pointer-events: none;
830 /* Line graph widget */
832 .line-graph-widget-container {
836 .line-graph-widget-canvas {
840 .line-graph-widget-gutter {
847 border-right: 1px solid #9C9CFF;
850 .line-graph-widget-gutter-line {
853 border-top: 1px solid;
854 transform: translateY(-1px);
857 .line-graph-widget-gutter-line[type=maximum] {
858 border-color: #008484;
861 .line-graph-widget-gutter-line[type=minimum] {
862 border-color: #FF0000;
865 .line-graph-widget-gutter-line[type=average] {
866 border-color: #FF9F00;
869 .line-graph-widget-tooltip {
874 -moz-padding-start: 6px;
875 -moz-padding-end: 6px;
876 transform: translateY(-50%);
881 .line-graph-widget-tooltip::before {
884 border-top: 3px solid transparent;
885 border-bottom: 3px solid transparent;
886 top: calc(50% - 3px);
889 .line-graph-widget-tooltip[arrow=start]::before {
890 -moz-border-end: 3px solid #9C9CFF;
894 .line-graph-widget-tooltip[arrow=end]::before {
895 -moz-border-start: 3px solid #9C9CFF;
899 .line-graph-widget-tooltip[type=maximum] {
900 left: calc(10px + 6px);
903 .line-graph-widget-tooltip[type=minimum] {
904 left: calc(10px + 6px);
907 .line-graph-widget-tooltip[type=average] {
911 .line-graph-widget-tooltip > [text=info] {
915 .line-graph-widget-tooltip > [text=value] {
916 -moz-margin-start: 3px;
919 .line-graph-widget-tooltip > [text=metric] {
920 -moz-margin-start: 1px;
924 .line-graph-widget-tooltip > [text=value],
925 .line-graph-widget-tooltip > [text=metric] {
926 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
927 -1px 0px rgba(255,255,255,0.6),
928 0px -1px rgba(255,255,255,0.6),
929 0px 1px rgba(255,255,255,0.6);*/
932 .line-graph-widget-tooltip[type=maximum] > [text=value] {
936 .line-graph-widget-tooltip[type=minimum] > [text=value] {
940 .line-graph-widget-tooltip[type=average] > [text=value] {
946 .generic-chart-container {
947 /* Hack: force hardware acceleration */
948 transform: translateZ(1px);
951 .generic-chart-container {
952 color: #A09090; /* Light foreground text */
955 .chart-colored-blob {
956 fill: #9C9CFF; /* Light content text */
971 .pie-chart-slice[largest] {
978 dominant-baseline: middle;
979 pointer-events: none;
986 .pie-chart-container[slices="1"] > .pie-chart-slice {
992 transition: all 0.1s ease-out;
995 .pie-chart-slice:not(:hover):not([focused]),
996 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
997 transform: none !important;
1002 .table-chart-title {
1003 padding-bottom: 10px;
1013 .table-chart-grid:hover > .table-chart-row {
1014 transition: opacity 0.1s ease-in-out;
1017 .table-chart-grid:not(:hover) > .table-chart-row {
1018 transition: opacity 0.2s ease-in-out;
1021 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1022 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1026 .table-chart-row-box {
1029 -moz-margin-end: 10px;
1032 .table-chart-row-label {
1034 -moz-padding-end: 6px;
1038 .table-chart-totals {
1043 .table-chart-totals {
1044 border-top: 1px solid #A09090; /* Grey foreground text */
1047 .table-chart-summary-label {
1052 .table-chart-summary-label {
1053 color: #A09090; /* Light foreground text */
1060 .table-widget-body > .devtools-side-splitter {
1064 .table-widget-body {
1068 .table-widget-body {
1069 background: #000000; /* Background-Sidebar */
1072 .table-widget-body:-moz-locale-dir(ltr) {
1073 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1076 .table-widget-body:-moz-locale-dir(rtl) {
1077 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1080 .table-widget-body:-moz-locale-dir(ltr) {
1081 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1084 .table-widget-body:-moz-locale-dir(rtl) {
1085 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1088 /* Column Headers */
1090 .table-widget-column-header,
1091 .table-widget-cell {
1092 -moz-border-end: 1px solid #A09090;
1095 /* Table widget column header colors are taken from netmonitor.inc.css to match
1096 the look of both the tables. This needs to be updated along with netmonitor
1097 header colors in bug 951714 */
1099 .table-widget-column-header {
1100 background: rgba(0,0,0,0);
1106 padding: 8px 0 0 !important;
1109 font-weight: inherit !important;
1110 transition: background-color 0.1s ease-in-out;
1113 .table-widget-column-header:hover {
1114 background: #FFCF00;
1117 .table-widget-column-header:hover:active {
1118 background: #FF9F00;
1121 .table-widget-column-header:not(:active)[sorted] {
1122 background: #008484;
1125 .table-widget-column-header:not(:active)[sorted=ascending] {
1126 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1127 background-size: 100% 1px;
1128 background-repeat: no-repeat;
1131 .table-widget-column-header:not(:active)[sorted=descending] {
1132 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1133 background-size: 100% 1px;
1134 background-repeat: no-repeat;
1135 background-position: bottom;
1140 .table-widget-cell {
1142 margin: -1px 0 !important;
1144 background-clip: padding-box;
1146 -moz-user-focus: normal;
1149 .table-widget-cell {
1150 border-top: 1px solid #A09090;
1151 border-bottom: 1px solid #A09090;
1152 color: #FF9F00; /* Light foreground text */
1155 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1156 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1157 .table-widget-cell:not(.theme-selected)[odd] {
1158 background: #404000;
1161 .table-widget-cell:last-of-type {
1162 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1165 .table-widget-cell.flash-out {
1166 animation: flash-out 0.5s ease-in;
1169 @keyframes flash-out {
1171 background: #795900;
1175 /* Empty text and initial text */
1177 .table-widget-empty-text {
1181 margin-top: -20px !important;
1184 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1185 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1191 .tree-widget-container {
1198 -moz-margin-end: 40px;
1201 .tree-widget-container:-moz-focusring,
1202 .tree-widget-container *:-moz-focusring {
1203 outline-style: none;
1206 .tree-widget-empty-text {
1209 background: transparent;
1214 .tree-widget-container .tree-widget-item {
1215 padding: 2px 0px 4px;
1216 /* OSX has line-height 14px by default, which causes weird alignment issues
1217 * because of 20px high icons. thus making line-height consistent with that of
1220 line-height: 17px !important;
1221 display: inline-block;
1223 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1224 breaking in multiple lines */
1227 .tree-widget-container .tree-widget-children {
1233 .tree-widget-item[level="1"] {
1238 .tree-widget-item:before {
1243 margin: 3px 2px -3px;
1244 background-repeat: no-repeat;
1245 background-image: url("chrome://browser/skin/devtools/controls.png");
1246 background-size: 56px 28px;
1248 background-position: -28px -14px;
1251 .tree-widget-item:-moz-locale-dir(rtl):before {
1253 transform: scaleX(-1);
1256 .theme-light .tree-widget-item:before {
1257 background-position: 0 -14px;
1260 .tree-widget-item[empty]:before {
1261 background: transparent;
1264 .tree-widget-item[expanded]:before {
1265 background-position: -42px -14px;
1268 .theme-light .tree-widget-item[expanded]:before {
1269 background-position: -14px -14px;
1272 .tree-widget-item + ul {
1274 animation: collapse-tree-item 0.2s;
1278 .tree-widget-item[expanded] + ul {
1279 animation: expand-tree-item 0.3s;
1283 @keyframes collapse-tree-item {
1292 @keyframes expand-tree-item {
1301 @media (min-resolution: 2dppx) {
1302 .tree-widget-item:before {
1303 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1307 /* Indentation of child items in the tree */
1310 .tree-widget-item[level] + ul > li > .tree-widget-item {
1311 -moz-padding-start: 98px;
1315 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1316 -moz-padding-start: 14px;
1320 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1321 -moz-padding-start: 28px;
1325 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1326 -moz-padding-start: 42px;
1330 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1331 -moz-padding-start: 56px;
1335 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1336 -moz-padding-start: 70px;
1340 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1341 -moz-padding-start: 84px;
1344 /* Custom icons for certain tree items indicating the type of the item */
1346 .tree-widget-item[type]:after {
1351 -moz-margin-end: 4px;
1352 background-repeat: no-repeat;
1353 background-size: 20px auto;
1354 filter: url('filters.svg#invert');
1355 background-position: 0 0;
1356 background-size: auto 20px;
1359 .tree-widget-item:-moz-locale-dir(rtl):after {
1363 .theme-dark .tree-widget-item[type]:after {
1364 filter: url('filters.svg#invert-white');
1367 .tree-widget-item[type="dir"]:after {
1368 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1369 background-position: 2px 0;
1370 background-size: auto 16px;
1374 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1375 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1378 .tree-widget-item[type="url"]:after {
1379 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1380 background-size: auto 18px;
1384 /* === BEGIN manifest-editor.inc.css === */
1386 /* Manifest Editor overrides */
1388 .variables-view-container.manifest-editor {
1389 background-color: #000000;
1393 .manifest-editor .variable-or-property:focus > .title {
1394 /* background-color: #EDEDED;
1399 .manifest-editor .variables-view-property > .title > .name {
1400 /* color: #27406A; */
1403 .manifest-editor .variable-or-property > .title > label,
1404 .manifest-editor textbox {
1405 font-family: monospace;
1408 .manifest-editor .variable-or-property > .title > .token-string {
1409 /* color: #54BC6A; */
1413 .manifest-editor .variable-or-property > .title > .token-boolean,
1414 .manifest-editor .variable-or-property > .title > .token-number {
1415 /* color: #009BD4; */
1419 .manifest-editor .variable-or-property > .title > .token-undefined {
1423 .manifest-editor .variable-or-property > .title > .token-null {
1427 .manifest-editor .variable-or-property > .title > .token-other {
1431 .manifest-editor .variables-view-variable {
1432 border-bottom: none;
1435 .manifest-editor .variables-view-delete,
1436 .manifest-editor .variables-view-delete:hover,
1437 .manifest-editor .variables-view-delete:active,
1438 .manifest-editor .variable-or-property:focus .variables-view-delete,
1439 .manifest-editor .variables-view-add-property,
1440 .manifest-editor .variables-view-add-property:hover,
1441 .manifest-editor .variables-view-add-property:active,
1442 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1443 list-style-image: none;
1444 -moz-image-region: initial;
1447 .manifest-editor .variables-view-delete::before,
1448 .manifest-editor .variables-view-add-property::before {
1452 display: inline-block;
1453 background-size: 11px auto;
1456 .manifest-editor .variables-view-delete::before {
1457 background-image: url("app-manager/remove.svg");
1458 background-size: 12px auto;
1461 .manifest-editor .variables-view-add-property::before {
1462 background-image: url("app-manager/add.svg");
1463 -moz-margin-end: 2px;
1466 /* === END manifest-editor.inc.css === */
1468 /* === END widgets.inc.css === */