vielle.dev
Personal Site
Make now-playing show on .player focus instead of hover.
- .player now can be focused by tab index or clicking
- now-playing now delegates focus (tapping el focuses first focusable child + :focus === :focus-within but extends out shadowroot)
this will be used to show song metadata (artist, album, spotify links)
+52
-34
src/components/playing/NowPlaying.astro
+52
-34
src/components/playing/NowPlaying.astro
···
33
33
>
34
34
<div
35
35
class="player"
36
+
tabindex="0"
36
37
style={`display: ${track instanceof SpotifyError ? "none" : "block"};` +
37
38
new Array(5)
38
39
.fill(0)
···
60
61
</div>
61
62
62
63
<now-playing>
63
-
<template shadowrootmode="open">
64
-
<style></style>
65
-
<h1>Popup here</h1>
64
+
test
65
+
66
+
<template shadowrootmode="open" shadowrootdelegatesfocus>
67
+
<slot is:inline />
68
+
69
+
<input type="text" />
70
+
71
+
<style>
72
+
:host {
73
+
contain: layout;
74
+
position: absolute;
75
+
bottom: 105cqh;
76
+
77
+
width: 100cqw;
78
+
height: auto;
79
+
80
+
box-sizing: border-box;
81
+
/* gets overridden by the fukcin * selector. for some reason */
82
+
padding: calc((20 / 3) * 1cqw) !important;
83
+
84
+
border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw)
85
+
round;
86
+
87
+
&::after {
88
+
content: "";
89
+
90
+
position: absolute;
91
+
bottom: calc((-20 / 3) * 1cqw);
92
+
left: 0;
93
+
94
+
/* width 100% catches :hover to stop it disapearing. also makes centering less magic numbery */
95
+
width: 100cqw;
96
+
height: calc((40 / 3) * 1cqw);
97
+
98
+
background-image: var(--popout-speech-png);
99
+
background-size: contain;
100
+
background-position: center;
101
+
background-repeat: no-repeat;
102
+
}
103
+
}
104
+
</style>
66
105
</template>
67
106
</now-playing>
68
107
</div>
···
200
239
background-image: var(--mp3-playback-head-png);
201
240
}
202
241
}
242
+
}
203
243
204
-
&:hover now-playing,
205
-
& now-playing:hover {
206
-
display: block;
207
-
}
244
+
now-playing {
245
+
display: none;
246
+
}
208
247
209
-
& now-playing {
210
-
display: none;
211
-
contain: layout style;
212
-
position: absolute;
213
-
bottom: 105cqh;
248
+
.player:focus now-playing,
249
+
.player:focus-within now-playing {
250
+
display: block;
251
+
}
214
252
215
-
width: 100cqw;
216
-
height: auto;
217
-
218
-
border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw) round;
219
-
220
-
&::after {
221
-
content: "";
222
-
223
-
position: absolute;
224
-
bottom: calc((-20 / 3) * 1cqw);
225
-
left: 0;
226
-
227
-
/* width 100% catches :hover to stop it disapearing. also makes centering less magic numbery */
228
-
width: 100cqw;
229
-
height: calc((40 / 3) * 1cqw);
230
-
231
-
background-image: var(--popout-speech-png);
232
-
background-size: contain;
233
-
background-position: center;
234
-
background-repeat: no-repeat;
235
-
}
236
-
}
253
+
now-playing: focus {
254
+
color: red;
237
255
}
238
256
</style>
239
257