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

Configure Feed

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

feat: responsive blur theme + many style improvements

+107 -45
+11 -3
src/themes/blur/artwork-controller/element.css
··· 1 1 :host { 2 + --spacing: var(--space-sm); 2 3 --transition-durition: 750ms; 3 4 font-size: var(--fs-sm); 4 5 } 5 6 7 + @media (min-width: 63rem) { 8 + :host { 9 + --spacing: var(--space-md); 10 + } 11 + } 12 + 6 13 main { 7 14 background: var(--color-3); 8 15 color: white; ··· 49 56 left: var(--space-xs); 50 57 letter-spacing: var(--tracking-wide); 51 58 line-height: 0.75; 52 - padding: 8px 6px 7px; 59 + padding: calc(var(--space-2xs) * 0.8) calc(var(--space-2xs) * 0.65); 60 + padding-bottom: calc(var(--space-2xs) * 0.8 - 1px); 53 61 position: absolute; 54 62 text-box: trim-both cap alphabetic; 55 63 text-transform: uppercase; ··· 91 99 92 100 .controller { 93 101 flex-shrink: 0; 94 - padding: 0 var(--space-md) var(--space-md); 102 + padding: 0 var(--spacing) var(--spacing); 95 103 position: relative; 96 104 } 97 105 ··· 195 203 font-size: 230%; 196 204 gap: var(--space-lg); 197 205 justify-content: center; 198 - margin: var(--space-md) 0; 206 + margin: var(--spacing) 0; 199 207 padding: 0; 200 208 text-align: center; 201 209 }
+11 -3
src/themes/blur/artwork-controller/element.js
··· 402 402 <main style="background-color: ${this.#artworkColor.value ?? 403 403 `var(--color-3)`}; opacity: 0;"> 404 404 <section class="artwork"> 405 - <label style="display: ${this.group === DEFAULT_GROUP 406 - ? `none` 407 - : `block`};"> 405 + <label 406 + style="display: ${this.group === DEFAULT_GROUP ? `none` : `block`}; cursor: pointer;" 407 + @click="${() => { 408 + const base = document.baseURI; 409 + const facetUrl = new URL("themes/blur/artwork-controller/facet/index.html", base); 410 + facetUrl.searchParams.set("group", this.group); 411 + const loaderUrl = new URL("l/", base); 412 + loaderUrl.searchParams.set("path", facetUrl.pathname.slice(1) + facetUrl.search); 413 + window.open(loaderUrl.toString(), "_blank"); 414 + }}" 415 + > 408 416 ${this.group} 409 417 </label> 410 418
+9 -9
src/themes/blur/browser/element.css
··· 22 22 23 23 .toolbar { 24 24 align-items: center; 25 - border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent); 25 + border-bottom: 1px solid color-mix(in oklch, currentColor 6%, transparent); 26 26 display: flex; 27 27 gap: var(--space-sm); 28 28 padding: var(--space-3xs) var(--space-xs); ··· 55 55 } 56 56 57 57 .search-field input::placeholder { 58 - color: color-mix(in oklch, currentColor 60%, transparent); 59 - } 60 - 61 - .search-field input:focus { 62 - color: currentColor; 58 + color: color-mix(in oklch, currentColor 40%, transparent); 63 59 } 64 60 65 61 .toolbar-actions { ··· 70 66 .playlist-btn { 71 67 align-items: center; 72 68 background: transparent; 73 - border: 1px solid color-mix(in oklch, currentColor 10%, transparent); 69 + border: 1px solid color-mix(in oklch, currentColor 12%, transparent); 74 70 border-radius: var(--radius-md); 75 71 color: inherit; 76 72 cursor: pointer; ··· 147 143 148 144 .col-fav { 149 145 flex-shrink: 0; 150 - width: 3rem; 146 + width: var(--space-lg); 147 + 148 + @media (min-width: 63rem) { 149 + width: var(--space-xl); 150 + } 151 151 } 152 152 153 153 .col-title { ··· 212 212 border-bottom: 1px solid color-mix(in oklch, currentColor 6%, transparent); 213 213 cursor: pointer; 214 214 display: flex; 215 - height: 44px; 215 + height: 40px; 216 216 left: 0; 217 217 position: absolute; 218 218 right: 0;
+3 -3
src/themes/blur/browser/element.js
··· 20 20 * @import {OutputElement} from "~/components/output/types.d.ts" 21 21 */ 22 22 23 - const TRACK_ROW_HEIGHT = 44; 23 + const TRACK_ROW_HEIGHT = 40; 24 24 const GROUP_HEADER_HEIGHT = 52; 25 25 const OVERSCAN = 10; 26 26 ··· 382 382 </button> 383 383 ` : ``} 384 384 <button class="toolbar-icon-btn" popovertarget="groupby-menu" title="Group by"> 385 - <i class="ph-fill ph-intersect-three"></i> 385 + <i class="ph-fill ph-stack"></i> 386 386 </button> 387 387 <div id="groupby-menu" class="dropdown" popover> 388 388 ${GROUP_BY_OPTIONS.map(({ value, label, icon, sortBy: optSortBy, sortDirection: optSortDirection }) => { ··· 411 411 /** @type {HTMLElement | null} */ (this.root().querySelector(`#groupby-menu`))?.hidePopover(); 412 412 }}" 413 413 > 414 - <i class="ph-${isActive ? `bold ph-x` : `fill ${icon}`}"></i> 414 + ${isActive ? html`<i class="ph-bold ph-x"></i>` : ``} 415 415 ${label} 416 416 </button> 417 417 `;
+58 -21
src/themes/blur/facet/index.css
··· 1 + :root { 2 + --facet-bg-color: var(--color-2); 3 + } 4 + 5 + @media (prefers-color-scheme: dark) { 6 + :root { 7 + --facet-bg-color: var(--color-3); 8 + } 9 + } 10 + 1 11 body { 2 - /*background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);*/ 3 - background-color: var(--color-2); 12 + background-color: oklch(from var(--facet-bg-color) calc(l - 0.025) c h); 4 13 color: var(--text-color); 5 14 display: flex; 6 15 flex-direction: column; 7 16 overflow: hidden; 8 17 height: 100dvh; 9 - 10 - @media (prefers-color-scheme: dark) { 11 - background-color: var(--color-3); 12 - } 13 18 } 14 19 15 20 /*********************************** ··· 17 22 ***********************************/ 18 23 19 24 main { 20 - display: grid; 21 - gap: var(--space-sm); 22 - grid-template-columns: repeat(3, 1fr); 23 - grid-template-rows: 1fr; 25 + display: flex; 26 + flex-direction: column; 27 + gap: var(--space-xs); 24 28 height: 100dvh; 29 + margin: 0 auto; 30 + max-width: var(--container-9xl); 25 31 overflow: hidden; 26 - padding: var(--space-md) var(--space-md); 32 + padding: var(--space-xs); 33 + 34 + @media (min-width: 35rem) { 35 + display: grid; 36 + grid-template-columns: repeat(3, 1fr); 37 + grid-template-rows: 1fr; 38 + } 39 + 40 + @media (min-width: 63rem) { 41 + gap: var(--space-sm); 42 + padding: var(--space-md); 43 + } 44 + 45 + @media (min-width: 84rem) { 46 + gap: var(--space-lg); 47 + padding: var(--space-xl); 48 + } 27 49 } 28 50 29 51 /*********************************** ··· 33 55 db-artwork-controller, 34 56 db-browser { 35 57 border-radius: var(--radius-md); 36 - height: 100%; 58 + box-shadow: var(--box-shadow-md); 37 59 justify-self: end; 38 60 overflow: hidden; 39 61 width: 100%; ··· 42 64 db-artwork-controller { 43 65 grid-column: 3; 44 66 grid-row: 1; 67 + min-height: 50vh; 45 68 } 46 69 47 70 db-browser { 48 - box-shadow: var(--box-shadow-md); 49 71 grid-column: 1 / span 2; 50 72 grid-row: 1 / span 2; 51 73 } 52 74 53 75 #shortcuts { 54 - border-radius: var(--radius-md); 55 - box-shadow: var(--box-shadow-md); 56 76 display: flex; 57 77 font-size: var(--fs-sm); 58 - gap: 1px; 59 - overflow: hidden; 78 + gap: var(--space-2xs); 60 79 61 80 button, 62 81 a { 63 82 align-items: center; 64 - background-color: var(--bg-color); 65 - border: 0; 66 - color: var(--text-color); 83 + background-color: transparent; 84 + border: 2px dotted oklch(from var(--text-color) l c h / 0.1); 85 + border-radius: var(--radius-md); 86 + color: oklch(from var(--text-color) l c h / 0.6); 67 87 cursor: pointer; 68 88 display: flex; 69 89 flex: 1; ··· 71 91 line-height: 0.75; 72 92 justify-content: center; 73 93 overflow: hidden; 74 - padding: var(--space-sm) var(--space-3xs); 94 + padding: var(--space-xs) var(--space-3xs); 75 95 text-box: trim-both cap alphabetic; 76 96 text-decoration: none; 77 97 text-overflow: ellipsis; 98 + transition-duration: 250ms; 99 + transition-property: border-color, color; 78 100 white-space: nowrap; 101 + 102 + &:focus, 103 + &:hover { 104 + border-color: oklch(from var(--text-color) l c h / 0.3); 105 + color: oklch(from var(--text-color) l c h / 1); 106 + } 107 + } 108 + 109 + @media (min-width: 63rem) { 110 + gap: var(--space-xs); 111 + 112 + button, 113 + a { 114 + padding: var(--space-sm) var(--space-3xs); 115 + } 79 116 } 80 117 }
+14 -6
src/themes/blur/facet/index.html
··· 15 15 db-browser { 16 16 font-family: "Public Sans", "Intervariable", sans-serif; 17 17 } 18 + 19 + @media (orientation: landscape) and (width < 63rem) { 20 + db-artwork-controller { 21 + font-size: calc((var(--fs-sm) + var(--fs-xs)) / 2); 22 + } 23 + } 18 24 </style> 19 25 20 26 <main> ··· 35 41 ></db-artwork-controller> 36 42 37 43 <div id="shortcuts"> 38 - <button id="btn-new-deck"> 39 - <i class="ph-bold ph-browsers"></i> 40 - <span>New Deck</span> 44 + <button id="btn-new-deck" title="Open a new deck"> 45 + <i class="ph-bold ph-circles-three-plus"></i> 41 46 </button> 42 - <a href="l/?path=facets%2Fdata%2Fsources%2Findex.html" target="_blank"> 43 - <i class="ph-bold ph-hard-drives"></i> 44 - <span>Sources</span> 47 + <a 48 + href="l/?path=facets%2Fdata%2Fsources%2Findex.html" 49 + target="_blank" 50 + title="Sources (Audio Input)" 51 + > 52 + <i class="ph-bold ph-eject"></i> 45 53 </a> 46 54 </div> 47 55 </main>
+1
src/themes/blur/facet/index.inline.js
··· 35 35 const held = (state.held ?? []).map((l) => l.name); 36 36 37 37 let nextGroup; 38 + 38 39 if (!held.some((n) => n.includes("/Deck B"))) { 39 40 nextGroup = "Deck B"; 40 41 } else if (!held.some((n) => n.includes("/Deck C"))) {