Merge "Minor CSS cleanup for Vector and Monobook skins"
[mediawiki.git] / resources / mediawiki.ui / mediawiki.ui.vector.css
blobfd1ed473cea900ac0b1b842b5ab0dfa7ba0130f8
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;
15 /* line 11, sourcefiles/scss/components/_utilities.scss */
16 .mw-ui-flush-right {
17 float: right;
18 margin-right: 0;
19 padding-right: 0;
22 /* line 15, sourcefiles/scss/components/_utilities.scss */
23 .mw-ui-center-block {
24 display: block;
25 margin-left: auto;
26 margin-right: auto;
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: #4a4a4a;
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;
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;
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;
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;
88 /* line 30, sourcefiles/scss/components/default/_buttons.scss */
89 .mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
90 cursor: default;
92 /* line 36, sourcefiles/scss/components/default/_buttons.scss */
93 .mw-ui-button.mw-ui-big {
94 font-size: 1.3em;
96 /* line 41, sourcefiles/scss/components/default/_buttons.scss */
97 .mw-ui-button.mw-ui-block {
98 display: block;
99 width: 100%;
102 /* line 48, sourcefiles/scss/components/default/_buttons.scss */
103 .mw-ui-button-group > * {
104 -webkit-border-radius: 0;
105 -moz-border-radius: 0;
106 -ms-border-radius: 0;
107 -o-border-radius: 0;
108 border-radius: 0;
109 float: left;
111 /* line 52, sourcefiles/scss/components/default/_buttons.scss */
112 .mw-ui-button-group > *:first-child {
113 -moz-border-radius-topleft: 3px;
114 -webkit-border-top-left-radius: 3px;
115 border-top-left-radius: 3px;
116 -moz-border-radius-bottomleft: 3px;
117 -webkit-border-bottom-left-radius: 3px;
118 border-bottom-left-radius: 3px;
120 /* line 57, sourcefiles/scss/components/default/_buttons.scss */
121 .mw-ui-button-group > *:last-child {
122 -moz-border-radius-topright: 3px;
123 -webkit-border-top-right-radius: 3px;
124 border-top-right-radius: 3px;
125 -moz-border-radius-bottomright: 3px;
126 -webkit-border-bottom-right-radius: 3px;
127 border-bottom-right-radius: 3px;
130 /* line 3, sourcefiles/scss/components/vector/_buttons.scss */
131 .mw-ui-button {
132 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
133 font-size: 1em;
134 line-height: 1.4em;
136 /* line 6, sourcefiles/scss/components/vector/_buttons.scss */
137 .mw-ui-button.mw-ui-primary {
138 background-color: #3366bb;
139 *background-color: #3366bb;
140 *zoom: 1;
141 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4779CD', endColorstr='#FF3366BB');
142 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4779cd), color-stop(100%, #3366bb));
143 background-image: -webkit-linear-gradient(top, #4779cd, #3366bb);
144 background-image: -moz-linear-gradient(top, #4779cd, #3366bb);
145 background-image: -o-linear-gradient(top, #4779cd, #3366bb);
146 background-image: linear-gradient(top, #4779cd, #3366bb);
147 color: white;
148 text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75);
149 border: 1px solid #3162b3;
151 /* line 38, sourcefiles/scss/mixins/_effects.scss */
152 .mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover {
153 background-color: #4779cd;
154 *background-color: #4779cd;
155 *zoom: 1;
156 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B88D2', endColorstr='#FF4779CD');
157 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b88d2), color-stop(100%, #4779cd));
158 background-image: -webkit-linear-gradient(top, #5b88d2, #4779cd);
159 background-image: -moz-linear-gradient(top, #5b88d2, #4779cd);
160 background-image: -o-linear-gradient(top, #5b88d2, #4779cd);
161 background-image: linear-gradient(top, #5b88d2, #4779cd);
162 text-decoration: none;
164 /* line 44, sourcefiles/scss/mixins/_effects.scss */
165 .mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active {
166 background-image: none;
167 background-color: #305faf;
168 text-shadow: none;
170 /* line 54, sourcefiles/scss/mixins/_effects.scss */
171 .mw-ui-button.mw-ui-primary:disabled, .mw-ui-button.mw-ui-primary.mw-ui-disabled {
172 background-image: none;
173 background-color: #3366bb;
174 opacity: 0.5;
175 text-shadow: none;
177 /* line 10, sourcefiles/scss/components/vector/_buttons.scss */
178 .mw-ui-button.mw-ui-constructive {
179 background-color: #27aa65;
180 *background-color: #27aa65;
181 *zoom: 1;
182 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2EC977', endColorstr='#FF27AA65');
183 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ec977), color-stop(100%, #27aa65));
184 background-image: -webkit-linear-gradient(top, #2ec977, #27aa65);
185 background-image: -moz-linear-gradient(top, #2ec977, #27aa65);
186 background-image: -o-linear-gradient(top, #2ec977, #27aa65);
187 background-image: linear-gradient(top, #2ec977, #27aa65);
188 color: white;
189 text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75);
190 border: 1px solid #25a260;
192 /* line 38, sourcefiles/scss/mixins/_effects.scss */
193 .mw-ui-button.mw-ui-constructive:hover, .mw-ui-button.mw-ui-constructive.mw-ui-hover {
194 background-color: #2ec977;
195 *background-color: #2ec977;
196 *zoom: 1;
197 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3ED384', endColorstr='#FF2EC977');
198 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ed384), color-stop(100%, #2ec977));
199 background-image: -webkit-linear-gradient(top, #3ed384, #2ec977);
200 background-image: -moz-linear-gradient(top, #3ed384, #2ec977);
201 background-image: -o-linear-gradient(top, #3ed384, #2ec977);
202 background-image: linear-gradient(top, #3ed384, #2ec977);
203 text-decoration: none;
205 /* line 44, sourcefiles/scss/mixins/_effects.scss */
206 .mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-constructive.mw-ui-active {
207 background-image: none;
208 background-color: #249e5e;
209 text-shadow: none;
211 /* line 54, sourcefiles/scss/mixins/_effects.scss */
212 .mw-ui-button.mw-ui-constructive:disabled, .mw-ui-button.mw-ui-constructive.mw-ui-disabled {
213 background-image: none;
214 background-color: #27aa65;
215 opacity: 0.5;
216 text-shadow: none;
218 /* line 14, sourcefiles/scss/components/vector/_buttons.scss */
219 .mw-ui-button.mw-ui-destructive {
220 background-color: #cc0000;
221 *background-color: #cc0000;
222 *zoom: 1;
223 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF20000', endColorstr='#FFCC0000');
224 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f20000), color-stop(100%, #cc0000));
225 background-image: -webkit-linear-gradient(top, #f20000, #cc0000);
226 background-image: -moz-linear-gradient(top, #f20000, #cc0000);
227 background-image: -o-linear-gradient(top, #f20000, #cc0000);
228 background-image: linear-gradient(top, #f20000, #cc0000);
229 color: white;
230 text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75);
231 border: 1px solid #c20000;
233 /* line 38, sourcefiles/scss/mixins/_effects.scss */
234 .mw-ui-button.mw-ui-destructive:hover, .mw-ui-button.mw-ui-destructive.mw-ui-hover {
235 background-color: #f20000;
236 *background-color: #f20000;
237 *zoom: 1;
238 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0D0D', endColorstr='#FFF20000');
239 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0d0d), color-stop(100%, #f20000));
240 background-image: -webkit-linear-gradient(top, #ff0d0d, #f20000);
241 background-image: -moz-linear-gradient(top, #ff0d0d, #f20000);
242 background-image: -o-linear-gradient(top, #ff0d0d, #f20000);
243 background-image: linear-gradient(top, #ff0d0d, #f20000);
244 text-decoration: none;
246 /* line 44, sourcefiles/scss/mixins/_effects.scss */
247 .mw-ui-button.mw-ui-destructive:active, .mw-ui-button.mw-ui-destructive.mw-ui-active {
248 background-image: none;
249 background-color: #bd0000;
250 text-shadow: none;
252 /* line 54, sourcefiles/scss/mixins/_effects.scss */
253 .mw-ui-button.mw-ui-destructive:disabled, .mw-ui-button.mw-ui-destructive.mw-ui-disabled {
254 background-image: none;
255 background-color: #cc0000;
256 opacity: 0.5;
257 text-shadow: none;
260 /* line 14, sourcefiles/scss/components/default/_forms.scss */
261 .mw-ui-vform {
262 -webkit-box-sizing: border-box;
263 -moz-box-sizing: border-box;
264 box-sizing: border-box;
265 width: 290px;
267 /* line 19, sourcefiles/scss/components/default/_forms.scss */
268 .mw-ui-vform > div {
269 display: block;
270 margin: 0 0 15px 0;
271 padding: 0;
272 width: 100%;
274 /* line 28, sourcefiles/scss/components/default/_forms.scss */
275 .mw-ui-vform > div input,
276 .mw-ui-vform > div label,
277 .mw-ui-vform > div .mw-ui-button {
278 display: block;
279 -webkit-box-sizing: border-box;
280 -moz-box-sizing: border-box;
281 box-sizing: border-box;
282 margin: 0;
283 width: 100%;
285 /* line 35, sourcefiles/scss/components/default/_forms.scss */
286 .mw-ui-vform > div input {
287 outline: 0;
288 border-style: solid;
289 border-width: 1px;
290 border-color: #c9c9c9;
291 color: #252525;
292 padding: 0.35em 0 0.35em 0.5em;
294 /* line 12, sourcefiles/scss/mixins/_forms.scss */
295 .mw-ui-vform > div input:focus {
296 box-shadow: #4091ed 0px 0px 5px;
297 border-color: #4091ed;
299 /* line 39, sourcefiles/scss/components/default/_forms.scss */
300 .mw-ui-vform > div label {
301 font-size: 0.9em;
302 color: #7d7d7d;
303 width: auto;
304 margin: 0 0 0.2em 0;
305 padding: 0;
307 /* line 34, sourcefiles/scss/mixins/_forms.scss */
308 .mw-ui-vform > div label * {
309 font-weight: normal;
311 /* line 49, sourcefiles/scss/components/default/_forms.scss */
312 .mw-ui-vform > div input[type="checkbox"],
313 .mw-ui-vform > div input[type="radio"] {
314 display: inline;
315 -webkit-box-sizing: content-box;
316 -moz-box-sizing: content-box;
317 box-sizing: content-box;
318 width: auto;
321 /* line 65, sourcefiles/scss/components/default/_forms.scss */
322 .mw-ui-input {
323 outline: 0;
324 border-style: solid;
325 border-width: 1px;
326 border-color: #c9c9c9;
327 color: #252525;
328 padding: 0.35em 0 0.35em 0.5em;
330 /* line 12, sourcefiles/scss/mixins/_forms.scss */
331 .mw-ui-input:focus {
332 box-shadow: #4091ed 0px 0px 5px;
333 border-color: #4091ed;
336 /* line 72, sourcefiles/scss/components/default/_forms.scss */
337 .mw-ui-label {
338 font-size: 0.9em;
339 color: #7d7d7d;
341 /* line 34, sourcefiles/scss/mixins/_forms.scss */
342 .mw-ui-label * {
343 font-weight: normal;
346 /* line 81, sourcefiles/scss/components/default/_forms.scss */
347 .mw-ui-checkbox-label, .mw-ui-radio-label {
348 margin-bottom: 0.5em;
349 cursor: pointer;
350 vertical-align: bottom;
351 line-height: normal;
352 font-weight: normal;
354 /* line 50, sourcefiles/scss/mixins/_forms.scss */
355 .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"] {
356 width: auto;
357 height: auto;
358 margin: 0 0.1em 0em 0;
359 padding: 0;
360 border-style: solid;
361 border-width: 1px;
362 border-color: #c9c9c9;
363 cursor: pointer;
366 /* line 5, sourcefiles/scss/components/vector/_forms.scss */
367 .mw-ui-vform,
368 .mw-ui-vform > div input,
369 .mw-ui-input {
370 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
371 font-size: 1em;
372 line-height: 1.4em;
375 /* line 3, sourcefiles/scss/components/vector/_containers.scss */
376 .mw-ui-container {
377 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
378 font-size: 1em;
379 line-height: 1.4em;