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

2025-02-13 00:32:02 +06:00
parent 935947cafc
commit 8d7f0d984f
4 changed files with 6 additions and 4 deletions
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -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;
    }