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 {
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;
82 border-top: 1px solid #c1c1c1;
83 border-bottom: 1px solid #c1c1c1;
84 background-color: #fbfbfb;
93 -moz-appearance: none;
98 background-color: #fbfbfb;
100 transition: background-color 50ms ease 0s;
104 background-color: #ebebeb;
108 background-color: #ebebeb;
109 padding-bottom: 0; / compensate the 4px border /
110 border-bottom: 4px solid #ff9500;
122 border: 1px outset #CCD0DD;
123 background-color: #CCD0DD;
125 / * override forms.css * /
129 /* xul buttons and menulists */
132 xul|colorpicker[type="button"],
134 -moz-appearance: none;
138 border: 1px solid #c1c1c1;
139 -moz-border-top-colors: none !important;
140 -moz-border-right-colors: none !important;
141 -moz-border-bottom-colors: none !important;
142 -moz-border-left-colors: none !important;
144 background-color: #fbfbfb;
147 html|button:enabled:hover,
148 xul|button:not([disabled="true"]):hover,
149 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
150 xul|menulist:not([disabled="true"]):hover {
153 html|button:enabled:hover:active,
154 xul|button:not([disabled="true"]):hover:active,
155 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
156 xul|menulist[open="true"]:not([disabled="true"]) {
157 border: 1px inset #CCD0DD;
160 html|button:disabled,
161 xul|button[disabled="true"],
162 xul|colorpicker[type="button"][disabled="true"],
163 xul|menulist[disabled="true"] {
165 border: 1px outset #CCD0DD;
169 xul|colorpicker[type="button"] {
174 xul|button > xul|*.button-box,
175 xul|menulist > xul|*.menulist-label-box {
176 padding-right: 10px !important;
177 padding-left: 10px !important;
180 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
181 -moz-margin-end: 5px;
184 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
185 -moz-appearance: none;
187 -moz-margin-start: 10px;
192 background-color: transparent;
193 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
199 border: 1px solid #c1c1c1;
200 background-color: #ffcb00;
201 background-image: none;
203 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
206 xul|*.help-button:not([disabled="true"]):hover {
207 background-color: #f4c200;
208 background-image: none;
211 xul|*.help-button:not([disabled="true"]):hover:active {
212 background-color: #eaba00;
213 background-image: none;
216 xul|*.close-icon > xul|*.button-box,
217 xul|*.help-button > xul|*.button-box {
220 padding-right: 0 !important;
221 padding-left: 0 !important;
224 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
229 xul|*.help-button > xul|*.button-box > xul|*.button-text {
233 xul|*.spinbuttons-button {
234 -moz-margin-start: 10px !important;
235 -moz-margin-end: 2px !important;
238 xul|*.spinbuttons-up {
239 margin-top: 2px !important;
240 border-radius: 1px 1px 0 0;
243 xul|*.spinbuttons-down {
244 margin-bottom: 2px !important;
245 border-radius: 0 0 1px 1px;
248 xul|*.spinbuttons-button > xul|*.button-box {
249 padding: 1px 5px 2px !important;
252 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
253 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
256 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
257 list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
260 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
261 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
264 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
265 list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
268 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
269 -moz-appearance: none;
270 -moz-margin-end: 4px;
273 background-color: transparent;
274 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
277 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
282 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
283 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
286 xul|menulist > xul|menupopup,
287 xul|button[type="menu"] > xul|menupopup {
288 -moz-appearance: none;
289 border: 1px solid rgba(23,50,77,0.4);
291 background-color: #fff;
294 xul|menulist > xul|menupopup xul|menu,
295 xul|menulist > xul|menupopup xul|menuitem,
296 xul|button[type="menu"] > xul|menupopup xul|menu,
297 xul|button[type="menu"] > xul|menupopup xul|menuitem {
298 -moz-appearance: none;
302 padding-bottom: 0.2em;
303 -moz-padding-start: 10px;
304 -moz-padding-end: 30px;
307 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
308 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
309 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
310 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
312 background-color: rgba(0,149,221,0.25);
315 xul|menulist > xul|menupopup > xul|menu[selected="true"],
316 xul|menulist > xul|menupopup > xul|menuitem[selected="true"],
317 xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"],
318 xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] {
320 background-color: #0095DD;
323 xul|menulist > xul|menupopup xul|menuseparator,
324 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
325 -moz-appearance: none;
329 border-top: 1px solid rgba(23,50,77,0.4);
336 -moz-appearance: none;
340 text-shadow: 0 1px 1px #fefffe;
343 border: 1px solid #c1c1c1;
344 -moz-border-top-colors: none !important;
345 -moz-border-right-colors: none !important;
346 -moz-border-bottom-colors: none !important;
347 -moz-border-left-colors: none !important;
349 background-color: #fff;
353 xul|textbox[focused] {
354 border-color: #0095dd;
357 html|textbox:disabled,
358 xul|textbox[disabled="true"] {
370 text-decoration: none;
374 xul|*.text-link:hover,
375 xul|*.inline-link:hover {
377 text-decoration: none;
381 xul|*.text-link:hover:active,
382 xul|*.inline-link:hover:active {
384 text-decoration: none;
387 /* Checkboxes and radio buttons */
390 -moz-margin-start: 0;
393 xul|*.checkbox-check {
394 -moz-appearance: none;
398 border: 1px solid #c1c1c1;
399 -moz-margin-end: 10px;
400 background-color: #f1f1f1;
401 background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
402 background-position: center center;
403 background-repeat: no-repeat;
404 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
407 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
408 border-color: #0095dd;
411 xul|*.checkbox-check[checked] {
412 background-image: url("chrome://global/skin/in-content/check.png"),
413 / * !important needed to override toolkit !important rule * /
414 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
417 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
421 xul|*.checkbox-label-box {
422 -moz-margin-start: -1px; / * negative margin for the transparent border * /
423 -moz-padding-start: 0;
426 @media (min-resolution: 2dppx) {
427 xul|*.checkbox-check[checked] {
428 background-size: 12px 12px, auto;
429 background-image: url("chrome://global/skin/in-content/check@2x.png"),
430 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
434 xul|richlistitem > xul|*.checkbox-check {
439 -moz-appearance: none;
442 border: 1px solid #c1c1c1;
444 -moz-margin-end: 10px;
445 background-color: #f1f1f1;
446 background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
447 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
450 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
451 border-color: #0095dd;
454 xul|*.radio-check[selected] {
455 background-image: radial-gradient(circle, rgb(23,146,229),
456 rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px,
458 linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8));
461 xul|radio[disabled="true"] > xul|*.radio-check {
465 xul|*.radio-label-box {
466 -moz-margin-start: -1px; / * negative margin for the transparent border * /
467 -moz-margin-end: 10px;
468 -moz-padding-start: 0;
474 -moz-appearance: none;
475 background-color: #424f5a;
481 -moz-appearance: none;
483 -moz-border-end-width: 0;
484 -moz-padding-start: 15px;
485 -moz-padding-end: 21px;
487 transition: background-color 150ms;
490 xul|*.category:hover {
491 background-color: #5e6972;
494 xul|*.category[selected] {
495 background-color: #343f48;
497 -moz-padding-start: 11px; / compensate the 4px border /
498 -moz-border-start: solid 4px #ff9500;
501 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
502 border-top: 1px #ffffff dotted;
503 border-bottom: 1px #ffffff dotted;
510 -moz-padding-start: 9px;
522 border-bottom: 1px solid #c8c8c8;
524 padding-bottom: 15px;
537 -moz-appearance: none;
538 background-color: transparent;
543 xul|*.fileFieldContentBox {
544 background-color: transparent;
547 xul|*.fileFieldIcon {
548 -moz-margin-start: 10px;
552 xul|*.fileFieldLabel {
553 -moz-margin-start: -26px;
554 -moz-padding-start: 36px;
557 xul|textbox:-moz-locale-dir(rtl),
558 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
559 xul|textbox + xul|button:-moz-locale-dir(ltr),
560 xul|filefield + xul|button:-moz-locale-dir(ltr) {
561 border-top-left-radius: 0;
562 border-bottom-left-radius: 0;
565 xul|textbox:-moz-locale-dir(ltr),
566 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
567 xul|textbox + xul|button:-moz-locale-dir(rtl),
568 xul|filefield + xul|button:-moz-locale-dir(rtl) {
569 border-top-right-radius: 0;
570 border-bottom-right-radius: 0;
573 xul|textbox + xul|button,
574 xul|filefield + xul|button {
575 -moz-border-start: none;
578 /* === END common.inc.css === */
581 background-color: transparent;
585 xul|colorpicker[type="button"],
590 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
596 -moz-padding-start: 0;
600 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
601 -moz-margin-start: 0;
602 -moz-padding-start: 0;
606 xul|*.checkbox-icon {
610 html|a:-moz-focusring,
611 xul|*.text-link:-moz-focusring,
612 xul|*.inline-link:-moz-focusring {
613 border: 1px dotted -moz-DialogText;