ui/file_manager/video_player/css/media_controls.css

/* 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,
cr-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;
  display: flex;
  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 {
  display: flex;
  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. */

cr-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,
.media-button.cast-button {
  background-image: -webkit-image-set(
    url(../images/media/media_chromecast.png) 1x,
    url(../images/media/2x/media_chromecast.png) 2x);
  border-radius: 2px;
  display: none;
}

/* 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,
#video-player[mr-cast-available][castable] .media-button.cast-button {
  display: block;
}

#video-player[casting] .media-button.cast,
#video-player[casting] .media-button.cast-button {
  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);
}

.media-button.subtitles {
  background-image: -webkit-image-set(
    url(../images/media/media_subtitles.png) 1x,
    url(../images/media/2x/media_subtitles.png) 2x);
}

.media-button.subtitles:not([showing]) {
  opacity: 0.2;
}

.media-button.subtitles[unavailable] {
  display: none;
}

.playback-state-icon {
  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] {
  animation: text-banner-blowup 3000ms;
  display: block;
}

.playback-state-icon[state] {
  display: block;
}

@keyframes blowup {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes text-banner-blowup {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 0.75;
    transform: scale(1);
  }
  80% {
    opacity: 0.75;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.playback-state-icon[state='play'] {
  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'] {
  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);
}