Changeset 27865

Timestamp:

03/30/2014 10:11:46 PM (13 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>
                                 <# } #>
                         <# } #>