-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtracks.css
349 lines (325 loc) · 31.1 KB
/
tracks.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
/**
* Tracks, a Last-fm scrobbles widget.
* Except when in "demo"-mode, widget is able to show a continuously updated tracklist.
*
* Stig Nygaard, 2024.
* https://www.rockland.dk/
* https://www.last.fm/user/rockland
* https://github.com/StigNygaard/lastfm-widgets
* https://lastfm-widgets.deno.dev/
*/
:host {
all: revert; /* In this webcomponent I don't want to inherit anything */
display: block; /* By default, custom elements are "inline" */
position: relative;
contain: content; /* https://developer.chrome.com/blog/css-containment/ */
container-type: inline-size;
overflow: clip;
max-height: 100%;
opacity: 1;
color: rgb(34, 34, 34); /* #222; */
background-color: #fff;
margin: 0;
padding: 0 !important;
line-height: 1.2 !important;
/* https://holidu.design/system-ui-fonts-vs-custom-fonts-which-path-to-follow/ */
font-family: system-ui, sans-serif !important;
font-size: 12px !important;
--transition-delay-in: 0s;
--transition-time-in: 0.25s;
--transition-delay-out: 0.4s;
--transition-time-out: 0.5s;
--header-height: 8ex;
--header-background: none;
--header-avatar-background: url(data:image/png;base64,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);
--header-lastfm-logo: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxMy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDE0OTQ4KSAgLS0+CjxzdmcgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3MDguNzY3cHgiIGhlaWdodD0iMTc5LjMzMnB4IiB2aWV3Qm94PSIwIDAgNzA4Ljc2NyAxNzkuMzMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3MDguNzY3IDE3OS4zMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHNvZGlwb2RpOnZlcnNpb249IjAuMzIiIGlua3NjYXBlOnZlcnNpb249IjAuNDYiIHNvZGlwb2RpOmRvY25hbWU9Imxhc3RmbV9sb2dvLnN2ZyIgaW5rc2NhcGU6b3V0cHV0X2V4dGVuc2lvbj0ib3JnLmlua3NjYXBlLm91dHB1dC5zdmcuaW5rc2NhcGUiPjxtZXRhZGF0YSBpZD0ibWV0YWRhdGEyMCI+PHJkZjpSREY+PGNjOldvcmsgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMgaWQ9ImRlZnMxOCI+PGlua3NjYXBlOnBlcnNwZWN0aXZlIHNvZGlwb2RpOnR5cGU9Imlua3NjYXBlOnBlcnNwM2QiIGlua3NjYXBlOnZwX3g9IjAgOiA4OS42NjYgOiAxIiBpbmtzY2FwZTp2cF95PSIwIDogMTAwMCA6IDAiIGlua3NjYXBlOnZwX3o9IjcwOC43NjcwMyA6IDg5LjY2NiA6IDEiIGlua3NjYXBlOnBlcnNwM2Qtb3JpZ2luPSIzNTQuMzgzNTEgOiA1OS43NzczMzQgOiAxIiBpZD0icGVyc3BlY3RpdmUyMiIvPjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3IGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MCIgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMjgwIiBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIiBndWlkZXRvbGVyYW5jZT0iMTAuMCIgZ3JpZHRvbGVyYW5jZT0iMTAuMCIgb2JqZWN0dG9sZXJhbmNlPSIxMC4wIiBib3JkZXJvcGFjaXR5PSIxLjAiIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBwYWdlY29sb3I9IiNmZmZmZmYiIGlkPSJiYXNlIiBzaG93Z3JpZD0iZmFsc2UiIGlua3NjYXBlOnpvb209IjAuNzY3NTMwMDYiIGlua3NjYXBlOmN4PSIzMjUuMzA4OTUiIGlua3NjYXBlOmN5PSI4OS42NjYiIGlua3NjYXBlOndpbmRvdy14PSItOCIgaW5rc2NhcGU6d2luZG93LXk9Ii04IiBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIi8+CjxnIGlkPSJnMyIgc3R5bGU9ImZpbGw6I2Q1MTAwNztmaWxsLW9wYWNpdHk6MSI+Cgk8cGF0aCBkPSJNMTU4LjQzMSwxNjUuNDk4bC04LjM1NC0yMi43MDhjMCwwLTEzLjU3NSwxNS4xNC0zMy45MzIsMTUuMTRjLTE4LjAxMywwLTMwLjgwMi0xNS42NjItMzAuODAyLTQwLjcyMSAgIGMwLTMyLjEwNiwxNi4xODItNDMuNTkxLDMyLjEwNy00My41OTFjMjIuOTY5LDAsMzAuMjc3LDE0Ljg3OCwzNi41NDMsMzMuOTM0bDguMzU0LDI2LjEwMyAgIGM4LjM1MSwyNS4zMTgsMjQuMDEzLDQ1LjY3OCw2OS4xNyw0NS42NzhjMzIuMzcsMCw1NC4yOTUtOS45MTgsNTQuMjk1LTM2LjAyYzAtMjEuMTQzLTEyLjAwOS0zMi4xMDctMzQuNDU4LTM3LjMyOGwtMTYuNzA1LTMuNjU0ICAgYy0xMS40ODQtMi42MS0xNC44NzctNy4zMDktMTQuODc3LTE1LjE0YzAtOC44NzUsNy4wNDYtMTQuMDk2LDE4LjUzMy0xNC4wOTZjMTIuNTI5LDAsMTkuMzE1LDQuNjk5LDIwLjM2LDE1LjkyM2wyNi4xMDItMy4xMzMgICBjLTIuMDg4LTIzLjQ5Mi0xOC4yNzEtMzMuMTUtNDQuODk2LTMzLjE1Yy0yMy40OTEsMC00Ni40NjIsOC44NzUtNDYuNDYyLDM3LjMyN2MwLDE3Ljc1LDguNjE0LDI4Ljk3NSwzMC4yNzcsMzQuMTk1bDE3Ljc1Miw0LjE3NSAgIGMxMy4zMTIsMy4xMzMsMTcuNzQ4LDguNjE0LDE3Ljc0OCwxNi4xODVjMCw5LjY1Ni05LjM5NiwxMy41NzItMjcuMTQ2LDEzLjU3MmMtMjYuMzY0LDAtMzcuMzI1LTEzLjgzNC00My41OTEtMzIuODlsLTguNjE0LTI2LjEwMSAgIGMtMTAuOTYxLTMzLjkzNC0yOC40NTItNDYuNDYzLTYzLjE2OS00Ni40NjNjLTM4LjM3LDAtNTguNzMxLDI0LjI3NS01OC43MzEsNjUuNTE3YzAsMzkuNjc3LDIwLjM2MSw2MS4wOCw1Ni45MDYsNjEuMDggICBDMTQ0LjMzMywxNzkuMzMyLDE1OC40MzEsMTY1LjQ5OCwxNTguNDMxLDE2NS40OThMMTU4LjQzMSwxNjUuNDk4eiIgaWQ9InBhdGg1IiBzdHlsZT0iZmlsbDojZDUxMDA3O2ZpbGwtb3BhY2l0eToxIi8+Cgk8cGF0aCBkPSJNNDYuNzI2LDE1My4yMjljLTIuNjEsMC43ODQtNS4yMjEsMS4zMDYtOC42MTQsMS4zMDZjLTYuMjY1LDAtMTAuNzAzLTIuODctMTAuNzAzLTEwLjQ0MlYxLjgyN0gwdjE0OC43OTIgICBjMCwxOS41NzcsMTMuNTc1LDI3LjY3MiwyOS40OTcsMjcuNjcyYzUuMjIxLDAsMTAuMTgxLTAuNzg1LDE2LjQ0Ni0yLjM0OUw0Ni43MjYsMTUzLjIyOUw0Ni43MjYsMTUzLjIyOXoiIGlkPSJwYXRoNyIgc3R5bGU9ImZpbGw6I2Q1MTAwNztmaWxsLW9wYWNpdHk6MSIvPgoJPHBhdGggZD0iTTM3Ni45MTEsMTQ5LjA1M2MtNi43ODcsNC43MDEtMTIuNTI5LDcuMDUxLTIwLjM2LDcuMDUxYy05LjkyLDAtMTUuNDAxLTUuMjIxLTE1LjQwMS0xOC4wMTJWNzcuMDA2aDM2LjAyM1Y1NS42MDNIMzQxLjQxICAgVjI2LjYyNWwtMjcuNjY5LDMuMzk0djI1LjU4M2gtMTcuNDl2MjEuNDAzaDE3LjQ5djY2LjgyNmMwLDI0LjAyLDEzLjgzNCwzNS41LDM2LjI4NCwzNS41YzEyLjI2OSwwLDIzLjIzMi0yLjM0NiwzMS44NDctNy4zMDUgICBMMzc2LjkxMSwxNDkuMDUzTDM3Ni45MTEsMTQ5LjA1M3oiIGlkPSJwYXRoOSIgc3R5bGU9ImZpbGw6I2Q1MTAwNztmaWxsLW9wYWNpdHk6MSIvPgoJPHBhdGggZD0iTTQwMC43MTgsMTU4LjQ0OWMwLDEwLjcwNSw4LjM1NCwxOS4zMTgsMTkuMDU2LDE5LjMxOGMxMS4yMjYsMCwxOS41NzgtOC42MTMsMTkuNTc4LTE5LjMxOCAgIGMwLTEwLjk2My04LjM1My0xOS4zMTMtMTkuNTc4LTE5LjMxM0M0MDkuMDcyLDEzOS4xMzYsNDAwLjcxOCwxNDcuNDg2LDQwMC43MTgsMTU4LjQ0OUw0MDAuNzE4LDE1OC40NDl6IiBpZD0icGF0aDExIiBzdHlsZT0iZmlsbDojZDUxMDA3O2ZpbGwtb3BhY2l0eToxIi8+Cgk8cGF0aCBkPSJNNDY3LjcyNyw3Ny4wMDZ2OTkuMTk1aDI3LjQwOVY3Ny4wMDZoMzAuODAzVjU1LjYwM2gtMzAuODAzVjQ0LjYzOGMwLTE2LjQ0NCw3LjA0OS0yMS42NjUsMTguNTM0LTIxLjY2NSAgIGM4LjA5MiwwLDEzLjU3NCwxLjgyNSwxOS44MzksNS4yMjFsNC40MzctMjIuOTc0QzUzMC42MzgsMS44MjcsNTIyLjAyMywwLDUxMS41ODIsMGMtMjIuOTczLDAtNDMuODU1LDEwLjk2My00My44NTUsNDMuNTkzdjEyLjAxICAgaC0xNy40ODl2MjEuNDAzSDQ2Ny43MjdMNDY3LjcyNyw3Ny4wMDZ6IiBpZD0icGF0aDEzIiBzdHlsZT0iZmlsbDojZDUxMDA3O2ZpbGwtb3BhY2l0eToxIi8+Cgk8cGF0aCBkPSJNNjM1LjE1NCw3OS4zNThjLTMuMTMzLTE5LjU3OC0xNS45MjMtMjYuNjI5LTMyLjYzLTI2LjYyOWMtMTYuNzA2LDAtMzEuMDYyLDcuNTcxLTM3LjMyOSwyNi4xMDRsLTMuMzkzLTIzLjIzaC0yMi4xODggICB2MTIwLjU5OGgyNy40MDl2LTY4LjEyOWMwLTIzLjIzNSwxMi4wMDgtMzIuMTEsMjQuNzk5LTMyLjExYzEzLjMxMiwwLDE4Ljc5NSw4Ljg3NSwxOC43OTUsMjMuMjMydjc3LjAwNmgyNy4xNDd2LTY4LjM5ICAgYzAtMjIuOTc0LDEyLjI2OS0zMS44NDksMjUuMDYxLTMxLjg0OWMxMy4wNTIsMCwxOC41MzIsOC44NzUsMTguNTMyLDIzLjIzMnY3Ny4wMDZoMjcuNDA5Vjg5LjUzOSAgIGMwLTI1Ljg0My0xNS4xNC0zNi44MS0zNS4yNC0zNi44MUM2NTYuNTYxLDUyLjcyOSw2NDEuNDE5LDYwLjMsNjM1LjE1NCw3OS4zNThMNjM1LjE1NCw3OS4zNTh6IiBpZD0icGF0aDE1IiBzdHlsZT0iZmlsbDojZDUxMDA3O2ZpbGwtb3BhY2l0eToxIi8+CjwvZz4KPC9zdmc+);
--icon-track: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwklEQVR4Xu1aa4+qMBQsL8XX7kbd/////LQ3Kigo3k7jMYcGgQooaJsYsi4gM53zxtlsNhfxwcuxBFgFWBOwPuCDfaCwTtBGARsFbBSwUcBGgR4x4DhO7mlOp5PAd67rqiNWlmXqc7lchO/7jZ6+12EQALEA3PO82xHgQcz5fFbENFm9I4BAE6j5fK5ABkEg3KsCkjQVx+PxRsJbEbBcLm94CHB2VQL+dhxXSj8TURwrEqCCJqtTBWA36UMPOR6PxWg0UjsKWROouiAAHiREcSR2u93NL9S9Xj+vUwLwY9PpNPebBNxzvYeemROw3W776QPgtMiWf9e/DwG9d9EgFAAC4Klx7IIAkBMfDv01ASJgsViIUNo8X7DfpoucYBRFTW/VTTkMAuCdv76+WiUAwFUiJJ3rQSqgtwTAu6cyVrdJwDk7q3v6ni8c11EExDIU6nmDqSQ6iQJtEwDwBHgl8wRSwGAIKLN7yDqVaS1SW+wwdpTXA3CmMCceVXBufIgVKU1X5wqYhJPcM5Idky0nSSLwIfBVgNarlSQkGxYBZL/YSchWXyZ2PDgCUMhghyFXSLdp+To4AmAC291WEaDX+lVyL/r/erUW3CmaqKfofk/xAZYAqwBrAtYHWCdoo4ANg6V5ALW3KVegOYA+E5iEoSqGUAoPphYwzQPQN0TzlLfCeRIzOAL20V7tWFkmiB1H5UfAx7JzXFRFopgaLAHYRZ0ESmXRQwABSHX54tUjfd8rAvj4igDyOd7P97caYqAKpEZpUTUIuc9mMzEKRrVKBPQD9vv96ztCAEU2i0pP3+FAfkcEFM3yaHCCYUldAlBVYjCCKvPlxVAovTIICMdh4c5BwmhhwwfcIwAXggAMUeoogPuUlxDA21Z1+v7YrSoCTEzg79+fMilc83QCeM8fu1ZnxMUJIBPhpkJzfpgTzCDwg1zjRPULT6lqm0H2eSfZ7AUX434A7/nXIQDNCzgrTHL5bukEUCKEIyIC/AmOuAbAYT5Fk+DeK+BwPKiMDSCw9KhBu0mEcEDUPuNd4XthtFboKDjpIQVAqhh71VEAHBZkSyDKCODjdB1okelwQp9OQJXXTtJENUH5+KqpXB8FWXadsQKIdcgTaetsOsvdH5KH3AEegKEWWm9DAM3/yUY5MHp7S7ftvpLwkALKwJEd6zZb5OS6kLTpPRsRUFbc3COpqA4wfeg2z7cENH1dviouV02DXu0YrQLaVoCpfb6dAiwBhgxYBVzfAzbkrbXTW3eCpk9mFWAV0KyjY6o4/fyPN4H/VB9evXDNUyAAAAAASUVORK5CYII=);
--icon-album: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAHnUlEQVR4Xu1bCUwUZxSGIJcNlNMKWECltZACKyLhMMWESixCTRQQ0iJGBFrCfShoaGmJgnIfoRxiRNuAgCaWIwZLIo0cQcQFEqiKByhgy1lI5ZLY79+4CWx22ZnZQ80wCclm5r3vffPNf7z3ZlBUYPmhyPL7V1gTYG0EsFyBtSkgrwFw/PhxjfHxcfMnT54YqaqqWrx8+VJlZmZmHYmvoaHxav369Qvz8/O9mzdvHtLV1e07d+7cjDy4yXwExMfHaz9+/Nh5bGzMHn/WU1NTRrOzs2ZLS0vrXr9+rURuUlFRcUlJSemVurp6v5aW1pCenl4X/tq2bNnSlJqaOilLIWQmQHBwsFtvb6/Xo0ePDgwPD2syuQlDQ8PprVu3XrOwsKgqKiqqZ4IhzkfqAgQEBPi3tLRE9/X1WYkLTue6ubl5t6OjY2ZpaWkZHT9xtlITICYmZtfNmzezu7u7d4gLKsl1Kyuru3v27InMyMi4LQkO31cqAuzfvz/t+vXrsdIgRBUDMdMRM46qvSg7iQQ4e/as4RUcnZ2duyQlwsTfxsbm9iEcJ06cGGbiz1uAmTqmp6eb5OXltQwMDBgyxZCGn4mJyXBYWJhjbGzsABM8RgJgazLOz8/veP78uT6ToNL22bRp02hoaKgtttxButi0BUhKStpw4cKF7sHBwY/oBpOlvbGx8d9Hjx61Ar9/6MShLQBW4U6s9NvpBJGXLbjdAzcbOvFoCYDtJx1bXQydAPK2BccMcKS8I1EWIDEx0To5OZkr7xtiEg9cOeDaRcWXsgDbtm3j3r9/35oK6Go2KioqCvr6+oMbN24cmJ6e5s1XTU3NDS9evDAZHR01XlhYkDSEArh2gSuHChAlAZDe+iAFLacCKMrGyMjoX8zREhQ415ydndu9vb2XlttWVlYqNTU12aFwOoB5HDg0NPShJPHA2RecK8RhUBIAJepTlLEm4sBEXXd3d8/fvXv3T9irx6hgIMfQu3Xr1o+1tbWhVOyF2YDzADibivMXKwCqOhdUYn+IAxJ2HXX9rJeXl19hYeHV5dfxdOxGRkZsUAZ/Ss6jLH5gYGDQiSfWvtwOe/vBioqKMpTRHzCJD+5fgnvjar5iBXBycqpobm4+RJeAjo7OUlRUlCUWpD6+r5+f33ft7e0hyB4t5+bmVkCqqakpIKvrsbOzK7h8+XIh/yL29c+QdHVDBGW6HMD9Crj7MBYAwdWQ7k6hk6NKN3hQUJB7cXFxHfHLzc3Vv3Tp0q8dHR2uVHBsbW0bDh8+/G14ePgosT927Jjb+fPneVh0DozAeaTJWriPlWovA1l1BGCoemBY/k4nKLF1dXUtbmhoCCa/U1JStEG+C42Rj+ngoBHyDDdunZCQwOsIAbMImEF0MIgt7uFr3EONKD+RAmRmZqrX1dUlNzY20kp8oPrCqVOntKKjo2dJUKz8LVjVHegSf+PbCl9H8pvwOX36NBmNKnSwXFxcMvbt25fI5yPoK1KAkJAQDjo7yVwu151OQATLgnDRxAeV6veolgvo+AvaAiMEGL+Q88DOBHYUHTwOh1OLTlJiQUGB0CROpACenp7fYMFKQtFjRicglObgafGyMFNT06c4RG6faIDysh40SkU+VWAMAMOU2AHbGti0slEUSf1YWJOqq6t/E3YfIgWA2j+3traenJiY4HVuqRxoYo5kZ2d/TJKcyMhIDn7fE+aHFrgCBE5F1pdHriM7DAPBeLTKhYYB1nZgcUmyhN/P0GQ1oMKH2JDdyMHB4QxGzg+0BEDikoT5RwSgvP1YWlr+2dPT40wCubm5RdTX12cLC4p2VhbaWbxpwj9wLhPnhA5vYEUCK4fYIkYTYnxBQ4BFrENnkFgl0RIAc+cMhl4ChifVWAo7d+68eufOHU/isHfv3twbN26ECTpra2vPHjlyRDcrK4u3SPIP5AzqFy9eHJ+cnFQX9AFWHrDCyXnEqEaMg1RJYZqRqZiCtezkOyNARESEjuDeTHKOnJyciXdGAFlOAQ8Pj+yampoVwx3nsnAuUthTeitTQJaLIEl7USOkLi4u8hZBZWXlsKqqqnjB9JgvxltZBFm/DbI+EZJiKkzSWXuqq/ZyO2xfbfw0Wu6pMCEijWIIq7sOylsuk2II5TMH/hOEi9yLIRJUonI4IMC9uLRUKuVwYGDgVyUlJbRfj+Mbgzk0VbQZl8NEBEkaIqjnP0fwv/jDWt4NEXt7+8q2trZVmzliO0KStMTwBP7z8fHxR0dnRUvM19fXAWUtB9vfJ0QcbIcPUUZzy8vLW5evAZK2xPCmaA/eYq3azhMrACHE6qYoEQBz0Adz8L1qi4OzLzhLpy1ORDAzM3vQ39/PG7KSHPJ4MQKuD8GV13EWd1CaAgQkLi7OJi0t7a44wHfhOrjuANdOKlwoC0DAWP1ylK8mq1+Pv0mO2P2BBBGB1Z/I8KcC+UgKCU4z2mZGVBYbWdmg3TWEhMlJrh9J8W8GfT2DsrKySvTb3spncuhb3vb39/dGP3GEqcC0dgFRQVj7oeRyQVj9qexyIVj7sbTg9GDt5/KCQrD2HyYEhWDtv8ww3Z7k5SeVbVBeZGURZ00AWaj6PmGujYD36WnJguv/rjWQfe57ptEAAAAASUVORK5CYII=);
--icon-loved: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABRElEQVQoU5WQsUoDQRCGZ2Y1Nml8AhVE7pIUaWysjCSxFzGorY2FIvgC9wKCaCXYBlHEBzDRWImF9d1Vcm8R77zdcXbvEIw2GVh2Zvf//p0dhCkDp9SDA0bN5qIZp9eAvGpAvVY/Zw+zaq5T1leY8xoAvs/Mjw9ab0nigKHnj5h5nU3xHin+QMBMM3gMJK4GEOGlE8ctBzzW6ilqXREnELCgkACMOJDs1klh1o2iOQc8e36Sa1pA0iIC0CISmYSxJZD1IEi6cbzkgEGjccRf+QU4c5GitCC5LY0oLIxIx504vHSAtIFPK96dQdx2QrLHsqQlm5GC+40o2kFE/hkr16Ey0P4NGN4qPFncGRTjQ3sv2sUAMve14odlBAENbvtnkKsTIwwRnrd7vVMMgnJ+k0DJDZdr+3Zmm2HY/2X454XJ23/qb8T0ew1pk2dAAAAAAElFTkSuQmCC);
--icon-scrobbling: url(data:image/gif;base64,R0lGODlhDAAMAJECANvb28zMzP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiNjlhZmFkNi05MTBkLTQ1OTEtOGM4Yi1jMjY2YjJlNzg4NTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUM2MDk2RkE5QTMwMTFFODhBOURFRjVDQzExMEFEMUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUM2MDk2Rjk5QTMwMTFFODhBOURFRjVDQzExMEFEMUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2Yzk4NWVmOS0xMDNmLTQ4MzctYTg3Yy01NjM3MzdlM2ZkZWEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YjY5YWZhZDYtOTEwZC00NTkxLThjOGItYzI2NmIyZTc4ODUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQYAAgAsAAAAAAwADAAAAhuUj6krAGxCgEJSm1yc7VWOheC4lZ+hdahHCQUAIfkECQYAAgAsAAAAAAwADAAAAhmUj6nLCdBECHFW6qDEz9jtYd/IaZ1wRkIBACH5BAkGAAIALAAAAAAMAAwAAAIWlI+py80AXAiStqmgwUILDlreGDlGAQAh+QQFBgACACwAAAAADAAMAAACF5SPqcvtDoALQUVDzRWZV499XbeV0iMUACH5BAUGAAIALAEABAAKAAQAAAILlAVwKxGbGAJOugIAIfkECQYAAgAsAQADAAoABAAAAguUBXArEZsYAk66AgAh+QQJBgACACwAAAAADAAMAAACFZSPqSsAbEKAQhqnbJ3t7chR4kiSBQAh+QQJBgACACwAAAAADAAMAAACHJSPqcsJYJ4KwdAIxdWV276F4PiV3rlJgqo2RgEAIfkECQYAAgAsAAAAAAwADAAAAhyUj6mbAGxCMI4+IePEO3MNfqJHdmboVYKqQkYBACH5BAkGAAIALAAAAAAMAAwAAAIclI+pAIoRDFPQ1HTvFDly31ngKJafqTXCtjlIAQAh+QQJBgACACwAAAAADAAMAAACHJSPqQigbUJQMs5URUY5Q3114WiVoOk5wvctSAEAIfkECQYAAgAsAAAAAAwADAAAAhyUjweQGdHQa8tMB8WVeZ97VVpHWuVoGuLKREkBACH5BAkGAAIALAAAAAAMAAwAAAIblI+pCLAXwjNRNSpTFRvtDmXbxYkmZpCqMx0FACH5BAkGAAIALAAAAAAMAAwAAAIalI+pywLQRAhxqmds0hpL+mUgN5aGh0KRUQAAIfkECQYAAgAsAAAAAAwADAAAAhqUj6nLjQAUNCGoSq2YAnftheCYlZ/BpZFjFAAh+QQJBgACACwAAAAADAAMAAACGpSPqcsN0EQI5lUoaTaT676F4PiV3oUKVmQUACH5BAkGAAIALAAAAAAMAAwAAAIalI+pmwBsQlAuziStqSL364XgqH2lx6UPdBQAIfkECQYAAgAsAAAAAAwADAAAAhqUj6kAihHcgdLQxGxM92bRbaFGguL2pU11FAAh+QQJBgACACwAAAAADAAMAAACGpSPqZsAbEKAQlLbXp0JYxdxnkgaoHCelFAAACH5BAkGAAIALAAAAAAMAAwAAAIYlI+pyw3QRAhxViqe0RLbbnyih3EmFBkFACH5BAkGAAIALAAAAAAMAAwAAAIYlI+py+0GgAsBykRNxlXsqHXb2IGCaT4FACH5BAkGAAIALAAAAAAMAAwAAAIYlI+py+1/AHAhGHmnqIZv+3Wg52GCaT4FACH5BAkGAAIALAAAAAAMAAwAAAIXlI+py+2/AFDShKCuxaIK/XEg6JUTVAAAIfkECQYAAgAsAAAAAAwADAAAAheUj6nL7QqAC2FWEU0W1HR+feK1ldIjFAAh+QQJBgACACwAAAAADAAMAAACGJSPqcuNAFwIkgqoptGJcyx41hddJegIBQAh+QQJBgACACwAAAAADAAMAAACGZSPqcvtCoCJKgRj6xVZUL51YkhOknd+TwEAIfkECQYAAgAsAAAAAAwADAAAAhqUj6nLzQBcCAqaaazAm/brcWJIZpGgaY5QAAAh+QQJBgACACwAAAAADAAMAAACGpSPqcsJ0EQIcZqnrKQCb6OFnAiOnIdCkVEAACH5BAkGAAIALAAAAAAMAAwAAAIclI+pKwBsQoBCGqdsnUlr5HHYFnFheT2NOlJCAQAh+QQFBgACACwAAAAADAAMAAACG5SPaQCKEdyB0tB6mbq5CR59IWiN5uJpgloZBQA7);
--icon-github: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTE3OEEyQTk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTE3OEEyQjk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTI4OTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTI5OTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+m4QGuQAAAyRJREFUeNrEl21ojWEYx895TDPbMNlBK46IUiNmPvHBSUjaqc0H8pF5+aDUKPEBqU2NhRQpX5Rv5jWlDIWlMCv7MMSWsWwmb3tpXub4XXWdPHvc9/Gc41nu+nedc7/8r/99PffLdYdDPsvkwsgkTBwsA/PADJCnzX2gHTwBt8Hl7p537/3whn04XoDZDcpBlk+9P8AFcAghzRkJwPF4zGGw0Y9QS0mAM2AnQj77FqCzrtcwB1Hk81SYojHK4DyGuQ6mhIIrBWB9Xm7ug/6B/nZrBHBegrkFxoVGpnwBMSLR9EcEcC4qb8pP14BWcBcUgewMnF3T34VqhWMFkThLJAalwnENOAKiHpJq1FZgI2AT6HZtuxZwR9GidSHtI30jOrbawxlVX78/AbNfhHlomEUJJI89O2MqeE79T8/nk8nMBm/dK576hZgmA3cp/R4l9/UeSxiHLVIlNm4nFfT0bxyuIj7LHRTKai+zdJobwMKzcZSJb0ePV5PKN+BqAAKE47UlMnERELMM3EdYP/yrd+XYb2mOiYBiQ8OQnoRBlXrl9JZix7D1pHTazu4MoyBcnYamqAjIMTR8G4FT8LuhLsexXYYjICBiqhQBvYb6fLZIJCjPypVvaOoVAW2WcasCnL2Nq82xHJNSqlCeFcDshaPK0twkAhosjZL31QYw+1rlMpWGMArl23SBsZZO58F2tlJXmjOXS+s4WGvpMiBJT/I2PInZ6lIs9/hBsNS1hS6BG0DSqmYEDRlCXQrmy50P1oDRKTSegmNbUsA0zDMwRhPJXeCE3vWLPQMvan6X8AgIa1vcR4AkGZkDR4ejJ1UHpsaVI0g2LInpOsNFUud1rhxSV+fzC9Woz2EZkWQuja7/B+jUrgtIMpy9YCW4n4K41YfzRneW5E1KJTe4B2Zq1Q5EHEtj4U3AfEzR5SVY4l7QYQPJdN2as7RKBF0BPZqqH4VgMAMBL8Byxr7y8zCZiDlnOcEKIPmUpgB5Z2ww5RdOiiRiNajUmWda5IG6WbhsyY2fx6m8gLcoJDJFkH219M3We1+cnda93pfycZpIJEL/s/wSYADmOAwAQgdpBAAAAABJRU5ErkJggg==);
}
:host([hidden]) {
display: none;
}
.wrap::-webkit-scrollbar {
-webkit-appearance: none; /* Non-standard, but currently needed for Safari */
}
.wrap {
margin: 0;
padding: 0;
border: none;
max-height: inherit;
overflow-y: auto;
scrollbar-width: none; /* Standard supported by Firefox & Chromium, but NOT yet Safari - https://caniuse.com/?search=scrollbar-width */
}
:host(.no-scroll) .wrap {
overflow-y: clip;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: var(--header-height);
background-color: #787;
background-image: var(--header-background);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
:host(.dynaheader) .header {
transform: translateY(-100%);
transition: transform var(--transition-time-out) ease-in-out var(--transition-delay-out);
}
.header .content {
backdrop-filter: blur(10px) brightness(60%);
width: calc(100% - 10px);
height: calc(var(--header-height) - 4px);
color: #fff;
padding: 2px 5px;
line-height: 1.4;
}
.header .lastfm {
display: block;
float: left;
width: 50px;
aspect-ratio: 709/279;
margin: 0 0.1em 0 0.20em;
border: none;
padding: 0;
}
.header .lastfm > div {
background-image: var(--header-lastfm-logo);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 45px;
aspect-ratio: 709/279;
margin: 0;
border: none;
padding: 0;
}
.header .userlink {
display: block;
}
.header .avatar {
position: absolute;
border-radius: 50%;
border: 1px solid #787;
margin: 0;
padding: 0;
aspect-ratio: 1 / 1;
background-image: var(--header-avatar-background);
background-size: cover;
display: inline-block;
}
:host(.dynaheader) .header .avatar {
top: 26px;
right: 26px;
width: 4px;
transition: all var(--transition-time-out) ease-in-out var(--transition-delay-out);
}
:host(:hover) .header,
:host(:not(.dynaheader)) .header {
transform: translateY(0);
transition: transform var(--transition-time-in) ease var(--transition-delay-in);
/* https://easings.co/ */
}
.usernamecontainer {
font-weight: 600; /* bold 700, normal 400 */
font-size: 19px;
text-align: right;
margin-right: 65px;
white-space: nowrap;
}
a.username {
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
}
.scrobblehistory {
font-size: smaller;
text-align: right;
margin-right: 65px;
}
:host(:hover) .header .avatar,
:host(:not(.dynaheader)) .header .avatar {
top: 2px;
right: 2px;
width: 52px;
transition: all var(--transition-time-in) ease var(--transition-delay-in);
}
.footer {
font-size: smaller;
text-align: center;
background-color: #fff;
border-radius: .8em .8em 0 0;
border: 1px solid #787;
border-bottom: none;
color: #787;
margin: 0 auto 0 auto;
padding: .4em .1em .4em .1em;
position: absolute;
bottom: 0;
width: min(100%, 9em);
left: calc(50% - (min(100%, 9em) + .2em + 2px) / 2);
display: block;
transform: translateY(calc(100% + 1px)); /* +1px because Firefox sometimes mis-positions (css rounding error?) TODO investigate */
transition: transform var(--transition-time-out) ease-in-out var(--transition-delay-out);
}
.footer a {
color: #787;
}
.footer > a::before {
background-image: var(--icon-github);
background-size: cover;
content: '';
display: inline-block;
width: 1.2em;
aspect-ratio: 1/1;
margin-right: .4em;
vertical-align: sub;
}
:host(:hover) .footer {
transform: translateY(1px); /* 1px because Firefox sometimes mis-positions (css rounding error?) TODO investigate */
transition: transform var(--transition-time-in) ease var(--transition-delay-in);
transition-delay: 1.5s;
}
#playlist {
display: flex;
flex-direction: column;
padding: 0;
border: none;
margin: 0;
}
:host(.dynaheader) #playlist {
margin-top: 0;
transition: margin-top var(--transition-time-out) ease-in-out var(--transition-delay-out);
}
:host(:hover) #playlist,
:host(:not(.dynaheader)) #playlist {
margin-top: var(--header-height);
transition: margin-top var(--transition-time-in) ease var(--transition-delay-in);
}
#playlist a {
color: rgba(34, 34, 34, 1);
}
#playlist > div {
margin: 0;
padding: 1px;
border-bottom: 1px solid #eee;
background-color: #fff;
}
#playlist > div:last-child {
border-bottom: none;
}
#playlist > div.albuminfo {
display: grid;
grid-template-columns: [coverstart] 32px [albumlinestart] auto [end];
grid-template-rows: [top] 32px [bottom];
grid-template-areas:
'cover albumline';
column-gap: 1px;
background-color: #fbe9e9;
padding-right: 4px;
}
:host(.no-albums) #playlist > div.albuminfo {
display: none;
}
#playlist > div.trackinfo {
display: grid;
grid-template-columns: [coverstart] 32px [trackstart] auto [timestart] 5.7em [end];
grid-template-rows: [top] 18px [middle] 14px [bottom];
grid-template-areas:
'cover track play'
'cover artist play';
column-gap: 1px;
}
#playlist > div.albuminfo:hover {
background-color: #fadcdc;
}
#playlist > div.trackinfo:hover {
background-color: #f9f9f9;
}
#playlist > div.trackinfo.nowplaying {
background-color: #fff9e5;
}
#playlist > div.trackinfo.nowplaying:hover {
background-color: #fcf2cf;
}
#playlist div.trackinfo > *, div.albuminfo > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
#playlist div.trackinfo > .cover, div.albuminfo > .cover {
grid-area: cover;
}
#playlist div.trackinfo img, div.albuminfo img {
width: 32px;
height: 32px;
}
#playlist div.trackinfo .cover {
background-image: var(--icon-track);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#playlist div.trackinfo > .track {
grid-area: track;
font-weight: bold; /* bold = 700 */
line-height: 18px; /* equals height -> center vertically */
padding-left: 4px;
}
#playlist div.trackinfo > .track.loved::after {
content: var(--icon-loved);
margin-left: 3px;
}
#playlist div.trackinfo > .artist {
grid-area: artist;
font-size: 85%;
padding-left: 4px;
}
#playlist div.trackinfo > .play {
grid-area: play;
font-size: 85%;
color: rgba(136, 136, 136, 1);
line-height: 32px; /* equals height -> center vertically */
text-align: right;
padding-right: 4px;
}
#playlist div.trackinfo.nowplaying > .play::before { /* Scrobbling now */
content: var(--icon-scrobbling);
margin-right: 4px;
}
#playlist div.albuminfo .cover {
background-image: var(--icon-album);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#playlist div.albuminfo > .albumline {
grid-area: albumline;
font-weight: bold;
line-height: 32px; /* equals height -> center vertically */
padding-left: 4px;
}
#playlist div.albuminfo > .albumline .album-title {
font-style: italic;
}
#playlist div.albuminfo > .albumline a.album-title.extension {
color: rgba(34, 34, 34, .7);
}
lastfm-tracks {
box-sizing: border-box;
border: 1px solid #000;
width: 100%;
height: 458px;
}