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";
12 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
13 -moz-appearance: none;
14 background-color: #CCD0DD;
35 xul|caption > xul|label {
46 -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
48 -moz-padding-start: 48px;
52 xul|prefpane > xul|*.content-box {
59 -moz-appearance: none;
64 -moz-padding-start: 0;
69 xul|groupbox xul|label {
70 / !important needed to override toolkit !important rule /
71 -moz-margin-start: 0 !important;
72 -moz-margin-end: 0 !important;
75 /* tabpanels and tabs */
78 -moz-appearance: none;
83 background-color: transparent;
89 border-top: 1px solid #c1c1c1;
90 border-bottom: 1px solid #c1c1c1;
91 background-color: #fbfbfb;
100 -moz-appearance: none;
105 background-color: #fbfbfb;
107 transition: background-color 50ms ease 0s;
111 background-color: #ebebeb;
115 background-color: #ebebeb;
116 padding-bottom: 0; / compensate the 4px border /
117 border-bottom: 4px solid #ff9500;
129 border: 1px outset #CCD0DD;
130 background-color: #CCD0DD;
132 / * override forms.css * /
136 /* xul buttons and menulists */
139 xul|colorpicker[type="button"],
141 -moz-appearance: none;
145 border: 1px solid #c1c1c1;
146 -moz-border-top-colors: none !important;
147 -moz-border-right-colors: none !important;
148 -moz-border-bottom-colors: none !important;
149 -moz-border-left-colors: none !important;
151 background-color: #fbfbfb;
154 html|button:enabled:hover,
155 xul|button:not([disabled="true"]):hover,
156 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
157 xul|menulist:not([disabled="true"]):hover {
160 html|button:enabled:hover:active,
161 xul|button:not([disabled="true"]):hover:active,
162 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
163 xul|menulist[open="true"]:not([disabled="true"]) {
164 border: 1px inset #CCD0DD;
167 html|button:disabled,
168 xul|button[disabled="true"],
169 xul|colorpicker[type="button"][disabled="true"],
170 xul|menulist[disabled="true"] {
172 border: 1px outset #CCD0DD;
177 background-color: #0095dd;
178 border-color: transparent;
182 html|button.primary:enabled:hover,
183 xul|button.primary:not([disabled="true"]):hover {
184 background-color: #008acb;
187 html|button.primary:enabled:hover:active,
188 xul|button.primary:not([disabled="true"]):hover:active {
189 background-color: #006b9d;
192 xul|colorpicker[type="button"] {
197 xul|button > xul|*.button-box,
198 xul|menulist > xul|*.menulist-label-box {
199 padding-right: 10px !important;
200 padding-left: 10px !important;
203 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
204 -moz-margin-end: 5px;
207 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
208 -moz-appearance: none;
210 -moz-margin-start: 10px;
215 background-color: transparent;
216 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
223 background-color: #ffcb00;
224 background-image: none;
226 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
229 xul|*.help-button:not([disabled="true"]):hover {
230 background-color: #f4c200;
231 background-image: none;
234 xul|*.help-button:not([disabled="true"]):hover:active {
235 background-color: #eaba00;
236 background-image: none;
239 xul|*.close-icon > xul|*.button-box,
240 xul|*.help-button > xul|*.button-box {
243 padding-right: 0 !important;
244 padding-left: 0 !important;
247 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
252 xul|*.help-button > xul|*.button-box > xul|*.button-text {
256 xul|*.spinbuttons-button {
257 -moz-margin-start: 10px !important;
258 -moz-margin-end: 2px !important;
261 xul|*.spinbuttons-up {
262 margin-top: 2px !important;
263 border-radius: 1px 1px 0 0;
266 xul|*.spinbuttons-down {
267 margin-bottom: 2px !important;
268 border-radius: 0 0 1px 1px;
271 xul|*.spinbuttons-button > xul|*.button-box {
272 padding: 1px 5px 2px !important;
275 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
276 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
279 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
280 list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
283 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
284 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
287 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
288 list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
291 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
292 -moz-appearance: none;
293 -moz-margin-end: 4px;
296 background-color: transparent;
297 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
300 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
305 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
306 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
309 xul|menulist > xul|menupopup,
310 xul|button[type="menu"] > xul|menupopup {
311 -moz-appearance: none;
312 border: 1px solid #c1c1c1;
314 background-color: #fff;
317 xul|menulist > xul|menupopup xul|menu,
318 xul|menulist > xul|menupopup xul|menuitem,
319 xul|button[type="menu"] > xul|menupopup xul|menu,
320 xul|button[type="menu"] > xul|menupopup xul|menuitem {
321 -moz-appearance: none;
325 padding-bottom: 0.2em;
326 -moz-padding-start: 10px;
327 -moz-padding-end: 30px;
330 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
331 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
332 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
333 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
335 background-color: rgba(0,149,221,0.25);
338 xul|menulist > xul|menupopup > xul|menu[selected="true"],
339 xul|menulist > xul|menupopup > xul|menuitem[selected="true"],
340 xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"],
341 xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] {
343 background-color: #0095DD;
346 xul|menulist > xul|menupopup xul|menuseparator,
347 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
348 -moz-appearance: none;
351 border-top: 1px solid #c1c1c1;
358 -moz-appearance: none;
362 text-shadow: 0 1px 1px #fefffe;
365 border: 1px solid #c1c1c1;
366 -moz-border-top-colors: none !important;
367 -moz-border-right-colors: none !important;
368 -moz-border-bottom-colors: none !important;
369 -moz-border-left-colors: none !important;
371 background-color: #fff;
375 xul|textbox[focused] {
376 border-color: #0095dd;
379 html|textbox:disabled,
380 xul|textbox[disabled="true"] {
391 text-decoration: none;
395 xul|*.text-link:hover,
396 xul|*.inline-link:hover {
398 text-decoration: none;
402 xul|*.text-link:hover:active,
403 xul|*.inline-link:hover:active {
405 text-decoration: none;
408 /* Checkboxes and radio buttons */
411 -moz-margin-start: 0;
414 xul|*.checkbox-check {
415 -moz-appearance: none;
419 border: 1px solid #c1c1c1;
420 -moz-margin-end: 10px;
421 background-color: #f1f1f1;
422 / !important needed to override toolkit checked !important rule /
423 background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
424 background-position: center center;
425 background-repeat: no-repeat;
426 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
429 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
430 border-color: #0095dd;
433 xul|*.checkbox-check[checked] {
434 background-image: url("chrome://global/skin/in-content/check.png"),
435 / * !important needed to override toolkit !important rule * /
436 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
439 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
443 xul|*.checkbox-label-box {
444 -moz-margin-start: -1px; / * negative margin for the transparent border * /
445 -moz-padding-start: 0;
448 xul|richlistitem > xul|*.checkbox-check {
453 -moz-appearance: none;
456 border: 1px solid #c1c1c1;
458 -moz-margin-end: 10px;
459 background-color: #f1f1f1;
460 background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
461 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
464 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
465 border-color: #0095dd;
468 xul|*.radio-check[selected] {
469 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
472 xul|radio[disabled="true"] > xul|*.radio-check {
476 xul|*.radio-label-box {
477 -moz-margin-start: -1px; / * negative margin for the transparent border * /
478 -moz-margin-end: 10px;
479 -moz-padding-start: 0;
485 -moz-appearance: none;
486 background-color: #424f5a;
493 -moz-appearance: none;
495 -moz-border-end-width: 0;
496 -moz-padding-start: 15px;
497 -moz-padding-end: 21px;
499 transition: background-color 150ms;
502 xul|*.category:hover {
503 background-color: #5e6972;
506 xul|*.category[selected] {
507 background-color: #343f48;
509 -moz-padding-start: 11px; / compensate the 4px border /
510 -moz-border-start: solid 4px #ff9500;
513 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
514 border-top: 1px #ffffff dotted;
515 border-bottom: 1px #ffffff dotted;
522 -moz-padding-start: 9px;
534 -moz-margin-end: 4px; / add the 4px end-margin of other elements /
535 border-bottom: 1px solid #c8c8c8;
537 padding-bottom: 15px;
550 -moz-appearance: none;
551 background-color: transparent;
556 xul|*.fileFieldContentBox {
557 background-color: transparent;
560 xul|*.fileFieldIcon {
561 -moz-margin-start: 10px;
565 xul|*.fileFieldLabel {
566 -moz-margin-start: -26px;
567 -moz-padding-start: 36px;
570 xul|textbox:-moz-locale-dir(rtl),
571 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
572 xul|textbox + xul|button:-moz-locale-dir(ltr),
573 xul|filefield + xul|button:-moz-locale-dir(ltr) {
574 border-top-left-radius: 0;
575 border-bottom-left-radius: 0;
578 xul|textbox:-moz-locale-dir(ltr),
579 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
580 xul|textbox + xul|button:-moz-locale-dir(rtl),
581 xul|filefield + xul|button:-moz-locale-dir(rtl) {
582 border-top-right-radius: 0;
583 border-bottom-right-radius: 0;
586 xul|textbox + xul|button,
587 xul|filefield + xul|button {
588 -moz-border-start: none;
595 -moz-appearance: none;
596 -moz-margin-start: 0;
597 background-color: #fff;
598 border: 1px solid #c1c1c1;
602 xul|treechildren::-moz-tree-row,
603 xul|listbox xul|listitem {
608 background-image: none;
611 xul|treechildren::-moz-tree-row(hover),
612 xul|listbox xul|listitem:hover {
613 background-color: rgba(0,149,221,0.25);
616 xul|treechildren::-moz-tree-row(selected),
617 xul|listbox xul|listitem[selected="true"] {
618 background-color: #0095dd;
625 -moz-appearance: none;
627 border: 1px solid #c1c1c1;
632 -moz-appearance: none;
634 border-bottom: 1px solid #c1c1c1;
638 xul|treecol:not([hideheader="true"]),
640 -moz-appearance: none;
642 background-color: #ebebeb;
647 xul|treecol:not([hideheader="true"]):hover,
648 xul|treecolpicker:hover {
649 background-color: #dadada;
653 xul|treecol:not([hideheader="true"]):not(:first-child),
655 -moz-border-start-width: 1px;
656 -moz-border-start-style: solid;
657 border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
660 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
661 list-style-image: url("chrome://global/skin/in-content/sorter.png");
666 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
667 transform: scaleY(-1);
670 @media (min-resolution: 2dppx) {
671 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
672 list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
676 / This is the only way to increase the height of a tree row unfortunately /
677 xul|treechildren::-moz-tree-row {
681 / Color needs to be set on tree cell in order to be applied /
682 xul|treechildren::-moz-tree-cell-text {
686 xul|treechildren::-moz-tree-cell-text(selected) {
690 /* === END common.inc.css === */
693 background-color: transparent;
697 xul|colorpicker[type="button"],
702 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
708 -moz-padding-start: 0;
712 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
713 -moz-margin-start: 0;
714 -moz-padding-start: 0;
718 xul|*.checkbox-icon {
722 html|a:-moz-focusring,
723 xul|*.text-link:-moz-focusring,
724 xul|*.inline-link:-moz-focusring {
725 border: 1px dotted -moz-DialogText;