OLD | NEW |
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 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: rgb(245, 245, 245); | 7 background: rgb(245, 245, 245); |
8 color: rgb(51, 51, 51); | 8 color: rgb(51, 51, 51); |
9 cursor: default; | 9 cursor: default; |
10 display: flex; | |
11 flex-direction: column; | |
12 font-size: 10pt; | 10 font-size: 10pt; |
13 justify-content: space-around; | |
14 overflow: hidden; | 11 overflow: hidden; |
15 } | 12 } |
16 | 13 |
17 /* Track item. */ | 14 /* Track item. */ |
18 .track { | 15 .track { |
19 align-items: center; | 16 align-items: center; |
| 17 background-color: rgba(255, 255, 255, 0.9); |
20 display: flex; | 18 display: flex; |
21 height: 48px; | 19 height: 48px; |
22 justify-content: space-between; | 20 justify-content: space-between; |
23 width: 100%; | 21 width: 100%; |
24 } | 22 } |
25 | 23 |
26 /* Track icon. */ | 24 :host[expanded] .track { |
| 25 bottom: 0px; |
| 26 position: absolute; |
| 27 } |
| 28 |
| 29 /* artwork icon(expanded) */ |
27 .track .icon-wrapper { | 30 .track .icon-wrapper { |
28 flex: none; | 31 flex: none; |
29 height: 48px; | 32 height: 48px; |
30 width: 48px; | 33 width: 48px; |
31 } | 34 } |
32 | 35 |
33 .icon-wrapper .icon { | 36 :host[expanded] .icon { |
| 37 visibility: hidden; |
| 38 } |
| 39 |
| 40 :host(:not([expanded])) .icon { |
34 background-position: center; | 41 background-position: center; |
35 background-repeat: no-repeat; | 42 background-repeat: no-repeat; |
36 background-size: contain; | 43 background-size: contain; |
37 height: 48px; | 44 height: 48px; |
38 pointer-events: none; | 45 pointer-events: none; |
39 position: absolute; | 46 position: absolute; |
40 width: 48px; | 47 width: 48px; |
41 } | 48 } |
42 | 49 |
43 .icon-wrapper .icon-background { | 50 /* artwork icon(expanded) */ |
44 background: -webkit-image-set( | 51 |
45 url(../assets/100/playlist_now_playing.png) 1x, | 52 .track-wrapper { |
46 url(../assets/200/playlist_now_playing.png) 2x) | 53 background-color: rgb(32, 32, 34); |
47 center | 54 position: relative; |
48 no-repeat; | 55 } |
49 height: 48px; | 56 |
50 pointer-events: none; | 57 :host:not([artwork-available])[expanded] .track-wrapper { |
51 position: absolute; | 58 height: 320px; |
52 width: 48px; | 59 position: relative; |
| 60 width: 100%; |
| 61 } |
| 62 |
| 63 .icon-expanded { |
| 64 background-size: 0 0; |
| 65 } |
| 66 |
| 67 :host:not([expanded]) .icon-unavailable-expanded { |
| 68 background-size: 0 0; |
| 69 } |
| 70 |
| 71 :host:not([artwork-available])[expanded] .icon-unavailable-expanded { |
| 72 background-image: -webkit-image-set( |
| 73 url(../assets/100/player_no_artwork.png) 1x, |
| 74 url(../assets/200/player_no_artwork.png) 2x); |
| 75 background-position: center; |
| 76 background-repeat: no-repeat; |
| 77 height: calc(320px - 48px); |
| 78 margin-left: auto; |
| 79 margin-right: auto; |
| 80 width: 320px; |
| 81 } |
| 82 |
| 83 :host[artwork-available][expanded] .icon-expanded { |
| 84 background-position: center; |
| 85 background-repeat: no-repeat; |
| 86 background-size: contain; |
| 87 height: 320px; |
| 88 margin-left: auto; |
| 89 margin-right: auto; |
| 90 width: 320px; |
53 } | 91 } |
54 | 92 |
55 /* expand icon. */ | 93 /* expand icon. */ |
56 .track .expand { | 94 .track .expand { |
57 background-position: center; | 95 background-position: center; |
58 background-repeat: no-repeat; | 96 background-repeat: no-repeat; |
59 flex: none; | 97 flex: none; |
60 height: 48px; | 98 height: 48px; |
61 width: 48px; | 99 width: 48px; |
62 } | 100 } |
63 | 101 |
64 :host(:not([available])) > .track .expand { | 102 :host:not([expanded]) .track .expand { |
65 background-image: -webkit-image-set( | |
66 url(../assets/100/player_cover_open.png) 1x, | |
67 url(../assets/200/player_cover_open.png) 2x); | |
68 opacity: 0.1; | |
69 } | |
70 | |
71 :host([available]:not([expanded])) > .track .expand { | |
72 background-image: -webkit-image-set( | 103 background-image: -webkit-image-set( |
73 url(../assets/100/player_cover_open.png) 1x, | 104 url(../assets/100/player_cover_open.png) 1x, |
74 url(../assets/200/player_cover_open.png) 2x); | 105 url(../assets/200/player_cover_open.png) 2x); |
75 } | 106 } |
76 | 107 |
77 :host([available][expanded]) > .track .expand { | 108 :host[expanded] .track .expand { |
78 background-image: -webkit-image-set( | 109 background-image: -webkit-image-set( |
79 url(../assets/100/player_cover_close.png) 1x, | 110 url(../assets/100/player_cover_close.png) 1x, |
80 url(../assets/200/player_cover_close.png) 2x); | 111 url(../assets/200/player_cover_close.png) 2x); |
81 } | 112 } |
82 | 113 |
83 /* Track data. */ | 114 /* Track data. */ |
84 | 115 |
85 .track .data { | 116 .track .data { |
86 display: flex; | 117 display: flex; |
87 flex-direction: column; | 118 flex-direction: column; |
(...skipping 13 matching lines...) Expand all Loading... |
101 .track .data .data-title { | 132 .track .data .data-title { |
102 color: rgb(51, 51, 51); | 133 color: rgb(51, 51, 51); |
103 font-size: 13px; | 134 font-size: 13px; |
104 font-weight: 500; | 135 font-weight: 500; |
105 } | 136 } |
106 | 137 |
107 .track .data .data-artist { | 138 .track .data .data-artist { |
108 color: rgb(100, 100, 100); | 139 color: rgb(100, 100, 100); |
109 font-size: 12px; | 140 font-size: 12px; |
110 } | 141 } |
OLD | NEW |