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/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -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;
    }

--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -58,7 +58,7 @@

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

--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -91,7 +91,7 @@
    }

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

    #download-state {