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: #000000;
35 xul|caption > xul|label {
41 padding: 40px 48px 48px;
45 xul|prefpane > xul|*.content-box {
52 -moz-appearance: none;
57 -moz-padding-start: 0;
62 xul|groupbox xul|label {
63 / !important needed to override toolkit !important rule /
64 -moz-margin-start: 0 !important;
65 -moz-margin-end: 0 !important;
68 /* tabpanels and tabs */
71 -moz-appearance: none;
76 background-color: transparent;
81 border-top: 1px solid #c1c1c1;
82 border-bottom: 1px solid #c1c1c1;
83 background-color: #fbfbfb;
92 -moz-appearance: none;
97 background-color: #fbfbfb;
99 transition: background-color 50ms ease 0s;
103 background-color: #ebebeb;
107 background-color: #ebebeb;
108 box-shadow: inset 0 -4px 0 0 #ff9500;
119 border-radius: 300px;
121 background-color: #C09070;
123 /* override forms.css */
127 /* xul buttons and menulists */
130 xul|colorpicker[type="button"],
132 -moz-appearance: none;
136 text-shadow: 0 1px 1px #fefffe;
137 border: 1px solid #c1c1c1;
138 -moz-border-top-colors: none !important;
139 -moz-border-right-colors: none !important;
140 -moz-border-bottom-colors: none !important;
141 -moz-border-left-colors: none !important;
143 background-color: #fbfbfb;
146 html|button:enabled:hover,
147 xul|button:not([disabled="true"]):hover,
148 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
149 xul|menulist:not([disabled="true"]):hover {
150 background-color: #FFCF00;
154 html|button:enabled:hover:active,
155 xul|button:not([disabled="true"]):hover:active,
156 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
157 xul|menulist[open="true"]:not([disabled="true"]) {
158 background-color: #FF9F00;
162 html|button:disabled,
163 xul|button[disabled="true"],
164 xul|colorpicker[type="button"][disabled="true"],
165 xul|menulist[disabled="true"] {
167 background-color: #402858;
171 xul|colorpicker[type="button"] {
176 xul|button > xul|*.button-box,
177 xul|menulist > xul|*.menulist-label-box {
178 padding-right: 10px !important;
179 padding-left: 10px !important;
182 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
183 -moz-margin-end: 5px;
186 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
187 -moz-appearance: none;
189 -moz-margin-start: 10px;
194 background-color: transparent;
195 list-style-image: url("chrome://global/skin/in-content/dropdown.png");
201 border: 1px solid #c1c1c1;
202 background-color: #ffcb00;
203 background-image: none;
207 xul|*.help-button:not([disabled="true"]):hover {
208 background-color: #f4c200;
209 background-image: none;
212 xul|*.help-button:not([disabled="true"]):hover:active {
213 background-color: #eaba00;
214 background-image: none;
217 xul|*.close-icon > xul|*.button-box,
218 xul|*.help-button > xul|*.button-box {
221 padding-right: 0 !important;
222 padding-left: 0 !important;
225 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
228 background-image: url("chrome://global/skin/in-content/help-glyph.png");
229 background-position: center;
232 @media (min-resolution: 2dppx) {
233 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
234 background-size: 26px 26px;
235 background-image: url("chrome://global/skin/in-content/help-glyph@2x.png");
239 xul|*.help-button > xul|*.button-box > xul|*.button-text {
243 xul|*.spinbuttons-button {
244 -moz-margin-start: 10px !important;
245 -moz-margin-end: 2px !important;
248 xul|*.spinbuttons-up {
249 margin-top: 2px !important;
250 border-radius: 1px 1px 0 0;
253 xul|*.spinbuttons-down {
254 margin-bottom: 2px !important;
255 border-radius: 0 0 1px 1px;
258 xul|*.spinbuttons-button > xul|*.button-box {
259 padding: 1px 5px 2px !important;
262 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
263 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
266 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
267 list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
270 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
271 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
274 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
275 list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
278 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
279 -moz-appearance: none;
280 -moz-margin-end: 10px;
283 background-color: transparent;
284 list-style-image: url("chrome://global/skin/in-content/dropdown.png");
287 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
288 list-style-image: url("chrome://global/skin/in-content/dropdown-disabled.png")
291 @media (min-resolution: 2dppx) {
292 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker,
293 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
294 list-style-image: url("chrome://global/skin/in-content/dropdown@2x.png");
297 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
298 list-style-image: url("chrome://global/skin/in-content/dropdown-disabled@2x.png")
301 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon,
302 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker > xul|*.dropmarker-icon {
308 xul|menulist > xul|menupopup,
309 xul|button[type="menu"] > xul|menupopup {
310 -moz-appearance: none;
311 border: 1px solid rgba(23,50,77,0.4);
313 background-color: #fff;
316 xul|menulist > xul|menupopup xul|menu,
317 xul|menulist > xul|menupopup xul|menuitem,
318 xul|button[type="menu"] > xul|menupopup xul|menu,
319 xul|button[type="menu"] > xul|menupopup xul|menuitem {
320 -moz-appearance: none;
325 -moz-padding-start: 10px;
326 -moz-padding-end: 30px;
329 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
330 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
331 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
332 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
334 background-color: transparent;
335 background-image: linear-gradient(rgba(76,177,255,0.25), rgba(23,146,229,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-image: linear-gradient(#4cb1ff, #1792e5);
346 xul|menulist > xul|menupopup xul|menuseparator,
347 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
348 -moz-appearance: none;
352 border-top: 1px solid rgba(23,50,77,0.4);
359 -moz-appearance: none;
363 text-shadow: 0 1px 1px #fefffe;
366 border: 1px solid #c1c1c1;
367 -moz-border-top-colors: none !important;
368 -moz-border-right-colors: none !important;
369 -moz-border-bottom-colors: none !important;
370 -moz-border-left-colors: none !important;
372 background-color: #fff;
376 xul|textbox[focused] {
377 border-color: #0095dd;
380 html|textbox:disabled,
381 xul|textbox[disabled="true"] {
390 /* font-size: 1.25rem;
393 text-decoration: none;
397 xul|*.text-link:hover,
398 xul|*.inline-link:hover {
400 text-decoration: underline;
404 xul|*.text-link:hover:active,
405 xul|*.inline-link:hover:active {
407 text-decoration: underline;
410 /* Checkboxes and radio buttons */
413 -moz-margin-start: 0;
416 xul|*.checkbox-check {
417 -moz-appearance: none;
421 border: 1px solid #c1c1c1;
422 -moz-margin-end: 10px;
423 background-color: #f1f1f1;
424 background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
425 background-position: center center;
426 background-repeat: no-repeat;
427 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
430 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
431 border-color: #0095dd;
434 xul|*.checkbox-check[checked] {
435 background-image: url("chrome://global/skin/in-content/check.png"),
436 / * !important needed to override toolkit !important rule * /
437 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
440 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
444 xul|*.checkbox-label-box {
445 -moz-margin-start: -1px; / * negative margin for the transparent border * /
446 -moz-padding-start: 0;
449 @media (min-resolution: 2dppx) {
450 xul|*.checkbox-check[checked] {
451 background-size: 12px 12px, auto;
452 background-image: url("chrome://global/skin/in-content/check@2x.png"),
453 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
457 xul|richlistitem > xul|*.checkbox-check {
462 -moz-appearance: none;
465 border: 1px solid #c1c1c1;
467 -moz-margin-end: 10px;
468 background-color: #f1f1f1;
469 background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
470 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
473 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
474 border-color: #0095dd;
477 xul|*.radio-check[selected] {
478 background-image: radial-gradient(circle, rgb(23,146,229),
479 rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px,
481 linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8));
484 xul|radio[disabled="true"] > xul|*.radio-check {
488 xul|*.radio-label-box {
489 -moz-margin-start: -1px; / * negative margin for the transparent border * /
490 -moz-margin-end: 10px;
491 -moz-padding-start: 0;
497 -moz-appearance: none;
498 background-color: #424f5a;
504 -moz-appearance: none;
506 -moz-border-end-width: 0;
507 -moz-padding-start: 15px;
508 -moz-padding-end: 21px;
510 transition: background-color 150ms;
513 xul|*.category:hover {
514 background-color: #5e6972;
517 xul|*.category[selected] {
518 background-color: #343f48;
520 box-shadow: inset 4px 0 0 0 #ff9500;
523 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
524 border-top: 1px #ffffff dotted;
525 border-bottom: 1px #ffffff dotted;
532 -moz-padding-start: 9px;
544 /* border-bottom: 1px solid #A09090;
546 padding-bottom: 15px; */
559 -moz-appearance: none;
560 background-color: transparent;
565 xul|*.fileFieldContentBox {
566 background-color: transparent;
569 xul|*.fileFieldIcon {
570 -moz-margin-start: 10px;
574 xul|*.fileFieldLabel {
575 -moz-margin-start: -26px;
576 -moz-padding-start: 36px;
579 xul|textbox:-moz-locale-dir(rtl),
580 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
581 xul|textbox + xul|button:-moz-locale-dir(ltr),
582 xul|filefield + xul|button:-moz-locale-dir(ltr) {
583 border-top-left-radius: 0;
584 border-bottom-left-radius: 0;
587 xul|textbox:-moz-locale-dir(ltr),
588 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
589 xul|textbox + xul|button:-moz-locale-dir(rtl),
590 xul|filefield + xul|button:-moz-locale-dir(rtl) {
591 border-top-right-radius: 0;
592 border-bottom-right-radius: 0;
595 xul|textbox + xul|button,
596 xul|filefield + xul|button {
597 -moz-border-start: none;
600 /* === END common.inc.css === */
603 background-color: transparent;
607 xul|colorpicker[type="button"],
612 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
618 -moz-padding-start: 0;
622 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
623 -moz-margin-start: 0;
624 -moz-padding-start: 0;
628 xul|*.checkbox-icon {
632 html|a:-moz-focusring,
633 xul|*.text-link:-moz-focusring,
634 xul|*.inline-link:-moz-focusring {
635 /* Don't specify the outline-color, we should always use initial value. */