chrome/browser/resources/file_manager/foreground/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. */

.media-button {
  height: 28px;
  position: relative;
  width: 26px;
}

.media-button > div {
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 100ms linear;
  width: 100%;
}

.media-button[state='default']:not(.disabled):not(:hover):not(:active) >
    .default.normal,
.media-button[state='default']:not(.disabled):hover > .default.hover,
.media-button[state='default']:not(.disabled):active > .default.active,
.media-button[state='playing']:not(.disabled):not(:hover):not(:active) >
    .playing.normal,
.media-button[state='playing']:not(.disabled):hover > .playing.hover,
.media-button[state='playing']:not(.disabled):active > .playing.active,
.media-button[state='ended']:not(.disabled):not(:hover):not(:active) >
    .ended.normal,
.media-button[state='ended']:not(.disabled):hover > .ended.hover,
.media-button[state='ended']:not(.disabled):active > .ended.active,
.media-button.disabled > .disabled {
  opacity: 1;
}

/* Custom sliders for progress and volume. */

/* Customize the standard input[type='range']. */
.custom-slider > input[type='range'] {
  -webkit-appearance: none !important;  /* Hide the default thumb icon. */
  background: transparent;  /* Hide the standard slider bar */
  height: 100%;
  left: -2px;  /* Required to align the input element with the parent. */
  outline: none;
  position: absolute;
  top: -2px;
  width: 100%;
}

/* Custom thumb icon. */
.custom-slider > input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-position: center center;
  background-repeat: no-repeat;
  height: 24px;
  position: relative;
  z-index: 2;
}

/* Custom slider bar (we hide the standard one). */
.custom-slider > .bar {
  /* In order to match the horizontal position of the standard slider bar
     left and right must be equal to 1/2 of the thumb icon width. */
  border-bottom-style: solid;
  border-top-style: solid;
  border-width: 1px;
  bottom: 11px;
  pointer-events: none;  /* Mouse events pass through to the standard input. */
  position: absolute;
  top: 11px;
}

.custom-slider > .bar > .filled,
.custom-slider > .bar > .cap {
  border-style: solid;
  border-width: 1px;
  bottom: -1px;
  position: absolute;
  top: -1px;
}

/* The filled portion of the slider bar to the left of the thumb. */
.custom-slider > .bar > .filled {
  border-left-style: none;
  border-right-style: none;
  left: 0;
  width: 0; /* The element style.width is manipulated from the code. */
}

/* Rounded caps to the left and right of the slider bar. */
.custom-slider > .bar > .cap {
  width: 4px;
}

/* Left cap is always filled, should be the same color as .filled. */
.custom-slider > .bar > .cap.left {
  border-bottom-left-radius: 4px;
  border-right-style: none;
  border-top-left-radius: 4px;
  right: 100%;
}

/* Right cap is always not filled. */
.custom-slider > .bar > .cap.right {
  border-bottom-right-radius: 4px;
  border-left-style: none;
  border-top-right-radius: 4px;
  left: 100%;
}

.custom-slider > .bar,
.custom-slider > .bar > .cap.right {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #808080;
}

