1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */
6 -webkit-user-select: none;
12 background-color: #1d1d1d;
16 font-family: Open Sans, Droid Sans Fallback, sans-serif;
25 * In the collapsed/single-track mode they overlap the first track. */
28 background-position: center center;
29 background-repeat: no-repeat;
40 background-color: rgb(60, 126, 255) !important;
44 .audio-player:not(.collapsed):not(.single-track) > .title-button {
45 background-color: #1f1f1f;
49 background-image: -webkit-image-set(
50 url('../images/media/media_close.png') 1x,
51 url('../images/media/2x/media_close.png') 2x);
55 .title-button.collapse {
56 background-image: -webkit-image-set(
57 url('../images/media/media_collapse.png') 1x,
58 url('../images/media/2x/media_collapse.png') 2x);
62 .audio-player:not(.frameless) .title-button.close {
66 .audio-player.frameless .title-button.collapse {
70 .collapsed .title-button.collapse {
71 background-image: -webkit-image-set(
72 url('../images/media/media_expand.png') 1x,
73 url('../images/media/2x/media_expand.png') 2x);
76 .single-track .title-button.collapse {
80 /* Common properties for track containers. */
81 .audio-player > .track-list,
82 .audio-player > .track-stack {
83 bottom: 35px; /* Room for the controls bar. */
89 /* Scrollable list of tracks.
90 * Displayed in expanded mode if there is more than one track. */
91 .audio-player > .track-list {
92 -webkit-box-align: center;
93 -webkit-box-orient: vertical;
94 -webkit-box-pack: start;
101 /* A single track container.
102 * Displayed in the compact mode or when there is only one track. */
103 .audio-player > .track-stack {
107 .audio-player.collapsed > .track-list,
108 .audio-player.single_track > .track-list,
109 .audio-player:not(.collapsed):not(.single-track) > .track-stack {
111 pointer-events: none;
116 -webkit-box-align: center;
117 -webkit-box-orient: horizontal;
118 -webkit-box-pack: start;
119 display: -webkit-box;
124 /* In the expanded mode the selected track is highlighted. */
125 .track-list .track.selected {
126 background-color: #2d2d2d;
129 .track-list .track:hover {
130 background-color: #272727 !important;
133 .track-list .track:not(.selected) .data {
137 /* In the compact mode all tracks are in the same position, only the selected
139 .track-stack > .track {
144 .track-stack > .track.selected {
148 /* Opacity transition is controlled differently for the text and the artwork.
149 * Text transition looks better if fade-in and fade-out go in parallel.
150 * For the artwork we start fading out the old icon only after the new one
151 * is completely opaque (otherwise when transitioning between identical icons
152 * we see some fading because the background transpires). */
153 .track-stack > .track:not(.selected) .data,
154 .track-stack > .track:not(.visible) .art {
156 transition: opacity 220ms ease-out;
162 box-sizing: border-box;
164 margin: 4px 0 6px 4px;
170 background-color: #111;
171 border: 1px solid #333;
179 .track .art.blank img {
184 background-image: -webkit-image-set(
185 url('../images/media/error.png') 1x,
186 url('../images/media/2x/error.png') 2x);
187 background-position: center center;
188 background-repeat: no-repeat;
197 -webkit-box-orient: vertical;
198 -webkit-box-pack: center;
199 display: -webkit-box;
204 .track .data .data-title,
205 .track .data .data-artist {
207 text-overflow: ellipsis;
211 .track .data .data-title {
215 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */
216 .single-track .data-title {
220 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */
221 .collapsed:not(.single-track) .data-title {
228 -webkit-box-align: center;
229 -webkit-box-orient: horizontal;
230 -webkit-box-pack: center;
231 background-color: #2D2D2D;
232 border-top: 1px solid rgba(255, 255, 255, 0.1);
234 display: -webkit-box;
237 padding: 0 0 4px 13px;
242 .audio-controls .media-button {
248 .audio-controls .media-button.play {
253 .audio-controls .media-button.play > .default.normal,
254 .audio-controls .media-button.play > .ended.normal {
255 background-image: -webkit-image-set(
256 url('../images/media/media_play_audio.png') 1x,
257 url('../images/media/2x/media_play_audio.png') 2x);
260 .audio-controls .media-button.play > .default.hover,
261 .audio-controls .media-button.play > .ended.hover {
262 background-image: -webkit-image-set(
263 url('../images/media/media_play_audio_hover.png') 1x,
264 url('../images/media/2x/media_play_audio_hover.png') 2x);
267 .audio-controls .media-button.play > .default.active,
268 .audio-controls .media-button.play > .ended.active {
269 background-image: -webkit-image-set(
270 url('../images/media/media_play_audio_down.png') 1x,
271 url('../images/media/2x/media_play_audio_down.png') 2x);
274 .audio-controls .media-button.play > .playing.normal {
275 background-image: -webkit-image-set(
276 url('../images/media/media_pause_audio.png') 1x,
277 url('../images/media/2x/media_pause_audio.png') 2x);
280 .audio-controls .media-button.play > .playing.hover {
281 background-image: -webkit-image-set(
282 url('../images/media/media_pause_audio_hover.png') 1x,
283 url('../images/media/2x/media_pause_audio_hover.png') 2x);
286 .audio-controls .media-button.play > .playing.active {
287 background-image: -webkit-image-set(
288 url('../images/media/media_pause_audio_down.png') 1x,
289 url('../images/media/2x/media_pause_audio_down.png') 2x);
292 .audio-controls .time-controls {
297 .audio-controls .time-controls .time {
301 .media-button.previous {
305 .media-button.previous > .normal {
306 background-image: -webkit-image-set(
307 url('../images/media/media_previous.png') 1x,
308 url('../images/media/2x/media_previous.png') 2x);
311 .media-button.previous > .hover {
312 background-image: -webkit-image-set(
313 url('../images/media/media_previous_hover.png') 1x,
314 url('../images/media/2x/media_previous_hover.png') 2x);
317 .media-button.previous > .active {
318 background-image: -webkit-image-set(
319 url('../images/media/media_previous_down.png') 1x,
320 url('../images/media/2x/media_previous_down.png') 2x);
327 .media-button.next > .normal {
328 background-image: -webkit-image-set(
329 url('../images/media/media_next.png') 1x,
330 url('../images/media/2x/media_next.png') 2x);
333 .media-button.next > .hover {
334 background-image: -webkit-image-set(
335 url('../images/media/media_next_hover.png') 1x,
336 url('../images/media/2x/media_next_hover.png') 2x);
339 .media-button.next > .active {
340 background-image: -webkit-image-set(
341 url('../images/media/media_next_down.png') 1x,
342 url('../images/media/2x/media_next_down.png') 2x);
345 .single-track .media-button.next,
346 .single-track .media-button.previous {
350 /* Customized scrollbar for the playlist. */
352 ::-webkit-scrollbar {
357 ::-webkit-scrollbar-button {
362 ::-webkit-scrollbar-thumb {
363 background-clip: padding-box;
364 background-color: rgba(255, 255, 255, 0.15);
365 box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
366 inset 0 -1px 0 rgba(0, 0, 0, 0.07);
371 ::-webkit-scrollbar-thumb:hover {
372 background-color: rgba(255,255,255,0.20);
373 box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
376 ::-webkit-scrollbar-thumb:active {
377 background-color: rgba(255, 255, 255, 0.25);
378 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
381 ::-webkit-scrollbar-thumb:vertical {
382 border-bottom: 0 solid transparent;
383 border-left: 5px solid transparent;
384 border-right: 0 solid transparent;
385 border-top: 0 solid transparent;
388 ::-webkit-scrollbar-track:hover {
389 background-color: rgba(0, 0, 0, 0.05);
390 box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
393 ::-webkit-scrollbar-track:active {
394 background-color: rgba(0, 0, 0, 0.05);
395 box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
396 inset -1px -1px 0 rgba(0, 0, 0, 0.07);
399 ::-webkit-scrollbar-track:vertical {
400 background-clip: padding-box;
401 background-color: transparent;
402 border-left: 5px solid transparent;
403 border-right: 0 solid transparent;