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";
20 font-family: sans-serif;
24 background-color: #f6f6f6;
30 /* Border on top, left, and bottom side */
31 border: 1px solid #a7d7f9;
32 border-right-width: 0;
33 /* Merge the border with tabs' one (in their background image) */
35 background-color: white;
39 /* Hide, but keep accessible for screen-readers */
47 background-color: white;
48 .background-image('images/page-fade.png');
49 background-position: bottom left;
50 background-repeat: repeat-x;
67 /* Hide empty portlets */
76 /* Display on top of page tabs - bugs 37158, 48078 */
83 list-style-type: none;
84 list-style-image: none;
86 padding-left: 10em; /* Keep from overlapping logo */
100 /* Navigation Containers */
105 /* When right nav would overlap left nav, it's placed below it
106 (normal CSS floats behavior). This rule ensures that no empty space
107 is shown between them due to right nav's margin-top. Page layout
108 is still broken, but at least the nav overlaps only the page title
109 instead of half the content. */
110 margin-bottom: -2.5em;
111 /* IE 6 double-margin bug fix */
118 /* Navigation Labels */
120 div.vectorMenu h3 span {
123 /* Namespaces and Views */
130 .background-image('images/tab-break.png');
131 background-position: bottom left;
132 background-repeat: no-repeat;
141 list-style-type: none;
142 list-style-image: none;
147 div.vectorTabs ul li {
150 /* OVERRIDDEN BY COMPLIANT BROWSERS */
151 div.vectorTabs ul li {
152 line-height: 1.125em;
153 display: inline-block;
157 background-color: #f3f3f3;
158 .background-image('images/tab-normal-fade.png');
159 background-position: bottom left;
160 background-repeat: repeat-x;
164 div.vectorTabs ul > li {
167 div.vectorTabs li.selected {
168 .background-image('images/tab-current-fade.png');
170 /* OVERRIDDEN BY COMPLIANT BROWSERS */
171 div.vectorTabs li a {
172 display: inline-block;
175 padding-right: 0.5em;
181 div.vectorTabs li > a {
184 div.vectorTabs li.icon a {
185 background-position: bottom right;
186 background-repeat: no-repeat;
188 /* OVERRIDDEN BY COMPLIANT BROWSERS */
189 div.vectorTabs span a {
190 display: inline-block;
195 div.vectorTabs span > a {
199 div.vectorTabs span {
200 display: inline-block;
201 .background-image('images/tab-break.png');
202 background-position: bottom right;
203 background-repeat: no-repeat;
205 div.vectorTabs li.selected a,
206 div.vectorTabs li.selected a:visited{
208 text-decoration: none;
210 div.vectorTabs li.new a,
211 div.vectorTabs li.new a:visited{
214 /* Variants and Actions */
219 /* SVG support using a transparent gradient to guarantee cross-browser
220 * compatibility (browsers able to understand gradient syntax support also SVG) */
221 .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
222 background-position: 100% 60%;
223 background-repeat: no-repeat;
226 div.vectorMenuFocus {
227 /* SVG support using a transparent gradient to guarantee cross-browser
228 * compatibility (browsers able to understand gradient syntax support also SVG) */
229 .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
230 background-position: 100% 60%;
233 body.rtl div.vectorMenu {
236 /* OVERRIDDEN BY COMPLIANT BROWSERS */
238 div#mw-head div.vectorMenu h3 {
240 .background-image('images/tab-break.png');
241 background-repeat: no-repeat;
243 /* This will be flipped - unlike the one above it */
244 div#mw-head div.vectorMenu h3 {
245 background-position: bottom left;
249 div#mw-head div.vectorMenu > h3 {
250 background-image: none;
252 div#mw-head div.vectorMenu h4,
253 div.vectorMenu#p-variants #mw-vector-current-variant {
254 display: inline-block;
258 padding-top: 1.375em;
262 /* OVERRIDDEN BY COMPLIANT BROWSERS */
264 div.vectorMenu h3 a {
265 display: inline-block;
268 text-decoration: none;
269 .background-image('images/tab-break.png');
270 background-repeat: no-repeat;
272 /* This will be flipped - unlike the one above it */
273 div.vectorMenu h3 a {
274 background-position: bottom right;
277 div.vectorMenu h3 > a {
280 div.vectorMenu div.menu {
286 /* OVERRIDDEN BY COMPLIANT BROWSERS */
288 body.rtl div.vectorMenu div.menu {
293 body.rtl div.vectorMenu > div.menu {
297 /* Also fixes old versions of FireFox */
299 body.rtl div.vectorMenu > div.menu,
303 /* Enable forcing showing of the menu for accessibility */
304 div.vectorMenu:hover div.menu,
305 div.vectorMenu div.menuForceShow {
310 background-color: white;
311 border: solid 1px silver;
313 list-style-type: none;
314 list-style-image: none;
320 /* Fixes old versions of FireFox */
325 /* Returns things back to normal in modern versions of FireFox */
337 /* OVERRIDDEN BY COMPLIANT BROWSERS */
338 div.vectorMenu li a {
339 display: inline-block;
347 div.vectorMenu li > a {
350 div.vectorMenu li.selected a,
351 div.vectorMenu li.selected a:visited {
353 text-decoration: none;
378 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
379 border: solid 1px #aaa;
381 background-color: white;
382 .background-image('images/search-fade.png');
383 background-position: top left;
384 background-repeat: repeat-x;
386 div#simpleSearch input:focus {
389 div#simpleSearch input.placeholder {
392 div#simpleSearch input::-webkit-input-placeholder {
395 div#simpleSearch input:-moz-placeholder {
398 div#simpleSearch input:-ms-input-placeholder {
401 div#simpleSearch input#searchInput {
410 padding-bottom: 0.2em;
414 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
415 * this from ever being shown anyways.
419 background-color: transparent;
422 div#simpleSearch button#searchButton {
429 padding-bottom: 0.2em;
430 padding-right: 0.4em;
434 background-color: transparent;
435 background-image: none;
437 /* OVERRIDDEN BY COMPLIANT BROWSERS */
438 div#simpleSearch button#searchButton img {
445 div#simpleSearch button#searchButton > img {
456 div#mw-panel div.portal {
457 padding-bottom: 1.5em;
460 div#mw-panel div.portal h3 {
465 padding-left: 1.75em;
470 div#mw-panel div.portal div.body {
474 .background-image('images/portal-break.png');
475 background-repeat: no-repeat;
476 background-position: top left;
478 div#mw-panel div.portal div.body ul {
479 list-style-type: none;
480 list-style-image: none;
484 div#mw-panel div.portal div.body ul li {
485 line-height: 1.125em;
487 padding-bottom: 0.5em;
490 word-wrap: break-word;
492 div#mw-panel div.portal div.body ul li a {
495 div#mw-panel div.portal div.body ul li a:visited {
506 list-style-type: none;
507 list-style-image: none;
515 padding-bottom: 0.5em;
519 div#footer #footer-icons {
523 body.ltr div#footer #footer-places {
526 div#footer #footer-info li {
529 div#footer #footer-icons li {
535 div#footer #footer-places li {
552 background-repeat: no-repeat;
553 background-position: center center;
554 text-decoration: none;
559 * The following code is highly modified from monobook. It would be nice if the
560 * preftoc id was more human readable like preferences-toc for instance,
561 * howerver this would require backporting the other skins.
570 margin: 0 !important;
571 padding: 0 !important;
572 .background-image('images/preferences-break.png');
573 background-position: bottom left;
574 background-repeat: no-repeat;
584 list-style-type: none;
585 list-style-image: none;
586 .background-image('images/preferences-break.png');
587 background-position: bottom right;
588 background-repeat: no-repeat;
590 /* Sadly, IE6 won't understand this */
591 #preftoc li:first-child {
596 display: inline-block;
600 text-decoration: none;
601 background-image: none;
606 text-decoration: underline;
608 #preftoc li.selected a {
609 .background-image('images/preferences-fade.png');
610 background-position: bottom;
611 background-repeat: repeat-x;
613 text-decoration: none;
621 border: solid 1px #ccc;
622 background-color: #fafafa;
624 #preferences fieldset {
626 border-top: solid 1px #ccc;
628 #preferences fieldset.prefsection {
633 #preferences legend {
636 #preferences fieldset.prefsection legend.mainLegend {
641 padding-right: 0.5em;
648 #preferences div.mw-prefs-buttons {
651 #preferences div.mw-prefs-buttons input {
652 margin-right: 0.25em;
656 * The following code is slightly modified from monobook
666 list-style-type: disc;
667 .list-style-image('images/bullet-icon.png');
674 /* Site Notice (includes notices from CentralNotice extension) */
684 /* Icon for Usernames */
688 background-position: left top;
689 background-repeat: no-repeat;
690 /* SVG support using a transparent gradient to guarantee cross-browser
691 * compatibility (browsers able to understand gradient syntax support also SVG) */
692 .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
693 padding-left: 15px !important;
701 vertical-align: text-bottom;
712 /* mediawiki.notification */
713 .skin-vector .mw-notification-area {
716 .skin-vector .mw-notification-area-layout {
719 .skin-vector .mw-notification {
720 background-color: #fff;
721 background-color: rgba(255, 255, 255, 0.93);
722 padding: 0.75em 1.5em;
723 border: solid 1px #a7d7f9;
724 border-radius: 0.75em;
725 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
726 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
729 /* Watch/Unwatch Icon Styling */
737 /* This hides the text but shows the background image */
740 /* Only applied in IE6 */
741 margin-top: -0.8em !ie;
744 .background-image('images/watch-icons.png');
747 background-position: -43px 60%;
750 background-position: 5px 60%;
752 #ca-unwatch.icon a:hover,
753 #ca-unwatch.icon a:focus {
754 background-position: -67px 60%;
756 #ca-watch.icon a:hover,
757 #ca-watch.icon a:focus {
758 background-position: -19px 60%;
760 #ca-unwatch.icon a.loading,
761 #ca-watch.icon a.loading {
762 .background-image('images/watch-icon-loading.gif');
763 background-position: 5px 60%;
765 #ca-unwatch.icon a span,
766 #ca-watch.icon a span {
770 .background-image('images/tab-break.png');
771 background-position: right bottom;
772 background-repeat: no-repeat;
775 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
780 /* Animate between standard and high definition layouts */
781 body.vector-animateLayout {
785 .transition(margin-left 250ms, padding 250ms;);
789 .transition(left 250ms);
793 .transition(padding-right 250ms);
797 .transition(margin-right 250ms);
801 .transition(right 250ms);
805 .transition(margin-left 250ms);