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 /* BreacrumbsWidget */
23 .breadcrumbs-widget-container {
24 -moz-margin-start: 2px;
25 -moz-margin-start: 2px;
26 max-height: 25px; /* Set max-height for proper sizing on linux */
27 height: 25px; /* Set height to prevent starting small waiting for content */
28 /* A fake 1px-shadow is included in the border-images of the
29 breadcrumbs-widget-items, to match toolbar-buttons style.
30 This negative margin compensates the extra row of pixels created
37 background: transparent;
52 .scrollbutton-up > .toolbarbutton-icon,
53 .scrollbutton-down > .toolbarbutton-icon {
57 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
58 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
61 .scrollbutton-up[disabled] > .toolbarbutton-icon,
62 .scrollbutton-down[disabled] > .toolbarbutton-icon {
65 .scrollbutton-up:-moz-locale-dir(ltr) {
66 border-top-right-radius: 0;
67 border-bottom-right-radius: 0;
70 .scrollbutton-down:-moz-locale-dir(ltr) {
71 border-top-left-radius: 0;
72 border-bottom-left-radius: 0;
75 .scrollbutton-up:-moz-locale-dir(rtl) {
76 border-top-left-radius: 0;
77 border-bottom-left-radius: 0;
80 .scrollbutton-down:-moz-locale-dir(rtl) {
81 border-top-right-radius: 0;
82 border-bottom-right-radius: 0;
85 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
87 .scrollbutton-up:-moz-locale-dir(ltr),
88 .scrollbutton-down:-moz-locale-dir(rtl) {
89 border-right: solid 1px rgba(255, 255, 255, .1);
90 border-left: solid 1px transparent;
91 box-shadow: 3px 0px 3px -3px #181d20;
94 .scrollbutton-down:-moz-locale-dir(ltr),
95 .scrollbutton-up:-moz-locale-dir(rtl) {
96 border-right: solid 1px transparent;
97 border-left: solid 1px rgba(255, 255, 255, .1);
98 box-shadow: -3px 0px 3px -3px #181d20;
101 .scrollbutton-up[disabled],
102 .scrollbutton-down[disabled] {
104 border-color: transparent;
108 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
109 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
110 /* transform: scaleX(-1); */
113 /* The breadcrumb separator elements are used as background images with
114 * -moz-element, so we position them offscreen since we don't care about
115 * seeing the original elements.
117 .breadcrumb-separator-container {
123 #breadcrumb-separator-before,
124 #breadcrumb-separator-after,
125 #breadcrumb-separator-normal {
131 #breadcrumb-separator-before,
132 #breadcrumb-separator-after:after {
133 background: #008484; /* Select Highlight Blue */
136 #breadcrumb-separator-after,
137 #breadcrumb-separator-before:after {
138 background: #000000; /* Toolbars */
141 /* This chevron arrow cannot be replicated easily in CSS, so we are using
142 * a background image for it (still keeping it in a separate element so
143 * we can handle RTL support with a CSS transform).
145 #breadcrumb-separator-normal {
146 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
147 background-size: 12px 24px;
150 /* Fake a triangle by rotating a rectangle inside the elements */
151 #breadcrumb-separator-before:after,
152 #breadcrumb-separator-after:after {
157 transform: translateX(-18px) rotate(45deg);
158 -moz-box-sizing: border-box;
161 .breadcrumbs-widget-item {
162 background-color: #000000;
166 padding: 0 8px 0 20px;
173 .breadcrumbs-widget-item:hover {
174 background-color: #FFCF00;
178 .breadcrumbs-widget-item[checked]:not(:hover) {
179 background-color: #008484;
183 .breadcrumbs-widget-item[siblings-menu-open],
184 .breadcrumbs-widget-item:active {
185 background-color: #FF9F00;
189 .breadcrumbs-widget-item:not([checked]) {
190 background-image: -moz-element(#breadcrumb-separator-normal);
191 background-repeat: no-repeat;
192 background-position: center left;
195 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
196 background-image: -moz-element(#breadcrumb-separator-after);
197 background-repeat: no-repeat;
198 background-position: 0 0;
201 .breadcrumbs-widget-item[checked] {
202 background-image: -moz-element(#breadcrumb-separator-before);
203 background-repeat: no-repeat;
204 background-position: 0 0;
205 background-color: #008484; /* Select Highlight Blue */
208 .breadcrumbs-widget-item:first-child {
209 background-image: none;
212 /* RTL support: move the images that were on the left to the right,
213 * and move images that were on the right to the left.
215 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
216 padding: 0 20px 0 8px;
219 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
220 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
221 background-position: center right;
224 #breadcrumb-separator-before:-moz-locale-dir(rtl),
225 #breadcrumb-separator-after:-moz-locale-dir(rtl),
226 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
227 transform: scaleX(-1);
230 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
231 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
232 transform: translateX(-5px) rotate(45deg);
235 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
236 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
237 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
238 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
239 color: #FF9F00; /* Foreground (Text) - Light */
242 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
243 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
244 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
245 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
246 color: #000000 !important;
249 .breadcrumbs-widget-item {
250 color: #FFCF00; /* Foreground (Text) - Light */
253 .breadcrumbs-widget-item-id {
254 color: #A09090; /* Foreground (Text) - Grey */
257 .breadcrumbs-widget-item-classes {
258 color: #FF9F00; /* Content (Text) - Light */
261 .breadcrumbs-widget-item-pseudo-classes {
262 color: #FFCF00; /* Light Orange */
265 /* SimpleListWidget */
267 .simple-list-widget-container {
268 /* Hack: force hardware acceleration */
269 transform: translateZ(1px);
272 .simple-list-widget-item.selected {
273 background-color: #008484; /* Select Highlight Blue */
274 color: #FFCF00; /* Light foreground text */
277 .simple-list-widget-item:not(.selected):hover {
278 background-color: #FFCF00;
282 .simple-list-widget-perma-text,
283 .simple-list-widget-empty-text {
290 .fast-list-widget-container {
291 /* Hack: force hardware acceleration */
292 transform: translateZ(1px);
295 /* dark/light theme */
296 .fast-list-widget-empty-text {
304 /* SideMenuWidget container */
306 .side-menu-widget-container {
307 /* Hack: force hardware acceleration */
308 transform: translateZ(1px);
310 background-color: #000000;
314 .side-menu-widget-container:-moz-locale-dir(ltr),
315 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
318 .side-menu-widget-container:-moz-locale-dir(rtl),
319 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
322 .side-menu-widget-group {
323 /* To allow visibility of the dark margin shadow. */
324 /* -moz-margin-end: 1px; */
327 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
328 /* To compensate for the arrow image's dark margin. */
329 /* -moz-margin-end: -1px; */
332 /* SideMenuWidget groups */
334 .side-menu-widget-group-title {
337 background-color: #A09090;
341 /* SideMenuWidget items */
343 .side-menu-widget-item {
344 border-top: 1px solid #9C9CFF;
345 /* To compensate for the top and bottom borders */
348 background-clip: padding-box;
351 .side-menu-widget-item:last-of-type {
352 border-bottom: 1px solid #9C9CFF;
355 .side-menu-widget-item.selected {
356 background-color: #008484 !important;
360 .side-menu-widget-item-arrow {
361 -moz-margin-start: -7px;
362 width: 7px; /* The image's width is 7 pixels */
363 /* Cover the border of the side-menu-widget-item */
368 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
369 background-size: auto, 1px 100%;
370 background-repeat: no-repeat;
373 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
374 background-position: center right;
377 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
378 background-position: center left;
381 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
382 background-image: url("itemArrow-ltr.svg");
385 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
386 background-image: url("itemArrow-rtl.svg");
389 /* SideMenuWidget items contents */
391 .side-menu-widget-item-contents {
393 /* To avoid having content overlapping the arrow image. */
394 -moz-padding-end: 8px;
397 .side-menu-widget-item-other {
398 /* To avoid having content overlapping the arrow image. */
399 -moz-padding-end: 8px;
400 /* To compensate for the .side-menu-widget-item-contents padding. */
401 -moz-margin-start: -4px;
402 -moz-margin-end: -8px;
404 background-color: #000000;
407 .side-menu-widget-item-other.selected {
408 background-color: #008484;
412 .side-menu-widget-item-other:first-of-type {
414 /* border-top-left-radius: 4px; */
417 .side-menu-widget-item-other:last-of-type {
421 .side-menu-widget-item-other:not(.selected) > label {
425 /* SideMenuWidget checkboxes */
427 .side-menu-widget-group-checkbox {
429 -moz-margin-end: 4px;
432 .side-menu-widget-item-checkbox {
434 -moz-margin-start: 4px;
435 -moz-margin-end: -4px;
438 /* SideMenuWidget misc */
440 .side-menu-widget-empty-text {
443 background-color: #000000;
450 .variables-view-container:not([empty]) {
451 /* Hack: force hardware acceleration */
452 transform: translateZ(1px);
455 .variables-view-empty-notice {
460 .variables-view-scope > .title {
461 background-color: #A09090;
465 /* Generic variables traits */
467 .variables-view-variable:not(:last-child) {
468 border-bottom: 1px solid #A09090;
471 .variables-view-variable > .title > .name {
475 /* Generic variables *and* properties traits */
477 .variable-or-property:focus > .title > label {
478 color: inherit !important;
481 .variable-or-property > .title > .value {
485 .variable-or-property > .title > .arrow {
486 -moz-margin-start: 3px;
489 .variable-or-property:not([untitled]) > .variables-view-element-details {
490 -moz-margin-start: 7px;
493 /* Traits applied when variables or properties are changed or overridden */
495 .variable-or-property:not([overridden]) {
496 transition: background 1s ease-in-out, color 1s ease-in-out;
499 .variable-or-property:not([overridden])[changed] {
501 transition-duration: .4s;
504 .variable-or-property[overridden] {
505 background: rgba(160,144,144,0.0.5);
508 .variable-or-property[overridden] .title > label {
509 /* Cross out the title for this variable and all child properties. */
511 text-decoration: line-through;
512 border-bottom: none !important;
517 /* Traits applied when variables or properties are editable */
519 .variable-or-property[editable] > .title > .value {
523 .variable-or-property[overridden] .title > .value {
524 /* Disallow editing this variable and all child properties. */
525 pointer-events: none;
528 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
529 * variables and properties */
531 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
535 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
536 border-bottom: 1px dashed #9C9CFF;
539 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
540 border-bottom: 1px dashed #FF0000;
543 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
544 border-bottom: 1px dashed #A09090;
547 .variable-or-property-non-writable-icon {
548 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
554 @media (min-resolution: 2dppx) {
555 .variable-or-property-non-writable-icon > .title:after {
556 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
557 background-size: 32px;
561 .variable-or-property-frozen-label,
562 .variable-or-property-sealed-label,
563 .variable-or-property-non-extensible-label {
564 -moz-padding-end: 4px;
567 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
568 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
569 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
575 .variables-view-container[aligned-values] .title > .separator {
579 .variables-view-container[aligned-values] .title > .value {
584 .variables-view-container[aligned-values] .title > .element-value-input {
585 width: calc(70vw - 10px);
590 .variables-view-container[actions-first] .variables-view-delete,
591 .variables-view-container[actions-first] .variables-view-open-inspector,
592 .variables-view-container[actions-first] .variables-view-add-property {
593 -moz-box-ordinal-group: 0;
596 .variables-view-container[actions-first] [invisible] {
600 /* Variables and properties tooltips */
602 .variable-or-property > tooltip > label {
606 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
607 .variable-or-property[non-configurable] > tooltip > label.configurable,
608 .variable-or-property[non-writable] > tooltip > label.writable
609 .variable-or-property[non-extensible] > tooltip > label.extensible {
611 text-decoration: line-through;
614 .variable-or-property[overridden] > tooltip > label.overridden {
615 -moz-padding-start: 4px;
616 -moz-border-start: 1px dotted #9C9CFF;
619 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
620 -moz-padding-start: 4px;
621 -moz-border-start: 1px dotted #9C9CFF;
625 /* Variables and properties editing */
627 .variables-view-delete {
628 list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
629 -moz-image-region: rect(0,16px,16px,0);
632 .variables-view-delete:hover {
633 -moz-image-region: rect(0,48px,16px,32px);
636 .variables-view-delete:active {
637 -moz-image-region: rect(0,32px,16px,16px);
640 .variable-or-property:focus .variables-view-delete {
641 /* -moz-image-region: rect(0,16px,16px,0); */
644 .variables-view-edit {
645 list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
646 -moz-image-region: rect(0,16px,16px,0);
651 .variables-view-edit:hover {
652 -moz-image-region: rect(0,48px,16px,32px);
655 .variables-view-edit:active {
656 -moz-image-region: rect(0,32px,16px,16px);
659 .variable-or-property:focus .variables-view-edit {
660 /* -moz-image-region: rect(0,16px,16px,0); */
663 .variables-view-open-inspector {
664 list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
665 -moz-image-region: rect(0,16px,16px,0);
669 .variables-view-open-inspector:hover {
670 -moz-image-region: rect(0,48px,16px,32px);
673 .variables-view-open-inspector:active {
674 -moz-image-region: rect(0,32px,16px,16px);
677 .variable-or-property:focus .variables-view-open-inspector {
678 /* -moz-image-region: rect(0,16px,16px,0); */
681 .variables-view-throbber {
682 background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
687 .element-value-input {
688 -moz-margin-start: -2px !important;
689 -moz-margin-end: 2px !important;
692 .element-name-input {
693 -moz-margin-start: -2px !important;
694 -moz-margin-end: 2px !important;
698 .element-value-input,
699 .element-name-input {
700 border: 1px solid #008484 !important;
704 /* Variables and properties searching */
706 .variables-view-searchinput {
710 .variable-or-property[unmatched] {
715 /* Expand/collapse arrow */
718 background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
721 -moz-margin-start: 5px;
722 -moz-margin-end: 5px;
725 .variables-view-scope > .title > .arrow {
726 background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
730 background-image: url("chrome://global/skin/tree/twisty-open.gif");
733 .variables-view-scope > .title > .arrow[open] {
734 background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
743 .generic-chart-container {
744 /* Hack: force hardware acceleration */
745 transform: translateZ(1px);
748 .generic-chart-container {
749 color: #A09090; /* Light foreground text */
752 .chart-colored-blob {
753 fill: #9C9CFF; /* Light content text */
768 .pie-chart-slice[largest] {
775 dominant-baseline: middle;
776 pointer-events: none;
783 .pie-chart-container[slices="1"] > .pie-chart-slice {
789 transition: all 0.1s ease-out;
792 .pie-chart-slice:not(:hover):not([focused]),
793 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
794 transform: none !important;
800 padding-bottom: 10px;
810 .table-chart-grid:hover > .table-chart-row {
811 transition: opacity 0.1s ease-in-out;
814 .table-chart-grid:not(:hover) > .table-chart-row {
815 transition: opacity 0.2s ease-in-out;
818 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
819 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
823 .table-chart-row-box {
826 -moz-margin-end: 10px;
829 .table-chart-row-label {
831 -moz-padding-end: 6px;
835 .table-chart-totals {
840 .table-chart-totals {
841 border-top: 1px solid #A09090; /* Grey foreground text */
844 .table-chart-summary-label {
849 .table-chart-summary-label {
850 color: #A09090; /* Light foreground text */
853 /* === BEGIN manifest-editor.inc.css === */
855 /* Manifest Editor overrides */
857 .variables-view-container.manifest-editor {
858 background-color: #000000;
862 .manifest-editor .variable-or-property:focus > .title {
863 /* background-color: #EDEDED;
868 .manifest-editor .variables-view-property > .title > .name {
869 /* color: #27406A; */
872 .manifest-editor .variable-or-property > .title > label,
873 .manifest-editor textbox {
874 font-family: monospace;
877 .manifest-editor .variable-or-property > .title > .token-string {
878 /* color: #54BC6A; */
882 .manifest-editor .variable-or-property > .title > .token-boolean,
883 .manifest-editor .variable-or-property > .title > .token-number {
884 /* color: #009BD4; */
888 .manifest-editor .variable-or-property > .title > .token-undefined {
892 .manifest-editor .variable-or-property > .title > .token-null {
896 .manifest-editor .variable-or-property > .title > .token-other {
900 .manifest-editor .variables-view-variable {
904 .manifest-editor .variables-view-delete,
905 .manifest-editor .variables-view-delete:hover,
906 .manifest-editor .variables-view-delete:active,
907 .manifest-editor .variable-or-property:focus .variables-view-delete,
908 .manifest-editor .variables-view-add-property:hover,
909 .manifest-editor .variables-view-add-property:active,
910 .manifest-editor .variable-or-property:focus .variables-view-add-property {
911 list-style-image: none;
912 -moz-image-region: initial;
915 .manifest-editor .variables-view-delete::before,
916 .manifest-editor .variables-view-add-property::before {
920 display: inline-block;
921 background-size: 11px auto;
924 .manifest-editor .variables-view-delete::before {
925 background-image: url("app-manager/remove.svg");
926 background-size: 12px auto;
929 .manifest-editor .variables-view-add-property::before {
930 background-image: url("app-manager/add.svg");
931 -moz-margin-end: 2px;
934 /* === END manifest-editor.inc.css === */
936 /* === END widgets.inc.css === */