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)

vielle.dev 4f94a5a8 5bf8049e

verified
+52 -34
+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