2 * Any rules which should not be flipped automatically in right-to-left situations should be
3 * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
4 * should be prepended with @embed in a comment block.
6 * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
7 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
8 * a rule that makes things work in IE6, and then following it with a rule that begins with
9 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
10 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
11 * "IGNORED BY IE6" comments.
13 @import "mediawiki.mixins.less";
21 font-family: sans-serif;
25 background-color: #f6f6f6;
31 /* Border on top, left, and bottom side */
32 border: 1px solid #a7d7f9;
33 border-right-width: 0;
34 /* Merge the border with tabs' one (in their background image) */
36 background-color: white;
40 /* Hide, but keep accessible for screen-readers */
48 background-color: white;
49 .background-image('images/page-fade.png');
50 background-position: bottom left;
51 background-repeat: repeat-x;
68 /* Hide empty portlets */
77 /* Display on top of page tabs - bugs 37158, 48078 */
84 list-style-type: none;
85 list-style-image: none;
87 padding-left: 10em; /* Keep from overlapping logo */
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;
142 list-style-type: none;
143 list-style-image: none;
148 div.vectorTabs ul li {
151 /* OVERRIDDEN BY COMPLIANT BROWSERS */
152 div.vectorTabs ul li {
153 line-height: 1.125em;
154 display: inline-block;
158 background-color: #f3f3f3;
159 .background-image('images/tab-normal-fade.png');
160 background-position: bottom left;
161 background-repeat: repeat-x;
165 div.vectorTabs ul > li {
168 div.vectorTabs li.selected {
169 .background-image('images/tab-current-fade.png');
171 /* OVERRIDDEN BY COMPLIANT BROWSERS */
172 div.vectorTabs li a {
173 display: inline-block;
176 padding-right: 0.5em;
182 div.vectorTabs li > a {
185 div.vectorTabs li.icon a {
186 background-position: bottom right;
187 background-repeat: no-repeat;
189 /* OVERRIDDEN BY COMPLIANT BROWSERS */
190 div.vectorTabs span a {
191 display: inline-block;
196 div.vectorTabs span > a {
200 div.vectorTabs span {
201 display: inline-block;
202 .background-image('images/tab-break.png');
203 background-position: bottom right;
204 background-repeat: no-repeat;
206 div.vectorTabs li.selected a,
207 div.vectorTabs li.selected a:visited{
209 text-decoration: none;
211 div.vectorTabs li.new a,
212 div.vectorTabs li.new a:visited{
215 /* Variants and Actions */
220 /* SVG support using a transparent gradient to guarantee cross-browser
221 * compatibility (browsers able to understand gradient syntax support also SVG) */
222 .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
223 background-position: 100% 60%;
224 background-repeat: no-repeat;
227 div.vectorMenuFocus {
228 /* SVG support using a transparent gradient to guarantee cross-browser
229 * compatibility (browsers able to understand gradient syntax support also SVG) */
230 .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
231 background-position: 100% 60%;
234 body.rtl div.vectorMenu {
237 /* OVERRIDDEN BY COMPLIANT BROWSERS */
239 div#mw-head div.vectorMenu h3 {
241 .background-image('images/tab-break.png');
242 background-repeat: no-repeat;
244 /* This will be flipped - unlike the one above it */
245 div#mw-head div.vectorMenu h3 {
246 background-position: bottom left;
250 div#mw-head div.vectorMenu > h3 {
251 background-image: none;
253 div#mw-head div.vectorMenu h4,
254 div.vectorMenu#p-variants #mw-vector-current-variant {
255 display: inline-block;
259 padding-top: 1.375em;
263 /* OVERRIDDEN BY COMPLIANT BROWSERS */
265 div.vectorMenu h3 a {
266 display: inline-block;
269 text-decoration: none;
270 .background-image('images/tab-break.png');
271 background-repeat: no-repeat;
273 /* This will be flipped - unlike the one above it */
274 div.vectorMenu h3 a {
275 background-position: bottom right;
278 div.vectorMenu h3 > a {
281 div.vectorMenu div.menu {
287 /* OVERRIDDEN BY COMPLIANT BROWSERS */
289 body.rtl div.vectorMenu div.menu {
294 body.rtl div.vectorMenu > div.menu {
298 /* Also fixes old versions of FireFox */
300 body.rtl div.vectorMenu > div.menu,
304 /* Enable forcing showing of the menu for accessibility */
305 div.vectorMenu:hover div.menu,
306 div.vectorMenu div.menuForceShow {
311 background-color: white;
312 border: solid 1px silver;
314 list-style-type: none;
315 list-style-image: none;
321 /* Fixes old versions of FireFox */
326 /* Returns things back to normal in modern versions of FireFox */
338 /* OVERRIDDEN BY COMPLIANT BROWSERS */
339 div.vectorMenu li a {
340 display: inline-block;
348 div.vectorMenu li > a {
351 div.vectorMenu li.selected a,
352 div.vectorMenu li.selected a:visited {
354 text-decoration: none;
379 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
380 border: solid 1px #aaa;
382 background-color: white;
383 .background-image('images/search-fade.png');
384 background-position: top left;
385 background-repeat: repeat-x;
387 div#simpleSearch input:focus {
390 div#simpleSearch input.placeholder {
393 div#simpleSearch input::-webkit-input-placeholder {
396 div#simpleSearch input:-moz-placeholder {
399 div#simpleSearch input:-ms-input-placeholder {
402 div#simpleSearch input#searchInput {
411 padding-bottom: 0.2em;
415 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
416 * this from ever being shown anyways.
420 background-color: transparent;
423 div#simpleSearch button#searchButton {
430 padding-bottom: 0.2em;
431 padding-right: 0.4em;
435 background-color: transparent;
436 background-image: none;
438 /* OVERRIDDEN BY COMPLIANT BROWSERS */
439 div#simpleSearch button#searchButton img {
446 div#simpleSearch button#searchButton > img {
457 div#mw-panel div.portal {
458 padding-bottom: 1.5em;
461 div#mw-panel div.portal h3 {
466 padding-left: 1.75em;
471 div#mw-panel div.portal div.body {
475 .background-image('images/portal-break.png');
476 background-repeat: no-repeat;
477 background-position: top left;
479 div#mw-panel div.portal div.body ul {
480 list-style-type: none;
481 list-style-image: none;
485 div#mw-panel div.portal div.body ul li {
486 line-height: 1.125em;
488 padding-bottom: 0.5em;
491 word-wrap: break-word;
493 div#mw-panel div.portal div.body ul li a {
496 div#mw-panel div.portal div.body ul li a:visited {
507 list-style-type: none;
508 list-style-image: none;
516 padding-bottom: 0.5em;
520 div#footer #footer-icons {
524 body.ltr div#footer #footer-places {
527 div#footer #footer-info li {
530 div#footer #footer-icons li {
536 div#footer #footer-places li {
553 background-repeat: no-repeat;
554 background-position: center center;
555 text-decoration: none;
560 * The following code is highly modified from monobook. It would be nice if the
561 * preftoc id was more human readable like preferences-toc for instance,
562 * howerver this would require backporting the other skins.
571 margin: 0 !important;
572 padding: 0 !important;
573 .background-image('images/preferences-break.png');
574 background-position: bottom left;
575 background-repeat: no-repeat;
585 list-style-type: none;
586 list-style-image: none;
587 .background-image('images/preferences-break.png');
588 background-position: bottom right;
589 background-repeat: no-repeat;
591 /* Sadly, IE6 won't understand this */
592 #preftoc li:first-child {
597 display: inline-block;
601 text-decoration: none;
602 background-image: none;
607 text-decoration: underline;
609 #preftoc li.selected a {
610 .background-image('images/preferences-fade.png');
611 background-position: bottom;
612 background-repeat: repeat-x;
614 text-decoration: none;
622 border: solid 1px #ccc;
623 background-color: #fafafa;
625 #preferences fieldset {
627 border-top: solid 1px #ccc;
629 #preferences fieldset.prefsection {
634 #preferences legend {
637 #preferences fieldset.prefsection legend.mainLegend {
642 padding-right: 0.5em;
649 #preferences div.mw-prefs-buttons {
652 #preferences div.mw-prefs-buttons input {
653 margin-right: 0.25em;
657 * The following code is slightly modified from monobook
667 list-style-type: disc;
668 .list-style-image('images/bullet-icon.png');
675 /* Site Notice (includes notices from CentralNotice extension) */
685 /* Icon for Usernames */
689 background-position: left top;
690 background-repeat: no-repeat;
691 /* SVG support using a transparent gradient to guarantee cross-browser
692 * compatibility (browsers able to understand gradient syntax support also SVG) */
693 .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
694 padding-left: 15px !important;
702 vertical-align: text-bottom;
713 /* mediawiki.notification */
714 .skin-vector .mw-notification-area {
717 .skin-vector .mw-notification-area-layout {
720 .skin-vector .mw-notification {
721 background-color: #fff;
722 background-color: rgba(255, 255, 255, 0.93);
723 padding: 0.75em 1.5em;
724 border: solid 1px #a7d7f9;
725 border-radius: 0.75em;
726 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
727 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
730 /* Watch/Unwatch Icon Styling */
738 /* This hides the text but shows the background image */
741 /* Only applied in IE6 */
742 margin-top: -0.8em !ie;
745 .background-image('images/watch-icons.png');
748 background-position: -43px 60%;
751 background-position: 5px 60%;
753 #ca-unwatch.icon a:hover,
754 #ca-unwatch.icon a:focus {
755 background-position: -67px 60%;
757 #ca-watch.icon a:hover,
758 #ca-watch.icon a:focus {
759 background-position: -19px 60%;
761 #ca-unwatch.icon a.loading,
762 #ca-watch.icon a.loading {
763 .background-image('images/watch-icon-loading.gif');
764 background-position: 5px 60%;
766 #ca-unwatch.icon a span,
767 #ca-watch.icon a span {
771 .background-image('images/tab-break.png');
772 background-position: right bottom;
773 background-repeat: no-repeat;
776 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
781 /* Animate between standard and high definition layouts */
782 body.vector-animateLayout {
786 .transition( margin-left 250ms, padding 250ms );
789 .transition( 'left 250ms' );
792 .transition( padding-right 250ms );
795 .transition( margin-right 250ms );
798 .transition( right 250ms );
801 .transition( margin-left 250ms );