From 0352ffb565a0e0115a7a3b8571219ee8e9b956c3 Mon Sep 17 00:00:00 2001
From: Lance Willett <nanobar@gmail.com>
Date: Fri, 22 Mar 2013 17:20:55 +0000
Subject: [PATCH] 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
---
 wp-content/themes/twentythirteen/rtl.css   | 15 ++++----
 wp-content/themes/twentythirteen/style.css | 41 ++++++++++++++++++----
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/wp-content/themes/twentythirteen/rtl.css b/wp-content/themes/twentythirteen/rtl.css
index 25f338df53..a9fd811a06 100644
--- a/wp-content/themes/twentythirteen/rtl.css
+++ b/wp-content/themes/twentythirteen/rtl.css
@@ -342,14 +342,13 @@ div.nav-menu > ul {
 }
 
 .format-audio .entry-content:before {
-	float: none;
-	content: normal;
-	font-size: inherit;
-}
-
-.format-audio .entry-content:after {
-	content: "\f109";
-	font-size: 64px;
+	-ms-filter: "FlipH";
+	filter: FlipH;
+	float: right;
+	-webkit-transform: scaleX(-1);
+	-moz-transform:    scaleX(-1);
+	-o-transform:      scaleX(-1);
+	transform:         scaleX(-1);
 }
 
 .format-audio .audio-content {
diff --git a/wp-content/themes/twentythirteen/style.css b/wp-content/themes/twentythirteen/style.css
index 03e426a340..2293bdb08a 100644
--- a/wp-content/themes/twentythirteen/style.css
+++ b/wp-content/themes/twentythirteen/style.css
@@ -1241,6 +1241,31 @@ footer.entry-meta {
 	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
@@ -1441,14 +1466,11 @@ footer.entry-meta {
 }
 
 .format-audio .entry-content:before {
-	float: left;
 	content: "\f109";
+	float: left;
 	font-size: 64px;
-}
-
-.format-audio .entry-content:before,
-.format-audio .entry-content:after {
-	display: inline-block;
+	position: relative;
+	top: 4px;
 }
 
 .format-audio .entry-content a,
@@ -1469,13 +1491,18 @@ footer.entry-meta {
 	background: url(images/dotted-line.png) repeat-y left top;
 	background-size: 4px 4px;
 	float: right;
-	margin: 0 0 24px;
 	padding-left: 35px;
 	width: 80%;
 	width: -webkit-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 {
 	max-width: 100% !important; /* Avoid player width overflow. */
 }