OLD | NEW |
| (Empty) |
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 | |
3 * found in the LICENSE file. */ | |
4 | |
5 :host { | |
6 align-items: center; | |
7 background: #f5f5f5; | |
8 bottom: 72px; /* Room for the controls bar. */ | |
9 color: #3d3d3d; | |
10 cursor: default; | |
11 display: flex; | |
12 flex-direction: column; | |
13 font-family: Noto Sans UI, sans-serif; | |
14 font-size: 10pt; | |
15 justify-content: flex-start; | |
16 left: 0; | |
17 overflow-x: hidden; | |
18 overflow-y: auto; | |
19 position: absolute; | |
20 right: 0; | |
21 top: 0; | |
22 } | |
23 | |
24 /* Track item. */ | |
25 .track { | |
26 align-items: center; | |
27 display: flex; | |
28 flex: 0 0 auto; | |
29 flex-direction: row; | |
30 height: 44px; | |
31 justify-content: flex-start; | |
32 padding-left: 20px; | |
33 width: 100%; | |
34 } | |
35 | |
36 :host(:not([expanded]):host) > .track:not([active]) { | |
37 display: none; | |
38 } | |
39 | |
40 /* In the expanded mode the selected track is highlighted. */ | |
41 .track[active] { | |
42 background-color: rgb(66, 129, 244); | |
43 } | |
44 | |
45 /* Track data. */ | |
46 | |
47 .track .data { | |
48 display: flex; | |
49 flex: 1 1 auto; | |
50 flex-direction: column; | |
51 justify-content: center; | |
52 margin-left: 0; | |
53 margin-right: 4px; | |
54 } | |
55 | |
56 .track .data .data-title, | |
57 .track .data .data-artist { | |
58 font-size: 12px; | |
59 overflow: hidden; | |
60 text-overflow: ellipsis; | |
61 white-space: nowrap; | |
62 } | |
63 | |
64 .track .data .data-title { | |
65 color: #343434; | |
66 font-weight: bold; | |
67 } | |
68 | |
69 .track .data .data-artist { | |
70 color: #969696; | |
71 } | |
72 | |
73 .track[active] .data .data-title, | |
74 .track[active] .data .data-artist { | |
75 color: #fff; | |
76 } | |
OLD | NEW |