web/layout: add & use the css variable for the focus ring

This commit is contained in:
wukko 2025-02-13 00:32:02 +06:00
parent 935947cafc
commit 8d7f0d984f
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 6 additions and 4 deletions

View file

@ -72,7 +72,7 @@
width: 100%;
height: 100%;
position: absolute;
box-shadow: 0 0 0 2px var(--blue) inset;
box-shadow: var(--focus-ring);
border-radius: inherit;
}

View file

@ -58,7 +58,7 @@
#processing-status.completed {
box-shadow:
0 0 0 2px var(--blue) inset,
var(--focus-ring),
var(--processing-status-glow);
}

View file

@ -91,7 +91,7 @@
}
#download-button:focus-visible {
box-shadow: 0 0 0 2px var(--blue) inset;
box-shadow: var(--focus-ring);
}
#download-state {

View file

@ -114,6 +114,8 @@
--green: #51cf5e;
--blue: #2f8af9;
--focus-ring: 0 0 0 2px var(--blue) inset;
--button: #f4f4f4;
--button-hover: #e8e8e8;
--button-active-hover: #2a2a2a;
@ -364,7 +366,7 @@
}
:global(:focus-visible) {
box-shadow: 0 0 0 2px var(--blue) inset !important;
box-shadow: var(--focus-ring) !important;
outline: none;
z-index: 1;
}