Changeset 27865

Timestamp:

03/30/2014 10:11:46 PM (12 years ago)

Author:

wonderboymusic

Message:

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 — in the playlist track list.
Fixes #27600.

Location:

trunk/src/wp-includes

Files:

• js/mediaelement/wp-mediaelement.css (modified) (7 diffs)
• media.php (modified) (2 diffs)

trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

@@ +1 @@
+.mejs-container * {
+    font-family: Helvetica, Arial;
+}
+
 .mejs-container, .mejs-embed, .mejs-embed body {
     background: #000;
@@ -60 +64 @@
     padding: 10px;
     margin: 12px 0 18px;
-    font-size: 85%;
-    line-height: 160%;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
@@ -93 +97 @@
 
 .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;
@@ -114 +123 @@
 }
 
-.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;
 }
 
@@ -128 +132 @@
     right: 3px;
     top: 0;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
 .wp-playlist-tracks {
     margin-top: 10px;
-    border-top: 1px solid #ccc;
 }
 
@@ -140 +145 @@
     padding: 0 3px;
     border-bottom: 1px solid #ccc;
+}
+
+.wp-playlist-item:last-child {
+    border-bottom: 0;
 }
 
@@ -176 +185 @@
     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;

trunk/src/wp-includes/media.php

@@ -1020 +1020 @@
     <# } #>
     <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>
@@ -1032 +1032 @@
                 {{{ 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>
                 <# } #>
             <# } #>