blob: 45b72062a1e91c4561bd804943022b9fc63ebe97 [file] [log] [blame]
<!--
-- Copyright 2015 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.
-->
<style>
/* 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;
}
</style>
<div class="controls">
<div class="upper-controls audio-controls">
<!-- Shuffle toggle button in the bottom line. -->
<files-icon-button toggles
id="shuffle"
class="shuffle-mode media-button toggle"
active="{{shuffle}}">
</files-icon-button>
<!-- RepeatMode toggle button in the bottom line. -->
<repeat-button
id="repeat"
class="repeat-mode media-button"
repeat-mode="{{repeatMode}}">
</repeat-button>
<!-- Prev button in the bottom line. -->
<files-icon-button
id="previous"
class="previous media-button"
on-click="previousClick">
</files-icon-button>
<!-- Play button in the bottom line. -->
<files-icon-button
id="play"
class="play media-button"
on-click="playClick">
</files-icon-button>
<!-- Next button in the bottom line. -->
<files-icon-button
id="next"
class="next media-button"
on-click="nextClick">
</files-icon-button>
<!-- Playlist button in the bottom line. -->
<files-icon-button toggles
id="playList"
class="playlist media-button toggle"
active="{{playlistExpanded}}">
</files-icon-button>
</div>
<div class="lower-controls time-volume-controls">
<!-- Play/pause button and seek slider in the bottom line. -->
<div class="time-container">
<div class="time-spacer">[[computeTimeString_(duration, duration)]]</div>
<div class="time">[[computeTimeString_(time, duration)]]</div>
</div>
<cr-slider id="timeSlider" max="[[duration]]" value="[[time]]"
on-dragging-changed="onSeekingChanged_" no-keybindings></cr-slider>
<!-- Volume button and slider in the bottom line. -->
<files-icon-button
id="volumeButton"
class="volume media-button"
on-click="volumeClick">
</files-icon-button>
<cr-slider id="volumeSlider"></cr-slider>
</div>
</div>