OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 .media-button { | |
6 height: 28px; | |
7 position: relative; | |
8 width: 26px; | |
9 } | |
10 | |
11 .media-button > div { | |
12 height: 100%; | |
13 opacity: 0; | |
14 pointer-events: none; | |
15 position: absolute; | |
16 transition: opacity 100ms linear; | |
17 width: 100%; | |
18 } | |
19 | |
20 .media-button[state='default']:not(.disabled):not(:hover):not(:active) > | |
21 .default.normal, | |
22 .media-button[state='default']:not(.disabled):hover > .default.hover, | |
23 .media-button[state='default']:not(.disabled):active > .default.active, | |
24 .media-button[state='playing']:not(.disabled):not(:hover):not(:active) > | |
25 .playing.normal, | |
26 .media-button[state='playing']:not(.disabled):hover > .playing.hover, | |
27 .media-button[state='playing']:not(.disabled):active > .playing.active, | |
28 .media-button[state='ended']:not(.disabled):not(:hover):not(:active) > | |
29 .ended.normal, | |
30 .media-button[state='ended']:not(.disabled):hover > .ended.hover, | |
31 .media-button[state='ended']:not(.disabled):active > .ended.active, | |
32 .media-button.disabled > .disabled { | |
33 opacity: 1; | |
34 } | |
35 | |
36 /* Custom sliders for progress and volume. */ | |
37 | |
38 /* Customize the standard input[type='range']. */ | |
39 .custom-slider > input[type='range'] { | |
40 -webkit-appearance: none !important; /* Hide the default thumb icon. */ | |
41 background: transparent; /* Hide the standard slider bar */ | |
42 height: 100%; | |
43 left: -2px; /* Required to align the input element with the parent. */ | |
44 outline: none; | |
45 position: absolute; | |
46 top: -2px; | |
47 width: 100%; | |
48 } | |
49 | |
50 /* Custom thumb icon. */ | |
51 .custom-slider > input[type='range']::-webkit-slider-thumb { | |
52 -webkit-appearance: none; | |
53 background-position: center center; | |
54 background-repeat: no-repeat; | |
55 height: 24px; | |
56 position: relative; | |
57 z-index: 2; | |
58 } | |
59 | |
60 /* Custom slider bar (we hide the standard one). */ | |
61 .custom-slider > .bar { | |
62 /* In order to match the horizontal position of the standard slider bar | |
63 left and right must be equal to 1/2 of the thumb icon width. */ | |
64 border-bottom-style: solid; | |
65 border-top-style: solid; | |
66 border-width: 1px; | |
67 bottom: 11px; | |
68 pointer-events: none; /* Mouse events pass through to the standard input. */ | |
69 position: absolute; | |
70 top: 11px; | |
71 } | |
72 | |
73 .custom-slider > .bar > .filled, | |
74 .custom-slider > .bar > .cap { | |
75 border-style: solid; | |
76 border-width: 1px; | |
77 bottom: -1px; | |
78 position: absolute; | |
79 top: -1px; | |
80 } | |
81 | |
82 /* The filled portion of the slider bar to the left of the thumb. */ | |
83 .custom-slider > .bar > .filled { | |
84 border-left-style: none; | |
85 border-right-style: none; | |
86 left: 0; | |
87 width: 0; /* The element style.width is manipulated from the code. */ | |
88 } | |
89 | |
90 /* Rounded caps to the left and right of the slider bar. */ | |
91 .custom-slider > .bar > .cap { | |
92 width: 4px; | |
93 } | |
94 | |
95 /* Left cap is always filled, should be the same color as .filled. */ | |
96 .custom-slider > .bar > .cap.left { | |
97 border-bottom-left-radius: 4px; | |
98 border-right-style: none; | |
99 border-top-left-radius: 4px; | |
100 right: 100%; | |
101 } | |
102 | |
103 /* Right cap is always not filled. */ | |
104 .custom-slider > .bar > .cap.right { | |
105 border-bottom-right-radius: 4px; | |
106 border-left-style: none; | |
107 border-top-right-radius: 4px; | |
108 left: 100%; | |
109 } | |
110 | |
111 .custom-slider > .bar, | |
112 .custom-slider > .bar > .cap.right { | |
113 background-color: rgba(0, 0, 0, 0.5); | |
114 border-color: #808080; | |
115 } | |
116 | |
117 .custom-slider > .bar > .filled, | |
118 .custom-slider > .bar > .cap.left { | |
119 background-image: linear-gradient(#c3c3c3, #d9d9d9); | |
120 border-color: #d9d9d9; | |
121 } | |
122 | |
123 .custom-slider.disabled > .bar > .filled, | |
124 .custom-slider.disabled > .bar > .cap.left { | |
125 background-color: rgba(0, 0, 0, 0.5); | |
126 background-image: none; | |
127 } | |
128 | |
129 .custom-slider.disabled > .bar, | |
130 .custom-slider.disabled > .bar > .filled, | |
131 .custom-slider.disabled > .bar > .cap { | |
132 border-color: #404040; | |
133 } | |
134 | |
135 .media-button.disabled, | |
136 .custom-slider.disabled, | |
137 .custom-slider.readonly { | |
138 pointer-events: none; | |
139 } | |
140 | |
141 /* Progress seek marker (precise time shown on mouse hover. */ | |
142 | |
143 /* Thin vertical line across the slider bar */ | |
144 .custom-slider > .bar > .seek-mark { | |
145 background-color: #202020; | |
146 bottom: -1px; | |
147 left: 0; | |
148 position: absolute; | |
149 top: -1px; | |
150 width: 0; | |
151 } | |
152 | |
153 .custom-slider > .bar > .seek-mark.visible { | |
154 width: 1px; | |
155 } | |
156 | |
157 .custom-slider > .bar > .seek-mark.inverted { | |
158 background-color: #808080; | |
159 } | |
160 | |
161 /* Text label giving the precise time corresponding to the hover position. */ | |
162 .custom-slider > .bar > .seek-mark > .seek-label { | |
163 -webkit-box-align: center; | |
164 -webkit-box-orient: horizontal; | |
165 -webkit-box-pack: center; | |
166 background: #202020; | |
167 border-top-left-radius: 2px; | |
168 border-top-right-radius: 2px; | |
169 bottom: 19px; | |
170 color: white; | |
171 display: -webkit-box; | |
172 font-size: 13px; | |
173 height: 15px; | |
174 left: 0; | |
175 opacity: 0; | |
176 overflow: hidden; | |
177 position: absolute; | |
178 transition: opacity 150ms ease; | |
179 } | |
180 | |
181 .custom-slider > .bar > .seek-mark.visible > .seek-label { | |
182 opacity: 1; | |
183 } | |
184 | |
185 /* Media controls in order of appearance. */ | |
186 | |
187 /* Play/pause button. */ | |
188 | |
189 .media-button.play { | |
190 margin-left: -7px; | |
191 margin-right: -7px; | |
192 } | |
193 | |
194 .media-button.play > .default.normal { | |
195 background-image: -webkit-image-set( | |
196 url('../images/media/media_play.png') 1x, | |
197 url('../images/media/2x/media_play.png') 2x); | |
198 } | |
199 | |
200 .media-button.play > .default.hover { | |
201 background-image: -webkit-image-set( | |
202 url('../images/media/media_play_hover.png') 1x, | |
203 url('../images/media/2x/media_play_hover.png') 2x); | |
204 } | |
205 | |
206 .media-button.play > .default.active { | |
207 background-image: -webkit-image-set( | |
208 url('../images/media/media_play_down.png') 1x, | |
209 url('../images/media/2x/media_play_down.png') 2x); | |
210 } | |
211 | |
212 .media-button.play > .playing.normal { | |
213 background-image: -webkit-image-set( | |
214 url('../images/media/media_pause.png') 1x, | |
215 url('../images/media/2x/media_pause.png') 2x); | |
216 } | |
217 | |
218 .media-button.play > .playing.hover { | |
219 background-image: -webkit-image-set( | |
220 url('../images/media/media_pause_hover.png') 1x, | |
221 url('../images/media/2x/media_pause_hover.png') 2x); | |
222 } | |
223 | |
224 .media-button.play > .playing.active { | |
225 background-image: -webkit-image-set( | |
226 url('../images/media/media_pause_down.png') 1x, | |
227 url('../images/media/2x/media_pause_down.png') 2x); | |
228 } | |
229 | |
230 .media-button.play > .ended.normal { | |
231 background-image: -webkit-image-set( | |
232 url('../images/media/media_loop.png') 1x, | |
233 url('../images/media/2x/media_loop.png') 2x); | |
234 } | |
235 | |
236 .media-button.play > .ended.hover { | |
237 background-image: -webkit-image-set( | |
238 url('../images/media/media_loop_hover.png') 1x, | |
239 url('../images/media/2x/media_loop_hover.png') 2x); | |
240 } | |
241 | |
242 .media-button.play > .ended.active { | |
243 background-image: -webkit-image-set( | |
244 url('../images/media/media_loop_down.png') 1x, | |
245 url('../images/media/2x/media_loop_down.png') 2x); | |
246 } | |
247 | |
248 .media-button.play > .disabled { | |
249 background-image: -webkit-image-set( | |
250 url('../images/media/media_play_disabled.png') 1x, | |
251 url('../images/media/2x/media_play_disabled.png') 2x); | |
252 } | |
253 | |
254 /* Time controls: a slider and a text time display. */ | |
255 | |
256 .time-controls { | |
257 -webkit-box-align: center; | |
258 -webkit-box-flex: 1; | |
259 -webkit-box-orient: horizontal; | |
260 -webkit-box-pack: center; | |
261 display: -webkit-box; | |
262 height: 100%; | |
263 } | |
264 | |
265 .custom-slider.progress { | |
266 -webkit-box-flex: 1; | |
267 display: -webkit-box; | |
268 height: 100%; | |
269 margin-left: -9px; /* Set the margins at the edges of the slider bar. */ | |
270 margin-right: -9px; | |
271 position: relative; | |
272 } | |
273 | |
274 .custom-slider.progress > input[type='range']::-webkit-slider-thumb { | |
275 background-image: -webkit-image-set( | |
276 url('../images/media/media_slider_thumb.png') 1x, | |
277 url('../images/media/2x/media_slider_thumb.png') 2x); | |
278 width: 28px; | |
279 } | |
280 | |
281 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover { | |
282 background-image: -webkit-image-set( | |
283 url('../images/media/media_slider_thumb_hover.png') 1x, | |
284 url('../images/media/2x/media_slider_thumb_hover.png') 2x); | |
285 } | |
286 | |
287 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active { | |
288 background-image: -webkit-image-set( | |
289 url('../images/media/media_slider_thumb_down.png') 1x, | |
290 url('../images/media/2x/media_slider_thumb_down.png') 2x); | |
291 } | |
292 | |
293 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb { | |
294 background-image: none; | |
295 } | |
296 | |
297 .custom-slider.progress > .bar { | |
298 left: 14px; /* Exactly 1/2 of the thumb width */ | |
299 right: 14px; | |
300 } | |
301 | |
302 /* Time display. */ | |
303 | |
304 .time-controls > .time { | |
305 cursor: default; | |
306 height: 100%; | |
307 margin-left: 15px; | |
308 position: relative; | |
309 } | |
310 | |
311 .time-controls > .time.disabled { | |
312 opacity: 0; | |
313 } | |
314 | |
315 /* Invisible div used to compute the width required for the elapsed time. */ | |
316 .time-controls > .time > .duration { | |
317 color: transparent; | |
318 } | |
319 | |
320 .time-controls > .time > .current { | |
321 -webkit-box-align: center; | |
322 -webkit-box-orient: horizontal; | |
323 -webkit-box-pack: end; | |
324 color: white; | |
325 display: -webkit-box; | |
326 height: 100%; | |
327 position: absolute; | |
328 right: 0; | |
329 top: -1px; | |
330 } | |
331 | |
332 /* Volume controls: sound button and volume slider */ | |
333 | |
334 .volume-controls { | |
335 -webkit-box-align: center; | |
336 -webkit-box-orient: horizontal; | |
337 -webkit-box-pack: center; | |
338 display: -webkit-box; | |
339 height: 100%; | |
340 } | |
341 | |
342 /* Sound button */ | |
343 | |
344 .media-button.sound { | |
345 margin-left: -4px; | |
346 width: 31px; | |
347 } | |
348 | |
349 .media-button.sound[level='0'] > .normal { | |
350 background-image: -webkit-image-set( | |
351 url('../images/media/media_sound_disabled.png') 1x, | |
352 url('../images/media/2x/media_sound_disabled.png') 2x); | |
353 } | |
354 | |
355 .media-button.sound[level='0'] > .hover { | |
356 background-image: -webkit-image-set( | |
357 url('../images/media/media_sound_disabled_hover.png') 1x, | |
358 url('../images/media/2x/media_sound_disabled_hover.png') 2x); | |
359 } | |
360 | |
361 .media-button.sound[level='0'] > .active { | |
362 background-image: -webkit-image-set( | |
363 url('../images/media/media_sound_disabled_down.png') 1x, | |
364 url('../images/media/2x/media_sound_disabled_down.png') 2x); | |
365 } | |
366 | |
367 | |
368 .media-button.sound[level='1'] > .normal { | |
369 background-image: -webkit-image-set( | |
370 url('../images/media/media_sound_level1.png') 1x, | |
371 url('../images/media/2x/media_sound_level1.png') 2x); | |
372 } | |
373 | |
374 .media-button.sound[level='1'] > .hover { | |
375 background-image: -webkit-image-set( | |
376 url('../images/media/media_sound_level1_hover.png') 1x, | |
377 url('../images/media/2x/media_sound_level1_hover.png') 2x); | |
378 } | |
379 | |
380 .media-button.sound[level='1'] > .active { | |
381 background-image: -webkit-image-set( | |
382 url('../images/media/media_sound_level1_down.png') 1x, | |
383 url('../images/media/2x/media_sound_level1_down.png') 2x); | |
384 } | |
385 | |
386 | |
387 .media-button.sound[level='2'] > .normal { | |
388 background-image: -webkit-image-set( | |
389 url('../images/media/media_sound_level2.png') 1x, | |
390 url('../images/media/2x/media_sound_level2.png') 2x); | |
391 } | |
392 | |
393 .media-button.sound[level='2'] > .hover { | |
394 background-image: -webkit-image-set( | |
395 url('../images/media/media_sound_level2_hover.png') 1x, | |
396 url('../images/media/2x/media_sound_level2_hover.png') 2x); | |
397 } | |
398 | |
399 .media-button.sound[level='2'] > .active { | |
400 background-image: -webkit-image-set( | |
401 url('../images/media/media_sound_level2_down.png') 1x, | |
402 url('../images/media/2x/media_sound_level2_down.png') 2x); | |
403 } | |
404 | |
405 | |
406 .media-button.sound[level='3'] > .normal { | |
407 background-image: -webkit-image-set( | |
408 url('../images/media/media_sound_full.png') 1x, | |
409 url('../images/media/2x/media_sound_full.png') 2x); | |
410 } | |
411 | |
412 .media-button.sound[level='3'] > .hover { | |
413 background-image: -webkit-image-set( | |
414 url('../images/media/media_sound_full_hover.png') 1x, | |
415 url('../images/media/2x/media_sound_full_hover.png') 2x); | |
416 } | |
417 | |
418 .media-button.sound[level='3'] > .active { | |
419 background-image: -webkit-image-set( | |
420 url('../images/media/media_sound_full_down.png') 1x, | |
421 url('../images/media/2x/media_sound_full_down.png') 2x); | |
422 } | |
423 | |
424 | |
425 .media-button.sound > .disabled { | |
426 background-image: -webkit-image-set( | |
427 url('../images/media/media_sound_full_disabled.png') 1x, | |
428 url('../images/media/2x/media_sound_full_disabled.png') 2x); | |
429 } | |
430 | |
431 /* Volume slider. */ | |
432 | |
433 .custom-slider.volume { | |
434 height: 100%; | |
435 margin-left: -4px; | |
436 margin-right: -4px; | |
437 position: relative; | |
438 width: 60px; | |
439 } | |
440 | |
441 .custom-slider.volume > input[type='range']::-webkit-slider-thumb { | |
442 background-image: -webkit-image-set( | |
443 url('../images/media/media_volume_slider_thumb.png') 1x, | |
444 url('../images/media/2x/media_volume_slider_thumb.png') 2x); | |
445 width: 20px; | |
446 } | |
447 | |
448 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover { | |
449 background-image: -webkit-image-set( | |
450 url('../images/media/media_volume_slider_thumb_hover.png') 1x, | |
451 url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x); | |
452 } | |
453 | |
454 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:active { | |
455 background-image: -webkit-image-set( | |
456 url('../images/media/media_volume_slider_thumb_down.png') 1x, | |
457 url('../images/media/2x/media_volume_slider_thumb_down.png') 2x); | |
458 } | |
459 | |
460 .custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb { | |
461 background-image: none; | |
462 } | |
463 | |
464 .custom-slider.volume > .bar { | |
465 left: 10px; /* Exactly 1/2 of the thumb width */ | |
466 right: 10px; | |
467 } | |
468 | |
469 /* Horizontal video control bar, all controls in a row. */ | |
470 | |
471 .video-controls { | |
472 -webkit-box-align: center; | |
473 -webkit-box-orient: horizontal; | |
474 -webkit-box-pack: center; | |
475 background: #202020; | |
476 border-radius: 5px; | |
477 display: -webkit-box; | |
478 font-size: 15px; | |
479 height: 30px; | |
480 opacity: 0.8; | |
481 padding-left: 15px; | |
482 padding-right: 15px; | |
483 pointer-events: auto; | |
484 } | |
485 | |
486 .video-controls .time-controls, | |
487 .video-controls .volume-controls { | |
488 margin-left: 15px; | |
489 } | |
490 | |
491 /* Fullscreen button. */ | |
492 /* There is no final decision whether we need a separate icon when toggled. */ | |
493 | |
494 .media-button.fullscreen { | |
495 margin-left: 9px; /* 15px visible margin - 6px whitespace in the icon. */ | |
496 margin-right: -6px; | |
497 } | |
498 | |
499 .media-button.fullscreen > .normal { | |
500 background-image: -webkit-image-set( | |
501 url('../images/media/media_fullscreen.png') 1x, | |
502 url('../images/media/2x/media_fullscreen.png') 2x); | |
503 } | |
504 | |
505 .media-button.fullscreen > .hover { | |
506 background-image: -webkit-image-set( | |
507 url('../images/media/media_fullscreen_hover.png') 1x, | |
508 url('../images/media/2x/media_fullscreen_hover.png') 2x); | |
509 } | |
510 | |
511 .media-button.fullscreen > .active { | |
512 background-image: -webkit-image-set( | |
513 url('../images/media/media_fullscreen_down.png') 1x, | |
514 url('../images/media/2x/media_fullscreen_down.png') 2x); | |
515 } | |
516 | |
517 .media-button.fullscreen > .disabled { | |
518 background-image: -webkit-image-set( | |
519 url('../images/media/media_fullscreen_disabled.png') 1x, | |
520 url('../images/media/2x/media_fullscreen_disabled.png') 2x); | |
521 } | |
522 | |
523 .playback-state-icon { | |
524 background-color: #202020; | |
525 background-position: center center; | |
526 background-repeat: no-repeat; | |
527 border-radius: 2.5px; | |
528 height: 32px; | |
529 left: 50%; | |
530 margin-left: -16px; | |
531 margin-top: -16px; | |
532 opacity: 0; | |
533 pointer-events: none; | |
534 position: absolute; | |
535 top: 50%; | |
536 width: 32px; | |
537 z-index: 2; | |
538 } | |
539 | |
540 .text-banner { | |
541 background-color: black; | |
542 border-radius: 10px; | |
543 color: white; | |
544 font-size: 18px; | |
545 left: 50%; | |
546 margin-left: -250px; | |
547 opacity: 0; | |
548 padding: 10px; | |
549 pointer-events: none; | |
550 position: absolute; | |
551 text-align: center; | |
552 text-shadow: 0 0 10px black; | |
553 top: 20%; | |
554 width: 500px; | |
555 z-index: 2; | |
556 } | |
557 | |
558 .text-banner[visible] { | |
559 -webkit-animation: text-banner-blowup 3000ms; | |
560 } | |
561 | |
562 .playback-state-icon[state] { | |
563 -webkit-animation: blowup 500ms; | |
564 } | |
565 | |
566 @-webkit-keyframes blowup { | |
567 from { | |
568 opacity: 1; | |
569 } | |
570 to { | |
571 -webkit-transform: scale(3); | |
572 opacity: 0; | |
573 } | |
574 } | |
575 | |
576 @-webkit-keyframes text-banner-blowup { | |
577 from { | |
578 -webkit-transform: scale(0.5); | |
579 opacity: 0; | |
580 } | |
581 20% { | |
582 -webkit-transform: scale(1); | |
583 opacity: 0.75; | |
584 } | |
585 80% { | |
586 -webkit-transform: scale(1); | |
587 opacity: 0.75; | |
588 } | |
589 to { | |
590 -webkit-transform: scale(3); | |
591 opacity: 0; | |
592 } | |
593 } | |
594 | |
595 .playback-state-icon[state='play'] { | |
596 background-image: -webkit-image-set( | |
597 url('../images/media/media_play.png') 1x, | |
598 url('../images/media/2x/media_play.png') 2x); | |
599 } | |
600 | |
601 .playback-state-icon[state='pause'] { | |
602 background-image: -webkit-image-set( | |
603 url('../images/media/media_pause.png') 1x, | |
604 url('../images/media/2x/media_pause.png') 2x); | |
605 } | |
OLD | NEW |