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 */
101 font-size: @menu-personal-font-size;
104 /* Navigation Containers */
109 /* When right nav would overlap left nav, it's placed below it
110 (normal CSS floats behavior). This rule ensures that no empty space
111 is shown between them due to right nav's margin-top. Page layout
112 is still broken, but at least the nav overlaps only the page title
113 instead of half the content. */
114 margin-bottom: -2.5em;
115 /* IE 6 double-margin bug fix */
122 /* Navigation Labels */
124 div.vectorMenu h3 span {
127 /* Namespaces and Views */
134 .background-image('images/tab-break.png');
135 background-position: bottom left;
136 background-repeat: no-repeat;
145 list-style-type: none;
146 list-style-image: none;
151 div.vectorTabs ul li {
154 /* OVERRIDDEN BY COMPLIANT BROWSERS */
155 div.vectorTabs ul li {
156 line-height: 1.125em;
157 display: inline-block;
161 background-color: #f3f3f3;
162 .background-image('images/tab-normal-fade.png');
163 background-position: bottom left;
164 background-repeat: repeat-x;
168 div.vectorTabs ul > li {
171 div.vectorTabs li.selected {
172 .background-image('images/tab-current-fade.png');
174 /* OVERRIDDEN BY COMPLIANT BROWSERS */
175 div.vectorTabs li a {
176 display: inline-block;
179 padding-right: 0.5em;
180 color: @menu-link-color;
185 div.vectorTabs li > a {
188 div.vectorTabs li.icon a {
189 background-position: bottom right;
190 background-repeat: no-repeat;
192 /* OVERRIDDEN BY COMPLIANT BROWSERS */
193 div.vectorTabs span a {
194 display: inline-block;
199 div.vectorTabs span > a {
203 div.vectorTabs span {
204 display: inline-block;
205 .background-image('images/tab-break.png');
206 background-position: bottom right;
207 background-repeat: no-repeat;
209 div.vectorTabs li.selected a,
210 div.vectorTabs li.selected a:visited{
212 text-decoration: none;
214 div.vectorTabs li.new a,
215 div.vectorTabs li.new a:visited{
218 /* Variants and Actions */
223 /* SVG support using a transparent gradient to guarantee cross-browser
224 * compatibility (browsers able to understand gradient syntax support also SVG) */
225 .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
226 background-position: 100% 60%;
227 background-repeat: no-repeat;
230 div.vectorMenuFocus {
231 /* SVG support using a transparent gradient to guarantee cross-browser
232 * compatibility (browsers able to understand gradient syntax support also SVG) */
233 .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
234 background-position: 100% 60%;
237 body.rtl div.vectorMenu {
240 /* OVERRIDDEN BY COMPLIANT BROWSERS */
242 div#mw-head div.vectorMenu h3 {
244 .background-image('images/tab-break.png');
245 background-repeat: no-repeat;
247 /* This will be flipped - unlike the one above it */
248 div#mw-head div.vectorMenu h3 {
249 background-position: bottom left;
253 div#mw-head div.vectorMenu > h3 {
254 background-image: none;
256 div#mw-head div.vectorMenu h4,
257 div.vectorMenu#p-variants #mw-vector-current-variant {
258 display: inline-block;
262 padding-top: 1.375em;
266 /* OVERRIDDEN BY COMPLIANT BROWSERS */
268 div.vectorMenu h3 a {
269 display: inline-block;
272 text-decoration: none;
273 .background-image('images/tab-break.png');
274 background-repeat: no-repeat;
276 /* This will be flipped - unlike the one above it */
277 div.vectorMenu h3 a {
278 background-position: bottom right;
281 div.vectorMenu h3 > a {
284 div.vectorMenu div.menu {
290 /* OVERRIDDEN BY COMPLIANT BROWSERS */
292 body.rtl div.vectorMenu div.menu {
297 body.rtl div.vectorMenu > div.menu {
301 /* Also fixes old versions of FireFox */
303 body.rtl div.vectorMenu > div.menu,
307 /* Enable forcing showing of the menu for accessibility */
308 div.vectorMenu:hover div.menu,
309 div.vectorMenu div.menuForceShow {
314 background-color: white;
315 border: solid 1px silver;
317 list-style-type: none;
318 list-style-image: none;
324 /* Fixes old versions of FireFox */
329 /* Returns things back to normal in modern versions of FireFox */
341 /* OVERRIDDEN BY COMPLIANT BROWSERS */
342 div.vectorMenu li a {
343 display: inline-block;
346 color: @menu-link-color;
351 div.vectorMenu li > a {
354 div.vectorMenu li.selected a,
355 div.vectorMenu li.selected a:visited {
357 text-decoration: none;
382 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
383 border: solid 1px #aaa;
385 background-color: white;
386 .background-image('images/search-fade.png');
387 background-position: top left;
388 background-repeat: repeat-x;
390 div#simpleSearch input:focus {
393 div#simpleSearch input.placeholder {
396 div#simpleSearch input::-webkit-input-placeholder {
399 div#simpleSearch input:-moz-placeholder {
402 div#simpleSearch input:-ms-input-placeholder {
405 div#simpleSearch input#searchInput {
414 padding-bottom: 0.2em;
418 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
419 * this from ever being shown anyways.
423 background-color: transparent;
426 div#simpleSearch button#searchButton {
433 padding-bottom: 0.2em;
434 padding-right: 0.4em;
438 background-color: transparent;
439 background-image: none;
441 /* OVERRIDDEN BY COMPLIANT BROWSERS */
442 div#simpleSearch button#searchButton img {
449 div#simpleSearch button#searchButton > img {
454 font-size: @menu-main-font-size;
461 div#mw-panel div.portal {
462 padding-bottom: 1.5em;
465 div#mw-panel div.portal h3 {
468 padding: @menu-main-heading-padding;
471 font-size: @menu-main-heading-font-size;
473 div#mw-panel div.portal div.body {
475 margin: @menu-main-body-margin;
477 .background-image('images/portal-break.png');
478 background-repeat: no-repeat;
479 background-position: top left;
481 div#mw-panel div.portal div.body ul {
482 list-style-type: none;
483 list-style-image: none;
484 padding: @menu-main-body-padding;
487 div#mw-panel div.portal div.body ul li {
488 line-height: 1.125em;
490 padding-bottom: 0.5em;
492 font-size: @menu-main-body-font-size;
493 word-wrap: break-word;
495 div#mw-panel div.portal div.body ul li a {
496 color: @menu-main-body-link-color;
498 color: @menu-main-body-link-visited-color;
510 list-style-type: none;
511 list-style-image: none;
519 padding-bottom: 0.5em;
523 div#footer #footer-icons {
527 body.ltr div#footer #footer-places {
530 div#footer #footer-info li {
533 div#footer #footer-icons li {
539 div#footer #footer-places li {
556 background-repeat: no-repeat;
557 background-position: center center;
558 text-decoration: none;
563 * The following code is highly modified from monobook. It would be nice if the
564 * preftoc id was more human readable like preferences-toc for instance,
565 * howerver this would require backporting the other skins.
574 margin: 0 !important;
575 padding: 0 !important;
576 .background-image('images/preferences-break.png');
577 background-position: bottom left;
578 background-repeat: no-repeat;
588 list-style-type: none;
589 list-style-image: none;
590 .background-image('images/preferences-break.png');
591 background-position: bottom right;
592 background-repeat: no-repeat;
594 /* Sadly, IE6 won't understand this */
595 #preftoc li:first-child {
600 display: inline-block;
602 color: @menu-link-color;
604 text-decoration: none;
605 background-image: none;
610 text-decoration: underline;
612 #preftoc li.selected a {
613 .background-image('images/preferences-fade.png');
614 background-position: bottom;
615 background-repeat: repeat-x;
617 text-decoration: none;
625 border: solid 1px #ccc;
626 background-color: #fafafa;
628 #preferences fieldset {
630 border-top: solid 1px #ccc;
632 #preferences fieldset.prefsection {
637 #preferences legend {
640 #preferences fieldset.prefsection legend.mainLegend {
645 padding-right: 0.5em;
652 #preferences div.mw-prefs-buttons {
655 #preferences div.mw-prefs-buttons input {
656 margin-right: 0.25em;
660 list-style-type: disc;
661 .list-style-image('images/bullet-icon.png');
668 /* Site Notice (includes notices from CentralNotice extension) */
675 font-size: @content-heading-font-size;
678 /* Icon for Usernames */
682 background-position: left top;
683 background-repeat: no-repeat;
684 /* SVG support using a transparent gradient to guarantee cross-browser
685 * compatibility (browsers able to understand gradient syntax support also SVG) */
686 .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
687 padding-left: 15px !important;
695 vertical-align: text-bottom;
702 // FIXME: Seems overly specific. Not sure why this is needed.
705 font-size: @content-font-size;
709 /* mediawiki.notification */
710 .skin-vector .mw-notification-area {
713 .skin-vector .mw-notification-area-layout {
716 .skin-vector .mw-notification {
717 background-color: #fff;
718 background-color: rgba(255, 255, 255, 0.93);
719 padding: 0.75em 1.5em;
720 border: solid 1px #a7d7f9;
721 border-radius: 0.75em;
722 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
723 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
726 /* Watch/Unwatch Icon Styling */
734 /* This hides the text but shows the background image */
737 /* Only applied in IE6 */
738 margin-top: -0.8em !ie;
741 .background-image('images/watch-icons.png');
744 background-position: -43px 60%;
747 background-position: 5px 60%;
749 #ca-unwatch.icon a:hover,
750 #ca-unwatch.icon a:focus {
751 background-position: -67px 60%;
753 #ca-watch.icon a:hover,
754 #ca-watch.icon a:focus {
755 background-position: -19px 60%;
757 #ca-unwatch.icon a.loading,
758 #ca-watch.icon a.loading {
759 .background-image('images/watch-icon-loading.gif');
760 background-position: 5px 60%;
762 #ca-unwatch.icon a span,
763 #ca-watch.icon a span {
767 .background-image('images/tab-break.png');
768 background-position: right bottom;
769 background-repeat: no-repeat;
772 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
777 /* Animate between standard and high definition layouts */
778 body.vector-animateLayout {
782 .transition(margin-left 250ms, padding 250ms;);
786 .transition(left 250ms);
790 .transition(padding-right 250ms);
794 .transition(margin-right 250ms);
798 .transition(right 250ms);
802 .transition(margin-left 250ms);