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: @body-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.placeholder {
384 div#simpleSearch input::-webkit-input-placeholder {
387 div#simpleSearch input:-moz-placeholder {
390 div#simpleSearch input:-ms-input-placeholder {
393 div#simpleSearch input#searchInput {
402 padding-bottom: 0.2em;
406 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
407 * this from ever being shown anyways.
411 background-color: transparent;
414 div#simpleSearch button#searchButton {
421 padding-bottom: 0.2em;
422 padding-right: 0.4em;
426 background-color: transparent;
427 background-image: none;
429 /* OVERRIDDEN BY COMPLIANT BROWSERS */
430 div#simpleSearch button#searchButton img {
437 div#simpleSearch button#searchButton > img {
442 font-size: @menu-main-font-size;
449 div#mw-panel div.portal {
450 padding-bottom: 1.5em;
453 div#mw-panel div.portal h3 {
456 padding: @menu-main-heading-padding;
459 font-size: @menu-main-heading-font-size;
461 div#mw-panel div.portal div.body {
463 margin: @menu-main-body-margin;
465 .background-image('images/portal-break.png');
466 background-repeat: no-repeat;
467 background-position: top left;
469 div#mw-panel div.portal div.body ul {
470 list-style-type: none;
471 list-style-image: none;
472 padding: @menu-main-body-padding;
475 div#mw-panel div.portal div.body ul li {
476 line-height: 1.125em;
478 padding-bottom: 0.5em;
480 font-size: @menu-main-body-font-size;
481 word-wrap: break-word;
483 div#mw-panel div.portal div.body ul li a {
484 color: @menu-main-body-link-color;
486 color: @menu-main-body-link-visited-color;
498 list-style-type: none;
499 list-style-image: none;
507 padding-bottom: 0.5em;
511 div#footer #footer-icons {
515 body.ltr div#footer #footer-places {
519 div#footer #footer-info li {
522 div#footer #footer-icons li {
528 div#footer #footer-places li {
545 background-repeat: no-repeat;
546 background-position: center center;
547 text-decoration: none;
552 * The following code is highly modified from monobook. It would be nice if the
553 * preftoc id was more human readable like preferences-toc for instance,
554 * howerver this would require backporting the other skins.
563 margin: 0 !important;
564 padding: 0 !important;
565 .background-image('images/preferences-break.png');
566 background-position: bottom left;
567 background-repeat: no-repeat;
577 list-style-type: none;
578 list-style-image: none;
579 .background-image('images/preferences-break.png');
580 background-position: bottom right;
581 background-repeat: no-repeat;
583 /* Sadly, IE6 won't understand this */
584 #preftoc li:first-child {
589 display: inline-block;
591 color: @menu-link-color;
593 text-decoration: none;
594 background-image: none;
599 text-decoration: underline;
601 #preftoc li.selected a {
602 .background-image('images/preferences-fade.png');
603 background-position: bottom;
604 background-repeat: repeat-x;
606 text-decoration: none;
614 border: solid 1px #ccc;
615 background-color: #fafafa;
617 #preferences fieldset {
619 border-top: solid 1px #ccc;
621 #preferences fieldset.prefsection {
626 #preferences legend {
629 #preferences fieldset.prefsection legend.mainLegend {
634 padding-right: 0.5em;
641 #preferences div.mw-prefs-buttons {
644 #preferences div.mw-prefs-buttons input {
645 margin-right: 0.25em;
649 list-style-type: disc;
650 .list-style-image('images/bullet-icon.png');
657 /* Site Notice (includes notices from CentralNotice extension) */
664 font-size: @content-heading-font-size;
667 /* Icon for Usernames */
671 background-position: left top;
672 background-repeat: no-repeat;
673 /* SVG support using a transparent gradient to guarantee cross-browser
674 * compatibility (browsers able to understand gradient syntax support also SVG) */
675 .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
676 padding-left: 15px !important;
684 vertical-align: text-bottom;
691 font-size: @content-font-size;
694 /* mediawiki.notification */
695 .skin-vector .mw-notification-area {
698 .skin-vector .mw-notification-area-layout {
701 .skin-vector .mw-notification {
702 background-color: #fff;
703 background-color: rgba(255, 255, 255, 0.93);
704 padding: 0.75em 1.5em;
705 border: solid 1px #a7d7f9;
706 border-radius: 0.75em;
707 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
708 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
711 /* Watch/Unwatch Icon Styling */
719 /* This hides the text but shows the background image */
722 /* Only applied in IE6 */
723 margin-top: -0.8em !ie;
726 .background-image('images/watch-icons.png');
729 background-position: -43px 60%;
732 background-position: 5px 60%;
734 #ca-unwatch.icon a:hover,
735 #ca-unwatch.icon a:focus {
736 background-position: -67px 60%;
738 #ca-watch.icon a:hover,
739 #ca-watch.icon a:focus {
740 background-position: -19px 60%;
742 #ca-unwatch.icon a.loading,
743 #ca-watch.icon a.loading {
744 .background-image('images/watch-icon-loading.gif');
745 background-position: 5px 60%;
747 #ca-unwatch.icon a span,
748 #ca-watch.icon a span {
752 .background-image('images/tab-break.png');
753 background-position: right bottom;
754 background-repeat: no-repeat;
757 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
762 /* Animate between standard and high definition layouts */
763 body.vector-animateLayout {
767 .transition(margin-left 250ms, padding 250ms;);
771 .transition(left 250ms);
775 .transition(padding-right 250ms);
779 .transition(margin-right 250ms);
783 .transition(right 250ms);
787 .transition(margin-left 250ms);