forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: minor blur theme improvements
+42
-21
+26
-12
src/themes/blur/artwork-controller/element.css
+26
-12
src/themes/blur/artwork-controller/element.css
···
1
1
:host {
2
-
--spacing: var(--space-sm);
3
2
--transition-durition: 750ms;
3
+
container-type: inline-size;
4
+
display: block;
4
5
font-size: var(--fs-sm);
5
-
}
6
-
7
-
@media (min-width: 63rem) {
8
-
:host {
9
-
--spacing: var(--space-md);
10
-
}
11
6
}
12
7
13
8
main {
···
51
46
background: oklch(14% 0 0);
52
47
border-radius: var(--radius-sm);
53
48
box-shadow: var(--box-shadow-lg);
54
-
font-size: 64%;
49
+
font-size: 65%;
55
50
font-weight: 600;
56
51
left: var(--space-xs);
57
52
letter-spacing: var(--tracking-wide);
···
99
94
100
95
.controller {
101
96
flex-shrink: 0;
102
-
padding: 0 var(--spacing) var(--spacing);
97
+
padding: var(--space-sm);
98
+
padding-top: 0;
103
99
position: relative;
100
+
101
+
@container (min-width: 35em) {
102
+
padding: var(--space-md);
103
+
padding-top: 0;
104
+
}
104
105
}
105
106
106
107
.controller__background {
···
112
113
}
113
114
114
115
.controller__inner {
116
+
margin-top: calc(var(--space-sm) * -1);
115
117
position: relative;
116
118
transition-duration: var(--transition-durition);
117
119
transition-property: color;
···
133
135
border: 0;
134
136
color: color-mix(in oklch, currentColor 50%, transparent);
135
137
cursor: pointer;
136
-
font-size: 113%;
138
+
font-size: 110%;
137
139
padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs);
138
140
139
141
&[data-enabled="t"] {
···
177
179
178
180
.progress {
179
181
cursor: pointer;
180
-
margin: var(--space-xs) 0;
182
+
margin: var(--space-2xs) 0;
181
183
padding-top: var(--space-2xs);
184
+
185
+
@container (min-width: 35em) {
186
+
margin: var(--space-xs) 0;
187
+
}
182
188
}
183
189
184
190
.timestamps {
···
203
209
font-size: 230%;
204
210
gap: var(--space-lg);
205
211
justify-content: center;
206
-
margin: var(--spacing) 0;
212
+
margin: var(--space-xs) 0;
207
213
padding: 0;
208
214
text-align: center;
215
+
216
+
@container (min-width: 28em) {
217
+
margin: var(--space-sm) 0;
218
+
}
219
+
220
+
@container (min-width: 35em) {
221
+
margin: var(--space-md) 0;
222
+
}
209
223
}
210
224
211
225
.controller .menu__loader {
+3
-1
src/themes/blur/artwork-controller/element.js
+3
-1
src/themes/blur/artwork-controller/element.js
···
25
25
*/
26
26
27
27
class ArtworkController extends DiffuseElement {
28
+
static observedAttributes = ["group-label"];
29
+
28
30
constructor() {
29
31
super();
30
32
this.attachShadow({ mode: "open" });
···
413
415
window.open(loaderUrl.toString(), "_blank");
414
416
}}"
415
417
>
416
-
${this.group}
418
+
${this.getAttribute("group-label") ?? this.group}
417
419
</label>
418
420
419
421
${artwork}
+2
-2
src/themes/blur/facet/index.css
+2
-2
src/themes/blur/facet/index.css
···
59
59
60
60
@media (min-width: 63rem) {
61
61
gap: var(--space-sm);
62
-
padding: var(--space-xl) var(--space-md);
62
+
padding: var(--space-lg) var(--space-md);
63
63
}
64
64
65
65
@media (min-width: 84rem) {
66
66
gap: var(--space-lg);
67
-
padding: var(--space-3xl) var(--space-xl);
67
+
padding: var(--space-2xl) var(--space-xl);
68
68
}
69
69
}
70
70
+1
-1
src/themes/blur/facet/index.html
+1
-1
src/themes/blur/facet/index.html
+10
-5
src/themes/blur/facet/index.inline.js
+10
-5
src/themes/blur/facet/index.inline.js
···
31
31
await import("~/themes/blur/artwork-controller/element.js");
32
32
await import("~/themes/blur/browser/element.js");
33
33
34
-
const group = foundation.GROUP === "facets" ? "Deck A" : foundation.GROUP;
35
-
document.querySelector("db-artwork-controller")?.setAttribute("group", group);
36
-
document.querySelector("db-browser")?.setAttribute("group", group);
34
+
const groupLabel = foundation.GROUP === "facets" ? "Deck A" : foundation.GROUP;
35
+
const controller = document.querySelector("db-artwork-controller");
36
+
37
+
controller?.setAttribute("group", foundation.GROUP);
38
+
controller?.setAttribute("group-label", groupLabel);
39
+
40
+
document.querySelector("db-browser")?.setAttribute("group", foundation.GROUP);
37
41
38
42
////////////////////////////////////////////
39
43
// BACKGROUND SETTINGS
···
183
187
184
188
// Mix: toggle
185
189
document.querySelector("#bg-mix-btn")?.addEventListener("click", async () => {
186
-
const isMixed =
187
-
!(document.querySelector("#bg-overlay")?.classList.contains("bg-overlay--no-mix") ?? false);
190
+
const isMixed = !(document.querySelector("#bg-overlay")?.classList.contains(
191
+
"bg-overlay--no-mix",
192
+
) ?? false);
188
193
const next = !isMixed;
189
194
applyBackgroundMix(next);
190
195
updateMixSelected(next);