2 * Any rules which should not be flipped automatically in right-to-left situations should be
3 * prepended with @noflip in a comment block.
5 * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
6 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
7 * a rule that makes things work in IE6, and then following it with a rule that begins with
8 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
9 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
10 * "IGNORED BY IE6" comments.
12 @import "mediawiki.mixins";
16 font-size: @html-font-size;
23 font-family: @content-font-family;
26 background-color: #f6f6f6;
27 font-size: @body-font-size;
31 line-height: @content-line-height;
33 padding: @content-padding;
34 /* Border on top, left, and bottom side */
35 border: 1px solid #a7d7f9;
36 border-right-width: 0;
37 /* Merge the border with tabs' one (in their background image) */
39 background-color: white;
40 color: @content-font-color;
43 /* Hide, but keep accessible for screen-readers */
51 background-color: white;
52 .background-image('images/page-fade.png');
53 background-position: bottom left;
54 background-repeat: repeat-x;
71 /* Hide empty portlets */
80 /* Display on top of page tabs - bugs 37158, 48078 */
87 list-style-type: none;
88 list-style-image: none;
90 padding-left: 10em; /* Keep from overlapping logo */
98 font-size: @menu-personal-font-size;
101 /* Navigation Containers */
106 /* When right nav would overlap left nav, it's placed below it
107 (normal CSS floats behavior). This rule ensures that no empty space
108 is shown between them due to right nav's margin-top. Page layout
109 is still broken, but at least the nav overlaps only the page title
110 instead of half the content. */
111 margin-bottom: -2.5em;
112 /* IE 6 double-margin bug fix */
119 /* Navigation Labels */
121 div.vectorMenu h3 span {
124 /* Namespaces and Views */
131 .background-image('images/tab-break.png');
132 background-position: bottom left;
133 background-repeat: no-repeat;
140 list-style-type: none;
141 list-style-image: none;
145 /* OVERRIDDEN BY COMPLIANT BROWSERS */
146 div.vectorTabs ul li {
149 line-height: 1.125em;
150 display: inline-block;
154 background-color: #f3f3f3;
155 .background-image('images/tab-normal-fade.png');
156 background-position: bottom left;
157 background-repeat: repeat-x;
161 div.vectorTabs ul > li {
164 div.vectorTabs li.selected {
165 .background-image('images/tab-current-fade.png');
167 /* OVERRIDDEN BY COMPLIANT BROWSERS */
168 div.vectorTabs li a {
169 display: inline-block;
172 padding-right: 0.5em;
173 color: @menu-link-color;
178 div.vectorTabs li > a {
181 div.vectorTabs li.icon a {
182 background-position: bottom right;
183 background-repeat: no-repeat;
185 /* OVERRIDDEN BY COMPLIANT BROWSERS */
186 div.vectorTabs span a {
187 display: inline-block;
191 div.vectorTabs span > a {
196 div.vectorTabs span {
197 display: inline-block;
198 .background-image('images/tab-break.png');
199 background-position: bottom right;
200 background-repeat: no-repeat;
202 div.vectorTabs li.selected a,
203 div.vectorTabs li.selected a:visited{
205 text-decoration: none;
207 div.vectorTabs li.new a,
208 div.vectorTabs li.new a:visited{
211 /* Variants and Actions */
217 /* SVG support using a transparent gradient to guarantee cross-browser
218 * compatibility (browsers able to understand gradient syntax support also SVG) */
219 .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
221 background-position: 100% 60%;
222 background-repeat: no-repeat;
225 div.vectorMenuFocus {
226 /* SVG support using a transparent gradient to guarantee cross-browser
227 * compatibility (browsers able to understand gradient syntax support also SVG) */
228 .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
229 background-position: 100% 60%;
231 body.rtl div.vectorMenu {
235 /* OVERRIDDEN BY COMPLIANT BROWSERS */
236 div#mw-head div.vectorMenu h3 {
239 .background-image('images/tab-break.png');
240 background-repeat: no-repeat;
241 background-position: bottom left;
245 div#mw-head div.vectorMenu > h3 {
246 background-image: none;
248 div#mw-head div.vectorMenu h4,
249 div.vectorMenu#p-variants #mw-vector-current-variant {
250 display: inline-block;
254 padding-top: 1.375em;
258 /* OVERRIDDEN BY COMPLIANT BROWSERS */
259 div.vectorMenu h3 a {
260 display: inline-block;
263 text-decoration: none;
264 .background-image('images/tab-break.png');
265 background-repeat: no-repeat;
266 background-position: bottom right;
269 div.vectorMenu h3 > a {
272 div.vectorMenu div.menu {
278 /* OVERRIDDEN BY COMPLIANT BROWSERS */
279 body.rtl div.vectorMenu div.menu {
284 body.rtl div.vectorMenu > div.menu {
289 /* Also fixes old versions of FireFox */
290 body.rtl div.vectorMenu > div.menu,
295 /* Enable forcing showing of the menu for accessibility */
296 div.vectorMenu:hover div.menu,
297 div.vectorMenu div.menuForceShow {
302 background-color: white;
303 border: solid 1px silver;
305 list-style-type: none;
306 list-style-image: none;
312 /* Fixes old versions of FireFox */
317 /* Returns things back to normal in modern versions of FireFox */
329 /* OVERRIDDEN BY COMPLIANT BROWSERS */
330 div.vectorMenu li a {
331 display: inline-block;
334 color: @menu-link-color;
339 div.vectorMenu li > a {
342 div.vectorMenu li.selected a,
343 div.vectorMenu li.selected a:visited {
345 text-decoration: none;
370 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
371 border: solid 1px #aaa;
373 background-color: white;
374 .background-image('images/search-fade.png');
375 background-position: top left;
376 background-repeat: repeat-x;
378 div#simpleSearch input:focus {
381 div#simpleSearch input {
384 div#simpleSearch input.placeholder {
387 div#simpleSearch input::-webkit-input-placeholder {
390 div#simpleSearch input:-moz-placeholder {
393 div#simpleSearch input:-ms-input-placeholder {
396 div#simpleSearch input#searchInput {
405 padding-bottom: 0.2em;
409 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
410 * this from ever being shown anyways.
413 background-color: transparent;
416 div#simpleSearch button#searchButton {
423 padding-bottom: 0.2em;
424 padding-right: 0.4em;
428 background-color: transparent;
429 background-image: none;
431 /* OVERRIDDEN BY COMPLIANT BROWSERS */
432 div#simpleSearch button#searchButton img {
439 div#simpleSearch button#searchButton > img {
444 font-size: @menu-main-font-size;
451 div#mw-panel div.portal {
452 padding-bottom: 1.5em;
455 div#mw-panel div.portal h3 {
458 padding: @menu-main-heading-padding;
461 font-size: @menu-main-heading-font-size;
463 div#mw-panel div.portal div.body {
465 margin: @menu-main-body-margin;
467 .background-image('images/portal-break.png');
468 background-repeat: no-repeat;
469 background-position: top left;
471 div#mw-panel div.portal div.body ul {
472 list-style-type: none;
473 list-style-image: none;
474 padding: @menu-main-body-padding;
477 div#mw-panel div.portal div.body ul li {
478 line-height: 1.125em;
480 padding-bottom: 0.5em;
482 font-size: @menu-main-body-font-size;
483 word-wrap: break-word;
485 div#mw-panel div.portal div.body ul li a {
486 color: @menu-main-body-link-color;
488 color: @menu-main-body-link-visited-color;
500 list-style-type: none;
501 list-style-image: none;
509 padding-bottom: 0.5em;
513 div#footer #footer-icons {
517 body.ltr div#footer #footer-places {
521 div#footer #footer-info li {
524 div#footer #footer-icons li {
530 div#footer #footer-places li {
547 background-repeat: no-repeat;
548 background-position: center center;
549 text-decoration: none;
553 list-style-type: disc;
554 .list-style-image('images/bullet-icon.png');
561 /* Site Notice (includes notices from CentralNotice extension) */
568 font-size: @content-heading-font-size;
571 /* Icon for Usernames */
575 background-position: left top;
576 background-repeat: no-repeat;
577 /* SVG support using a transparent gradient to guarantee cross-browser
578 * compatibility (browsers able to understand gradient syntax support also SVG) */
579 .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
580 padding-left: 15px !important;
588 vertical-align: text-bottom;
595 font-size: @content-font-size;
598 /* mediawiki.notification */
599 .skin-vector .mw-notification-area {
602 .skin-vector .mw-notification-area-layout {
605 .skin-vector .mw-notification {
606 background-color: #fff;
607 background-color: rgba(255, 255, 255, 0.93);
608 padding: 0.75em 1.5em;
609 border: solid 1px #a7d7f9;
610 border-radius: 0.75em;
611 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
612 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
615 /* Watch/Unwatch Icon Styling */
623 /* This hides the text but shows the background image */
626 /* Only applied in IE6 */
627 margin-top: -0.8em !ie;
630 .background-image('images/watch-icons.png');
633 background-position: -43px 60%;
636 background-position: 5px 60%;
638 #ca-unwatch.icon a:hover,
639 #ca-unwatch.icon a:focus {
640 background-position: -67px 60%;
642 #ca-watch.icon a:hover,
643 #ca-watch.icon a:focus {
644 background-position: -19px 60%;
646 #ca-unwatch.icon a.loading,
647 #ca-watch.icon a.loading {
648 .background-image('images/watch-icon-loading.gif');
649 background-position: 5px 60%;
651 #ca-unwatch.icon a span,
652 #ca-watch.icon a span {
656 .background-image('images/tab-break.png');
657 background-position: right bottom;
658 background-repeat: no-repeat;
661 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
666 /* Animate between standard and high definition layouts */
667 body.vector-animateLayout {
671 .transition(margin-left 250ms, padding 250ms;);
675 .transition(left 250ms);
679 .transition(padding-right 250ms);
683 .transition(margin-right 250ms);
687 .transition(right 250ms);
691 .transition(margin-left 250ms);