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}
606