OLD | NEW |
1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 :host { | 5 :host { |
6 align-items: center; | 6 align-items: center; |
7 background: #f5f5f5; | 7 background: rgb(245, 245, 245); |
8 bottom: 72px; /* Room for the controls bar. */ | 8 bottom: 72px; /* Room for the controls bar. */ |
9 color: #3d3d3d; | 9 color: rgb(51, 51, 51); |
10 cursor: default; | 10 cursor: default; |
11 display: flex; | 11 display: flex; |
12 flex-direction: column; | 12 flex-direction: column; |
13 font-size: 10pt; | 13 font-size: 10pt; |
14 justify-content: flex-start; | 14 justify-content: flex-start; |
15 left: 0; | 15 left: 0; |
16 overflow-x: hidden; | 16 overflow-x: hidden; |
17 overflow-y: auto; | 17 overflow-y: auto; |
18 position: absolute; | 18 position: absolute; |
19 right: 0; | 19 right: 0; |
20 top: 0; | 20 top: 0; |
21 } | 21 } |
22 | 22 |
23 /* Track item. */ | 23 /* Track item. */ |
24 .track { | 24 .track { |
25 align-items: center; | 25 align-items: center; |
26 display: flex; | 26 display: flex; |
27 flex: 0 0 auto; | 27 flex: 0 0 auto; |
28 flex-direction: row; | 28 flex-direction: row; |
29 height: 44px; | 29 height: 48px; |
30 justify-content: flex-start; | 30 justify-content: flex-start; |
31 padding-left: 20px; | |
32 width: 100%; | 31 width: 100%; |
33 } | 32 } |
34 | 33 |
35 :host(:not([expanded])) > .track:not([active]) { | 34 :host(:not([expanded])) > .track:not([active]) { |
36 display: none; | 35 display: none; |
37 } | 36 } |
38 | 37 |
39 /* In the expanded mode the selected track is highlighted. */ | 38 :host([expanded]) > .track:hover { |
40 .track[active] { | 39 background-color: rgba(0, 0, 0, 0.08); |
41 background-color: rgb(66, 129, 244); | 40 } |
| 41 |
| 42 /* Track icon. */ |
| 43 .track .icon { |
| 44 background-position: center; |
| 45 background-repeat: no-repeat; |
| 46 flex: none; |
| 47 height: 32px; |
| 48 margin: 8px; |
| 49 pointer-events: none; |
| 50 width: 32px; |
| 51 } |
| 52 |
| 53 .track:hover .icon { |
| 54 background-image: -webkit-image-set( |
| 55 url(../assets/100/playlist_play.png) 1x, |
| 56 url(../assets/200/playlist_play.png) 2x); |
| 57 pointer-events: auto; |
| 58 } |
| 59 |
| 60 .track[active] .icon { |
| 61 background-image: -webkit-image-set( |
| 62 url(../assets/100/playlist_now_playing.png) 1x, |
| 63 url(../assets/200/playlist_now_playing.png) 2x); |
42 } | 64 } |
43 | 65 |
44 /* Track data. */ | 66 /* Track data. */ |
45 | 67 |
46 .track .data { | 68 .track .data { |
47 display: flex; | 69 display: flex; |
48 flex: 1 1 auto; | 70 flex: 1 1 auto; |
49 flex-direction: column; | 71 flex-direction: column; |
50 justify-content: center; | 72 justify-content: center; |
51 margin-left: 0; | 73 margin-left: 0; |
52 margin-right: 4px; | 74 margin-right: 4px; |
53 } | 75 } |
54 | 76 |
55 .track .data .data-title, | 77 .track .data .data-title, |
56 .track .data .data-artist { | 78 .track .data .data-artist { |
57 font-size: 12px; | |
58 overflow: hidden; | 79 overflow: hidden; |
59 text-overflow: ellipsis; | 80 text-overflow: ellipsis; |
60 white-space: nowrap; | 81 white-space: nowrap; |
61 } | 82 } |
62 | 83 |
63 .track .data .data-title { | 84 .track .data .data-title { |
64 color: #343434; | 85 color: rgb(51, 51, 51); |
65 font-weight: bold; | 86 font-size: 13px; |
| 87 font-weight: 500; |
66 } | 88 } |
67 | 89 |
68 .track .data .data-artist { | 90 .track .data .data-artist { |
69 color: #969696; | 91 color: rgb(100, 100, 100); |
| 92 font-size: 12px; |
70 } | 93 } |
71 | |
72 .track[active] .data .data-title, | |
73 .track[active] .data .data-artist { | |
74 color: #fff; | |
75 } | |
OLD | NEW |