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:not([checked]) {
212 background-image: -moz-element(#breadcrumb-separator-normal);
213 background-repeat: no-repeat;
214 background-position: center left;
217 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
218 background-image: -moz-element(#breadcrumb-separator-after);
219 background-repeat: no-repeat;
220 background-position: 0 0;
223 .breadcrumbs-widget-item[checked] {
224 background-image: -moz-element(#breadcrumb-separator-before);
225 background-repeat: no-repeat;
226 background-position: 0 0;
227 background-color: #008484; /* Select Highlight Blue */
230 .breadcrumbs-widget-item:first-child {
231 background-image: none;
234 /* RTL support: move the images that were on the left to the right,
235 * and move images that were on the right to the left.
237 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
238 padding: 0 20px 0 8px;
241 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
242 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
243 background-position: center right;
246 #breadcrumb-separator-before:-moz-locale-dir(rtl),
247 #breadcrumb-separator-after:-moz-locale-dir(rtl),
248 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
249 transform: scaleX(-1);
252 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
253 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
254 transform: translateX(-5px) rotate(45deg);
257 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
258 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
259 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
260 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
261 color: #FF9F00; /* Foreground (Text) - Light */
264 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
265 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
266 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
267 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
268 color: #000000 !important;
271 .breadcrumbs-widget-item {
272 color: #FFCF00; /* Foreground (Text) - Light */
275 .breadcrumbs-widget-item-id {
276 color: #A09090; /* Foreground (Text) - Grey */
279 .breadcrumbs-widget-item-classes {
280 color: #FF9F00; /* Content (Text) - Light */
283 .breadcrumbs-widget-item-pseudo-classes {
284 color: #FFCF00; /* Light Orange */
287 /* SimpleListWidget */
289 .simple-list-widget-container {
290 /* Hack: force hardware acceleration */
291 transform: translateZ(1px);
294 .simple-list-widget-item.selected {
295 background-color: #008484; /* Select Highlight Blue */
296 color: #FFCF00; /* Light foreground text */
299 .simple-list-widget-item:not(.selected):hover {
300 background-color: #FFCF00;
304 .simple-list-widget-perma-text,
305 .simple-list-widget-empty-text {
312 .fast-list-widget-container {
313 /* Hack: force hardware acceleration */
314 transform: translateZ(1px);
317 /* dark/light theme */
318 .fast-list-widget-empty-text {
326 /* SideMenuWidget container */
328 .side-menu-widget-container {
329 /* Hack: force hardware acceleration */
330 transform: translateZ(1px);
332 background-color: #000000;
336 .side-menu-widget-container:-moz-locale-dir(ltr),
337 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
340 .side-menu-widget-container:-moz-locale-dir(rtl),
341 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
344 .side-menu-widget-group {
345 /* To allow visibility of the dark margin shadow. */
346 /* -moz-margin-end: 1px; */
349 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
350 /* To compensate for the arrow image's dark margin. */
351 /* -moz-margin-end: -1px; */
354 /* SideMenuWidget groups */
356 .side-menu-widget-group-title {
359 background-color: #A09090;
363 /* SideMenuWidget items */
365 .side-menu-widget-item {
366 border-top: 1px solid #9C9CFF;
367 /* To compensate for the top and bottom borders */
370 background-clip: padding-box;
373 .side-menu-widget-item:last-of-type {
374 border-bottom: 1px solid #9C9CFF;
377 .side-menu-widget-item.selected {
378 background-color: #008484 !important;
382 .side-menu-widget-item-arrow {
383 -moz-margin-start: -7px;
384 width: 7px; /* The image's width is 7 pixels */
385 /* Cover the border of the side-menu-widget-item */
390 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
391 background-size: auto, 1px 100%;
392 background-repeat: no-repeat;
395 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
396 background-position: center right;
399 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
400 background-position: center left;
403 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
404 background-image: url("itemArrow-ltr.svg");
407 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
408 background-image: url("itemArrow-rtl.svg");
411 /* SideMenuWidget items contents */
413 .side-menu-widget-item-contents {
415 /* To avoid having content overlapping the arrow image. */
416 -moz-padding-end: 8px;
419 .side-menu-widget-item-other {
420 /* To avoid having content overlapping the arrow image. */
421 -moz-padding-end: 8px;
422 /* To compensate for the .side-menu-widget-item-contents padding. */
423 -moz-margin-start: -4px;
424 -moz-margin-end: -8px;
426 background-color: #000000;
429 .side-menu-widget-item-other.selected {
430 background-color: #008484;
434 .side-menu-widget-item-other:first-of-type {
436 /* border-top-left-radius: 4px; */
439 .side-menu-widget-item-other:last-of-type {
443 .side-menu-widget-item-other:not(.selected) > label {
447 /* SideMenuWidget checkboxes */
449 .side-menu-widget-group-checkbox {
451 -moz-margin-end: 4px;
454 .side-menu-widget-item-checkbox {
456 -moz-margin-start: 4px;
457 -moz-margin-end: -4px;
460 /* SideMenuWidget misc */
462 .side-menu-widget-empty-text {
465 background-color: #000000;
472 .variables-view-container:not([empty]) {
473 /* Hack: force hardware acceleration */
474 transform: translateZ(1px);
477 .variables-view-empty-notice {
482 .variables-view-scope:focus > .title,
483 .theme-dark .variable-or-property:focus > .title {
484 background-color: #008484; /* Selection colors */
488 .variables-view-scope > .title {
489 background-color: #A09090;
493 /* Generic variables traits */
495 .variables-view-variable:not(:last-child) {
496 border-bottom: 1px solid #A09090;
499 .variables-view-variable > .title > .name {
503 /* Generic variables *and* properties traits */
505 .variable-or-property:focus > .title > label {
506 color: inherit !important;
509 .variables-view-container .theme-twisty {
513 .variable-or-property > .title > .theme-twisty {
514 -moz-margin-start: 5px;
517 .variable-or-property:not([untitled]) > .variables-view-element-details {
518 -moz-margin-start: 7px;
521 /* Traits applied when variables or properties are changed or overridden */
523 .variable-or-property:not([overridden]) {
524 transition: background 1s ease-in-out, color 1s ease-in-out;
527 .variable-or-property:not([overridden])[changed] {
529 transition-duration: .4s;
532 .variable-or-property[overridden] {
533 background: rgba(160,144,144,0.0.5);
536 .variable-or-property[overridden] .title > label {
537 /* Cross out the title for this variable and all child properties. */
539 text-decoration: line-through;
540 border-bottom: none !important;
545 /* Traits applied when variables or properties are editable */
547 .variable-or-property[editable] > .title > .value {
551 .variable-or-property[overridden] .title > .value {
552 /* Disallow editing this variable and all child properties. */
553 pointer-events: none;
556 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
557 * variables and properties */
559 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
563 .variable-or-property-non-writable-icon {
564 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
565 background-size: cover;
571 @media (min-resolution: 2dppx) {
572 .variable-or-property-non-writable-icon > .title:after {
573 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
577 .variable-or-property-frozen-label,
578 .variable-or-property-sealed-label,
579 .variable-or-property-non-extensible-label {
581 -moz-padding-end: 4px;
584 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
585 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
586 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
592 .variables-view-container[aligned-values] .title > .separator {
596 .variables-view-container[aligned-values] .title > .value {
601 .variables-view-container[aligned-values] .title > .element-value-input {
602 width: calc(70vw - 10px);
607 .variables-view-open-inspector {
608 -moz-box-ordinal-group: 1;
611 .variables-view-edit,
612 .variables-view-add-property {
613 -moz-box-ordinal-group: 2;
616 .variable-or-property-frozen-label,
617 .variable-or-property-sealed-label,
618 .variable-or-property-non-extensible-label,
619 .variable-or-property-non-writable-icon {
620 -moz-box-ordinal-group: 3;
623 .variables-view-delete {
624 -moz-box-ordinal-group: 4;
627 .variables-view-container[actions-first] .variables-view-delete,
628 .variables-view-container[actions-first] .variables-view-add-property,
629 .variables-view-container[actions-first] .variables-view-open-inspector {
630 -moz-box-ordinal-group: 0;
633 .variables-view-container[actions-first] [invisible] {
637 /* Variables and properties tooltips */
639 .variable-or-property > tooltip > label {
643 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
644 .variable-or-property[non-configurable] > tooltip > label.configurable,
645 .variable-or-property[non-writable] > tooltip > label.writable
646 .variable-or-property[non-extensible] > tooltip > label.extensible {
648 text-decoration: line-through;
651 .variable-or-property[overridden] > tooltip > label.overridden {
652 -moz-padding-start: 4px;
653 -moz-border-start: 1px dotted #9C9CFF;
656 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
657 -moz-padding-start: 4px;
658 -moz-border-start: 1px dotted #9C9CFF;
662 /* Variables and properties editing */
664 .variables-view-delete {
665 background: url("chrome://browser/skin/devtools/vview-delete.png");
666 background-size: cover;
671 @media (min-resolution: 2dppx) {
672 .variables-view-delete {
673 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
677 .variables-view-delete:hover {
678 background-position: 32px;
681 .variables-view-delete:active {
682 background-position: 16px;
685 .variable-or-property:focus > .title > .variables-view-delete {
686 /* background-position: 0px; */
689 .variables-view-edit {
690 background: url("chrome://browser/skin/devtools/vview-edit.png");
691 background-size: cover;
697 @media (min-resolution: 2dppx) {
698 .variables-view-edit {
699 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
703 .variables-view-edit:hover {
704 background-position: 32px;
707 .variables-view-edit:active {
708 background-position: 16px;
711 .variable-or-property:focus > .title > .variables-view-edit {
712 /* background-position: 0px; */
715 .variables-view-open-inspector {
716 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
717 background-size: cover;
723 .variables-view-open-inspector:hover {
724 background-position: 32px;
727 .variables-view-open-inspector:active {
728 background-position: 16px;
731 .variable-or-property:focus > .title > .variables-view-open-inspector {
732 /* background-position: 0px; */
735 /* Variables and properties input boxes */
737 .variable-or-property > .title > .separator + .element-value-input {
738 -moz-margin-start: -2px !important;
739 -moz-margin-end: 2px !important;
742 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
743 -moz-margin-start: 4px !important;
744 -moz-margin-end: 2px !important;
747 .element-name-input {
748 -moz-margin-start: -2px !important;
749 -moz-margin-end: 2px !important;
753 .element-value-input,
754 .element-name-input {
755 border: 1px solid #008484 !important;
759 /* Variables and properties searching */
761 .variable-or-property[unmatched] {
768 .graph-widget-container {
772 .graph-widget-canvas {
777 .graph-widget-canvas[input=hovering-background] {
781 .graph-widget-canvas[input=hovering-region] {
785 .graph-widget-canvas[input=hovering-selection-start-boundary],
786 .graph-widget-canvas[input=hovering-selection-end-boundary],
787 .graph-widget-canvas[input=adjusting-selection-boundary] {
791 .graph-widget-canvas[input=hovering-selection-contents] {
795 .graph-widget-canvas[input=dragging-selection-contents] {
799 .graph-widget-canvas ~ * {
800 pointer-events: none;
803 /* Line graph widget */
805 .line-graph-widget-canvas {
809 .line-graph-widget-gutter {
816 border-right: 1px solid #9C9CFF;
819 .line-graph-widget-gutter-line {
822 border-top: 1px solid;
823 transform: translateY(-1px);
826 .line-graph-widget-gutter-line[type=maximum] {
827 border-color: #008484;
830 .line-graph-widget-gutter-line[type=minimum] {
831 border-color: #FF0000;
834 .line-graph-widget-gutter-line[type=average] {
835 border-color: #FF9F00;
838 .line-graph-widget-tooltip {
843 -moz-padding-start: 6px;
844 -moz-padding-end: 6px;
845 transform: translateY(-50%);
850 .line-graph-widget-tooltip::before {
853 border-top: 3px solid transparent;
854 border-bottom: 3px solid transparent;
855 top: calc(50% - 3px);
858 .line-graph-widget-tooltip[arrow=start]::before {
859 -moz-border-end: 3px solid #9C9CFF;
863 .line-graph-widget-tooltip[arrow=end]::before {
864 -moz-border-start: 3px solid #9C9CFF;
868 .line-graph-widget-tooltip[type=maximum] {
869 left: calc(10px + 6px);
872 .line-graph-widget-tooltip[type=minimum] {
873 left: calc(10px + 6px);
876 .line-graph-widget-tooltip[type=average] {
880 .line-graph-widget-tooltip > [text=info] {
884 .line-graph-widget-tooltip > [text=value] {
885 -moz-margin-start: 3px;
888 .line-graph-widget-tooltip > [text=metric] {
889 -moz-margin-start: 1px;
893 .line-graph-widget-tooltip > [text=value],
894 .line-graph-widget-tooltip > [text=metric] {
895 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
896 -1px 0px rgba(255,255,255,0.6),
897 0px -1px rgba(255,255,255,0.6),
898 0px 1px rgba(255,255,255,0.6);*/
901 .line-graph-widget-tooltip[type=maximum] > [text=value] {
905 .line-graph-widget-tooltip[type=minimum] > [text=value] {
909 .line-graph-widget-tooltip[type=average] > [text=value] {
913 /* Bar graph widget */
915 .bar-graph-widget-canvas {
919 .bar-graph-widget-legend {
927 .bar-graph-widget-legend-item {
929 -moz-margin-end: 8px;
932 .bar-graph-widget-legend-item > [view="color"],
933 .bar-graph-widget-legend-item > [view="label"] {
934 vertical-align: middle;
937 .bar-graph-widget-legend-item > [view="color"] {
938 display: inline-block;
941 border: 1px solid #9C9CFF;
943 -moz-margin-end: 4px;
946 .bar-graph-widget-legend-item > [view="label"] {
947 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
948 -1px 0px rgba(255,255,255,0.8),
949 0px -1px rgba(255,255,255,0.8),
950 0px 1px rgba(255,255,255,0.8);*/
955 .generic-chart-container {
956 /* Hack: force hardware acceleration */
957 transform: translateZ(1px);
960 .generic-chart-container {
961 color: #A09090; /* Light foreground text */
964 .chart-colored-blob {
965 fill: #9C9CFF; /* Light content text */
980 .pie-chart-slice[largest] {
987 dominant-baseline: middle;
988 pointer-events: none;
995 .pie-chart-container[slices="1"] > .pie-chart-slice {
1001 transition: all 0.1s ease-out;
1004 .pie-chart-slice:not(:hover):not([focused]),
1005 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1006 transform: none !important;
1011 .table-chart-title {
1012 padding-bottom: 10px;
1022 .table-chart-grid:hover > .table-chart-row {
1023 transition: opacity 0.1s ease-in-out;
1026 .table-chart-grid:not(:hover) > .table-chart-row {
1027 transition: opacity 0.2s ease-in-out;
1030 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1031 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1035 .table-chart-row-box {
1038 -moz-margin-end: 10px;
1041 .table-chart-row-label {
1043 -moz-padding-end: 6px;
1047 .table-chart-totals {
1052 .table-chart-totals {
1053 border-top: 1px solid #A09090; /* Grey foreground text */
1056 .table-chart-summary-label {
1061 .table-chart-summary-label {
1062 color: #A09090; /* Light foreground text */
1069 .table-widget-body > .devtools-side-splitter {
1073 .table-widget-body {
1077 .table-widget-body {
1078 background: #000000; /* Background-Sidebar */
1081 .table-widget-body:-moz-locale-dir(ltr) {
1082 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1085 .table-widget-body:-moz-locale-dir(rtl) {
1086 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1089 .table-widget-body:-moz-locale-dir(ltr) {
1090 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1093 .table-widget-body:-moz-locale-dir(rtl) {
1094 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1097 /* Column Headers */
1099 .table-widget-column-header,
1100 .table-widget-cell {
1101 -moz-border-end: 1px solid #A09090;
1104 /* Table widget column header colors are taken from netmonitor.inc.css to match
1105 the look of both the tables. This needs to be updated along with netmonitor
1106 header colors in bug 951714 */
1108 .table-widget-column-header {
1109 background: rgba(0,0,0,0);
1115 padding: 8px 0 0 !important;
1118 font-weight: inherit !important;
1119 transition: background-color 0.1s ease-in-out;
1122 .table-widget-column-header:hover {
1123 background: #FFCF00;
1126 .table-widget-column-header:hover:active {
1127 background: #FF9F00;
1130 .table-widget-column-header:not(:active)[sorted] {
1131 background: #008484;
1134 .table-widget-column-header:not(:active)[sorted=ascending] {
1135 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1136 background-size: 100% 1px;
1137 background-repeat: no-repeat;
1140 .table-widget-column-header:not(:active)[sorted=descending] {
1141 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1142 background-size: 100% 1px;
1143 background-repeat: no-repeat;
1144 background-position: bottom;
1149 .table-widget-cell {
1151 margin: -1px 0 !important;
1153 background-clip: padding-box;
1155 -moz-user-focus: normal;
1158 .table-widget-cell {
1159 border-top: 1px solid #A09090;
1160 border-bottom: 1px solid #A09090;
1161 color: #FF9F00; /* Light foreground text */
1164 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1165 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1166 .table-widget-cell:not(.theme-selected)[odd] {
1167 background: #404000;
1170 .table-widget-cell:last-of-type {
1171 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1174 .table-widget-cell.flash-out {
1175 animation: flash-out 0.5s ease-in;
1178 @keyframes flash-out {
1180 background: #795900;
1184 /* Empty text and initial text */
1186 .table-widget-empty-text {
1190 margin-top: -20px !important;
1193 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1194 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1200 .tree-widget-container {
1207 -moz-margin-end: 40px;
1210 .tree-widget-container:-moz-focusring,
1211 .tree-widget-container *:-moz-focusring {
1212 outline-style: none;
1215 .tree-widget-empty-text {
1218 background: transparent;
1223 .tree-widget-container .tree-widget-item {
1224 padding: 2px 0px 4px;
1225 /* OSX has line-height 14px by default, which causes weird alignment issues
1226 * because of 20px high icons. thus making line-height consistent with that of
1229 line-height: 17px !important;
1230 display: inline-block;
1232 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1233 breaking in multiple lines */
1236 .tree-widget-container .tree-widget-children {
1242 .tree-widget-item[level="1"] {
1247 .tree-widget-item:before {
1252 margin: 3px 2px -3px;
1253 background-repeat: no-repeat;
1254 background-image: url("chrome://browser/skin/devtools/controls.png");
1255 background-size: 56px 28px;
1257 background-position: -28px -14px;
1260 .tree-widget-item:-moz-locale-dir(rtl):before {
1262 transform: scaleX(-1);
1265 .theme-light .tree-widget-item:before {
1266 background-position: 0 -14px;
1269 .tree-widget-item[empty]:before {
1270 background: transparent;
1273 .tree-widget-item[expanded]:before {
1274 background-position: -42px -14px;
1277 .theme-light .tree-widget-item[expanded]:before {
1278 background-position: -14px -14px;
1281 .tree-widget-item + ul {
1283 animation: collapse-tree-item 0.2s;
1287 .tree-widget-item[expanded] + ul {
1288 animation: expand-tree-item 0.3s;
1292 @keyframes collapse-tree-item {
1301 @keyframes expand-tree-item {
1310 @media (min-resolution: 2dppx) {
1311 .tree-widget-item:before {
1312 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1316 /* Indentation of child items in the tree */
1319 .tree-widget-item[level] + ul > li > .tree-widget-item {
1320 -moz-padding-start: 98px;
1324 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1325 -moz-padding-start: 14px;
1329 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1330 -moz-padding-start: 28px;
1334 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1335 -moz-padding-start: 42px;
1339 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1340 -moz-padding-start: 56px;
1344 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1345 -moz-padding-start: 70px;
1349 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1350 -moz-padding-start: 84px;
1353 /* Custom icons for certain tree items indicating the type of the item */
1355 .tree-widget-item[type]:after {
1360 -moz-margin-end: 4px;
1361 background-repeat: no-repeat;
1362 background-size: 20px auto;
1363 filter: url('filters.svg#invert');
1364 background-position: 0 0;
1365 background-size: auto 20px;
1368 .tree-widget-item:-moz-locale-dir(rtl):after {
1372 .theme-dark .tree-widget-item[type]:after {
1373 filter: url('filters.svg#invert-white');
1376 .tree-widget-item[type="dir"]:after {
1377 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1378 background-position: 2px 0;
1379 background-size: auto 16px;
1383 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1384 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1387 .tree-widget-item[type="url"]:after {
1388 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1389 background-size: auto 18px;
1393 /* === BEGIN manifest-editor.inc.css === */
1395 /* Manifest Editor overrides */
1397 .variables-view-container.manifest-editor {
1398 background-color: #000000;
1402 .manifest-editor .variable-or-property:focus > .title {
1403 /* background-color: #EDEDED;
1408 .manifest-editor .variables-view-property > .title > .name {
1409 /* color: #27406A; */
1412 .manifest-editor .variable-or-property > .title > label,
1413 .manifest-editor textbox {
1414 font-family: monospace;
1417 .manifest-editor .variable-or-property > .title > .token-string {
1418 /* color: #54BC6A; */
1422 .manifest-editor .variable-or-property > .title > .token-boolean,
1423 .manifest-editor .variable-or-property > .title > .token-number {
1424 /* color: #009BD4; */
1428 .manifest-editor .variable-or-property > .title > .token-undefined {
1432 .manifest-editor .variable-or-property > .title > .token-null {
1436 .manifest-editor .variable-or-property > .title > .token-other {
1440 .manifest-editor .variables-view-variable {
1441 border-bottom: none;
1444 .manifest-editor .variables-view-delete,
1445 .manifest-editor .variables-view-delete:hover,
1446 .manifest-editor .variables-view-delete:active,
1447 .manifest-editor .variable-or-property:focus .variables-view-delete,
1448 .manifest-editor .variables-view-add-property,
1449 .manifest-editor .variables-view-add-property:hover,
1450 .manifest-editor .variables-view-add-property:active,
1451 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1452 list-style-image: none;
1453 -moz-image-region: initial;
1456 .manifest-editor .variables-view-delete::before,
1457 .manifest-editor .variables-view-add-property::before {
1461 display: inline-block;
1462 background-size: 11px auto;
1465 .manifest-editor .variables-view-delete::before {
1466 background-image: url("app-manager/remove.svg");
1467 background-size: 12px auto;
1470 .manifest-editor .variables-view-add-property::before {
1471 background-image: url("app-manager/add.svg");
1472 -moz-margin-end: 2px;
1475 /* === END manifest-editor.inc.css === */
1477 /* === END widgets.inc.css === */