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