OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2009 Apple Inc. All rights reserved. | |
3 * Copyright (C) 2009 Google Inc. | |
4 * | |
5 * Redistribution and use in source and binary forms, with or without | |
6 * modification, are permitted provided that the following conditions | |
7 * are met: | |
8 * 1. Redistributions of source code must retain the above copyright | |
9 * notice, this list of conditions and the following disclaimer. | |
10 * 2. Redistributions in binary form must reproduce the above copyright | |
11 * notice, this list of conditions and the following disclaimer in the | |
12 * documentation and/or other materials provided with the distribution. | |
13 * | |
14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | |
15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | |
18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | |
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
24 */ | |
25 | |
26 /* Chromium default media controls */ | |
27 | |
28 /* WARNING: This css file can only style <audio> and <video> elements */ | |
29 | |
30 audio:not([controls]) { | |
31 display: none !important; | |
32 } | |
33 | |
34 audio { | |
35 width: 300px; | |
36 height: 30px; | |
37 } | |
38 | |
39 audio::-webkit-media-controls, | |
40 video::-webkit-media-controls { | |
41 width: inherit; | |
42 height: inherit; | |
43 position: relative; | |
44 direction: ltr; | |
45 display: flex; | |
46 flex-direction: column; | |
47 font-family: Arial, Helvetica, sans-serif; | |
48 justify-content: flex-end; | |
49 align-items: center; | |
50 } | |
51 | |
52 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | |
53 width: 100%; | |
54 max-width: 800px; | |
55 height: 30px; | |
56 flex-shrink: 0; | |
57 bottom: 0; | |
58 text-indent: 0; | |
59 padding: 0; | |
60 box-sizing: border-box; | |
61 } | |
62 | |
63 video::-webkit-media-controls-enclosure { | |
64 padding: 0px 5px 5px 5px; | |
65 height: 35px; | |
66 flex-shrink: 0; | |
67 } | |
68 | |
69 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
70 display: flex; | |
71 flex-direction: row; | |
72 align-items: center; | |
73 /* We use flex-start here to ensure that the play button is visible even | |
74 * if we are too small to show all controls. | |
75 */ | |
76 justify-content: flex-start; | |
77 -webkit-user-select: none; | |
78 position: relative; | |
79 width: 100%; | |
80 z-index: 0; | |
81 overflow: hidden; | |
82 text-align: right; | |
83 bottom: auto; | |
84 height: 30px; | |
85 background-color: rgba(20, 20, 20, 0.8); | |
86 border-radius: 5px; | |
87 /* The duration is also specified in MediaControlElements.cpp and LayoutTest
s/media/media-controls.js */ | |
88 transition: opacity 0.3s; | |
89 } | |
90 | |
91 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
92 max-height: 100%; | |
93 max-width: 100%; | |
94 } | |
95 | |
96 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
97 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
98 bottom: 0px; | |
99 } | |
100 | |
101 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | |
102 -webkit-appearance: media-mute-button; | |
103 display: flex; | |
104 flex: none; | |
105 border: none; | |
106 box-sizing: border-box; | |
107 width: 35px; | |
108 height: 30px; | |
109 line-height: 30px; | |
110 margin: 0 6px 0 0; | |
111 padding: 0; | |
112 background-color: initial; | |
113 color: inherit; | |
114 } | |
115 | |
116 audio::-webkit-media-controls-overlay-enclosure { | |
117 display: none; | |
118 } | |
119 | |
120 video::-webkit-media-controls-overlay-enclosure { | |
121 display: flex; | |
122 position: relative; | |
123 flex-direction: column; | |
124 justify-content: flex-end; | |
125 align-items: center; | |
126 flex: 1 1; | |
127 min-height: 0; | |
128 width: 100%; | |
129 text-indent: 0; | |
130 box-sizing: border-box; | |
131 overflow: hidden; | |
132 } | |
133 | |
134 video::-webkit-media-controls-overlay-play-button { | |
135 -webkit-appearance: media-overlay-play-button; | |
136 display: flex; | |
137 position: absolute; | |
138 top: 50%; | |
139 left: 50%; | |
140 margin-left: -40px; | |
141 margin-top: -40px; | |
142 border: none; | |
143 box-sizing: border-box; | |
144 background-color: transparent; | |
145 width: 80px; | |
146 height: 80px; | |
147 padding: 0; | |
148 } | |
149 | |
150 video::-internal-media-controls-overlay-cast-button { | |
151 -webkit-appearance: -internal-media-overlay-cast-off-button; | |
152 display: flex; | |
153 position: absolute; | |
154 top: 5%; | |
155 left: 5%; | |
156 margin-left: 0px; | |
157 margin-top: 0px; | |
158 border: none; | |
159 box-sizing: border-box; | |
160 background-color: transparent; | |
161 width: 30px; | |
162 height: 30px; | |
163 padding: 0; | |
164 } | |
165 | |
166 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | |
167 -webkit-appearance: media-play-button; | |
168 display: flex; | |
169 flex: none; | |
170 border: none; | |
171 box-sizing: border-box; | |
172 width: 30px; | |
173 height: 30px; | |
174 line-height: 30px; | |
175 margin-left: 9px; | |
176 margin-right: 9px; | |
177 padding: 0; | |
178 background-color: initial; | |
179 color: inherit; | |
180 } | |
181 | |
182 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | |
183 -webkit-appearance: media-controls-background; | |
184 display: flex; | |
185 flex-direction: row; | |
186 align-items: center; | |
187 justify-content: flex-end; | |
188 flex: 1 1; | |
189 -webkit-user-select: none; | |
190 height: 16px; | |
191 min-width: 0; | |
192 } | |
193 | |
194 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, | |
195 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | |
196 -webkit-appearance: media-current-time-display; | |
197 -webkit-user-select: none; | |
198 flex: none; | |
199 display: flex; | |
200 border: none; | |
201 cursor: default; | |
202 | |
203 height: 30px; | |
204 margin: 0 9px 0 0; | |
205 padding: 0; | |
206 | |
207 line-height: 30px; | |
208 font-size: 13px; | |
209 font-weight: bold; | |
210 font-style: normal; | |
211 color: white; | |
212 | |
213 letter-spacing: normal; | |
214 word-spacing: normal; | |
215 text-transform: none; | |
216 text-indent: 0; | |
217 text-shadow: none; | |
218 text-decoration: none; | |
219 } | |
220 | |
221 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
222 -webkit-appearance: media-slider; | |
223 display: flex; | |
224 flex: 1 1 auto; | |
225 height: 8px; | |
226 margin: 0 15px 0 0; | |
227 padding: 0; | |
228 background-color: transparent; | |
229 min-width: 25px; | |
230 border: initial; | |
231 color: inherit; | |
232 } | |
233 | |
234 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | |
235 -webkit-appearance: media-volume-slider; | |
236 display: flex; | |
237 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
238 * and be aesthetically pleasing. | |
239 */ | |
240 flex: 1 1.9 auto; | |
241 height: 8px; | |
242 max-width: 70px; | |
243 margin: 0 15px 0 0; | |
244 padding: 0; | |
245 background-color: transparent; | |
246 min-width: 15px; | |
247 border: initial; | |
248 color: inherit; | |
249 } | |
250 | |
251 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
252 https://code.google.com/p/chromium/issues/detail?id=112508 | |
253 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
254 */ | |
255 input[type="range" i]::-webkit-media-slider-container { | |
256 display: flex; | |
257 align-items: center; | |
258 flex-direction: row; /* This property is updated by C++ code. */ | |
259 box-sizing: border-box; | |
260 height: 100%; | |
261 width: 100%; | |
262 border: 1px solid rgba(230, 230, 230, 0.35); | |
263 border-radius: 4px; | |
264 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | |
265 } | |
266 | |
267 /* The negative right margin causes the track to overflow its container. */ | |
268 input[type="range" i]::-webkit-media-slider-container > div { | |
269 margin-right: -14px; | |
270 } | |
271 | |
272 input[type="range" i]::-webkit-media-slider-thumb { | |
273 margin-left: -7px; | |
274 margin-right: -7px; | |
275 } | |
276 | |
277 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | |
278 -webkit-appearance: media-enter-fullscreen-button; | |
279 display: flex; | |
280 flex: none; | |
281 border: none; | |
282 box-sizing: border-box; | |
283 width: 30px; | |
284 height: 30px; | |
285 line-height: 30px; | |
286 margin-left: -5px; | |
287 margin-right: 9px; | |
288 padding: 0; | |
289 background-color: initial; | |
290 color: inherit; | |
291 } | |
292 | |
293 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
t-button { | |
294 -webkit-appearance: -internal-media-cast-off-button; | |
295 display: flex; | |
296 flex: none; | |
297 border: none; | |
298 box-sizing: border-box; | |
299 width: 30px; | |
300 height: 30px; | |
301 line-height: 30px; | |
302 margin-left: -5px; | |
303 margin-right: 9px; | |
304 padding: 0; | |
305 background-color: initial; | |
306 color: inherit; | |
307 } | |
308 | |
309 audio::-webkit-media-controls-toggle-closed-captions-button { | |
310 display: none; | |
311 } | |
312 | |
313 video::-webkit-media-controls-toggle-closed-captions-button { | |
314 -webkit-appearance: media-toggle-closed-captions-button; | |
315 display: flex; | |
316 flex: none; | |
317 border: none; | |
318 box-sizing: border-box; | |
319 width: 30px; | |
320 height: 30px; | |
321 line-height: 30px; | |
322 margin-left: -5px; | |
323 margin-right: 9px; | |
324 padding: 0; | |
325 background-color: initial; | |
326 color: inherit; | |
327 } | |
328 | |
329 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con
trols-fullscreen-volume-slider { | |
330 display: none; | |
331 } | |
332 | |
333 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media
-controls-fullscreen-volume-min-button { | |
334 display: none; | |
335 } | |
336 | |
337 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media
-controls-fullscreen-volume-max-button { | |
338 display: none; | |
339 } | |
340 | |
341 video::-webkit-scrollbar { | |
342 width: 12px; | |
343 } | |
344 | |
345 video::-webkit-scrollbar-track { | |
346 box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3); | |
347 border-radius: 10px; | |
348 } | |
349 | |
350 video::-webkit-scrollbar-thumb { | |
351 border-radius: 10px; | |
352 background-color: rgba(80, 80, 80, 0.8); | |
353 box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.5); | |
354 } | |
355 | |
356 video::-internal-media-controls-text-track-list { | |
357 position: absolute; | |
358 bottom: 35px; | |
359 right: 5px; | |
360 background: rgba(20, 20, 20, 0.8); | |
361 max-width: 50%; | |
362 max-height: 250px; | |
363 border-radius: 5px; | |
364 overflow-x: hidden; | |
365 overflow-y: auto; | |
366 text-overflow: ellipsis; | |
367 margin-bottom: 5px; | |
368 white-space: nowrap; | |
369 padding-top: 10px; | |
370 font-weight: bold; | |
371 font-size: 13px; | |
372 } | |
373 | |
374 video::-internal-media-controls-text-track-list-item { | |
375 display: block; | |
376 color: white; | |
377 padding: 4px 30px 4px 10px; | |
378 border-bottom: 1px solid #555; | |
379 text-align: start; | |
380 line-height: 30px; | |
381 } | |
382 | |
383 video::-internal-media-controls-text-track-list-item:hover { | |
384 background-color: rgba(105, 105, 105, 0.8); | |
385 } | |
386 | |
387 video::-internal-media-controls-text-track-list-item-input { | |
388 -webkit-appearance: -internal-media-track-selection-checkmark; | |
389 visibility: hidden; | |
390 left: 0; | |
391 vertical-align: middle; | |
392 margin: 0 5px 0 0; | |
393 width: 25px; | |
394 height: 25px; | |
395 } | |
396 | |
397 video::-internal-media-controls-text-track-list-item-input:checked { | |
398 visibility: visible; | |
399 } | |
400 | |
401 video::-internal-media-controls-text-track-list-kind-captions { | |
402 -webkit-appearance: -internal-media-closed-captions-icon; | |
403 height: 24px; | |
404 width: 24px; | |
405 margin-left: 10px; | |
406 vertical-align: middle; | |
407 } | |
408 | |
409 video::-internal-media-controls-text-track-list-kind-subtitles { | |
410 -webkit-appearance: -internal-media-subtitles-icon; | |
411 height: 24px; | |
412 width: 24px; | |
413 margin-left: 10px; | |
414 vertical-align: middle; | |
415 } | |
416 | |
417 video::-webkit-media-text-track-container { | |
418 position: relative; | |
419 width: inherit; | |
420 height: inherit; | |
421 overflow: hidden; | |
422 | |
423 font: 22px sans-serif; | |
424 text-align: center; | |
425 color: rgba(255, 255, 255, 1); | |
426 | |
427 letter-spacing: normal; | |
428 word-spacing: normal; | |
429 text-transform: none; | |
430 text-indent: 0; | |
431 text-decoration: none; | |
432 pointer-events: none; | |
433 -webkit-user-select: none; | |
434 word-break: break-word; | |
435 } | |
436 | |
437 video::cue { | |
438 display: inline; | |
439 | |
440 background-color: rgba(0, 0, 0, 0.8); | |
441 padding: 2px 2px; | |
442 } | |
443 | |
444 video::-webkit-media-text-track-region { | |
445 position: absolute; | |
446 line-height: 5.33vh; | |
447 writing-mode: horizontal-tb; | |
448 background: rgba(0, 0, 0, 0.8); | |
449 color: rgba(255, 255, 255, 1); | |
450 word-wrap: break-word; | |
451 overflow-wrap: break-word; | |
452 overflow: hidden; | |
453 } | |
454 | |
455 video::-webkit-media-text-track-region-container { | |
456 position: relative; | |
457 | |
458 display: flex; | |
459 flex-flow: column; | |
460 flex-direction: column; | |
461 } | |
462 | |
463 video::-webkit-media-text-track-region-container.scrolling { | |
464 transition: top 433ms linear; | |
465 } | |
466 | |
467 | |
468 video::-webkit-media-text-track-display { | |
469 position: absolute; | |
470 overflow: hidden; | |
471 white-space: pre-wrap; | |
472 -webkit-box-sizing: border-box; | |
473 flex: 0 0 auto; | |
474 } | |
475 | |
476 video::cue(:future) { | |
477 color: gray; | |
478 } | |
479 | |
480 video::cue(b) { | |
481 font-weight: bold; | |
482 } | |
483 | |
484 video::cue(u) { | |
485 text-decoration: underline; | |
486 } | |
487 | |
488 video::cue(i) { | |
489 font-style: italic; | |
490 } | |
OLD | NEW |