Title: [186837] trunk/Source/WebCore
Revision
186837
Author
[email protected]
Date
2015-07-15 07:22:50 -0700 (Wed, 15 Jul 2015)

Log Message

Placeholder colors should be system grays
https://bugs.webkit.org/show_bug.cgi?id=146955
<rdar://problem/21774358>

Reviewed by Sam Weinig.

Update the PiP and Airplay placards to use the correct shades
of gray.

* Modules/mediacontrols/mediaControlsApple.css: No need to specify the
font here, nor have rules for Picture in Picture, which isn't available
on OS X.
(audio::-webkit-media-controls-time-remaining-display): We should specify
font style here.
(video:-webkit-full-screen::-webkit-media-controls-panel): Drive-by cleanup.
(audio::-webkit-media-controls-wireless-playback-status): Use a gray background
and system gray for text and artwork.
(audio::-webkit-media-controls-wireless-playback-status.small): Ditto.
(audio::-webkit-media-controls-picture-in-picture-button): Deleted (not on OS X).
(audio::-webkit-media-controls-wireless-playback-text-top): Deleted use of background color.
(audio::-webkit-media-controls-wireless-playback-text-bottom): Ditto..

* Modules/mediacontrols/mediaControlsiOS.css: Use a gray background
and system gray for text and artwork.
(audio::-webkit-media-controls-wireless-playback-status):
(audio::-webkit-media-controls-wireless-playback-text-top):
(audio::-webkit-media-controls-wireless-playback-status.picture-in-picture):

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (186836 => 186837)


--- trunk/Source/WebCore/ChangeLog	2015-07-15 14:15:33 UTC (rev 186836)
+++ trunk/Source/WebCore/ChangeLog	2015-07-15 14:22:50 UTC (rev 186837)
@@ -1,3 +1,33 @@
+2015-07-14  Dean Jackson  <[email protected]>
+
+        Placeholder colors should be system grays
+        https://bugs.webkit.org/show_bug.cgi?id=146955
+        <rdar://problem/21774358>
+
+        Reviewed by Sam Weinig.
+
+        Update the PiP and Airplay placards to use the correct shades
+        of gray.
+
+        * Modules/mediacontrols/mediaControlsApple.css: No need to specify the
+        font here, nor have rules for Picture in Picture, which isn't available
+        on OS X.
+        (audio::-webkit-media-controls-time-remaining-display): We should specify
+        font style here.
+        (video:-webkit-full-screen::-webkit-media-controls-panel): Drive-by cleanup.
+        (audio::-webkit-media-controls-wireless-playback-status): Use a gray background
+        and system gray for text and artwork.
+        (audio::-webkit-media-controls-wireless-playback-status.small): Ditto.
+        (audio::-webkit-media-controls-picture-in-picture-button): Deleted (not on OS X).
+        (audio::-webkit-media-controls-wireless-playback-text-top): Deleted use of background color.
+        (audio::-webkit-media-controls-wireless-playback-text-bottom): Ditto..
+
+        * Modules/mediacontrols/mediaControlsiOS.css: Use a gray background
+        and system gray for text and artwork.
+        (audio::-webkit-media-controls-wireless-playback-status):
+        (audio::-webkit-media-controls-wireless-playback-text-top):
+        (audio::-webkit-media-controls-wireless-playback-status.picture-in-picture):
+
 2015-07-14  Hunseop Jeong  <[email protected]>
 
         [EFL] Scrollbar is not drawn on MiniBrowser.

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (186836 => 186837)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-07-15 14:15:33 UTC (rev 186836)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-07-15 14:22:50 UTC (rev 186837)
@@ -56,7 +56,6 @@
     -webkit-align-items: stretch;
     -webkit-justify-content: flex-end;
     -webkit-flex-direction: column;
-    font: -webkit-small-control;
     white-space: nowrap;
     -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -469,12 +468,6 @@
     margin-top: 6px;
 }
 
-video::-webkit-media-controls-picture-in-picture-button,
-audio::-webkit-media-controls-picture-in-picture-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;
@@ -542,6 +535,9 @@
     position: relative;
     bottom: 0.5px;
     font-family: -apple-system-monospaced-numbers;
+    font-size: 11px !important;
+    font-style: normal !important;
+    font-weight: normal !important;
     -webkit-text-size-adjust: none;
 }
 
@@ -651,18 +647,18 @@
 
 /* Full Screen */
 
