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. */
13 background: center center;
18 transition: opacity 100ms linear;
22 .media-button[state='default']:not(.disabled):not(:hover):not(:active) >
24 .media-button[state='default']:not(.disabled):hover > .default.hover,
25 .media-button[state='default']:not(.disabled):active > .default.active,
26 .media-button[state='playing']:not(.disabled):not(:hover):not(:active) >
28 .media-button[state='playing']:not(.disabled):hover > .playing.hover,
29 .media-button[state='playing']:not(.disabled):active > .playing.active,
30 .media-button[state='ended']:not(.disabled):not(:hover):not(:active) >
32 .media-button[state='ended']:not(.disabled):hover > .ended.hover,
33 .media-button[state='ended']:not(.disabled):active > .ended.active,
34 .media-button.disabled > .disabled {
38 /* Custom sliders for progress and volume. */
40 /* Customize the standard input[type='range']. */
41 .custom-slider > input[type='range'] {
42 -webkit-appearance: none !important; /* Hide the default thumb icon. */
43 background: transparent; /* Hide the standard slider bar */
45 left: -2px; /* Required to align the input element with the parent. */
52 /* Custom thumb icon. */
53 .custom-slider > input[type='range']::-webkit-slider-thumb {
54 -webkit-appearance: none;
55 background-position: center center;
56 background-repeat: no-repeat;
62 /* Custom slider bar (we hide the standard one). */
63 .custom-slider > .bar {
64 /* In order to match the horizontal position of the standard slider bar
65 left and right must be equal to 1/2 of the thumb icon width. */
66 border-bottom-style: solid;
67 border-top-style: solid;
70 pointer-events: none; /* Mouse events pass through to the standard input. */
75 .custom-slider > .bar > .filled,
76 .custom-slider > .bar > .cap {
84 /* The filled portion of the slider bar to the left of the thumb. */
85 .custom-slider > .bar > .filled {
86 border-left-style: none;
87 border-right-style: none;
89 width: 0; /* The element style.width is manipulated from the code. */
92 /* Rounded caps to the left and right of the slider bar. */
93 .custom-slider > .bar > .cap {
97 /* Left cap is always filled, should be the same color as .filled. */
98 .custom-slider > .bar > .cap.left {
99 border-bottom-left-radius: 4px;
100 border-right-style: none;
101 border-top-left-radius: 4px;
105 /* Right cap is always not filled. */
106 .custom-slider > .bar > .cap.right {
107 border-bottom-right-radius: 4px;
108 border-left-style: none;
109 border-top-right-radius: 4px;
113 .custom-slider > .bar,
114 .custom-slider > .bar > .cap.right {
115 background-color: rgba(0, 0, 0, 0.5);
116 border-color: #808080;
119 .custom-slider > .bar > .filled,
120 .custom-slider > .bar > .cap.left {
121 background-image: linear-gradient(#c3c3c3, #d9d9d9);
122 border-color: #d9d9d9;
125 .custom-slider.disabled > .bar > .filled,
126 .custom-slider.disabled > .bar > .cap.left {
127 background-color: rgba(0, 0, 0, 0.5);
128 background-image: none;
131 .custom-slider.disabled > .bar,
132 .custom-slider.disabled > .bar > .filled,
133 .custom-slider.disabled > .bar > .cap {
134 border-color: #404040;
137 .media-button.disabled,
138 .custom-slider.disabled,
139 .custom-slider.readonly {
140 pointer-events: none;
143 /* Progress seek marker (precise time shown on mouse hover. */
145 /* Thin vertical line across the slider bar */
146 .custom-slider > .bar > .seek-mark {
147 background-color: #202020;
155 .custom-slider > .bar > .seek-mark.visible {
159 .custom-slider > .bar > .seek-mark.inverted {
160 background-color: #808080;
163 /* Text label giving the precise time corresponding to the hover position. */
164 .custom-slider > .bar > .seek-mark > .seek-label {
165 -webkit-box-align: center;
166 -webkit-box-orient: horizontal;
167 -webkit-box-pack: center;
169 border-top-left-radius: 2px;
170 border-top-right-radius: 2px;
173 display: -webkit-box;
180 transition: opacity 150ms ease;
183 .custom-slider > .bar > .seek-mark.visible > .seek-label {
187 /* Media controls in order of appearance. */
189 /* Play/pause button. */
191 .media-button.play > .default.normal {
192 background-image: -webkit-image-set(
193 url('../images/media/media_play.png') 1x,
194 url('../images/media/2x/media_play.png') 2x);
197 .media-button.play > .default.hover {
198 background-image: -webkit-image-set(
199 url('../images/media/media_play_hover.png') 1x,
200 url('../images/media/2x/media_play_hover.png') 2x);
203 .media-button.play > .default.active {
204 background-image: -webkit-image-set(
205 url('../images/media/media_play_down.png') 1x,
206 url('../images/media/2x/media_play_down.png') 2x);
209 .media-button.play > .playing.normal {
210 background-image: -webkit-image-set(
211 url('../images/media/media_pause.png') 1x,
212 url('../images/media/2x/media_pause.png') 2x);
215 .media-button.play > .playing.hover {
216 background-image: -webkit-image-set(
217 url('../images/media/media_pause_hover.png') 1x,
218 url('../images/media/2x/media_pause_hover.png') 2x);
221 .media-button.play > .playing.active {
222 background-image: -webkit-image-set(
223 url('../images/media/media_pause_down.png') 1x,
224 url('../images/media/2x/media_pause_down.png') 2x);
227 .media-button.play > .ended.normal {
228 background-image: -webkit-image-set(
229 url('../images/media/media_loop.png') 1x,
230 url('../images/media/2x/media_loop.png') 2x);
233 .media-button.play > .ended.hover {
234 background-image: -webkit-image-set(
235 url('../images/media/media_loop_hover.png') 1x,
236 url('../images/media/2x/media_loop_hover.png') 2x);
239 .media-button.play > .ended.active {
240 background-image: -webkit-image-set(
241 url('../images/media/media_loop_down.png') 1x,
242 url('../images/media/2x/media_loop_down.png') 2x);
245 .media-button.play > .disabled {
246 background-image: -webkit-image-set(
247 url('../images/media/media_play_disabled.png') 1x,
248 url('../images/media/2x/media_play_disabled.png') 2x);
251 /* Time controls: a slider and a text time display. */
254 -webkit-box-align: center;
256 -webkit-box-orient: horizontal;
257 -webkit-box-pack: center;
258 display: -webkit-box;
262 .custom-slider.progress {
264 display: -webkit-box;
266 margin-left: -9px; /* Set the margins at the edges of the slider bar. */
271 .custom-slider.progress > input[type='range']::-webkit-slider-thumb {
272 background-image: -webkit-image-set(
273 url('../images/media/media_slider_thumb.png') 1x,
274 url('../images/media/2x/media_slider_thumb.png') 2x);
278 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover {
279 background-image: -webkit-image-set(
280 url('../images/media/media_slider_thumb_hover.png') 1x,
281 url('../images/media/2x/media_slider_thumb_hover.png') 2x);
284 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active {
285 background-image: -webkit-image-set(
286 url('../images/media/media_slider_thumb_down.png') 1x,
287 url('../images/media/2x/media_slider_thumb_down.png') 2x);
290 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb {
291 background-image: none;
294 .custom-slider.progress > .bar {
295 left: 14px; /* Exactly 1/2 of the thumb width */
301 .time-controls > .time {
308 .time-controls > .time.disabled {
312 /* Invisible div used to compute the width required for the elapsed time. */
313 .time-controls > .time > .duration {
317 .time-controls > .time > .current {
318 -webkit-box-align: center;
319 -webkit-box-orient: horizontal;
320 -webkit-box-pack: end;
322 display: -webkit-box;
329 /* Volume controls: sound button and volume slider */
332 -webkit-box-align: center;
333 -webkit-box-orient: horizontal;
334 -webkit-box-pack: center;
335 display: -webkit-box;
341 .media-button.sound {
345 .media-button.sound[level='0'] > .normal {
346 background-image: -webkit-image-set(
347 url('../images/media/media_sound_disabled.png') 1x,
348 url('../images/media/2x/media_sound_disabled.png') 2x);
351 .media-button.sound[level='0'] > .hover {
352 background-image: -webkit-image-set(
353 url('../images/media/media_sound_disabled_hover.png') 1x,
354 url('../images/media/2x/media_sound_disabled_hover.png') 2x);
357 .media-button.sound[level='0'] > .active {
358 background-image: -webkit-image-set(
359 url('../images/media/media_sound_disabled_down.png') 1x,
360 url('../images/media/2x/media_sound_disabled_down.png') 2x);
364 .media-button.sound[level='1'] > .normal {
365 background-image: -webkit-image-set(
366 url('../images/media/media_sound_level1.png') 1x,
367 url('../images/media/2x/media_sound_level1.png') 2x);
370 .media-button.sound[level='1'] > .hover {
371 background-image: -webkit-image-set(
372 url('../images/media/media_sound_level1_hover.png') 1x,
373 url('../images/media/2x/media_sound_level1_hover.png') 2x);
376 .media-button.sound[level='1'] > .active {
377 background-image: -webkit-image-set(
378 url('../images/media/media_sound_level1_down.png') 1x,
379 url('../images/media/2x/media_sound_level1_down.png') 2x);
383 .media-button.sound[level='2'] > .normal {
384 background-image: -webkit-image-set(
385 url('../images/media/media_sound_level2.png') 1x,
386 url('../images/media/2x/media_sound_level2.png') 2x);
389 .media-button.sound[level='2'] > .hover {
390 background-image: -webkit-image-set(
391 url('../images/media/media_sound_level2_hover.png') 1x,
392 url('../images/media/2x/media_sound_level2_hover.png') 2x);
395 .media-button.sound[level='2'] > .active {
396 background-image: -webkit-image-set(
397 url('../images/media/media_sound_level2_down.png') 1x,
398 url('../images/media/2x/media_sound_level2_down.png') 2x);
402 .media-button.sound[level='3'] > .normal {
403 background-image: -webkit-image-set(
404 url('../images/media/media_sound_full.png') 1x,
405 url('../images/media/2x/media_sound_full.png') 2x);
408 .media-button.sound[level='3'] > .hover {
409 background-image: -webkit-image-set(
410 url('../images/media/media_sound_full_hover.png') 1x,
411 url('../images/media/2x/media_sound_full_hover.png') 2x);
414 .media-button.sound[level='3'] > .active {
415 background-image: -webkit-image-set(
416 url('../images/media/media_sound_full_down.png') 1x,
417 url('../images/media/2x/media_sound_full_down.png') 2x);
421 .media-button.sound > .disabled {
422 background-image: -webkit-image-set(
423 url('../images/media/media_sound_full_disabled.png') 1x,
424 url('../images/media/2x/media_sound_full_disabled.png') 2x);
429 .custom-slider.volume {
435 .custom-slider.volume > input[type='range']::-webkit-slider-thumb {
436 background-image: -webkit-image-set(
437 url('../images/media/media_volume_slider_thumb.png') 1x,
438 url('../images/media/2x/media_volume_slider_thumb.png') 2x);
442 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover {
443 background-image: -webkit-image-set(
444 url('../images/media/media_volume_slider_thumb_hover.png') 1x,
445 url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x);
448 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:active {
449 background-image: -webkit-image-set(
450 url('../images/media/media_volume_slider_thumb_down.png') 1x,
451 url('../images/media/2x/media_volume_slider_thumb_down.png') 2x);
454 .custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb {
455 background-image: none;
458 .custom-slider.volume > .bar {
459 left: 10px; /* Exactly 1/2 of the thumb width */
463 /* Horizontal video control bar, all controls in a row. */
466 -webkit-box-align: center;
467 -webkit-box-orient: horizontal;
468 -webkit-box-pack: center;
471 display: -webkit-box;
475 pointer-events: auto;
480 .media-button.cast > .default.normal {
481 background-image: -webkit-image-set(
482 url('../images/media/media_chromecast.png') 1x,
483 url('../images/media/2x/media_chromecast.png') 2x);
486 .media-button.cast > .default.hover {
487 background-image: -webkit-image-set(
488 url('../images/media/media_chromecast_hover.png') 1x,
489 url('../images/media/2x/media_chromecast_hover.png') 2x);
492 .media-button.cast > .default.active {
493 background-image: -webkit-image-set(
494 url('../images/media/media_chromecast_down.png') 1x,
495 url('../images/media/2x/media_chromecast_down.png') 2x);
498 #video-player[casting] .media-button.cast > .default.normal {
499 background-image: -webkit-image-set(
500 url('../images/media/media_chromecast_casting.png') 1x,
501 url('../images/media/2x/media_chromecast_casting.png') 2x);
504 #video-player[casting] .media-button.cast > .default.hover {
505 background-image: -webkit-image-set(
506 url('../images/media/media_chromecast_casting_hover.png') 1x,
507 url('../images/media/2x/media_chromecast_casting_hover.png') 2x);
510 #video-player[casting] .media-button.cast > .default.active {
511 background-image: -webkit-image-set(
512 url('../images/media/media_chromecast_casting_down.png') 1x,
513 url('../images/media/2x/media_chromecast_casting_down.png') 2x);
520 #video-player[cast-available][castable] .media-button.cast {
525 /* Fullscreen button. */
526 /* There is no final decision whether we need a separate icon when toggled. */
528 .media-button.fullscreen > .normal {
529 background-image: -webkit-image-set(
530 url('../images/media/media_fullscreen.png') 1x,
531 url('../images/media/2x/media_fullscreen.png') 2x);
534 .media-button.fullscreen > .hover {
535 background-image: -webkit-image-set(
536 url('../images/media/media_fullscreen_hover.png') 1x,
537 url('../images/media/2x/media_fullscreen_hover.png') 2x);
540 .media-button.fullscreen > .active {
541 background-image: -webkit-image-set(
542 url('../images/media/media_fullscreen_down.png') 1x,
543 url('../images/media/2x/media_fullscreen_down.png') 2x);
546 .media-button.fullscreen > .disabled {
547 background-image: -webkit-image-set(
548 url('../images/media/media_fullscreen_disabled.png') 1x,
549 url('../images/media/2x/media_fullscreen_disabled.png') 2x);
552 .playback-state-icon {
553 -webkit-animation: none;
554 background-color: #202020;
555 background-position: center center;
556 background-repeat: no-repeat;
557 border-radius: 2.5px;
564 pointer-events: none;
572 background-color: black;
581 pointer-events: none;
584 text-shadow: 0 0 10px black;
590 .text-banner[visible] {
591 -webkit-animation: text-banner-blowup 3000ms;
595 .playback-state-icon[state] {
599 @-webkit-keyframes blowup {
604 -webkit-transform: scale(3);
609 @-webkit-keyframes text-banner-blowup {
611 -webkit-transform: scale(0.5);
615 -webkit-transform: scale(1);
619 -webkit-transform: scale(1);
623 -webkit-transform: scale(3);
628 .playback-state-icon[state='play'] {
629 -webkit-animation: blowup 500ms;
630 background-image: -webkit-image-set(
631 url('../images/media/media_play.png') 1x,
632 url('../images/media/2x/media_play.png') 2x);
635 .playback-state-icon[state='pause'] {
636 -webkit-animation: blowup 500ms;
637 background-image: -webkit-image-set(
638 url('../images/media/media_pause.png') 1x,
639 url('../images/media/2x/media_pause.png') 2x);