From 4f5ceb2579bfe12a1891213f23377de02b59a5a5 Mon Sep 17 00:00:00 2001
From: Arlo Breault <abreault@wikimedia.org>
Date: Thu, 4 Aug 2022 14:12:51 -0400
Subject: [PATCH] Port changes to 'content-media' feature in core

From I7bcde25aa3b319ff93f3ef40361682824d171ea8

Change-Id: Id991ae80b96955ebdee4974c57184e0a749e76cb
---
 resources/content.media-common.less | 19 +++++++------------
 resources/content.media-print.less  | 18 +++++++++---------
 resources/content.media-screen.less | 18 +++++++++---------
 resources/screen-mobile.less        |  3 ++-
 4 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/resources/content.media-common.less b/resources/content.media-common.less
index d5a6b37..1efa46e 100644
--- a/resources/content.media-common.less
+++ b/resources/content.media-common.less
@@ -146,20 +146,16 @@ figure[ typeof~='mw:Audio/Frame' ] {
 		float: none;
 	}
 
-	> *:first-child {
-		> audio,
-		> img,
-		> video {
+	> a:first-child,
+	> span:first-child {
+		> *:first-child {
 			margin: 0.75em;
 			margin-bottom: 0.5em;
 		}
+
 		/**
 		 * Broken media get a span instead.
-		 *
-		 * FIXME: The `> span:first-child` can be removed when version 2.4.0
-		 * of the content is no longer supported
 		 */
-		> span:first-child,
 		> span.mw-broken-media {
 			display: inline-block;
 			margin: 0.75em;
@@ -215,10 +211,9 @@ figure[ typeof~='mw:Audio/Frame' ] {
 /**
  * Inline media items
  */
-*:first-child {
-	> audio,
-	> img,
-	> video {
+span:first-child,
+a:first-child {
+	> *:first-child {
 		.mw-valign-middle > & {
 			vertical-align: middle;
 		}
diff --git a/resources/content.media-print.less b/resources/content.media-print.less
index db10d55..e32addf 100644
--- a/resources/content.media-print.less
+++ b/resources/content.media-print.less
@@ -15,10 +15,9 @@ figure[ typeof~='mw:Audio/Frame' ] {
 	border-bottom: 0;  // No border to figcaption
 	background-color: @background-color-thumbinner-print;
 
-	> *:first-child {
-		> audio,
-		> img,
-		> video {
+	> a:first-child,
+	> span:first-child {
+		> *:first-child:not( .mw-broken-media ) {
 			border: @border-thumbimage-print;
 		}
 	}
@@ -32,10 +31,11 @@ figure[ typeof~='mw:Audio/Frame' ] {
 	}
 }
 
-.mw-image-border > *:first-child {
-	> audio,
-	> img,
-	> video {
-		border: @border-thumbborder-print;
+.mw-image-border {
+	> a:first-child,
+	> span:first-child {
+		> *:first-child:not( .mw-broken-media ) {
+			border: @border-thumbborder-print;
+		}
 	}
 }
diff --git a/resources/content.media-screen.less b/resources/content.media-screen.less
index ee0d0cb..f70f8b8 100644
--- a/resources/content.media-screen.less
+++ b/resources/content.media-screen.less
@@ -17,10 +17,9 @@ figure[ typeof~='mw:Audio/Frame' ] {
 	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );  // From .box
 	background-color: @background-color-thumbinner-screen;
 
-	> *:first-child {
-		> audio,
-		> img,
-		> video {
+	> a:first-child,
+	> span:first-child {
+		> *:first-child:not( .mw-broken-media ) {
 			border: @border-thumbimage-screen;
 		}
 	}
@@ -35,11 +34,12 @@ figure[ typeof~='mw:Audio/Frame' ] {
 	}
 }
 
-.mw-image-border > *:first-child {
-	> audio,
-	> img,
-	> video {
-		border: @border-thumbborder-screen;
+.mw-image-border {
+	> a:first-child,
+	> span:first-child {
+		> *:first-child:not( .mw-broken-media ) {
+			border: @border-thumbborder-screen;
+		}
 	}
 }
 
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
index b843e09..1160c00 100644
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@@ -232,7 +232,8 @@ figure[ typeof~='mw:Video/Frame' ],
 figure[ typeof~='mw:Audio/Frame' ] {
 	width: 100% !important;
 
-	> *:first-child {
+	> a:first-child,
+	> span:first-child {
 		> *:first-child {
 			margin: 1em 1.5em;
 		}