ui/file_manager/audio_player/elements/control_panel.css

/* Copyright 2014 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. */

/* Controls bar. */
.controls {
  align-items: center;
  background-color: white;
  display: flex;
  flex-direction: column;
  height: 96px;
  justify-content: center;
  padding: 0;
}

.controls .upper-controls,
.controls .lower-controls {
  box-sizing: border-box;
  height: 48px;
  padding: 8px;
  width: 100%;
}

.audio-controls {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

/* Customized scrollbar for the playlist. */

.media-button {
  background-color: transparent;
  border: 0;
  flex: none;
  height: 32px;
  outline: none;  /* TODO(yoshiki): Show outline only on keyboard focus. */
  padding: 0;
  position: relative;
  width: 32px;
}

.media-button > div,
.media-button.toggle > label > span {
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 100%;
  pointer-events: none;
  transition: opacity 100ms linear;
  width: 100%;
}

.media-button > div {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

/* Time and volume controls. */

.time-volume-controls {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: center;
}

.time-volume-controls > .time-container {
  color: rgb(51, 51, 51);
  cursor: default;
  flex: none;
  font-size: 12px;
  padding: 8px;
  position: relative;
}

.time-container > .time {
  position: absolute;
  right: 8px; /* Should be same as time-container's right padding. */
  top: 8px; /* Should be same as time-container's top padding. */
}

.time-container > .time-spacer {
  opacity: 0; /* This class is intended to be used as invisible spacer. */
}

.time-volume-controls > cr-slider {
  --cr-slider-active-color: rgb(66, 133, 244);
  --cr-slider-knob-color: rgb(64, 138, 241);
}

cr-slider {
  cursor: pointer;
}

#timeSlider {
  flex: 3 1 auto;
  width: 118px;
}

#volumeSlider {
  flex: 1 1 auto;
  width: 82px;
}

/* Media controls in order of appearance. */

.audio-controls {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: center;
}

/* Play/pause button. */

.media-button.toggle input {
  position: absolute;
  visibility: hidden;
}

.media-button.shuffle-mode {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_shuffle.png) 1x,
      url(../assets/200/player_button_shuffle.png) 2x);
  pointer-events: auto;
}

.media-button.repeat-mode {
  margin-left: 8px;
  margin-right: 0;
}

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

.media-button.play {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_play.png) 1x,
      url(../assets/200/player_button_play.png) 2x);
}

:host([playing]) .media-button.play {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_pause.png) 1x,
      url(../assets/200/player_button_pause.png) 2x);
}

.media-button.previous {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_previous.png) 1x,
      url(../assets/200/player_button_previous.png) 2x);
  margin-left: 8px;
  margin-right: 0;
}

.media-button.next {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_next.png) 1x,
      url(../assets/200/player_button_next.png) 2x);
  margin-left: 0;
  margin-right: 8px;
}

.media-button.playlist {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_playlist.png) 1x,
      url(../assets/200/player_button_playlist.png) 2x);
  pointer-events: auto;
}

.media-button.volume {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_volume.png) 1x,
      url(../assets/200/player_button_volume.png) 2x);
  pointer-events: auto;
}

:host([volume='0']) .media-button.volume {
  background-image: -webkit-image-set(
      url(../assets/100/player_button_volume_muted.png) 1x,
      url(../assets/200/player_button_volume_muted.png) 2x);
}

/* Invisible div used to compute the width required for the elapsed time. */
.time-controls > .time > .current {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: flex-end;
  position: absolute;
  top: -1px;
}