92 lines
3.1 KiB
CSS
92 lines
3.1 KiB
CSS
:root {
|
|
--font-md: clamp(1.333rem, 1.5vw, 1.5rem);
|
|
--font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
|
|
|
|
--space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
|
|
--space-sm: clamp(1rem, 1.5vw, 1.5rem);
|
|
--space-md: clamp(2rem, 3vw, 3rem);
|
|
|
|
--animation-curve: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--transition: 0.3s var(--animation-curve);
|
|
|
|
--color-base-100: oklch(98% 0.016 73.684);
|
|
--color-base-200: oklch(95% 0.038 75.164);
|
|
--color-base-300: oklch(90% 0.076 70.697);
|
|
--color-base-content: oklch(40% 0.123 38.172);
|
|
|
|
--color-primary: oklch(0% 0 0);
|
|
--color-primary-content: oklch(100% 0 0);
|
|
|
|
--color-secondary: oklch(22.45% 0.075 37.85);
|
|
--color-secondary-content: oklch(90% 0.076 70.697);
|
|
|
|
--color-accent: oklch(46.44% 0.111 37.85);
|
|
--color-accent-content: oklch(90% 0.076 70.697);
|
|
|
|
--color-neutral: oklch(55% 0.195 38.402);
|
|
--color-neutral-content: oklch(98% 0.016 73.684);
|
|
|
|
--color-info: oklch(42% 0.199 265.638);
|
|
--color-info-content: oklch(90% 0.076 70.697);
|
|
--color-success: oklch(43% 0.095 166.913);
|
|
--color-success-content: oklch(90% 0.076 70.697);
|
|
--color-warning: oklch(82% 0.189 84.429);
|
|
--color-warning-content: oklch(41% 0.112 45.904);
|
|
--color-error: oklch(70% 0.191 22.216);
|
|
--color-error-content: oklch(39% 0.141 25.723);
|
|
|
|
--radius-selector: 1rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 1rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 2px;
|
|
--depth: 1;
|
|
--noise: 1;
|
|
|
|
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
|
}
|
|
|
|
body.dark {
|
|
--color-base-100: oklch(28.822% 0.022 277.508);
|
|
--color-base-200: oklch(26.805% 0.02 277.508);
|
|
--color-base-300: oklch(24.787% 0.019 277.508);
|
|
--color-base-content: oklch(97.747% 0.007 106.545);
|
|
--color-primary: oklch(75.461% 0.183 346.812);
|
|
--color-primary-content: oklch(15.092% 0.036 346.812);
|
|
--color-secondary: oklch(74.202% 0.148 301.883);
|
|
--color-secondary-content: oklch(14.84% 0.029 301.883);
|
|
--color-accent: oklch(83.392% 0.124 66.558);
|
|
--color-accent-content: oklch(16.678% 0.024 66.558);
|
|
--color-neutral: oklch(39.445% 0.032 275.524);
|
|
--color-neutral-content: oklch(87.889% 0.006 275.524);
|
|
--color-info: oklch(88.263% 0.093 212.846);
|
|
--color-info-content: oklch(17.652% 0.018 212.846);
|
|
--color-success: oklch(87.099% 0.219 148.024);
|
|
--color-success-content: oklch(17.419% 0.043 148.024);
|
|
--color-warning: oklch(95.533% 0.134 112.757);
|
|
--color-warning-content: oklch(19.106% 0.026 112.757);
|
|
--color-error: oklch(68.22% 0.206 24.43);
|
|
--color-error-content: oklch(13.644% 0.041 24.43);
|
|
--radius-selector: 1rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 1rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-base-100);
|
|
color: var(--color-base-content);
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
border: var(--border) solid var(--color-base-300);
|
|
border-radius: var(--radius-box);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|