Merge "mediawiki.skinning: Add magnify links to Parsoid output"

[lhc/web/wiklou.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
index ec5b429..20668eb 100644 (file)
--- 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;
 }
@@ -46,7 +44,9 @@ sub {
 /**
  * Block media items
  */
-figure[typeof*='mw:Image'] {
+figure[typeof*='mw:Image'],
+figure[typeof*='mw:Video'],
+figure[typeof*='mw:Audio'] {
        margin: 0;
 
        a {
@@ -80,60 +80,99 @@ figure[typeof*='mw:Image'] {
        &.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;
        }
 }
 
 figure[typeof~='mw:Image/Thumb'],
-figure[typeof~='mw:Image/Frame'] {
+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;
-       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;
+
+       > *: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'] > *:first-child > img,
-figure[typeof~='mw:Image/Frame'] > *:first-child > img,
-.mw-image-border > *:first-child > img {
-       border: 1px solid #c8ccd1;
-       margin: 3px;
-       background: #fff;
+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:Image'] > figcaption {
-       display: none;
+/* Same as img.thumbborder in content.css */
+.mw-image-border > *:first-child {
+       > img,
+       > video {
+               border: 1px solid #eaecf0;
+       }
 }