1/**
2 * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
3 */
4
5/* stylelint-disable selector-class-pattern */
6
7/*
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.
12 */
13.mw-parser-output {
14	counter-reset: mw-numbered-ext-link;
15}
16
17.mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
18	content: '[' counter( mw-numbered-ext-link ) ']';
19	counter-increment: mw-numbered-ext-link;
20}
21
22/**
23 * Block media items
24 */
25figure[ typeof*='mw:Image' ],
26figure[ typeof*='mw:Video' ],
27figure[ typeof*='mw:Audio' ] {
28	margin: 0;
29
30	a {
31		border: 0;
32	}
33
34	&.mw-halign-right {
35		/* @noflip */
36		margin: 0 0 0.5em 0.5em;
37		/* @noflip */
38		clear: right;
39		/* @noflip */
40		float: right;
41	}
42
43	&.mw-halign-left {
44		/* @noflip */
45		margin: 0 0.5em 0.5em 0;
46		/* @noflip */
47		clear: left;
48		/* @noflip */
49		float: left;
50	}
51
52	&.mw-halign-none {
53		margin: 0;
54		clear: none;
55		float: none;
56	}
57
58	&.mw-halign-center {
59		margin: 0 auto 0.5em auto;
60		display: table;
61		border-collapse: collapse;
62		clear: none;
63		float: none;
64	}
65
66	/* Hide the caption for frameless and plain floated images */
67	> figcaption {
68		display: none;
69	}
70}
71
72figure[ typeof~='mw:Image/Thumb' ],
73figure[ typeof~='mw:Video/Thumb' ],
74figure[ typeof~='mw:Audio/Thumb' ],
75figure[ typeof~='mw:Image/Frame' ],
76figure[ typeof~='mw:Video/Frame' ],
77figure[ typeof~='mw:Audio/Frame' ] {
78	display: table;
79	text-align: center;
80	border: 1px solid #c8ccd1;
81	border-collapse: separate;
82	border-spacing: 3px;
83	background-color: #f8f9fa;
84	width: 1px;  // From https://stackoverflow.com/a/6536025
85
86	// Avoid !important
87	&.mw-halign-center {
88		border-collapse: separate;
89	}
90
91	// Default to right alignment. This is needed since Parsoid only specifies the
92	// alignment class when the alignment is explicitly set.
93	margin: 0.5em 0 1.3em 1.4em;
94	clear: right;
95	float: right;
96
97	&.mw-halign-left {
98		/* @noflip */
99		margin: 0.5em 1.4em 1.3em 0;
100	}
101
102	&.mw-halign-right {
103		/* @noflip */
104		margin: 0.5em 0 1.3em 1.4em;
105	}
106
107	> *:first-child {
108		> img,
109		> video {
110			border: 1px solid #c8ccd1;
111			background: #fff;
112		}
113	}
114
115	> figcaption {
116		display: block;
117		word-break: break-word;
118
119		/* In mw-core the font-size is duplicated, 94% in thumbiner
120		 * and again 94% in thumbcaption. 88.4% for font size of the
121		 * caption results in the same behavior. */
122		font-size: 88.4%;
123		line-height: 1.4em;
124		text-align: left;
125
126		/* taken from .thumbcaption, plus .thumbinner */
127		padding: 3px;
128	}
129}
130
131figure[ typeof*='mw:Image/Thumb' ],
132figure[ typeof*='mw:Video/Thumb' ],
133figure[ typeof*='mw:Audio/Thumb' ] {
134	> a:after {
135		content: '';
136		width: 15px;
137		height: 11px;
138		margin: 3px;
139		margin-bottom: 0;
140
141		.mw-content-ltr & {
142			/* @noflip */
143			float: right;
144			/* @noflip */
145			background-image: url( images/magnify-clip-ltr.png );
146			/* @noflip */
147			background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
148		}
149
150		.mw-content-rtl & {
151			/* @noflip */
152			float: left;
153			/* @noflip */
154			background-image: url( images/magnify-clip-rtl.png );
155			/* @noflip */
156			background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
157		}
158	}
159}
160
161/* Same as img.thumbborder in content.css */
162.mw-image-border > *:first-child {
163	> img,
164	> video {
165		border: 1px solid #eaecf0;
166	}
167}
168
169/**
170 * Avoid the need to calculate paddings individually
171 * https://stackoverflow.com/a/7310398
172 */
173.mw-gallery-traditional .gallerybox .thumb {
174	&:before {
175		content: '';
176		vertical-align: middle;
177		display: inline-block;
178		height: 100%;
179	}
180
181	> * {
182		vertical-align: middle;
183		display: inline-block;
184	}
185}
186
187/**
188 * Inline media items
189 */
190*:first-child {
191	> img,
192	> video {
193		.mw-valign-middle > & {
194			vertical-align: middle;
195		}
196
197		.mw-valign-baseline > & {
198			vertical-align: baseline;
199		}
200
201		.mw-valign-sub > & {
202			vertical-align: sub;
203		}
204
205		.mw-valign-super > & {
206			vertical-align: super;
207		}
208
209		.mw-valign-top > & {
210			vertical-align: top;
211		}
212
213		.mw-valign-text-top > & {
214			vertical-align: text-top;
215		}
216
217		.mw-valign-bottom > & {
218			vertical-align: bottom;
219		}
220
221		.mw-valign-text-bottom > & {
222			vertical-align: text-bottom;
223		}
224	}
225}
226