Follow up r105517. Corrected the CSS.
[mediawiki.git] / skins / common / shared.css
blob7ca243da76a45af2df251e342f2597db7b5730c2
1 /**
2 * CSS in this file is used by *all* skins (that have any CSS at all). Be
3 * careful what you put in here, since what looks good in one skin may not in
4 * another, but don't ignore the poor pre-Monobook users either.
5 */
7 /* GENERAL CLASSES FOR DIRECTIONALITY SUPPORT */
9 /**
10 * These classes should be used for text depending on the content direction.
11 * Content stuff like editsection, ul/ol and TOC depend on this.
13 .mw-content-ltr {
14 /* @noflip */
15 direction: ltr;
17 .mw-content-rtl {
18 /* @noflip */
19 direction: rtl;
22 /* Most input fields should be in site direction */
23 .sitedir-ltr textarea,
24 .sitedir-ltr input {
25 /* @noflip */
26 direction: ltr;
28 .sitedir-rtl textarea,
29 .sitedir-rtl input {
30 /* @noflip */
31 direction: rtl;
34 /* Input types that should follow user direction, like buttons */
35 /* TODO: What about buttons in wikipage content ? */
36 input[type="submit"],
37 input[type="button"],
38 input[type="reset"],
39 input[type="file"] {
40 direction: ltr;
43 /* Override default values */
44 textarea[dir="ltr"],
45 input[dir="ltr"] {
46 /* @noflip */
47 direction: ltr;
49 textarea[dir="rtl"],
50 input[dir="rtl"] {
51 /* @noflip */
52 direction: rtl;
55 /* Default style for semantic tags */
56 abbr,
57 acronym,
58 .explain {
59 border-bottom: 1px dotted black;
60 cursor: help;
63 /* Colored watchlist and recent changes numbers */
64 .mw-plusminus-pos {
65 color: #006400; /* dark green */
67 .mw-plusminus-neg {
68 color: #8b0000; /* dark red */
70 .mw-plusminus-null {
71 color: #aaa; /* gray */
74 /**
75 * Links to redirects appear italicized on [[Special:AllPages]], [[Special:PrefixIndex]],
76 * [[Special:Watchlist/edit]] and in category listings.
78 .allpagesredirect,
79 .redirect-in-category,
80 .watchlistredir {
81 font-style: italic;
84 /* Comment and username portions of RC entries */
85 span.comment {
86 font-style: italic;
89 span.changedby {
90 font-size: 95%;
93 /* Math */
94 .texvc {
95 direction: ltr;
96 unicode-bidi: embed;
98 img.tex {
99 vertical-align: middle;
101 span.texhtml {
102 font-family: serif;
106 * Add a bit of margin space between the preview and the toolbar.
107 * This replaces the ugly <p><br /></p> we used to insert into the page source
109 #wikiPreview.ontop {
110 margin-bottom: 1em;
113 /* Stop floats from intruding into edit area in previews */
114 #editform,
115 #toolbar,
116 #wpTextbox1 {
117 clear: both;
119 #toolbar img {
120 cursor: pointer;
122 div#mw-js-message {
123 margin: 1em 5%;
124 padding: 0.5em 2.5%;
125 border: solid 1px #ddd;
126 background-color: #fcfcfc;
129 /* Edit section links */
130 .editsection {
131 float: right;
132 margin-left: 5px;
134 /* Correct directionality when page dir is different from site/user dir */
135 .mw-content-ltr .editsection,
136 .mw-content-rtl .mw-content-ltr .editsection {
137 /* @noflip */
138 float: right;
140 .mw-content-rtl .editsection,
141 .mw-content-ltr .mw-content-rtl .editsection {
142 /* @noflip */
143 float: left;
147 * File description page
150 div.mw-filepage-resolutioninfo {
151 font-size: smaller;
155 * File histories
157 h2#filehistory {
158 clear: both;
161 table.filehistory th,
162 table.filehistory td {
163 vertical-align: top;
165 table.filehistory th {
166 text-align: left;
168 table.filehistory td.mw-imagepage-filesize,
169 table.filehistory th.mw-imagepage-filesize {
170 white-space: nowrap;
173 table.filehistory td.filehistory-selected {
174 font-weight: bold;
178 * Add a checkered background image on hover for file
179 * description pages. (bug 26470)
181 .filehistory a img,
182 #file img:hover {
183 /* @embed */
184 background: white url(images/Checker-16x16.png) repeat;
188 * rev_deleted stuff
190 li span.deleted,
191 span.history-deleted {
192 text-decoration: line-through;
193 color: #888;
194 font-style: italic;
198 * Patrol stuff
200 .not-patrolled {
201 background-color: #ffa;
204 .unpatrolled {
205 font-weight: bold;
206 color: red;
209 div.patrollink {
210 font-size: 75%;
211 text-align: right;
215 * Forms
217 td.mw-label {
218 text-align: right;
220 td.mw-input {
221 text-align: left;
223 td.mw-submit {
224 text-align: left;
227 td.mw-label {
228 vertical-align: top;
230 .prefsection td.mw-label {
231 width: 20%;
233 .prefsection table {
234 width: 100%;
236 td.mw-submit {
237 white-space: nowrap;
240 table.mw-htmlform-nolabel td.mw-label {
241 width: 0 !important;
244 tr.mw-htmlform-vertical-label td.mw-label {
245 text-align: left !important;
248 .mw-htmlform-invalid-input td.mw-input input {
249 border-color: red;
251 .mw-htmlform-radio-flatlist div.mw-htmlform-radio-item,
252 .mw-htmlform-multiselect-flatlist div.mw-htmlform-multiselect-item {
253 display: inline;
254 margin-right: 1em;
255 white-space: nowrap;
258 input#wpSummary {
259 width: 80%;
263 * Image captions
265 .thumbcaption {
266 text-align: left;
268 .magnify {
269 float: right;
273 * Categories
275 #catlinks {
277 * Overrides text justification (user preference)
278 * See bug 31990
280 text-align: left;
282 .catlinks ul {
283 display: inline;
284 margin: 0;
285 padding: 0;
286 list-style: none;
287 list-style-type: none;
288 list-style-image: none;
289 vertical-align: middle !ie;
292 .catlinks li {
293 display: inline-block;
294 line-height: 1.25em;
295 border-left: 1px solid #AAA;
296 margin: 0.125em 0;
297 padding: 0 0.5em;
298 zoom: 1;
299 display: inline !ie;
302 .catlinks li:first-child {
303 padding-left: 0.25em;
304 border-left: none;
307 * Hidden categories
309 .mw-hidden-cats-hidden {
310 display: none;
312 .catlinks-allhidden {
313 display: none;
316 /* Convenience links to edit block, delete and protect reasons */
317 p.mw-ipb-conveniencelinks,
318 p.mw-protect-editreasons,
319 p.mw-filedelete-editreasons,
320 p.mw-delete-editreasons,
321 p.mw-revdel-editreasons {
322 font-size: 90%;
323 text-align: right;
327 * OpenSearch ajax suggestions
329 .os-suggest {
330 overflow: auto;
331 overflow-x: hidden;
332 position: absolute;
333 top: 0;
334 left: 0;
335 width: 0;
336 background-color: white;
337 border-style: solid;
338 border-color: #AAAAAA;
339 border-width: 1px;
340 z-index:99;
341 font-size:95%;
344 table.os-suggest-results {
345 font-size: 95%;
346 cursor: pointer;
347 border: 0;
348 border-collapse: collapse;
349 width: 100%;
352 .os-suggest-result,
353 .os-suggest-result-hl {
354 white-space: nowrap;
355 background-color: white;
356 color: black;
357 padding: 2px;
359 .os-suggest-result-hl,
360 .os-suggest-result-hl-webkit {
361 background-color: #4C59A6;
362 color: white;
365 .os-suggest-toggle {
366 position: relative;
367 left: 1ex;
368 font-size: 65%;
370 .os-suggest-toggle-def {
371 position: absolute;
372 top: 0;
373 left: 0;
374 font-size: 65%;
375 visibility: hidden;
378 /* Page history styling */
380 /* The auto-generated edit comments */
381 .autocomment {
382 color: gray;
384 #pagehistory .history-user {
385 margin-left: 0.4em;
386 margin-right: 0.2em;
388 #pagehistory span.minor {
389 font-weight: bold;
391 #pagehistory li {
392 border: 1px solid white;
394 #pagehistory li.selected {
395 background-color: #f9f9f9;
396 border: 1px dashed #aaa;
399 .mw-history-revisiondelete-button, #mw-fileduplicatesearch-icon {
400 float: right;
403 /** Generic minor/bot/newpage styling (recent changes) */
404 .newpage,
405 .minoredit,
406 .botedit {
407 font-weight: bold;
410 #shared-image-dup,
411 #shared-image-conflict {
412 font-style: italic;
416 * Recreating deleted page warning
417 * Reupload file warning
418 * Page protection warning
419 * incl. log entries for these warnings
421 div.mw-warning-with-logexcerpt {
422 padding: 3px;
423 margin-bottom: 3px;
424 border: 2px solid #2F6FAB;
425 clear: both;
427 div.mw-warning-with-logexcerpt ul li {
428 font-size: 90%;
431 /* (show/hide) revision deletion links */
432 span.mw-revdelundel-link,
433 strong.mw-revdelundel-link {
434 font-size: 90%;
436 span.mw-revdelundel-hidden,
437 input.mw-revdelundel-hidden {
438 visibility: hidden;
441 td.mw-revdel-checkbox,
442 th.mw-revdel-checkbox {
443 padding-right: 10px;
444 text-align: center;
447 /* feed links */
448 a.feedlink {
449 /* @embed */
450 background: url(images/feed-icon.png) center left no-repeat;
451 padding-left: 16px;
454 /* Plainlinks - this can be used to switch
455 * off special external link styling */
456 .plainlinks a {
457 background: none !important;
458 padding: 0 !important;
460 /* External URLs should always be treated as LTR (bug 4330) */
461 /* @noflip */ .rtl a.external.free,
462 .rtl a.external.autonumber {
463 direction: ltr;
464 unicode-bidi: embed;
468 * wikitable class for skinning normal tables
469 * keep in sync with commonPrint.css
471 table.wikitable {
472 margin: 1em 1em 1em 0;
473 background-color: #f9f9f9;
474 border: 1px #aaa solid;
475 border-collapse: collapse;
476 color: black;
478 .wikitable th,
479 .wikitable td {
480 border: 1px #aaa solid;
481 padding: 0.2em;
483 .wikitable th {
484 background-color: #f2f2f2;
485 text-align: center;
487 .wikitable caption {
488 font-weight: bold;
491 /* hide initially collapsed collapsable tables */
492 table.collapsed tr.collapsable {
493 display: none;
496 /* success and error messages */
497 .success {
498 color: green;
499 font-size: larger;
501 .warning {
502 color: #FFA500; /* orange */
503 font-size: larger;
505 .error {
506 color: red;
507 font-size: larger;
509 .errorbox,
510 .warningbox,
511 .successbox {
512 font-size: larger;
513 border: 2px solid;
514 padding: .5em 1em;
515 float: left;
516 margin-bottom: 2em;
517 color: #000;
519 .errorbox {
520 border-color: red;
521 background-color: #fff2f2;
523 .warningbox {
524 border-color: #FF8C00; /* darkorange */
525 background-color: #FFFFC0;
527 .successbox {
528 border-color: green;
529 background-color: #dfd;
531 .errorbox h2,
532 .warningbox h2,
533 .successbox h2 {
534 font-size: 1em;
535 font-weight: bold;
536 display: inline;
537 margin: 0 .5em 0 0;
538 border: none;
541 /* general info/warning box for SP */
542 .mw-infobox {
543 border: 2px solid #ff7f00;
544 margin: 0.5em;
545 clear: left;
546 overflow: hidden;
549 .mw-infobox-left {
550 margin: 7px;
551 float: left;
552 width: 35px;
555 .mw-infobox-right {
556 margin: 0.5em 0.5em 0.5em 49px;
559 /* Note on preview page */
560 .previewnote {
561 color: #c00;
562 margin-bottom: 1em;
565 .previewnote p {
566 text-indent: 3em;
567 margin: 0.8em 0;
570 .visualClear {
571 clear: both;
574 #mw_trackbacks {
575 border: solid 1px #bbbbff;
576 background-color: #eeeeff;
577 padding: 0.2em;
581 * Data table style
583 * Transparent table with suddle borders
584 * and blue row-highlighting.
586 .mw-datatable {
587 border-collapse: collapse;
589 .mw-datatable,
590 .mw-datatable td,
591 .mw-datatable th {
592 border: 1px solid #aaaaaa;
593 padding: 0 0.15em 0 0.15em;
595 .mw-datatable th {
596 background-color: #ddddff;
598 .mw-datatable td {
599 background-color: #ffffff;
601 .mw-datatable tr:hover td {
602 background-color: #eeeeff;
607 * TablePager tables generated by the TablePager PHP class
608 * in MediaWiki (e.g. Special:ListFiles).
610 .TablePager {
611 min-width: 80%;
613 .TablePager_nav {
614 margin: 0 auto;
616 .TablePager_nav td {
617 padding: 3px;
618 text-align: center;
620 .TablePager_nav a {
621 text-decoration: none;
624 .imagelist td,
625 .imagelist th {
626 white-space: nowrap;
628 .imagelist .TablePager_col_links {
629 background-color: #eeeeff;
631 .imagelist .TablePager_col_img_description {
632 white-space: normal;
634 .imagelist th.TablePager_sort {
635 background-color: #ccccff;
638 /* filetoc */
639 ul#filetoc {
640 text-align: center;
641 border: 1px solid #aaaaaa;
642 background-color: #f9f9f9;
643 padding: 5px;
644 font-size: 95%;
645 margin-bottom: 0.5em;
646 margin-left: 0;
647 margin-right: 0;
650 #filetoc li {
651 display: inline;
652 list-style-type: none;
653 padding-right: 2em;
656 /* Classes for EXIF data display */
657 table.mw_metadata {
658 font-size: 0.8em;
659 margin-left: 0.5em;
660 margin-bottom: 0.5em;
661 width: 400px;
664 table.mw_metadata caption {
665 font-weight: bold;
668 table.mw_metadata th {
669 font-weight: normal;
672 table.mw_metadata td {
673 padding: 0.1em;
676 table.mw_metadata {
677 border: none;
678 border-collapse: collapse;
681 table.mw_metadata td,
682 table.mw_metadata th {
683 text-align: center;
684 border: 1px solid #aaaaaa;
685 padding-left: 5px;
686 padding-right: 5px;
689 table.mw_metadata th {
690 background-color: #f9f9f9;
693 table.mw_metadata td {
694 background-color: #fcfcfc;
697 table.mw_metadata ul.metadata-langlist {
698 list-style-type: none;
699 list-style-image: none;
700 padding-right: 5px;
701 padding-left: 5px;
702 margin: 0;
705 /* Correct directionality when page dir is different from site/user dir */
706 .mw-content-ltr ul,
707 .mw-content-rtl .mw-content-ltr ul {
708 /* @noflip */
709 margin: 0.3em 0 0 1.5em;
710 padding: 0;
712 .mw-content-rtl ul,
713 .mw-content-ltr .mw-content-rtl ul {
714 /* @noflip */
715 margin: 0.3em 1.5em 0 0;
716 padding: 0;
718 .mw-content-ltr ol,
719 .mw-content-rtl .mw-content-ltr ol {
720 /* @noflip */
721 margin: 0.3em 0 0 3.2em;
722 padding: 0;
724 .mw-content-rtl ol,
725 .mw-content-ltr .mw-content-rtl ol {
726 /* @noflip */
727 margin: 0.3em 3.2em 0 0;
728 padding: 0;
731 /* Galleries */
732 /* These display attributes look nonsensical, but are needed to support IE and FF2 */
733 /* Don't forget to update commonPrint.css */
734 li.gallerybox {
735 vertical-align: top;
736 border: solid 2px white;
737 display: -moz-inline-box;
738 display: inline-block;
741 ul.gallery {
742 margin: 2px;
743 padding: 2px;
744 display: inline-block;
747 ul.gallery,
748 li.gallerybox {
749 zoom: 1;
750 display: inline !ie;
753 li.gallerycaption {
754 font-weight: bold;
755 text-align: center;
756 display: block;
757 word-wrap: break-word;
760 li.gallerybox div.thumb {
761 text-align: center;
762 border: 1px solid #ccc;
763 background-color: #f9f9f9;
764 margin: 2px;
767 li.gallerybox div.thumb img {
768 display: block;
769 margin: 0 auto;
772 div.gallerytext {
773 overflow: hidden;
774 font-size: 94%;
775 padding: 2px 4px;
776 word-wrap: break-word;
779 .mw-ajax-loader {
780 /* @embed */
781 background-image: url(images/ajax-loader.gif);
782 background-position: center center;
783 background-repeat: no-repeat;
784 padding: 16px;
785 position: relative;
786 top: -16px;
789 .mw-small-spinner {
790 padding: 10px !important;
791 margin-right: 0.6em;
792 /* @embed */
793 background-image: url(images/spinner.gif);
794 background-position: center center;
795 background-repeat: no-repeat;
798 /* Language specific height correction for titles. Ref Bug 29405 and Bug 30809 */
799 /* Languages like hi or ml require slightly more vertical space to show diacritics properly */
800 h1:lang(as),
801 h1:lang(bn),
802 h1:lang(gu),
803 h1:lang(hi),
804 h1:lang(kn),
805 h1:lang(ml),
806 h1:lang(mr),
807 h1:lang(or),
808 h1:lang(pa),
809 h1:lang(sa),
810 h1:lang(ta),
811 h1:lang(te) {
812 line-height: 1.5em;
814 h2:lang(as), h3:lang(as), h4:lang(as), h5:lang(as), h6:lang(as),
815 h2:lang(bn), h3:lang(bn), h4:lang(bn), h5:lang(bn), h6:lang(bn),
816 h2:lang(gu), h3:lang(gu), h4:lang(gu), h5:lang(gu), h6:lang(gu),
817 h2:lang(hi), h3:lang(hi), h4:lang(hi), h5:lang(hi), h6:lang(hi),
818 h2:lang(kn), h3:lang(kn), h4:lang(kn), h5:lang(kn), h6:lang(kn),
819 h2:lang(ml), h3:lang(ml), h4:lang(ml), h5:lang(ml), h6:lang(ml),
820 h2:lang(mr), h3:lang(mr), h4:lang(mr), h5:lang(mr), h6:lang(mr),
821 h2:lang(or), h3:lang(or), h4:lang(or), h5:lang(or), h6:lang(or),
822 h2:lang(pa), h3:lang(pa), h4:lang(pa), h5:lang(pa), h6:lang(pa),
823 h2:lang(sa), h3:lang(sa), h4:lang(sa), h5:lang(sa), h6:lang(sa),
824 h2:lang(ta), h3:lang(ta), h4:lang(ta), h5:lang(ta), h6:lang(ta),
825 h2:lang(te), h3:lang(te), h4:lang(te), h5:lang(te), h6:lang(te) {
826 line-height: 1.2em;
829 /* Localised ordered list numbering for some languages */
830 ol:lang(bcc) li,
831 ol:lang(bqi) li,
832 ol:lang(fa) li,
833 ol:lang(glk) li,
834 ol:lang(kk-arab) li,
835 ol:lang(mzn) li {
836 list-style-type: -moz-persian;
837 list-style-type: persian;
840 ol:lang(ckb) li {
841 list-style-type: -moz-arabic-indic;
842 list-style-type: arabic-indic;
845 ol:lang(as) li,
846 ol:lang(bn) li {
847 list-style-type: -moz-bengali;
848 list-style-type: bengali;
851 ol:lang(or) li {
852 list-style-type: -moz-oriya;
853 list-style-type: oriya;
856 #toc ul, .toc ul {
857 margin: .3em 0;
860 /* Correct directionality when page dir is different from site/user dir */
861 /* @noflip */ .mw-content-ltr .toc ul,
862 .mw-content-ltr #toc ul,
863 .mw-content-rtl .mw-content-ltr .toc ul,
864 .mw-content-rtl .mw-content-ltr #toc ul {
865 text-align: left;
867 /* @noflip */ .mw-content-rtl .toc ul,
868 .mw-content-rtl #toc ul,
869 .mw-content-ltr .mw-content-rtl .toc ul,
870 .mw-content-ltr .mw-content-rtl #toc ul {
871 text-align: right;
873 /* @noflip */ .mw-content-ltr .toc ul ul,
874 .mw-content-ltr #toc ul ul,
875 .mw-content-rtl .mw-content-ltr .toc ul ul,
876 .mw-content-rtl .mw-content-ltr #toc ul ul {
877 margin: 0 0 0 2em;
879 /* @noflip */ .mw-content-rtl .toc ul ul,
880 .mw-content-rtl #toc ul ul,
881 .mw-content-ltr .mw-content-rtl .toc ul ul,
882 .mw-content-ltr .mw-content-rtl #toc ul ul {
883 margin: 0 2em 0 0;
886 #toc #toctitle,
887 .toc #toctitle,
888 #toc .toctitle,
889 .toc .toctitle {
890 direction: ltr;
893 /* tooltip styles */
894 .mw-help-field-hint {
895 display: none;
896 margin-left: 2px;
897 margin-bottom: -8px;
898 padding: 0 0 0 15px;
899 /* @embed */
900 background-image: url('images/help-question.gif');
901 background-position: left center;
902 background-repeat: no-repeat;
903 cursor: pointer;
904 font-size: .8em;
905 text-decoration: underline;
906 color: #0645ad;
908 .mw-help-field-hint:hover {
909 /* @embed */
910 background-image: url('images/help-question-hover.gif');
912 .mw-help-field-data {
913 display: block;
914 background-color: #d6f3ff;
915 padding:5px 8px 4px 8px;
916 border: 1px solid #5dc9f4;
917 margin-left: 20px;
919 .tipsy {
920 padding: 5px 5px 10px;
921 font-size: 12px;
922 position: absolute;
923 z-index: 100000;
924 overflow: visible;
926 .tipsy-inner {
927 padding: 5px 8px 4px 8px;
928 background-color: #d6f3ff;
929 color: black;
930 border: 1px solid #5dc9f4;
931 max-width: 300px;
932 text-align: left;
934 .tipsy-arrow {
935 position: absolute;
936 /* @embed */
937 background: url(images/tipsy-arrow.gif) no-repeat top left;
938 width: 13px;
939 height: 13px;
941 .tipsy-se .tipsy-arrow {
942 bottom: -2px;
943 right: 10px;
944 background-position: 0% 100%;
947 /* LTR content in RTL layout */
948 .ltr {
949 /* @noflip */
950 direction: ltr;
951 unicode-bidi: embed;
954 #mw-clearyourcache,
955 #mw-sitecsspreview,
956 #mw-sitejspreview,
957 #mw-usercsspreview,
958 #mw-userjspreview {
959 direction: ltr;
960 unicode-bidi: embed;
963 /* Correct user & content directionality when viewing a diff */
964 .diff-currentversion-title,
965 .diff {
966 direction: ltr;
967 unicode-bidi: embed;
969 /* @noflip */ .diff-contentalign-right td {
970 direction: rtl;
971 unicode-bidi: embed;
973 /* @noflip */ .diff-contentalign-left td {
974 direction: ltr;
975 unicode-bidi: embed;
977 .diff-otitle,
978 .diff-ntitle,
979 .diff-lineno {
980 direction: ltr !important;
981 unicode-bidi: embed;
984 #mw-revision-info,
985 #mw-revision-info-current,
986 #mw-revision-nav {
987 direction: ltr;
988 display: inline;
991 /* Images */
993 /* @noflip */ div.tright,
994 div.floatright,
995 table.floatright {
996 clear: right;
997 float: right;
999 /* @noflip */ div.tleft,
1000 div.floatleft,
1001 table.floatleft {
1002 float: left;
1003 clear: left;
1005 div.floatright,
1006 table.floatright,
1007 div.floatleft,
1008 table.floatleft {
1009 position: relative;
1012 /* bug 12205 */
1013 #mw-credits a {
1014 unicode-bidi: embed;
1017 /* Accessibility */
1018 .mw-jump {
1019 overflow: hidden;
1020 height: 0;
1021 zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */