forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: blur theme header shadow
+46
-7
+44
-5
src/themes/blur/browser/element.css
+44
-5
src/themes/blur/browser/element.css
···
1
1
:host {
2
+
--border-color: color-mix(in oklch, var(--text-color) 6%, transparent);
3
+
2
4
background: var(--bg-color);
3
5
color: var(--text-color);
4
6
display: flex;
···
22
24
23
25
.toolbar {
24
26
align-items: center;
25
-
border-bottom: 1px solid color-mix(in oklch, currentColor 6%, transparent);
27
+
background: var(--bg-color);
28
+
border-bottom: 1px solid var(--border-color);
26
29
display: flex;
27
30
gap: var(--space-sm);
28
31
padding: var(--space-3xs) var(--space-xs);
32
+
position: relative;
33
+
z-index: 10;
29
34
}
30
35
31
36
.search-field {
···
67
72
.playlist-btn {
68
73
align-items: center;
69
74
background: transparent;
70
-
border: 1px solid color-mix(in oklch, currentColor 6%, transparent);
75
+
border: 1px solid var(--border-color);
71
76
border-radius: var(--radius-md);
72
77
color: inherit;
73
78
cursor: pointer;
···
108
113
***********************************/
109
114
110
115
.table-header {
111
-
border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent);
116
+
box-shadow:
117
+
0 4px 12px -1px rgba(0, 0, 0, 0.1),
118
+
0 2px 2px -2px rgba(0, 0, 0, 0.1);
112
119
color: color-mix(in oklch, currentColor 40%, transparent);
113
120
display: flex;
114
121
font-size: 75%;
···
119
126
text-box: trim-both cap alphabetic;
120
127
text-transform: uppercase;
121
128
user-select: none;
129
+
130
+
@media (prefers-color-scheme: dark) {
131
+
border-bottom: 1px solid var(--border-color);
132
+
box-shadow:
133
+
0 4px 12px -1px rgba(0, 0, 0, 0.45),
134
+
0 2px 2px -2px rgba(0, 0, 0, 0.45);
135
+
}
122
136
}
123
137
124
138
.table-header > div {
125
139
align-items: center;
126
-
border-left: 1px solid color-mix(in oklch, currentColor 12%, transparent);
140
+
border-left: 1px solid var(--border-color);
127
141
cursor: pointer;
128
142
display: flex;
129
143
gap: var(--space-3xs);
···
183
197
flex: 1;
184
198
overflow-y: auto;
185
199
min-height: 0;
200
+
user-select: none;
186
201
}
187
202
188
203
.virtual-scroll {
···
234
249
}
235
250
236
251
.track-row:hover {
237
-
background-color: color-mix(in oklch, currentColor 6%, transparent);
252
+
background-color: color-mix(in oklch, currentColor 6%, var(--bg-color));
238
253
}
239
254
240
255
.track-row > div {
···
298
313
299
314
.fav-btn--active:hover {
300
315
color: oklch(0.52 0.22 25);
316
+
}
317
+
}
318
+
319
+
/***********************************
320
+
* Group header + Track row
321
+
***********************************/
322
+
323
+
.group-header--top,
324
+
.track-row--top {
325
+
background: var(--bg-color);
326
+
327
+
&::before {
328
+
border-top: 1px solid var(--border-color);
329
+
content: "";
330
+
height: 0;
331
+
left: 0;
332
+
pointer-events: none;
333
+
position: absolute;
334
+
right: 0;
335
+
top: 0;
336
+
337
+
@media (prefers-color-scheme: dark) {
338
+
border-top-color: transparent;
339
+
}
301
340
}
302
341
}
303
342
+2
-2
src/themes/blur/browser/element.js
+2
-2
src/themes/blur/browser/element.js
···
330
330
const isFav = favSet.has(key);
331
331
return html`
332
332
<div
333
-
class="track-row ${index % 2 === 1 ? `track-row--alt` : ``}"
333
+
class="track-row ${index === 0 ? `track-row--top` : ``} ${index % 2 === 1 ? `track-row--alt` : ``}"
334
334
style="transform: translateY(${top}px);"
335
335
@dblclick="${() => this.playTrack(track)}"
336
336
>
···
485
485
return item?.type === "group"
486
486
? html`
487
487
<div
488
-
class="group-header"
488
+
class="group-header ${vItem.index === 0 ? `group-header--top` : ``}"
489
489
style="transform: translateY(${vItem.start}px);"
490
490
>
491
491
<i class="ph-fill ph-vinyl-record"></i>