| @import "tailwindcss"; |
| @import "tw-animate-css"; |
| @plugin "@tailwindcss/typography"; |
|
|
| @custom-variant dark (&:is(.dark *)); |
|
|
| @theme inline { |
| --color-background: hsl(var(--background)); |
| --color-foreground: hsl(var(--foreground)); |
| --color-border: hsl(var(--border)); |
| --color-input: hsl(var(--input)); |
| --color-ring: hsl(var(--ring)); |
|
|
| --color-card: hsl(var(--card)); |
| --color-card-foreground: hsl(var(--card-foreground)); |
| --color-card-border: hsl(var(--card-border)); |
|
|
| --color-popover: hsl(var(--popover)); |
| --color-popover-foreground: hsl(var(--popover-foreground)); |
| --color-popover-border: hsl(var(--popover-border)); |
|
|
| --color-primary: hsl(var(--primary)); |
| --color-primary-foreground: hsl(var(--primary-foreground)); |
| --color-primary-border: var(--primary-border); |
|
|
| --color-secondary: hsl(var(--secondary)); |
| --color-secondary-foreground: hsl(var(--secondary-foreground)); |
| --color-secondary-border: var(--secondary-border); |
|
|
| --color-muted: hsl(var(--muted)); |
| --color-muted-foreground: hsl(var(--muted-foreground)); |
| --color-muted-border: var(--muted-border); |
|
|
| --color-accent: hsl(var(--accent)); |
| --color-accent-foreground: hsl(var(--accent-foreground)); |
| --color-accent-border: var(--accent-border); |
|
|
| --color-destructive: hsl(var(--destructive)); |
| --color-destructive-foreground: hsl(var(--destructive-foreground)); |
| --color-destructive-border: var(--destructive-border); |
|
|
| --color-chart-1: hsl(var(--chart-1)); |
| --color-chart-2: hsl(var(--chart-2)); |
| --color-chart-3: hsl(var(--chart-3)); |
| --color-chart-4: hsl(var(--chart-4)); |
| --color-chart-5: hsl(var(--chart-5)); |
|
|
| --color-sidebar: hsl(var(--sidebar)); |
| --color-sidebar-foreground: hsl(var(--sidebar-foreground)); |
| --color-sidebar-border: hsl(var(--sidebar-border)); |
| --color-sidebar-primary: hsl(var(--sidebar-primary)); |
| --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); |
| --color-sidebar-primary-border: var(--sidebar-primary-border); |
| --color-sidebar-accent: hsl(var(--sidebar-accent)); |
| --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); |
| --color-sidebar-accent-border: var(--sidebar-accent-border); |
| --color-sidebar-ring: hsl(var(--sidebar-ring)); |
|
|
| --font-sans: var(--app-font-sans); |
| --font-serif: var(--app-font-serif); |
| --font-mono: var(--app-font-mono); |
|
|
| --radius-sm: calc(var(--radius) - 4px); |
| --radius-md: calc(var(--radius) - 2px); |
| --radius-lg: var(--radius); |
| --radius-xl: calc(var(--radius) + 4px); |
| } |
|
|
| :root { |
| --button-outline: rgba(255,255,255, .10); |
| --badge-outline: rgba(255,255,255, .05); |
|
|
| --opaque-button-border-intensity: 9; |
|
|
| --elevate-1: rgba(255,255,255, .04); |
| --elevate-2: rgba(255,255,255, .09); |
|
|
| |
| --background: 260 50% 4%; |
| --foreground: 260 20% 98%; |
|
|
| --border: 260 20% 12%; |
| --input: 260 20% 12%; |
| --ring: 270 100% 60%; |
|
|
| --card: 260 40% 6%; |
| --card-foreground: 260 20% 98%; |
| --card-border: 260 20% 12%; |
|
|
| --popover: 260 40% 6%; |
| --popover-foreground: 260 20% 98%; |
| --popover-border: 260 20% 12%; |
|
|
| --primary: 270 100% 60%; |
| --primary-foreground: 0 0% 100%; |
|
|
| --secondary: 260 20% 12%; |
| --secondary-foreground: 260 20% 98%; |
|
|
| --muted: 260 20% 12%; |
| --muted-foreground: 260 20% 65%; |
|
|
| --accent: 280 100% 65%; |
| --accent-foreground: 0 0% 100%; |
|
|
| --destructive: 0 84% 60%; |
| --destructive-foreground: 0 0% 100%; |
|
|
| --chart-1: 270 100% 60%; |
| --chart-2: 280 100% 65%; |
| --chart-3: 190 100% 60%; |
| --chart-4: 320 100% 60%; |
| --chart-5: 45 100% 60%; |
|
|
| --sidebar: 260 40% 5%; |
| --sidebar-foreground: 260 20% 98%; |
| --sidebar-border: 260 20% 12%; |
| --sidebar-primary: 270 100% 60%; |
| --sidebar-primary-foreground: 0 0% 100%; |
| --sidebar-accent: 260 20% 12%; |
| --sidebar-accent-foreground: 260 20% 98%; |
| --sidebar-ring: 270 100% 60%; |
|
|
| --app-font-sans: 'Inter', sans-serif; |
| --app-font-serif: Georgia, serif; |
| --app-font-mono: Menlo, monospace; |
| --radius: .75rem; |
| |
| --shadow-2xs: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| --shadow-xs: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| --shadow-sm: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.5); |
| --shadow: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.5); |
| --shadow-md: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 2px 4px -1px rgba(0,0,0,0.5); |
| --shadow-lg: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 4px 6px -1px rgba(0,0,0,0.5); |
| --shadow-xl: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 8px 10px -1px rgba(0,0,0,0.5); |
| --shadow-2xl: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| --tracking-normal: 0em; |
| --spacing: 0.25rem; |
|
|
| --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha); |
| } |
|
|
| .dark { |
| |
| --button-outline: rgba(255,255,255, .10); |
| --badge-outline: rgba(255,255,255, .05); |
| --opaque-button-border-intensity: 9; |
| --elevate-1: rgba(255,255,255, .04); |
| --elevate-2: rgba(255,255,255, .09); |
|
|
| --background: 260 50% 4%; |
| --foreground: 260 20% 98%; |
| --border: 260 20% 12%; |
| --input: 260 20% 12%; |
| --ring: 270 100% 60%; |
| --card: 260 40% 6%; |
| --card-foreground: 260 20% 98%; |
| --card-border: 260 20% 12%; |
| --popover: 260 40% 6%; |
| --popover-foreground: 260 20% 98%; |
| --popover-border: 260 20% 12%; |
| --primary: 270 100% 60%; |
| --primary-foreground: 0 0% 100%; |
| --secondary: 260 20% 12%; |
| --secondary-foreground: 260 20% 98%; |
| --muted: 260 20% 12%; |
| --muted-foreground: 260 20% 65%; |
| --accent: 280 100% 65%; |
| --accent-foreground: 0 0% 100%; |
| --destructive: 0 84% 60%; |
| --destructive-foreground: 0 0% 100%; |
| --chart-1: 270 100% 60%; |
| --chart-2: 280 100% 65%; |
| --chart-3: 190 100% 60%; |
| --chart-4: 320 100% 60%; |
| --chart-5: 45 100% 60%; |
|
|
| --shadow-2xs: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| --shadow-xs: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| --shadow-sm: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.5); |
| --shadow: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.5); |
| --shadow-md: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 2px 4px -1px rgba(0,0,0,0.5); |
| --shadow-lg: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 4px 6px -1px rgba(0,0,0,0.5); |
| --shadow-xl: 0px 2px 0px 0px rgba(0,0,0,0.5), 0px 8px 10px -1px rgba(0,0,0,0.5); |
| --shadow-2xl: 0px 2px 0px 0px rgba(0,0,0,0.5); |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border; |
| } |
|
|
| body { |
| @apply font-sans antialiased bg-background text-foreground; |
| } |
| } |
|
|
| @layer utilities { |
| input[type="search"]::-webkit-search-cancel-button { |
| @apply hidden; |
| } |
| [contenteditable][data-placeholder]:empty::before { |
| content: attr(data-placeholder); |
| color: hsl(var(--muted-foreground)); |
| pointer-events: none; |
| } |
| .no-default-hover-elevate {} |
| .no-default-active-elevate {} |
| .toggle-elevate::before, |
| .toggle-elevate-2::before { |
| content: ""; |
| pointer-events: none; |
| position: absolute; |
| inset: 0px; |
| border-radius: inherit; |
| z-index: -1; |
| } |
| .toggle-elevate.toggle-elevated::before { |
| background-color: var(--elevate-2); |
| } |
| .border.toggle-elevate::before { |
| inset: -1px; |
| } |
| .hover-elevate:not(.no-default-hover-elevate), |
| .active-elevate:not(.no-default-active-elevate), |
| .hover-elevate-2:not(.no-default-hover-elevate), |
| .active-elevate-2:not(.no-default-active-elevate) { |
| position: relative; |
| z-index: 0; |
| } |
| .hover-elevate:not(.no-default-hover-elevate)::after, |
| .active-elevate:not(.no-default-active-elevate)::after, |
| .hover-elevate-2:not(.no-default-hover-elevate)::after, |
| .active-elevate-2:not(.no-default-active-elevate)::after { |
| content: ""; |
| pointer-events: none; |
| position: absolute; |
| inset: 0px; |
| border-radius: inherit; |
| z-index: 999; |
| } |
| .hover-elevate:hover:not(.no-default-hover-elevate)::after, |
| .active-elevate:active:not(.no-default-active-elevate)::after { |
| background-color: var(--elevate-1); |
| } |
| .hover-elevate-2:hover:not(.no-default-hover-elevate)::after, |
| .active-elevate-2:active:not(.no-default-active-elevate)::after { |
| background-color: var(--elevate-2); |
| } |
| .border.hover-elevate:not(.no-hover-interaction-elevate)::after, |
| .border.active-elevate:not(.no-active-interaction-elevate)::after, |
| .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after, |
| .border.active-elevate-2:not(.no-active-interaction-elevate)::after, |
| .border.hover-elevate:not(.no-hover-interaction-elevate)::after { |
| inset: -1px; |
| } |
| } |
|
|
