/**
* Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
*/
/* stylelint-disable selector-class-pattern */
/*
* Auto-numbered external links
* Parsoid renders those as link without content, and lets CSS do the
* counting. This way the counting style can be customized, and counts update
* automatically when content is modified.
*/
.mw-parser-output {
counter-reset: mw-numbered-ext-link;
}
.mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
content: '[' counter( mw-numbered-ext-link ) ']';
counter-increment: mw-numbered-ext-link;
}
/**
* Block media items
*/
figure[ typeof*='mw:Image' ],
figure[ typeof*='mw:Video' ],
figure[ typeof*='mw:Audio' ] {
margin: 0;
a {
border: 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0 0 0.5em 0.5em;
/* @noflip */
clear: right;
/* @noflip */
float: right;
}
&.mw-halign-left {
/* @noflip */
margin: 0 0.5em 0.5em 0;
/* @noflip */
clear: left;
/* @noflip */
float: left;
}
&.mw-halign-none {
margin: 0;
clear: none;
float: none;
}
&.mw-halign-center {
margin: 0 auto 0.5em auto;
display: table;
border-collapse: collapse;
clear: none;
float: none;
}
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
}
}
figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ],
figure[ typeof~='mw:Image/Frame' ],
figure[ typeof~='mw:Video/Frame' ],
figure[ typeof~='mw:Audio/Frame' ] {
display: table;
text-align: center;
border: 1px solid #c8ccd1;
border-collapse: separate;
border-spacing: 3px;
background-color: #f8f9fa;
width: 1px; // From https://stackoverflow.com/a/6536025
// Avoid !important
&.mw-halign-center {
border-collapse: separate;
}
// Default to right alignment. This is needed since Parsoid only specifies the
// alignment class when the alignment is explicitly set.
margin: 0.5em 0 1.3em 1.4em;
clear: right;
float: right;
&.mw-halign-left {
/* @noflip */
margin: 0.5em 1.4em 1.3em 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0.5em 0 1.3em 1.4em;
}
> *:first-child {
> img,
> video {
border: 1px solid #c8ccd1;
background: #fff;
}
}
> figcaption {
display: block;
word-break: break-word;
/* In mw-core the font-size is duplicated, 94% in thumbiner
* and again 94% in thumbcaption. 88.4% for font size of the
* caption results in the same behavior. */
font-size: 88.4%;
line-height: 1.4em;
text-align: left;
/* taken from .thumbcaption, plus .thumbinner */
padding: 3px;
}
}
figure[ typeof*='mw:Image/Thumb' ],
figure[ typeof*='mw:Video/Thumb' ],
figure[ typeof*='mw:Audio/Thumb' ] {
> a:after {
content: '';
width: 15px;
height: 11px;
margin: 3px;
margin-bottom: 0;
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
background-image: url( images/magnify-clip-ltr.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
}
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
background-image: url( images/magnify-clip-rtl.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
}
}
}
/* Same as img.thumbborder in content.css */
.mw-image-border > *:first-child {
> img,
> video {
border: 1px solid #eaecf0;
}
}
/**
* Avoid the need to calculate paddings individually
* https://stackoverflow.com/a/7310398
*/
.mw-gallery-traditional .gallerybox .thumb {
&:before {
content: '';
vertical-align: middle;
display: inline-block;
height: 100%;
}
> * {
vertical-align: middle;
display: inline-block;
}
}
/**
* Inline media items
*/
*:first-child {
> img,
> video {
.mw-valign-middle > & {
vertical-align: middle;
}
.mw-valign-baseline > & {
vertical-align: baseline;
}
.mw-valign-sub > & {
vertical-align: sub;
}
.mw-valign-super > & {
vertical-align: super;
}
.mw-valign-top > & {
vertical-align: top;
}
.mw-valign-text-top > & {
vertical-align: text-top;
}
.mw-valign-bottom > & {
vertical-align: bottom;
}
.mw-valign-text-bottom > & {
vertical-align: text-bottom;
}
}
}