Accessibility: Don't remove checkbox outline on focus
[lhc/web/wiklou.git] / resources / mediawiki.ui / mediawiki.ui.vector.css
1 /**
2 * Provide Agora appearance for mw-ui-* classes when using the Vector skin.
3 * Compass builds these Agora styles from source Sass files in
4 * extensions/Agora/modules/scss
5 */
6 /* _effects.scss */
7 /* Mixins for visual effects in CSS3 */
8 /* line 7, sourcefiles/scss/components/_utilities.scss */
9 .mw-ui-flush-left {
10 float: left;
11 margin-left: 0;
12 padding-left: 0;
13 }
14
15 /* line 11, sourcefiles/scss/components/_utilities.scss */
16 .mw-ui-flush-right {
17 float: right;
18 margin-right: 0;
19 padding-right: 0;
20 }
21
22 /* line 15, sourcefiles/scss/components/_utilities.scss */
23 .mw-ui-center-block {
24 display: block;
25 margin-left: auto;
26 margin-right: auto;
27 }
28
29 /* line 4, sourcefiles/scss/components/default/_buttons.scss */
30 .mw-ui-button {
31 display: -moz-inline-stack;
32 display: inline-block;
33 vertical-align: middle;
34 *vertical-align: auto;
35 zoom: 1;
36 *display: inline;
37 padding: 0.4em 1em 0.4em 1em;
38 margin: 0;
39 background-color: #c9c9c9;
40 *background-color: #c9c9c9;
41 *zoom: 1;
42 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9');
43 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9));
44 background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9);
45 background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9);
46 background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9);
47 background-image: linear-gradient(top, #dcdcdc, #c9c9c9);
48 color: black;
49 text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3);
50 border: 1px solid #c4c4c4;
51 -webkit-border-radius: 3px;
52 -moz-border-radius: 3px;
53 -ms-border-radius: 3px;
54 -o-border-radius: 3px;
55 border-radius: 3px;
56 vertical-align: middle;
57 text-align: center;
58 text-decoration: none;
59 font-weight: bold;
60 cursor: pointer;
61 }
62 /* line 38, sourcefiles/scss/mixins/_effects.scss */
63 .mw-ui-button:hover, .mw-ui-button.mw-ui-hover {
64 background-color: gainsboro;
65 *background-color: gainsboro;
66 *zoom: 1;
67 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC');
68 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc));
69 background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc);
70 background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc);
71 background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc);
72 background-image: linear-gradient(top, #e9e9e9, #dcdcdc);
73 text-decoration: none;
74 }
75 /* line 44, sourcefiles/scss/mixins/_effects.scss */
76 .mw-ui-button:active, .mw-ui-button.mw-ui-active {
77 background-image: none;
78 background-color: #c1c1c1;
79 text-shadow: none;
80 }
81 /* line 54, sourcefiles/scss/mixins/_effects.scss */
82 .mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
83 background-image: none;
84 background-color: #c9c9c9;
85 opacity: 0.5;
86 text-shadow: none;
87 }
88 /* line 30, sourcefiles/scss/components/default/_buttons.scss */
89 .mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
90 cursor: default;
91 }
92 /* line 36, sourcefiles/scss/components/default/_buttons.scss */
93 .mw-ui-button.mw-ui-big {
94 font-size: 1.3em;
95 }
96 /* line 41, sourcefiles/scss/components/default/_buttons.scss */
97 .mw-ui-button.mw-ui-block {
98 display: block;
99 width: 100%;
100 }
101
102 /* line 49, sourcefiles/scss/components/default/_buttons.scss */
103 a.mw-ui-button {
104 text-decoration: none;
105 }
106
107 /* line 56, sourcefiles/scss/components/default/_buttons.scss */
108 .mw-ui-button-group > * {
109 -webkit-border-radius: 0;
110 -moz-border-radius: 0;
111 -ms-border-radius: 0;
112 -o-border-radius: 0;
113 border-radius: 0;
114 float: left;
115 }
116 /* line 60, sourcefiles/scss/components/default/_buttons.scss */
117 .mw-ui-button-group > *:first-child {
118 -moz-border-radius-topleft: 3px;
119 -webkit-border-top-left-radius: 3px;
120 border-top-left-radius: 3px;
121 -moz-border-radius-bottomleft: 3px;
122 -webkit-border-bottom-left-radius: 3px;
123 border-bottom-left-radius: 3px;
124 }
125 /* line 65, sourcefiles/scss/components/default/_buttons.scss */
126 .mw-ui-button-group > *:last-child {
127 -moz-border-radius-topright: 3px;
128 -webkit-border-top-right-radius: 3px;
129 border-top-right-radius: 3px;
130 -moz-border-radius-bottomright: 3px;
131 -webkit-border-bottom-right-radius: 3px;
132 border-bottom-right-radius: 3px;
133 }
134
135 /* line 3, sourcefiles/scss/components/vector/_buttons.scss */
136 .mw-ui-button {
137 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
138 font-size: 1em;
139 line-height: 1.4em;
140 }
141 /* line 6, sourcefiles/scss/components/vector/_buttons.scss */
142 .mw-ui-button.mw-ui-primary {
143 background-color: #3366bb;
144 *background-color: #3366bb;
145 *zoom: 1;
146 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4779CD', endColorstr='#FF3366BB');
147 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4779cd), color-stop(100%, #3366bb));
148 background-image: -webkit-linear-gradient(top, #4779cd, #3366bb);
149 background-image: -moz-linear-gradient(top, #4779cd, #3366bb);
150 background-image: -o-linear-gradient(top, #4779cd, #3366bb);
151 background-image: linear-gradient(top, #4779cd, #3366bb);
152 color: white;
153 text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75);
154 border: 1px solid #3162b3;
155 }
156 /* line 38, sourcefiles/scss/mixins/_effects.scss */
157 .mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover {
158 background-color: #4779cd;
159 *background-color: #4779cd;
160 *zoom: 1;
161 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B88D2', endColorstr='#FF4779CD');
162 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b88d2), color-stop(100%, #4779cd));
163 background-image: -webkit-linear-gradient(top, #5b88d2, #4779cd);
164 background-image: -moz-linear-gradient(top, #5b88d2, #4779cd);
165 background-image: -o-linear-gradient(top, #5b88d2, #4779cd);
166 background-image: linear-gradient(top, #5b88d2, #4779cd);
167 text-decoration: none;
168 }
169 /* line 44, sourcefiles/scss/mixins/_effects.scss */
170 .mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active {
171 background-image: none;
172 background-color: #305faf;
173 text-shadow: none;
174 }
175 /* line 54, sourcefiles/scss/mixins/_effects.scss */
176 .mw-ui-button.mw-ui-primary:disabled, .mw-ui-button.mw-ui-primary.mw-ui-disabled {
177 background-image: none;
178 background-color: #3366bb;
179 opacity: 0.5;
180 text-shadow: none;
181 }
182 /* line 10, sourcefiles/scss/components/vector/_buttons.scss */
183 .mw-ui-button.mw-ui-constructive {
184 background-color: #27aa65;
185 *background-color: #27aa65;
186 *zoom: 1;
187 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2EC977', endColorstr='#FF27AA65');
188 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ec977), color-stop(100%, #27aa65));
189 background-image: -webkit-linear-gradient(top, #2ec977, #27aa65);
190 background-image: -moz-linear-gradient(top, #2ec977, #27aa65);
191 background-image: -o-linear-gradient(top, #2ec977, #27aa65);
192 background-image: linear-gradient(top, #2ec977, #27aa65);
193 color: white;
194 text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75);
195 border: 1px solid #25a260;
196 }
197 /* line 38, sourcefiles/scss/mixins/_effects.scss */
198 .mw-ui-button.mw-ui-constructive:hover, .mw-ui-button.mw-ui-constructive.mw-ui-hover {
199 background-color: #2ec977;
200 *background-color: #2ec977;
201 *zoom: 1;
202 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3ED384', endColorstr='#FF2EC977');
203 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ed384), color-stop(100%, #2ec977));
204 background-image: -webkit-linear-gradient(top, #3ed384, #2ec977);
205 background-image: -moz-linear-gradient(top, #3ed384, #2ec977);
206 background-image: -o-linear-gradient(top, #3ed384, #2ec977);
207 background-image: linear-gradient(top, #3ed384, #2ec977);
208 text-decoration: none;
209 }
210 /* line 44, sourcefiles/scss/mixins/_effects.scss */
211 .mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-constructive.mw-ui-active {
212 background-image: none;
213 background-color: #249e5e;
214 text-shadow: none;
215 }
216 /* line 54, sourcefiles/scss/mixins/_effects.scss */
217 .mw-ui-button.mw-ui-constructive:disabled, .mw-ui-button.mw-ui-constructive.mw-ui-disabled {
218 background-image: none;
219 background-color: #27aa65;
220 opacity: 0.5;
221 text-shadow: none;
222 }
223 /* line 14, sourcefiles/scss/components/vector/_buttons.scss */
224 .mw-ui-button.mw-ui-destructive {
225 background-color: #cc0000;
226 *background-color: #cc0000;
227 *zoom: 1;
228 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF20000', endColorstr='#FFCC0000');
229 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f20000), color-stop(100%, #cc0000));
230 background-image: -webkit-linear-gradient(top, #f20000, #cc0000);
231 background-image: -moz-linear-gradient(top, #f20000, #cc0000);
232 background-image: -o-linear-gradient(top, #f20000, #cc0000);
233 background-image: linear-gradient(top, #f20000, #cc0000);
234 color: white;
235 text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75);
236 border: 1px solid #c20000;
237 }
238 /* line 38, sourcefiles/scss/mixins/_effects.scss */
239 .mw-ui-button.mw-ui-destructive:hover, .mw-ui-button.mw-ui-destructive.mw-ui-hover {
240 background-color: #f20000;
241 *background-color: #f20000;
242 *zoom: 1;
243 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0D0D', endColorstr='#FFF20000');
244 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0d0d), color-stop(100%, #f20000));
245 background-image: -webkit-linear-gradient(top, #ff0d0d, #f20000);
246 background-image: -moz-linear-gradient(top, #ff0d0d, #f20000);
247 background-image: -o-linear-gradient(top, #ff0d0d, #f20000);
248 background-image: linear-gradient(top, #ff0d0d, #f20000);
249 text-decoration: none;
250 }
251 /* line 44, sourcefiles/scss/mixins/_effects.scss */
252 .mw-ui-button.mw-ui-destructive:active, .mw-ui-button.mw-ui-destructive.mw-ui-active {
253 background-image: none;
254 background-color: #bd0000;
255 text-shadow: none;
256 }
257 /* line 54, sourcefiles/scss/mixins/_effects.scss */
258 .mw-ui-button.mw-ui-destructive:disabled, .mw-ui-button.mw-ui-destructive.mw-ui-disabled {
259 background-image: none;
260 background-color: #cc0000;
261 opacity: 0.5;
262 text-shadow: none;
263 }
264
265 /* line 14, sourcefiles/scss/components/default/_forms.scss */
266 .mw-ui-vform {
267 -webkit-box-sizing: border-box;
268 -moz-box-sizing: border-box;
269 box-sizing: border-box;
270 width: 290px;
271 }
272 /* line 19, sourcefiles/scss/components/default/_forms.scss */
273 .mw-ui-vform > div {
274 display: block;
275 margin: 0 0 15px 0;
276 padding: 0;
277 width: 100%;
278 }
279 /* line 27, sourcefiles/scss/components/default/_forms.scss */
280 .mw-ui-vform > div input,
281 .mw-ui-vform > div .mw-ui-button {
282 display: block;
283 -webkit-box-sizing: border-box;
284 -moz-box-sizing: border-box;
285 box-sizing: border-box;
286 margin: 0;
287 width: 100%;
288 }
289 /* line 36, sourcefiles/scss/components/default/_forms.scss */
290 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) {
291 border-style: solid;
292 border-width: 1px;
293 border-color: #c9c9c9;
294 color: #252525;
295 padding: 0.35em 0 0.35em 0.5em;
296 }
297 /* line 11, sourcefiles/scss/mixins/_forms.scss */
298 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus {
299 box-shadow: #4091ed 0px 0px 5px;
300 border-color: #4091ed;
301 }
302 /* line 13, sourcefiles/scss/mixins/_forms.scss */
303 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) {
304 outline: 0;
305 }
306 /* line 40, sourcefiles/scss/components/default/_forms.scss */
307 .mw-ui-vform > div label {
308 display: block;
309 -webkit-box-sizing: border-box;
310 -moz-box-sizing: border-box;
311 box-sizing: border-box;
312 font-size: 0.9em;
313 color: #4a4a4a;
314 width: auto;
315 margin: 0 0 0.2em 0;
316 padding: 0;
317 }
318 /* line 38, sourcefiles/scss/mixins/_forms.scss */
319 .mw-ui-vform > div label * {
320 font-weight: normal;
321 }
322 /* line 51, sourcefiles/scss/components/default/_forms.scss */
323 .mw-ui-vform > div input[type="checkbox"],
324 .mw-ui-vform > div input[type="radio"] {
325 display: inline;
326 -webkit-box-sizing: content-box;
327 -moz-box-sizing: content-box;
328 box-sizing: content-box;
329 width: auto;
330 }
331
332 /* line 67, sourcefiles/scss/components/default/_forms.scss */
333 .mw-ui-input {
334 border-style: solid;
335 border-width: 1px;
336 border-color: #c9c9c9;
337 color: #252525;
338 padding: 0.35em 0 0.35em 0.5em;
339 }
340 /* line 11, sourcefiles/scss/mixins/_forms.scss */
341 .mw-ui-input:focus {
342 box-shadow: #4091ed 0px 0px 5px;
343 border-color: #4091ed;
344 }
345 /* line 13, sourcefiles/scss/mixins/_forms.scss */
346 .mw-ui-input:focus:not([type=checkbox]):not([type=radio]) {
347 outline: 0;
348 }
349
350 /* line 74, sourcefiles/scss/components/default/_forms.scss */
351 .mw-ui-label {
352 font-size: 0.9em;
353 color: #4a4a4a;
354 }
355 /* line 38, sourcefiles/scss/mixins/_forms.scss */
356 .mw-ui-label * {
357 font-weight: normal;
358 }
359
360 /* line 83, sourcefiles/scss/components/default/_forms.scss */
361 .mw-ui-checkbox-label, .mw-ui-radio-label {
362 margin-bottom: 0.5em;
363 cursor: pointer;
364 vertical-align: bottom;
365 line-height: normal;
366 font-weight: normal;
367 }
368 /* line 54, sourcefiles/scss/mixins/_forms.scss */
369 .mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] {
370 width: auto;
371 height: auto;
372 margin: 0 0.1em 0em 0;
373 padding: 0;
374 border-style: solid;
375 border-width: 1px;
376 border-color: #c9c9c9;
377 cursor: pointer;
378 }
379
380 /* line 5, sourcefiles/scss/components/vector/_forms.scss */
381 .mw-ui-vform,
382 .mw-ui-vform > div input,
383 .mw-ui-input {
384 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
385 font-size: 1em;
386 line-height: 1.4em;
387 }
388
389 /* line 3, sourcefiles/scss/components/vector/_containers.scss */
390 .mw-ui-container {
391 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
392 font-size: 1em;
393 line-height: 1.4em;
394 }