diff options
| -rw-r--r-- | frontend/src/app.css | 40 | ||||
| -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 | 2 | ||||
| -rw-r--r-- | frontend/src/lib/scraper/components/SelectorGroup.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/tabs/Tab.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/tabs/Tabs.svelte | 4 |
8 files changed, 45 insertions, 11 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index e1b6ca0..07939f6 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -12,7 +12,21 @@ input, textarea { - @apply w-full rounded bg-slate-900 p-[.4rem] focus:outline focus:outline-1 focus:outline-slate-500; + @apply w-full rounded bg-slate-900 p-[.4rem]; + } + + input, + textarea, + select { + @apply focus-thin focus-slate; + } + + button { + @apply focus-thick focus-slate; + } + + a { + @apply focus-thick focus-blue; } label { @@ -56,7 +70,7 @@ @layer components { .btn { - @apply flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40; + @apply focus-thick focus-slate flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40; } .btn-xs { @@ -146,6 +160,26 @@ grid-template-columns: 1fr; grid-template-rows: 500px 1fr; } + + .focus-thin { + @apply focus:isolate focus:outline focus:outline-1; + } + + .focus-thick { + @apply focus-visible:isolate focus-visible:outline; + } + + .focus-background { + @apply focus-visible:bg-indigo-600 focus-visible:outline-none; + } + + .focus-slate { + @apply focus:outline-slate-400 focus-visible:outline-slate-400; + } + + .focus-blue { + @apply focus:outline-blue-600 focus-visible:outline-blue-600; + } } .svelecte { @@ -162,7 +196,7 @@ } .svelecte.is-focused { - --sv-border: 1px solid theme(colors.slate.500); + --sv-border: 1px solid theme(colors.slate.400); } .svelecte input::placeholder { diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index 2384799..d209517 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -34,7 +34,7 @@ <a {href} - class="grid-card-v sm:grid-card-h relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" + class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" class:compact class:grid-card-cover-only={coverOnly} on:click diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte index 8aab2dd..2cdfa70 100644 --- a/frontend/src/lib/components/Titlebar.svelte +++ b/frontend/src/lib/components/Titlebar.svelte @@ -14,7 +14,7 @@ {#if favourite !== undefined} <button type="button" - class="mr-1 flex items-center" + class="focus-background mr-1 flex items-center" title="Toggle favourite" on:click={() => dispatch('favourite')} > diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte index 449321c..f40b889 100644 --- a/frontend/src/lib/gallery/GalleryPage.svelte +++ b/frontend/src/lib/gallery/GalleryPage.svelte @@ -57,7 +57,7 @@ class:dim role="button" tabindex="0" - class="{span} relative overflow-hidden rounded" + class="{span} focus-thick focus-blue relative overflow-hidden rounded" on:click={press} on:keydown={press} > diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte index 7297a69..be09a36 100644 --- a/frontend/src/lib/navigation/Link.svelte +++ b/frontend/src/lib/navigation/Link.svelte @@ -12,7 +12,7 @@ </script> <li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700"> - <a class="flex items-center" {target} {title} {href} use:accelerator={accel}> + <a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}> <div class="flex p-3"> <slot /> </div> diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte index ae7287a..1fdb8f2 100644 --- a/frontend/src/lib/scraper/components/SelectorGroup.svelte +++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte @@ -19,7 +19,7 @@ <h2>{title}</h2> <button type="button" - class="flex items-end opacity-0 brightness-75 transition-opacity hover:brightness-110 group-hover:opacity-100" + class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100" on:click={invert} title="Invert selection" > diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte index 0a6be57..cddd072 100644 --- a/frontend/src/lib/tabs/Tab.svelte +++ b/frontend/src/lib/tabs/Tab.svelte @@ -8,7 +8,7 @@ </script> {#if $context.current === id} - <div class="h-full overflow-auto py-2 pe-3" in:fade={fadeDefault}> + <div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}> <slot /> </div> {/if} diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte index 09cdbdd..fd5d08e 100644 --- a/frontend/src/lib/tabs/Tabs.svelte +++ b/frontend/src/lib/tabs/Tabs.svelte @@ -8,13 +8,13 @@ <div class="flex h-full max-h-full flex-col"> <nav> - <ul class="me-3 flex border-b-2 border-slate-700 text-sm"> + <ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm"> {#each Object.entries($context.tabs) as [id, { title, badge }]} <li class="-mb-0.5"> <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" + class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200" on:click={() => ($context.current = id)} > {#if badge} |