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 /* Generic pane helpers */
8 .generic-toggled-side-pane {
9 -moz-margin-start: 0px !important;
10 /* Unfortunately, transitions don't work properly with locale-aware properties,
11 so both the left and right margins are set via js, while the start margin
12 is always overridden here. */
15 .generic-toggled-side-pane[animated] {
16 transition: margin 0.25s ease-in-out;
19 /* BreacrumbsWidget */
21 .breadcrumbs-widget-container {
23 /* A fake 1px-shadow is included in the border-images of the
24 breadcrumbs-widget-items, to match toolbar-buttons style.
25 This negative margin compensates the extra row of pixels created
30 /* Preloading hack, LTR */
32 .breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
36 url("breadcrumbs/ltr-start.png"),
37 url("breadcrumbs/ltr-start-selected.png"),
38 url("breadcrumbs/ltr-start-pressed.png"),
39 url("breadcrumbs/ltr-start-selected-pressed.png"),
40 url("breadcrumbs/ltr-middle.png"),
41 url("breadcrumbs/ltr-middle-selected.png"),
42 url("breadcrumbs/ltr-middle-pressed.png"),
43 url("breadcrumbs/ltr-middle-selected-pressed.png"),
44 url("breadcrumbs/ltr-end.png"),
45 url("breadcrumbs/ltr-end-selected.png"),
46 url("breadcrumbs/ltr-end-pressed.png"),
47 url("breadcrumbs/ltr-end-selected-pressed.png");
50 /* Preloading hack, RTL */
52 .breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
56 url("breadcrumbs/rtl-start.png"),
57 url("breadcrumbs/rtl-start-selected.png"),
58 url("breadcrumbs/rtl-start-pressed.png"),
59 url("breadcrumbs/rtl-start-selected-pressed.png"),
60 url("breadcrumbs/rtl-middle.png"),
61 url("breadcrumbs/rtl-middle-selected.png"),
62 url("breadcrumbs/rtl-middle-pressed.png"),
63 url("breadcrumbs/rtl-middle-selected-pressed.png"),
64 url("breadcrumbs/rtl-end.png"),
65 url("breadcrumbs/rtl-end-selected.png"),
66 url("breadcrumbs/rtl-end-pressed.png"),
67 url("breadcrumbs/rtl-end-selected-pressed.png");
85 .scrollbutton-up:not([disabled]):active:hover,
86 .scrollbutton-down:not([disabled]):active:hover {
89 .scrollbutton-up > .toolbarbutton-icon,
90 .scrollbutton-down > .toolbarbutton-icon {
94 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
95 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
98 .scrollbutton-up[disabled] > .toolbarbutton-icon,
99 .scrollbutton-down[disabled] > .toolbarbutton-icon {
102 .scrollbutton-up:-moz-locale-dir(ltr) {
103 border-top-right-radius: 0;
104 border-bottom-right-radius: 0;
107 .scrollbutton-down:-moz-locale-dir(ltr) {
108 border-top-left-radius: 0;
109 border-bottom-left-radius: 0;
112 .scrollbutton-up:-moz-locale-dir(rtl) {
113 border-top-left-radius: 0;
114 border-bottom-left-radius: 0;
117 .scrollbutton-down:-moz-locale-dir(rtl) {
118 border-top-right-radius: 0;
119 border-bottom-right-radius: 0;
122 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
123 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
124 /* transform: scaleX(-1); */
127 .breadcrumbs-widget-item {
128 background-color: #000000;
134 border-width: 2px 13px;
142 .breadcrumbs-widget-item:hover {
143 background-color: #FFCF00;
147 .breadcrumbs-widget-item[checked]:not(:hover) {
148 background-color: #008484;
152 .breadcrumbs-widget-item[siblings-menu-open],
153 .breadcrumbs-widget-item:active {
154 background-color: #FF9F00;
158 .breadcrumbs-widget-item:-moz-focusring > label {
159 border-bottom: 1px dotted #008484;
162 .breadcrumbs-widget-item:-moz-focusring > .button-box {
166 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
167 /* color: hsl(208,100%,60%); */
170 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
171 /* color: hsl(205,100%,70%); */
174 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
178 .breadcrumbs-widget-item-id,
179 .breadcrumbs-widget-item-classes {
180 /* color: #8d99a6; */
183 .breadcrumbs-widget-item-pseudo-classes {
187 /* Breadcrumbs LTR */
189 .breadcrumbs-widget-item:-moz-locale-dir(ltr) {
190 border-image: url("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
193 .breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
194 border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
197 .breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
198 border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
201 .breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
202 border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
205 .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
206 border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
209 .breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
210 border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
213 .breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
214 border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
217 .breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
218 border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
221 .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
222 border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
225 .breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
226 border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
229 .breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
230 border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
233 .breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
234 border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
237 .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
240 .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
243 /* Breadcrumbs RTL */
245 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
246 border-image: url("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
249 .breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
250 border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
253 .breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
254 border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
257 .breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
258 border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
261 .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
262 border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
265 .breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
266 border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
269 .breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
270 border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
273 .breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
274 border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
277 .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
278 border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
281 .breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
282 border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
285 .breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
286 border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
289 .breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
290 border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
293 .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
296 .breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
301 .side-menu-widget-container {
302 /* Hack: force hardware acceleration */
303 transform: translateZ(1px);
305 background-color: #000000;
309 /* SideMenuWidget container */
311 .side-menu-widget-container:-moz-locale-dir(ltr),
312 .side-menu-widget-empty-notice-container:-moz-locale-dir(ltr) {
315 .side-menu-widget-container:-moz-locale-dir(rtl),
316 .side-menu-widget-empty-notice-container:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
319 .side-menu-widget-group {
320 /* To allow visibility of the dark margin shadow. */
321 /* -moz-margin-end: 1px; */
324 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
325 /* To compensate for the arrow image's dark margin. */
326 /* -moz-margin-end: -1px; */
329 /* SideMenuWidget groups */
331 .side-menu-widget-group-title {
334 background-color: #A09090;
338 /* SideMenuWidget items */
340 .side-menu-widget-item {
341 border-top: 1px solid #9C9CFF;
346 .side-menu-widget-item:last-of-type {
347 border-bottom: 1px solid #9C9CFF;
350 .side-menu-widget-item.selected {
351 background-color: #008484 !important;
355 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
356 background-size: auto, 1px 100%;
357 background-repeat: no-repeat;
360 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
361 background-image: url("itemArrow-ltr.png"), linear-gradient(to right, #000000, #000000);
362 background-position: center right, top right;
365 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
366 background-image: url("itemArrow-rtl.png"), linear-gradient(to right, #000000, #000000);
367 background-position: center left, top left;
370 /* SideMenuWidget items contents */
372 .side-menu-widget-item-contents {
376 .side-menu-widget-item-label {
380 .side-menu-widget-item-arrow {
381 -moz-margin-start: -8px;
385 .side-menu-widget-item-other {
386 background-color: #000000;
388 -moz-padding-start: 5px;
391 .side-menu-widget-item-other.selected {
392 background-color: #008484;
396 .side-menu-widget-item-other:first-of-type {
397 /* border-top-left-radius: 4px; */
400 .side-menu-widget-item-other:not(.selected) > label {
404 /* SideMenuWidget checkboxes */
406 .side-menu-widget-group-checkbox {
408 -moz-margin-end: 4px;
411 .side-menu-widget-item-checkbox {
413 -moz-margin-start: 4px;
414 -moz-margin-end: -4px;
417 /* SideMenuWidget misc */
419 .side-menu-widget-empty-notice-container {
422 background-color: #000000;
429 .variables-view-container:not([empty]) {
430 /* Hack: force hardware acceleration */
431 transform: translateZ(1px);
434 .variables-view-empty-notice {
439 .variables-view-scope > .title {
440 background-color: #A09090;
444 /* Generic variables traits */
446 .variables-view-variable:not(:last-child) {
447 border-bottom: 1px solid #A09090;
450 .variables-view-variable > .title > .name {
454 /* Generic variables *and* properties traits */
456 .variable-or-property:focus > .title > label {
457 color: inherit !important;
460 .variable-or-property > .title > .value {
464 .variable-or-property > .title > .arrow {
465 -moz-margin-start: 3px;
468 .variable-or-property:not([untitled]) > .variables-view-element-details {
469 -moz-margin-start: 7px;
472 /* Traits applied when variables or properties are changed or overridden */
474 .variable-or-property:not([overridden]) {
475 transition: background 1s ease-in-out, color 1s ease-in-out;
478 .variable-or-property:not([overridden])[changed] {
480 transition-duration: .4s;
483 .variable-or-property[overridden] {
484 background: rgba(160,144,144,0.0.5);
487 .variable-or-property[overridden] .title > label {
488 /* Cross out the title for this variable and all child properties. */
490 text-decoration: line-through;
491 border-bottom: none !important;
496 /* Traits applied when variables or properties are editable */
498 .variable-or-property[editable] > .title > .value {
502 .variable-or-property[overridden] .title > .value {
503 /* Disallow editing this variable and all child properties. */
504 pointer-events: none;
507 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
508 * variables and properties */
510 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
514 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
515 border-bottom: 1px dashed #9C9CFF;
518 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
519 border-bottom: 1px dashed #FF0000;
522 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
523 border-bottom: 1px dashed #A09090;
526 .variable-or-property-non-writable-icon {
527 background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
533 @media (min-resolution: 2dppx) {
534 .variable-or-property-non-writable-icon > .title:after {
535 background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
536 background-size: 32px;
540 .variable-or-property-frozen-label,
541 .variable-or-property-sealed-label,
542 .variable-or-property-non-extensible-label {
543 -moz-padding-end: 4px;
546 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
547 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
548 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
554 .variables-view-container[aligned-values] .title > .separator {
558 .variables-view-container[aligned-values] .title > .value {
563 .variables-view-container[aligned-values] .title > .element-value-input {
564 width: calc(70vw - 10px);
569 .variables-view-container[actions-first] .variables-view-delete,
570 .variables-view-container[actions-first] .variables-view-add-property {
571 -moz-box-ordinal-group: 0;
574 .variables-view-container[actions-first] [invisible] {
578 /* Variables and properties tooltips */
580 .variable-or-property > tooltip > label {
584 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
585 .variable-or-property[non-configurable] > tooltip > label.configurable,
586 .variable-or-property[non-writable] > tooltip > label.writable
587 .variable-or-property[non-extensible] > tooltip > label.extensible {
589 text-decoration: line-through;
592 .variable-or-property[overridden] > tooltip > label.overridden {
593 -moz-padding-start: 4px;
594 -moz-border-start: 1px dotted #9C9CFF;
597 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
598 -moz-padding-start: 4px;
599 -moz-border-start: 1px dotted #9C9CFF;
603 /* Variables and properties editing */
605 .variables-view-delete {
606 list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
607 -moz-image-region: rect(0, 16px, 16px, 0);
610 .variables-view-delete:hover {
611 -moz-image-region: rect(0, 32px, 16px, 16px);
614 .variables-view-delete:active {
615 -moz-image-region: rect(0, 48px, 16px, 32px);
618 .variables-view-edit {
619 background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
625 .variables-view-throbber {
626 background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
631 .element-value-input {
632 -moz-margin-start: -2px !important;
633 -moz-margin-end: 2px !important;
636 .element-name-input {
637 -moz-margin-start: -2px !important;
638 -moz-margin-end: 2px !important;
642 .element-value-input,
643 .element-name-input {
644 border: 1px solid #008484 !important;
648 /* Variables and properties searching */
650 .variables-view-searchinput {
654 .variable-or-property[unmatched] {
659 /* Expand/collapse arrow */
662 background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
665 -moz-margin-start: 5px;
666 -moz-margin-end: 5px;
669 .variables-view-scope > .title > .arrow {
670 background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
674 background-image: url("chrome://global/skin/tree/twisty-open.gif");
677 .variables-view-scope > .title > .arrow[open] {
678 background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
685 /* === BEGIN manifest-editor.inc.css === */
687 /* Manifest Editor overrides */
689 .variables-view-container.manifest-editor {
690 background-color: #000000;
694 .manifest-editor .variable-or-property:focus > .title {
695 /* background-color: #EDEDED;
700 .manifest-editor .variables-view-property > .title > .name {
701 /* color: #27406A; */
704 .manifest-editor .variable-or-property > .title > label,
705 .manifest-editor textbox {
706 font-family: monospace;
709 .manifest-editor .variable-or-property > .title > .token-string {
710 /* color: #54BC6A; */
714 .manifest-editor .variable-or-property > .title > .token-boolean,
715 .manifest-editor .variable-or-property > .title > .token-number {
716 /* color: #009BD4; */
720 .manifest-editor .variable-or-property > .title > .token-undefined {
724 .manifest-editor .variable-or-property > .title > .token-null {
728 .manifest-editor .variable-or-property > .title > .token-other {
732 .manifest-editor .variables-view-variable {
736 .manifest-editor .variables-view-delete,
737 .manifest-editor .variables-view-delete:hover,
738 .manifest-editor .variables-view-delete:active,
739 .manifest-editor .variables-view-add-property:hover,
740 .manifest-editor .variables-view-add-property:active {
741 list-style-image: none;
742 -moz-image-region: initial;
745 .manifest-editor .variables-view-delete::before,
746 .manifest-editor .variables-view-add-property::before {
750 display: inline-block;
751 background-size: 11px auto;
754 .manifest-editor .variables-view-delete::before {
755 background-image: url("app-manager/remove.svg");
756 background-size: 12px auto;
759 .manifest-editor .variables-view-add-property::before {
760 background-image: url("app-manager/add.svg");
761 -moz-margin-end: 2px;
764 /* === END manifest-editor.inc.css === */