A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: blur theme style improvements, make cover view default

+60 -10
+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
··· 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
··· 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
··· 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);