diff options
Diffstat (limited to 'frontend/src/app.css')
| -rw-r--r-- | frontend/src/app.css | 285 |
1 files changed, 157 insertions, 128 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index f8322d0..ea2f05a 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,213 +1,242 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@config '../tailwind.config.cjs'; +@plugin "@iconify/tailwind4"; + +@theme { + --breakpoint-3xl: 120rem; +} @layer base { - body { - display: grid; - grid-template-columns: 3rem 1fr; - scrollbar-color: theme('colors.gray.500') rgba(0, 0, 0, 0); - font-family: 'Noto Sans', sans-serif; + button:not(:disabled), + [role='button']:not(:disabled) { + cursor: pointer; } +} - input, - textarea { - @apply w-full rounded bg-slate-900 p-[.4rem]; - } +@utility btn { + @apply focus-thick focus-slate flex items-center justify-center rounded-xs p-2 text-white transition-colors disabled:opacity-40; +} - input, - textarea, - select { - @apply focus-thin focus-slate; - } +@utility btn-xs { + @apply btn rounded-xs p-0.5 py-0; +} - button { - @apply focus-thick focus-slate; - } +@utility btn-blue { + @apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900; +} - a { - @apply focus-thick focus-blue; - } +@utility btn-rose { + @apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900; +} - label { - @apply mb-0.5 inline-block; - } +@utility btn-slate { + @apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800; +} - form { - @apply flex flex-col gap-4 p-px text-sm; - } +@utility btn-indigo { + @apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800; +} - .rounded-group > * { - @apply rounded-none first:rounded-l-sm last:rounded-r-sm !important; - } +@utility icon-xs { + @apply text-[18px]; +} - .rounded-group-start > * { - @apply rounded-none first:rounded-l-sm !important; - } +@utility icon-base { + @apply text-[24px]; +} - .rounded-group-end > * { - @apply rounded-none last:rounded-r-sm !important; - } +@utility icon-lg { + @apply text-[28px]; +} - .grid-labels { - @apply grid grid-cols-[1fr_5fr] gap-2; +@utility icon-2xl { + @apply text-[48px]; +} + +@utility icon-gray { + &.hoverable:hover { + @apply text-gray-200/80; } - header { - grid-area: header; + &.dim { + @apply text-gray-100/40; } +} - aside { - overflow: auto; - grid-area: sidebar; - @apply lg:w-[28rem] xl:w-[32rem] min-[1920px]:w-[36rem]; +@utility hoverable { + &.icon-gray:hover { + @apply text-gray-200/80; } - main { - grid-area: main; + &.icon-yellow:hover { + @apply text-yellow-300/80; } } -@layer components { - .btn { - @apply focus-thick focus-slate flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40; +@utility dim { + &.icon-gray { + @apply text-gray-100/40; } - .btn-xs { - @apply btn rounded-sm p-0.5 py-0; + &.icon-yellow { + @apply text-slate-100/40; } +} - .btn-blue { - @apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900; - } +@utility icon-yellow { + @apply text-yellow-300; - .btn-rose { - @apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900; + &.hoverable:hover { + @apply text-yellow-300/80; } - .btn-slate { - @apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800; + &.dim { + @apply text-slate-100/40; } +} - .btn-indigo { - @apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800; - } +@utility toggled { + @apply bg-indigo-700 hover:bg-indigo-600; +} - .icon-xs { - @apply text-[18px]; - } +@utility floating { + @apply rounded-full bg-black/50 p-1 text-white/80 backdrop-blur-xs hover:bg-black/50 hover:text-white; +} - .icon-base { - @apply text-[24px]; - } +@utility ellipsis-nowrap { + @apply overflow-hidden text-ellipsis whitespace-nowrap; +} - .icon-lg { - @apply text-[28px]; - } +@utility rounded-inherit { + border-radius: inherit; +} - .icon-2xl { - @apply text-[48px]; - } +@utility grid-card-h { + grid-template-columns: 210px 1fr; + grid-template-rows: 300px; +} - .icon-gray.hoverable:hover { - @apply text-gray-200/80; - } +@utility grid-card-cover-only { + @apply !grid-card-h; +} - .icon-gray.dim { - @apply text-gray-100/40; - } +@utility grid-card-v { + grid-template-columns: 1fr; + grid-template-rows: 500px 1fr; +} - .icon-yellow { - @apply text-yellow-300; - } +@utility focus-thin { + @apply focus:isolate focus:outline; +} - .icon-yellow.hoverable:hover { - @apply text-yellow-300/80; +@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; + grid-template-columns: 3rem 1fr; + scrollbar-color: var(--color-gray-500) rgba(0, 0, 0, 0); + font-family: 'Noto Sans', sans-serif; } - .icon-yellow.dim { - @apply text-slate-100/40; + input, + textarea { + @apply w-full rounded-sm bg-slate-900 p-[.4rem]; } -} -@layer utilities { - .toggled { - @apply bg-indigo-700 hover:bg-indigo-600; + input, + textarea, + select { + @apply focus-thin focus-slate; } - .floating { - @apply rounded-full bg-black/50 p-1 text-white/80 backdrop-blur-sm hover:bg-black/50 hover:text-white; + button { + @apply focus-thick focus-slate; } - .ellipsis-nowrap { - @apply overflow-hidden text-ellipsis whitespace-nowrap; + a { + @apply focus-thick focus-blue; } - .rounded-inherit { - border-radius: inherit; + label { + @apply mb-0.5 inline-block; } - .grid-card-h { - grid-template-columns: 210px 1fr; - grid-template-rows: 300px; + form { + @apply flex flex-col gap-4 p-px text-sm; } - .grid-card-cover-only { - @apply !grid-card-h; + .rounded-group > * { + @apply rounded-none! first:rounded-l-xs! last:rounded-r-xs!; } - .grid-card-v { - grid-template-columns: 1fr; - grid-template-rows: 500px 1fr; + .rounded-group-start > * { + @apply rounded-none! first:rounded-l-xs!; } - .focus-thin { - @apply focus:isolate focus:outline focus:outline-1; + .rounded-group-end > * { + @apply rounded-none! last:rounded-r-xs!; } - .focus-thick { - @apply focus-visible:isolate focus-visible:outline; + .grid-labels { + @apply grid grid-cols-[1fr_5fr] gap-2; } - .focus-background { - @apply focus-visible:bg-indigo-600 focus-visible:outline-none; + header { + grid-area: header; } - .focus-slate { - @apply focus:outline-slate-400 focus-visible:outline-slate-400; + aside { + overflow: auto; + grid-area: sidebar; + @apply 3xl:w-[36rem] lg:w-[28rem] xl:w-[32rem]; } - .focus-blue { - @apply focus:outline-blue-600 focus-visible:outline-blue-600; + main { + grid-area: main; } } .svelecte { - --sv-bg: theme(colors.slate.900); - --sv-disabled-bg: theme(colors.slate.900); + --sv-bg: var(--color-slate-900); + --sv-disabled-bg: var(--color-slate-900); --sv-border: 1px solid rgba(0, 0, 0, 0); - --sv-dropdown-active-bg: theme(colors.indigo.800); - --sv-item-selected-bg: theme(colors.indigo.800); - --sv-item-btn-bg-hover: theme(colors.rose.900); - --sv-item-btn-color-hover: theme(colors.rose.100); - --sv-separator-bg: theme(colors.gray.700); + --sv-dropdown-active-bg: var(--color-indigo-800); + --sv-item-selected-bg: var(--color-indigo-800); + --sv-item-btn-bg-hover: var(--color-rose-900); + --sv-item-btn-color-hover: var(--color-rose-100); + --sv-separator-bg: var(--color-gray-700); --sv-min-height: 38px; --sv-item-wrap-padding: 3px 3px 3px 5px; --sv-selection-multi-wrap-padding: 3px 3px 3px 5px; } .svelecte.is-focused { - --sv-border: 1px solid theme(colors.slate.400); + --sv-border: 1px solid var(--color-slate-400); } .svelecte input::placeholder { - color: theme(colors.gray.500); + color: var(--color-gray-500); } .exclude .svelecte { - --sv-border: 1px solid theme(colors.red.900); - --sv-item-selected-bg: theme(colors.rose.800); - --sv-dropdown-active-bg: theme(colors.rose.800); + --sv-border: 1px solid var(--color-red-900); + --sv-item-selected-bg: var(--color-rose-800); + --sv-dropdown-active-bg: var(--color-rose-800); } .sv-item--btn { |