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 styles

+14 -11
+8 -8
src/themes/blur/browser/element.css
··· 48 48 flex: 1; 49 49 min-width: 0; 50 50 outline: none; 51 + padding: var(--space-2xs) var(--space-3xs); 51 52 } 52 53 53 54 .search-field input[type="search"]::-webkit-search-cancel-button { ··· 111 112 display: flex; 112 113 font-size: 75%; 113 114 font-weight: 500; 114 - letter-spacing: var(--tracking-wide); 115 + letter-spacing: var(--tracking-wider); 115 116 padding: 0 var(--space-xs); 116 117 text-transform: uppercase; 117 118 user-select: none; ··· 122 123 cursor: pointer; 123 124 display: flex; 124 125 gap: var(--space-3xs); 125 - padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0; 126 + padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) 0; 126 127 } 127 128 128 129 .table-header > div:hover { ··· 144 145 .col-fav { 145 146 flex-shrink: 0; 146 147 width: var(--space-lg); 147 - 148 - @media (min-width: 63rem) { 149 - width: var(--space-xl); 150 - } 151 148 } 152 149 153 150 .col-title { ··· 209 206 210 207 .track-row { 211 208 align-items: center; 212 - border-bottom: 1px solid color-mix(in oklch, currentColor 6%, transparent); 213 209 cursor: pointer; 214 210 display: flex; 215 211 height: 40px; ··· 220 216 transition: background-color 80ms; 221 217 } 222 218 219 + .track-row--alt { 220 + background-color: color-mix(in oklch, currentColor 1.5%, transparent); 221 + } 222 + 223 223 .track-row:hover { 224 - background-color: color-mix(in oklch, currentColor 4%, transparent); 224 + background-color: color-mix(in oklch, currentColor 6%, transparent); 225 225 } 226 226 227 227 .track-row > div {
+4 -3
src/themes/blur/browser/element.js
··· 323 323 /** 324 324 * @param {Track} track 325 325 * @param {number} top 326 + * @param {number} index 326 327 */ 327 - const renderTrackRow = (track, top) => { 328 + const renderTrackRow = (track, top, index) => { 328 329 const key = `${String(track.tags?.artist ?? "").toLowerCase()}|${String(track.tags?.title ?? "").toLowerCase()}`; 329 330 const isFav = favSet.has(key); 330 331 return html` 331 332 <div 332 - class="track-row" 333 + class="track-row ${index % 2 === 1 ? `track-row--alt` : ``}" 333 334 style="transform: translateY(${top}px);" 334 335 @dblclick="${() => this.playTrack(track)}" 335 336 > ··· 492 493 </div> 493 494 ` 494 495 : item?.type === "track" 495 - ? renderTrackRow(item.track, vItem.start) 496 + ? renderTrackRow(item.track, vItem.start, vItem.index) 496 497 : ``; 497 498 }) 498 499 }
+2
src/themes/blur/facet/index.css
··· 15 15 flex-direction: column; 16 16 overflow: hidden; 17 17 height: 100dvh; 18 + transition-duration: 750ms; 19 + transition-property: background-color; 18 20 } 19 21 20 22 /***********************************