Personal Site
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
+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