.custom-slider > .bar > .filled,
.custom-slider > .bar > .cap.left {
  background-image: linear-gradient(#c3c3c3, #d9d9d9);
  border-color: #d9d9d9;
}

.custom-slider.disabled  > .bar > .filled,
.custom-slider.disabled  > .bar > .cap.left {
  background-color: rgba(0, 0, 0, 0.5);
  background-image: none;
}

.custom-slider.disabled  > .bar,
.custom-slider.disabled  > .bar > .filled,
.custom-slider.disabled  > .bar > .cap {
  border-color: #404040;
}

.media-button.disabled,
.custom-slider.disabled,
.custom-slider.readonly {
  pointer-events: none;
}

/* Progress seek marker (precise time shown on mouse hover. */

/* Thin vertical line across the slider bar */
.custom-slider > .bar > .seek-mark {
  background-color: #202020;
  bottom: -1px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 0;
}

.custom-slider > .bar > .seek-mark.visible {
  width: 1px;
}

.custom-slider > .bar > .seek-mark.inverted {
  background-color: #808080;
}

/* Text label giving the precise time corresponding to the hover position. */
.custom-slider > .bar > .seek-mark > .seek-label {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  background: #202020;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  bottom: 19px;
  color: white;
  display: -webkit-box;
  font-size: 13px;
  height: 15px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transition: opacity 150ms ease;
}

.custom-slider > .bar > .seek-mark.visible > .seek-label {
  opacity: 1;
}

/* Media controls in order of appearance. */

/* Play/pause button. */

.media-button.play {
  margin-left: -7px;
  margin-right: -7px;
}

.media-button.play > .default.normal {
  background-image: -webkit-image-set(
    url('../images/media/media_play.png') 1x,
    url('../images/media/2x/media_play.png') 2x);
}

.media-button.play > .default.hover {
  background-image: -webkit-image-set(
    url('../images/media/media_play_hover.png') 1x,
    url('../images/media/2x/media_play_hover.png') 2x);
}

.media-button.play > .default.active {
  background-image: -webkit-image-set(
    url('../images/media/media_play_down.png') 1x,
    url('../images/media/2x/media_play_down.png') 2x);
}

.media-button.play > .playing.normal {
  background-image: -webkit-image-set(
    url('../images/media/media_pause.png') 1x,
    url('../images/media/2x/media_pause.png') 2x);
}

.media-button.play > .playing.hover {
  background-image: -webkit-image-set(
    url('../images/media/media_pause_hover.png') 1x,
    url('../images/media/2x/media_pause_hover.png') 2x);
}

.media-button.play > .playing.active {
  background-image: -webkit-image-set(
    url('../images/media/media_pause_down.png') 1x,
    url('../images/media/2x/media_pause_down.png') 2x);
}

.media-button.play > .ended.normal {
  background-image: -webkit-image-set(
    url('../images/media/media_loop.png') 1x,
    url('../images/media/2x/media_loop.png') 2x);
}

.media-button.play > .ended.hover {
  background-image: -webkit-image-set(
    url('../images/media/media_loop_hover.png') 1x,
    url('../images/media/2x/media_loop_hover.png') 2x);
}

.media-button.play > .ended.active {
  background-image: -webkit-image-set(
    url('../images/media/media_loop_down.png') 1x,
    url('../images/media/2x/media_loop_down.png') 2x);
}

.media-button.play > .disabled {
  background-image: -webkit-image-set(
    url('../images/media/media_play_disabled.png') 1x,
    url('../images/media/2x/media_play_disabled.png') 2x);
}

/* Time controls: a slider and a text time display. */

.time-controls {
  -webkit-box-align: center;
  -webkit-box-flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  display: -webkit-box;
  height: 100%;
}

.custom-slider.progress {
  -webkit-box-flex: 1;
  display: -webkit-box;
  height: 100%;
  margin-left: -9px;  /* Set the margins at the edges of the slider bar. */
  margin-right: -9px;
  position: relative;
}

.custom-slider.progress > input[type='range']::-webkit-slider-thumb {
  background-image: -webkit-image-set(
    url('../images/media/media_slider_thumb.png') 1x,
    url('../images/media/2x/media_slider_thumb.png') 2x);
  width: 28px;
}

.custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover {
  background-image: -webkit-image-set(
    url('../images/media/media_slider_thumb_hover.png') 1x,
    url('../images/media/2x/media_slider_thumb_hover.png') 2x);
}

.custom-slider.progress > input[type='range']::-webkit-slider-thumb:active {
  background-image: -webkit-image-set(
    url('../images/media/media_slider_thumb_down.png') 1x,
    url('../images/media/2x/media_slider_thumb_down.png') 2x);
}

.custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb {
  background-image: none;
}

.custom-slider.progress > .bar {
  left: 14px;  /* Exactly 1/2 of the thumb width */
  right: 14px;
}

/* Time display. */

.time-controls > .time {
  cursor: default;
  height: 100%;
  margin-left: 15px;
  position: relative;
}

.time-controls > .time.disabled {
  opacity: 0;
}

/* Invisible div used to compute the width required for the elapsed time. */
.time-controls > .time > .duration {
  color: transparent;
}

.time-controls > .time > .current {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
  color: white;
  display: -webkit-box;
  height: 100%;
  position: absolute;
  right: 0;
  top: -1px;
}

/* Volume controls: sound button and volume slider */

.volume-controls {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  display: -webkit-box;
  height: 100%;
}

/* Sound button */

.media-button.sound {
  margin-left: -4px;
  width: 31px;
}

.media-button.sound[level='0'] > .normal {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_disabled.png') 1x,
    url('../images/media/2x/media_sound_disabled.png') 2x);
}

.media-button.sound[level='0'] > .hover {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_disabled_hover.png') 1x,
    url('../images/media/2x/media_sound_disabled_hover.png') 2x);
}

.media-button.sound[level='0'] > .active {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_disabled_down.png') 1x,
    url('../images/media/2x/media_sound_disabled_down.png') 2x);
}


