diff options
Diffstat (limited to 'frontend/src/app.css')
| -rw-r--r-- | frontend/src/app.css | 38 |
1 files changed, 7 insertions, 31 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index ea2f05a..a7126c5 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -14,7 +14,7 @@ } @utility btn { - @apply focus-thick focus-slate flex items-center justify-center rounded-xs p-2 text-white transition-colors disabled:opacity-40; + @apply flex items-center justify-center rounded-xs p-2 text-white transition-colors focus-visible:outline disabled:opacity-40; } @utility btn-xs { @@ -22,19 +22,15 @@ } @utility btn-blue { - @apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900; + @apply btn bg-blue-700 hover:bg-blue-600 focus:outline-blue-400 focus-visible:outline-blue-400 disabled:bg-blue-900; } @utility btn-rose { - @apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900; + @apply btn bg-rose-700 hover:bg-rose-600 focus:outline-rose-400 focus-visible:outline-rose-400 disabled:bg-rose-900; } @utility btn-slate { - @apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800; -} - -@utility btn-indigo { - @apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800; + @apply btn bg-slate-700 hover:bg-slate-600 focus:outline-slate-400 focus-visible:outline-slate-400 disabled:bg-slate-800; } @utility icon-xs { @@ -125,26 +121,6 @@ grid-template-rows: 500px 1fr; } -@utility focus-thin { - @apply focus:isolate focus:outline; -} - -@utility focus-thick { - @apply focus-visible:isolate focus-visible:outline; -} - -@utility focus-background { - @apply focus-visible:bg-indigo-600 focus-visible:outline-hidden; -} - -@utility focus-slate { - @apply focus:outline-slate-400 focus-visible:outline-slate-400; -} - -@utility focus-blue { - @apply focus:outline-blue-600 focus-visible:outline-blue-600; -} - @layer base { body { display: grid; @@ -161,15 +137,15 @@ input, textarea, select { - @apply focus-thin focus-slate; + @apply focus:isolate focus:outline focus:outline-slate-400 focus-visible:isolate focus-visible:outline-slate-400; } button { - @apply focus-thick focus-slate; + @apply focus:outline-slate-400 focus-visible:isolate focus-visible:outline focus-visible:outline-slate-400; } a { - @apply focus-thick focus-blue; + @apply focus-visible:isolate focus-visible:outline-2 focus-visible:outline-blue-600; } label { |