Changeset 181178 in webkit

Timestamp:

Mar 6, 2015, 1:29:29 PM (10 years ago)

Author:

roger_fong@apple.com

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):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/mediacontrols/mediaControlsApple.css (modified) (9 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2015-03-05  Roger Fong  <roger_fong@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.noble@apple.com>
 

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

@@ -230 +230 @@
 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;
 }
@@ -247 +247 @@
     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;
@@ -258 +258 @@
 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;
 }
@@ -266 +266 @@
 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;
 }
 
@@ -277 +276 @@
 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;
 }
 
@@ -289 +287 @@
     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;
@@ -304 +302 @@
 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);
 }
 
@@ -354 +350 @@
 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;
@@ -400 +396 @@
     overflow-y: hidden;
     overflow-x: hidden;
-    font-family: 'Helvetica Neue';
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 11px;
     color: white;