tokono.ma
A music player that connects to your cloud/distributed storage.
chore: artwork controller css improvements
+14
-8
+9
src/themes/blur/artwork-controller/element.css
+9
src/themes/blur/artwork-controller/element.css
···
89
89
90
90
.controller {
91
91
flex-shrink: 0;
92
+
opacity: 1 !important;
92
93
padding: 0 var(--space-md) var(--space-md);
93
94
position: relative;
94
95
}
···
118
119
display: block;
119
120
font-style: normal;
120
121
text-shadow: var(--text-shadow-sm);
122
+
123
+
& > span,
124
+
& > strong {
125
+
display: block;
126
+
overflow: hidden;
127
+
text-overflow: ellipsis;
128
+
white-space: nowrap;
129
+
}
121
130
}
122
131
123
132
.controller__inner--light-mode cite {
+5
-8
src/themes/blur/artwork-controller/element.js
+5
-8
src/themes/blur/artwork-controller/element.js
···
1
1
import { FastAverageColor } from "fast-average-color";
2
2
import { Temporal } from "@js-temporal/polyfill";
3
-
import { xxh32r } from "xxh32/dist/raw.js";
3
+
import { cache } from "lit-html/directives/cache.js";
4
4
import { debounce } from "throttle-debounce";
5
-
6
-
import { cache } from "lit-html/directives/cache.js";
7
-
import { guard } from "lit-html/directives/guard.js";
8
-
import { keyed } from "lit-html/directives/keyed.js";
5
+
import { xxh32r } from "xxh32/dist/raw.js";
9
6
10
7
import {
11
8
DEFAULT_GROUP,
···
61
58
#artworkColor = signal(/** @type {string | undefined} */ (undefined));
62
59
#artworkLightMode = signal(false);
63
60
#duration = signal("0:00");
64
-
#isLoading = signal(false);
61
+
#isLoading = signal(true);
65
62
#time = signal("0:00");
66
63
67
64
// SIGNALS - DEPENDENCIES
···
403
400
return html`
404
401
<style>
405
402
@import "../../../styles/vendor/phosphor/fill/style.css";
403
+
@import "../../../styles/animations.css";
406
404
@import "./element.css";
407
405
</style>
408
406
···
418
416
${artwork}
419
417
</section>
420
418
421
-
<section class="controller">
419
+
<section class="controller" style="opacity: 0;">
422
420
<div class="gradient-blur">
423
421
<div></div>
424
422
<div></div>
···
443
441
<cite>
444
442
<strong>${activeQueueItem?.tags?.title ||
445
443
"Diffuse"}</strong>
446
-
<br />
447
444
<span style="font-style: ${activeQueueItem
448
445
? `normal`
449
446
: `italic`}">