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

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index 0f8ae4582d..654b65550c 100644
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -2,21 +2,19 @@
  * 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 {
-	counter-reset: mw-NumberedExtLink;
+.mw-parser-output {
+	counter-reset: mw-numbered-ext-link;
 }
 
-.mw-body-content a[rel~="mw:ExtLink"]:empty:after {
-	content: "[" counter( mw-NumberedExtLink ) "]";
-	counter-increment: mw-NumberedExtLink;
+.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,149 @@ 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% for font size of the
-		 * caption results in the same behavior. */
-		font-size: 88%;
-		line-height: 1.4em;
-		text-align: left;
-
-		border: 1px solid #ccc;
-		border-top: 0;
-
-		/* taken from .thumbcaption, plus .thumbinner */
-		padding: 1px 5px 5px;
-		background-color: #f9f9f9;
-
-		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 #ccc;
-	border-bottom: 0; // No border to caption
-	border-collapse: collapse;
-	background-color: #f9f9f9;
+	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'] > *:first-child > img,
-figure[typeof~='mw:Image/Frame'] > *:first-child > img,
-.mw-image-border > *:first-child > img {
-	border: 1px solid #ccc;
-	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;
+	}
+}
+
+/**
+ * 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;
+		}
+	}
 }