X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.skinning%2Fcontent.parsoid.less;h=654b65550c4038471d2070b567125bcf8ca649bb;hb=802c199d0bd80ff0f4d730c61fd58cbf08a52d8d;hp=ddf9b055f5cb1b9cb583eba9185b6d824c64f71a;hpb=79ef473a2f558438c6846d046afe2e31db042722;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index ddf9b055f5..654b65550c 100644
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -80,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;
 	}
 }
 
@@ -115,12 +98,18 @@ 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;
@@ -131,10 +120,53 @@ figure[typeof~='mw:Audio/Frame'] {
 		> img,
 		> video {
 			border: 1px solid #c8ccd1;
-			margin: 3px;
 			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 */
@@ -145,14 +177,52 @@ figure[typeof~='mw:Audio/Frame'] {
 	}
 }
 
-/* Hide the caption for frameless and plain floated images */
-figure[typeof~='mw:Image/Frameless'],
-figure[typeof~='mw:Video/Frameless'],
-figure[typeof~='mw:Audio/Frameless'],
-figure[typeof~='mw:Image'],
-figure[typeof~='mw:Video'],
-figure[typeof~='mw:Audio'] {
-	> figcaption {
-		display: none;
+/**
+ * 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;
+		}
 	}
 }