Do r93269 in a better way (also fixes some rare cases). Use 'margin/padding' instead...
[lhc/web/wiklou.git] / skins / common / shared.css
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 */
6
7 /* GENERAL CLASSES FOR DIRECTIONALITY SUPPORT */
8
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.
12 */
13 .mw-content-ltr {
14 /* @noflip */
15 direction: ltr;
16 }
17 .mw-content-rtl {
18 /* @noflip */
19 direction: rtl;
20 }
21
22 /* Most input fields should be in site direction */
23 .sitedir-ltr textarea,
24 .sitedir-ltr input {
25 /* @noflip */
26 direction: ltr;
27 }
28 .sitedir-rtl textarea,
29 .sitedir-rtl input {
30 /* @noflip */
31 direction: rtl;
32 }
33
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;
41 }
42
43 /* Override default values */
44 textarea[dir="ltr"],
45 input[dir="ltr"] {
46 /* @noflip */
47 direction: ltr;
48 }
49 textarea[dir="rtl"],
50 input[dir="rtl"] {
51 /* @noflip */
52 direction: rtl;
53 }
54
55 /* The scripts of these languages are very hard to read with underlines */
56 [lang="ar"] a,
57 [lang="ckb"] a,
58 [lang="fa"] a,
59 [lang="kk-arab"] a,
60 [lang="mzn"] a,
61 [lang="ps"] a,
62 [lang="ur"] a {
63 text-decoration: none;
64 }
65
66 /* Default style for semantic tags */
67 abbr,
68 acronym,
69 .explain {
70 border-bottom: 1px dotted black;
71 cursor: help;
72 }
73
74 /* Colored watchlist and recent changes numbers */
75 .mw-plusminus-pos {
76 color: #006400; /* dark green */
77 }
78 .mw-plusminus-neg {
79 color: #8b0000; /* dark red */
80 }
81 .mw-plusminus-null {
82 color: #aaa; /* gray */
83 }
84
85 /**
86 * Links to redirects appear italicized on [[Special:AllPages]], [[Special:PrefixIndex]],
87 * [[Special:Watchlist/edit]] and in category listings.
88 */
89 .allpagesredirect,
90 .redirect-in-category,
91 .watchlistredir {
92 font-style: italic;
93 }
94
95 /* Comment and username portions of RC entries */
96 span.comment {
97 font-style: italic;
98 }
99
100 span.changedby {
101 font-size: 95%;
102 }
103
104 /* Math */
105 .texvc {
106 direction: ltr;
107 unicode-bidi: embed;
108 }
109 img.tex {
110 vertical-align: middle;
111 }
112 span.texhtml {
113 font-family: serif;
114 }
115
116 /**
117 * Add a bit of margin space between the preview and the toolbar.
118 * This replaces the ugly <p><br /></p> we used to insert into the page source
119 */
120 #wikiPreview.ontop {
121 margin-bottom: 1em;
122 }
123
124 /* Stop floats from intruding into edit area in previews */
125 #editform,
126 #toolbar,
127 #wpTextbox1 {
128 clear: both;
129 }
130 #toolbar img {
131 cursor: pointer;
132 }
133 div#mw-js-message {
134 margin: 1em 5%;
135 padding: 0.5em 2.5%;
136 border: solid 1px #ddd;
137 background-color: #fcfcfc;
138 }
139
140 /* Edit section links */
141 .editsection {
142 float: right;
143 margin-left: 5px;
144 unicode-bidi: embed;
145 }
146 /* Correct directionality when page dir is different from site/user dir */
147 .mw-content-ltr .editsection,
148 .mw-content-rtl .mw-content-ltr .editsection {
149 /* @noflip */
150 float: right;
151 }
152 .mw-content-rtl .editsection,
153 .mw-content-ltr .mw-content-rtl .editsection {
154 /* @noflip */
155 float: left;
156 }
157
158 /**
159 * File histories
160 */
161 h2#filehistory {
162 clear: both;
163 }
164
165 table.filehistory th,
166 table.filehistory td {
167 vertical-align: top;
168 }
169 table.filehistory th {
170 text-align: left;
171 }
172 table.filehistory td.mw-imagepage-filesize,
173 table.filehistory th.mw-imagepage-filesize {
174 white-space: nowrap;
175 }
176
177 table.filehistory td.filehistory-selected {
178 font-weight: bold;
179 }
180
181 /**
182 * Add a checkered background image on hover for file
183 * description pages. (bug 26470)
184 */
185 .filehistory a img,
186 #file img:hover {
187 /* @embed */
188 background: white url(images/Checker-16x16.png) repeat;
189 }
190
191 /**
192 * rev_deleted stuff
193 */
194 li span.deleted,
195 span.history-deleted {
196 text-decoration: line-through;
197 color: #888;
198 font-style: italic;
199 }
200
201 /**
202 * Patrol stuff
203 */
204 .not-patrolled {
205 background-color: #ffa;
206 }
207
208 .unpatrolled {
209 font-weight: bold;
210 color: red;
211 }
212
213 div.patrollink {
214 font-size: 75%;
215 text-align: right;
216 }
217
218 /**
219 * Forms
220 */
221 td.mw-label {
222 text-align: right;
223 }
224 td.mw-input {
225 text-align: left;
226 }
227 td.mw-submit {
228 text-align: left;
229 }
230
231 td.mw-label {
232 vertical-align: top;
233 }
234 .prefsection td.mw-label {
235 width: 20%;
236 }
237 .prefsection table {
238 width: 100%;
239 }
240 td.mw-submit {
241 white-space: nowrap;
242 }
243
244 table.mw-htmlform-nolabel td.mw-label {
245 width: 0 !important;
246 }
247
248 tr.mw-htmlform-vertical-label td.mw-label {
249 text-align: left !important;
250 }
251
252 .mw-htmlform-invalid-input td.mw-input input {
253 border-color: red;
254 }
255 .mw-htmlform-multiselect-flatlist div.mw-htmlform-multiselect-item {
256 display: inline;
257 margin-right: 1em;
258 white-space: nowrap;
259 }
260
261 input#wpSummary {
262 width: 80%;
263 }
264
265 /**
266 * Image captions
267 */
268 .thumbcaption {
269 text-align: left;
270 }
271 .magnify {
272 float: right;
273 }
274
275 /**
276 * Categories
277 */
278 .catlinks ul {
279 display: inline;
280 margin: 0px;
281 list-style: none;
282 list-style-type: none;
283 list-style-image: none;
284 vertical-align: middle !ie;
285 }
286
287 .catlinks li {
288 display: inline-block;
289 line-height: 1.35em;
290 padding: 0 .7em;
291 border-left: 1px solid #AAA;
292 margin: 0.3em 0;
293 zoom: 1;
294 display: inline !ie;
295 }
296
297 .catlinks li:first-child {
298 padding-left: .4em;
299 border-left: none;
300 }
301 /**
302 * Hidden categories
303 */
304 .mw-hidden-cats-hidden {
305 display: none;
306 }
307 .catlinks-allhidden {
308 display: none;
309 }
310
311 /* Convenience links to edit block, delete and protect reasons */
312 p.mw-ipb-conveniencelinks,
313 p.mw-protect-editreasons,
314 p.mw-filedelete-editreasons,
315 p.mw-delete-editreasons,
316 p.mw-revdel-editreasons {
317 font-size: 90%;
318 text-align: right;
319 }
320
321 /**
322 * OpenSearch ajax suggestions
323 */
324 .os-suggest {
325 overflow: auto;
326 overflow-x: hidden;
327 position: absolute;
328 top: 0px;
329 left: 0px;
330 width: 0px;
331 background-color: white;
332 background-color: Window;
333 border-style: solid;
334 border-color: #AAAAAA;
335 border-width: 1px;
336 z-index:99;
337 font-size:95%;
338 }
339
340 table.os-suggest-results {
341 font-size: 95%;
342 cursor: pointer;
343 border: 0;
344 border-collapse: collapse;
345 width: 100%;
346 }
347
348 .os-suggest-result,
349 .os-suggest-result-hl {
350 white-space: nowrap;
351 background-color: white;
352 background-color: Window;
353 color: black;
354 color: WindowText;
355 padding: 2px;
356 }
357 .os-suggest-result-hl,
358 .os-suggest-result-hl-webkit {
359 background-color: #4C59A6;
360 color: white;
361 }
362 .os-suggest-result-hl {
363 /* System colors are misimplemented in Safari 3.0 and earlier,
364 * making highlighted text illegible...
365 */
366 background-color: Highlight;
367 color: HighlightText;
368 }
369
370 .os-suggest-toggle {
371 position: relative;
372 left: 1ex;
373 font-size: 65%;
374 }
375 .os-suggest-toggle-def {
376 position: absolute;
377 top: 0px;
378 left: 0px;
379 font-size: 65%;
380 visibility: hidden;
381 }
382
383 /* Page history styling */
384
385 /* The auto-generated edit comments */
386 .autocomment {
387 color: gray;
388 }
389 #pagehistory .history-user {
390 margin-left: 0.4em;
391 margin-right: 0.2em;
392 }
393 #pagehistory span.minor {
394 font-weight: bold;
395 }
396 #pagehistory li {
397 border: 1px solid white;
398 }
399 #pagehistory li.selected {
400 background-color: #f9f9f9;
401 border: 1px dashed #aaa;
402 }
403
404 .mw-history-revisiondelete-button, #mw-fileduplicatesearch-icon {
405 float: right;
406 }
407
408 /** Generic minor/bot/newpage styling (recent changes) */
409 .newpage,
410 .minor,
411 .bot {
412 font-weight: bold;
413 }
414
415 #shared-image-dup,
416 #shared-image-conflict {
417 font-style: italic;
418 }
419
420 /**
421 * Recreating deleted page warning
422 * Reupload file warning
423 * Page protection warning
424 * incl. log entries for these warnings
425 */
426 div.mw-warning-with-logexcerpt {
427 padding: 3px;
428 margin-bottom: 3px;
429 border: 2px solid #2F6FAB;
430 clear: both;
431 }
432 div.mw-warning-with-logexcerpt ul li {
433 font-size: 90%;
434 }
435
436 /* (show/hide) revision deletion links */
437 span.mw-revdelundel-link,
438 strong.mw-revdelundel-link {
439 font-size: 90%;
440 }
441 span.mw-revdelundel-hidden,
442 input.mw-revdelundel-hidden {
443 visibility: hidden;
444 }
445
446 td.mw-revdel-checkbox,
447 th.mw-revdel-checkbox {
448 padding-right: 10px;
449 text-align: center;
450 }
451
452 /* feed links */
453 a.feedlink {
454 /* @embed */
455 background: url("images/feed-icon.png") center left no-repeat;
456 padding-left: 16px;
457 }
458
459 /* Plainlinks - this can be used to switch
460 * off special external link styling */
461 .plainlinks a {
462 background: none !important;
463 padding: 0 !important;
464 }
465 /* External URLs should always be treated as LTR (bug 4330) */
466 /* @noflip */ .rtl a.external.free,
467 .rtl a.external.autonumber {
468 direction: ltr;
469 unicode-bidi: embed;
470 }
471
472 /* wikitable class for skinning normal tables
473 * keep on sync with commonPrint.css
474 */
475 table.wikitable {
476 margin: 1em 1em 1em 0;
477 background: #f9f9f9;
478 border: 1px #aaa solid;
479 border-collapse: collapse;
480 color: black;
481 }
482 .wikitable th,
483 .wikitable td {
484 border: 1px #aaa solid;
485 padding: 0.2em;
486 }
487 .wikitable th {
488 background: #f2f2f2;
489 text-align: center;
490 }
491 .wikitable caption {
492 font-weight: bold;
493 }
494
495 /* hide initially collapsed collapsable tables */
496 table.collapsed tr.collapsable {
497 display: none;
498 }
499
500 /* success and error messages */
501 .success {
502 color: green;
503 font-size: larger;
504 }
505 .warning {
506 color: #FFA500; /* orange */
507 font-size: larger;
508 }
509 .error {
510 color: red;
511 font-size: larger;
512 }
513 .errorbox,
514 .warningbox,
515 .successbox {
516 font-size: larger;
517 border: 2px solid;
518 padding: .5em 1em;
519 float: left;
520 margin-bottom: 2em;
521 color: #000;
522 }
523 .errorbox {
524 border-color: red;
525 background-color: #fff2f2;
526 }
527 .warningbox {
528 border-color: #FF8C00; /* darkorange */
529 background-color: #FFFFC0;
530 }
531 .successbox {
532 border-color: green;
533 background-color: #dfd;
534 }
535 .errorbox h2,
536 .warningbox h2,
537 .successbox h2 {
538 font-size: 1em;
539 font-weight: bold;
540 display: inline;
541 margin: 0 .5em 0 0;
542 border: none;
543 }
544
545 /* general info/warning box for SP */
546 .mw-infobox {
547 border: 2px solid #ff7f00;
548 margin: 0.5em;
549 clear: left;
550 overflow: hidden;
551 }
552
553 .mw-infobox-left {
554 margin: 7px;
555 float: left;
556 width: 35px;
557 }
558
559 .mw-infobox-right {
560 margin: 0.5em 0.5em 0.5em 49px;
561 }
562
563 /* Note on preview page */
564 .previewnote {
565 color: #c00;
566 margin-bottom: 1em;
567 }
568
569 .previewnote p {
570 text-indent: 3em;
571 margin: 0.8em 0;
572 }
573
574 .visualClear {
575 clear: both;
576 }
577
578 #mw_trackbacks {
579 border: solid 1px #bbbbff;
580 background-color: #eeeeff;
581 padding: 0.2em;
582 }
583
584 /**
585 * Data table style
586 *
587 * Transparent table with suddle borders
588 * and blue row-highlighting.
589 */
590 .mw-datatable {
591 border-collapse: collapse;
592 }
593 .mw-datatable,
594 .mw-datatable td,
595 .mw-datatable th {
596 border: 1px solid #aaaaaa;
597 padding: 0 0.15em 0 0.15em;
598 }
599 .mw-datatable th {
600 background-color: #ddddff;
601 }
602 .mw-datatable td {
603 background-color: #ffffff;
604 }
605 .mw-datatable tr:hover td {
606 background-color: #eeeeff;
607 }
608
609
610 /**
611 * TablePager tables generated by the TablePager PHP class
612 * in MediaWiki (e.g. Special:ListFiles).
613 */
614 .TablePager {
615 min-width: 80%;
616 }
617 .TablePager_nav {
618 margin: 0 auto;
619 }
620 .TablePager_nav td {
621 padding: 3px;
622 text-align: center;
623 }
624 .TablePager_nav a {
625 text-decoration: none;
626 }
627
628 .imagelist td,
629 .imagelist th {
630 white-space: nowrap;
631 }
632 .imagelist .TablePager_col_links {
633 background-color: #eeeeff;
634 }
635 .imagelist .TablePager_col_img_description {
636 white-space: normal;
637 }
638 .imagelist th.TablePager_sort {
639 background-color: #ccccff;
640 }
641
642 /* filetoc */
643 ul#filetoc {
644 text-align: center;
645 border: 1px solid #aaaaaa;
646 background-color: #f9f9f9;
647 padding: 5px;
648 font-size: 95%;
649 margin-bottom: 0.5em;
650 margin-left: 0;
651 margin-right: 0;
652 }
653
654 #filetoc li {
655 display: inline;
656 list-style-type: none;
657 padding-right: 2em;
658 }
659
660 /* Classes for EXIF data display */
661 table.mw_metadata {
662 font-size: 0.8em;
663 margin-left: 0.5em;
664 margin-bottom: 0.5em;
665 width: 400px;
666 }
667
668 table.mw_metadata caption {
669 font-weight: bold;
670 }
671
672 table.mw_metadata th {
673 font-weight: normal;
674 }
675
676 table.mw_metadata td {
677 padding: 0.1em;
678 }
679
680 table.mw_metadata {
681 border: none;
682 border-collapse: collapse;
683 }
684
685 table.mw_metadata td,
686 table.mw_metadata th {
687 text-align: center;
688 border: 1px solid #aaaaaa;
689 padding-left: 5px;
690 padding-right: 5px;
691 }
692
693 table.mw_metadata th {
694 background-color: #f9f9f9;
695 }
696
697 table.mw_metadata td {
698 background-color: #fcfcfc;
699 }
700
701 table.mw_metadata ul.metadata-langlist {
702 list-style-type: none;
703 list-style-image: none;
704 padding-right: 5px;
705 padding-left: 5px;
706 margin: 0;
707 }
708
709 /* Correct directionality when page dir is different from site/user dir */
710 .mw-content-ltr ul,
711 .mw-content-rtl .mw-content-ltr ul {
712 /* @noflip */
713 margin: 0.3em 0 0 1.5em;
714 }
715 .mw-content-rtl ul,
716 .mw-content-ltr .mw-content-rtl ul {
717 /* @noflip */
718 margin: 0.3em 1.5em 0 0;
719 }
720 .mw-content-ltr ol,
721 .mw-content-rtl .mw-content-ltr ol {
722 /* @noflip */
723 margin: 0.3em 0 0 3.2em;
724 }
725 .mw-content-rtl ol,
726 .mw-content-ltr .mw-content-rtl ol {
727 /* @noflip */
728 margin: 0.3em 3.2em 0 0;
729 }
730
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;
739 }
740
741 ul.gallery {
742 margin: 2px;
743 padding: 2px;
744 display: inline-block;
745 }
746
747 ul.gallery,
748 li.gallerybox {
749 zoom: 1;
750 display: inline !ie;
751 }
752
753 li.gallerycaption {
754 font-weight: bold;
755 text-align: center;
756 display: block;
757 word-wrap: break-word;
758 }
759
760 li.gallerybox div.thumb {
761 text-align: center;
762 border: 1px solid #ccc;
763 background-color: #f9f9f9;
764 margin: 2px;
765 }
766
767 li.gallerybox div.thumb img {
768 display: block;
769 margin: 0 auto;
770 }
771
772 div.gallerytext {
773 overflow: hidden;
774 font-size: 94%;
775 padding: 2px 4px;
776 word-wrap: break-word;
777 }
778
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;
787 }
788
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;
796 }
797
798 /* Localised ordered list numbering for some languages */
799 ol:lang(bcc) li,
800 ol:lang(bqi) li,
801 ol:lang(fa) li,
802 ol:lang(glk) li,
803 ol:lang(kk-arab) li,
804 ol:lang(mzn) li {
805 list-style-type: -moz-persian;
806 list-style-type: persian;
807 }
808
809 ol:lang(ckb) li {
810 list-style-type: -moz-arabic-indic;
811 list-style-type: arabic-indic;
812 }
813
814 ol:lang(bn) li {
815 list-style-type: -moz-bengali;
816 list-style-type: bengali;
817 }
818
819 ol:lang(or) li {
820 list-style-type: -moz-oriya;
821 list-style-type: oriya;
822 }
823
824 #toc ul, .toc ul {
825 margin: .3em 0;
826 }
827
828 /* Correct directionality when page dir is different from site/user dir */
829 /* @noflip */ .mw-content-ltr .toc ul,
830 .mw-content-ltr #toc ul,
831 .mw-content-rtl .mw-content-ltr .toc ul,
832 .mw-content-rtl .mw-content-ltr #toc ul {
833 text-align: left;
834 }
835 /* @noflip */ .mw-content-rtl .toc ul,
836 .mw-content-rtl #toc ul,
837 .mw-content-ltr .mw-content-rtl .toc ul,
838 .mw-content-ltr .mw-content-rtl #toc ul {
839 text-align: right;
840 }
841 /* @noflip */ .mw-content-ltr .toc ul ul,
842 .mw-content-ltr #toc ul ul,
843 .mw-content-rtl .mw-content-ltr .toc ul ul,
844 .mw-content-rtl .mw-content-ltr #toc ul ul {
845 margin: 0 0 0 2em;
846 }
847 /* @noflip */ .mw-content-rtl .toc ul ul,
848 .mw-content-rtl #toc ul ul,
849 .mw-content-ltr .mw-content-rtl .toc ul ul,
850 .mw-content-ltr .mw-content-rtl #toc ul ul {
851 margin: 0 2em 0 0;
852 }
853
854 /* tooltip styles */
855 .mw-help-field-hint {
856 display: none;
857 margin-left: 2px;
858 margin-bottom: -8px;
859 padding: 0px 0px 0px 15px;
860 /* @embed */
861 background-image: url('images/help-question.gif');
862 background-position: left center;
863 background-repeat: no-repeat;
864 cursor: pointer;
865 font-size: .8em;
866 text-decoration: underline;
867 color: #0645ad;
868 }
869 .mw-help-field-hint:hover {
870 /* @embed */
871 background-image: url('images/help-question-hover.gif');
872 }
873 .mw-help-field-data {
874 display: block;
875 background-color: #d6f3ff;
876 padding:5px 8px 4px 8px;
877 border: 1px solid #5dc9f4;
878 margin-left: 20px;
879 }
880 .tipsy {
881 padding: 5px 5px 10px;
882 font-size: 12px;
883 position: absolute;
884 z-index: 100000;
885 overflow: visible;
886 }
887 .tipsy-inner {
888 padding: 5px 8px 4px 8px;
889 background-color: #d6f3ff;
890 color: black;
891 border: 1px solid #5dc9f4;
892 max-width: 300px;
893 text-align: left;
894 }
895 .tipsy-arrow {
896 position: absolute;
897 /* @embed */
898 background: url(images/tipsy-arrow.gif) no-repeat top left;
899 width: 13px;
900 height: 13px;
901 }
902 .tipsy-se .tipsy-arrow {
903 bottom: -2px;
904 right: 10px;
905 background-position: 0% 100%;
906 }
907 /* Table Sorting */
908 th.headerSort {
909 background-image: url(images/sort_both.gif);
910 cursor: pointer;
911 background-repeat: no-repeat;
912 background-position: center right;
913 padding-right: 21px;
914 }
915 th.headerSortUp {
916 background-image: url(images/sort_up.gif);
917 }
918 th.headerSortDown {
919 background-image: url(images/sort_down.gif);
920 }
921
922 /* LTR content in RTL layout */
923 .ltr {
924 /* @noflip */
925 direction: ltr;
926 unicode-bidi: embed;
927 }
928
929 #mw-clearyourcache,
930 #mw-sitecsspreview,
931 #mw-sitejspreview,
932 #mw-usercsspreview,
933 #mw-userjspreview {
934 direction: ltr;
935 unicode-bidi: embed;
936 }
937
938 /* Correct user & content directionality when viewing a diff */
939 .diff-currentversion-title,
940 .diff {
941 direction: ltr;
942 unicode-bidi: embed;
943 }
944 /* @noflip */ .diff-contentalign-right td {
945 direction: rtl;
946 unicode-bidi: embed;
947 }
948 /* @noflip */ .diff-contentalign-left td {
949 direction: ltr;
950 unicode-bidi: embed;
951 }
952 .diff-otitle,
953 .diff-ntitle,
954 .diff-lineno {
955 direction: ltr !important;
956 unicode-bidi: embed;
957 }
958
959 #mw-revision-info,
960 #mw-revision-nav {
961 direction: ltr;
962 }
963
964 /* Images */
965
966 /* @noflip */ div.tright,
967 div.floatright,
968 table.floatright {
969 clear: right;
970 float: right;
971 }
972 /* @noflip */ div.tleft,
973 div.floatleft,
974 table.floatleft {
975 float: left;
976 clear: left;
977 }
978 div.floatright,
979 table.floatright,
980 div.floatleft,
981 table.floatleft {
982 position: relative;
983 }
984
985 /* bug 12205 */
986 #mw-credits a {
987 unicode-bidi: embed;
988 }