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 /* ===== checkbox.css ===================================================
6 == Styles used by the XUL checkbox element.
7 ======================================================================= */
9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
11 /* ::::: checkbox ::::: */
15 border-left: 1px transparent;
16 border-right: 1px transparent;
19 .checkbox-spacer-box {
20 -moz-box-align: center;
21 border-right: 4px solid transparent;
24 .checkbox-label-center-box {
25 -moz-box-align: center;
29 border: 1px solid transparent;
31 -moz-box-align: center;
42 /* ..... focused state ..... */
44 checkbox:-moz-focusring > .checkbox-label-center-box > .checkbox-label-box {
45 border: 1px dotted #008484;
48 /* ..... disabled state ..... */
50 checkbox[disabled="true"] > .checkbox-check,
51 checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check {
52 border: 1px solid #8050B0;
53 background-color: #000000;
56 checkbox[disabled="true"] > .checkbox-label-center-box > .checkbox-label-box {
60 /* ::::: checkmark image ::::: */
64 border: 1px solid #FF9F00;
69 background: transparent 50% 50% no-repeat;
72 checkbox > .checkbox-check {
76 checkbox:not([disabled="true"]):hover > .checkbox-check,
77 checkbox:not([disabled="true"]):hover:active > .checkbox-check,
78 checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check,
79 checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check {
80 border: 1px solid #FFCF00;
83 checkbox:not([disabled="true"]):hover > .checkbox-label-box,
84 checkbox:not([disabled="true"]):hover:active > .checkbox-label-box,
85 checkbox:not([disabled="true"]):hover > .checkbox-label-center-box > .checkbox-label-box,
86 checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .checkbox-label-box {
90 /* ..... checked state ..... */
92 checkbox[checked="true"] > .checkbox-check,
93 checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check {
94 background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
97 checkbox[checked="true"]:hover > .checkbox-check,
98 checkbox[checked="true"]:hover:active > .checkbox-check,
99 checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check,
100 checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check {
101 background-image: url("chrome://global/skin/checkbox/cbox-check-hover.gif");
104 checkbox[checked="true"][disabled="true"] .checkbox-check,
105 checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > > .checkbox-check {
106 background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important;
109 /* ..... checkbox in groupbox caption ..... */
118 caption > checkbox:hover {
119 background-color: #FFCF00;
122 caption > checkbox:hover:active {
123 background-color: #FF9F00;
126 caption > checkbox:not([disabled="true"]) > .checkbox-label-center-box > .checkbox-label-box,
127 caption > checkbox:not([disabled="true"]):hover > .checkbox-label-center-box > .checkbox-label-box,
128 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .checkbox-label-box {
132 caption > checkbox:not([disabled="true"]) > .checkbox-check,
133 caption > checkbox:not([disabled="true"]):hover > .checkbox-check,
134 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-check,
135 caption > checkbox:not([disabled="true"]) > .checkbox-spacer-box > .checkbox-check,
136 caption > checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check,
137 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check {
138 border-color: #000000;
141 caption > checkbox[checked="true"] > .checkbox-check,
142 caption > checkbox[checked="true"]:hover > .checkbox-check,
143 caption > checkbox[checked="true"]:hover:active > .checkbox-check,
144 caption > checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check,
145 caption > checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check,
146 caption > checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check {
147 background-image: url("chrome://global/skin/checkbox/cbox-check-inverted.gif");