sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@27865 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-03-30 22:11:46 +00:00
parent 877ffc087f
commit 35306513dc
2 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/wp-includes/js/mediaelement/wp-mediaelement.css
View File

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

11
src/wp-includes/media.php
View File

@ -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>