forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: blur browser styles + fonts
+67
-37
src/fonts/Figtree-Italic-VariableFont_wght.woff2
src/fonts/Figtree-Italic-VariableFont_wght.woff2
This is a binary file and will not be displayed.
src/fonts/Figtree-VariableFont_wght.woff2
src/fonts/Figtree-VariableFont_wght.woff2
This is a binary file and will not be displayed.
+5
src/themes/blur/artwork-controller/facet/index.html
+5
src/themes/blur/artwork-controller/facet/index.html
···
2
2
@import "./vendor/@phosphor-icons/web/bold/style.css";
3
3
@import "./vendor/@phosphor-icons/web/fill/style.css";
4
4
@import "./styles/base.css";
5
+
@import "./themes/blur/font-faces.css";
6
+
7
+
db-artwork-controller {
8
+
font-family: "Figtree", "Intervariable", sans-serif;
9
+
}
5
10
</style>
6
11
7
12
<script type="module" src="themes/blur/artwork-controller/facet/index.inline.js"></script>
+29
-3
src/themes/blur/browser/element.css
+29
-3
src/themes/blur/browser/element.css
···
1
1
:host {
2
+
--bg-color: oklch(100% 0 0);
3
+
--text-color: oklch(14% 0 0);
4
+
5
+
background: var(--bg-color);
6
+
color: var(--text-color);
2
7
display: flex;
3
8
flex-direction: column;
4
9
font-size: calc(var(--fs-sm) * 0.85);
···
6
11
overflow: hidden;
7
12
}
8
13
14
+
@media (prefers-color-scheme: dark) {
15
+
:host {
16
+
--bg-color: oklch(19% 0.006 265);
17
+
--text-color: oklch(86% 0 0);
18
+
}
19
+
}
20
+
9
21
/***********************************
10
22
* Dropdown
11
23
***********************************/
···
23
35
border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent);
24
36
display: flex;
25
37
gap: var(--space-sm);
26
-
padding: var(--space-2xs) var(--space-xs);
38
+
padding: var(--space-3xs) var(--space-xs);
27
39
}
28
40
29
41
.search-field {
···
42
54
.search-field input {
43
55
background: transparent;
44
56
border: none;
45
-
color: inherit;
57
+
color: var(--text-color);
46
58
flex: 1;
47
59
min-width: 0;
48
60
outline: none;
49
61
}
50
62
63
+
.search-field input[type="search"]::-webkit-search-cancel-button {
64
+
display: none;
65
+
}
66
+
51
67
.search-field input::placeholder {
52
68
color: color-mix(in oklch, currentColor 60%, transparent);
53
69
}
···
59
75
.toolbar-actions {
60
76
align-items: center;
61
77
display: flex;
62
-
gap: var(--space-2xs);
63
78
}
64
79
65
80
.playlist-btn {
···
73
88
font-family: inherit;
74
89
font-size: 100%;
75
90
gap: var(--space-2xs);
91
+
margin-left: var(--space-2xs);
76
92
max-width: 12rem;
77
93
overflow: hidden;
78
94
padding: var(--space-3xs) var(--space-2xs);
···
270
286
271
287
.fav-btn--active:hover {
272
288
color: oklch(0.45 0.2 25);
289
+
}
290
+
291
+
@media (prefers-color-scheme: dark) {
292
+
.fav-btn--active {
293
+
color: oklch(0.62 0.22 25);
294
+
}
295
+
296
+
.fav-btn--active:hover {
297
+
color: oklch(0.52 0.22 25);
298
+
}
273
299
}
274
300
275
301
/***********************************
+13
-1
src/themes/blur/browser/element.js
+13
-1
src/themes/blur/browser/element.js
···
210
210
this.$scope.value?.setSearchTerm(term);
211
211
};
212
212
213
+
clearSearch = () => {
214
+
/** @type {HTMLInputElement | null} */
215
+
const input = this.root().querySelector("#search-input");
216
+
if (input) input.value = "";
217
+
this.$scope.value?.setSearchTerm(undefined);
218
+
};
219
+
213
220
/**
214
221
* @param {string | undefined} value
215
222
*/
···
368
375
</label>
369
376
370
377
<div class="toolbar-actions">
378
+
${searchTerm ? html`
379
+
<button class="toolbar-icon-btn" @click="${this.clearSearch}" title="Clear search">
380
+
<i class="ph-bold ph-x"></i>
381
+
</button>
382
+
` : ``}
371
383
<button class="toolbar-icon-btn" popovertarget="groupby-menu" title="Group by">
372
384
<i class="ph-fill ph-intersect-three"></i>
373
385
</button>
···
406
418
</div>
407
419
<button class="playlist-btn" popovertarget="playlist-menu">
408
420
<i class="ph-fill ph-playlist"></i>
409
-
${playlist ?? `All tracks`}
421
+
<span>${playlist ?? `All tracks`}</span>
410
422
</button>
411
423
<div id="playlist-menu" class="dropdown" popover>
412
424
<button @click="${() => { this.setSelectedPlaylist(undefined); /** @type {HTMLElement | null} */ (this.root().querySelector(`#playlist-menu`))?.hidePopover(); }}">
+2
src/themes/blur/browser/facet/index.html
+2
src/themes/blur/browser/facet/index.html
···
3
3
@import "./vendor/@phosphor-icons/web/fill/style.css";
4
4
@import "./styles/base.css";
5
5
@import "./styles/diffuse/facet.css";
6
+
@import "./themes/blur/font-faces.css";
6
7
7
8
db-browser {
9
+
font-family: "Figtree", "Intervariable", sans-serif;
8
10
height: 100vh;
9
11
}
10
12
</style>
+15
src/themes/blur/font-faces.css
+15
src/themes/blur/font-faces.css
···
1
+
@font-face {
2
+
font-display: swap;
3
+
font-family: Figtree;
4
+
font-style: normal;
5
+
font-weight: 100 900;
6
+
src: url("../../fonts/Figtree-VariableFont_wght.woff2") format("woff2");
7
+
}
8
+
9
+
@font-face {
10
+
font-display: swap;
11
+
font-family: Figtree;
12
+
font-style: italic;
13
+
font-weight: 100 900;
14
+
src: url("../../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
15
+
}
+3
-33
src/themes/blur/index.vto
+3
-33
src/themes/blur/index.vto
···
3
3
base: ../../
4
4
5
5
styles:
6
-
- ../../styles/base.css
7
-
- index.css
6
+
- styles/base.css
7
+
- themes/blur/index.css
8
8
9
9
scripts:
10
-
- index.js
10
+
- themes/blur/index.js
11
11
---
12
12
13
13
<!-- UI -->
14
14
<main>
15
15
</main>
16
-
17
-
<!-- Engines -->
18
-
<de-audio group="shared"></de-audio>
19
-
<de-queue group="shared"></de-queue>
20
-
21
-
<!-- Input & Processors -->
22
-
<dp-metadata></dp-metadata>
23
-
24
-
<di-opensubsonic id="input"></di-opensubsonic>
25
-
26
-
<!-- Orchestrators -->
27
-
<do-output id="output"></do-output>
28
-
29
-
<do-process-tracks
30
-
input-selector="#input"
31
-
metadata-processor-selector="dp-metadata"
32
-
output-selector="#output"
33
-
></do-process-tracks>
34
-
35
-
<do-queue-audio
36
-
input-selector="#input"
37
-
audio-engine-selector="de-audio"
38
-
queue-engine-selector="de-queue"
39
-
></do-queue-audio>
40
-
41
-
<do-queue-tracks
42
-
input-selector="#input"
43
-
output-selector="#output"
44
-
queue-engine-selector="de-queue"
45
-
></do-queue-tracks>