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 #aaa;
  14         background-color: #f9f9f9;
  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;
  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: none;
  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 #toc .toctoggle,
  86 .toc .toctoggle {
  87         font-size: 94%;
  88 }
  89
  90 /* Separate columns for tocnumber and toctext */
  91 /* Ignored by IE7 and lower */
  92 .tocnumber,
  93 .toctext {
  94         display: table-cell;
  95 }
  96
  97 /* Space between the columns for tocnumber and toctext */
  98 /* Ignored by IE7 and lower */
  99 .tocnumber:after {
 100         content: "";
 101         display: inline-block;
 102         width: 0.5em;
 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 */div.floatright, table.floatright {
 114         margin: 0 0 .5em .5em;
 115         border: 0;
 116 }
 117
 118 div.floatright p {
 119         font-style: italic;
 120 }
 121
 122 /* @noflip */div.floatleft, table.floatleft {
 123         margin: 0 .5em .5em 0;
 124         border: 0;
 125 }
 126
 127 div.floatleft p {
 128         font-style: italic;
 129 }
 130
 131 /* Thumbnails */
 132 div.thumb {
 133         margin-bottom: .5em;
 134         width: auto;
 135         background-color: transparent;
 136 }
 137
 138 div.thumbinner {
 139         border: 1px solid #ccc;
 140         padding: 3px;
 141         background-color: #f9f9f9;
 142         font-size: 94%;
 143         text-align: center;
 144         overflow: hidden;
 145 }
 146
 147 html .thumbimage {
 148         border: 1px solid #ccc;
 149 }
 150
 151 html .thumbcaption {
 152         border: none;
 153         line-height: 1.4em;
 154         padding: 3px;
 155         font-size: 94%;
 156         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 157         text-align: left;
 158 }
 159
 160 div.magnify {
 161         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 162         float: right;
 163         margin-left: 3px;
 164 }
 165
 166 div.magnify a {
 167         display: block;
 168         /* Hide the text… */
 169         text-indent: 15px;
 170         white-space: nowrap;
 171         overflow: hidden;
 172         /* …and replace it with the image */
 173         width: 15px;
 174         height: 11px;
 175         /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 176
 177         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 178         background-image: url(images/magnify-clip-ltr.png);
 179         /* @embed */
 180         background-image: -webkit-linear-gradient(transparent, transparent), url(images/magnify-clip-ltr.svg);
 181         /* @embed */
 182         background-image: linear-gradient(transparent, transparent), url(images/magnify-clip-ltr.svg);
 183         /* Don't annoy people who copy-paste everything too much */
 184         -moz-user-select: none;
 185         -webkit-user-select: none;
 186         -ms-user-select: none;
 187         user-select: none;
 188 }
 189
 190 img.thumbborder {
 191         border: 1px solid #dddddd;
 192 }
 193
 194 /* Directionality-specific styles for thumbnails - their positioning depends on content language */
 195
 196 /* @noflip */
 197 .mw-content-ltr .thumbcaption {
 198         text-align: left;
 199 }
 200
 201 /* @noflip */
 202 .mw-content-ltr .magnify {
 203         float: right;
 204         margin-left: 3px;
 205         margin-right: 0;
 206 }
 207
 208 /* @noflip */
 209 .mw-content-ltr div.magnify a {
 210         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 211         background-image: url(images/magnify-clip-ltr.png);
 212         /* @embed */
 213         background-image: -webkit-linear-gradient(transparent, transparent), url(images/magnify-clip-ltr.svg);
 214         /* @embed */
 215         background-image: linear-gradient(transparent, transparent), url(images/magnify-clip-ltr.svg);
 216 }
 217
 218 /* @noflip */
 219 .mw-content-rtl .thumbcaption {
 220         text-align: right;
 221 }
 222
 223 /* @noflip */
 224 .mw-content-rtl .magnify {
 225         float: left;
 226         margin-left: 0;
 227         margin-right: 3px;
 228 }
 229
 230 /* @noflip */
 231 .mw-content-rtl div.magnify a {
 232         /* Use same SVG support hack as mediawiki.legacy's shared.css */
 233         background-image: url(images/magnify-clip-rtl.png);
 234         /* @embed */
 235         background-image: -webkit-linear-gradient(transparent, transparent), url(images/magnify-clip-rtl.svg);
 236         /* @embed */
 237         background-image: linear-gradient(transparent, transparent), url(images/magnify-clip-rtl.svg);
 238 }
 239
 240 /* @noflip */
 241 div.tright {
 242         margin: .5em 0 1.3em 1.4em;
 243 }
 244
 245 /* @noflip */
 246 div.tleft {
 247         margin: .5em 1.4em 1.3em 0;
 248 }