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