[webkit-changes] [181178] trunk/Source/WebCore

[roger_fong]

Title: [181178] trunk/Source/WebCore

Revision

181178

Author

roger_f...@apple.com

Date

2015-03-06 13:29:29 -0800 (Fri, 06 Mar 2015)

Log Message

Reskin Captions button and container on OSX.
https://bugs.webkit.org/show_bug.cgi?id=142383.
<rdar://problem/20061466>
Reviewed by Eric Carlson.
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-toggle-closed-captions-button): Create new captions button icon.
Update caption container to match rest of media controls better.
(audio::-webkit-media-controls-closed-captions-container):
(audio::-webkit-media-controls-closed-captions-container .list):
(audio::-webkit-media-controls-closed-captions-container h3):
(audio::-webkit-media-controls-closed-captions-container ul):
(audio::-webkit-media-controls-closed-captions-container li):
(audio::-webkit-media-controls-closed-captions-container li:focus):
(audio::-webkit-media-controls-closed-captions-container li:hover):
Fix up some fonts to make fonts between captions, status display and time displays consistent.
(audio::-webkit-media-controls-status-display):
(audio::-webkit-media-controls-time-remaining-display):

Modified Paths

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

Diff

Modified: trunk/Source/WebCore/ChangeLog (181177 => 181178)

--- trunk/Source/WebCore/ChangeLog	2015-03-06 20:19:47 UTC (rev 181177)
+++ trunk/Source/WebCore/ChangeLog	2015-03-06 21:29:29 UTC (rev 181178)
@@ -1,3 +1,25 @@
+2015-03-05  Roger Fong  <roger_f...@apple.com>
+
+        Reskin Captions button and container on OSX.
+        https://bugs.webkit.org/show_bug.cgi?id=142383.
+        <rdar://problem/20061466>
+
+        Reviewed by Eric Carlson.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-controls-toggle-closed-captions-button): Create new captions button icon.
+        Update caption container to match rest of media controls better.
+        (audio::-webkit-media-controls-closed-captions-container):
+        (audio::-webkit-media-controls-closed-captions-container .list):
+        (audio::-webkit-media-controls-closed-captions-container h3):
+        (audio::-webkit-media-controls-closed-captions-container ul):
+        (audio::-webkit-media-controls-closed-captions-container li):
+        (audio::-webkit-media-controls-closed-captions-container li:focus):
+        (audio::-webkit-media-controls-closed-captions-container li:hover):
+        Fix up some fonts to make fonts between captions, status display and time displays consistent.
+        (audio::-webkit-media-controls-status-display):
+        (audio::-webkit-media-controls-time-remaining-display):
+
 2015-03-06  Jer Noble  <jer.no...@apple.com>
 
         [Web Audio] Decoding specific .m4a file crashes tab

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (181177 => 181178)

--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-03-06 20:19:47 UTC (rev 181177)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-03-06 21:29:29 UTC (rev 181178)
@@ -229,9 +229,9 @@
 
 video::-webkit-media-controls-toggle-closed-captions-button,
 audio::-webkit-media-controls-toggle-closed-captions-button {
-    width: 15px;
+    width: 16px;
     margin-right: 16px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105" fill="white"><path d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z" fill="url(#gradient)"/></svg>');
+    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>');
     outline: 0;
 }
 
@@ -246,9 +246,9 @@
     max-height: calc(100% - 39px); /* bottom + 10px */
     overflow-x: hidden;
     overflow-y: scroll;
-    background-color: rgba(0, 0, 0, 0.85);
-    border: 3px solid rgba(128, 128, 128, 0.75);
-    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    border: 1px solid rgba(128, 128, 128, 0.75);
+    border-radius: 6px;
     cursor: default;
     z-index: 2;
     text-align: initial;
@@ -257,28 +257,26 @@
 video::-webkit-media-controls-closed-captions-container .list,
 audio::-webkit-media-controls-closed-captions-container .list {
     display: block;
-    font-family: "Helvetica Bold", Helvetica, sans-serif;
-    font-size: 10pt;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 11px;
     -webkit-user-select: none;
 }
 
 video::-webkit-media-controls-closed-captions-container h3,
 audio::-webkit-media-controls-closed-captions-container h3 {
     margin: 0;
-    color: rgb(117, 117, 117);
+    color: rgb(140, 140, 140);
     text-shadow: 0 1px 0 black;
-    -webkit-margin-start: 23px;
+    -webkit-margin-start: 16px;
     padding-top: 4px;
-    font-weight: bold;
-    font-size: 10pt;
+    font-size: 11px;
 }
 
 video::-webkit-media-controls-closed-captions-container ul,
 audio::-webkit-media-controls-closed-captions-container ul {
     list-style-type: none;
-    margin: 0 0 4px 0;
+    margin: 0 0 8px 0;
     padding: 0;
-    font-weight: bold;
 }
 
 video::-webkit-media-controls-closed-captions-container li,
@@ -288,8 +286,8 @@
     background-image: none;
     text-shadow: 0 1px 0 black;
     margin: 0;
-    padding-left: 37px;
-    padding-right: 35px;
+    padding-left: 28px;
+    padding-right: 28px;
     padding-top: 0.15em;
     padding-bottom: 0.2em;
     box-sizing: border-box;
@@ -303,14 +301,12 @@
 video::-webkit-media-controls-closed-captions-container li:focus,
 audio::-webkit-media-controls-closed-captions-container li:focus {
     outline: 0;
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.3)), color-stop(1, rgba(255, 255, 255, 0.2)));
+    background-color: rgba(140, 140, 140, .5);
 }
 
 video::-webkit-media-controls-closed-captions-container li:hover,
 audio::-webkit-media-controls-closed-captions-container li:hover {
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 246)), color-stop(1, rgb(26, 68, 243)));
-    border-top: 1px solid rgb(70, 103, 234);
-    border-bottom: 1px solid rgb(3, 54, 229);
+    background-color: rgba(26, 68, 243, 0.6);
 }
 
 video::-webkit-media-controls-closed-captions-container li.selected::before,
@@ -353,8 +349,8 @@
 video::-webkit-media-controls-status-display,
 audio::-webkit-media-controls-status-display {
     cursor: default;
-    font: -webkit-small-control;
-    font-size: 9px;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 11px;
     overflow: hidden;
     color: white;
     text-shadow: black 0px 1px 1px;
@@ -399,7 +395,7 @@
     cursor: default;
     overflow-y: hidden;
     overflow-x: hidden;
-    font-family: 'Helvetica Neue';
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 11px;
     color: white;
     text-shadow: black 0px 1px 1px;

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes