Changeset 23781

Timestamp:

03/22/2013 05:20:55 PM (12 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/wp-content/themes/twentythirteen

Files:

• rtl.css (modified) (1 diff)
• style.css (modified) (3 diffs)

trunk/wp-content/themes/twentythirteen/rtl.css

@@ -343 +343 @@
 
 .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);
 }
 

trunk/wp-content/themes/twentythirteen/style.css

@@ -1242 +1242 @@
 }
 
+/* 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;
+}
+
 
 /**
@@ -1442 +1467 @@
 
 .format-audio .entry-content:before {
+    content: "\f109";
     float: left;
-    content: "\f109";
     font-size: 64px;
-}
-
-.format-audio .entry-content:before,
-.format-audio .entry-content:after {
-    display: inline-block;
+    position: relative;
+    top: 4px;
 }
 
@@ -1470 +1492 @@
     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 */
 }