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

imputnet · Feb 12, 2025 · 8d7f0d9 · 8d7f0d9
1 parent 935947c
commit 8d7f0d9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git 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;
     }
 

diff --git 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);
     }
 

diff --git 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 {

diff --git 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;
     }