OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2009 Apple Inc. All rights reserved. | |
3 * Copyright (C) 2015 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: 32px; | |
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: Segoe, "Helvetica Neue", Roboto, 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 height: 32px; | |
55 flex-shrink: 0; | |
56 bottom: 0; | |
57 text-indent: 0; | |
58 padding: 0; | |
59 margin: 0; | |
60 box-sizing: border-box; | |
61 } | |
62 | |
63 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
64 display: flex; | |
65 flex-direction: row; | |
66 align-items: center; | |
67 /* We use flex-start here to ensure that the play button is visible even | |
68 * if we are too small to show all controls. | |
69 */ | |
70 justify-content: flex-start; | |
71 -webkit-user-select: none; | |
72 position: relative; | |
73 width: 100%; | |
74 z-index: 0; | |
75 overflow: hidden; | |
76 text-align: right; | |
77 bottom: auto; | |
78 height: 32px; | |
79 min-width: 48px; | |
80 line-height: 32px; | |
81 background-color: #fafafa; | |
82 /* The duration is also specified in MediaControlElements.cpp and LayoutTest
s/media/media-controls.js */ | |
83 transition: opacity 0.3s; | |
84 | |
85 font-size: 12px; | |
86 font-weight: normal; /* Make sure that we don't inherit non-defaults. */ | |
87 font-style: normal; | |
88 } | |
89 | |
90 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
91 max-height: 100%; | |
92 max-width: 100%; | |
93 } | |
94 | |
95 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
96 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
97 bottom: 0px; | |
98 } | |
99 | |
100 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | |
101 -webkit-appearance: media-mute-button; | |
102 display: flex; | |
103 flex: none; | |
104 box-sizing: border-box; | |
105 width: 32px; | |
106 height: 32px; | |
107 padding: 0px; | |
108 border-width: 0px; | |
109 background-color: initial; | |
110 color: inherit; | |
111 } | |
112 | |
113 audio::-webkit-media-controls-overlay-enclosure { | |
114 display: none; | |
115 } | |
116 | |
117 video::-webkit-media-controls-overlay-enclosure { | |
118 display: flex; | |
119 position: relative; | |
120 flex-direction: column; | |
121 justify-content: flex-end; | |
122 align-items: center; | |
123 flex: 1 1; | |
124 min-height: 0; | |
125 width: 100%; | |
126 /* prevent disambiguation zooms with the panel */ | |
127 margin-bottom: 10px; | |
128 text-indent: 0; | |
129 box-sizing: border-box; | |
130 overflow: hidden; | |
131 } | |
132 | |
133 video::-webkit-media-controls-overlay-play-button { | |
134 -webkit-appearance: media-overlay-play-button; | |
135 display: flex; | |
136 position: absolute; | |
137 top: 0; | |
138 left: 0; | |
139 margin: 0; | |
140 border-width: 0px; | |
141 background-color: transparent; | |
142 width: 100%; | |
143 height: 100%; | |
144 padding: 0; | |
145 } | |
146 | |
147 video::-internal-media-controls-overlay-cast-button { | |
148 -webkit-appearance: -internal-media-overlay-cast-off-button; | |
149 display: flex; | |
150 position: absolute; | |
151 top: 8px; | |
152 left: 8px; | |
153 margin-left: 0px; | |
154 margin-top: 0px; | |
155 border-width: 0px; | |
156 background-color: transparent; | |
157 width: 32px; | |
158 height: 32px; | |
159 padding: 0; | |
160 transition: opacity 0.3s; | |
161 } | |
162 | |
163 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | |
164 -webkit-appearance: media-play-button; | |
165 display: flex; | |
166 flex: none; | |
167 box-sizing: border-box; | |
168 width: 32px; | |
169 height: 32px; | |
170 padding: 0px; | |
171 border-width: 0px; | |
172 background-color: initial; | |
173 color: inherit; | |
174 } | |
175 | |
176 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | |
177 -webkit-appearance: media-controls-background; | |
178 display: flex; | |
179 flex-direction: row; | |
180 align-items: center; | |
181 justify-content: flex-end; | |
182 flex: 1 1; | |
183 -webkit-user-select: none; | |
184 height: 48px; | |
185 padding: 0; | |
186 min-width: 0; | |
187 } | |
188 | |
189 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display { | |
190 -webkit-appearance: media-current-time-display; | |
191 -webkit-user-select: none; | |
192 flex: none; | |
193 display: flex; | |
194 border: none; | |
195 cursor: default; | |
196 | |
197 height: 32px; | |
198 | |
199 /* text runs right to the edge of the container */ | |
200 padding: 0; | |
201 | |
202 color: #5a5a5a; | |
203 | |
204 letter-spacing: normal; | |
205 word-spacing: normal; | |
206 text-transform: none; | |
207 text-indent: 0; | |
208 text-shadow: none; | |
209 text-decoration: none; | |
210 } | |
211 | |
212 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | |
213 -webkit-appearance: media-current-time-display; | |
214 -webkit-user-select: none; | |
215 flex: none; | |
216 display: flex; | |
217 border: none; | |
218 cursor: default; | |
219 | |
220 height: 32px; | |
221 | |
222 /* text runs right to the edge of the container, plus a little on | |
223 * the left to pad the leading "/" */ | |
224 padding: 0 0 0 4px; | |
225 | |
226 color: #5a5a5a; | |
227 | |
228 letter-spacing: normal; | |
229 word-spacing: normal; | |
230 text-transform: none; | |
231 text-indent: 0; | |
232 text-shadow: none; | |
233 text-decoration: none; | |
234 } | |
235 | |
236 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
237 -webkit-appearance: media-slider; | |
238 display: flex; | |
239 flex: 1 1 auto; | |
240 height: 2px; | |
241 | |
242 /* Leave 6px on either side for the thumb. Use margin so that | |
243 * the slider doesn't extend into it. We also add 12px border. | |
244 */ | |
245 padding: 0; | |
246 margin: 0 18px 0 18px; | |
247 background-color: transparent; | |
248 min-width: 25px; | |
249 border: initial; | |
250 color: inherit; | |
251 } | |
252 | |
253 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | |
254 -webkit-appearance: media-volume-slider; | |
255 display: flex; | |
256 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
257 * and be aesthetically pleasing. | |
258 */ | |
259 flex: 1 1.9 auto; | |
260 height: 2px; | |
261 max-width: 70px; | |
262 /* Leave room for the thumb, which has 6px radius. Use margin rather | |
263 * than padding so that the slider doesn't extend into it. We also | |
264 * leave an addition 12px margin. | |
265 */ | |
266 padding: 0; | |
267 margin: 0 18px 0 18px; | |
268 background-color: transparent; | |
269 min-width: 25px; | |
270 border: initial; | |
271 color: inherit; | |
272 } | |
273 | |
274 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
275 https://code.google.com/p/chromium/issues/detail?id=112508 | |
276 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
277 */ | |
278 input[type="range" i]::-webkit-media-slider-container { | |
279 display: flex; | |
280 align-items: center; | |
281 flex-direction: row; /* This property is updated by C++ code. */ | |
282 box-sizing: border-box; | |
283 /** this positions the slider thumb for both time and volume. */ | |
284 height: 2px; | |
285 width: 100%; | |
286 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | |
287 } | |
288 | |
289 /* The negative right margin causes the track to overflow its container. */ | |
290 input[type="range" i]::-webkit-media-slider-container > div { | |
291 margin-right: -18px; /* box is 36px wide, get to the middle */ | |
292 margin-left: -18px; | |
293 } | |
294 | |
295 input[type="range" i]::-webkit-media-slider-thumb { | |
296 box-sizing: border-box; | |
297 width: 48px; | |
298 height: 48px; | |
299 padding: 0px; | |
300 } | |
301 | |
302 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | |
303 -webkit-appearance: media-enter-fullscreen-button; | |
304 display: flex; | |
305 flex: none; | |
306 overflow: hidden; | |
307 box-sizing: border-box; | |
308 width: 32px; | |
309 height: 32px; | |
310 padding: 0px; | |
311 border-width: 0px; | |
312 background-color: initial; | |
313 color: inherit; | |
314 } | |
315 | |
316 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
t-button { | |
317 -webkit-appearance: -internal-media-cast-off-button; | |
318 display: flex; | |
319 flex: none; | |
320 box-sizing: border-box; | |
321 width: 32px; | |
322 height: 32px; | |
323 padding: 0px; | |
324 border-width: 0px; | |
325 margin-left: 0px; | |
326 margin-right: 0px; | |
327 background-color: initial; | |
328 color: inherit; | |
329 } | |
330 | |
331 audio::-webkit-media-controls-toggle-closed-captions-button { | |
332 display: none; | |
333 } | |
334 | |
335 video::-webkit-media-controls-toggle-closed-captions-button { | |
336 -webkit-appearance: media-toggle-closed-captions-button; | |
337 display: flex; | |
338 flex: none; | |
339 box-sizing: border-box; | |
340 width: 32px; | |
341 height: 32px; | |
342 padding: 0px; | |
343 border-width: 0px; | |
344 margin-left: 0px; | |
345 margin-right: 0px; | |
346 background-color: initial; | |
347 color: inherit; | |
348 } | |
349 | |
350 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con
trols-fullscreen-volume-slider { | |
351 display: none; | |
352 } | |
353 | |
354 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media
-controls-fullscreen-volume-min-button { | |
355 display: none; | |
356 } | |
357 | |
358 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media
-controls-fullscreen-volume-max-button { | |
359 display: none; | |
360 } | |
361 | |
362 video::-internal-media-controls-text-track-list, video::-internal-media-controls
-overflow-menu-list, audio::-internal-media-controls-overflow-menu-list { | |
363 position: absolute; | |
364 bottom: 4px; | |
365 right: 4px; | |
366 background-color: #fafafa; | |
367 max-width: 50%; | |
368 max-height: 250px; | |
369 min-width: 150px; | |
370 overflow-x: hidden; | |
371 overflow-y: auto; | |
372 white-space: nowrap; | |
373 font-size: 14px; | |
374 border-radius: 1px; | |
375 box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.14), | |
376 0 3px 28px 2px rgba(0, 0, 0, 0.12), | |
377 0 5px 10px -3px rgba(0, 0, 0, 0.4); | |
378 } | |
379 | |
380 video::-internal-media-controls-text-track-list-item { | |
381 display: block; | |
382 color: #424242; | |
383 text-align: start; | |
384 line-height: 40px; | |
385 padding-right: 16px; | |
386 text-overflow: ellipsis; | |
387 } | |
388 | |
389 video::-internal-media-controls-text-track-list-item:hover, video::-internal-med
ia-controls-overflow-menu-list-item:hover, audio::-internal-media-controls-overf
low-menu-list-item:hover { | |
390 background-color: #e0e0e0; | |
391 } | |
392 | |
393 video::-internal-media-controls-text-track-list-item-input { | |
394 -webkit-appearance: -internal-media-track-selection-checkmark; | |
395 visibility: hidden; | |
396 left: 0; | |
397 vertical-align: middle; | |
398 margin: 0 5px 0 0; | |
399 width: 16px; | |
400 height: 16px; | |
401 margin-left: 12px; | |
402 } | |
403 | |
404 video::-internal-media-controls-text-track-list-item-input:checked { | |
405 visibility: visible; | |
406 } | |
407 | |
408 video::-internal-media-controls-text-track-list-kind-captions { | |
409 -webkit-appearance: -internal-media-closed-captions-icon; | |
410 height: 20px; | |
411 width: 20px; | |
412 margin-left: 10px; | |
413 vertical-align: middle; | |
414 } | |
415 | |
416 video::-internal-media-controls-text-track-list-kind-subtitles { | |
417 -webkit-appearance: -internal-media-subtitles-icon; | |
418 height: 20px; | |
419 width: 20px; | |
420 margin-left: 10px; | |
421 vertical-align: middle; | |
422 } | |
423 | |
424 video::-internal-media-controls-overflow-button, audio::-internal-media-controls
-overflow-button { | |
425 -webkit-appearance: -internal-media-overflow-button; | |
426 display: flex; | |
427 flex: none; | |
428 box-sizing: border-box; | |
429 width: 32px; | |
430 height: 32px; | |
431 padding: 0px; | |
432 border-width: 0px; | |
433 margin-left: 0px; | |
434 margin-right: 0px; | |
435 background-color: initial; | |
436 color: inherit; | |
437 } | |
438 | |
439 video::-internal-media-controls-download-button, audio::-internal-media-controls
-download-button { | |
440 -webkit-appearance: -internal-media-download-button; | |
441 display: flex; | |
442 flex: none; | |
443 box-sizing: border-box; | |
444 width: 32px; | |
445 height: 32px; | |
446 padding: 0px; | |
447 border-width: 0px; | |
448 margin-left: 0px; | |
449 margin-right: 0px; | |
450 background-color: initial; | |
451 color: inherit; | |
452 } | |
453 | |
454 video::-internal-media-controls-overflow-menu-list-item, audio::-internal-media-
controls-overflow-menu-list-item { | |
455 display: block; | |
456 color: #424242; | |
457 line-height: 40px; | |
458 padding-left: 28px; | |
459 } | |
460 | |
461 video::-webkit-media-text-track-container { | |
462 position: relative; | |
463 width: inherit; | |
464 height: inherit; | |
465 overflow: hidden; | |
466 | |
467 font: 22px sans-serif; | |
468 text-align: center; | |
469 color: rgba(255, 255, 255, 1); | |
470 | |
471 letter-spacing: normal; | |
472 word-spacing: normal; | |
473 text-transform: none; | |
474 text-indent: 0; | |
475 text-decoration: none; | |
476 pointer-events: none; | |
477 -webkit-user-select: none; | |
478 word-break: break-word; | |
479 } | |
480 | |
481 video::cue { | |
482 display: inline; | |
483 | |
484 background-color: rgba(0, 0, 0, 0.8); | |
485 padding: 2px 2px; | |
486 } | |
487 | |
488 video::-webkit-media-text-track-region { | |
489 position: absolute; | |
490 line-height: 5.33vh; | |
491 writing-mode: horizontal-tb; | |
492 background: rgba(0, 0, 0, 0.8); | |
493 color: rgba(255, 255, 255, 1); | |
494 word-wrap: break-word; | |
495 overflow-wrap: break-word; | |
496 overflow: hidden; | |
497 } | |
498 | |
499 video::-webkit-media-text-track-region-container { | |
500 position: relative; | |
501 | |
502 display: flex; | |
503 flex-flow: column; | |
504 flex-direction: column; | |
505 } | |
506 | |
507 video::-webkit-media-text-track-region-container.scrolling { | |
508 transition: top 433ms linear; | |
509 } | |
510 | |
511 | |
512 video::-webkit-media-text-track-display { | |
513 position: absolute; | |
514 overflow: hidden; | |
515 white-space: pre-wrap; | |
516 -webkit-box-sizing: border-box; | |
517 flex: 0 0 auto; | |
518 } | |
519 | |
520 video::cue(:future) { | |
521 color: gray; | |
522 } | |
523 | |
524 video::cue(b) { | |
525 font-weight: bold; | |
526 } | |
527 | |
528 video::cue(u) { | |
529 text-decoration: underline; | |
530 } | |
531 | |
532 video::cue(i) { | |
533 font-style: italic; | |
534 } | |
OLD | NEW |