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