155 lines
3.7 KiB
CSS
155 lines
3.7 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-medium
|
|
tracking-wider
|
|
}
|
|
button, .button,
|
|
input[type=text], input[type=email], input[type=password], select {
|
|
@apply
|
|
px-2.5 py-2
|
|
border rounded-md
|
|
bg-white dark:bg-black
|
|
border-gray-200 dark:border-gray-700
|
|
font-mono text-base leading-tight
|
|
min-h-[2.4rem]
|
|
}
|
|
input[type=text], input[type=email], input[type=password], select {
|
|
@apply
|
|
text-[1rem] /* Prevent iOS auto-zoom behavior */
|
|
min-w-[20rem] read-only:cursor-default
|
|
}
|
|
input[type=text], input[type=email], input[type=password] {
|
|
@apply
|
|
read-only:bg-gray-100
|
|
dark:read-only:bg-gray-900 dark:read-only:text-gray-400
|
|
}
|
|
/* Required for readonly behavior on <select /> */
|
|
.disabled-select {
|
|
@apply
|
|
text-medium
|
|
bg-gray-100 dark:bg-gray-900
|
|
pointer-events-none
|
|
}
|
|
input[type=file] {
|
|
@apply
|
|
block font-mono w-full text-medium
|
|
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
|
|
}
|
|
input.error, select.error {
|
|
@apply
|
|
border-red-500 dark:border-red-400
|
|
}
|
|
button, .button {
|
|
@apply
|
|
cursor-pointer
|
|
hover:no-underline
|
|
inline-flex gap-2 items-center
|
|
px-4
|
|
text-base
|
|
shadow-sm
|
|
active:bg-gray-100 dark:active:bg-gray-900
|
|
hover:border-gray-300 dark:hover:border-gray-600
|
|
disabled:cursor-not-allowed
|
|
disabled:bg-gray-100 dark:disabled:bg-gray-900
|
|
disabled:border-gray-200 disabled:dark:border-gray-700
|
|
}
|
|
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-medium
|
|
}
|
|
button.link {
|
|
@apply
|
|
p-0 min-h-0
|
|
border-none bg-transparent active:bg-transparent shadow-none
|
|
}
|
|
a, .link {
|
|
@apply
|
|
hover:text-gray-600
|
|
hover:dark:text-gray-400
|
|
}
|
|
/* Common Utilities: Text */
|
|
.text-main {
|
|
@apply
|
|
text-gray-900 dark:text-gray-100
|
|
}
|
|
.text-invert {
|
|
@apply
|
|
text-gray-100 dark:text-gray-900
|
|
}
|
|
.text-medium {
|
|
@apply
|
|
text-gray-500 dark:text-gray-400
|
|
}
|
|
.text-dim {
|
|
@apply
|
|
text-gray-400 dark:text-gray-500
|
|
}
|
|
.text-extra-dim {
|
|
@apply
|
|
text-gray-400/80 dark:text-gray-400/50
|
|
}
|
|
.text-icon {
|
|
@apply
|
|
text-gray-800 dark:text-gray-200
|
|
}
|
|
.text-error {
|
|
@apply
|
|
text-red-500 dark:text-red-400
|
|
}
|
|
/* Common Utilities: Background */
|
|
.bg-content {
|
|
@apply
|
|
bg-white border-gray-200
|
|
dark:bg-black dark:border-gray-800
|
|
}
|
|
.bg-primary {
|
|
@apply
|
|
bg-gray-900 dark:bg-gray-100
|
|
}
|
|
}
|