A music player that connects to your cloud/distributed storage.
chore: blur theme styles
+14
-11
+8
-8
src/themes/blur/browser/element.css
+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
+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
}