From b6ac65f07f40d70cf9a39ad354b99f5fd777ecc0 Mon Sep 17 00:00:00 2001
From: Scott Taylor <scott.c.taylor@mac.com>
Date: Sun, 30 Mar 2014 22:12:16 +0000
Subject: [PATCH] Using percentages for playlist font-sizing was ambitious, but
 fell prey to `editor-style.css` in the admin. We have switched to using
 pixels. The editor styles were also forcing MediaElement players to inherit
 `font-family`, which was undesirable. And while we're at it, remove the top
 and bottom border from the playlist's list of tracks, which adds a dash of
 lovely to the playlist's default styles.

Props nacin for the addition of `&mdash;` in the playlist track list.
Fixes #27600.


Built from https://develop.svn.wordpress.org/trunk@27865


git-svn-id: http://core.svn.wordpress.org/trunk@27696 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../js/mediaelement/wp-mediaelement.css       | 45 ++++++++++++-------
 wp-includes/media.php                         | 11 +++--
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/wp-includes/js/mediaelement/wp-mediaelement.css b/wp-includes/js/mediaelement/wp-mediaelement.css
index 31a2f2d79d..c67bdb4a7c 100644
--- a/wp-includes/js/mediaelement/wp-mediaelement.css
+++ b/wp-includes/js/mediaelement/wp-mediaelement.css
@@ -1,3 +1,7 @@
+.mejs-container * {
+	font-family: Helvetica, Arial;
+}
+
 .mejs-container, .mejs-embed, .mejs-embed body {
 	background: #000;
 }
@@ -59,8 +63,8 @@
 	border: 1px solid #ccc;
 	padding: 10px;
 	margin: 12px 0 18px;
-	font-size: 85%;
-	line-height: 160%;
+	font-size: 14px;
+	line-height: 1.5;
 }
 
 .wp-playlist video {
@@ -92,46 +96,47 @@
 }
 
 .wp-playlist-caption {
-	max-width: 85%;
+	max-width: 90%;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	font-size: 14px;
+	line-height: 1.5;
 }
 
-.wp-caption-meta {
+.wp-playlist-item-meta {
 	display: block;
+	font-size: 14px;
+	line-height: 1.5;
 }
 
-.wp-caption-title {
-	font-size: 100%;
+.wp-playlist-item-title {
+	font-size: 14px;
+	line-height: 1.5;
 }
 
-.wp-caption-album {
+.wp-playlist-item-album {
 	font-style: italic;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.wp-caption-artist {
-	font-size: 85%;
+.wp-playlist-item-artist {
+	font-size: 12px;
 	text-transform: uppercase;
 }
 
-.wp-caption-by {
-	font-size: 65%;
-	font-weight: bold;
-}
-
 .wp-playlist-item-length {
 	position: absolute;
 	right: 3px;
 	top: 0;
+	font-size: 14px;
+	line-height: 1.5;
 }
 
 .wp-playlist-tracks {
 	margin-top: 10px;
-	border-top: 1px solid #ccc;
 }
 
 .wp-playlist-item {
@@ -141,6 +146,10 @@
 	border-bottom: 1px solid #ccc;
 }
 
+.wp-playlist-item:last-child {
+	border-bottom: 0;
+}
+
 .wp-playlist-light .wp-playlist-item {
 	color: #333;
 }
@@ -175,10 +184,12 @@
 	max-width: 60px;
 	height: auto;
 	margin-right: 10px;
+	padding: 0;
+	border: 0;
 }
 
-.wp-playlist-current-item .wp-caption-title,
-.wp-playlist-current-item .wp-caption-artist {
+.wp-playlist-current-item .wp-playlist-item-title,
+.wp-playlist-current-item .wp-playlist-item-artist {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
diff --git a/wp-includes/media.php b/wp-includes/media.php
index 4b4fd956c8..47c64312ad 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1019,9 +1019,9 @@ function wp_underscore_playlist_templates() {
 	<img src="{{ data.thumb.src }}"/>
 	<# } #>
 	<div class="wp-playlist-caption">
-		<span class="wp-caption-meta wp-caption-title">&#8220;{{{ data.title }}}&#8221;</span>
-		<# if ( data.meta.album ) { #><span class="wp-caption-meta wp-caption-album">{{ data.meta.album }}</span><# } #>
-		<# if ( data.meta.artist ) { #><span class="wp-caption-meta wp-caption-artist">{{ data.meta.artist }}</span><# } #>
+		<span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
+		<# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
+		<# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
 	</div>
 </script>
 <script type="text/html" id="tmpl-wp-playlist-item">
@@ -1031,10 +1031,9 @@ function wp_underscore_playlist_templates() {
 			<# if ( data.caption ) { #>
 				{{{ data.caption }}}
 			<# } else { #>
-				<span class="wp-caption-title">&#8220;{{{ data.title }}}&#8221;</span>
+				<span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
 				<# if ( data.artists && data.meta.artist ) { #>
-				<span class="wp-caption-by"><?php _e( 'by' ) ?></span>
-				<span class="wp-caption-artist">{{ data.meta.artist }}</span>
+				<span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
 				<# } #>
 			<# } #>
 		</div>