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