146 lines
4.1 KiB
CSS
146 lines
4.1 KiB
CSS
@import 'tailwindcss';
|
|
@import '@cio/ui/output.css';
|
|
@import '../../../packages/ui/src/custom/animation/marketing-layers.css';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@source './**/*.{html,js,svelte,ts}';
|
|
@source '../../../packages/ui/src/custom/animation/**/*.svelte';
|
|
|
|
/* Theme tokens (colors, fonts, radii, motion) + 2xl breakpoint for layout (e.g. `max-w-(--breakpoint-2xl)`). */
|
|
@theme inline {
|
|
--breakpoint-2xl: 1400px;
|
|
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
'Noto Color Emoji';
|
|
--font-drawn:
|
|
Virgil, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
|
|
--color-border: hsl(var(--border) / <alpha-value>);
|
|
--color-input: hsl(var(--input) / <alpha-value>);
|
|
--color-ring: hsl(var(--ring) / <alpha-value>);
|
|
--color-background: hsl(var(--background) / <alpha-value>);
|
|
--color-foreground: hsl(var(--foreground) / <alpha-value>);
|
|
--color-primary: hsl(var(--primary) / <alpha-value>);
|
|
--color-primary-foreground: hsl(var(--primary-foreground) / <alpha-value>);
|
|
--color-secondary: hsl(var(--secondary) / <alpha-value>);
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground) / <alpha-value>);
|
|
--color-destructive: hsl(var(--destructive) / <alpha-value>);
|
|
--color-destructive-foreground: hsl(var(--destructive-foreground) / <alpha-value>);
|
|
--color-muted: hsl(var(--muted) / <alpha-value>);
|
|
--color-muted-foreground: hsl(var(--muted-foreground) / <alpha-value>);
|
|
--color-accent: hsl(var(--accent) / <alpha-value>);
|
|
--color-accent-foreground: hsl(var(--accent-foreground) / <alpha-value>);
|
|
--color-popover: hsl(var(--popover) / <alpha-value>);
|
|
--color-popover-foreground: hsl(var(--popover-foreground) / <alpha-value>);
|
|
--color-card: hsl(var(--card) / <alpha-value>);
|
|
--color-card-foreground: hsl(var(--card-foreground) / <alpha-value>);
|
|
|
|
--animate-border-beam: border-beam calc(var(--duration) * 1s) infinite linear;
|
|
--animate-meteor: meteor 5s linear infinite;
|
|
--animate-shimmer: shimmer 8s infinite;
|
|
--animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
|
|
--animate-magicslide: magicslide var(--speed) ease-in-out infinite alternate;
|
|
}
|
|
|
|
/* Used by ShinnyText (`animate-shimmer`); marketing-layers uses `shimmer-marketing` for other UIs. */
|
|
@keyframes shimmer {
|
|
0%,
|
|
90%,
|
|
100% {
|
|
background-position: calc(-100% - var(--shimmer-width)) 0;
|
|
}
|
|
30%,
|
|
60% {
|
|
background-position: calc(100% + var(--shimmer-width)) 0;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Virgil';
|
|
src: url('/fonts/Virgil.woff2');
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
|
|
--destructive: 0 72.2% 50.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--ring: 240 10% 3.9%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--ring: 240 4.9% 83.9%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
|
|
overflow-x: hidden;
|
|
}
|
|
}
|