A music player that connects to your cloud/distributed storage.
chore: better cover placeholder
+3
-28
-13
src/themes/blur/browser/element.css
-13
src/themes/blur/browser/element.css
···
478
478
width: 100%;
479
479
}
480
480
481
-
.cover-art-loading {
482
-
animation: cover-pulse 1.2s ease-in-out infinite;
483
-
}
484
-
485
-
@keyframes cover-pulse {
486
-
0%,
487
-
100% {
488
-
opacity: 1;
489
-
}
490
-
50% {
491
-
opacity: 0.4;
492
-
}
493
-
}
494
481
495
482
.cover-info {
496
483
display: flex;
+3
-15
src/themes/blur/browser/element.js
+3
-15
src/themes/blur/browser/element.js
···
595
595
? html`
596
596
<img src="${artUrl}" alt="${artistName}" loading="lazy" />
597
597
`
598
-
: artUrl === null
599
-
? html`
600
-
<div class="cover-art-placeholder"><i class="ph-bold ph-music-note"></i></div>
601
-
`
602
598
: html`
603
-
<div class="cover-art-placeholder cover-art-loading"></div>
599
+
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>
604
600
`}
605
601
</div>
606
602
<div class="cover-info">
···
666
662
? html`
667
663
<img src="${artUrl}" alt="${albumName}" loading="lazy" />
668
664
`
669
-
: artUrl === null
670
-
? html`
671
-
<div class="cover-art-placeholder"><i class="ph-bold ph-music-note"></i></div>
672
-
`
673
665
: html`
674
-
<div class="cover-art-placeholder cover-art-loading"></div>
666
+
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>
675
667
`}
676
668
</div>
677
669
<div class="cover-info">
···
966
958
? html`
967
959
<img src="${artUrl}" alt="${name}" />
968
960
`
969
-
: artUrl === null
970
-
? html`
971
-
<div class="cover-art-placeholder"><i class="ph-bold ph-music-note"></i></div>
972
-
`
973
961
: html`
974
-
<div class="cover-art-placeholder cover-art-loading"></div>
962
+
<div class="cover-art-placeholder"><i class="ph-fill ph-vinyl-record"></i></div>
975
963
`}
976
964
</div>
977
965
<div class="album-detail-info">