A number of minor edits to the media controls on OSX.
authorroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 11 Mar 2015 23:28:36 +0000 (23:28 +0000)
committerroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 11 Mar 2015 23:28:36 +0000 (23:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=142551.
<rdar://problem/20114707>
Reviewed by Darin Adler.
This covers a slew of minor edits to the new media controls. They are as follows.
Small vertical placements adjustments to inline control elements.
Make sure buttons have no focus outlines.
Expand height of mute box that triggers the volume panel appearing.
Turn all button colors into an slightly transparent white.
Center status display text in fullscreen mode.
Lower position of captions container in fullscreen mode.
Show the controls on when done loading of the video an status display is hidden.
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-panel):
(audio::-webkit-media-controls-panel button:focus):
(audio::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-play-button.paused):
(audio::-webkit-media-controls-panel .mute-box):
(video::-webkit-media-controls-volume-max-button):
(audio::-webkit-media-controls-panel .volume-box):
(video::-webkit-media-controls-volume-min-button):
(audio::-webkit-media-controls-wireless-playback-picker-button):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-closed-captions-container li.selected:hover::before):
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-fullscreen-button.exit):
(audio::-webkit-media-controls-status-display):
(audio::-webkit-media-controls-time-remaining-display):
(video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
(video:-webkit-full-screen::-webkit-media-controls-volume-max-button):
(video:-webkit-full-screen::-webkit-media-controls-volume-min-button):
(video:-webkit-full-screen::-webkit-media-controls-play-button):
(video:-webkit-full-screen::-webkit-media-controls-play-button.paused):
(video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
(video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
(video:-webkit-full-screen::-webkit-media-controls-status-display):
(video:-webkit-full-screen::-webkit-media-controls-closed-captions-container):
(audio::-webkit-media-controls-panel button:active): Deleted.
* Modules/mediacontrols/mediaControlsApple.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181413 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

index 24000d8..1dd9a4f 100644 (file)
@@ -1,3 +1,50 @@
+2015-03-11  Roger Fong  <roger_fong@apple.com>
+
+        A number of minor edits to the media controls on OSX.
+        https://bugs.webkit.org/show_bug.cgi?id=142551.
+        <rdar://problem/20114707>
+
+        Reviewed by Darin Adler.
+
+        This covers a slew of minor edits to the new media controls. They are as follows.
+        Small vertical placements adjustments to inline control elements.
+        Make sure buttons have no focus outlines.
+        Expand height of mute box that triggers the volume panel appearing.
+        Turn all button colors into an slightly transparent white.
+        Center status display text in fullscreen mode.
+        Lower position of captions container in fullscreen mode.
+        Show the controls on when done loading of the video an status display is hidden.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-controls-panel):
+        (audio::-webkit-media-controls-panel button:focus):
+        (audio::-webkit-media-controls-rewind-button):
+        (audio::-webkit-media-controls-play-button):
+        (audio::-webkit-media-controls-play-button.paused):
+        (audio::-webkit-media-controls-panel .mute-box):
+        (video::-webkit-media-controls-volume-max-button):
+        (audio::-webkit-media-controls-panel .volume-box):
+        (video::-webkit-media-controls-volume-min-button):
+        (audio::-webkit-media-controls-wireless-playback-picker-button):
+        (audio::-webkit-media-controls-toggle-closed-captions-button):
+        (audio::-webkit-media-controls-closed-captions-container li.selected:hover::before):
+        (audio::-webkit-media-controls-fullscreen-button):
+        (audio::-webkit-media-controls-fullscreen-button.exit):
+        (audio::-webkit-media-controls-status-display):
+        (audio::-webkit-media-controls-time-remaining-display):
+        (video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
+        (video:-webkit-full-screen::-webkit-media-controls-volume-max-button):
+        (video:-webkit-full-screen::-webkit-media-controls-volume-min-button):
+        (video:-webkit-full-screen::-webkit-media-controls-play-button):
+        (video:-webkit-full-screen::-webkit-media-controls-play-button.paused):
+        (video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
+        (video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
+        (video:-webkit-full-screen::-webkit-media-controls-status-display):
+        (video:-webkit-full-screen::-webkit-media-controls-closed-captions-container):
+        (audio::-webkit-media-controls-panel button:active): Deleted.
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.setStatusHidden):
+
 2015-03-11  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r179340 and r179344.
index e502bea..24efd20 100644 (file)
@@ -73,7 +73,6 @@ audio::-webkit-media-controls-panel {
     z-index: 0;
     bottom: 0;
     width: 100%;
-    padding-top: 1px;
     min-height: 25px;
     height: 25px;
     line-height: 25px;
@@ -118,14 +117,14 @@ audio::-webkit-media-controls-panel button {
     -webkit-filter: drop-shadow(black 0 1px 1px);
 }
 
-video::-webkit-media-controls-panel button:active,
-audio::-webkit-media-controls-panel button:active {
-    -webkit-filter: drop-shadow(white 0 0 10px);
+video::-webkit-media-controls-panel button:focus,
+audio::-webkit-media-controls-panel button:focus {
+    outline: 0;
 }
 
 video::-webkit-media-controls-rewind-button,
 audio::-webkit-media-controls-rewind-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493" fill="url(#gradient)"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.681 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.683,0.599" fill="url(#gradient)"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486" fill="url(#gradient)"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="rgba(255,255,255,0.68)"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.681 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.683,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
     width: 16px;
     height: 18px;
     margin-bottom: 1px;
@@ -134,21 +133,21 @@ audio::-webkit-media-controls-rewind-button {
 
 video::-webkit-media-controls-play-button,
 audio::-webkit-media-controls-play-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><rect x="0" y="0.5" width="4" height="13"/><rect x="8" y="0.5" width="4" height="13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.68)"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
     margin-left: 16px;
     width: 12px;
 }
 
 video::-webkit-media-controls-play-button.paused,
 audio::-webkit-media-controls-play-button.paused {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><path d="M 0,0 12,7 0,13 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.68)"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
     width: 12px;
 }
 
 video::-webkit-media-controls-panel .mute-box,
 audio::-webkit-media-controls-panel .mute-box {
     width: 14px;
-    height: 15px;
+    height: 25px;
     margin-right: 16px;
     position: relative;
     display: -webkit-flex;
@@ -161,7 +160,7 @@ video::-webkit-media-controls-mute-button,
 audio::-webkit-media-controls-mute-button,
 video::-webkit-media-controls-volume-max-button {
     width: 14px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/><path d="M 10,3 C 13,4 13,10 10,11" /><path d="M 11,1 C 15.67,3 15.67,11 11,13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
 }
 
 video::-webkit-media-controls-panel .volume-box,
@@ -172,8 +171,7 @@ audio::-webkit-media-controls-panel .volume-box {
     bottom: 0;
     left: 0;
 
-    -webkit-transform: rotate(-90deg) translateY(-4px) translateX(20px);
-    -webkit-transform-origin: 11px 11px;
+    -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
 
     background-color: rgba(0,0,0,0.8);
     border-bottom-right-radius: 4px;
@@ -227,12 +225,12 @@ audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
 video::-webkit-media-controls-mute-button.muted,
 audio::-webkit-media-controls-mute-button.muted,
 video::-webkit-media-controls-volume-min-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" ><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
 }
 
 video::-webkit-media-controls-wireless-playback-picker-button,
 audio::-webkit-media-controls-wireless-playback-picker-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0 L 16,0 L 16,15 L 0,15 z M 0,14 L 16,14 L 8,4.5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="1.5" width="15" height="8"/><path fill="white" d="M 4.25,12.75 L 11.75,12.75 L 8,8.25 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0 L 16,0 L 16,15 L 0,15 z M 0,14 L 16,14 L 8,4.5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="1.5" width="15" height="8"/><path fill="rgba(255,255,255,0.68)" d="M 4.25,12.75 L 11.75,12.75 L 8,8.25 z"/></svg>');
     margin-right: 16px;
     width: 16px;
 }
@@ -246,7 +244,7 @@ video::-webkit-media-controls-toggle-closed-captions-button,
 audio::-webkit-media-controls-toggle-closed-captions-button {
     width: 16px;
     margin-right: 16px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15"  stroke="white"><defs> <clipPath id="cut-hole"><rect x="0" y="0" width="16" height="10"/><rect x="0" y="10" width="9" height="1"/><rect x="11" y="10" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="0.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,5.5 h 4"/><path d="M 7,5.5 h 7"/><path d="M 3,7.5 h 2"/><path d="M 6,7.5 h 3"/><path d="M 10,7.5 h 3"/><path d="M 8.5,10.5 L 8.5,12.75 L 11,10"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
     outline: 0;
 }
 
@@ -337,19 +335,19 @@ audio::-webkit-media-controls-closed-captions-container li.selected::before {
 
 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.68)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
 }
 
 video::-webkit-media-controls-fullscreen-button,
 audio::-webkit-media-controls-fullscreen-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25"><path d="M 7,1 L 12.5,1 L 12.5,6.5"/><path d="M 0.5,7.5 L 0.5,13 L 6,13"/><path stroke-linecap="round" d="M 12.5,1 L 7.5,6"/><path stroke-linecap="round" d="M 0.5,13 L 5.5,8"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
     margin-right: 7px;
     width: 14px;
 }
 
 video::-webkit-media-controls-fullscreen-button.exit,
 audio::-webkit-media-controls-fullscreen-button.exit {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
     margin-right: 11px;
     margin-top: 6px;
 }
@@ -359,11 +357,13 @@ audio::-webkit-media-controls-optimized-fullscreen-button {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 7,8 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 8,7 m 0,-6 2,2 2,-2 c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>');
     margin: 0 7px;
 }
+
 video::-webkit-media-controls-status-display,
 audio::-webkit-media-controls-status-display {
     cursor: default;
     overflow: hidden;
     color: white;
+    opacity: .68;
     text-shadow: black 0px 1px 1px;
 
     letter-spacing: normal;
@@ -407,6 +407,7 @@ audio::-webkit-media-controls-time-remaining-display {
     overflow-y: hidden;
     overflow-x: hidden;
     color: white;
+    opacity: .68;
     text-shadow: black 0px 1px 1px;
     letter-spacing: normal;
     word-spacing: normal;
@@ -414,6 +415,8 @@ audio::-webkit-media-controls-time-remaining-display {
     text-transform: none;
     text-indent: 0px;
     text-decoration: none;
+    position: relative;
+    bottom: 0.5px;
 }
 
 video::-webkit-media-controls-current-time-display,
@@ -546,9 +549,9 @@ video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
     -webkit-transform: none;
     opacity: 1;
     left: 12px;
-    top: 16px;
+    top: 15px;
     width: 96px;
-    height: 15px;
+    height: 17px;
     display: -webkit-flex;
     -webkit-flex-direction: row;
     -webkit-align-items: center;
@@ -567,20 +570,22 @@ audio:-webkit-full-screen::-webkit-media-controls-mute-button,
 video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
     width: 14px !important;
     margin-left: 6px !important;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/><path d="M 10,3 C 13,4 13,10 10,11" /><path d="M 11,1 C 15.67,3 15.67,11 11,13"/></svg>');
+    margin-bottom: 2px !important;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
 }
 video:-webkit-full-screen::-webkit-media-controls-mute-button,
 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
 video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
-    width: 10px !important;
-    margin-right: 6px !important;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/></svg>');
+    width: 14px !important;
+    margin-right: 2px !important;
+    margin-bottom: 2px !important;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
 }
 
 video:-webkit-full-screen::-webkit-media-controls-play-button {
     position: absolute;
     
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.68)"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
 
     width: 21px;
     height: 23px;
@@ -591,13 +596,13 @@ video:-webkit-full-screen::-webkit-media-controls-play-button {
 }
 
 video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.68)"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
 }
 
 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
     position: absolute;
 
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.68)"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
 
     width: 24px;
     height: 15px;
@@ -617,7 +622,7 @@ video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
     position: absolute;
 
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.68)"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
 
     width: 24px;
     height: 15px;
@@ -642,11 +647,12 @@ video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
 }
 
 video:-webkit-full-screen::-webkit-media-controls-status-display {
-    width: 420px;
+    width: 440px;
     position: absolute;
     bottom: 7px;
-    left: 8px;
-    right: 8px;
+    text-align: center;
+    padding: 0;
+    left: 0;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
@@ -662,7 +668,7 @@ audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-butto
 }
 
 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
-    bottom: 114px;
+    bottom: 100px;
     right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
     max-width: calc(50% + 173px); /* right + 10px */
     max-height: calc(100% - 124px); /* bottom + 10px */
index 3d04e69..0348e44 100644 (file)
@@ -1312,11 +1312,13 @@ Controller.prototype = {
             this.controls.timeline.classList.remove(this.ClassNames.hidden);
             this.controls.remainingTime.classList.remove(this.ClassNames.hidden);
             this.setNeedsTimelineMetricsUpdate();
+            this.showControls();
         } else {
             this.controls.statusDisplay.classList.remove(this.ClassNames.hidden);
             this.controls.currentTime.classList.add(this.ClassNames.hidden);
             this.controls.timeline.classList.add(this.ClassNames.hidden);
             this.controls.remainingTime.classList.add(this.ClassNames.hidden);
+            this.hideControls();
         }
     },