resources/src/mediawiki.legacy/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  * NOTE: The images which are referenced in this file are no longer in use in
   7  * essential interface components. They should NOT be embedded, because that
   8  * optimizes for the uncommon case at the cost of bloating the size of render-
   9  * blocking CSS common to all pages.
  10  */
  11
  12 /* GENERAL CLASSES FOR DIRECTIONALITY SUPPORT */
  13
  14 /**
  15  * These classes should be used for text depending on the content direction.
  16  * Content stuff like editsection, ul/ol and TOC depend on this.
  17  */
  18 .mw-content-ltr {
  19         /* @noflip */
  20         direction: ltr;
  21 }
  22
  23 .mw-content-rtl {
  24         /* @noflip */
  25         direction: rtl;
  26 }
  27
  28 /* Most input fields should be in site direction */
  29 .sitedir-ltr textarea,
  30 .sitedir-ltr input {
  31         /* @noflip */
  32         direction: ltr;
  33 }
  34
  35 .sitedir-rtl textarea,
  36 .sitedir-rtl input {
  37         /* @noflip */
  38         direction: rtl;
  39 }
  40
  41 .mw-userlink {
  42         unicode-bidi: embed;
  43 }
  44
  45 /* User-Agent styles for new HTML5 elements */
  46 mark {
  47         background-color: #ff0;
  48         color: #000;
  49 }
  50
  51 /* Helper for wbr element on IE 8+; in HTML5, but not supported by default as of IE 11. */
  52 /* Note canonical HTML5 styles recommend "content: \u200B", but this doesn't work as of IE 11. */
  53 wbr {
  54         display: inline-block;
  55 }
  56
  57 /* Input types that should follow user direction, like buttons */
  58 /* TODO: What about buttons in wikipage content ? */
  59 input[type="submit"],
  60 input[type="button"],
  61 input[type="reset"],
  62 input[type="file"] {
  63         direction: ltr;
  64 }
  65
  66 /* Override default values */
  67 textarea[dir="ltr"],
  68 input[dir="ltr"] {
  69         /* @noflip */
  70         direction: ltr;
  71 }
  72
  73 textarea[dir="rtl"],
  74 input[dir="rtl"] {
  75         /* @noflip */
  76         direction: rtl;
  77 }
  78
  79 /* Default style for semantic tags */
  80 abbr[title],
  81 .explain[title] {
  82         border-bottom: 1px dotted;
  83         cursor: help;
  84 }
  85
  86 @supports (text-decoration: underline dotted) {
  87         abbr[title],
  88         .explain[title] {
  89                 border-bottom: none;
  90                 text-decoration: underline dotted;
  91         }
  92 }
  93
  94 /* Comment portions of RC entries */
  95 span.comment {
  96         font-style: italic;
  97         unicode-bidi: -moz-isolate;
  98         unicode-bidi: isolate;
  99 }
 100
 101 /* Stop floats from intruding into edit area in previews */
 102 #editform,
 103 #toolbar,
 104 #wpTextbox1 {
 105         clear: both;
 106 }
 107
 108 /**
 109  * rev_deleted stuff
 110  */
 111 li span.deleted,
 112 span.history-deleted {
 113         text-decoration: line-through;
 114         color: #888;
 115         font-style: italic;
 116 }
 117
 118 /**
 119  * Forms
 120  */
 121 td.mw-label {
 122         text-align: right;
 123 }
 124
 125 td.mw-input {
 126         text-align: left;
 127 }
 128
 129 td.mw-submit {
 130         text-align: left;
 131 }
 132
 133 td.mw-label {
 134         vertical-align: middle;
 135 }
 136
 137 td.mw-submit {
 138         white-space: nowrap;
 139 }
 140
 141 input#wpSummary {
 142         width: 80%;
 143         margin-bottom: 1em;
 144 }
 145
 146 .mw-input-with-label {
 147         white-space: nowrap;
 148 }
 149
 150 /**
 151  * Image captions.
 152  *
 153  * This is only meant to provide the most basic of styles, visual settings shouldn't be added here.
 154  */
 155
 156 /* @noflip */
 157 .mw-content-ltr .thumbcaption {
 158         text-align: left;
 159 }
 160
 161 /* @noflip */
 162 .mw-content-ltr .magnify {
 163         float: right;
 164 }
 165
 166 /* @noflip */
 167 .mw-content-rtl .thumbcaption {
 168         text-align: right;
 169 }
 170
 171 /* @noflip */
 172 .mw-content-rtl .magnify {
 173         float: left;
 174 }
 175
 176 /**
 177  * Categories
 178  */
 179 #catlinks {
 180         /**
 181          * Overrides text justification (user preference)
 182          * See bug 31990
 183          */
 184         text-align: left;
 185 }
 186
 187 .catlinks ul {
 188         display: inline;
 189         margin: 0;
 190         padding: 0;
 191         list-style: none;
 192         list-style-type: none;
 193         list-style-image: none;
 194         vertical-align: middle !ie;
 195 }
 196
 197 .catlinks li {
 198         display: inline-block;
 199         line-height: 1.25em;
 200         border-left: 1px solid #aaa;
 201         margin: 0.125em 0;
 202         padding: 0 0.5em;
 203         zoom: 1;
 204         display: inline !ie;
 205 }
 206
 207 .catlinks li:first-child {
 208         padding-left: 0.25em;
 209         border-left: none;
 210 }
 211
 212 /* (bug 5346) make category redirects italic */
 213 .catlinks li a.mw-redirect {
 214         font-style: italic;
 215 }
 216
 217 /**
 218  * Hidden categories
 219  */
 220 .mw-hidden-cats-hidden {
 221         display: none;
 222 }
 223
 224 .catlinks-allhidden {
 225         display: none;
 226 }
 227
 228 /**
 229  * Convenience links to edit delete and protect reasons
 230  */
 231 p.mw-protect-editreasons,
 232 p.mw-filedelete-editreasons,
 233 p.mw-delete-editreasons {
 234         font-size: 90%;
 235         text-align: right;
 236 }
 237
 238 /* The auto-generated edit comments */
 239 .autocomment {
 240         color: #808080;
 241 }
 242
 243 /** Generic minor/bot/newpage styling (recent changes) */
 244 .newpage,
 245 .minoredit,
 246 .botedit {
 247         font-weight: bold;
 248 }
 249
 250 /**
 251  * Recreating deleted page warning
 252  * Reupload file warning
 253  * Page protection warning
 254  * incl. log entries for these warnings
 255  */
 256 div.mw-warning-with-logexcerpt {
 257         padding: 3px;
 258         margin-bottom: 3px;
 259         border: 2px solid #2f6fab;
 260         clear: both;
 261 }
 262
 263 div.mw-warning-with-logexcerpt ul li {
 264         font-size: 90%;
 265 }
 266
 267 /* (show/hide) revision deletion links */
 268 span.mw-revdelundel-link,
 269 strong.mw-revdelundel-link {
 270         font-size: 90%;
 271 }
 272
 273 span.mw-revdelundel-hidden,
 274 input.mw-revdelundel-hidden {
 275         visibility: hidden;
 276 }
 277
 278 td.mw-revdel-checkbox,
 279 th.mw-revdel-checkbox {
 280         padding-right: 10px;
 281         text-align: center;
 282 }
 283
 284 /* red links; see bug 36276 */
 285 a.new {
 286         color: #ba0000;
 287 }
 288
 289 /* Plainlinks - this can be used to switch
 290  * off special external link styling */
 291 .plainlinks a.external {
 292         background: none !important;
 293         padding: 0 !important;
 294 }
 295
 296 /* External URLs should always be treated as LTR (bug 4330) */
 297 /* @noflip */ .rtl a.external.free,
 298 .rtl a.external.autonumber {
 299         direction: ltr;
 300         unicode-bidi: embed;
 301 }
 302
 303 /**
 304  * wikitable class for skinning normal tables
 305  * keep in sync with commonPrint.css
 306  */
 307 table.wikitable {
 308         margin: 1em 0;
 309         background-color: #f9f9f9;
 310         border: 1px solid #aaa;
 311         border-collapse: collapse;
 312         color: #000;
 313 }
 314
 315 table.wikitable > tr > th,
 316 table.wikitable > tr > td,
 317 table.wikitable > * > tr > th,
 318 table.wikitable > * > tr > td {
 319         border: 1px solid #aaa;
 320         padding: 0.2em 0.4em;
 321 }
 322
 323 table.wikitable > tr > th,
 324 table.wikitable > * > tr > th {
 325         background-color: #f2f2f2;
 326         text-align: center;
 327 }
 328
 329 table.wikitable > caption {
 330         font-weight: bold;
 331 }
 332
 333 /* success and error messages */
 334 .error,
 335 .warning,
 336 .success {
 337         font-size: larger;
 338 }
 339
 340 .error {
 341         color: #c00;
 342 }
 343
 344 .warning {
 345         color: #705000;
 346 }
 347
 348 .success {
 349         color: #009000;
 350 }
 351
 352 .errorbox,
 353 .warningbox,
 354 .successbox {
 355         border: 1px solid;
 356         padding: .5em 1em;
 357         margin-bottom: 1em;
 358         display: inline-block;
 359         zoom: 1;
 360         *display: inline;
 361 }
 362
 363 .errorbox h2,
 364 .warningbox h2,
 365 .successbox h2 {
 366         font-size: 1em;
 367         color: inherit;
 368         font-weight: bold;
 369         display: inline;
 370         margin: 0 .5em 0 0;
 371         border: none;
 372 }
 373
 374 .errorbox {
 375         color: #c00;
 376         border-color: #fac5c5;
 377         background-color: #fae3e3;
 378 }
 379
 380 .warningbox {
 381         color: #705000;
 382         border-color: #fde29b;
 383         background-color: #fdf1d1;
 384 }
 385
 386 .successbox {
 387         color: #008000;
 388         border-color: #b7fdb5;
 389         background-color: #e1fddf;
 390 }
 391
 392 /* general info/warning box for SP */
 393 .mw-infobox {
 394         border: 2px solid #ff7f00;
 395         margin: 0.5em;
 396         clear: left;
 397         overflow: hidden;
 398 }
 399
 400 .mw-infobox-left {
 401         margin: 7px;
 402         float: left;
 403         width: 35px;
 404 }
 405
 406 .mw-infobox-right {
 407         margin: 0.5em 0.5em 0.5em 49px;
 408 }
 409
 410 /* Note on preview page */
 411 .previewnote {
 412         color: #c00;
 413         margin-bottom: 1em;
 414 }
 415
 416 .previewnote p {
 417         text-indent: 3em;
 418         margin: 0.8em 0;
 419 }
 420
 421 .visualClear {
 422         clear: both;
 423 }
 424
 425 /**
 426  * Data table style
 427  *
 428  * Transparent table with suddle borders
 429  * and blue row-highlighting.
 430  */
 431 .mw-datatable {
 432         border-collapse: collapse;
 433 }
 434
 435 .mw-datatable,
 436 .mw-datatable td,
 437 .mw-datatable th {
 438         border: 1px solid #aaa;
 439         padding: 0 0.15em 0 0.15em;
 440 }
 441
 442 .mw-datatable th {
 443         background-color: #ddf;
 444 }
 445
 446 .mw-datatable td {
 447         background-color: #fff;
 448 }
 449
 450 .mw-datatable tr:hover td {
 451         background-color: #eef;
 452 }
 453
 454 /* Correct directionality when page dir is different from site/user dir */
 455 .mw-content-ltr ul,
 456 .mw-content-rtl .mw-content-ltr ul {
 457         /* @noflip */
 458         margin: 0.3em 0 0 1.6em;
 459         padding: 0;
 460 }
 461
 462 .mw-content-rtl ul,
 463 .mw-content-ltr .mw-content-rtl ul {
 464         /* @noflip */
 465         margin: 0.3em 1.6em 0 0;
 466         padding: 0;
 467 }
 468
 469 .mw-content-ltr ol,
 470 .mw-content-rtl .mw-content-ltr ol {
 471         /* @noflip */
 472         margin: 0.3em 0 0 3.2em;
 473         padding: 0;
 474 }
 475
 476 .mw-content-rtl ol,
 477 .mw-content-ltr .mw-content-rtl ol {
 478         /* @noflip */
 479         margin: 0.3em 3.2em 0 0;
 480         padding: 0;
 481 }
 482
 483 /* @noflip */
 484 .mw-content-ltr dd,
 485 .mw-content-rtl .mw-content-ltr dd {
 486         margin-left: 1.6em;
 487         margin-right: 0;
 488 }
 489
 490 /* @noflip */
 491 .mw-content-rtl dd,
 492 .mw-content-ltr .mw-content-rtl dd {
 493         margin-right: 1.6em;
 494         margin-left: 0;
 495 }
 496
 497 .mw-ajax-loader {
 498         background-image: url( images/ajax-loader.gif );
 499         background-position: center center;
 500         background-repeat: no-repeat;
 501         padding: 16px;
 502         position: relative;
 503         top: -16px;
 504 }
 505
 506 .mw-small-spinner {
 507         padding: 10px !important;
 508         margin-right: 0.6em;
 509         background-image: url( images/spinner.gif );
 510         background-position: center center;
 511         background-repeat: no-repeat;
 512 }
 513
 514 /* Language specific height correction for titles. Ref Bug 29405 and Bug 30809 */
 515 /* Languages like hi or ml require slightly more vertical space to show diacritics properly */
 516 h1:lang(anp),
 517 h1:lang(as),
 518 h1:lang(bh), /* Macrolanguage, used on bh.wikipedia.org, should be removed one day */
 519 h1:lang(bho),
 520 h1:lang(bn),
 521 h1:lang(gu),
 522 h1:lang(hi),
 523 h1:lang(kn),
 524 h1:lang(ks),
 525 h1:lang(ml),
 526 h1:lang(mr),
 527 h1:lang(my),
 528 h1:lang(mai),
 529 h1:lang(ne),
 530 h1:lang(new),
 531 h1:lang(or),
 532 h1:lang(pa),
 533 h1:lang(pi),
 534 h1:lang(sa),
 535 h1:lang(ta),
 536 h1:lang(te) {
 537         line-height: 1.6em !important;
 538 }
 539
 540 h2:lang(anp), h3:lang(anp), h4:lang(anp), h5:lang(anp), h6:lang(anp),
 541 h2:lang(as), h3:lang(as), h4:lang(as), h5:lang(as), h6:lang(as),
 542 h2:lang(bho), h3:lang(bho), h4:lang(bho), h5:lang(bho), h6:lang(bho),
 543 h2:lang(bh), h3:lang(bh), h4:lang(bh), h5:lang(bh), h6:lang(bh),
 544 h2:lang(bn), h3:lang(bn), h4:lang(bn), h5:lang(bn), h6:lang(bn),
 545 h2:lang(gu), h3:lang(gu), h4:lang(gu), h5:lang(gu), h6:lang(gu),
 546 h2:lang(hi), h3:lang(hi), h4:lang(hi), h5:lang(hi), h6:lang(hi),
 547 h2:lang(kn), h3:lang(kn), h4:lang(kn), h5:lang(kn), h6:lang(kn),
 548 h2:lang(ks), h3:lang(ks), h4:lang(ks), h5:lang(ks), h6:lang(ks),
 549 h2:lang(ml), h3:lang(ml), h4:lang(ml), h5:lang(ml), h6:lang(ml),
 550 h2:lang(mr), h3:lang(mr), h4:lang(mr), h5:lang(mr), h6:lang(mr),
 551 h2:lang(my), h3:lang(my), h4:lang(my), h5:lang(my), h6:lang(my),
 552 h2:lang(mai), h3:lang(mai), h4:lang(mai), h5:lang(mai), h6:lang(mai),
 553 h2:lang(ne), h3:lang(ne), h4:lang(ne), h5:lang(ne), h6:lang(ne),
 554 h2:lang(new), h3:lang(new), h4:lang(new), h5:lang(new), h6:lang(new),
 555 h2:lang(or), h3:lang(or), h4:lang(or), h5:lang(or), h6:lang(or),
 556 h2:lang(pa), h3:lang(pa), h4:lang(pa), h5:lang(pa), h6:lang(pa),
 557 h2:lang(pi), h3:lang(pi), h4:lang(pi), h5:lang(pi), h6:lang(pi),
 558 h2:lang(sa), h3:lang(sa), h4:lang(sa), h5:lang(sa), h6:lang(sa),
 559 h2:lang(ta), h3:lang(ta), h4:lang(ta), h5:lang(ta), h6:lang(ta),
 560 h2:lang(te), h3:lang(te), h4:lang(te), h5:lang(te), h6:lang(te) {
 561         line-height: 1.2em;
 562 }
 563
 564 /* Localised ordered list numbering for some languages */
 565 ol:lang(azb) li,
 566 ol:lang(bcc) li,
 567 ol:lang(bgn) li,
 568 ol:lang(bqi) li,
 569 ol:lang(fa) li,
 570 ol:lang(glk) li,
 571 ol:lang(kk-arab) li,
 572 ol:lang(lrc) li,
 573 ol:lang(luz) li,
 574 ol:lang(mzn) li {
 575         list-style-type: -moz-persian;
 576         list-style-type: persian;
 577 }
 578
 579 ol:lang(ckb) li,
 580 ol:lang(sdh) li {
 581         list-style-type: -moz-arabic-indic;
 582         list-style-type: arabic-indic;
 583 }
 584
 585 ol:lang(hi) li,
 586 ol:lang(mr) li {
 587         list-style-type: -moz-devanagari;
 588         list-style-type: devanagari;
 589 }
 590
 591 ol:lang(as) li,
 592 ol:lang(bn) li {
 593         list-style-type: -moz-bengali;
 594         list-style-type: bengali;
 595 }
 596
 597 ol:lang(or) li {
 598         list-style-type: -moz-oriya;
 599         list-style-type: oriya;
 600 }
 601
 602 #toc ul, .toc ul {
 603         margin: .3em 0;
 604 }
 605
 606 /* Correct directionality when page dir is different from site/user dir */
 607 /* @noflip */ .mw-content-ltr .toc ul,
 608 .mw-content-ltr #toc ul,
 609 .mw-content-rtl .mw-content-ltr .toc ul,
 610 .mw-content-rtl .mw-content-ltr #toc ul {
 611         text-align: left;
 612 }
 613
 614 /* @noflip */ .mw-content-rtl .toc ul,
 615 .mw-content-rtl #toc ul,
 616 .mw-content-ltr .mw-content-rtl .toc ul,
 617 .mw-content-ltr .mw-content-rtl #toc ul {
 618         text-align: right;
 619 }
 620
 621 /* @noflip */ .mw-content-ltr .toc ul ul,
 622 .mw-content-ltr #toc ul ul,
 623 .mw-content-rtl .mw-content-ltr .toc ul ul,
 624 .mw-content-rtl .mw-content-ltr #toc ul ul {
 625         margin: 0 0 0 2em;
 626 }
 627
 628 /* @noflip */ .mw-content-rtl .toc ul ul,
 629 .mw-content-rtl #toc ul ul,
 630 .mw-content-ltr .mw-content-rtl .toc ul ul,
 631 .mw-content-ltr .mw-content-rtl #toc ul ul {
 632         margin: 0 2em 0 0;
 633 }
 634
 635 #toc #toctitle,
 636 .toc #toctitle,
 637 #toc .toctitle,
 638 .toc .toctitle {
 639         direction: ltr;
 640 }
 641
 642 /* tooltip styles */
 643 .mw-help-field-hint {
 644         display: none;
 645         margin-left: 2px;
 646         margin-bottom: -8px;
 647         padding: 0 0 0 15px;
 648         background-image: url( images/help-question.gif );
 649         background-position: left center;
 650         background-repeat: no-repeat;
 651         cursor: pointer;
 652         font-size: .8em;
 653         text-decoration: underline;
 654         color: #0645ad;
 655 }
 656
 657 .mw-help-field-hint:hover {
 658         background-image: url( images/help-question-hover.gif );
 659 }
 660
 661 .mw-help-field-data {
 662         display: block;
 663         background-color: #d6f3ff;
 664         padding: 5px 8px 4px 8px;
 665         border: 1px solid #5dc9f4;
 666         margin-left: 20px;
 667 }
 668
 669 #mw-clearyourcache,
 670 #mw-sitecsspreview,
 671 #mw-sitejspreview,
 672 #mw-usercsspreview,
 673 #mw-userjspreview {
 674         direction: ltr;
 675         unicode-bidi: embed;
 676 }
 677
 678 #mw-revision-info,
 679 #mw-revision-info-current,
 680 #mw-revision-nav {
 681         direction: ltr;
 682 }
 683
 684 /* Images */
 685
 686 /* @noflip */ div.tright,
 687 div.floatright,
 688 table.floatright {
 689         clear: right;
 690         float: right;
 691 }
 692
 693 /* @noflip */ div.tleft,
 694 div.floatleft,
 695 table.floatleft {
 696         float: left;
 697         clear: left;
 698 }
 699
 700 div.floatright,
 701 table.floatright,
 702 div.floatleft,
 703 table.floatleft {
 704         position: relative;
 705 }
 706
 707 /* bug 12205 */
 708 #mw-credits a {
 709         unicode-bidi: embed;
 710 }
 711
 712 /* Accessibility */
 713 .mw-jump,
 714 #jump-to-nav {
 715         overflow: hidden;
 716         height: 0;
 717         zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */
 718 }
 719
 720 /* Print footer should be hidden by default in screen. */
 721 .printfooter {
 722         display: none;
 723 }
 724
 725 /* For developers */
 726 .xdebug-error {
 727         position: absolute;
 728         z-index: 99;
 729 }
 730
 731 .mw-editsection,
 732 #jump-to-nav {
 733         -moz-user-select: none;
 734         -webkit-user-select: none;
 735         -ms-user-select: none;
 736         user-select: none;
 737 }
 738
 739 /* Display editsection links smaller and next to headings */
 740 .mw-editsection,
 741 .mw-editsection-like {
 742         font-size: small;
 743         font-weight: normal;
 744         margin-left: 1em;
 745         vertical-align: baseline;
 746         /* Reset line-height; headings tend to have it set to larger values */
 747         line-height: 1em;
 748         /* As .mw-editsection is a <span> (inline element), it is treated as part */
 749         /* of the heading content when selecting text by multiple clicks and thus */
 750         /* selected together with heading content, despite the user-select: none; */
 751         /* rule set above. This enforces non-selection without changing the look. */
 752         display: inline-block;
 753 }
 754
 755 /* Correct directionality when page dir is different from site/user dir */
 756 /* @noflip */
 757 .mw-content-ltr .mw-editsection,
 758 .mw-content-rtl .mw-content-ltr .mw-editsection {
 759         margin-left: 1em;
 760 }
 761
 762 /* @noflip */
 763 .mw-content-rtl .mw-editsection,
 764 .mw-content-ltr .mw-content-rtl .mw-editsection {
 765         margin-right: 1em;
 766 }
 767
 768 /* Prevent citations and subscripts from interfering with the line-height */
 769 sup,
 770 sub {
 771         line-height: 1;
 772 }