153 lines
4.8 KiB
CSS
153 lines
4.8 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@plugin "@tailwindcss/forms";
|
|
@plugin 'tailwind-htmx';
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@custom-variant theme-midnight {
|
|
&:where([data-theme='midnight'] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@custom-variant js {
|
|
&:is(.js *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@custom-variant no-js {
|
|
&:not(.js *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role='button']:not(:disabled),
|
|
label[for] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='checkbox']:not(.unset) {
|
|
@apply border-day-300 checked:ring-day-300 cursor-pointer rounded border-2 text-green-600 shadow-sm ring-0 ring-current ring-offset-0 transition-all duration-100 not-checked:bg-zinc-800 checked:border-current focus-visible:ring-2;
|
|
}
|
|
|
|
input[type='radio']:not(.unset) {
|
|
@apply border-day-300 checked:ring-day-300 cursor-pointer rounded-full border-2 text-green-600 shadow-sm ring-0 ring-current ring-offset-0 transition-all duration-100 not-checked:bg-zinc-800 checked:border-current focus-visible:ring-2;
|
|
}
|
|
|
|
.prose {
|
|
@apply prose-headings:font-title;
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--font-title: 'Space Grotesk Variable', var(--font-sans), 'sans-serif';
|
|
}
|
|
|
|
@theme {
|
|
--text-2xs: 0.65rem;
|
|
}
|
|
|
|
@theme {
|
|
--breakpoint-xs: 475px;
|
|
--breakpoint-2xs: 375px;
|
|
}
|
|
|
|
@theme {
|
|
--color-score-1: #e26136;
|
|
--color-score-2: #eba370;
|
|
--color-score-3: #eddb82;
|
|
--color-score-4: #8de2d7;
|
|
--color-score-5: #3cdd71;
|
|
|
|
--color-score-saturate-1: #ff0000;
|
|
--color-score-saturate-2: #ff7300;
|
|
--color-score-saturate-3: #ffff00;
|
|
--color-score-saturate-4: #00ffff;
|
|
--color-score-saturate-5: #7cff00;
|
|
|
|
--color-day-50: oklch(97.13% 0.002 165.08);
|
|
--color-day-100: oklch(94.73% 0.003 165.07);
|
|
--color-day-200: oklch(89.62% 0.006 170.43);
|
|
--color-day-300: oklch(83.81% 0.01 171.74);
|
|
--color-day-400: oklch(74.95% 0.015 169.09);
|
|
--color-day-500: oklch(66.18% 0.02 171.17);
|
|
--color-day-600: oklch(56.71% 0.022 172.22);
|
|
--color-day-700: oklch(46.55% 0.018 170.35);
|
|
--color-day-800: oklch(34.77% 0.012 171.06);
|
|
--color-day-900: oklch(30.05% 0.01 179.07);
|
|
--color-day-950: oklch(27.08% 0.008 196.85);
|
|
|
|
--color-night-50: oklch(90.58% 0.009 171.78);
|
|
--color-night-100: oklch(80.76% 0.017 178.15);
|
|
--color-night-200: oklch(61.23% 0.035 173.55);
|
|
--color-night-300: oklch(36.23% 0.018 174.61);
|
|
--color-night-400: oklch(33.22% 0.017 172.96);
|
|
--color-night-500: oklch(28.79% 0.013 180.38);
|
|
--color-night-600: oklch(25.59% 0.012 178.46);
|
|
--color-night-700: oklch(22.09% 0.008 182.2);
|
|
--color-night-800: oklch(18.65% 0.007 178.83);
|
|
--color-night-900: oklch(13.3% 0.002 196.91);
|
|
--color-night-950: oklch(11.97% 0.004 145.32);
|
|
}
|
|
|
|
@utility text-shadow-glow {
|
|
text-shadow:
|
|
0 0 16px color-mix(in oklab, currentColor 30%, transparent),
|
|
0 0 4px color-mix(in oklab, currentColor 60%, transparent);
|
|
}
|
|
@utility drop-shadow-glow {
|
|
filter: drop-shadow(0 0 16px color-mix(in oklab, currentColor 30%, transparent))
|
|
drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
|
|
}
|
|
|
|
@utility scrollbar-w-none {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
@utility checkbox-force-checked {
|
|
&:not(:checked) {
|
|
@apply border-transparent! bg-current/50!;
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--animate-text-gradient: text-gradient 4s linear 0s infinite normal forwards running;
|
|
|
|
@keyframes text-gradient {
|
|
to {
|
|
background-position: -200%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
|
|
--ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
|
|
--ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
|
|
--ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
|
|
--ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
|
|
--ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
|
|
--ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
|
|
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
|
|
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
|
|
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
|
|
--ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
|
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
|
|
--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
|
|
--ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
|
|
--ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
|
|
--ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
|
|
--ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
|
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
|
}
|