Merge "build: Bump eslint devDependencies to latest"

[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 45188dc..a36ba6c 100644 (file)
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -44,9 +44,9 @@ sub {
 /**
  * Block media items
  */
-figure[typeof*='mw:Image'],
-figure[typeof*='mw:Video'],
-figure[typeof*='mw:Audio'] {
+figure[ typeof*='mw:Image' ],
+figure[ typeof*='mw:Video' ],
+figure[ typeof*='mw:Audio' ] {
        margin: 0;
 
        a {
@@ -91,12 +91,12 @@ figure[typeof*='mw:Audio'] {
        }
 }
 
-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'] {
+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;
@@ -139,6 +139,36 @@ figure[typeof~='mw:Audio/Frame'] {
        }
 }
 
+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,
@@ -146,3 +176,53 @@ figure[typeof~='mw:Audio/Frame'] {
                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;
+               }
+       }
+}