2 * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
5 /* stylelint-disable selector-class-pattern */
8 * Auto-numbered external links
9 * Parsoid renders those as link without content, and lets CSS do the
10 * counting. This way the counting style can be customized, and counts update
11 * automatically when content is modified.
14 counter-reset: mw-numbered-ext-link;
17 .mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
18 content: '[' counter( mw-numbered-ext-link ) ']';
19 counter-increment: mw-numbered-ext-link;
25 * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags.
28 * Cake is good<sup>[2]</sup>
29 * The cake is a lie<span class="reference">[1]</span>
36 vertical-align: super;
37 unicode-bidi: -moz-isolate;
38 unicode-bidi: isolate;
49 figure[ typeof*='mw:Image' ],
50 figure[ typeof*='mw:Video' ],
51 figure[ typeof*='mw:Audio' ] {
60 margin: 0 0 0.5em 0.5em;
69 margin: 0 0.5em 0.5em 0;
83 margin: 0 auto 0.5em auto;
85 border-collapse: collapse;
90 /* Hide the caption for frameless and plain floated images */
96 figure[ typeof~='mw:Image/Thumb' ],
97 figure[ typeof~='mw:Video/Thumb' ],
98 figure[ typeof~='mw:Audio/Thumb' ],
99 figure[ typeof~='mw:Image/Frame' ],
100 figure[ typeof~='mw:Video/Frame' ],
101 figure[ typeof~='mw:Audio/Frame' ] {
104 border: 1px solid #c8ccd1;
105 border-collapse: separate;
107 background-color: #f8f9fa;
108 width: 1px; // From https://stackoverflow.com/a/6536025
112 border-collapse: separate;
115 // Default to right alignment. This is needed since Parsoid only specifies the
116 // alignment class when the alignment is explicitly set.
117 margin: 0.5em 0 1.3em 1.4em;
123 margin: 0.5em 1.4em 1.3em 0;
128 margin: 0.5em 0 1.3em 1.4em;
134 border: 1px solid #c8ccd1;
141 word-break: break-word;
143 /* In mw-core the font-size is duplicated, 94% in thumbiner
144 * and again 94% in thumbcaption. 88.4% for font size of the
145 * caption results in the same behavior. */
150 /* taken from .thumbcaption, plus .thumbinner */
155 figure[ typeof*='mw:Image/Thumb' ],
156 figure[ typeof*='mw:Video/Thumb' ],
157 figure[ typeof*='mw:Audio/Thumb' ] {
169 background-image: url( images/magnify-clip-ltr.png );
171 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
178 background-image: url( images/magnify-clip-rtl.png );
180 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
185 /* Same as img.thumbborder in content.css */
186 .mw-image-border > *:first-child {
189 border: 1px solid #eaecf0;
194 * Avoid the need to calculate paddings individually
195 * https://stackoverflow.com/a/7310398
197 .mw-gallery-traditional .gallerybox .thumb {
200 vertical-align: middle;
201 display: inline-block;
206 vertical-align: middle;
207 display: inline-block;
217 .mw-valign-middle > & {
218 vertical-align: middle;
221 .mw-valign-baseline > & {
222 vertical-align: baseline;
229 .mw-valign-super > & {
230 vertical-align: super;
237 .mw-valign-text-top > & {
238 vertical-align: text-top;
241 .mw-valign-bottom > & {
242 vertical-align: bottom;
245 .mw-valign-text-bottom > & {
246 vertical-align: text-bottom;