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