173 lines
5.4 KiB
CSS
173 lines
5.4 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-onest: var(--font-onest-sans);
|
|
--font-geist: var(--font-geist-sans);
|
|
--font-inter: var(--font-inter-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-danger: var(--danger);
|
|
--color-biru-150: var(--biru-150);
|
|
--color-biru-300: var(--biru-300);
|
|
--color-biru-400: var(--biru-400);
|
|
--color-biru-500: var(--biru-500);
|
|
--color-dark-300: var(--dark-300);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.5rem;
|
|
|
|
--background: hsl(0 0% 100%);
|
|
--foreground: hsl(222 47% 11%);
|
|
--card: hsl(0 0% 100%);
|
|
--card-foreground: hsl(222 47% 11%);
|
|
--popover: hsl(0 0% 100%);
|
|
--popover-foreground: hsl(222 47% 11%);
|
|
--primary: hsla(206, 100%, 50%, 1);
|
|
--danger: hsla(343, 100%, 50%, 1);
|
|
--biru-150: hsla(215, 100%, 95%, 1);
|
|
--biru-300: hsl(216, 100%, 50%);
|
|
--biru-400: hsla(216, 100%, 35%, 1);
|
|
--biru-500: hsla(221, 100%, 19%, 1);
|
|
--dark-300: hsla(0, 0%, 57%, 1);
|
|
--primary-foreground: hsl(0 0% 100%);
|
|
--secondary: hsl(43 100% 50%);
|
|
--secondary-foreground: hsl(210 100% 45%);
|
|
--muted: hsl(210 20% 98%);
|
|
--muted-foreground: hsl(220 9% 46%);
|
|
--accent: hsl(210 20% 98%);
|
|
--accent-foreground: hsl(210 100% 45%);
|
|
--destructive: hsl(0 84% 60%);
|
|
--border: hsl(214 32% 91%);
|
|
--input: hsl(214 32% 91%);
|
|
--ring: hsl(210 100% 45%);
|
|
--chart-1: hsl(41 100% 50%);
|
|
--chart-2: hsl(184 100% 50%);
|
|
--chart-3: hsl(227 100% 50%);
|
|
--chart-4: hsl(84 100% 50%);
|
|
--chart-5: hsl(70 100% 50%);
|
|
--sidebar: hsl(0 0% 100%);
|
|
--sidebar-foreground: hsl(222 47% 11%);
|
|
--sidebar-primary: hsl(210 100% 45%);
|
|
--sidebar-primary-foreground: hsl(0 0% 100%);
|
|
--sidebar-accent: hsl(210 20% 98%);
|
|
--sidebar-accent-foreground: hsl(210 100% 45%);
|
|
--sidebar-border: hsl(214 32% 91%);
|
|
--sidebar-ring: hsl(210 100% 45%);
|
|
|
|
--primary-hover: hsl(210 100% 40%);
|
|
--primary-light: hsl(210 100% 95%);
|
|
--secondary-hover: hsl(43 100% 45%);
|
|
--secondary-light: hsl(43 100% 95%);
|
|
--tertiary: hsl(174 100% 36%);
|
|
--tertiary-hover: hsl(174 100% 30%);
|
|
--success: hsl(142 71% 45%);
|
|
--warning: hsl(38 92% 50%);
|
|
--error: hsla(0, 84%, 60%, 1);
|
|
--info: hsl(217 91% 60%);
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(222 47% 11%);
|
|
--foreground: hsl(210 40% 98%);
|
|
--card: hsl(222 47% 15%);
|
|
--card-foreground: hsl(210 40% 98%);
|
|
--popover: hsl(222 47% 15%);
|
|
--popover-foreground: hsl(210 40% 98%);
|
|
--primary: hsl(210 100% 55%);
|
|
--primary-foreground: hsl(222 47% 11%);
|
|
--secondary: hsl(43 100% 55%);
|
|
--secondary-foreground: hsl(210 40% 98%);
|
|
--muted: hsl(223 47% 18%);
|
|
--muted-foreground: hsl(215 20% 65%);
|
|
--accent: hsl(223 47% 18%);
|
|
--accent-foreground: hsl(210 40% 98%);
|
|
--destructive: hsl(0 72% 51%);
|
|
--border: hsl(216 34% 17%);
|
|
--input: hsl(216 34% 17%);
|
|
--ring: hsl(210 100% 55%);
|
|
--chart-1: hsl(264 100% 50%);
|
|
--chart-2: hsl(162 100% 50%);
|
|
--chart-3: hsl(70 100% 50%);
|
|
--chart-4: hsl(303 100% 50%);
|
|
--chart-5: hsl(16 100% 50%);
|
|
--sidebar: hsl(222 47% 15%);
|
|
--sidebar-foreground: hsl(210 40% 98%);
|
|
--sidebar-primary: hsl(210 100% 55%);
|
|
--sidebar-primary-foreground: hsl(222 47% 11%);
|
|
--sidebar-accent: hsl(223 47% 18%);
|
|
--sidebar-accent-foreground: hsl(210 40% 98%);
|
|
--sidebar-border: hsl(216 34% 17%);
|
|
--sidebar-ring: hsl(210 100% 55%);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.container {
|
|
@apply mx-auto max-w-7xl px-4;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.container {
|
|
max-width: 1444px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ProseMirror {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
outline: none; /* optional to remove default outline */
|
|
}
|