resources/src/mediawiki.skinning/content.css

   1 /**
   2  * MediaWiki style sheet for general styles on complex content
   3  *
   4  * Styles for complex things which are a standard part of page content
   5  * (ie: the CSS classing built into the system), like the TOC.
   6  */
   7
   8 /* stylelint-disable selector-class-pattern */
   9
  10 /* Table of Contents */
  11 .toc,
  12 .mw-warning,
  13 .toccolours {
  14         border: 1px solid #a2a9b1;
  15         background-color: #f8f9fa;
  16         padding: 5px;
  17         font-size: 95%;
  18 }
  19
  20 /**
  21  * We want to display the ToC element with intrinsic width in block mode. The fit-content
  22  * value for width is however not supported by large groups of browsers.
  23  *
  24  * We use display:table. Even though it should only contain other table-* display
  25  * elements, there are no known problems with using this.
  26  *
  27  * Because IE < 8 and other older browsers don't support display:table, we fallback to
  28  * using inline-block mode, which features at least intrinsic width, but won't clear preceding
  29  * inline elements. In practice inline elements surrounding the TOC are uncommon enough that
  30  * this is an acceptable sacrifice.
  31  */
  32 .toc {
  33         display: inline-block;
  34         display: table;
  35
  36         /* IE7 and earlier */
  37         zoom: 1;
  38         *display: inline; /* stylelint-disable declaration-block-no-duplicate-properties */
  39         padding: 7px;
  40 }
  41
  42 /* CSS for backwards-compatibility with cached page renders and creative uses in wikitext */
  43 table.toc {
  44         border-collapse: collapse;
  45 }
  46
  47 /* Remove additional paddings inside table-cells that are not present in <div>s */
  48 table.toc td {
  49         padding: 0;
  50 }
  51
  52 .toc h2 {
  53         display: inline;
  54         border: 0;
  55         padding: 0;
  56         font-size: 100%;
  57         font-weight: bold;
  58 }
  59
  60 .toc .toctitle {
  61         text-align: center;
  62 }
  63
  64 .toc ul {
  65         list-style-type: none;
  66         list-style-image: none;
  67         margin-left: 0;
  68         padding: 0;
  69         text-align: left;
  70 }
  71
  72 .toc ul ul {
  73         margin: 0 0 0 2em;
  74 }
  75
  76 /* Separate columns for tocnumber and toctext */
  77 /* Ignored by IE7 and lower */
  78 .tocnumber,
  79 .toctext {
  80         display: table-cell;
  81         /*
  82          * Text decorations are not propagated to the contents of inline blocks and inline tables,
  83          * according to <https://www.w3.org/TR/css-text-decor-3/#line-decoration>, and 'display: table-cell'
  84          * generates an inline table when used without any parent table-rows and tables.
  85          */
  86         text-decoration: inherit;
  87 }
  88
  89 /* Space between the columns for tocnumber and toctext */
  90 .tocnumber {
  91         padding-left: 0;
  92         padding-right: 0.5em;
  93         color: #222;
  94 }
  95 /* @noflip */
  96 .mw-content-ltr .tocnumber {
  97         padding-left: 0;
  98         padding-right: 0.5em;
  99 }
 100
 101 /* @noflip */
 102 .mw-content-rtl .tocnumber {
 103         padding-left: 0.5em;
 104         padding-right: 0;
 105 }
 106
 107 /* Warning */
 108 .mw-warning {
 109         margin-left: 50px;
 110         margin-right: 50px;
 111         text-align: center;
 112 }
 113
 114 /* Images */
 115 /* @noflip */
 116 div.floatright,
 117 table.floatright {
 118         margin: 0 0 0.5em 0.5em;
 119 }
 120
 121 /* @noflip */
 122 div.floatleft,
 123 table.floatleft {
 124         margin: 0 0.5em 0.5em 0;
 125 }
 126
 127 /* Thumbnails */
 128 div.thumb {
 129         margin-bottom: 0.5em;
 130         width: auto;
 131         background-color: transparent;
 132 }
 133
 134 div.thumbinner {
 135         border: 1px solid #c8ccd1;
 136         padding: 3px;
 137         background-color: #f8f9fa;
 138         font-size: 94%;
 139         text-align: center;
 140         /* new block formatting context,
 141          * to clear background from floating content */
 142         overflow: hidden;
 143 }
 144
 145 html .thumbimage {
 146         background-color: #fff;
 147         border: 1px solid #c8ccd1;
 148 }
 149
 150 html .thumbcaption {
 151         border: 0;
 152         line-height: 1.4em;
 153         padding: 3px;
 154         font-size: 94%;
 155         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 156         text-align: left;
 157 }
 158
 159 div.magnify {
 160         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 161         float: right;
 162         margin-left: 3px;
 163 }
 164
 165 div.magnify a {
 166         display: block;
 167         /* Hide the text… */
 168         text-indent: 15px;
 169         white-space: nowrap;
 170         overflow: hidden;
 171         /* …and replace it with the image */
 172         width: 15px;
 173         height: 11px;
 174         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 175
 176         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 177         background-image: url( images/magnify-clip-ltr.png );
 178         /* @embed */
 179         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
 180         /* Don't annoy people who copy-paste everything too much */
 181         -moz-user-select: none;
 182         -webkit-user-select: none;
 183         -ms-user-select: none;
 184         user-select: none;
 185 }
 186
 187 img.thumbborder {
 188         border: 1px solid #eaecf0;
 189 }
 190
 191 /* Directionality-specific styles for thumbnails - their positioning depends on content language */
 192
 193 /* @noflip */
 194 .mw-content-ltr .thumbcaption {
 195         text-align: left;
 196 }
 197
 198 /* @noflip */
 199 .mw-content-ltr .magnify {
 200         float: right;
 201         margin-left: 3px;
 202         margin-right: 0;
 203 }
 204
 205 /* @noflip */
 206 .mw-content-ltr div.magnify a {
 207         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 208         background-image: url( images/magnify-clip-ltr.png );
 209         /* @embed */
 210         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
 211 }
 212
 213 /* @noflip */
 214 .mw-content-rtl .thumbcaption {
 215         text-align: right;
 216 }
 217
 218 /* @noflip */
 219 .mw-content-rtl .magnify {
 220         float: left;
 221         margin-left: 0;
 222         margin-right: 3px;
 223 }
 224
 225 /* @noflip */
 226 .mw-content-rtl div.magnify a {
 227         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 228         background-image: url( images/magnify-clip-rtl.png );
 229         /* @embed */
 230         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
 231 }
 232
 233 /* @noflip */
 234 div.tright {
 235         margin: 0.5em 0 1.3em 1.4em;
 236 }
 237
 238 /* @noflip */
 239 div.tleft {
 240         margin: 0.5em 1.4em 1.3em 0;
 241 }
 242
 243 /* Hide elements that are marked as "empty" according to legacy Tidy rules,
 244  * except if a client script removes the mw-hide-empty-elt class from the body
 245  */
 246 body.mw-hide-empty-elt .mw-empty-elt {
 247         display: none;
 248 }