diff options
| author | Wolfgang Müller | 2025-02-14 16:33:13 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-02-14 16:33:13 +0100 |
| commit | 2648650c12471a24a29e4e9a4e2ac77940cd96ff (patch) | |
| tree | 59c6796f7c296de20624434ef2ecbafe73e9cedd /frontend/src/lib | |
| parent | 5f64054ba7cd4d275c820cbbfa9232017d708b3d (diff) | |
| download | hircine-2648650c12471a24a29e4e9a4e2ac77940cd96ff.tar.gz | |
frontend: Further improve highlight focus
Diffstat (limited to 'frontend/src/lib')
| -rw-r--r-- | frontend/src/lib/components/Card.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/components/Titlebar.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/gallery/GalleryPage.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/navigation/Link.svelte | 10 | ||||
| -rw-r--r-- | frontend/src/lib/tabs/Tabs.svelte | 2 |
5 files changed, 12 insertions, 6 deletions
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index 8066b42..b8e8ecf 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -49,7 +49,7 @@ <a {href} - class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30" + class="grid-card-v sm:grid-card-h relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30 focus-visible:outline-4 focus-visible:outline-blue-600" class:compact class:grid-card-cover-only={coverOnly} {onclick} diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte index fe28cfe..bb36d8f 100644 --- a/frontend/src/lib/components/Titlebar.svelte +++ b/frontend/src/lib/components/Titlebar.svelte @@ -17,7 +17,7 @@ {#if favourite !== undefined} <button type="button" - class="focus-background mr-1 flex items-center" + class="mr-1 flex items-center focus-visible:bg-yellow-400/20 focus-visible:outline-hidden" title="Toggle favourite" onclick={onfavourite} > diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte index f8a81a6..cca8ff3 100644 --- a/frontend/src/lib/gallery/GalleryPage.svelte +++ b/frontend/src/lib/gallery/GalleryPage.svelte @@ -56,7 +56,7 @@ class:dim role="button" tabindex="0" - class="{span} focus-thick focus-blue relative overflow-hidden rounded-sm" + class="{span} relative overflow-hidden rounded-sm focus-visible:outline-4 focus-visible:outline-blue-600" onclick={press} onkeydown={press} > diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte index 9c7e218..d18fe3e 100644 --- a/frontend/src/lib/navigation/Link.svelte +++ b/frontend/src/lib/navigation/Link.svelte @@ -22,8 +22,14 @@ }); </script> -<li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700"> - <a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}> +<li class:active class="items-center hover:bg-slate-600 [&.active]:bg-indigo-700"> + <a + class="flex items-center focus-visible:bg-slate-600 focus-visible:outline-hidden" + {target} + {title} + {href} + use:accelerator={accel} + > <div class="flex p-3"> {@render children?.()} </div> diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte index 3c5611e..c2b12af 100644 --- a/frontend/src/lib/tabs/Tabs.svelte +++ b/frontend/src/lib/tabs/Tabs.svelte @@ -36,7 +36,7 @@ <button type="button" class:active={context.current === id} - class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 [&.active]:border-b-2 [&.active]:border-indigo-500" + class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 focus-visible:border-b-2 focus-visible:!border-slate-200 focus-visible:outline-hidden [&.active]:border-b-2 [&.active]:border-indigo-500" onclick={() => (context.current = id)} > {#if badges[id]} |