| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* Common styles for media buttons. */ |
| |
| .media-button { |
| background-position: center; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 32px; |
| position: relative; |
| width: 32px; |
| } |
| |
| .media-button.disabled { |
| background-color: transparent; |
| opacity: 0.26; |
| } |
| |
| .media-button.disabled, |
| paper-slider[disabled], |
| paper-slider.readonly { |
| pointer-events: none; |
| } |
| |
| /* Media controls in order of appearance. */ |
| |
| /* Play/pause button. */ |
| |
| .media-button.play { |
| background-image: -webkit-image-set( |
| url(../images/media/media_play.png) 1x, |
| url(../images/media/2x/media_play.png) 2x); |
| } |
| |
| .media-button.play[state='playing'] { |
| background-image: -webkit-image-set( |
| url(../images/media/media_pause.png) 1x, |
| url(../images/media/2x/media_pause.png) 2x); |
| } |
| |
| /* Time controls: a slider and a text time display. */ |
| |
| .time-controls { |
| display: flex; |
| flex: auto; |
| height: 100%; |
| } |
| |
| /* Time display. */ |
| |
| .time-controls > .time { |
| cursor: default; |
| flex: none; |
| height: 100%; |
| margin: 0 8px; |
| position: relative; |
| } |
| |
| .time-controls > .time.disabled { |
| opacity: 0; |
| } |
| |
| /* Invisible div used to compute the width required for the elapsed time. */ |
| .time-controls > .time > .spacer { |
| color: transparent; |
| } |
| |
| .time-controls > .time > .current { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: end; |
| color: rgb(51, 51, 51); |
| display: -webkit-box; |
| height: 100%; |
| position: absolute; |
| right: 0; |
| } |
| |
| /* Progress slider. */ |
| |
| .time-controls > .progress { |
| flex: auto; |
| height: 100%; |
| position: relative; |
| } |
| |
| /* Volume controls: sound button and volume slider */ |
| |
| .volume-controls { |
| flex: none; |
| height: 100%; |
| margin: 0 8px; |
| } |
| |
| /* Sound button */ |
| |
| .media-button.sound { |
| background-image: -webkit-image-set( |
| url(../images/media/media_volume.png) 1x, |
| url(../images/media/2x/media_volume.png) 2x); |
| } |
| |
| .media-button.sound[level='0'] { |
| background-image: -webkit-image-set( |
| url(../images/media/media_volume_mute.png) 1x, |
| url(../images/media/2x/media_volume_mute.png) 2x); |
| } |
| |
| /* Volume slider. */ |
| |
| paper-slider.volume { |
| height: 100%; |
| position: relative; |
| width: 110px; |
| } |
| |
| /* Horizontal video control bar, all controls in a row. */ |
| |
| .video-controls { |
| background: rgb(250, 250, 250); |
| display: flex; |
| font-size: 13px; |
| height: 32px; |
| padding: 8px; |
| pointer-events: auto; |
| } |
| |
| /* Cast button. */ |
| |
| .media-button.cast { |
| background-image: -webkit-image-set( |
| url(../images/media/media_chromecast.png) 1x, |
| url(../images/media/2x/media_chromecast.png) 2x); |
| display: none; |
| border-radius: 2px; |
| } |
| |
| /* Reset browser's button style. */ |
| .media-button.cast { |
| background-color: transparent; |
| border: none; |
| cursor: pointer; |
| outline: none; |
| } |
| |
| #video-player[cast-available][castable] .media-button.cast { |
| display: block; |
| } |
| |
| #video-player[casting] .media-button.cast { |
| background-image: -webkit-image-set( |
| url(../images/media/media_chromecast_casting.png) 1x, |
| url(../images/media/2x/media_chromecast_casting.png) 2x); |
| } |
| |
| .media-button.cast:focus:not(.using-mouse) { |
| box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5); |
| } |
| |
| /* Fullscreen button. */ |
| /* There is no final decision whether we need a separate icon when toggled. */ |
| |
| .media-button.fullscreen { |
| background-image: -webkit-image-set( |
| url(../images/media/media_fullscreen.png) 1x, |
| url(../images/media/2x/media_fullscreen.png) 2x); |
| } |
| |
| #controls[fullscreen] .media-button.fullscreen { |
| background-image: -webkit-image-set( |
| url(../images/media/media_fullscreen_exit.png) 1x, |
| url(../images/media/2x/media_fullscreen_exit.png) 2x); |
| } |
| |
| .playback-state-icon { |
| -webkit-animation: none; |
| background-position: center center; |
| background-repeat: no-repeat; |
| display: none; |
| height: 32px; |
| left: 50%; |
| margin-left: -16px; |
| margin-top: -16px; |
| opacity: 0; |
| pointer-events: none; |
| position: absolute; |
| top: 50%; |
| width: 32px; |
| z-index: 2; |
| } |
| |
| .text-banner { |
| background-color: black; |
| border-radius: 10px; |
| color: white; |
| display: none; |
| font-size: 18px; |
| left: 50%; |
| margin-left: -250px; |
| opacity: 0; |
| padding: 10px; |
| pointer-events: none; |
| position: absolute; |
| text-align: center; |
| text-shadow: 0 0 10px black; |
| top: 20%; |
| width: 500px; |
| z-index: 2; |
| } |
| |
| .text-banner[visible] { |
| -webkit-animation: text-banner-blowup 3000ms; |
| display: block; |
| } |
| |
| .playback-state-icon[state] { |
| display: block; |
| } |
| |
| @-webkit-keyframes blowup { |
| from { |
| opacity: 1; |
| } |
| to { |
| -webkit-transform: scale(3); |
| opacity: 0; |
| } |
| } |
| |
| @-webkit-keyframes text-banner-blowup { |
| from { |
| -webkit-transform: scale(0.5); |
| opacity: 0; |
| } |
| 20% { |
| -webkit-transform: scale(1); |
| opacity: 0.75; |
| } |
| 80% { |
| -webkit-transform: scale(1); |
| opacity: 0.75; |
| } |
| to { |
| -webkit-transform: scale(3); |
| opacity: 0; |
| } |
| } |
| |
| .playback-state-icon[state='play'] { |
| -webkit-animation: blowup 500ms; |
| background-image: -webkit-image-set( |
| url(../images/media/media_play_onscreen.png) 1x, |
| url(../images/media/2x/media_play_onscreen.png) 2x); |
| } |
| |
| .playback-state-icon[state='pause'] { |
| -webkit-animation: blowup 500ms; |
| background-image: -webkit-image-set( |
| url(../images/media/media_pause_onscreen.png) 1x, |
| url(../images/media/2x/media_pause_onscreen.png) 2x); |
| } |