Merge "Add ss_active_users in SiteStats::isSane"
[mediawiki.git] / skins / monobook / main.css
blob90a41d38b19d3fead9db2b8f764bb4a0e1b236d1
1 /*
2 ** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
3 ** Copyright Gabriel Wicke - http://wikidev.net/
4 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
5 **
6 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
7 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
8 ** Michael Zeltner and Geir Bækholt)
9 ** All you guys rock :)
12 div#column-content {
13 width: 100%;
14 float: right;
15 margin: 0 0 .6em -12.2em;
16 padding: 0;
18 div#content {
19 margin: 2.8em 0 0 12.2em;
20 padding: 1em;
21 position: relative;
22 z-index: 2;
24 div#column-one {
25 padding-top: 160px;
27 /* Hide, but keep accessible for screen-readers */
28 #column-one h2 {
29 position: absolute;
30 top: -9999px;
32 div#content {
33 background: white;
34 color: black;
35 border: 1px solid #aaa;
36 border-right: none;
37 line-height: 1.5em;
39 /* the left column width is specified in class .portlet */
41 /* Font size:
42 ** We take advantage of keyword scaling- browsers won't go below 9px
43 ** More at http://www.w3.org/2003/07/30-font-size
44 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
47 body {
48 font: x-small sans-serif;
49 /* @embed */
50 background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
51 color: black;
52 margin: 0;
53 padding: 0;
54 direction: ltr; /* Needed for RTL flipping */
55 unicode-bidi: embed;
58 /* scale back up to a sane default */
59 div#globalWrapper {
60 font-size: 127%;
61 width: 100%;
62 margin: 0;
63 padding: 0;
66 /* general styles */
67 a {
68 color: #002bb8;
70 a:visited {
71 color: #5a3696;
73 a.new,
74 #p-personal a.new {
75 color: #cc2200;
78 ul {
79 list-style-type: square;
80 /* @embed */
81 list-style-image: url(bullet.gif);
84 input.historysubmit {
85 padding: 0 .3em .3em .3em !important;
86 font-size: 94%;
87 cursor: pointer;
88 height: 1.7em !important;
89 margin-left: 1.6em;
92 pre, .mw-code {
93 line-height: 1.1em;
96 #firstHeading {
97 padding-top: 0;
100 ** the main content area
103 #siteNotice {
104 font-size: 95%;
105 padding: 0 0.9em;
107 #localNotice {
108 margin: 0;
110 #siteNotice p {
111 margin: 0;
112 padding: 0;
116 ** classes for special content elements like town boxes
117 ** intended to be referenced directly from the wiki src
121 ** User styles
123 /* table standards */
124 table.rimage {
125 float: right;
126 position: relative;
127 margin-left: 1em;
128 margin-bottom: 1em;
129 text-align: center;
133 ** edit views etc
135 .special li {
136 line-height: 1.4em;
137 margin: 0;
138 padding: 0;
142 ** keep the whitespace in front of the ^=, hides rule from konqueror
143 ** this is css3, the validator doesn't like it when validating as css2
145 #bodyContent a.external,
146 #bodyContent a.external[href ^="gopher://"] {
147 /* @embed */
148 background: url(external-ltr.png) center right no-repeat;
149 padding-right: 13px;
151 #bodyContent a.external[href ^="https://"],
152 .link-https {
153 /* @embed */
154 background: url(lock_icon.gif) center right no-repeat;
155 padding-right: 16px;
157 #bodyContent a.external[href ^="mailto:"],
158 .link-mailto {
159 /* @embed */
160 background: url(mail_icon.gif) center right no-repeat;
161 padding-right: 18px;
163 #bodyContent a.external[href ^="news:"] {
164 /* @embed */
165 background: url(news_icon.png) center right no-repeat;
166 padding-right: 18px;
168 #bodyContent a.external[href ^="ftp://"],
169 .link-ftp {
170 /* @embed */
171 background: url(file_icon.gif) center right no-repeat;
172 padding-right: 18px;
174 #bodyContent a.external[href ^="irc://"],
175 #bodyContent a.external[href ^="ircs://"],
176 .link-irc {
177 /* @embed */
178 background: url(discussionitem_icon.gif) center right no-repeat;
179 padding-right: 18px;
181 #bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
182 #bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
183 #bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
184 #bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
185 #bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
186 #bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
187 .link-audio {
188 /* @embed */
189 background: url(audio.png) center right no-repeat;
190 padding-right: 13px;
192 #bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
193 #bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
194 #bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
195 #bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
196 .link-video {
197 /* @embed */
198 background: url(video.png) center right no-repeat;
199 padding-right: 13px;
201 #bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
202 #bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
203 #bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
204 .link-document {
205 /* @embed */
206 background: url(document.png) center right no-repeat;
207 padding-right: 12px;
210 /* Interwiki Styling */
211 #bodyContent a.extiw,
212 #bodyContent a.extiw:active {
213 color: #36b;
216 /* External links */
217 #bodyContent a.external {
218 color: #36b;
222 ** Structural Elements
226 ** general portlet styles (elements in the quickbar)
228 .portlet {
229 border: none;
230 margin: 0 0 .5em;
231 padding: 0;
232 float: none;
233 width: 11.6em;
234 overflow: hidden;
236 .portlet h3 {
237 background: transparent;
238 padding: 0 1em 0 .5em;
239 display: inline;
240 height: 1em;
241 text-transform: lowercase;
242 font-size: 91%;
243 font-weight: normal;
244 white-space: nowrap;
246 .pBody {
247 font-size: 95%;
248 background-color: white;
249 color: black;
250 border-collapse: collapse;
251 border: 1px solid #aaa;
252 padding: 0 .8em .3em .5em;
254 .portlet ul {
255 line-height: 1.5em;
256 font-size: 95%;
258 .portlet li {
259 padding: 0;
260 margin: 0;
264 ** Logo properties
267 #p-logo {
268 top: 0;
269 left: 0;
270 position: absolute; /*needed to use z-index */
271 z-index: 3;
272 height: 155px;
273 width: 12em;
274 overflow: visible;
276 #p-logo h3 {
277 display: none;
279 #p-logo a,
280 #p-logo a:hover {
281 display: block;
282 height: 155px;
283 width: 12.2em;
284 background-repeat: no-repeat;
285 background-position: 35% 50% !important;
286 text-decoration: none;
290 ** Search portlet
292 #p-search {
293 position: relative;
294 z-index: 3;
296 input.searchButton {
297 margin-top: 1px;
298 font-size: 95%;
300 #searchGoButton {
301 padding-left: .5em;
302 padding-right: .5em;
303 font-weight: bold;
305 #searchInput {
306 width: 10.9em;
307 margin: 0;
308 font-size: 95%;
310 #p-search .pBody {
311 padding: .5em .4em .4em .4em;
312 text-align: center;
314 #p-search #searchform div div {
315 margin-top: .4em;
316 font-size: 95%;
319 ** the personal toolbar
321 #p-personal {
322 position: absolute;
323 left: 0;
324 top: 0;
325 z-index: 3;
327 #p-personal {
328 width: 100%;
329 white-space: nowrap;
330 padding: 0;
331 margin: 0;
332 border: none;
333 background: none;
334 overflow: visible;
335 line-height: 1.2em;
337 #p-personal h3 {
338 display: none;
340 #p-personal .portlet,
341 #p-personal .pBody {
342 z-index: 0;
343 padding: 0;
344 margin: 0;
345 border: none;
346 overflow: visible;
347 background: none;
349 /* this is the ul contained in the portlet */
350 #p-personal ul {
351 border: none;
352 line-height: 1.4em;
353 color: #2f6fab;
354 padding: 0 2em 0 3em;
355 margin: 0;
356 text-align: right;
357 list-style-type: none;
358 list-style-image: none;
359 z-index: 0;
360 background: none;
361 cursor: default;
363 #p-personal li {
364 z-index: 0;
365 border: none;
366 padding: 0;
367 display: inline;
368 color: #2f6fab;
369 margin-left: 1em;
370 line-height: 1.2em;
371 background: none;
373 #p-personal li a {
374 text-decoration: none;
375 color: #005896;
376 padding-bottom: .2em;
377 background: none;
379 #p-personal li a:hover {
380 background-color: white;
381 padding-bottom: .2em;
382 text-decoration: none;
384 #p-personal li.active a:hover {
385 background-color: transparent;
387 /* The icon in front of the username / login link */
388 li#pt-userpage,
389 li#pt-anonuserpage,
390 li#pt-login {
391 /* @embed */
392 background: url(user.gif) top left no-repeat;
393 padding-left: 20px;
395 #p-personal ul {
396 text-transform: lowercase;
398 /* Don't lowercase username or IP addresses (IPv6) */
399 li#pt-userpage,
400 li#pt-anonuserpage {
401 text-transform: none;
403 #p-personal li.active {
404 font-weight: bold;
407 ** the page-related actions- page/talk, edit etc
409 #p-cactions {
410 position: absolute;
411 top: 1.3em;
412 left: 11.5em;
413 margin: 0;
414 white-space: nowrap;
415 width: 76%;
416 line-height: 1.1em;
417 overflow: visible;
418 background: none;
419 border-collapse: collapse;
420 padding-left: 1em;
421 font-size: 95%;
423 #p-cactions ul {
424 list-style-type: none;
425 list-style-image: none;
427 #p-cactions li {
428 display: inline;
429 border: 1px solid #aaa;
430 border-bottom: none;
431 padding: 0 0 1em 0;
432 margin: 0 .3em 0 0;
433 overflow: visible;
434 background: white;
436 #p-cactions li.selected {
437 border-color: #fabd23;
438 font-weight: bold;
440 #p-cactions li a {
441 background-color: #fbfbfb;
442 color: #002bb8;
443 border: none;
444 padding: 0 .8em .3em;
445 position: relative;
446 z-index: 0;
447 margin: 0;
448 text-decoration: none;
450 #p-cactions li.selected a {
451 z-index: 3;
452 background-color: white;
454 #p-cactions .new a {
455 color: #ba0000;
457 #p-cactions li a:hover {
458 z-index: 3;
459 text-decoration: none;
460 background-color: white;
462 #p-cactions h3 {
463 display: none;
465 #p-cactions li.istalk {
466 margin-right: 0;
468 #p-cactions li.istalk a {
469 padding-right: .5em;
471 #p-cactions #ca-addsection a {
472 padding-left: .4em;
473 padding-right: .4em;
475 /* offsets to distinguish the tab groups */
476 li#ca-talk {
477 margin-right: 1.6em;
479 li#ca-watch,
480 li#ca-unwatch,
481 li#ca-varlang-0,
482 li#ca-print {
483 margin-left: 1.6em;
485 #p-cactions .pBody {
486 font-size: 1em;
487 background-color: transparent;
488 color: inherit;
489 border-collapse: inherit;
490 border: 0;
491 padding: 0;
493 #p-cactions li a {
494 text-transform: lowercase;
497 #p-lang {
498 position: relative;
499 z-index: 3;
502 /* Override text-transform on languages where capitalization is significant */
503 .capitalize-all-nouns .portlet h3,
504 .capitalize-all-nouns #p-personal ul,
505 .capitalize-all-nouns #p-cactions ul li a {
506 text-transform: none;
509 /* TODO: #t-iscite is only used by the Cite extension, come up with some
510 * system which allows extensions to add to this file on the fly
512 #t-ispermalink, #t-iscite {
513 color: #999;
516 ** footer
518 div#footer {
519 background-color: white;
520 border-top: 1px solid #fabd23;
521 border-bottom: 1px solid #fabd23;
522 margin: .6em 0 1em 0;
523 overflow: hidden;
524 padding: .4em 0 .3em 0;
525 text-align: center;
526 font-size: 90%;
528 div#footer li {
529 display: inline;
530 margin: 0 1.3em;
532 #f-poweredbyico, #f-copyrightico {
533 margin: 0 8px;
534 position: relative;
535 top: -2px; /* Bump it up just a tad */
537 #f-poweredbyico {
538 float: right;
539 height: 1%;
541 #f-copyrightico {
542 float: left;
543 height: 1%;
546 .mw-htmlform-submit {
547 font-weight: bold;
548 padding-left: .3em;
549 padding-right: .3em;
550 margin-right: 2em;
553 /* js pref toc */
554 #preftoc {
555 margin: 0;
556 padding: 0;
557 width: 100%;
558 clear: both;
560 #preftoc li {
561 background-color: #f0f0f0;
562 color: #000;
564 #preftoc li {
565 margin: 1px -2px 1px 2px;
566 float: left;
567 padding: 2px 0 3px 0;
568 border: 1px solid #fff;
569 border-right-color: #716f64;
570 border-bottom: 0;
571 position: relative;
572 white-space: nowrap;
573 list-style-type: none;
574 list-style-image: none;
575 z-index: 3;
577 #preftoc li.selected {
578 font-weight: bold;
579 background-color: #f9f9f9;
580 border: 1px solid #aaa;
581 border-bottom: none;
582 cursor: default;
583 top: 1px;
584 padding-top: 2px;
585 margin-right: -3px;
587 #preftoc > li.selected {
588 top: 2px;
590 #preftoc a,
591 #preftoc a:active {
592 display: block;
593 color: #000;
594 padding: 0 .7em;
595 position: relative;
596 text-decoration: none;
598 #preftoc li.selected a {
599 cursor: default;
600 text-decoration: none;
602 #preferences {
603 margin: 0;
604 border: 1px solid #aaa;
605 clear: both;
606 padding: 1.5em;
607 background-color: #F9F9F9;
609 .prefsection {
610 border: none;
611 padding: 0;
612 margin: 0;
615 .prefsection legend {
616 font-weight: bold;
618 .prefsection table, .prefsection legend {
619 background-color: #F9F9F9;
621 .mainLegend {
622 display: none;
624 td.htmlform-tip {
625 font-size: x-small;
626 padding: .2em 2em;
627 color: #666;
630 .preferences-login {
631 clear: both;
632 margin-bottom: 1.5em;
635 .prefcache {
636 font-size: 90%;
637 margin-top: 2em;
640 div#userloginForm,
641 div#userlogin {
642 margin: 0 3em 1em 0;
643 border: 1px solid #aaa;
644 clear: both;
645 padding: 1.5em 2em;
646 background-color: #f9f9f9;
647 float: left;
650 div#userloginForm table,
651 div#userlogin table {
652 background-color: #f9f9f9;
655 div#userloginForm h2,
656 div#userlogin h2 {
657 padding-top: 0;
660 div#userlogin .captcha,
661 div#userloginForm .captcha {
662 border: 1px solid #bbb;
663 padding: 1.5em 2em;
664 background-color: white;
667 #loginend, #signupend {
668 clear: both;
671 #userloginprompt, #languagelinks {
672 font-size: 85%;
675 #login-sectiontip {
676 font-size: 85%;
677 line-height: 1.2;
678 padding-top: 2em;
681 #userlogin .loginText, #userlogin .loginPassword {
682 width: 12em;
685 #userloginlink a, #wpLoginattempt, #wpCreateaccount {
686 font-weight: bold;
690 ** IE/Mac fixes, hope to find a validating way to move this
691 ** to a separate stylesheet. This would work but doesn't validate:
692 ** @import("IEMacFixes.css");
694 /* tabs: border on the a, not the div */
695 * > html #p-cactions li {
696 border: none;
698 * > html #p-cactions li a {
699 border: 1px solid #aaa;
700 border-bottom: none;
702 * > html #p-cactions li.selected a {
703 border-color: #fabd23;
705 /* footer icons need a fixed width */
706 * > html #f-poweredbyico,
707 * > html #f-copyrightico {
708 width: 88px;
710 * > html #bodyContent,
711 * > html #bodyContent pre {
712 overflow-x: auto;
713 width: 100%;
714 padding-bottom: 25px;
717 /* more IE fixes */
718 /* float/negative margin brokenness */
719 * html div#footer {
720 margin-top: 0;
722 * html div#column-content {
723 display: inline;
724 margin-bottom: 0;
726 #pagehistory li.selected {
727 position: relative;
730 /* Mac IE 5.0 fix; floated content turns invisible */
731 * > html div#column-content {
732 float: none;
734 * > html div#column-one {
735 position: absolute;
736 left: 0;
737 top: 0;
739 * > html div#footer {
740 margin-left: 13.2em;
742 .redirectText {
743 font-size: 150%;
744 margin: 5px;
747 div.patrollink {
748 clear: both;
751 .sharedUploadNotice {
752 font-style: italic;
755 span.updatedmarker {
756 color: black;
757 background-color: #0f0;
760 .editExternally {
761 border: 1px solid gray;
762 background-color: #ffffff;
763 padding: 3px;
764 margin-top: 0.5em;
765 float: left;
766 font-size: small;
767 text-align: center;
769 .editExternallyHelp {
770 font-style: italic;
771 color: gray;
774 .toggle {
775 margin-left: 2em;
776 text-indent: -2em;
779 /* @bug 1714 */
780 input#wpSave,
781 input#wpDiff {
782 margin-right: 0.33em;
785 #wpSave {
786 font-weight: bold;
789 /* noarticletext */
790 div.noarticletext {
791 border: 1px solid #ccc;
792 background: #fff;
793 padding: .2em 1em;
794 color: #000;
797 div#searchTargetContainer {
798 left: 10px;
799 top: 10px;
800 width: 90%;
801 background: white;
804 div#searchTarget {
805 padding: 3px;
806 margin: 5px;
807 background: #F0F0F0;
808 border: solid 1px blue;
811 div#searchTarget ul li {
812 list-style-type: none;
813 list-style-image: none;
816 div#searchTarget ul li:before {
817 color: orange;
818 content: "\00BB \0020";
821 div#searchTargetHide {
822 float: right;
823 border: solid 1px black;
824 background: #DCDCDC;
825 padding: 2px;
828 #powersearch p {
829 margin-top: 0;
832 div.multipageimagenavbox {
833 border: solid 1px silver;
834 padding: 4px;
835 margin: 1em;
836 background: #f0f0f0;
839 div.multipageimagenavbox div.thumb {
840 border: none;
841 margin-left: 2em;
842 margin-right: 2em;
845 div.multipageimagenavbox hr {
846 margin: 6px;
849 table.multipageimage td {
850 text-align: center;
853 .templatesUsed {
854 margin-top: 1.5em;
857 .mw-summary-preview {
858 margin: 0.1em 0;
861 /* Friendlier slave lag warnings */
862 div.mw-lag-warn-normal,
863 div.mw-lag-warn-high {
864 padding: 3px;
865 text-align: center;
866 margin: 3px auto;
868 div.mw-lag-warn-normal {
869 border: 1px solid #FFCC66;
870 background-color: #FFFFCC;
872 div.mw-lag-warn-high {
873 font-weight: bold;
874 border: 2px solid #FF0033;
875 background-color: #FFCCCC;
878 .MediaTransformError {
879 background-color: #ccc;
880 padding: 0.1em;
882 .MediaTransformError td {
883 text-align: center;
884 vertical-align: middle;
885 font-size: 90%;
888 /* God-damned hack for the crappy layout */
889 .os-suggest {
890 font-size: 127%;
893 /* Sometimes people don't want personal tools to be lowercase! */
894 .no-text-transform {
895 text-transform: none;
898 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
899 .tipsy {
900 font-size: 127%;
903 /* mediawiki.notification */
904 .skin-monobook .mw-notification {
905 -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
906 -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
907 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);