A music player that connects to your cloud/distributed storage.
chore: blur theme improvements
+55
-8
+2
src/common/loader.js
+2
src/common/loader.js
···
161
161
* @param {{ context?: Error; throw?: boolean }} [options]
162
162
*/
163
163
export function renderError(container, error, options) {
164
+
document.querySelector("#diffuse-loader")?.classList.add("loaded");
165
+
container.classList.add("has-loaded");
164
166
container.innerHTML = `
165
167
<div class="diffuse">
166
168
<a href="./" class="flex" style="color: inherit; text-decoration: none;">
+3
-2
src/themes/blur/artwork-controller/element.css
+3
-2
src/themes/blur/artwork-controller/element.css
···
2
2
--transition-durition: 750ms;
3
3
container-type: inline-size;
4
4
display: block;
5
-
font-size: var(--fs-sm);
5
+
font-size: var(--fs-xs);
6
+
font-size: calc((var(--fs-xs) + var(--fs-sm)) / 2);
6
7
}
7
8
8
9
main {
···
52
53
letter-spacing: var(--tracking-wide);
53
54
line-height: 0.75;
54
55
padding: calc(var(--space-2xs) * 0.8) calc(var(--space-2xs) * 0.65);
55
-
padding-bottom: calc(var(--space-2xs) * 0.575);
56
+
padding-bottom: calc(var(--space-2xs) * 0.675);
56
57
position: absolute;
57
58
text-box: trim-both cap alphabetic;
58
59
text-transform: uppercase;
+6
src/themes/blur/artwork-controller/facet/index.html
+6
src/themes/blur/artwork-controller/facet/index.html
···
9
9
font-feature-settings: normal;
10
10
font-optical-sizing: auto;
11
11
}
12
+
13
+
@media (min-width: 70em) {
14
+
db-artwork-controller {
15
+
font-size: var(--fs-sm);
16
+
}
17
+
}
12
18
</style>
13
19
14
20
<script type="module" src="themes/blur/artwork-controller/facet/index.inline.js"></script>
+11
src/themes/blur/facet/index.css
+11
src/themes/blur/facet/index.css
···
37
37
mix-blend-mode: normal;
38
38
}
39
39
40
+
#bg-overlay::after {
41
+
background: linear-gradient(#0000, rgba(0, 0, 0, 0.175));
42
+
bottom: 0;
43
+
content: "";
44
+
height: 16rem;
45
+
left: 0;
46
+
pointer-events: none;
47
+
position: absolute;
48
+
right: 0;
49
+
}
50
+
40
51
/***********************************
41
52
* Main
42
53
***********************************/
+4
-4
src/themes/blur/facet/index.html
+4
-4
src/themes/blur/facet/index.html
···
63
63
<input type="url" id="bg-url-input" placeholder="https://..." />
64
64
<button id="bg-url-apply"><i class="ph-bold ph-arrow-right"></i></button>
65
65
</div>
66
+
<button class="bg-mix-btn" id="bg-mix-btn">
67
+
<i class="ph-bold ph-intersect"></i>
68
+
Mix image with background color
69
+
</button>
66
70
</section>
67
71
68
72
<section class="settings-section">
···
76
80
<span>None</span>
77
81
</button>
78
82
</div>
79
-
<button class="bg-mix-btn" id="bg-mix-btn">
80
-
<i class="ph-bold ph-intersect"></i>
81
-
Mix image with color
82
-
</button>
83
83
</section>
84
84
</div>
85
85
</div>
+29
-2
src/themes/blur/facet/index.inline.js
+29
-2
src/themes/blur/facet/index.inline.js
···
56
56
const storedBgColor = getSettingValue(BACKGROUND_COLOR_KEY);
57
57
const storedBgMix = getSettingValue(BACKGROUND_MIX_KEY);
58
58
59
-
const activeBg = storedBg ?? "builtin:13";
60
-
const activeMix = storedBgMix !== null ? storedBgMix === "true" : true;
59
+
const activeBg = storedBg ?? "builtin:12";
60
+
const activeMix = storedBgMix !== null ? storedBgMix === "true" : false;
61
61
62
62
applyBackgroundMix(activeMix);
63
63
if (storedBgColor) applyBackgroundColor(storedBgColor);
···
298
298
});
299
299
300
300
overlay.style.backgroundImage = `url('${imageUrl.replace(/'/g, "\\'")}')`;
301
+
overlay.style.backgroundPosition = value.startsWith("builtin:")
302
+
? backgroundPositioning(`${value.slice(8)}.jpg`)
303
+
: "";
301
304
302
305
await new Promise((resolve) => {
303
306
requestAnimationFrame(() => resolve(undefined));
304
307
});
305
308
306
309
overlay.classList.add("bg-overlay--visible");
310
+
}
311
+
}
312
+
313
+
/**
314
+
* Returns the background-position value for a given image filename.
315
+
* @param {string} filename
316
+
* @returns {string}
317
+
*/
318
+
function backgroundPositioning(filename) {
319
+
switch (filename) {
320
+
case "2.jpg": return "center 68%";
321
+
case "3.jpg": return "center 30%";
322
+
case "4.jpg": return "center 96.125%";
323
+
case "6.jpg": return "center 40%";
324
+
case "11.jpg": return "center 67.25%";
325
+
case "19.jpg": return "center 13%";
326
+
case "20.jpg": return "center 39.75%";
327
+
case "21.jpg": return "center 52.5%";
328
+
case "22.jpg": return "center top";
329
+
case "23.jpg": return "center 92.5%";
330
+
case "24.jpg": return "center top";
331
+
case "25.jpg": return "center 50%";
332
+
case "27.jpg": return "center top";
333
+
default: return "center bottom";
307
334
}
308
335
}
309
336