A music player that connects to your cloud/distributed storage.
fix: artwork controller flash while loading
+6
-5
+3
-2
src/themes/blur/artwork-controller/element.css
+3
-2
src/themes/blur/artwork-controller/element.css
···
9
9
flex-direction: column;
10
10
font-size: var(--fs-sm);
11
11
height: 100%;
12
+
opacity: 1 !important;
12
13
overflow: hidden;
13
14
position: relative;
14
15
transition:
15
16
background-color var(--transition-durition),
16
-
color var(--transition-durition);
17
+
color var(--transition-durition),
18
+
opacity var(--transition-durition);
17
19
}
18
20
19
21
/* Artwork */
···
89
91
90
92
.controller {
91
93
flex-shrink: 0;
92
-
opacity: 1 !important;
93
94
padding: 0 var(--space-md) var(--space-md);
94
95
position: relative;
95
96
}
+3
-3
src/themes/blur/artwork-controller/element.js
+3
-3
src/themes/blur/artwork-controller/element.js
···
433
433
<link rel="stylesheet" href="themes/blur/artwork-controller/element.css" />
434
434
435
435
<main style="background-color: ${this.#artworkColor.value ??
436
-
`revert-layer`};">
436
+
`var(--color-3)`}; opacity: 0;">
437
437
<section class="artwork">
438
438
<label style="display: ${this.group === DEFAULT_GROUP
439
439
? `none`
···
444
444
${artwork}
445
445
</section>
446
446
447
-
<section class="controller" style="opacity: 0;">
447
+
<section class="controller">
448
448
<div class="gradient-blur">
449
449
<div></div>
450
450
<div></div>
···
459
459
<div
460
460
class="controller__background"
461
461
style="background-color: ${this.#artworkColor.value ??
462
-
`revert-layer`};"
462
+
`transparent`};"
463
463
>
464
464
</div>
465
465