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-configurable]:not([pseudo-item]) > .title > .name {
565 border-bottom: 1px dashed #9C9CFF;
568 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
569 border-bottom: 1px dashed #FF0000;
572 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
573 border-bottom: 1px dashed #A09090;
576 .variable-or-property-non-writable-icon {
577 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
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");
586 background-size: 32px;
590 .variable-or-property-frozen-label,
591 .variable-or-property-sealed-label,
592 .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-container[actions-first] .variables-view-delete,
620 .variables-view-container[actions-first] .variables-view-open-inspector,
621 .variables-view-container[actions-first] .variables-view-add-property {
622 -moz-box-ordinal-group: 0;
625 .variables-view-container[actions-first] [invisible] {
629 /* Variables and properties tooltips */
631 .variable-or-property > tooltip > label {
635 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
636 .variable-or-property[non-configurable] > tooltip > label.configurable,
637 .variable-or-property[non-writable] > tooltip > label.writable
638 .variable-or-property[non-extensible] > tooltip > label.extensible {
640 text-decoration: line-through;
643 .variable-or-property[overridden] > tooltip > label.overridden {
644 -moz-padding-start: 4px;
645 -moz-border-start: 1px dotted #9C9CFF;
648 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
649 -moz-padding-start: 4px;
650 -moz-border-start: 1px dotted #9C9CFF;
654 /* Variables and properties editing */
656 .variables-view-delete {
657 list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
658 -moz-image-region: rect(0,16px,16px,0);
661 .variables-view-delete:hover {
662 -moz-image-region: rect(0,48px,16px,32px);
665 .variables-view-delete:active {
666 -moz-image-region: rect(0,32px,16px,16px);
669 .variable-or-property:focus .variables-view-delete {
670 /* -moz-image-region: rect(0,16px,16px,0); */
673 .variables-view-edit {
674 list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
675 -moz-image-region: rect(0,16px,16px,0);
680 .variables-view-edit:hover {
681 -moz-image-region: rect(0,48px,16px,32px);
684 .variables-view-edit:active {
685 -moz-image-region: rect(0,32px,16px,16px);
688 .variable-or-property:focus .variables-view-edit {
689 /* -moz-image-region: rect(0,16px,16px,0); */
692 .variables-view-open-inspector {
693 list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
694 -moz-image-region: rect(0,16px,16px,0);
698 .variables-view-open-inspector:hover {
699 -moz-image-region: rect(0,48px,16px,32px);
702 .variables-view-open-inspector:active {
703 -moz-image-region: rect(0,32px,16px,16px);
706 .variable-or-property:focus .variables-view-open-inspector {
707 /* -moz-image-region: rect(0,16px,16px,0); */
710 .variables-view-throbber {
711 background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
716 .element-value-input {
717 -moz-margin-start: -2px !important;
718 -moz-margin-end: 2px !important;
721 .element-name-input {
722 -moz-margin-start: -2px !important;
723 -moz-margin-end: 2px !important;
727 .element-value-input,
728 .element-name-input {
729 border: 1px solid #008484 !important;
733 /* Variables and properties searching */
735 .variables-view-searchinput {
739 .variable-or-property[unmatched] {
744 /* Expand/collapse arrow */
747 background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
750 -moz-margin-start: 5px;
751 -moz-margin-end: 5px;
754 .variables-view-scope > .title > .arrow {
755 background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
759 background-image: url("chrome://global/skin/tree/twisty-open.gif");
762 .variables-view-scope > .title > .arrow[open] {
763 background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
772 .generic-chart-container {
773 /* Hack: force hardware acceleration */
774 transform: translateZ(1px);
777 .generic-chart-container {
778 color: #A09090; /* Light foreground text */
781 .chart-colored-blob {
782 fill: #9C9CFF; /* Light content text */
797 .pie-chart-slice[largest] {
804 dominant-baseline: middle;
805 pointer-events: none;
812 .pie-chart-container[slices="1"] > .pie-chart-slice {
818 transition: all 0.1s ease-out;
821 .pie-chart-slice:not(:hover):not([focused]),
822 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
823 transform: none !important;
829 padding-bottom: 10px;
839 .table-chart-grid:hover > .table-chart-row {
840 transition: opacity 0.1s ease-in-out;
843 .table-chart-grid:not(:hover) > .table-chart-row {
844 transition: opacity 0.2s ease-in-out;
847 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
848 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
852 .table-chart-row-box {
855 -moz-margin-end: 10px;
858 .table-chart-row-label {
860 -moz-padding-end: 6px;
864 .table-chart-totals {
869 .table-chart-totals {
870 border-top: 1px solid #A09090; /* Grey foreground text */
873 .table-chart-summary-label {
878 .table-chart-summary-label {
879 color: #A09090; /* Light foreground text */
882 /* === BEGIN manifest-editor.inc.css === */
884 /* Manifest Editor overrides */
886 .variables-view-container.manifest-editor {
887 background-color: #000000;
891 .manifest-editor .variable-or-property:focus > .title {
892 /* background-color: #EDEDED;
897 .manifest-editor .variables-view-property > .title > .name {
898 /* color: #27406A; */
901 .manifest-editor .variable-or-property > .title > label,
902 .manifest-editor textbox {
903 font-family: monospace;
906 .manifest-editor .variable-or-property > .title > .token-string {
907 /* color: #54BC6A; */
911 .manifest-editor .variable-or-property > .title > .token-boolean,
912 .manifest-editor .variable-or-property > .title > .token-number {
913 /* color: #009BD4; */
917 .manifest-editor .variable-or-property > .title > .token-undefined {
921 .manifest-editor .variable-or-property > .title > .token-null {
925 .manifest-editor .variable-or-property > .title > .token-other {
929 .manifest-editor .variables-view-variable {
933 .manifest-editor .variables-view-delete,
934 .manifest-editor .variables-view-delete:hover,
935 .manifest-editor .variables-view-delete:active,
936 .manifest-editor .variable-or-property:focus .variables-view-delete,
937 .manifest-editor .variables-view-add-property,
938 .manifest-editor .variables-view-add-property:hover,
939 .manifest-editor .variables-view-add-property:active,
940 .manifest-editor .variable-or-property:focus .variables-view-add-property {
941 list-style-image: none;
942 -moz-image-region: initial;
945 .manifest-editor .variables-view-delete::before,
946 .manifest-editor .variables-view-add-property::before {
950 display: inline-block;
951 background-size: 11px auto;
954 .manifest-editor .variables-view-delete::before {
955 background-image: url("app-manager/remove.svg");
956 background-size: 12px auto;
959 .manifest-editor .variables-view-add-property::before {
960 background-image: url("app-manager/add.svg");
961 -moz-margin-end: 2px;
964 /* === END manifest-editor.inc.css === */
966 /* === END widgets.inc.css === */