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