1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* === BEGIN common.inc.css === */
7 @namespace html "http://www.w3.org/1999/xhtml";
8 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
13 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
14 -moz-appearance: none;
15 background-color: #000000;
35 border-style: solid none none none;
36 border-color: #9C9CFF;
42 xul|caption > xul|checkbox,
43 xul|caption > xul|label {
50 -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
52 -moz-padding-start: 48px;
56 xul|prefpane > xul|*.content-box {
63 -moz-appearance: none;
66 -moz-padding-start: 0;
71 xul|groupbox xul|label,
72 xul|groupbox xul|description {
73 / !important needed to override toolkit !important rule /
74 -moz-margin-start: 0 !important;
75 -moz-margin-end: 0 !important;
78 /* tabpanels and tabs */
81 -moz-appearance: none;
86 background-color: transparent;
92 border-top: 1px solid #c1c1c1;
93 border-bottom: 1px solid #c1c1c1;
94 background-color: #fbfbfb;
103 -moz-appearance: none;
108 background-color: #fbfbfb;
110 transition: background-color 50ms ease 0s;
114 background-color: #ebebeb;
117 xul|tab[visuallyselected] {
118 background-color: #ebebeb;
119 padding-bottom: 0; / compensate the 4px border /
120 border-bottom: 4px solid #ff9500;
131 border-radius: 300px;
133 background-color: #C09070;
135 /* override forms.css */
139 /* xul buttons and menulists */
142 xul|colorpicker[type="button"],
144 -moz-appearance: none;
148 border: 1px solid #c1c1c1;
149 -moz-border-top-colors: none !important;
150 -moz-border-right-colors: none !important;
151 -moz-border-bottom-colors: none !important;
152 -moz-border-left-colors: none !important;
154 background-color: #fbfbfb;
157 html|button:enabled:hover,
158 xul|button:not([disabled="true"]):hover,
159 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
160 xul|menulist:not([disabled="true"]):hover {
161 background-color: #FFCF00;
165 html|button:enabled:hover:active,
166 xul|button:not([disabled="true"]):hover:active,
167 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
168 xul|menulist[open="true"]:not([disabled="true"]) {
169 background-color: #FF9F00;
173 html|button:disabled,
174 xul|button[disabled="true"],
175 xul|colorpicker[type="button"][disabled="true"],
176 xul|menulist[disabled="true"] {
178 background-color: #402858;
183 background-color: #A06060;
186 html|button.primary:enabled:hover,
187 xul|button.primary:not([disabled="true"]):hover {
188 background-color: #FFCF00;
191 html|button.primary:enabled:hover:active,
192 xul|button.primary:not([disabled="true"]):hover:active {
193 background-color: #FF9F00;
196 xul|colorpicker[type="button"] {
201 xul|button > xul|*.button-box,
202 xul|menulist > xul|*.menulist-label-box {
203 padding-right: 10px !important;
204 padding-left: 10px !important;
207 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
208 -moz-margin-end: 5px;
211 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
212 -moz-appearance: none;
214 -moz-margin-start: 10px;
219 background-color: transparent;
220 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
229 background-color: #ffcb00;
230 background-image: none;
233 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
236 xul|*.help-button:not([disabled="true"]):hover {
237 background-color: #f4c200;
238 background-image: none;
241 xul|*.help-button:not([disabled="true"]):hover:active {
242 background-color: #eaba00;
243 background-image: none;
246 xul|*.close-icon > xul|*.button-box,
247 xul|*.help-button > xul|*.button-box {
250 padding-right: 0 !important;
251 padding-left: 0 !important;
254 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
259 xul|*.help-button > xul|*.button-box > xul|*.button-text {
263 xul|*.spinbuttons-button {
264 -moz-margin-start: 10px !important;
265 -moz-margin-end: 2px !important;
268 xul|*.spinbuttons-up {
269 margin-top: 2px !important;
270 border-radius: 1px 1px 0 0;
273 xul|*.spinbuttons-down {
274 margin-bottom: 2px !important;
275 border-radius: 0 0 1px 1px;
278 xul|*.spinbuttons-button > xul|*.button-box {
279 padding: 1px 5px 2px !important;
282 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
283 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
286 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
287 list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
290 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
291 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
294 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
295 list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
298 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
299 -moz-appearance: none;
300 -moz-margin-end: 4px;
303 background-color: transparent;
304 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
307 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
312 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
313 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
316 xul|menulist > xul|menupopup,
317 xul|button[type="menu"] > xul|menupopup {
318 -moz-appearance: none;
319 border: 1px solid #c1c1c1;
321 background-color: #fff;
324 xul|menulist > xul|menupopup xul|menu,
325 xul|menulist > xul|menupopup xul|menuitem,
326 xul|button[type="menu"] > xul|menupopup xul|menu,
327 xul|button[type="menu"] > xul|menupopup xul|menuitem {
328 -moz-appearance: none;
332 padding-bottom: 0.2em;
333 -moz-padding-start: 10px;
334 -moz-padding-end: 30px;
337 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
338 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
339 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
340 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
342 background-color: rgba(0,149,221,0.25);
345 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
346 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
347 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
348 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
350 background-color: #0095dd;
353 xul|menulist > xul|menupopup > xul|menu[disabled="true"],
354 xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
355 xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
356 xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] {
358 / override the [_moz-menuactive="true"] background color from
360 background-color: transparent;
363 xul|menulist > xul|menupopup xul|menuseparator,
364 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
365 -moz-appearance: none;
368 border-top: 1px solid #c1c1c1;
375 -moz-appearance: none;
381 border: 1px solid #c1c1c1;
382 -moz-border-top-colors: none !important;
383 -moz-border-right-colors: none !important;
384 -moz-border-bottom-colors: none !important;
385 -moz-border-left-colors: none !important;
387 background-color: #fff;
391 xul|textbox[focused] {
392 border-color: #0095dd;
395 html|textbox:disabled,
396 xul|textbox[disabled="true"] {
406 text-decoration: none;
417 text-decoration: underline;
421 .text-link:hover:active,
422 .inline-link:hover:active {
424 text-decoration: underline;
427 /* Checkboxes and radio buttons */
428 /* Hide the actual checkbox */
429 html|input[type="checkbox"] {
434 /* Create a box to style as the checkbox */
435 html|input[type="checkbox"] + html|label:before {
436 display: inline-block;
438 vertical-align: middle;
441 html|input[type="checkbox"] + html|label {
446 -moz-margin-start: 0;
449 /* xul|*.checkbox-check, */
450 html|input[type="checkbox"] + html|label:before {
451 -moz-appearance: none;
455 border: 1px solid #FF9F00;
456 -moz-margin-end: 10px;
457 background-color: #000000;
458 background-position: center center;
459 background-repeat: no-repeat;
462 /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
463 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
464 border-color: #FFCF00;
466 html|input[type="checkbox"]:not(:disabled) + html|label:hover {
470 xul|*.checkbox-check[checked] {
471 background-image: url("chrome://global/skin/in-content/check.png"),
472 / * !important needed to override toolkit !important rule * /
473 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
476 html|input[type="checkbox"]:checked + html|label:before {
477 background-image: url("chrome://global/skin/in-content/check.svg#check");
480 /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
481 html|input[type="checkbox"]:checked:disabled + html|label:before {
482 background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
484 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
485 background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
487 html|input[type="checkbox"]:disabled + html|label:before {
488 border-color: #8050B0;
490 html|input[type="checkbox"]:disabled + html|label {
494 xul|*.checkbox-label-box {
495 -moz-margin-start: -1px; / * negative margin for the transparent border * /
496 -moz-padding-start: 0;
499 xul|richlistitem > xul|*.checkbox-check {
504 -moz-margin-start: 0;
508 -moz-appearance: none;
511 border: 1px solid #c1c1c1;
513 -moz-margin-end: 10px;
514 background-color: #f1f1f1;
515 background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
516 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
519 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
520 border-color: #0095dd;
523 xul|*.radio-check[selected] {
524 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
527 xul|radio[disabled="true"] > xul|*.radio-check {
531 xul|*.radio-label-box {
532 -moz-margin-start: -1px; / * negative margin for the transparent border * /
533 -moz-margin-end: 10px;
534 -moz-padding-start: 0;
540 background-color: #A09090;
543 border-radius: 1em 0 0 0;
548 background-color: #000000;
550 -moz-border-end-width: 0;
551 -moz-padding-start: 15px;
552 -moz-padding-end: 21px;
554 transition: background-color 150ms;
557 xul|*.category:hover {
558 background-color: #FFCF00;
562 xul|*.category[selected] {
563 background-color: #008484;
567 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
568 border-top: 1px dotted #000000;
569 border-bottom: 1px dotted #000000;
576 -moz-padding-start: 9px;
578 -moz-user-select: none;
589 /* -moz-margin-end: 4px; / add the 4px end-margin of other elements /
590 border-bottom: 1px solid #A09090;
592 padding-bottom: 15px; */
600 -moz-user-select: none;
606 -moz-appearance: none;
607 background-color: transparent;
612 xul|*.fileFieldContentBox {
613 background-color: transparent;
616 xul|*.fileFieldIcon {
617 -moz-margin-start: 10px;
621 xul|*.fileFieldLabel {
622 -moz-margin-start: -26px;
623 -moz-padding-start: 36px;
626 xul|textbox:-moz-locale-dir(rtl),
627 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
628 xul|textbox + xul|button:-moz-locale-dir(ltr),
629 xul|filefield + xul|button:-moz-locale-dir(ltr) {
630 border-top-left-radius: 0;
631 border-bottom-left-radius: 0;
634 xul|textbox:-moz-locale-dir(ltr),
635 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
636 xul|textbox + xul|button:-moz-locale-dir(rtl),
637 xul|filefield + xul|button:-moz-locale-dir(rtl) {
638 border-top-right-radius: 0;
639 border-bottom-right-radius: 0;
642 xul|textbox + xul|button,
643 xul|filefield + xul|button {
644 -moz-border-start: none;
651 -moz-appearance: none;
652 -moz-margin-start: 0;
653 background-color: #fff;
654 border: 1px solid #c1c1c1;
658 xul|treechildren::-moz-tree-row,
659 xul|listbox xul|listitem {
664 background-image: none;
667 xul|treechildren::-moz-tree-row(hover),
668 xul|listbox xul|listitem:hover {
669 background-color: rgba(0,149,221,0.25);
672 xul|treechildren::-moz-tree-row(selected),
673 xul|listbox xul|listitem[selected="true"] {
674 background-color: #0095dd;
678 / This is the only way to increase the height of a tree row unfortunately /
679 xul|treechildren::-moz-tree-row {
683 / Color needs to be set on tree cell in order to be applied /
684 xul|treechildren::-moz-tree-cell-text {
688 xul|treechildren::-moz-tree-cell-text(selected) {
695 -moz-appearance: none;
697 border: 1px solid #c1c1c1;
701 xul|tree:-moz-focusring,
702 xul|richlistbox:-moz-focusring {
703 border: 1px dotted #0095dd;
708 -moz-appearance: none;
710 border-bottom: 1px solid #c1c1c1;
714 xul|treecol:not([hideheader="true"]),
716 -moz-appearance: none;
718 background-color: #ebebeb;
723 xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
724 xul|treecolpicker:hover {
725 background-color: #dadada;
729 xul|treecol:not([hideheader="true"]):not(:first-child),
731 -moz-border-start-width: 1px;
732 -moz-border-start-style: solid;
733 border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
736 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
737 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
742 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
743 transform: scaleY(-1);
746 /* === END common.inc.css === */
749 background-color: transparent;
754 xul|colorpicker[type="button"],
759 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
765 -moz-padding-start: 0;
769 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
770 -moz-padding-start: 0;
774 xul|*.checkbox-icon {
778 .text-link:-moz-focusring,
779 .inline-link:-moz-focusring {
780 /* Don't specify the outline-color, we should always use initial value. */