WebKit should use 80% black background for PiP indicator
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Jun 2015 01:26:21 +0000 (01:26 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Jun 2015 01:26:21 +0000 (01:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=146444
<rdar://problem/21555726>

Reviewed by Sam Weinig.

Change the black background to a slightly less black background.
This also involved making the placard artwork white, in order
to keep it visible against the new grey.

* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-wireless-playback-status):
(audio::-webkit-media-controls-wireless-playback-status.small):
(audio::-webkit-media-controls-wireless-playback-status.picture-in-picture):

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

Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

index d0afb78..b31f7f0 100644 (file)
@@ -1,3 +1,20 @@
+2015-06-29  Dean Jackson  <dino@apple.com>
+
+        WebKit should use 80% black background for PiP indicator
+        https://bugs.webkit.org/show_bug.cgi?id=146444
+        <rdar://problem/21555726>
+
+        Reviewed by Sam Weinig.
+
+        Change the black background to a slightly less black background.
+        This also involved making the placard artwork white, in order
+        to keep it visible against the new grey.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-wireless-playback-status):
+        (audio::-webkit-media-controls-wireless-playback-status.small):
+        (audio::-webkit-media-controls-wireless-playback-status.picture-in-picture):
+
 2015-06-29  Brady Eidson  <beidson@apple.com>
 
         Flag sync XHRs from the network process so they can be handled appropriately.
index 9bae36c..e98144f 100644 (file)
@@ -579,8 +579,8 @@ audio::-webkit-media-controls-wireless-playback-status {
     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="white" 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: #333;
     background-repeat: no-repeat;
     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
     background-size: 131px auto;
@@ -632,7 +632,7 @@ audio::-webkit-media-controls-wireless-playback-text-bottom {
 
 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="white" 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;
 }
@@ -652,7 +652,7 @@ audio::-webkit-media-controls-wireless-playback-status.picture-in-picture
 {
     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=\"#3c3c3c\" 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="white" 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,