diff options
Diffstat (limited to 'frontend/src/app.css')
| -rw-r--r-- | frontend/src/app.css | 40 |
1 files changed, 37 insertions, 3 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 { |