<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[169636] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/169636">169636</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2014-06-05 22:11:02 -0700 (Thu, 05 Jun 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Source/WebCore: Current media controls look different from previous media controls. Adjusted CSS to make media elements more similar by adding padding, adjusting hues/svg, resizing elements, etc.
https://bugs.webkit.org/show_bug.cgi?id=133521
Patch by Wenson Hsieh <wenson_hsieh@apple.com> on 2014-06-05
Reviewed by Eric Carlson.
The main issues:
- The widths between elements of both audio and video players are incorrect.
- The hues of audio player elements are incorrect.
- The hues of video player elements are content dependent (refer to full-screen mode), and this cannot be exactly replicated using just css. This patch only attempts to make them more similar.
- The height of the audio player is incorrect.
Test: platform/ios-sim/media/audio-width.html
* Modules/mediacontrols/mediaControlsiOS.css: Updated style elements for audio/video elements.
(::-webkit-media-controls): Enforce a minimum width on audio/video controls.
(audio): Enforce a minimum width on audio elements.
(audio::-webkit-media-controls): see below
(audio::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue and width/height.
(audio::-webkit-media-controls-panel): adjusted hue, added left/right padding.
(audio::-webkit-media-controls-fullscreen-button): removed. There's no fullscreen for audio anyways.
(audio::-webkit-media-controls-current-time-display): adjusted font size, added left padding.
(audio::-webkit-media-controls-time-remaining-display): adjusted font size, added right padding.
(video::-webkit-media-controls-panel): adjusted hue, added left/right padding.
(video::-webkit-media-controls-current-time-display): added left padding.
(video::-webkit-media-controls-time-remaining-display): added right padding.
(video::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue, opacity and width/height.
(video::-webkit-media-controls-fullscreen-button): modified SVG, hue, opacity, and width/height. In particular, made the svg seem sharper.
(video::-webkit-media-controls-play-button): modified SVG, hue, opacity, and width/height.
LayoutTests: REGRESSION (Pluginless): Media controls look different from iOS7 media controls.
https://bugs.webkit.org/show_bug.cgi?id=133521
Patch by Wenson Hsieh <wenson_hsieh@apple.com> on 2014-06-05
Reviewed by Eric Carlson.
Tests that audio elements are properly sized. Will add tests for video players in the (near) future.
* platform/ios-sim/media/audio-width-expected.txt: Checks that audio width tests were OK'd
* platform/ios-sim/media/audio-width.html: Checks that minimum audio width is properly enforced</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsplatformiossimmediaaudiowidthexpectedtxt">trunk/LayoutTests/platform/ios-sim/media/audio-width-expected.txt</a></li>
<li><a href="#trunkLayoutTestsplatformiossimmediaaudiowidthhtml">trunk/LayoutTests/platform/ios-sim/media/audio-width.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (169635 => 169636)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-06-06 02:22:26 UTC (rev 169635)
+++ trunk/LayoutTests/ChangeLog 2014-06-06 05:11:02 UTC (rev 169636)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-06-05 Wenson Hsieh <wenson_hsieh@apple.com>
+
+ REGRESSION (Pluginless): Media controls look different from iOS7 media controls.
+ https://bugs.webkit.org/show_bug.cgi?id=133521
+
+ Reviewed by Eric Carlson.
+
+ Tests that audio elements are properly sized. Will add tests for video players in the (near) future.
+
+ * platform/ios-sim/media/audio-width-expected.txt: Checks that audio width tests were OK'd
+ * platform/ios-sim/media/audio-width.html: Checks that minimum audio width is properly enforced
+
</ins><span class="cx"> 2014-06-05 Michael Timbrook <timbrook@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: Add support for ARIA 1.1 'none' role
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiossimmediaaudiowidthexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/ios-sim/media/audio-width-expected.txt (0 => 169636)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-sim/media/audio-width-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/ios-sim/media/audio-width-expected.txt 2014-06-06 05:11:02 UTC (rev 169636)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+Test that audio elements have a minimum width.
+
+
+
+EXPECTED (width1 == '260') OK
+EXPECTED (width2 == '400') OK
+END OF TEST
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiossimmediaaudiowidthhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/ios-sim/media/audio-width.html (0 => 169636)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-sim/media/audio-width.html (rev 0)
+++ trunk/LayoutTests/platform/ios-sim/media/audio-width.html 2014-06-06 05:11:02 UTC (rev 169636)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<head>
+ <meta name="viewport" content="initial-scale=1">
+ <script src="../../../media/media-file.js" type="text/javascript"></script>
+ <script src="../../../media/video-test.js" type="text/javascript"></script>
+ <style>
+ #aud_1 {
+ width: 44px;
+ }
+
+ #aud_2 {
+ width: 400px;
+ }
+ </style>
+ <script type="text/javascript">
+ var width1 = NaN;
+ var width2 = NaN;
+ var player1 = null;
+ var player2 = null;
+
+ function init() {
+ player1 = document.getElementById("aud_1");
+ player2 = document.getElementById("aud_2");
+ var audioPath = findMediaFile("audio", "../../../media/content/test");
+ player1.src = audioPath;
+ player2.src = audioPath;
+ width1 = parseInt(window.getComputedStyle(player1).width);
+ width2 = parseInt(window.getComputedStyle(player2).width);
+ testExpected("width1", 260, "==");
+ testExpected("width2", 400, "==");
+ endTest();
+ }
+ </script>
+</head>
+
+<body>
+ <p>Test that audio elements have a minimum width.<p>
+ <audio id="aud_1" type="audio/mp4" controls></audio>
+ <audio id="aud_2" type="audio/mp4" controls></audio>
+ <script type="text/javascript">
+ document.body.onload = init;
+ </script>
+</body>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (169635 => 169636)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-06-06 02:22:26 UTC (rev 169635)
+++ trunk/Source/WebCore/ChangeLog 2014-06-06 05:11:02 UTC (rev 169636)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2014-06-05 Wenson Hsieh <wenson_hsieh@apple.com>
+
+ Current media controls look different from previous media controls. Adjusted CSS to make media elements more similar by adding padding, adjusting hues/svg, resizing elements, etc.
+
+ https://bugs.webkit.org/show_bug.cgi?id=133521
+
+ Reviewed by Eric Carlson.
+
+ The main issues:
+ - The widths between elements of both audio and video players are incorrect.
+ - The hues of audio player elements are incorrect.
+ - The hues of video player elements are content dependent (refer to full-screen mode), and this cannot be exactly replicated using just css. This patch only attempts to make them more similar.
+ - The height of the audio player is incorrect.
+
+ Test: platform/ios-sim/media/audio-width.html
+
+ * Modules/mediacontrols/mediaControlsiOS.css: Updated style elements for audio/video elements.
+ (::-webkit-media-controls): Enforce a minimum width on audio/video controls.
+ (audio): Enforce a minimum width on audio elements.
+ (audio::-webkit-media-controls): see below
+ (audio::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue and width/height.
+ (audio::-webkit-media-controls-panel): adjusted hue, added left/right padding.
+ (audio::-webkit-media-controls-fullscreen-button): removed. There's no fullscreen for audio anyways.
+ (audio::-webkit-media-controls-current-time-display): adjusted font size, added left padding.
+ (audio::-webkit-media-controls-time-remaining-display): adjusted font size, added right padding.
+
+ (video::-webkit-media-controls-panel): adjusted hue, added left/right padding.
+ (video::-webkit-media-controls-current-time-display): added left padding.
+ (video::-webkit-media-controls-time-remaining-display): added right padding.
+ (video::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue, opacity and width/height.
+ (video::-webkit-media-controls-fullscreen-button): modified SVG, hue, opacity, and width/height. In particular, made the svg seem sharper.
+ (video::-webkit-media-controls-play-button): modified SVG, hue, opacity, and width/height.
+
</ins><span class="cx"> 2014-06-05 Commit Queue <commit-queue@webkit.org>
</span><span class="cx">
</span><span class="cx"> Unreviewed, rolling out r169570.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (169635 => 169636)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-06-06 02:22:26 UTC (rev 169635)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2014-06-06 05:11:02 UTC (rev 169636)
</span><span class="lines">@@ -23,8 +23,8 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> audio {
</span><del>- width: 200px;
- height: 44px;
</del><ins>+ min-width: 260px;
+ height: 39px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body:-webkit-full-page-media {
</span><span class="lines">@@ -54,6 +54,7 @@
</span><span class="cx"> -webkit-flex-direction: column;
</span><span class="cx"> font-family: -apple-system-font;
</span><span class="cx"> overflow: hidden;
</span><ins>+ min-width: 260px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel input[type="button"],
</span><span class="lines">@@ -81,17 +82,27 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-wireless-playback-picker-button,
-audio::-webkit-media-controls-wireless-playback-picker-button {
</del><ins>+audio::-webkit-media-controls-wireless-playback-picker-button,
+video::-webkit-media-controls-wireless-playback-picker-button {
</ins><span class="cx"> display: block;
</span><del>- width: 21px;
- height: 21px;
- background-color: rgb(92, 92, 92);
</del><ins>+ background-color: black;
</ins><span class="cx"> -webkit-mask-repeat: no-repeat;
</span><span class="cx"> -webkit-mask-position: 0 1px;
</span><del>- -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 305"><g fill="white"><polygon points="50.699,293 175,146 299.302,293"/><polygon points="9,9 9,213 97.392,213 110.921,197 25,197 25,25 325,25 325,197 239.079,197 252.608,213 341,213 341,9"/></g></svg>');
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+audio::-webkit-media-controls-wireless-playback-picker-button {
+ width: 44px;
+ height: 39px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 39"><g fill="none"><path stroke="white" stroke-width="1" d="M15.5,24.5 10.5,24.5 10.5,11.5 31.5,11.5 31.5,24.5 26.5,24.5 31.5,24.5 31.5,11.5 10.5,11.5 10.5,24.5 15.5,24.5 Z" /><path fill="white" d="M21,21 13.5,29 28.5,29" /></g></svg>');
+}
+
+video::-webkit-media-controls-wireless-playback-picker-button {
+ width: 42px;
+ height: 44px;
+ -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 44"><g fill="none"><path stroke="white" stroke-width="1" d="M15,27.5 10.5,27.5 10.5,14.5 30.5,14.5 30.5,27.5 26,27.5 30.5,27.5 30.5,14.5 10.5,14.5 10.5,27.5 15,27.5 Z" /><path fill="white" d="M20.5,23.5 13,31.5 28,31.5" /></g></svg>');
+ opacity: 0.5;
+}
+
</ins><span class="cx"> video::-webkit-media-controls-wireless-playback-picker-button.active,
</span><span class="cx"> audio::-webkit-media-controls-wireless-playback-picker-button.active {
</span><span class="cx"> background-color: #1060FE;
</span><span class="lines">@@ -103,16 +114,13 @@
</span><span class="cx"> -webkit-flex: 1 1 auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-panel,
-audio::-webkit-media-controls-panel {
</del><ins>+audio::-webkit-media-controls-panel,
+video::-webkit-media-controls-panel {
</ins><span class="cx"> box-sizing: border-box;
</span><span class="cx"> position: absolute;
</span><span class="cx"> bottom: 0;
</span><del>- width: 100%;
- padding: none;
- height: 44px;
</del><ins>+
</ins><span class="cx"> -webkit-user-select: none;
</span><del>- background-color: rgba(245, 245, 245, .75);
</del><span class="cx">
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> -webkit-flex-direction: row;
</span><span class="lines">@@ -124,7 +132,26 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel {
</span><ins>+ background-color: rgba(255, 255, 255, 0.6);
+}
+
+audio::-webkit-media-controls-panel {
+ background-color: rgba(228, 228, 228, 1);
+}
+
+
+audio::-webkit-media-controls-panel {
+ height: 39px;
+ padding-right: 8px;
+ padding-left: 7px;
+}
+
+video::-webkit-media-controls-panel {
+ height: 44px;
+ width: 100%;
</ins><span class="cx"> opacity: 0;
</span><ins>+ padding-right: 24px;
+ padding-left: 24px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel.show,
</span><span class="lines">@@ -178,40 +205,52 @@
</span><span class="cx"> padding: 0;
</span><span class="cx"> border: 0;
</span><span class="cx"> -webkit-user-select: none;
</span><del>- margin-left: 8px;
- margin-right: 8px;
- width: 44px;
- height: 44px;
- background-color: transparent;
- background-size: 44px 44px;
</del><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-play-button,
</del><span class="cx"> audio::-webkit-media-controls-play-button {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g fill="rgba(0, 0, 0, 0.8)"><rect x="13" y="11" width="6" height="22"/><rect x="24" y="11" width="6" height="22"/></g></svg>');
</del><ins>+ width: 42px;
+ height: 39px;
+ background-size: 42px 39px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="rgba(2, 2, 2, 1)"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-play-button:active,
</del><span class="cx"> audio::-webkit-media-controls-play-button:active {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g fill="white"><rect x="13" y="11" width="6" height="22"/><rect x="24" y="11" width="6" height="22"/></g></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="white"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-play-button.paused,
</del><span class="cx"> audio::-webkit-media-controls-play-button.paused {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path fill="rgba(0, 0, 0, 0.8)" d="M11,11 32,22 11,33z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><path fill="rgba(2, 2, 2, 1)" d="M11,9.5 32,20.5 11,31.5z"/></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-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 44 44"><g stroke="rgba(0, 0, 0, 0.8)" fill="none"><path d="M 14,20 v -6 h 6 M 14,14 l 6,6"/><path d="M 30,24 v 6 h -6 M 30,30 l -6,-6"/></g></svg>');
</del><ins>+video::-webkit-media-controls-fullscreen-button {
+ width: 35px;
+ height: 44px;
+ background-size: 35px 44px;
+ opacity: 0.9;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="rgba(0, 0, 0, 0.4)" fill="none"><path d="M 10.5,20.5 v -5 h 5 M 10.5,15.5 l 5,5"/><path d="M 24.5,24.5 v 5 h -5 M 24.5,29.5 l -5,-5"/></g></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-fullscreen-button:active,
-audio::-webkit-media-controls-fullscreen-button:active {
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g stroke="white" fill="none"><path d="M 14,20 v -6 h 6 M 14,14 l 6,6"/><path d="M 30,24 v 6 h -6 M 30,30 l -6,-6"/></g></svg>');
</del><ins>+video::-webkit-media-controls-play-button {
+ width: 41px;
+ height: 44px;
+ background-size: 41px 44px;
+ opacity: 0.9;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="rgba(0, 0, 0, 0.4)"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-play-button:active {
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="white"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
+}
+
+video::-webkit-media-controls-play-button.paused {
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><path fill="rgba(0, 0, 0, 0.4)" d="M10,11 31,22 10,33 Z"/></svg>');
+}
+
+video::-webkit-media-controls-fullscreen-button:active {
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="white" fill="none"><path d="M 10,20 v -5 h 5 M 10,15 l 5,5"/><path d="M 24,24 v 5 h -5 M 24,29 l -5,-5"/></g></svg>');
+}
+
</ins><span class="cx"> video::-webkit-media-controls-timeline,
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><span class="cx"> -webkit-appearance: none;
</span><span class="lines">@@ -222,6 +261,10 @@
</span><span class="cx"> border-radius: 1.5px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-timeline {
+ opacity: 0.75;
+}
+
</ins><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><span class="cx"> -webkit-appearance: none;
</span><span class="lines">@@ -249,12 +292,9 @@
</span><span class="cx"> -webkit-justify-content: center;
</span><span class="cx"> -webkit-align-items: center;
</span><span class="cx"> cursor: default;
</span><del>- font-size: 13px;
</del><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: hidden;
</span><del>- width: 44px;
</del><span class="cx"> min-width: 44px;
</span><del>- color: rgba(0, 0, 0, .5);
</del><span class="cx"> letter-spacing: normal;
</span><span class="cx"> word-spacing: normal;
</span><span class="cx"> line-height: normal;
</span><span class="lines">@@ -263,6 +303,26 @@
</span><span class="cx"> text-decoration: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-current-time-display,
+video::-webkit-media-controls-time-remaining-display {
+ font-size: 13px;
+ color: rgba(0, 0, 0, .5);
+}
+
+video::-webkit-media-controls-current-time-display {
+ padding-left: 6px;
+}
+
+video::-webkit-media-controls-time-remaining-display {
+ padding-right: 13px;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+ font-size: 12px;
+ color: rgba(5, 5, 5, 1);
+}
+
</ins><span class="cx"> video::-webkit-media-controls-timeline-container .hour-long-time,
</span><span class="cx"> audio::-webkit-media-controls-timeline-container .hour-long-time {
</span><span class="cx"> min-width: 67px;
</span></span></pre>
</div>
</div>
</body>
</html>