mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
zeekay
70706df51e
- Add --color-fd-warning/idea/info/error/success: hsl(0,0%,96%) to all 7 apps
to override neutral.css @theme static amber (oklch 76.9% 0.188 70.08)
- base-docs, zap-docs, zt-docs: add full dark :root { color-scheme: dark; --color-fd-* }
block (were missing dark fumadocs variable overrides, defaulted to light)
- bot-docs, dev-docs, platform, visor: amber fix only (already had dark overrides)
- Fix base-docs sitemap.ts: add export const dynamic = 'force-static' for static export
138 lines
3.5 KiB
CSS
138 lines
3.5 KiB
CSS
@import 'tailwindcss';
|
|
@import '@hanzo/docs-base-ui/css/neutral.css';
|
|
@import '@hanzo/docs-base-ui/css/preset.css';
|
|
@plugin 'tailwindcss-animate';
|
|
|
|
@theme {
|
|
--spacing-page: 1436px;
|
|
--color-brand: hsl(210, 98%, 55%);
|
|
--color-brand-foreground: white;
|
|
--color-brand-secondary: hsl(210, 80%, 45%);
|
|
--color-brand-secondary-foreground: white;
|
|
--color-brand-200: hsl(210, 90%, 72%);
|
|
|
|
--color-landing-foreground: #1a1a2e;
|
|
--color-landing-foreground-200: #4a4a6a;
|
|
}
|
|
|
|
.dark {
|
|
--color-landing-foreground: #e4e4f0;
|
|
--color-landing-foreground-200: #a0a0c0;
|
|
|
|
--color-brand: hsl(210, 98%, 55%);
|
|
--color-brand-secondary: hsl(210, 100%, 60%);
|
|
--color-brand-secondary-foreground: black;
|
|
--color-brand-foreground: white;
|
|
--color-brand-200: hsl(210, 90%, 80%);
|
|
}
|
|
|
|
@theme inline {
|
|
--default-mono-font-family: var(--font-mono);
|
|
--animate-pulse-fast: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: hsl(210, 98%, 55%);
|
|
color: white;
|
|
}
|
|
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
html:has(body[data-scroll-locked]) {
|
|
scrollbar-gutter: auto;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-fd-background);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--color-fd-background: hsl(0, 0%, 2%);
|
|
--color-fd-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-muted: hsl(0, 0%, 10%);
|
|
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
|
|
--color-fd-popover: hsl(0, 0%, 4%);
|
|
--color-fd-popover-foreground: hsl(0, 0%, 90%);
|
|
--color-fd-card: hsl(0, 0%, 4%);
|
|
--color-fd-card-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-border: hsla(0, 0%, 40%, 0.2);
|
|
--color-fd-primary: hsl(0, 0%, 96%);
|
|
--color-fd-primary-foreground: hsl(0, 0%, 8%);
|
|
--color-fd-secondary: hsl(0, 0%, 12%);
|
|
--color-fd-secondary-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-accent: hsla(0, 0%, 40%, 0.3);
|
|
--color-fd-accent-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-ring: hsl(0, 0%, 55%);
|
|
--color-fd-overlay: hsla(0, 0%, 0%, 0.3);
|
|
--color-fd-warning: hsl(0, 0%, 96%);
|
|
--color-fd-idea: hsl(0, 0%, 96%);
|
|
--color-fd-info: hsl(0, 0%, 96%);
|
|
--color-fd-error: hsl(0, 0%, 96%);
|
|
--color-fd-success: hsl(0, 0%, 96%);
|
|
}
|
|
|
|
.dark {
|
|
--color-fd-background: hsl(0, 0%, 2%);
|
|
--color-fd-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-muted: hsl(0, 0%, 10%);
|
|
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
|
|
--color-fd-popover: hsl(0, 0%, 4%);
|
|
--color-fd-popover-foreground: hsl(0, 0%, 90%);
|
|
--color-fd-card: hsl(0, 0%, 4%);
|
|
--color-fd-card-foreground: hsl(0, 0%, 96%);
|
|
--color-fd-border: hsla(0, 0%, 40%, 0.2);
|
|
--color-fd-primary: hsl(0, 0%, 96%);
|
|
--color-fd-primary-foreground: hsl(0, 0%, 8%);
|
|
--color-fd-secondary: hsl(0, 0%, 12%);
|
|
--color-fd-secondary-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-accent: hsla(0, 0%, 40%, 0.3);
|
|
--color-fd-accent-foreground: hsl(0, 0%, 92%);
|
|
--color-fd-ring: hsl(0, 0%, 55%);
|
|
--color-fd-overlay: hsla(0, 0%, 0%, 0.3);
|
|
}
|
|
|
|
/* Animation Keyframes */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes scroll-left {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
@keyframes scroll-right {
|
|
from { transform: translateX(-50%); }
|
|
to { transform: translateX(0); }
|
|
}
|