.media-button.sound[level='1'] > .normal {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level1.png') 1x,
    url('../images/media/2x/media_sound_level1.png') 2x);
}

.media-button.sound[level='1'] > .hover {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level1_hover.png') 1x,
    url('../images/media/2x/media_sound_level1_hover.png') 2x);
}

.media-button.sound[level='1'] > .active {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level1_down.png') 1x,
    url('../images/media/2x/media_sound_level1_down.png') 2x);
}


.media-button.sound[level='2'] > .normal {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level2.png') 1x,
    url('../images/media/2x/media_sound_level2.png') 2x);
}

.media-button.sound[level='2'] > .hover {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level2_hover.png') 1x,
    url('../images/media/2x/media_sound_level2_hover.png') 2x);
}

.media-button.sound[level='2'] > .active {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_level2_down.png') 1x,
    url('../images/media/2x/media_sound_level2_down.png') 2x);
}


.media-button.sound[level='3'] > .normal {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_full.png') 1x,
    url('../images/media/2x/media_sound_full.png') 2x);
}

.media-button.sound[level='3'] > .hover {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_full_hover.png') 1x,
    url('../images/media/2x/media_sound_full_hover.png') 2x);
}

.media-button.sound[level='3'] > .active {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_full_down.png') 1x,
    url('../images/media/2x/media_sound_full_down.png') 2x);
}


.media-button.sound > .disabled {
  background-image: -webkit-image-set(
    url('../images/media/media_sound_full_disabled.png') 1x,
    url('../images/media/2x/media_sound_full_disabled.png') 2x);
}

/* Volume slider. */

.custom-slider.volume {
  height: 100%;
  margin-left: -4px;
  margin-right: -4px;
  position: relative;
  width: 60px;
}

.custom-slider.volume > input[type='range']::-webkit-slider-thumb {
  background-image: -webkit-image-set(
    url('../images/media/media_volume_slider_thumb.png') 1x,
    url('../images/media/2x/media_volume_slider_thumb.png') 2x);
  width: 20px;
}

.custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover {
  background-image: -webkit-image-set(
    url('../images/media/media_volume_slider_thumb_hover.png') 1x,
    url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x);
}

.custom-slider.volume > input[type='range']::-webkit-slider-thumb:active {
  background-image: -webkit-image-set(
    url('../images/media/media_volume_slider_thumb_down.png') 1x,
    url('../images/media/2x/media_volume_slider_thumb_down.png') 2x);
}

.custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb {
  background-image: none;
}

.custom-slider.volume > .bar {
  left: 10px;  /* Exactly 1/2 of the thumb width */
  right: 10px;
}

/* Horizontal video control bar, all controls in a row. */

.video-controls {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  background: #202020;
  border-radius: 5px;
  display: -webkit-box;
  font-size: 15px;
  height: 30px;
  opacity: 0.8;
  padding-left: 15px;
  padding-right: 15px;
  pointer-events: auto;
}

.video-controls .time-controls,
.video-controls .volume-controls {
  margin-left: 15px;
}

/* Fullscreen button. */
/* There is no final decision whether we need a separate icon when toggled. */

.media-button.fullscreen {
  margin-left: 9px;  /* 15px visible margin - 6px whitespace in the icon. */
  margin-right: -6px;
}

.media-button.fullscreen > .normal {
  background-image: -webkit-image-set(
    url('../images/media/media_fullscreen.png') 1x,
    url('../images/media/2x/media_fullscreen.png') 2x);
}

.media-button.fullscreen > .hover {
  background-image: -webkit-image-set(
    url('../images/media/media_fullscreen_hover.png') 1x,
    url('../images/media/2x/media_fullscreen_hover.png') 2x);
}

.media-button.fullscreen > .active {
  background-image: -webkit-image-set(
    url('../images/media/media_fullscreen_down.png') 1x,
    url('../images/media/2x/media_fullscreen_down.png') 2x);
}

.media-button.fullscreen > .disabled {
  background-image: -webkit-image-set(
    url('../images/media/media_fullscreen_disabled.png') 1x,
    url('../images/media/2x/media_fullscreen_disabled.png') 2x);
}

.playback-state-icon {
  background-color: #202020;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2.5px;
  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;
  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;
}

.playback-state-icon[state] {
  -webkit-animation: blowup 500ms;
}

@-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'] {
  background-image: -webkit-image-set(
    url('../images/media/media_play.png') 1x,
    url('../images/media/2x/media_play.png') 2x);
}

.playback-state-icon[state='pause'] {
  background-image: -webkit-image-set(
    url('../images/media/media_pause.png') 1x,
    url('../images/media/2x/media_pause.png') 2x);
}