MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / resources / src / mediawiki.skinning / content.parsoid.less

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
new file mode 100644 (file)
index 0000000..654b655
--- /dev/null
+++ b/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;
+               }
+       }
+}