forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: responsive blur theme + many style improvements
+107
-45
+11
-3
src/themes/blur/artwork-controller/element.css
+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
+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
+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
+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
+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
+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>