A music player that connects to your cloud/distributed storage.
chore: blur theme style improvements, make cover view default
+60
-10
+3
-2
src/facets/themes/blur/artwork-controller/element.css
+3
-2
src/facets/themes/blur/artwork-controller/element.css
···
46
46
background: oklch(14% 0 0);
47
47
border-radius: var(--radius-sm);
48
48
box-shadow: var(--box-shadow-lg);
49
-
font-size: 65%;
49
+
font-size: 75%;
50
50
font-weight: 600;
51
51
left: var(--space-xs);
52
52
letter-spacing: var(--tracking-wide);
···
135
135
cite {
136
136
display: block;
137
137
flex: 1;
138
+
font-size: 110%;
138
139
font-style: normal;
139
140
min-width: 0;
140
141
text-shadow: var(--text-shadow-sm);
···
182
183
183
184
.timestamps {
184
185
display: flex;
185
-
font-size: 60%;
186
+
font-size: 80%;
186
187
font-weight: 500;
187
188
justify-content: space-between;
188
189
margin-top: var(--space-3xs);
+43
src/facets/themes/blur/browser/element.css
+43
src/facets/themes/blur/browser/element.css
···
508
508
***********************************/
509
509
510
510
.album-detail {
511
+
container-type: inline-size;
511
512
display: flex;
512
513
flex-direction: column;
513
514
flex: 1;
···
622
623
text-overflow: ellipsis;
623
624
white-space: nowrap;
624
625
}
626
+
627
+
@container (max-width: 42rem) {
628
+
.album-detail-main {
629
+
flex-direction: column;
630
+
overflow-y: auto;
631
+
}
632
+
633
+
.album-detail-sidebar {
634
+
align-items: center;
635
+
display: flex;
636
+
flex-direction: row;
637
+
gap: var(--space-sm);
638
+
overflow-y: unset;
639
+
padding: var(--space-xs) var(--space-sm);
640
+
width: auto;
641
+
}
642
+
643
+
.album-detail-art {
644
+
flex: 0 0 auto;
645
+
width: 9rem;
646
+
}
647
+
648
+
.album-detail-info {
649
+
margin-top: 0;
650
+
min-width: 0;
651
+
}
652
+
653
+
.album-detail-name,
654
+
.album-detail-artist {
655
+
white-space: normal;
656
+
}
657
+
658
+
.album-detail-tracks {
659
+
overflow-y: unset;
660
+
}
661
+
}
662
+
663
+
@container (max-width: 21rem) {
664
+
.album-track-row .col-artist {
665
+
display: none;
666
+
}
667
+
}
+13
-7
src/facets/themes/blur/browser/element.js
+13
-7
src/facets/themes/blur/browser/element.js
···
107
107
108
108
#viewMode = signal(
109
109
/** @type {"list" | "cover"} */ (
110
-
localStorage.getItem("diffuse:browser:view-mode") === "cover"
111
-
? "cover"
112
-
: "list"
110
+
localStorage.getItem("diffuse:browser:view-mode") === "list"
111
+
? "list"
112
+
: "cover"
113
113
),
114
114
);
115
115
···
567
567
: `Sort descending`}"
568
568
>
569
569
<i class="ph-bold ph-arrow-${sortDirection === `desc`
570
-
? `down`
571
-
: `up`}"></i>
570
+
? `up`
571
+
: `down`}"></i>
572
572
</button>
573
573
</div>
574
574
</div>
···
582
582
}
583
583
584
584
if (coverViewMode === "artists") {
585
-
const artistGroups = this.$coverGroups.value?.artistGroups() ?? [];
585
+
const rawArtistGroups = this.$coverGroups.value?.artistGroups() ?? [];
586
+
const artistGroups = sortDirection === "desc"
587
+
? rawArtistGroups.map((g) => ({ ...g, groups: [...g.groups].reverse() }))
588
+
: rawArtistGroups;
586
589
587
590
requestAnimationFrame(() => this.#setupCoverObserver());
588
591
···
649
652
}
650
653
651
654
// Albums mode
652
-
const coverGroups = this.$coverGroups.value?.coverGroups() ?? [];
655
+
const rawCoverGroups = this.$coverGroups.value?.coverGroups() ?? [];
656
+
const coverGroups = sortDirection === "desc"
657
+
? rawCoverGroups.map((g) => ({ ...g, groups: [...g.groups].reverse() }))
658
+
: rawCoverGroups;
653
659
654
660
requestAnimationFrame(() => this.#setupCoverObserver());
655
661
+1
-1
src/facets/themes/blur/facet/index.inline.js
+1
-1
src/facets/themes/blur/facet/index.inline.js
···
57
57
const storedBgColor = getSettingValue(BACKGROUND_COLOR_KEY);
58
58
const storedBgMix = getSettingValue(BACKGROUND_MIX_KEY);
59
59
60
-
const activeBg = storedBg ?? "builtin:12";
60
+
const activeBg = storedBg ?? "builtin:7";
61
61
const activeMix = storedBgMix !== null ? storedBgMix === "true" : false;
62
62
63
63
applyBackgroundMix(activeMix);