2 * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
6 * Auto-numbered external links
7 * Parsoid renders those as link without content, and lets CSS do the
8 * counting. This way the counting style can be customized, and counts update
9 * automatically when content is modified.
12 counter-reset: mw-numbered-ext-link;
15 .mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
16 content: '[' counter( mw-numbered-ext-link ) ']';
17 counter-increment: mw-numbered-ext-link;
23 * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags.
26 * Cake is good<sup>[2]</sup>
27 * The cake is a lie<span class="reference">[1]</span>
34 vertical-align: super;
35 unicode-bidi: -moz-isolate;
36 unicode-bidi: isolate;
47 figure[ typeof*='mw:Image' ],
48 figure[ typeof*='mw:Video' ],
49 figure[ typeof*='mw:Audio' ] {
58 margin: 0.5em 0 1.3em 1.4em;
67 margin: 0.5em 1.4em 1.3em 0;
81 margin: 0 auto 0.5em auto;
83 border-collapse: collapse;
88 /* Hide the caption for frameless and plain floated images */
94 figure[ typeof~='mw:Image/Thumb' ],
95 figure[ typeof~='mw:Video/Thumb' ],
96 figure[ typeof~='mw:Audio/Thumb' ],
97 figure[ typeof~='mw:Image/Frame' ],
98 figure[ typeof~='mw:Video/Frame' ],
99 figure[ typeof~='mw:Audio/Frame' ] {
102 border: 1px solid #c8ccd1;
103 border-collapse: separate;
105 background-color: #f8f9fa;
106 width: 1px; // From https://stackoverflow.com/a/6536025
110 border-collapse: separate;
113 // Default to right alignment. This is needed since Parsoid only specifies the
114 // alignment class when the alignment is explicitly set.
115 margin: 0.5em 0 1.3em 1.4em;
122 border: 1px solid #c8ccd1;
130 /* In mw-core the font-size is duplicated, 94% in thumbiner
131 * and again 94% in thumbcaption. 88.4% for font size of the
132 * caption results in the same behavior. */
137 /* taken from .thumbcaption, plus .thumbinner */
142 figure[ typeof*='mw:Image/Thumb' ],
143 figure[ typeof*='mw:Video/Thumb' ],
144 figure[ typeof*='mw:Audio/Thumb' ] {
156 background-image: url( images/magnify-clip-ltr.png );
158 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
165 background-image: url( images/magnify-clip-rtl.png );
167 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
172 /* Same as img.thumbborder in content.css */
173 .mw-image-border > *:first-child {
176 border: 1px solid #eaecf0;
181 * Avoid the need to calculate paddings individually
182 * https://stackoverflow.com/a/7310398
184 .mw-gallery-traditional .gallerybox .thumb {
187 vertical-align: middle;
188 display: inline-block;
192 vertical-align: middle;
193 display: inline-block;
203 .mw-valign-middle > & {
204 vertical-align: middle;
206 .mw-valign-baseline > & {
207 vertical-align: baseline;
212 .mw-valign-super > & {
213 vertical-align: super;
218 .mw-valign-text-top > & {
219 vertical-align: text-top;
221 .mw-valign-bottom > & {
222 vertical-align: bottom;
224 .mw-valign-text-bottom > & {
225 vertical-align: text-bottom;