DeveloperandClaude Opus 4.8
3ae0c96a13
- Rewrite globals.css with dark-theme OKLCH tokens, glass utilities, ambient bg - Update root layout with Inter + JetBrains Mono fonts, theme script - Redirect / to /dashboard - Update navigation config — remove search link, add recordings - Update analysis search-panel with glass styling Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
111 lines
3.6 KiB
CSS
111 lines
3.6 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
/* Canvas — deep navy */
|
|
--color-canvas: oklch(0.07 0.015 250);
|
|
--color-surface: oklch(0.11 0.02 245 / 0.6);
|
|
--color-surface-hover: oklch(0.15 0.02 245 / 0.7);
|
|
|
|
/* Glass */
|
|
--color-glass-bg: oklch(1 0 0 / 0.04);
|
|
--color-glass-border: oklch(1 0 0 / 0.08);
|
|
--glass-shadow: 0 8px 32px oklch(0 0 0 / 0.4);
|
|
|
|
/* Primary — teal-cyan */
|
|
--color-primary: oklch(0.62 0.17 215);
|
|
--color-primary-glow: oklch(0.62 0.17 215 / 0.4);
|
|
--color-primary-foreground: oklch(0.98 0 0);
|
|
--color-border: oklch(1 0 0 / 0.06);
|
|
--color-border-glow: oklch(0.62 0.17 215 / 0.3);
|
|
|
|
/* Accents */
|
|
--color-accent-purple: oklch(0.65 0.2 280);
|
|
--color-accent-amber: oklch(0.7 0.17 75);
|
|
--color-destructive: oklch(0.577 0.245 27.325);
|
|
--color-success: oklch(0.6 0.18 160);
|
|
|
|
/* Text */
|
|
--color-text-primary: oklch(0.93 0.01 245);
|
|
--color-text-secondary: oklch(0.55 0.02 245);
|
|
--color-text-mono: oklch(0.62 0.17 215);
|
|
|
|
/* Legacy overrides for shadcn compatibility */
|
|
--color-background: var(--color-canvas);
|
|
--color-foreground: var(--color-text-primary);
|
|
--color-card: var(--color-surface);
|
|
--color-card-foreground: var(--color-text-primary);
|
|
--color-muted: oklch(0.17 0.015 245);
|
|
--color-muted-foreground: var(--color-text-secondary);
|
|
--color-accent: var(--color-primary);
|
|
--color-accent-foreground: var(--color-primary-foreground);
|
|
|
|
/* Radius */
|
|
--radius-card: 16px;
|
|
--radius-panel: 12px;
|
|
--radius-control: 8px;
|
|
--radius-pill: 9999px;
|
|
--radius: 0.625rem; /* shadcn compat */
|
|
|
|
/* Fonts */
|
|
--font-sans: "Inter", sans-serif;
|
|
--font-mono: "JetBrains Mono", monospace;
|
|
}
|
|
|
|
@layer utilities {
|
|
.glass {
|
|
background: var(--color-glass-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--color-glass-border);
|
|
box-shadow: var(--glass-shadow);
|
|
}
|
|
.glass-elevated {
|
|
background: var(--color-glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--color-border-glow);
|
|
box-shadow: 0 8px 32px oklch(0 0 0 / 0.5), 0 0 20px var(--color-primary-glow);
|
|
}
|
|
.glass-intense {
|
|
background: oklch(1 0 0 / 0.08);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid oklch(1 0 0 / 0.12);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
body {
|
|
@apply bg-canvas text-text-primary font-sans antialiased;
|
|
background-image:
|
|
radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px),
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.62 0.17 215 / 0.06), transparent),
|
|
radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
|
|
background-size: 24px 24px, 100% 100%, 100% 100%;
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 999px; }
|
|
::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.2); }
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.8); opacity: 1; }
|
|
100% { transform: scale(2.5); opacity: 0; }
|
|
}
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }
|
|
.animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; }
|
|
.animate-shimmer { background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
|