Port changes to 'content-media' feature in core

From I7bcde25aa3b319ff93f3ef40361682824d171ea8

Change-Id: Id991ae80b96955ebdee4974c57184e0a749e76cb

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;
 		}

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;
+		}
 	}
 }

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;
+		}
 	}
 }
 

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;
 		}