-/* 
+/*
     Page stylesheets are not allowed to override the style of media
     controls while in full screen mode, so many if not all the rules
     defined in this section will be marked as !important to enforce
-    this restriction 
+    this restriction
 */
 
 video:-webkit-full-screen::-webkit-media-controls-panel {
     -webkit-align-items: flex-start !important;
     -webkit-justify-content: flex-end !important;
     -webkit-clip-path: inset(20px round 6px);
-    
+
     width: 480px !important;
     height: 104px !important;
     margin: 0 auto 12px auto !important;
@@ -984,13 +980,13 @@
     top: 0px;
     width: 100%;
     height: 100%;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="rgb(146,146,146)" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
-    background-color: black;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="-apple-system-gray" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
+    background-color: rgb(51, 51, 53);
     background-repeat: no-repeat;
     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
     background-size: 131px auto;
-    color: rgb(145,145,145);
-    font: -webkit-small-control;
+    color: -apple-system-gray;
+    font-family: -apple-system;
     vertical-align: text-bottom;
 }
 
@@ -1015,7 +1011,6 @@
     font-size: 12pt;
     text-align: center;
     margin: 0px;
-    background-color: black;
 }
 
 video::-webkit-media-controls-wireless-playback-text-bottom,
@@ -1032,12 +1027,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0px;
-    background-color: black;
 }
 
 video::-webkit-media-controls-wireless-playback-status.small,
 audio::-webkit-media-controls-wireless-playback-status.small {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 43"><g fill="none" stroke="rgb(146,146,146)" stroke-width="2"><rect x="1" y="1" width="60" height="36"/><line x1="14" y1="42" x2="48" y2="42"/></g></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 43"><g fill="none" stroke="-apple-system-gray" stroke-width="2"><rect x="1" y="1" width="60" height="36"/><line x1="14" y1="42" x2="48" y2="42"/></g></svg>');
     background-position: 50% calc(.5 * (100% - 25px) - 5pt);
     background-size: 62px auto;
 }

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (186836 => 186837)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-07-15 14:15:33 UTC (rev 186836)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-07-15 14:22:50 UTC (rev 186837)
@@ -607,12 +607,12 @@
     top: 0px;
     width: 100%;
     height: 100%;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="rgb(146,146,146)" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
-    background-color: black;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="-apple-system-gray" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
+    background-color: rgb(51, 51, 53);
     background-repeat: no-repeat;
     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
     background-size: 131px auto;
-    color: rgb(145,145,145);
+    color: -apple-system-gray;
     font: -apple-system;
     font-weight: 400;
     vertical-align: text-bottom;
@@ -639,7 +639,7 @@
     font-size: 12pt;
     text-align: center;
     margin: 0px;
-    color: rgb(255,255,255);
+    color: -apple-system-gray;
 }
 
 video::-webkit-media-controls-wireless-playback-text-bottom,
@@ -678,10 +678,9 @@
 video::-webkit-media-controls-wireless-playback-status.picture-in-picture,
 audio::-webkit-media-controls-wireless-playback-status.picture-in-picture
 {
-    background-color: #ccc;
     background-size: 304px auto;
     background-position: 50% calc(.5 * (100% - 25px));
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 150"><g fill="none" stroke="#8e8e93" stroke-width="3"><path d="m 172,106 -81,0 c -3.5,0 -6,-2.5 -6,-6 l 0,-89 c 0,-3.5 2.5,-6 6,-6 l 122,0 c 3.5,0 6,2.5 6,6 l 0,57" /><path d="m 233,119 -53,0 c -3,0 -3,-0 -3,-3 l 0,-40 c 0,-3 0,-3 3,-3 l 53,0 c 3,0 3,0 3,3 l 0,40 c 0,3 0,3 -3,3 z" /></g></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 150"><g fill="none" stroke="-apple-system-gray" stroke-width="3"><path d="m 172,106 -81,0 c -3.5,0 -6,-2.5 -6,-6 l 0,-89 c 0,-3.5 2.5,-6 6,-6 l 122,0 c 3.5,0 6,2.5 6,6 l 0,57" /><path d="m 233,119 -53,0 c -3,0 -3,-0 -3,-3 l 0,-40 c 0,-3 0,-3 3,-3 l 53,0 c 3,0 3,0 3,3 l 0,40 c 0,3 0,3 -3,3 z" /></g></svg>');
 }
 
 video::-webkit-media-controls-wireless-playback-text-top.picture-in-picture,
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to