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 #A09090; /* Grey foreground text */
1075 .table-chart-summary-label {
1080 .table-chart-summary-label {
1081 color: #A09090; /* Light foreground text */
1088 .table-widget-body > .devtools-side-splitter {
1092 .table-widget-body {
1096 .table-widget-body {
1097 background: #000000; /* Background-Sidebar */
1100 .table-widget-body:-moz-locale-dir(ltr) {
1101 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1104 .table-widget-body:-moz-locale-dir(rtl) {
1105 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1108 .table-widget-body:-moz-locale-dir(ltr) {
1109 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1112 .table-widget-body:-moz-locale-dir(rtl) {
1113 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1116 /* Column Headers */
1118 .table-widget-column-header,
1119 .table-widget-cell {
1120 -moz-border-end: 1px solid #A09090;
1123 /* Table widget column header colors are taken from netmonitor.inc.css to match
1124 the look of both the tables. This needs to be updated along with netmonitor
1125 header colors in bug 951714 */
1127 .table-widget-column-header {
1128 background: rgba(0,0,0,0);
1134 padding: 8px 0 0 !important;
1137 font-weight: inherit !important;
1138 transition: background-color 0.1s ease-in-out;
1141 .table-widget-column-header:hover {
1142 background: #FFCF00;
1145 .table-widget-column-header:hover:active {
1146 background: #FF9F00;
1149 .table-widget-column-header:not(:active)[sorted] {
1150 background: #008484;
1153 .table-widget-column-header:not(:active)[sorted=ascending] {
1154 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1155 background-size: 100% 1px;
1156 background-repeat: no-repeat;
1159 .table-widget-column-header:not(:active)[sorted=descending] {
1160 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1161 background-size: 100% 1px;
1162 background-repeat: no-repeat;
1163 background-position: bottom;
1168 .table-widget-cell {
1170 margin: -1px 0 !important;
1172 background-clip: padding-box;
1174 -moz-user-focus: normal;
1177 .table-widget-cell {
1178 border-top: 1px solid #A09090;
1179 border-bottom: 1px solid #A09090;
1180 color: #FF9F00; /* Light foreground text */
1183 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1184 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1185 .table-widget-cell:not(.theme-selected)[odd] {
1186 background: #404000;
1189 .table-widget-cell:last-of-type {
1190 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1193 .table-widget-cell.flash-out {
1194 animation: flash-out 0.5s ease-in;
1197 @keyframes flash-out {
1199 background: #795900;
1203 /* Empty text and initial text */
1205 .table-widget-empty-text {
1209 margin-top: -20px !important;
1212 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1213 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1219 .tree-widget-container {
1226 -moz-margin-end: 40px;
1229 .tree-widget-container:-moz-focusring,
1230 .tree-widget-container *:-moz-focusring {
1231 outline-style: none;
1234 .tree-widget-empty-text {
1237 background: transparent;
1238 pointer-events: none;
1243 .tree-widget-container .tree-widget-item {
1244 padding: 2px 0px 4px;
1245 /* OSX has line-height 14px by default, which causes weird alignment issues
1246 * because of 20px high icons. thus making line-height consistent with that of
1249 line-height: 17px !important;
1250 display: inline-block;
1252 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1253 breaking in multiple lines */
1256 .tree-widget-container .tree-widget-children {
1262 .tree-widget-item[level="1"] {
1267 .tree-widget-item:before {
1272 margin: 3px 2px -3px;
1273 background-repeat: no-repeat;
1274 background-image: url("chrome://browser/skin/devtools/controls.png");
1275 background-size: 56px 28px;
1277 background-position: -28px -14px;
1280 .tree-widget-item:-moz-locale-dir(rtl):before {
1282 transform: scaleX(-1);
1285 .theme-light .tree-widget-item:before {
1286 background-position: 0 -14px;
1289 .tree-widget-item[empty]:before {
1290 background: transparent;
1293 .tree-widget-item[expanded]:before {
1294 background-position: -42px -14px;
1297 .theme-light .tree-widget-item[expanded]:before {
1298 background-position: -14px -14px;
1301 .tree-widget-item + ul {
1303 animation: collapse-tree-item 0.2s;
1307 .tree-widget-item[expanded] + ul {
1308 animation: expand-tree-item 0.3s;
1312 @keyframes collapse-tree-item {
1321 @keyframes expand-tree-item {
1330 @media (min-resolution: 2dppx) {
1331 .tree-widget-item:before {
1332 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1336 /* Indentation of child items in the tree */
1339 .tree-widget-item[level] + ul > li > .tree-widget-item {
1340 -moz-padding-start: 98px;
1344 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1345 -moz-padding-start: 14px;
1349 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1350 -moz-padding-start: 28px;
1354 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1355 -moz-padding-start: 42px;
1359 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1360 -moz-padding-start: 56px;
1364 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1365 -moz-padding-start: 70px;
1369 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1370 -moz-padding-start: 84px;
1373 /* Custom icons for certain tree items indicating the type of the item */
1375 .tree-widget-item[type]:after {
1380 -moz-margin-end: 4px;
1381 background-repeat: no-repeat;
1382 background-size: 20px auto;
1383 filter: url('filters.svg#invert');
1384 background-position: 0 0;
1385 background-size: auto 20px;
1388 .tree-widget-item:-moz-locale-dir(rtl):after {
1392 .theme-dark .tree-widget-item[type]:after {
1393 filter: url('filters.svg#invert-white');
1396 .tree-widget-item[type="dir"]:after {
1397 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1398 background-position: 2px 0;
1399 background-size: auto 16px;
1403 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1404 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1407 .tree-widget-item[type="url"]:after {
1408 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1409 background-size: auto 18px;
1413 /* === BEGIN manifest-editor.inc.css === */
1415 /* Manifest Editor overrides */
1417 .variables-view-container.manifest-editor {
1418 background-color: #000000;
1422 .manifest-editor .variable-or-property:focus > .title {
1423 /* background-color: #EDEDED;
1428 .manifest-editor .variables-view-property > .title > .name {
1429 /* color: #27406A; */
1432 .manifest-editor .variable-or-property > .title > label,
1433 .manifest-editor textbox {
1434 font-family: monospace;
1437 .manifest-editor .variable-or-property > .title > .token-string {
1438 /* color: #54BC6A; */
1442 .manifest-editor .variable-or-property > .title > .token-boolean,
1443 .manifest-editor .variable-or-property > .title > .token-number {
1444 /* color: #009BD4; */
1448 .manifest-editor .variable-or-property > .title > .token-undefined {
1452 .manifest-editor .variable-or-property > .title > .token-null {
1456 .manifest-editor .variable-or-property > .title > .token-other {
1460 .manifest-editor .variables-view-variable {
1461 border-bottom: none;
1464 .manifest-editor .variables-view-delete,
1465 .manifest-editor .variables-view-delete:hover,
1466 .manifest-editor .variables-view-delete:active,
1467 .manifest-editor .variable-or-property:focus .variables-view-delete,
1468 .manifest-editor .variables-view-add-property,
1469 .manifest-editor .variables-view-add-property:hover,
1470 .manifest-editor .variables-view-add-property:active,
1471 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1472 list-style-image: none;
1473 -moz-image-region: initial;
1476 .manifest-editor .variables-view-delete::before,
1477 .manifest-editor .variables-view-add-property::before {
1481 display: inline-block;
1482 background-size: 11px auto;
1485 .manifest-editor .variables-view-delete::before {
1486 background-image: url("app-manager/remove.svg");
1487 background-size: 12px auto;
1490 .manifest-editor .variables-view-add-property::before {
1491 background-image: url("app-manager/add.svg");
1492 -moz-margin-end: 2px;
1495 /* === END manifest-editor.inc.css === */
1497 /* === END widgets.inc.css === */