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