| /* 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 { |
| -webkit-user-select: none; |
| overflow: hidden; |
| padding: 0; |
| } |
| |
| .audio-player { |
| background-color: #1d1d1d; |
| bottom: 0; |
| color: white; |
| cursor: default; |
| font-family: Open Sans, Droid Sans Fallback, sans-serif; |
| font-size: 10pt; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| /* Title buttons. |
| * In the collapsed/single-track mode they overlap the first track. */ |
| |
| .title-button { |
| background-position: center center; |
| background-repeat: no-repeat; |
| cursor: pointer; |
| height: 29px; |
| opacity: 0.4; |
| position: absolute; |
| top: 0; |
| width: 29px; |
| z-index: 2; |
| } |
| |
| .title-button:hover { |
| background-color: rgb(60, 126, 255) !important; |
| opacity: 1; |
| } |
| |
| .audio-player:not(.collapsed):not(.single-track) > .title-button { |
| background-color: #1f1f1f; |
| } |
| |
| .title-button.close { |
| background-image: -webkit-image-set( |
| url('../images/media/media_close.png') 1x, |
| url('../images/media/2x/media_close.png') 2x); |
| right: 0; |
| } |
| |
| .title-button.collapse { |
| background-image: -webkit-image-set( |
| url('../images/media/media_collapse.png') 1x, |
| url('../images/media/2x/media_collapse.png') 2x); |
| right: 0; |
| } |
| |
| .audio-player:not(.frameless) .title-button.close { |
| display: none; |
| } |
| |
| .audio-player.frameless .title-button.collapse { |
| right: 29px; |
| } |
| |
| .collapsed .title-button.collapse { |
| background-image: -webkit-image-set( |
| url('../images/media/media_expand.png') 1x, |
| url('../images/media/2x/media_expand.png') 2x); |
| } |
| |
| .single-track .title-button.collapse { |
| display: none; |
| } |
| |
| /* Common properties for track containers. */ |
| .audio-player > .track-list, |
| .audio-player > .track-stack { |
| bottom: 35px; /* Room for the controls bar. */ |
| left: 0; |
| position: absolute; |
| right: 0; |
| } |
| |
| /* Scrollable list of tracks. |
| * Displayed in expanded mode if there is more than one track. */ |
| .audio-player > .track-list { |
| -webkit-box-align: center; |
| -webkit-box-orient: vertical; |
| -webkit-box-pack: start; |
| display: -webkit-box; |
| overflow-x: hidden; |
| overflow-y: auto; |
| top: 0; |
| } |
| |
| /* 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 { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: start; |
| display: -webkit-box; |
| height: 58px; |
| width: 100%; |
| } |
| |
| /* 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 { |
| opacity: 0; |
| transition: opacity 220ms ease-out; |
| } |
| |
| /* Track data. */ |
| |
| .track .art { |
| box-sizing: border-box; |
| height: 48px; |
| margin: 4px 0 6px 4px; |
| position: relative; |
| width: 48px; |
| } |
| |
| .track .art.blank { |
| background-color: #111; |
| border: 1px solid #333; |
| } |
| |
| .track .art img { |
| height: 100%; |
| width: 100%; |
| } |
| |
| .track .art.blank img { |
| display: none; |
| } |
| |
| .track .art.error { |
| background-image: -webkit-image-set( |
| url('../images/media/error.png') 1x, |
| url('../images/media/2x/error.png') 2x); |
| background-position: center center; |
| background-repeat: no-repeat; |
| } |
| |
| .noart .track .art { |
| display: none; |
| } |
| |
| .track .data { |
| -webkit-box-flex: 1; |
| -webkit-box-orient: vertical; |
| -webkit-box-pack: center; |
| display: -webkit-box; |
| margin-left: 8px; |
| margin-right: 4px; |
| } |
| |
| .track .data .data-title, |
| .track .data .data-artist { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .track .data .data-title { |
| font-weight: bold; |
| } |
| |
| /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */ |
| .single-track .data-title { |
| padding-right: 0; |
| } |
| |
| /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */ |
| .collapsed:not(.single-track) .data-title { |
| padding-right: 20px; |
| } |
| |
| /* Controls bar. */ |
| |
| .audio-controls { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| -webkit-box-pack: center; |
| background-color: #2D2D2D; |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| bottom: 0; |
| display: -webkit-box; |
| height: 30px; |
| left: 0; |
| padding: 0 0 4px 13px; |
| position: absolute; |
| right: 0; |
| } |
| |
| .audio-controls .media-button { |
| height: 29px; |
| margin-top: 1px; |
| width: 29px; |
| } |
| |
| .audio-controls .media-button.play { |
| margin-left: -10px; |
| margin-right: -8px; |
| } |
| |
| .audio-controls .media-button.play > .default.normal, |
| .audio-controls .media-button.play > .ended.normal { |
| background-image: -webkit-image-set( |
| url('../images/media/media_play_audio.png') 1x, |
| url('../images/media/2x/media_play_audio.png') 2x); |
| } |
| |
| .audio-controls .media-button.play > .default.hover, |
| .audio-controls .media-button.play > .ended.hover { |
| background-image: -webkit-image-set( |
| url('../images/media/media_play_audio_hover.png') 1x, |
| url('../images/media/2x/media_play_audio_hover.png') 2x); |
| } |
| |
| .audio-controls .media-button.play > .default.active, |
| .audio-controls .media-button.play > .ended.active { |
| background-image: -webkit-image-set( |
| url('../images/media/media_play_audio_down.png') 1x, |
| url('../images/media/2x/media_play_audio_down.png') 2x); |
| } |
| |
| .audio-controls .media-button.play > .playing.normal { |
| background-image: -webkit-image-set( |
| url('../images/media/media_pause_audio.png') 1x, |
| url('../images/media/2x/media_pause_audio.png') 2x); |
| } |
| |
| .audio-controls .media-button.play > .playing.hover { |
| background-image: -webkit-image-set( |
| url('../images/media/media_pause_audio_hover.png') 1x, |
| url('../images/media/2x/media_pause_audio_hover.png') 2x); |
| } |
| |
| .audio-controls .media-button.play > .playing.active { |
| background-image: -webkit-image-set( |
| url('../images/media/media_pause_audio_down.png') 1x, |
| url('../images/media/2x/media_pause_audio_down.png') 2x); |
| } |
| |
| .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: -webkit-image-set( |
| url('../images/media/media_previous.png') 1x, |
| url('../images/media/2x/media_previous.png') 2x); |
| } |
| |
| .media-button.previous > .hover { |
| background-image: -webkit-image-set( |
| url('../images/media/media_previous_hover.png') 1x, |
| url('../images/media/2x/media_previous_hover.png') 2x); |
| } |
| |
| .media-button.previous > .active { |
| background-image: -webkit-image-set( |
| url('../images/media/media_previous_down.png') 1x, |
| url('../images/media/2x/media_previous_down.png') 2x); |
| } |
| |
| .media-button.next { |
| margin-right: -2px; |
| } |
| |
| .media-button.next > .normal { |
| background-image: -webkit-image-set( |
| url('../images/media/media_next.png') 1x, |
| url('../images/media/2x/media_next.png') 2x); |
| } |
| |
| .media-button.next > .hover { |
| background-image: -webkit-image-set( |
| url('../images/media/media_next_hover.png') 1x, |
| url('../images/media/2x/media_next_hover.png') 2x); |
| } |
| |
| .media-button.next > .active { |
| background-image: -webkit-image-set( |
| url('../images/media/media_next_down.png') 1x, |
| url('../images/media/2x/media_next_down.png') 2x); |
| } |
| |
| .single-track .media-button.next, |
| .single-track .media-button.previous { |
| display: none; |
| } |
| |
| /* Customized scrollbar for the playlist. */ |
| |
| ::-webkit-scrollbar { |
| height: 16px; |
| width: 16px; |
| } |
| |
| ::-webkit-scrollbar-button { |
| height: 0; |
| width: 0; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-clip: padding-box; |
| background-color: rgba(255, 255, 255, 0.15); |
| box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), |
| inset 0 -1px 0 rgba(0, 0, 0, 0.07); |
| min-height: 28px; |
| padding-top: 100px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background-color: rgba(255,255,255,0.20); |
| box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25); |
| } |
| |
| ::-webkit-scrollbar-thumb:active { |
| background-color: rgba(255, 255, 255, 0.25); |
| box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35); |
| } |
| |
| ::-webkit-scrollbar-thumb:vertical { |
| border-bottom: 0 solid transparent; |
| border-left: 5px solid transparent; |
| border-right: 0 solid transparent; |
| border-top: 0 solid transparent; |
| } |
| |
| ::-webkit-scrollbar-track:hover { |
| background-color: rgba(0, 0, 0, 0.05); |
| box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10); |
| } |
| |
| ::-webkit-scrollbar-track:active { |
| background-color: rgba(0, 0, 0, 0.05); |
| box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14), |
| inset -1px -1px 0 rgba(0, 0, 0, 0.07); |
| } |
| |
| ::-webkit-scrollbar-track:vertical { |
| background-clip: padding-box; |
| background-color: transparent; |
| border-left: 5px solid transparent; |
| border-right: 0 solid transparent; |
| } |