X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.skinning%2Fcontent.parsoid.less;h=20668ebefb2498aba283321e8db115e49ed59d80;hp=b09986f278897875afa1cac55e09c7e10ce9f8c1;hb=fb4821adfc3ab95d9c5c0be1162139f99bfebf6c;hpb=55043101b2a89ea1e811b6d35e415f57ed0bf41d diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less index b09986f278..20668ebefb 100644 --- a/resources/src/mediawiki.skinning/content.parsoid.less +++ b/resources/src/mediawiki.skinning/content.parsoid.less @@ -2,19 +2,17 @@ * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser. */ -/*csslint regex-selectors:false */ - /* * 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-body-content { +.mw-parser-output { counter-reset: mw-numbered-ext-link; } -.mw-body-content a[rel~='mw:ExtLink']:empty:after { +.mw-parser-output a[rel~='mw:ExtLink']:empty:after { content: '[' counter( mw-numbered-ext-link ) ']'; counter-increment: mw-numbered-ext-link; } @@ -82,31 +80,14 @@ figure[typeof*='mw:Audio'] { &.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: table-caption; - caption-side: bottom; - /* 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; - - border: 1px solid #c8ccd1; - border-top: 0; - - /* taken from .thumbcaption, plus .thumbinner */ - padding: 0 6px 6px 6px; - background-color: #f8f9fa; - - table { - /* reset caption side for tables inside figcaptions */ - caption-side: top; - } + display: none; } } @@ -117,42 +98,81 @@ figure[typeof~='mw:Image/Frame'], figure[typeof~='mw:Video/Frame'], figure[typeof~='mw:Audio/Frame'] { display: table; - overflow: auto; text-align: center; border: 1px solid #c8ccd1; - border-bottom: 0; // No border to caption - border-collapse: collapse; + 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; -} -figure[typeof~='mw:Image/Thumb'] > *:first-child > img, -figure[typeof~='mw:Video/Thumb'] > *:first-child > video, -figure[typeof~='mw:Audio/Thumb'] > *:first-child > video, -figure[typeof~='mw:Image/Frame'] > *:first-child > img, -figure[typeof~='mw:Video/Frame'] > *:first-child > video, -figure[typeof~='mw:Audio/Frame'] > *:first-child > video { - border: 1px solid #c8ccd1; - margin: 3px; - background: #fff; + > *: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; + } } -/* Same as img.thumbborder in content.css */ -.mw-image-border > *:first-child > img, -.mw-image-border > *:first-child > video { - border: 1px solid #eaecf0; +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 ); + } + } } -/* Hide the caption for frameless and plain floated images */ -figure[typeof~='mw:Image/Frameless'] > figcaption, -figure[typeof~='mw:Video/Frameless'] > figcaption, -figure[typeof~='mw:Audio/Frameless'] > figcaption, -figure[typeof~='mw:Image'] > figcaption, -figure[typeof~='mw:Video'] > figcaption, -figure[typeof~='mw:Audio'] > figcaption { - display: none; +/* Same as img.thumbborder in content.css */ +.mw-image-border > *:first-child { + > img, + > video { + border: 1px solid #eaecf0; + } }