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 .devtools-main-content {
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) */
37 @media (max-width: 700px) {
38 .devtools-responsive-container {
39 -moz-box-orient: vertical;
42 .devtools-responsive-container > .devtools-side-splitter {
48 /* In some edge case the cursor is not changed to n-resize */
52 .devtools-responsive-container > .devtools-sidebar-tabs {
58 /* BreacrumbsWidget */
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 */
69 background: transparent;
84 .scrollbutton-up > .toolbarbutton-icon,
85 .scrollbutton-down > .toolbarbutton-icon {
89 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
90 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
93 .scrollbutton-up[disabled] > .toolbarbutton-icon,
94 .scrollbutton-down[disabled] > .toolbarbutton-icon {
97 .scrollbutton-up:-moz-locale-dir(ltr) {
98 border-top-right-radius: 0;
99 border-bottom-right-radius: 0;
102 .scrollbutton-down:-moz-locale-dir(ltr) {
103 border-top-left-radius: 0;
104 border-bottom-left-radius: 0;
107 .scrollbutton-up:-moz-locale-dir(rtl) {
108 border-top-left-radius: 0;
109 border-bottom-left-radius: 0;
112 .scrollbutton-down:-moz-locale-dir(rtl) {
113 border-top-right-radius: 0;
114 border-bottom-right-radius: 0;
117 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
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 var(--theme-sidebar-background);
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 var(--theme-sidebar-background);
133 .scrollbutton-up[disabled],
134 .scrollbutton-down[disabled] {
136 border-color: transparent;
140 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
141 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
142 /* transform: scaleX(-1); */
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.
149 .breadcrumb-separator-container {
155 #breadcrumb-separator-before,
156 #breadcrumb-separator-after,
157 #breadcrumb-separator-normal {
163 #breadcrumb-separator-before,
164 #breadcrumb-separator-after:after {
165 background: var(--theme-selection-background);
168 #breadcrumb-separator-after,
169 #breadcrumb-separator-before:after {
170 background: var(--theme-toolbar-background);
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).
177 #breadcrumb-separator-normal {
178 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
179 background-size: 12px 24px;
182 /* Fake a triangle by rotating a rectangle inside the elements */
183 #breadcrumb-separator-before:after,
184 #breadcrumb-separator-after:after {
189 transform: translateX(-18px) rotate(45deg);
190 box-sizing: border-box;
193 .breadcrumbs-widget-item {
194 background-color: var(--theme-toolbar-background);
198 padding: 0 8px 0 20px;
202 color: var(--theme-content-color1);
205 .breadcrumbs-widget-item:hover {
206 background-color: var(--theme-hover-background);
207 color: var(--theme-hover-color);
210 .breadcrumbs-widget-item[checked]:not(:hover) {
211 background-color: var(--theme-selection-background);
212 color: var(--theme-selection-color);
215 .breadcrumbs-widget-item[siblings-menu-open],
216 .breadcrumbs-widget-item:active {
217 background-color: #FF9F00;
221 .breadcrumbs-widget-item > .button-box {
227 .breadcrumbs-widget-item:not([checked]) {
228 background-image: -moz-element(#breadcrumb-separator-normal);
229 background-repeat: no-repeat;
230 background-position: center left;
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;
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 */
246 .breadcrumbs-widget-item:first-child {
247 background-image: none;
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.
253 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
254 padding: 0 20px 0 8px;
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;
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);
268 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
269 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
270 transform: translateX(-5px) rotate(45deg);
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: var(--theme-highlight-lightorange);
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: var(--theme-hover-color) !important;
287 .breadcrumbs-widget-item {
288 color: var(--theme-highlight-lightorange);
291 .breadcrumbs-widget-item-id {
292 color: var(--theme-body-color-alt);
295 .breadcrumbs-widget-item-classes {
296 color: var(--theme-content-color1);
299 .breadcrumbs-widget-item-pseudo-classes {
300 color: var(--theme-highlight-lightorange);
303 /* SimpleListWidget */
305 .simple-list-widget-container {
306 /* Hack: force hardware acceleration */
307 transform: translateZ(1px);
310 .simple-list-widget-item.selected {
311 background-color: var(--theme-selection-background);
312 color: var(--theme-selection-color);
315 .simple-list-widget-item:not(.selected):hover {
316 background-color: var(--theme-hover-background);
317 color: var(--theme-hover-color);
320 .simple-list-widget-perma-text,
321 .simple-list-widget-empty-text {
322 color: var(--theme-body-color-alt);
328 .fast-list-widget-container {
329 /* Hack: force hardware acceleration */
330 transform: translateZ(1px);
333 /* dark/light theme */
334 .fast-list-widget-empty-text {
337 color: var(--theme-body-color-alt);
342 /* SideMenuWidget container */
344 .side-menu-widget-container {
345 /* Hack: force hardware acceleration */
346 transform: translateZ(1px);
349 .side-menu-widget-container:-moz-locale-dir(ltr),
350 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
353 .side-menu-widget-container:-moz-locale-dir(rtl),
354 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
357 .side-menu-widget-group {
358 /* To allow visibility of the dark margin shadow. */
359 /* -moz-margin-end: 1px; */
362 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
363 /* To compensate for the arrow image's dark margin. */
364 /* -moz-margin-end: -1px; */
367 /* SideMenuWidget groups */
369 .side-menu-widget-group-title {
371 background-color: var(--theme-contrastsidebar-background);
372 color: var(--theme-contrastsidebar-color);
375 /* SideMenuWidget items */
377 .side-menu-widget-item {
378 border-top: 1px solid #9C9CFF;
379 /* To compensate for the top and bottom borders */
382 background-clip: padding-box;
385 .side-menu-widget-item:last-of-type {
386 border-bottom: 1px solid #9C9CFF;
389 .side-menu-widget-item.selected {
390 background-color: var(--theme-selection-background);
391 color: var(--theme-selection-color);
394 .side-menu-widget-item-arrow {
395 -moz-margin-start: -7px;
396 width: 7px; /* The image's width is 7 pixels */
397 /* Cover the border of the side-menu-widget-item */
402 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
403 background-size: auto, 1px 100%;
404 background-repeat: no-repeat;
407 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
408 background-position: center right;
411 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
412 background-position: center left;
415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
416 background-image: url("itemArrow-ltr.svg");
419 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
420 background-image: url("itemArrow-rtl.svg");
423 /* SideMenuWidget items contents */
425 .side-menu-widget-item-contents {
427 /* To avoid having content overlapping the arrow image. */
428 -moz-padding-end: 8px;
431 .side-menu-widget-item-other {
432 /* To avoid having content overlapping the arrow image. */
433 -moz-padding-end: 8px;
434 /* To compensate for the .side-menu-widget-item-contents padding. */
435 -moz-margin-start: -4px;
436 -moz-margin-end: -8px;
437 color: var(--theme-selection-color);
440 .side-menu-widget-item-other.selected {
441 background-color: var(--theme-selection-background);
442 color: var(--theme-selection-color);
445 .side-menu-widget-item-other:first-of-type {
447 /* border-top-left-radius: 4px; */
450 .side-menu-widget-item-other:last-of-type {
454 .side-menu-widget-item-other:not(.selected) > label {
458 /* SideMenuWidget checkboxes */
460 .side-menu-widget-group-checkbox {
462 -moz-margin-end: 4px;
465 .side-menu-widget-item-checkbox {
467 -moz-margin-start: 4px;
468 -moz-margin-end: -4px;
471 /* SideMenuWidget misc */
473 .theme-dark .side-menu-widget-container,
474 .theme-dark .side-menu-widget-empty-text {
475 background-color: var(--theme-toolbar-background);
478 .side-menu-widget-empty-text {
484 .variables-view-container:not([empty]) {
485 /* Hack: force hardware acceleration */
486 transform: translateZ(1px);
489 .variables-view-empty-notice {
490 color: var(--theme-body-color-alt);
494 .variables-view-scope:focus > .title,
495 .theme-dark .variable-or-property:focus > .title {
496 background-color: var(--theme-selection-background);
497 color: var(--theme-selection-color);
500 .variables-view-scope > .title {
501 background-color: #A09090;
505 /* Generic variables traits */
507 .variables-view-variable:not(:last-child) {
508 border-bottom: 1px solid #A09090;
511 .variables-view-variable > .title > .name {
515 /* Generic variables *and* properties traits */
517 .variable-or-property:focus > .title > label {
518 color: inherit !important;
521 .variables-view-container .theme-twisty {
525 .variable-or-property > .title > .theme-twisty {
526 -moz-margin-start: 5px;
529 .variable-or-property:not([untitled]) > .variables-view-element-details {
530 -moz-margin-start: 7px;
533 /* Traits applied when variables or properties are changed or overridden */
535 .variable-or-property:not([overridden]) {
536 transition: background 1s ease-in-out, color 1s ease-in-out;
539 .variable-or-property:not([overridden])[changed] {
541 transition-duration: .4s;
544 .variable-or-property[overridden] {
545 background: rgba(160,144,144,0.0.5);
548 .variable-or-property[overridden] .title > label {
549 /* Cross out the title for this variable and all child properties. */
551 text-decoration: line-through;
552 border-bottom: none !important;
557 /* Traits applied when variables or properties are editable */
559 .variable-or-property[editable] > .title > .value {
563 .variable-or-property[overridden] .title > .value {
564 /* Disallow editing this variable and all child properties. */
565 pointer-events: none;
568 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
569 * variables and properties */
571 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
575 .variable-or-property-non-writable-icon {
576 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
577 background-size: cover;
583 @media (min-resolution: 2dppx) {
584 .variable-or-property-non-writable-icon > .title:after {
585 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
589 .variable-or-property-frozen-label,
590 .variable-or-property-sealed-label,
591 .variable-or-property-non-extensible-label {
593 -moz-padding-end: 4px;
596 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
597 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
598 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
604 .variables-view-container[aligned-values] .title > .separator {
608 .variables-view-container[aligned-values] .title > .value {
613 .variables-view-container[aligned-values] .title > .element-value-input {
614 width: calc(70vw - 10px);
619 .variables-view-open-inspector {
620 -moz-box-ordinal-group: 1;
623 .variables-view-edit,
624 .variables-view-add-property {
625 -moz-box-ordinal-group: 2;
628 .variable-or-property-frozen-label,
629 .variable-or-property-sealed-label,
630 .variable-or-property-non-extensible-label,
631 .variable-or-property-non-writable-icon {
632 -moz-box-ordinal-group: 3;
635 .variables-view-delete {
636 -moz-box-ordinal-group: 4;
639 .variables-view-container[actions-first] .variables-view-delete,
640 .variables-view-container[actions-first] .variables-view-add-property,
641 .variables-view-container[actions-first] .variables-view-open-inspector {
642 -moz-box-ordinal-group: 0;
645 .variables-view-container[actions-first] [invisible] {
649 /* Variables and properties tooltips */
651 .variable-or-property > tooltip > label {
655 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
656 .variable-or-property[non-configurable] > tooltip > label.configurable,
657 .variable-or-property[non-writable] > tooltip > label.writable
658 .variable-or-property[non-extensible] > tooltip > label.extensible {
660 text-decoration: line-through;
663 .variable-or-property[overridden] > tooltip > label.overridden {
664 -moz-padding-start: 4px;
665 -moz-border-start: 1px dotted #9C9CFF;
668 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
669 -moz-padding-start: 4px;
670 -moz-border-start: 1px dotted #9C9CFF;
674 /* Variables and properties editing */
676 .variables-view-delete {
677 background: url("chrome://browser/skin/devtools/vview-delete.png");
678 background-size: cover;
683 @media (min-resolution: 2dppx) {
684 .variables-view-delete {
685 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
689 .variables-view-delete:hover {
690 background-position: 32px;
693 .variables-view-delete:active {
694 background-position: 16px;
697 .variable-or-property:focus > .title > .variables-view-delete {
698 /* background-position: 0px; */
701 .variables-view-edit {
702 background: url("chrome://browser/skin/devtools/vview-edit.png");
703 background-size: cover;
709 @media (min-resolution: 2dppx) {
710 .variables-view-edit {
711 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
715 .variables-view-edit:hover {
716 background-position: 32px;
719 .variables-view-edit:active {
720 background-position: 16px;
723 .variable-or-property:focus > .title > .variables-view-edit {
724 /* background-position: 0px; */
727 .variables-view-open-inspector {
728 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
729 background-size: cover;
735 .variables-view-open-inspector:hover {
736 background-position: 32px;
739 .variables-view-open-inspector:active {
740 background-position: 16px;
743 .variable-or-property:focus > .title > .variables-view-open-inspector {
744 /* background-position: 0px; */
747 /* Variables and properties input boxes */
749 .variable-or-property > .title > .separator + .element-value-input {
750 -moz-margin-start: -2px !important;
751 -moz-margin-end: 2px !important;
754 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
755 -moz-margin-start: 4px !important;
756 -moz-margin-end: 2px !important;
759 .element-name-input {
760 -moz-margin-start: -2px !important;
761 -moz-margin-end: 2px !important;
765 .element-value-input,
766 .element-name-input {
767 border: 1px solid #008484 !important;
771 /* Variables and properties searching */
773 .variable-or-property[unmatched] {
780 .graph-widget-container {
784 .graph-widget-canvas {
789 .graph-widget-canvas[input=hovering-background] {
793 .graph-widget-canvas[input=hovering-region] {
797 .graph-widget-canvas[input=hovering-selection-start-boundary],
798 .graph-widget-canvas[input=hovering-selection-end-boundary],
799 .graph-widget-canvas[input=adjusting-selection-boundary] {
803 .graph-widget-canvas[input=hovering-selection-contents] {
807 .graph-widget-canvas[input=dragging-selection-contents] {
811 /* Line graph widget */
813 .line-graph-widget-gutter {
820 border-right: 1px solid #9C9CFF;
821 pointer-events: none;
824 .line-graph-widget-gutter-line {
827 border-top: 1px solid;
830 .line-graph-widget-gutter-line[type=maximum] {
831 border-color: #008484;
834 .line-graph-widget-gutter-line[type=minimum] {
835 border-color: #FF0000;
838 .line-graph-widget-gutter-line[type=average] {
839 border-color: #FF9F00;
842 .line-graph-widget-tooltip {
847 -moz-padding-start: 6px;
848 -moz-padding-end: 6px;
849 transform: translateY(-50%);
852 pointer-events: none;
855 .line-graph-widget-tooltip[with-arrows=true]::before {
858 border-top: 3px solid transparent;
859 border-bottom: 3px solid transparent;
860 top: calc(50% - 3px);
863 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
864 -moz-border-end: 3px solid #9C9CFF;
868 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
869 -moz-border-start: 3px solid #9C9CFF;
873 .line-graph-widget-tooltip[type=maximum] {
877 .line-graph-widget-tooltip[type=minimum] {
881 .line-graph-widget-tooltip[type=average] {
885 .line-graph-widget-tooltip[type=maximum][with-arrows=true] {
889 .line-graph-widget-tooltip[type=minimum][with-arrows=true] {
893 .line-graph-widget-tooltip[type=average][with-arrows=true] {
897 .line-graph-widget-tooltip > [text=info] {
901 .line-graph-widget-tooltip > [text=value] {
902 -moz-margin-start: 3px;
905 .line-graph-widget-tooltip > [text=metric] {
906 -moz-margin-start: 1px;
910 .line-graph-widget-tooltip > [text=value],
911 .line-graph-widget-tooltip > [text=metric] {
912 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
913 -1px 0px rgba(255,255,255,0.6),
914 0px -1px rgba(255,255,255,0.6),
915 0px 1px rgba(255,255,255,0.6);*/
918 .line-graph-widget-tooltip[type=maximum] > [text=value] {
922 .line-graph-widget-tooltip[type=minimum] > [text=value] {
926 .line-graph-widget-tooltip[type=average] > [text=value] {
930 /* Bar graph widget */
932 .bar-graph-widget-canvas {
936 .bar-graph-widget-legend {
942 pointer-events: none;
945 .bar-graph-widget-legend-item {
947 -moz-margin-end: 8px;
950 .bar-graph-widget-legend-item > [view="color"],
951 .bar-graph-widget-legend-item > [view="label"] {
952 vertical-align: middle;
955 .bar-graph-widget-legend-item > [view="color"] {
956 display: inline-block;
959 border: 1px solid #9C9CFF;
961 -moz-margin-end: 4px;
962 pointer-events: none;
965 .bar-graph-widget-legend-item > [view="label"] {
966 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
967 -1px 0px rgba(255,255,255,0.8),
968 0px -1px rgba(255,255,255,0.8),
969 0px 1px rgba(255,255,255,0.8);*/
974 .generic-chart-container {
975 /* Hack: force hardware acceleration */
976 transform: translateZ(1px);
979 .generic-chart-container {
980 color: var(--theme-body-color-alt);
983 .chart-colored-blob {
984 fill: var(--theme-highlight-blue);
985 background: var(--theme-highlight-blue);
999 .pie-chart-slice[largest] {
1005 text-anchor: middle;
1006 dominant-baseline: middle;
1007 pointer-events: none;
1014 .pie-chart-container[slices="1"] > .pie-chart-slice {
1020 transition: all 0.1s ease-out;
1023 .pie-chart-slice:not(:hover):not([focused]),
1024 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1025 transform: none !important;
1030 .table-chart-title {
1031 padding-bottom: 10px;
1041 .table-chart-grid:hover > .table-chart-row {
1042 transition: opacity 0.1s ease-in-out;
1045 .table-chart-grid:not(:hover) > .table-chart-row {
1046 transition: opacity 0.2s ease-in-out;
1049 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1050 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1054 .table-chart-row-box {
1057 -moz-margin-end: 10px;
1060 .table-chart-row-label {
1062 -moz-padding-end: 6px;
1066 .table-chart-totals {
1071 .table-chart-totals {
1072 border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1075 .table-chart-summary-label {
1080 .table-chart-summary-label {
1081 color: var(--theme-content-color2);
1088 .table-widget-body > .devtools-side-splitter {
1092 .table-widget-body {
1095 background: var(--theme-sidebar-background);
1098 .table-widget-body:-moz-locale-dir(ltr) {
1099 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1102 .table-widget-body:-moz-locale-dir(rtl) {
1103 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1106 .table-widget-body:-moz-locale-dir(ltr) {
1107 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1110 .table-widget-body:-moz-locale-dir(rtl) {
1111 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1114 /* Column Headers */
1116 .table-widget-column-header,
1117 .table-widget-cell {
1118 -moz-border-end: 1px solid #A09090;
1121 /* Table widget column header colors are taken from netmonitor.inc.css to match
1122 the look of both the tables. This needs to be updated along with netmonitor
1123 header colors in bug 951714 */
1125 .table-widget-column-header {
1126 background: rgba(0,0,0,0);
1132 padding: 8px 0 0 !important;
1135 font-weight: inherit !important;
1136 transition: background-color 0.1s ease-in-out;
1139 .table-widget-column-header:hover {
1140 background: #FFCF00;
1143 .table-widget-column-header:hover:active {
1144 background: #FF9F00;
1147 .table-widget-column-header:not(:active)[sorted] {
1148 background: #008484;
1151 .table-widget-column-header:not(:active)[sorted=ascending] {
1152 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1153 background-size: 100% 1px;
1154 background-repeat: no-repeat;
1157 .table-widget-column-header:not(:active)[sorted=descending] {
1158 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1159 background-size: 100% 1px;
1160 background-repeat: no-repeat;
1161 background-position: bottom;
1166 .table-widget-cell {
1168 margin: -1px 0 !important;
1170 background-clip: padding-box;
1172 -moz-user-focus: normal;
1175 .table-widget-cell {
1176 border-top: 1px solid #A09090;
1177 border-bottom: 1px solid #A09090;
1178 color: var(--theme-body-color);
1181 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1182 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1183 .table-widget-cell:not(.theme-selected)[odd] {
1184 background: #404000;
1187 .table-widget-cell:last-of-type {
1188 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1191 .table-widget-cell.flash-out {
1192 animation: flash-out 0.5s ease-in;
1195 @keyframes flash-out {
1197 background: var(--theme-contrast-background2);
1201 /* Empty text and initial text */
1203 .table-widget-empty-text {
1207 margin-top: -20px !important;
1210 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1211 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1217 .tree-widget-container {
1224 -moz-margin-end: 40px;
1227 .tree-widget-container:-moz-focusring,
1228 .tree-widget-container *:-moz-focusring {
1229 outline-style: none;
1232 .tree-widget-empty-text {
1235 background: transparent;
1236 pointer-events: none;
1241 .tree-widget-container .tree-widget-item {
1242 padding: 2px 0px 4px;
1243 /* OSX has line-height 14px by default, which causes weird alignment issues
1244 * because of 20px high icons. thus making line-height consistent with that of
1247 line-height: 17px !important;
1248 display: inline-block;
1250 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1251 breaking in multiple lines */
1254 .tree-widget-container .tree-widget-children {
1260 .tree-widget-item[level="1"] {
1265 .tree-widget-item:before {
1270 margin: 3px 2px -3px;
1271 background-repeat: no-repeat;
1272 background-image: url("chrome://browser/skin/devtools/controls.png");
1273 background-size: 56px 28px;
1275 background-position: -28px -14px;
1278 .tree-widget-item:-moz-locale-dir(rtl):before {
1280 transform: scaleX(-1);
1283 .theme-light .tree-widget-item:before {
1284 background-position: 0 -14px;
1287 .tree-widget-item[empty]:before {
1288 background: transparent;
1291 .tree-widget-item[expanded]:before {
1292 background-position: -42px -14px;
1295 .theme-light .tree-widget-item[expanded]:before {
1296 background-position: -14px -14px;
1299 .tree-widget-item + ul {
1301 animation: collapse-tree-item 0.2s;
1305 .tree-widget-item[expanded] + ul {
1306 animation: expand-tree-item 0.3s;
1310 @keyframes collapse-tree-item {
1319 @keyframes expand-tree-item {
1328 @media (min-resolution: 2dppx) {
1329 .tree-widget-item:before {
1330 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1334 /* Indentation of child items in the tree */
1337 .tree-widget-item[level] + ul > li > .tree-widget-item {
1338 -moz-padding-start: 98px;
1342 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1343 -moz-padding-start: 14px;
1347 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1348 -moz-padding-start: 28px;
1352 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1353 -moz-padding-start: 42px;
1357 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1358 -moz-padding-start: 56px;
1362 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1363 -moz-padding-start: 70px;
1367 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1368 -moz-padding-start: 84px;
1371 /* Custom icons for certain tree items indicating the type of the item */
1373 .tree-widget-item[type]:after {
1378 -moz-margin-end: 4px;
1379 background-repeat: no-repeat;
1380 background-size: 20px auto;
1381 filter: url('filters.svg#invert');
1382 background-position: 0 0;
1383 background-size: auto 20px;
1386 .tree-widget-item:-moz-locale-dir(rtl):after {
1390 .theme-dark .tree-widget-item[type]:after {
1391 filter: url('filters.svg#invert-white');
1394 .tree-widget-item[type="dir"]:after {
1395 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1396 background-position: 2px 0;
1397 background-size: auto 16px;
1401 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1402 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1405 .tree-widget-item[type="url"]:after {
1406 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1407 background-size: auto 18px;
1411 /* === BEGIN manifest-editor.inc.css === */
1413 /* Manifest Editor overrides */
1415 .variables-view-container.manifest-editor {
1416 background-color: #000000;
1420 .manifest-editor .variable-or-property:focus > .title {
1421 /* background-color: #EDEDED;
1426 .manifest-editor .variables-view-property > .title > .name {
1427 /* color: #27406A; */
1430 .manifest-editor .variable-or-property > .title > label,
1431 .manifest-editor textbox {
1432 font-family: monospace;
1435 .manifest-editor .variable-or-property > .title > .token-string {
1436 /* color: #54BC6A; */
1440 .manifest-editor .variable-or-property > .title > .token-boolean,
1441 .manifest-editor .variable-or-property > .title > .token-number {
1442 /* color: #009BD4; */
1446 .manifest-editor .variable-or-property > .title > .token-undefined {
1450 .manifest-editor .variable-or-property > .title > .token-null {
1454 .manifest-editor .variable-or-property > .title > .token-other {
1458 .manifest-editor .variables-view-variable {
1459 border-bottom: none;
1462 .manifest-editor .variables-view-delete,
1463 .manifest-editor .variables-view-delete:hover,
1464 .manifest-editor .variables-view-delete:active,
1465 .manifest-editor .variable-or-property:focus .variables-view-delete,
1466 .manifest-editor .variables-view-add-property,
1467 .manifest-editor .variables-view-add-property:hover,
1468 .manifest-editor .variables-view-add-property:active,
1469 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1470 list-style-image: none;
1471 -moz-image-region: initial;
1474 .manifest-editor .variables-view-delete::before,
1475 .manifest-editor .variables-view-add-property::before {
1479 display: inline-block;
1480 background-size: 11px auto;
1483 .manifest-editor .variables-view-delete::before {
1484 background-image: url("app-manager/remove.svg");
1485 background-size: 12px auto;
1488 .manifest-editor .variables-view-add-property::before {
1489 background-image: url("app-manager/add.svg");
1490 -moz-margin-end: 2px;
1493 /* === END manifest-editor.inc.css === */
1495 /* === END widgets.inc.css === */