Twenty Thirteen: style up the new `mediaelement` audio and video players. Props obenland, fixes #23821.

git-svn-id: http://core.svn.wordpress.org/trunk@23781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-03-22 17:20:55 +00:00
parent 9f005d14fb
commit 0352ffb565
2 changed files with 41 additions and 15 deletions

View File

@ -342,14 +342,13 @@ div.nav-menu > ul {
} }
.format-audio .entry-content:before { .format-audio .entry-content:before {
float: none; -ms-filter: "FlipH";
content: normal; filter: FlipH;
font-size: inherit; float: right;
} -webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
.format-audio .entry-content:after { -o-transform: scaleX(-1);
content: "\f109"; transform: scaleX(-1);
font-size: 64px;
} }
.format-audio .audio-content { .format-audio .audio-content {

View File

@ -1241,6 +1241,31 @@ footer.entry-meta {
padding: 0; padding: 0;
} }
/* Mediaelements */
.entry-content .mejs-container .mejs-controls {
background: #220e10;
}
.entry-content .mejs-controls .mejs-time-rail .mejs-time-loaded,
.entry-content .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.entry-content .mejs-controls .mejs-time-rail .mejs-time-current {
background: #ea9629;
}
.entry-content .mejs-controls .mejs-time-rail .mejs-time-total,
.entry-content .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: #595959;
}
.entry-content .mejs-controls .mejs-time-rail span,
.entry-content .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.entry-content .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
/** /**
* 5.4 Galleries * 5.4 Galleries
@ -1441,14 +1466,11 @@ footer.entry-meta {
} }
.format-audio .entry-content:before { .format-audio .entry-content:before {
float: left;
content: "\f109"; content: "\f109";
float: left;
font-size: 64px; font-size: 64px;
} position: relative;
top: 4px;
.format-audio .entry-content:before,
.format-audio .entry-content:after {
display: inline-block;
} }
.format-audio .entry-content a, .format-audio .entry-content a,
@ -1469,13 +1491,18 @@ footer.entry-meta {
background: url(images/dotted-line.png) repeat-y left top; background: url(images/dotted-line.png) repeat-y left top;
background-size: 4px 4px; background-size: 4px 4px;
float: right; float: right;
margin: 0 0 24px;
padding-left: 35px; padding-left: 35px;
width: 80%; width: 80%;
width: -webkit-calc(100% - 115px); width: -webkit-calc(100% - 115px);
width: calc(100% - 115px); width: calc(100% - 115px);
} }
.format-audio .wp-audio-shortcode {
height: 30px !important; /* Override mediaelement.js style */
margin: 20px 0;
max-width: 400px !important; /* Override mediaelement.js style */
}
.format-audio audio { .format-audio audio {
max-width: 100% !important; /* Avoid player width overflow. */ max-width: 100% !important; /* Avoid player width overflow. */
} }