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