|
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/. */ |
|
4 |
|
5 @namespace url("http://www.w3.org/1999/xhtml"); |
|
6 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
|
7 |
|
8 /* Style the scrollbars */ |
|
9 xul|window xul|scrollbar { |
|
10 display: none; |
|
11 } |
|
12 |
|
13 html xul|scrollbar[root="true"] { |
|
14 position: relative; |
|
15 z-index: 2147483647; |
|
16 } |
|
17 |
|
18 html xul|scrollbar { |
|
19 -moz-appearance: none !important; |
|
20 background-color: transparent !important; |
|
21 background-image: none !important; |
|
22 border: 0px solid transparent !important; |
|
23 pointer-events: none; |
|
24 opacity: 1; |
|
25 } |
|
26 |
|
27 xul|scrollbar[orient="vertical"] { |
|
28 -moz-margin-start: -8px; |
|
29 min-width: 8px; |
|
30 max-width: 8px; |
|
31 } |
|
32 |
|
33 xul|scrollbar[orient="vertical"] xul|thumb { |
|
34 max-width: 6px !important; |
|
35 min-width: 6px !important; |
|
36 } |
|
37 |
|
38 xul|scrollbar[orient="horizontal"] { |
|
39 margin-top: -8px; |
|
40 min-height: 8px; |
|
41 max-height: 8px; |
|
42 } |
|
43 |
|
44 xul|scrollbar[orient="horizontal"] xul|thumb { |
|
45 max-height: 6px !important; |
|
46 min-height: 6px !important; |
|
47 } |
|
48 |
|
49 xul|scrollbar:not([active="true"]), |
|
50 xul|scrollbar[disabled] { |
|
51 opacity: 0; |
|
52 transition: opacity 1s ease; |
|
53 } |
|
54 |
|
55 xul|scrollbarbutton { |
|
56 min-height: 8px !important; |
|
57 min-width: 8px !important; |
|
58 -moz-appearance: none !important; |
|
59 visibility: hidden; |
|
60 } |
|
61 |
|
62 xul|scrollbarbutton[sbattr="scrollbar-up-top"], |
|
63 xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] { |
|
64 display: none; |
|
65 } |
|
66 |
|
67 xul|thumb { |
|
68 background-color: rgba(0, 0, 0, 0.4) !important; |
|
69 -moz-border-top-colors: none !important; |
|
70 -moz-border-bottom-colors: none !important; |
|
71 -moz-border-right-colors: none !important; |
|
72 -moz-border-left-colors: none !important; |
|
73 border: 1px solid rgba(255, 255, 255, 0.4) !important; |
|
74 border-radius: 3px; |
|
75 } |
|
76 |
|
77 xul|scrollbarbutton { |
|
78 background-image: none !important; |
|
79 } |
|
80 |
|
81 /* -moz-touch-enabled? media elements */ |
|
82 :-moz-any(video, audio) > xul|videocontrols { |
|
83 -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls"); |
|
84 } |
|
85 |
|
86 select:not([size]):not([multiple]) > xul|scrollbar, |
|
87 select[size="1"] > xul|scrollbar, |
|
88 select:not([size]):not([multiple]) xul|scrollbarbutton, |
|
89 select[size="1"] xul|scrollbarbutton { |
|
90 display: block; |
|
91 margin-left: 0; |
|
92 min-width: 16px; |
|
93 } |
|
94 |
|
95 /* Override inverse OS themes */ |
|
96 select, |
|
97 textarea, |
|
98 button, |
|
99 xul|button, |
|
100 * > input:not([type="image"]) { |
|
101 -moz-appearance: none !important; /* See bug 598421 for fixing the platform */ |
|
102 border-radius: 3px; |
|
103 } |
|
104 |
|
105 select[size], |
|
106 select[multiple], |
|
107 select[size][multiple], |
|
108 textarea, |
|
109 * > input:not([type="image"]) { |
|
110 border-style: solid; |
|
111 border-color: #7d7d7d; |
|
112 color: #414141; |
|
113 background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 3px, rgba(255,255,255,0.2) 16px); |
|
114 } |
|
115 |
|
116 /* Selects are handled by the form helper, see bug 685197 */ |
|
117 select option, select optgroup { |
|
118 pointer-events: none; |
|
119 } |
|
120 |
|
121 select:not([size]):not([multiple]), |
|
122 select[size="0"], |
|
123 select[size="1"], |
|
124 * > input[type="button"], |
|
125 * > input[type="submit"], |
|
126 * > input[type="reset"], |
|
127 button { |
|
128 border-style: solid; |
|
129 border-color: #7d7d7d; |
|
130 color: #414141; |
|
131 background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(215,215,215,0.5) 18px, rgba(115,115,115,0.5) 100%); |
|
132 } |
|
133 |
|
134 input[type="checkbox"] { |
|
135 background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 2px, rgba(255,255,255,0.2) 6px); |
|
136 } |
|
137 |
|
138 input[type="radio"] { |
|
139 background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(195,195,195,0.5) 5px, rgba(115,115,115,0.5) 100%); |
|
140 } |
|
141 |
|
142 select { |
|
143 border-width: 1px; |
|
144 padding: 1px; |
|
145 } |
|
146 |
|
147 select:not([size]):not([multiple]), |
|
148 select[size="0"], |
|
149 select[size="1"] { |
|
150 padding: 0 1px 0 1px; |
|
151 } |
|
152 |
|
153 * > input:not([type="image"]) { |
|
154 border-width: 1px; |
|
155 padding: 1px; |
|
156 } |
|
157 |
|
158 textarea { |
|
159 resize: none; |
|
160 border-width: 1px; |
|
161 padding: 2px 1px 2px 1px; |
|
162 } |
|
163 |
|
164 input[type="button"], |
|
165 input[type="submit"], |
|
166 input[type="reset"], |
|
167 button { |
|
168 border-width: 1px; |
|
169 padding: 0 7px 0 7px; |
|
170 } |
|
171 |
|
172 input[type="radio"], |
|
173 input[type="checkbox"] { |
|
174 max-width: 14px; |
|
175 max-height: 14px; |
|
176 border: 1px solid #a7a7a7 !important; |
|
177 padding: 2px 1px 2px 1px; |
|
178 } |
|
179 |
|
180 select > button { |
|
181 border-width: 0px !important; |
|
182 margin: 0px !important; |
|
183 padding: 0px !important; |
|
184 border-radius: 0; |
|
185 color: #414141; |
|
186 |
|
187 background-image: radial-gradient(at bottom left, #bbbbbb 40%, #f5f5f5), url(arrow.svg) !important; |
|
188 background-color: transparent; |
|
189 background-position: -15px center, 4px center !important; |
|
190 background-repeat: no-repeat, no-repeat !important; |
|
191 background-size: 100% 90%, auto auto; |
|
192 |
|
193 -moz-binding: none !important; |
|
194 position: relative !important; |
|
195 font-size: inherit; |
|
196 } |
|
197 |
|
198 select[size]:focus, |
|
199 select[multiple]:focus, |
|
200 select[size][multiple]:focus, |
|
201 textarea:focus, |
|
202 input[type="file"]:focus > input[type="text"], |
|
203 * > input:not([type="image"]):focus { |
|
204 outline: 0px !important; |
|
205 border-style: solid; |
|
206 border-color: rgb(94,128,153); |
|
207 background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 3px, rgba(255,255,255,0.2) 16px); |
|
208 } |
|
209 |
|
210 select:not([size]):not([multiple]):focus, |
|
211 select[size="0"]:focus, |
|
212 select[size="1"]:focus, |
|
213 input[type="button"]:focus, |
|
214 input[type="submit"]:focus, |
|
215 input[type="reset"]:focus, |
|
216 button:focus { |
|
217 outline: 0px !important; |
|
218 border-style: solid; |
|
219 border-color: rgb(94,128,153); |
|
220 background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(198,225,256,0.2) 18px, rgba(27,113,177,0.5) 100%); |
|
221 } |
|
222 |
|
223 input[type="checkbox"]:focus, |
|
224 input[type="radio"]:focus { |
|
225 border-color: #99c6e0 !important; |
|
226 } |
|
227 |
|
228 input[type="checkbox"]:focus { |
|
229 background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 2px, rgba(255,255,255,0.2) 6px); |
|
230 } |
|
231 |
|
232 input[type="radio"]:focus { |
|
233 background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(198,225,246,0.2) 5px, rgba(27,113,177,0.5) 100%); |
|
234 } |
|
235 |
|
236 /* we need to be specific for selects because the above rules are specific too */ |
|
237 textarea[disabled], |
|
238 select[size][disabled], |
|
239 select[multiple][disabled], |
|
240 select[size][multiple][disabled], |
|
241 select:not([size]):not([multiple])[disabled], |
|
242 select[size="0"][disabled], |
|
243 select[size="1"][disabled], |
|
244 button[disabled], |
|
245 * > input:not([type="image"])[disabled] { |
|
246 color: rgba(0,0,0,0.3); |
|
247 border-color: rgba(125,125,125,0.4); |
|
248 border-style: solid; |
|
249 border-width: 1px; |
|
250 background: transparent linear-gradient(rgba(185,185,185,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(255,255,255,0.4) 100%); |
|
251 } |
|
252 |
|
253 select:not([size]):not([multiple])[disabled], |
|
254 select[size="0"][disabled], |
|
255 select[size="1"][disabled] { |
|
256 background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%); |
|
257 } |
|
258 |
|
259 input[type="button"][disabled], |
|
260 input[type="submit"][disabled], |
|
261 input[type="reset"][disabled], |
|
262 button[disabled="true"] { |
|
263 padding: 0 7px 0 7px; |
|
264 background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%); |
|
265 } |
|
266 |
|
267 input[type="radio"][disabled], |
|
268 input[type="radio"][disabled]:active, |
|
269 input[type="radio"][disabled]:hover, |
|
270 input[type="radio"][disabled]:hover:active, |
|
271 input[type="checkbox"][disabled], |
|
272 input[type="checkbox"][disabled]:active, |
|
273 input[type="checkbox"][disabled]:hover, |
|
274 input[type="checkbox"][disabled]:hover:active { |
|
275 border:1px solid rgba(125,125,125,0.4) !important; |
|
276 } |
|
277 |
|
278 select[disabled] > button { |
|
279 opacity: 0.6; |
|
280 padding: 1px 7px 1px 7px; |
|
281 } |
|
282 |
|
283 *:-moz-any-link:active, |
|
284 *[role=button]:active, |
|
285 button:active, |
|
286 input:active, |
|
287 option:active, |
|
288 select:active, |
|
289 label:active, |
|
290 textarea:active { |
|
291 background-color: rgba(141, 184, 216, 0.5); |
|
292 } |
|
293 |
|
294 input[type=number] > div > div, /* work around bug 946184 */ |
|
295 input[type=number]::-moz-number-spin-box { |
|
296 display: none; |
|
297 } |
|
298 |
|
299 %ifdef MOZ_WIDGET_GONK |
|
300 /* This binding only provide key shortcuts that we can't use on devices */ |
|
301 input, |
|
302 textarea { |
|
303 -moz-binding: none !important; |
|
304 } |
|
305 %endif |