Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add focus outline to .player to replace the default outline which doesnt follow the shape of the outline

+34 -5
+34 -5
src/components/playing/NowPlaying.astro
··· 245 245 display: none; 246 246 } 247 247 248 - .player:focus now-playing, 249 - .player:focus-within now-playing { 250 - display: block; 248 + /* setup the ::before to be usable for the outline 249 + filter cannot be applied straight to .player 250 + as the now-playing is a child and also gets the outline 251 + which we dont want */ 252 + .player::before { 253 + content: ""; 254 + 255 + width: 100cqw; 256 + height: 100cqh; 257 + 258 + position: absolute; 259 + top: 0; 260 + left: 0; 261 + 262 + background-image: var(--mp3-base-png); 263 + background-size: contain; 251 264 } 252 265 253 - now-playing: focus { 254 - color: red; 266 + .player:focus, 267 + .player:focus-within { 268 + outline: none; 269 + --outline-colour: #c274d1; 270 + --outline-size: 4px; 271 + 272 + &:focus::before { 273 + /* filter is used instead of a standard property 274 + as it means we can match it to the shape of the custom outline */ 275 + filter: drop-shadow(var(--outline-colour) 0 var(--outline-size)) 276 + drop-shadow(var(--outline-colour) var(--outline-size) 0) 277 + drop-shadow(var(--outline-colour) 0 calc(-1 * var(--outline-size))) 278 + drop-shadow(var(--outline-colour) calc(-1 * var(--outline-size)) 0); 279 + } 280 + 281 + & now-playing { 282 + display: block; 283 + } 255 284 } 256 285 </style> 257 286