OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved. | 2 * Copyright (C) 2009 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Google Inc. | |
3 * | 4 * |
4 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
6 * are met: | 7 * are met: |
7 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
8 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
9 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
10 * notice, this list of conditions and the following disclaimer in the | 11 * notice, this list of conditions and the following disclaimer in the |
11 * documentation and/or other materials provided with the distribution. | 12 * documentation and/or other materials provided with the distribution. |
12 * | 13 * |
13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | 14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | 16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | 17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | 18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | 19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
21 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
22 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
23 */ | 24 */ |
24 | 25 |
25 /* media controls */ | 26 /* Chromium default media controls */ |
26 | 27 |
27 body:-webkit-full-page-media { | 28 body:-webkit-full-page-media { |
28 background-color: rgb(38, 38, 38); | 29 background-color: rgb(0, 0, 0); |
29 } | 30 } |
30 | 31 |
31 audio { | 32 audio { |
32 width: 200px; | 33 width: 300px; |
33 height: 16px; | 34 height: 30px; |
34 } | 35 } |
35 | 36 |
36 ::-webkit-media-controls { | 37 ::-webkit-media-controls { |
37 width: inherit; | 38 width: inherit; |
38 height: inherit; | 39 height: inherit; |
39 position: relative; | 40 position: relative; |
41 direction: ltr; | |
40 display: -webkit-flex; | 42 display: -webkit-flex; |
41 direction: ltr; | 43 -webkit-flex-direction: column; |
42 -webkit-align-items: flex-start; | |
43 -webkit-justify-content: flex-end; | 44 -webkit-justify-content: flex-end; |
44 -webkit-flex-direction: column; | 45 -webkit-align-items: center; |
46 } | |
47 | |
48 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { | |
49 width: 100%; | |
50 max-width: 800px; | |
51 height: 30px; | |
52 -webkit-flex-shrink: 0; | |
53 bottom: 0; | |
54 text-indent: 0; | |
55 padding: 0; | |
56 box-sizing: border-box; | |
57 } | |
58 | |
59 video::-webkit-media-controls-enclosure { | |
60 padding: 0px 5px 5px 5px; | |
61 height: 35px; | |
62 -webkit-flex-shrink: 0; | |
45 } | 63 } |
46 | 64 |
47 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | 65 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
66 -webkit-user-select: none; | |
67 position: relative; | |
68 width: 100%; | |
69 z-index: 0; | |
70 overflow: hidden; | |
71 text-align: right; | |
48 display: -webkit-flex; | 72 display: -webkit-flex; |
49 -webkit-flex-direction: row; | 73 -webkit-flex-direction: row; |
50 -webkit-align-items: center; | 74 -webkit-align-items: center; |
51 -webkit-user-select: none; | 75 /* We use flex-start here to ensure that the play button is visible even |
52 position: relative; | 76 * if we are too small to show all controls. |
53 bottom: 0; | 77 */ |
54 width: 100%; | 78 -webkit-justify-content: flex-start; |
55 z-index: 0; | 79 bottom: auto; |
56 overflow: hidden; | 80 height: 30px; |
57 height: 16px; | 81 background-color: rgba(20, 20, 20, 0.8); |
58 text-align: right; | 82 border-radius: 5px; |
59 } | 83 } |
60 | 84 |
61 video:-webkit-full-page-media { | 85 video:-webkit-full-page-media { |
62 margin: auto; | 86 margin: auto; |
63 position: absolute; | 87 position: absolute; |
64 top: 0; | 88 top: 0; |
65 right: 0; | 89 right: 0; |
66 bottom: 0; | 90 bottom: 0; |
67 left: 0; | 91 left: 0; |
68 } | 92 } |
69 | 93 |
94 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
95 max-height: 100%; | |
96 max-width: 100%; | |
97 } | |
98 | |
99 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
70 video:-webkit-full-page-media::-webkit-media-controls-panel { | 100 video:-webkit-full-page-media::-webkit-media-controls-panel { |
71 bottom: 0px; | 101 bottom: 0px; |
72 } | 102 } |
73 | 103 |
74 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton { | 104 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton { |
105 background-color: initial; | |
106 color: inherit; | |
75 -webkit-appearance: media-mute-button; | 107 -webkit-appearance: media-mute-button; |
qinmin
2013/07/02 03:15:14
this normally appears as the first line in the css
philipj_slow
2013/07/02 08:16:22
Yeah, the editing process I followed resulted in t
| |
76 display: -webkit-flex; | 108 display: -webkit-flex; |
77 width: 16px; | 109 -webkit-flex: none; |
78 height: 16px; | 110 border: none; |
79 background-color: initial; | 111 box-sizing: border-box; |
80 border: initial; | 112 width: 35px; |
81 color: inherit; | 113 height: 30px; |
114 line-height: 30px; | |
115 margin: 0 6px 0 0; | |
116 padding: 0; | |
82 } | 117 } |
83 | 118 |
84 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls -overlay-play-button { | 119 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls -overlay-play-button { |
85 display: none; | 120 display: none; |
86 } | 121 } |
87 | 122 |
88 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton { | 123 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton { |
124 background-color: initial; | |
125 color: inherit; | |
89 -webkit-appearance: media-play-button; | 126 -webkit-appearance: media-play-button; |
90 display: -webkit-flex; | 127 display: -webkit-flex; |
91 width: 16px; | 128 -webkit-flex: none; |
92 height: 16px; | 129 border: none; |
93 background-color: initial; | 130 box-sizing: border-box; |
94 border: initial; | 131 width: 30px; |
95 color: inherit; | 132 height: 30px; |
133 line-height: 30px; | |
134 margin-left: 9px; | |
135 margin-right: 9px; | |
136 padding: 0; | |
96 } | 137 } |
97 | 138 |
98 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls- timeline-container { | 139 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls- timeline-container { |
99 -webkit-appearance: media-controls-background; | 140 -webkit-appearance: media-controls-background; |
100 display: -webkit-flex; | 141 display: -webkit-flex; |
101 -webkit-flex-direction: row; | 142 -webkit-flex-direction: row; |
102 -webkit-align-items: center; | 143 -webkit-align-items: center; |
103 -webkit-justify-content: flex-end; | 144 -webkit-justify-content: flex-end; |
104 -webkit-flex: 1 1; | 145 -webkit-flex: 1 1; |
105 -webkit-user-select: none; | 146 -webkit-user-select: none; |
106 height: 16px; | 147 height: 16px; |
107 min-width: 0; | 148 min-width: 0; |
108 } | 149 } |
109 | 150 |
110 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display { | 151 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display, |
111 display: none; | 152 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display { |
112 } | 153 -webkit-appearance: media-current-time-display; |
154 -webkit-user-select: none; | |
155 -webkit-flex: none; | |
156 display: -webkit-flex; | |
157 border: none; | |
158 cursor: default; | |
113 | 159 |
114 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display { | 160 height: 30px; |
115 display: none; | 161 margin: 0 9px 0 0; |
162 padding: 0; | |
163 | |
164 line-height: 30px; | |
165 font-family: Arial, Helvetica, sans-serif; | |
166 font-size: 13px; | |
167 font-weight: bold; | |
168 font-style: normal; | |
169 color: white; | |
170 | |
171 letter-spacing: normal; | |
172 word-spacing: normal; | |
173 text-transform: none; | |
174 text-indent: 0; | |
175 text-shadow: none; | |
176 text-decoration: none; | |
116 } | 177 } |
117 | 178 |
118 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | 179 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
180 border: initial; | |
181 color: inherit; | |
119 -webkit-appearance: media-slider; | 182 -webkit-appearance: media-slider; |
120 display: -webkit-flex; | 183 display: -webkit-flex; |
121 -webkit-flex: 1 1; | 184 -webkit-flex: 1 1 auto; |
122 height: 16px; | 185 height: 8px; |
123 padding: 0px 2px; | 186 margin: 0 15px 0 0; |
124 background-color: initial; | 187 padding: 0; |
125 border: initial; | 188 background-color: transparent; |
126 color: inherit; | 189 min-width: 25px; |
127 margin: initial; | |
128 min-width: 0; | |
129 } | 190 } |
130 | 191 |
131 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider { | 192 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider { |
132 background-color: initial; | |
133 border: initial; | 193 border: initial; |
134 color: inherit; | 194 color: inherit; |
135 margin: initial; | 195 -webkit-appearance: media-volume-slider; |
196 display: -webkit-flex; | |
197 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
198 * and be aesthetically pleasing. | |
199 */ | |
200 -webkit-flex: 1 1.9 auto; | |
201 height: 8px; | |
202 max-width: 70px; | |
203 margin: 0 15px 0 0; | |
204 padding: 0; | |
205 background-color: transparent; | |
206 min-width: 15px; | |
207 } | |
208 | |
209 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
210 https://code.google.com/p/chromium/issues/detail?id=112508 | |
211 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
212 */ | |
213 input[type="range"]::-webkit-media-slider-container { | |
214 display: -webkit-flex; | |
215 -webkit-align-items: center; | |
216 -webkit-flex-direction: row; /* This property is updated by C++ code. */ | |
217 box-sizing: border-box; | |
218 height: 100%; | |
219 width: 100%; | |
220 border: 1px solid rgba(230, 230, 230, 0.35); | |
221 border-radius: 4px; | |
222 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */ | |
223 } | |
224 | |
225 /* The negative right margin causes the track to overflow its container. */ | |
226 input[type="range"]::-webkit-media-slider-container > div { | |
227 margin-right: -14px; | |
228 } | |
229 | |
230 input[type="range"]::-webkit-media-slider-thumb { | |
231 margin-left: -7px; | |
232 margin-right: -7px; | |
136 } | 233 } |
137 | 234 |
138 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se ek-back-button { | 235 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se ek-back-button { |
139 -webkit-appearance: media-seek-back-button; | 236 -webkit-appearance: media-seek-back-button; |
140 display: -webkit-flex; | 237 display: -webkit-flex; |
141 width: 16px; | 238 width: 16px; |
142 height: 16px; | 239 height: 16px; |
143 background-color: initial; | 240 background-color: initial; |
144 border: initial; | 241 border: initial; |
145 color: inherit; | 242 color: inherit; |
146 } | 243 } |
147 | 244 |
148 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls -seek-forward-button { | 245 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls -seek-forward-button { |
149 -webkit-appearance: media-seek-forward-button; | 246 -webkit-appearance: media-seek-forward-button; |
150 display: -webkit-flex; | 247 display: -webkit-flex; |
151 width: 16px; | 248 width: 16px; |
152 height: 16px; | 249 height: 16px; |
153 background-color: initial; | 250 background-color: initial; |
154 border: initial; | 251 border: initial; |
155 color: inherit; | 252 color: inherit; |
156 } | 253 } |
157 | 254 |
158 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f ullscreen-button { | 255 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f ullscreen-button { |
256 background-color: initial; | |
257 color: inherit; | |
159 -webkit-appearance: media-enter-fullscreen-button; | 258 -webkit-appearance: media-enter-fullscreen-button; |
160 display: -webkit-flex; | 259 display: -webkit-flex; |
161 width: 16px; | 260 -webkit-flex: none; |
162 height: 16px; | 261 border: none; |
163 background-color: initial; | 262 box-sizing: border-box; |
164 border: initial; | 263 width: 30px; |
165 color: inherit; | 264 height: 30px; |
265 line-height: 30px; | |
266 margin-left: -5px; | |
267 margin-right: 9px; | |
268 padding: 0; | |
166 } | 269 } |
167 | 270 |
168 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin d-button { | 271 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin d-button { |
169 display: none; | 272 display: none; |
170 background-color: initial; | 273 background-color: initial; |
171 border: initial; | 274 border: initial; |
172 color: inherit; | 275 color: inherit; |
173 } | 276 } |
174 | 277 |
175 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co ntrols-return-to-realtime-button { | 278 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co ntrols-return-to-realtime-button { |
176 display: none; | 279 display: none; |
177 background-color: initial; | 280 background-color: initial; |
178 border: initial; | 281 border: initial; |
179 color: inherit; | 282 color: inherit; |
180 } | 283 } |
181 | 284 |
182 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi a-controls-toggle-closed-captions-button { | 285 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi a-controls-toggle-closed-captions-button { |
286 background-color: initial; | |
287 color: inherit; | |
183 -webkit-appearance: media-toggle-closed-captions-button; | 288 -webkit-appearance: media-toggle-closed-captions-button; |
184 display: -webkit-flex; | 289 display: -webkit-flex; |
185 width: 16px; | 290 -webkit-flex: none; |
186 height: 16px; | 291 border: none; |
187 background-color: initial; | 292 box-sizing: border-box; |
188 border: initial; | 293 width: 30px; |
189 color: inherit; | 294 height: 30px; |
295 line-height: 30px; | |
296 margin-left: -5px; | |
297 margin-right: 9px; | |
298 padding: 0; | |
190 } | 299 } |
191 | 300 |
192 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-co ntrols-volume-slider-mute-button { | 301 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-co ntrols-volume-slider-mute-button { |
193 -webkit-appearance: media-volume-slider-mute-button; | 302 -webkit-appearance: media-volume-slider-mute-button; |
194 display: none; | 303 display: none; |
195 background-color: initial; | 304 background-color: initial; |
196 border: initial; | 305 border: initial; |
197 color: inherit; | 306 color: inherit; |
198 } | 307 } |
199 | 308 |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
278 font-weight: bold; | 387 font-weight: bold; |
279 } | 388 } |
280 | 389 |
281 video::-webkit-media-text-track-container u { | 390 video::-webkit-media-text-track-container u { |
282 text-decoration: underline; | 391 text-decoration: underline; |
283 } | 392 } |
284 | 393 |
285 video::-webkit-media-text-track-container i { | 394 video::-webkit-media-text-track-container i { |
286 font-style: italic; | 395 font-style: italic; |
287 } | 396 } |
OLD | NEW |