diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.skinning/content.parsoid.less')
| -rw-r--r-- | www/wiki/resources/src/mediawiki.skinning/content.parsoid.less | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.skinning/content.parsoid.less b/www/wiki/resources/src/mediawiki.skinning/content.parsoid.less new file mode 100644 index 00000000..27ecb1a4 --- /dev/null +++ b/www/wiki/resources/src/mediawiki.skinning/content.parsoid.less @@ -0,0 +1,228 @@ +/** + * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser. + */ + +/* + * 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; +} + +/** + * References + * + * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags. + * + * Markup: + * Cake is good<sup>[2]</sup> + * The cake is a lie<span class="reference">[1]</span> + * + * Styleguide 1.1. + */ +span.reference { + font-size: 80%; + line-height: 1; + vertical-align: super; + unicode-bidi: -moz-isolate; + unicode-bidi: isolate; +} + +sup, +sub { + line-height: 1; +} + +/** + * 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.5em 0 1.3em 1.4em; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; + } + + &.mw-halign-left { + /* @noflip */ + margin: 0.5em 1.4em 1.3em 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; + + > *:first-child { + > img, + > video { + border: 1px solid #c8ccd1; + background: #fff; + } + } + + > figcaption { + display: block; + + /* 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; + } + } +} |