369 lines
9.2 KiB
CSS
369 lines
9.2 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap");
|
|
|
|
@import 'tailwindcss';
|
|
|
|
@import './src/css/sonner.css';
|
|
@import './src/css/viewerjs.css';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@custom-variant hover {
|
|
@media (pointer: fine) {
|
|
&:hover {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
/* Necessary for nextjs scroll restoration */
|
|
min-height: 100%;
|
|
}
|
|
|
|
@theme {
|
|
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
|
|
--breakpoint-xs: 24.5rem;
|
|
--breakpoint-3xl: 102rem;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: 1rem;
|
|
--text-sm: 0.84375rem;
|
|
--text-sm--line-height: 1.1875rem;
|
|
--text-base: 0.875rem;
|
|
--text-base--line-height: 1.25rem;
|
|
--text-lg: 1rem;
|
|
--text-lg--line-height: 1.25rem;
|
|
--text-xl: 1.125rem;
|
|
--text-xl--line-height: 1.25rem;
|
|
--text-2xl: 1.25rem;
|
|
--text-2xl--line-height: 1.25rem;
|
|
--text-3xl: 1.5rem;
|
|
--text-3xl--line-height: 1.5rem;
|
|
|
|
--animate-fade-in: fade-in 0.5s linear both running;
|
|
--animate-fade-in-fast: fade-in 0.2s linear both running;
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
--animate-fade-in-from-top: fade-in-from-top 0.2s ease-out;
|
|
--animate-fade-in-from-top-large: fade-in-from-top-large 0.2s ease-out;
|
|
@keyframes fade-in-from-top {
|
|
0% { opacity: 0; transform: translateY(-10px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fade-in-from-top-large {
|
|
0% { opacity: 0; transform: translateY(-20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
--animate-fade-in-from-bottom: fade-in-from-bottom 0.2s ease-out;
|
|
--animate-fade-in-from-bottom-large: fade-in-from-bottom-large 0.2s ease-out;
|
|
@keyframes fade-in-from-bottom {
|
|
0% { opacity: 0; transform: translateY(10px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fade-in-from-bottom-large {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
--animate-rotate-pulse: rotate-pulse 0.75s linear infinite normal both running;
|
|
@keyframes rotate-pulse {
|
|
0% { transform: rotate(0deg) scale(1) }
|
|
50% { transform: rotate(180deg) scale(0.8) }
|
|
100% { transform: rotate(360deg) scale(1) }
|
|
}
|
|
|
|
--animate-hover-drift: hover-drift 8s linear infinite;
|
|
@keyframes hover-drift {
|
|
0% { transform: translate(0, 0) }
|
|
20% { transform: translate(1px, -2px) }
|
|
40% { transform: translate(1px, 1.5px) }
|
|
60% { transform: translate(-1px, 2px) }
|
|
80% { transform: translate(-1.5px, -1.75px) }
|
|
100% { transform: translate(0, 0) }
|
|
}
|
|
|
|
--animate-hover-wobble: hover-wobble 6s linear infinite normal both running;
|
|
@keyframes hover-wobble {
|
|
0% { transform: rotate(0deg) }
|
|
20% { transform: rotate(3.5deg) }
|
|
40% { transform: rotate(-2deg) }
|
|
60% { transform: rotate(2.5deg) }
|
|
80% { transform: rotate(-2.5deg) }
|
|
100% { transform: rotate(0deg) }
|
|
}
|
|
}
|
|
|
|
/* Text Primitives */
|
|
@utility text-dark {
|
|
@apply text-gray-900
|
|
}
|
|
@utility text-light {
|
|
@apply text-gray-100
|
|
}
|
|
/* Text */
|
|
@utility text-main {
|
|
@apply
|
|
text-dark dark:text-light
|
|
}
|
|
@utility text-invert {
|
|
@apply
|
|
text-light dark:text-dark
|
|
}
|
|
@utility text-medium-dark {
|
|
@apply
|
|
text-gray-600 dark:text-gray-300
|
|
}
|
|
@utility text-medium {
|
|
@apply
|
|
text-gray-500 dark:text-gray-400
|
|
}
|
|
@utility text-dim {
|
|
@apply
|
|
text-gray-400 dark:text-gray-500
|
|
}
|
|
@utility text-extra-dim {
|
|
@apply
|
|
text-gray-400/80 dark:text-gray-400/50
|
|
}
|
|
@utility text-extra-extra-dim {
|
|
@apply
|
|
text-gray-200 dark:text-gray-800
|
|
}
|
|
@utility text-icon {
|
|
@apply
|
|
text-gray-800 dark:text-gray-200
|
|
}
|
|
@utility text-error {
|
|
@apply
|
|
text-red-500 dark:text-red-400
|
|
}
|
|
/* Rules */
|
|
@utility border-main {
|
|
@apply
|
|
border border-gray-200 dark:border-gray-700
|
|
}
|
|
@utility divide-main {
|
|
@apply
|
|
divide-gray-400/25 dark:divide-gray-700
|
|
}
|
|
@utility border-medium {
|
|
@apply
|
|
border border-gray-400/25 dark:border-gray-800
|
|
}
|
|
@utility outline-medium {
|
|
@apply
|
|
outline outline-gray-400/25 dark:outline-gray-800
|
|
}
|
|
@utility divide-medium {
|
|
@apply
|
|
divide-gray-400/25 dark:divide-gray-800
|
|
}
|
|
/* Background */
|
|
@utility bg-main {
|
|
@apply
|
|
bg-white dark:bg-black
|
|
}
|
|
@utility bg-medium {
|
|
@apply
|
|
bg-gray-200 dark:bg-gray-700/65
|
|
}
|
|
@utility bg-dim {
|
|
@apply
|
|
bg-gray-100 dark:bg-gray-800/70
|
|
}
|
|
@utility bg-extra-dim {
|
|
@apply
|
|
bg-gray-50 dark:bg-gray-900/40
|
|
}
|
|
@utility bg-content {
|
|
@apply
|
|
/* '!' necessary for radix controls */
|
|
bg-main outline-medium!
|
|
}
|
|
@utility bg-invert {
|
|
@apply
|
|
bg-gray-900 dark:bg-gray-100
|
|
}
|
|
/* Baseline Grid */
|
|
@utility space-y-baseline {
|
|
@apply
|
|
space-y-[1.1875rem] md:space-y-[1.25rem]
|
|
}
|
|
@utility gap-y-baseline {
|
|
@apply
|
|
gap-y-[1.1875rem] md:gap-y-[1.25rem]
|
|
}
|
|
@utility gap-baseline {
|
|
@apply
|
|
gap-[1.1875rem] md:gap-[1.25rem]
|
|
}
|
|
@utility h-baseline {
|
|
@apply
|
|
h-[1.1875rem] md:h-[1.25rem]
|
|
}
|
|
@utility max-h-baseline {
|
|
@apply
|
|
max-h-[1.1875rem] md:max-h-[1.25rem]
|
|
}
|
|
@utility -mt-baseline {
|
|
@apply
|
|
-mt-[1.1875rem] md:-mt-[1.25rem]
|
|
}
|
|
@utility bg-baseline-grid {
|
|
@apply
|
|
bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.1875rem)]
|
|
md:bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.25rem)]
|
|
dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.1875rem)]
|
|
dark:md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
|
|
}
|
|
|
|
@layer base {
|
|
/* Core */
|
|
body {
|
|
@apply
|
|
font-mono text-sm md:text-base
|
|
text-main
|
|
bg-main
|
|
}
|
|
/* Forms */
|
|
label {
|
|
@apply
|
|
font-sans font-medium block uppercase text-xs
|
|
text-medium
|
|
tracking-wider
|
|
}
|
|
.control,
|
|
button, .button,
|
|
input[type=text], input[type=email], input[type=password], select, textarea {
|
|
@apply
|
|
px-2.5 py-2
|
|
border rounded-lg
|
|
bg-main
|
|
border-gray-200 dark:border-gray-700
|
|
font-mono text-base leading-tight
|
|
placeholder:text-extra-dim
|
|
}
|
|
input[type=text], input[type=email], input[type=password], select, textarea {
|
|
@apply
|
|
text-[1rem] /* Prevent iOS auto-zoom behavior */
|
|
read-only:cursor-default
|
|
outline-blue-600 ring-blue-600 appearance-none
|
|
focus:outline-2 -outline-offset-2 focus:ring-0
|
|
}
|
|
input[type=text], input[type=email], input[type=password], select {
|
|
@apply
|
|
min-h-[2.4rem]
|
|
}
|
|
input[type=text], input[type=email], input[type=password], textarea {
|
|
@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
|
|
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-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-xs
|
|
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
|
|
dark:bg-transparent
|
|
}
|
|
.error {
|
|
@apply
|
|
outline-2 outline-red-500! dark:outline-red-400!
|
|
}
|
|
button, .button {
|
|
@apply
|
|
cursor-pointer
|
|
hover:no-underline
|
|
inline-flex gap-2 items-center
|
|
px-3
|
|
text-base
|
|
shadow-xs
|
|
active:bg-gray-100 dark:active:bg-gray-900
|
|
hover:border-gray-300 dark:hover:border-gray-600
|
|
disabled:cursor-not-allowed
|
|
disabled:text-dim
|
|
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-white dark:text-black
|
|
bg-gray-900 dark:bg-gray-100
|
|
disabled:text-dim
|
|
disabled:bg-gray-100 dark:disabled:bg-gray-900
|
|
disabled:border-gray-200 disabled:dark:border-gray-700
|
|
border-gray-900 dark:border-gray-100
|
|
hover:border-gray-900 dark:hover: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 rounded-none
|
|
}
|
|
a, .link {
|
|
@apply
|
|
hover:text-medium
|
|
active:text-dim
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.component-surface {
|
|
@apply
|
|
text-main bg-content rounded-lg
|
|
}
|
|
.component-surface-light {
|
|
@apply
|
|
text-dark bg-white rounded-lg
|
|
}
|
|
.component-surface-dark {
|
|
@apply
|
|
text-light bg-black rounded-lg
|
|
}
|
|
.component-surface-frosted {
|
|
@apply
|
|
text-black bg-neutral-200/95 rounded-lg
|
|
}
|
|
}
|