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

body {
  padding: 0;
  -webkit-user-select: none;
}

.audio-player {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  color: white;
  background-color: #1d1d1d;

  font-family: Open Sans,Droid Sans Fallback,sans-serif;
  font-size: 10pt;

  cursor: default;
}

/* Title buttons.
   In the collapsed/single-track mode they overlap the first track. */

.title-button {
  position: absolute;
  width: 29px;
  height: 29px;
  top: 0;
  opacity: 0.4;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

.title-button:hover {
  background-color: #3c7eff !important;
  opacity: 1;
}

.audio-player:not(.collapsed):not(.single-track) > .title-button {
  background-color: #1f1f1f;
}

.title-button.close {
  right: 0;
  background-image: url(../images/media/media_close.png);
}

.title-button.collapse {
  right: 29px;
  background-image: url(../images/media/media_collapse.png);
}

.collapsed .title-button.collapse {
  background-image: url(../images/media/media_expand.png);
}

.single-track .title-button.collapse {
  display: none;
}

/* Common properties for track containers. */
.audio-player > .track-list,
.audio-player > .track-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;  /* Room for the controls bar. */
}

/* Scrollable list of tracks.
  Displayed in expanded mode if there is more than one track. */
.audio-player > .track-list {
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: center;
  -webkit-box-pack: start;

  overflow-x: hidden;
  overflow-y: auto;
}

/* A single track container.
  Displayed in the compact mode or when there is only one track. */
.audio-player > .track-stack {
  height: 58px;
}

.audio-player.collapsed > .track-list,
.audio-player.single_track > .track-list,
.audio-player:not(.collapsed):not(.single-track) > .track-stack {
  opacity: 0;
  pointer-events: none;
}

/* Track item. */
.track {
  width: 100%;
  height: 58px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: start;
}

/* In the expanded mode the selected track is highlighted. */
.track-list .track.selected {
  background-color: #2d2d2d;
}

.track-list .track:hover {
  background-color: #272727 !important;
}

.track-list .track:not(.selected) .data {
  opacity: 0.7;
}

/* In the compact mode all tracks are in the same position, only the selected
  is visible.*/
.track-stack > .track {
  position: absolute;
  top: 0;
}

.track-stack > .track.selected {
  z-index: 1;
}

/* Opacity transition is controlled differently for the text and the artwork.
   Text transition looks better if fade-in and fade-out go in parallel.
   For the artwork we start fading out the old icon only after the new one
   is completely opaque (otherwise when transitioning between identical icons
   we see some fading because the background transpires). */
.track-stack > .track:not(.selected) .data,
.track-stack > .track:not(.visible) .art {
  -webkit-transition: opacity 220ms ease-out;
  opacity: 0;
}

/* Track data. */

.track .art {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 4px 0px 6px 4px;
  -webkit-box-sizing: border-box;
}

.track .art.blank {
  border: 1px solid #333;
  background-color: #111;
}

.track .art img {
  width: 100%;
  height: 100%;
}

.track .art.blank img {
  display: none;
}

.noart .track .art {
  display: none;
}

.track .data {
  margin-right: 4px;
  margin-left: 8px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-flex: 1;
}

.track .data .data-title,
.track .data .data-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track .data .data-title {
  font-weight: bold;
}

.single-track .data-title {
  padding-right: 20px;
}

.collapsed:not(.single-track) .data-title {
  padding-right: 50px;
}

/* Controls bar. */

.audio-controls {
  position: absolute;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  padding: 0 0 4px 13px;

  background-color: #2D2D2D;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

.audio-controls .media-button {
  width: 29px;
  height: 29px;
  margin-top: 1px;
}

.audio-controls .media-button.play {
  margin-left: -10px;
  margin-right: -8px;
}

.audio-controls .media-button.play > .state0.normal{
  background-image: url(../images/media/media_play_audio.png);
}

.audio-controls .media-button.play > .state0.hover {
  background-image: url(../images/media/media_play_audio_hover.png);
}

.audio-controls .media-button.play > .state0.active {
  background-image: url(../images/media/media_play_audio_down.png);
}

.audio-controls .media-button.play > .state1.normal {
  background-image: url(../images/media/media_pause_audio.png);
}

.audio-controls .media-button.play > .state1.hover {
  background-image: url(../images/media/media_pause_audio_hover.png);
}

.audio-controls .media-button.play > .state1.active {
  background-image: url(../images/media/media_pause_audio_down.png);
}

.audio-controls .time-controls {
  margin-left: 10px;
  margin-right: 9px;
}

.audio-controls .time-controls .time {
  margin-left: 11px;
}

.media-button.previous {
  margin-left: -2px;
}

.media-button.previous > .normal {
  background-image: url(../images/media/media_previous.png);
}

.media-button.previous > .hover {
  background-image: url(../images/media/media_previous_hover.png);
}

.media-button.previous > .active {
  background-image: url(../images/media/media_previous_down.png);
}

.media-button.next {
  margin-right: -2px;
}

.media-button.next > .normal {
  background-image: url(../images/media/media_next.png);
}

.media-button.next > .hover {
  background-image: url(../images/media/media_next_hover.png);
}

.media-button.next > .active {
  background-image: url(../images/media/media_next_down.png);
}

.single-track .media-button.next,
.single-track .media-button.previous {
  display: none;
}

/* Customized scrollbar for the playlist. */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-button {
  height: 0px;
  width: 0px;
}

::-webkit-scrollbar-thumb {
  min-height: 28px;
  padding-top: 100px;
  background-clip: padding-box;
  background-color: rgba(255,255,255,0.15);
  -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10),
                      inset 0px -1px 0px  rgba(0,0,0,0.07);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.20);
  -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(255,255,255,0.25);
  -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
}

::-webkit-scrollbar-thumb:vertical {
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 0px solid transparent;
  border-left: 5px solid transparent;
}

::-webkit-scrollbar-track:hover {
  background-color: rgba(0,0,0,0.05);
   -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.10);
}

::-webkit-scrollbar-track:active {
  background-color: rgba(0,0,0,0.05);
  -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.14),
                      inset -1px -1px 0px  rgba(0,0,0,0.07);
}

::-webkit-scrollbar-track:vertical {
  border-right: 0px solid transparent;
  border-left: 5px solid transparent;
  background-clip: padding-box;
  background-color: transparent;
}