122 lines
3.1 KiB
CSS
122 lines
3.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Core */
|
|
body {
|
|
@apply
|
|
text-main
|
|
font-mono text-sm md:text-base
|
|
bg-white dark:bg-black
|
|
}
|
|
/* Forms */
|
|
label {
|
|
@apply
|
|
font-sans font-medium block uppercase text-xs
|
|
text-gray-500 dark:text-gray-400
|
|
tracking-wider
|
|
}
|
|
button, .button,
|
|
input[type=text], input[type=email], input[type=password] {
|
|
@apply
|
|
px-2 py-1.5
|
|
border rounded-md
|
|
bg-white dark:bg-black
|
|
border-gray-200 dark:border-gray-700
|
|
font-mono text-base leading-none
|
|
min-h-[2.25rem]
|
|
}
|
|
input[type=text], input[type=email], input[type=password] {
|
|
@apply
|
|
text-[1rem] /* Prevent iOS auto-zoom behavior */
|
|
min-w-[20rem] read-only:cursor-default
|
|
read-only:bg-gray-100
|
|
dark:read-only:bg-gray-900 dark:read-only:text-gray-400
|
|
}
|
|
input[type=file] {
|
|
@apply
|
|
block font-mono w-full text-gray-500 dark:text-gray-400
|
|
file:bg-white dark:file:bg-gray-950
|
|
file:mr-2 file:my-2 file:px-4 file:py-1.5 file:rounded-md
|
|
file:border-solid file:border
|
|
file:border-gray-200 dark:file:border-gray-700
|
|
file:cursor-pointer
|
|
file:shadow-sm
|
|
file:active:bg-gray-100
|
|
file:disabled:bg-gray-100
|
|
file:hover:border-gray-300 file:dark:hover:border-gray-600
|
|
file:hover:disabled:border-gray-200 file:dark:hover:disabled:border-gray-700
|
|
file:active:disabled:bg-white
|
|
file:hover:disabled:cursor-not-allowed
|
|
}
|
|
input[type=checkbox] {
|
|
@apply
|
|
rounded-md
|
|
}
|
|
button, .button {
|
|
@apply
|
|
cursor-pointer
|
|
hover:no-underline
|
|
inline-flex gap-2 items-center
|
|
px-4
|
|
text-base
|
|
shadow-sm
|
|
disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed
|
|
active:bg-gray-100 dark:active:bg-gray-900
|
|
hover:border-gray-300 dark:hover:border-gray-600
|
|
hover:disabled:border-gray-200
|
|
}
|
|
button.subtle, .button.subtle {
|
|
@apply
|
|
disabled:shadow-none
|
|
disabled:bg-transparent dark:disabled:bg-transparent
|
|
disabled:border-gray-100 dark:disabled:border-gray-900
|
|
}
|
|
button.primary, .button.primary {
|
|
@apply
|
|
text-invert
|
|
bg-gray-900 dark:bg-gray-100
|
|
disabled:bg-gray-900 disabled:dark:bg-gray-100
|
|
border-gray-900 dark:border-gray-100
|
|
active:bg-gray-700 active:border-gray-700
|
|
active:dark:bg-gray-300 active:dark:border-gray-300
|
|
shadow-none
|
|
}
|
|
button.primary.disabled, .button.primary.disabled {
|
|
@apply
|
|
text-extra-dim
|
|
}
|
|
/* Toasts */
|
|
.toaster [data-sonner-toast] {
|
|
@apply
|
|
font-mono
|
|
!border-gray-200 dark:!border-gray-800
|
|
}
|
|
/* Common Utilities */
|
|
.text-main {
|
|
@apply
|
|
text-gray-900 dark:text-gray-100
|
|
}
|
|
.text-invert {
|
|
@apply
|
|
text-gray-100 dark:text-gray-900
|
|
}
|
|
.text-dim {
|
|
@apply
|
|
text-gray-400 dark:text-gray-500
|
|
}
|
|
.text-extra-dim {
|
|
@apply
|
|
text-gray-500 dark:text-gray-400
|
|
}
|
|
.text-icon {
|
|
@apply
|
|
text-gray-800 dark:text-gray-200
|
|
}
|
|
.text-error {
|
|
@apply
|
|
text-red-500 dark:text-red-400
|
|
}
|
|
}
|