Spaces:
Paused
Paused
| @import 'tailwindcss'; | |
| @import 'tw-animate-css'; | |
| @custom-variant dark (&:is(.dark *)); | |
| :root { | |
| --radius: 0.75rem; | |
| --background: oklch(0.95 0.005 90); | |
| --foreground: oklch(0.129 0.042 264.695); | |
| --card: oklch(0.97 0.003 90); | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.99 0.003 90); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.208 0.042 265.755); | |
| --primary-foreground: oklch(0.984 0.003 247.858); | |
| --secondary: oklch(0.92 0.007 90); | |
| --secondary-foreground: var(--primary); | |
| --muted: oklch(0.9 0.008 90); | |
| --muted-foreground: oklch(0.554 0.046 257.417); | |
| --accent: oklch(0.88 0.009 90); | |
| --accent-foreground: var(--primary); | |
| --destructive: oklch(0.62 0.22 25.5); | |
| --border: oklch(0.85 0.01 90); | |
| --input: oklch(0.85 0.01 90); | |
| --ring: oklch(0.704 0.04 256.788); | |
| --chart-1: oklch(0.646 0.222 41.116); | |
| --chart-2: oklch(0.6 0.118 184.704); | |
| --chart-3: oklch(0.398 0.07 227.392); | |
| --chart-4: oklch(0.828 0.189 84.429); | |
| --chart-5: oklch(0.769 0.188 70.08); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: var(--primary); | |
| --sidebar-primary-foreground: var(--primary-foreground); | |
| --sidebar-accent: oklch(0.92 0.007 90); | |
| --sidebar-accent-foreground: var(--primary); | |
| --sidebar-border: var(--border); | |
| --sidebar-ring: var(--ring); | |
| /* Default Elevation */ | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08); | |
| --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15); | |
| --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.003 90); | |
| --table-header: var(--muted); | |
| } | |
| .dark { | |
| --background: oklch(0.129 0.042 264.695); | |
| --foreground: oklch(0.984 0.003 247.858); | |
| --card: oklch(0.14 0.04 259.21); | |
| --card-foreground: oklch(0.984 0.003 247.858); | |
| --popover: oklch(0.208 0.042 265.755); | |
| --popover-foreground: oklch(0.984 0.003 247.858); | |
| --primary: oklch(0.929 0.013 255.508); | |
| --primary-foreground: oklch(0.208 0.042 265.755); | |
| --secondary: oklch(0.279 0.041 260.031); | |
| --secondary-foreground: oklch(0.984 0.003 247.858); | |
| --muted: oklch(0.279 0.041 260.031); | |
| --muted-foreground: oklch(0.704 0.04 256.788); | |
| --accent: oklch(0.3 0.041 260.031); | |
| --accent-foreground: oklch(0.984 0.003 247.858); | |
| --destructive: oklch(0.68 0.2 22.5); | |
| --border: oklch(1 0 0 / 10%); | |
| --input: oklch(1 0 0 / 15%); | |
| --ring: oklch(0.551 0.027 264.364); | |
| --chart-1: oklch(0.488 0.243 264.376); | |
| --chart-2: oklch(0.696 0.17 162.48); | |
| --chart-3: oklch(0.769 0.188 70.08); | |
| --chart-4: oklch(0.627 0.265 303.9); | |
| --chart-5: oklch(0.645 0.246 16.439); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(1 0 0 / 8%); | |
| --table-header: var(--muted); | |
| } | |
| /* ===== COLOR SCHEMES ===== */ | |
| .claude { | |
| --background: #f0f0ef; | |
| --foreground: #292524; | |
| --card: #f5f5f4; | |
| --card-foreground: #292524; | |
| --popover: #fafaf9; | |
| --popover-foreground: #292524; | |
| --primary: #b05d2e; /* 核心主色 (类似图1的深棕色) */ | |
| --primary-foreground: #ffffff; | |
| --secondary: #ebe9e8; /* 非常淡的暖灰线 */ | |
| --secondary-foreground: #292524; | |
| --muted: #e0ddd9; /* 暖灰色背景 */ | |
| --muted-foreground: #78716c; /* 稍深的灰色文本，提高对比度 */ | |
| --accent: #ebe3db; /* 浅棕色背景 */ | |
| --accent-foreground: #292524; | |
| --destructive: #ef4444; | |
| --destructive-foreground: #ffffff; | |
| --border: #d8d4cf; /* 更柔和的边框 */ | |
| --input: #d8d4cf; | |
| --ring: #b05d2e; | |
| --chart-1: #b05d2e; /* 核心主色 */ | |
| --chart-2: #7a381d; /* 深棕色 */ | |
| --chart-3: #e0b6a1; /* 中棕色 */ | |
| --chart-4: #f5ebe6; /* 浅棕色 */ | |
| --chart-5: #f5f5f4; /* 暖背景 */ | |
| --sidebar: var(--card); | |
| --sidebar-foreground: #292524; | |
| --sidebar-primary: #b05d2e; | |
| --sidebar-primary-foreground: #ffffff; | |
| --sidebar-accent: #ebe9e8; | |
| --sidebar-accent-foreground: #292524; | |
| --sidebar-border: #d8d4cf; | |
| --sidebar-ring: #b05d2e; | |
| --font-sans: Inter, ui-sans-serif, system-ui, sans-serif; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace; | |
| --radius: 0.75rem; /* 更大的圆角 */ | |
| --shadow-2xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(176, 93, 46, 0.1); /* 阴影带暖色调 */ | |
| --shadow: 0 20px 40px -12px rgba(176, 93, 46, 0.15); /* 悬浮时暖色阴影 */ | |
| --shadow-md: 0 20px 40px -12px rgba(176, 93, 46, 0.15); | |
| --shadow-lg: 0 0 20px rgba(176, 93, 46, 0.2); /* 发光阴影 */ | |
| --shadow-xl: 0 8px 10px -1px rgba(176, 93, 46, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(176, 93, 46, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: #f8f7f6; | |
| --table-header: var(--muted); | |
| } | |
| .dark.claude { | |
| --background: oklch(0.22 0.002 106); /* Darker background */ | |
| --foreground: oklch(0.8074 0.0142 93.0137); | |
| --card: oklch(0.28 0.004 106); /* Lighter card for contrast */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.3085 0.0035 106.6039); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.6724 0.1308 38.7559); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.9818 0.0054 95.0986); | |
| --secondary-foreground: oklch(0.3085 0.0035 106.6039); | |
| --muted: oklch(0.2213 0.0038 106.707); | |
| --muted-foreground: oklch(0.7713 0.0169 99.0657); | |
| --accent: oklch(0.3 0.0078 95.4245); | |
| --accent-foreground: oklch(0.9663 0.008 98.8792); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.3618 0.0101 106.8928); | |
| --input: oklch(0.4336 0.0113 100.2195); | |
| --ring: oklch(0.6724 0.1308 38.7559); | |
| --chart-1: oklch(0.5583 0.1276 42.9956); | |
| --chart-2: oklch(0.6898 0.1581 290.4107); | |
| --chart-3: oklch(0.65 0.1 60); | |
| --chart-4: oklch(0.3074 0.0516 289.323); | |
| --chart-5: oklch(0.5608 0.1348 42.0584); | |
| --sidebar: oklch(0.2357 0.0024 67.7077); | |
| --sidebar-foreground: oklch(0.8074 0.0142 93.0137); | |
| --sidebar-primary: oklch(0.325 0 0); | |
| --sidebar-primary-foreground: oklch(0.9881 0 0); | |
| --sidebar-accent: oklch(0.168 0.002 106.6177); | |
| --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137); | |
| --sidebar-border: oklch(0.9401 0 0); | |
| --sidebar-ring: oklch(0.7731 0 0); | |
| --font-sans: | |
| ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(1 0 0 / 8%); | |
| --table-header: var(--muted); | |
| } | |
| /* Blue Color Scheme (Default) */ | |
| .blue { | |
| --background: oklch(0.95 0.008 260); | |
| --foreground: oklch(0.3211 0 0); | |
| --card: oklch(0.97 0.005 260); | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0.005 260); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.6231 0.188 259.8145); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.92 0.008 260); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0.01 260); | |
| --muted-foreground: oklch(0.45 0.02 260); | |
| --accent: oklch(0.88 0.015 260); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.85 0.01 260); | |
| --input: oklch(0.85 0.01 260); | |
| --ring: oklch(0.6231 0.188 259.8145); | |
| --chart-1: oklch(0.6231 0.188 259.8145); | |
| --chart-2: oklch(0.5461 0.2152 262.8809); | |
| --chart-3: oklch(0.4882 0.2172 264.3763); | |
| --chart-4: oklch(0.4244 0.1809 265.6377); | |
| --chart-5: oklch(0.3791 0.1378 265.5222); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.6231 0.188 259.8145); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0.008 260); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0.01 260); | |
| --sidebar-ring: oklch(0.6231 0.188 259.8145); | |
| --font-sans: Inter, sans-serif; | |
| --font-serif: Source Serif 4, serif; | |
| --font-mono: JetBrains Mono, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(59, 130, 246, 0.1); | |
| --shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.15); | |
| --shadow-md: 0 20px 40px -12px rgba(59, 130, 246, 0.15); | |
| --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2); | |
| --shadow-xl: 0 8px 10px -1px rgba(59, 130, 246, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(59, 130, 246, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.005 260); | |
| --table-header: var(--muted); | |
| } | |
| .dark.blue { | |
| --background: oklch(0.18 0.01 260); /* Very dark blue background */ | |
| --foreground: oklch(0.9219 0 0); | |
| --card: oklch(0.24 0.02 260); /* Lighter blue card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.26 0.02 260); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.6231 0.188 259.8145); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.22 0.01 260); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.2 0.01 260); | |
| --muted-foreground: oklch(0.7 0.02 260); | |
| --accent: oklch(0.3 0.03 260); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.28 0.02 260); | |
| --input: oklch(0.28 0.02 260); | |
| --ring: oklch(0.6231 0.188 259.8145); | |
| --chart-1: oklch(0.7137 0.1434 254.624); | |
| --chart-2: oklch(0.6231 0.188 259.8145); | |
| --chart-3: oklch(0.5461 0.2152 262.8809); | |
| --chart-4: oklch(0.4882 0.2172 264.3763); | |
| --chart-5: oklch(0.4244 0.1809 265.6377); | |
| --sidebar: oklch(0.16 0.01 260); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.6231 0.188 259.8145); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.24 0.02 260); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.28 0.02 260); | |
| --sidebar-ring: oklch(0.6231 0.188 259.8145); | |
| --font-sans: Inter, sans-serif; | |
| --font-serif: Source Serif 4, serif; | |
| --font-mono: JetBrains Mono, monospace; | |
| --radius: 0.75rem; | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(1 0 0 / 8%); | |
| --table-header: var(--muted); | |
| } | |
| /* Green Color Scheme */ | |
| .green { | |
| --background: oklch(0.95 0.008 160); | |
| --foreground: oklch(0.2046 0 0); | |
| --card: oklch(0.97 0.005 160); | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0.005 160); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.8348 0.1302 160.908); | |
| --primary-foreground: oklch(0.2626 0.0147 166.4589); | |
| --secondary: oklch(0.92 0.008 160); /* Softer green line */ | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0.01 160); /* Light green-gray background */ | |
| --muted-foreground: oklch(0.45 0.02 160); /* Darker green-gray text */ | |
| --accent: oklch(0.88 0.015 160); /* Distinct green-ish accent */ | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.5523 0.1927 32.7272); | |
| --border: oklch(0.85 0.01 160); /* Subtle green border */ | |
| --input: oklch(0.85 0.01 160); | |
| --ring: oklch(0.8348 0.1302 160.908); | |
| --chart-1: oklch(0.8348 0.1302 160.908); | |
| --chart-2: oklch(0.6231 0.188 259.8145); | |
| --chart-3: oklch(0.6056 0.2189 292.7172); | |
| --chart-4: oklch(0.7686 0.1647 70.0804); | |
| --chart-5: oklch(0.6959 0.1491 162.4796); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: var(--primary); | |
| --sidebar-primary-foreground: var(--primary-foreground); | |
| --sidebar-accent: oklch(0.92 0.008 160); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0.01 160); | |
| --sidebar-ring: var(--primary); | |
| --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(34, 197, 94, 0.1); | |
| --shadow: 0 20px 40px -12px rgba(34, 197, 94, 0.15); | |
| --shadow-md: 0 20px 40px -12px rgba(34, 197, 94, 0.15); | |
| --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2); | |
| --shadow-xl: 0 8px 10px -1px rgba(34, 197, 94, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(34, 197, 94, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.005 160); | |
| --table-header: var(--muted); | |
| } | |
| .dark.green { | |
| --background: oklch(0.18 0.01 160); /* Very dark green background */ | |
| --foreground: oklch(0.9288 0.0126 255.5078); | |
| --card: oklch(0.24 0.02 160); /* Slightly lighter green card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.2603 0 0); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.4365 0.1044 156.7556); | |
| --primary-foreground: oklch(0.9213 0.0135 167.1556); | |
| --secondary: oklch(0.2603 0 0); | |
| --secondary-foreground: oklch(0.9851 0 0); | |
| --muted: oklch(0.2393 0 0); | |
| --muted-foreground: oklch(0.7122 0 0); | |
| --accent: oklch(0.3132 0 0); | |
| --accent-foreground: oklch(0.9851 0 0); | |
| --destructive: oklch(0.3123 0.0852 29.7877); | |
| --border: oklch(0.2809 0 0); | |
| --input: oklch(0.2603 0 0); | |
| --ring: oklch(0.8003 0.1821 151.711); | |
| --chart-1: oklch(0.8003 0.1821 151.711); | |
| --chart-2: oklch(0.7137 0.1434 254.624); | |
| --chart-3: oklch(0.709 0.1592 293.5412); | |
| --chart-4: oklch(0.8369 0.1644 84.4286); | |
| --chart-5: oklch(0.7845 0.1325 181.912); | |
| --sidebar: oklch(0.1822 0 0); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.4365 0.1044 156.7556); | |
| --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556); | |
| --sidebar-accent: oklch(0.3132 0 0); | |
| --sidebar-accent-foreground: oklch(0.9851 0 0); | |
| --sidebar-border: oklch(0.2809 0 0); | |
| --sidebar-ring: oklch(0.8003 0.1821 151.711); | |
| --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(1 0 0 / 8%); | |
| --table-header: var(--muted); | |
| } | |
| /* Purple Color Scheme */ | |
| .purple { | |
| --background: oklch(0.95 0.008 280); | |
| --foreground: oklch(0.4355 0.043 279.325); | |
| --card: oklch(0.97 0.005 280); | |
| --card-foreground: oklch(0.4355 0.043 279.325); | |
| --popover: oklch(0.985 0.005 280); | |
| --popover-foreground: oklch(0.4355 0.043 279.325); | |
| --primary: oklch(0.5547 0.2503 297.0156); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.92 0.008 280); | |
| --secondary-foreground: oklch(0.4355 0.043 279.325); | |
| --muted: oklch(0.9 0.01 280); | |
| --muted-foreground: oklch(0.45 0.035 279); | |
| --accent: oklch(0.88 0.015 280); | |
| --accent-foreground: oklch(1 0 0); | |
| --destructive: oklch(0.59 0.22 22); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.85 0.01 280); | |
| --input: oklch(0.85 0.01 280); | |
| --ring: oklch(0.5547 0.2503 297.0156); | |
| --chart-1: oklch(0.5547 0.2503 297.0156); | |
| --chart-2: oklch(0.682 0.1448 235.3822); | |
| --chart-3: oklch(0.625 0.1772 140.4448); | |
| --chart-4: oklch(0.692 0.2041 42.4293); | |
| --chart-5: oklch(0.7141 0.1045 33.0967); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: oklch(0.4355 0.043 279.325); | |
| --sidebar-primary: oklch(0.5547 0.2503 297.0156); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0.008 280); | |
| --sidebar-accent-foreground: oklch(1 0 0); | |
| --sidebar-border: oklch(0.85 0.01 280); | |
| --sidebar-ring: oklch(0.5547 0.2503 297.0156); | |
| --font-sans: Montserrat, sans-serif; | |
| --font-serif: Georgia, serif; | |
| --font-mono: Fira Code, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(139, 92, 246, 0.1); | |
| --shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.15); | |
| --shadow-md: 0 20px 40px -12px rgba(139, 92, 246, 0.15); | |
| --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2); | |
| --shadow-xl: 0 8px 10px -1px rgba(139, 92, 246, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(139, 92, 246, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.005 280); | |
| --table-header: var(--muted); | |
| } | |
| .dark.purple { | |
| --background: oklch(0.18 0.01 280); /* Very dark purple background */ | |
| --foreground: oklch(0.8787 0.0426 272.2767); | |
| --card: oklch(0.24 0.02 280); /* Lighter purple card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.26 0.02 280); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.7871 0.1187 304.7693); | |
| --primary-foreground: oklch(0.2429 0.0304 283.911); | |
| --secondary: oklch(0.22 0.01 280); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.2 0.01 280); | |
| --muted-foreground: oklch(0.751 0.0396 273.932); | |
| --accent: oklch(0.3 0.03 280); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(0.2429 0.0304 283.911); | |
| --border: oklch(0.28 0.02 280); | |
| --input: oklch(0.28 0.02 280); | |
| --ring: oklch(0.7871 0.1187 304.7693); | |
| --chart-1: oklch(0.7871 0.1187 304.7693); | |
| --chart-2: oklch(0.8467 0.0833 210.2545); | |
| --chart-3: oklch(0.8577 0.1092 142.7153); | |
| --chart-4: oklch(0.8237 0.1015 52.6294); | |
| --chart-5: oklch(0.9226 0.0238 30.4919); | |
| --sidebar: oklch(0.16 0.01 280); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.7871 0.1187 304.7693); | |
| --sidebar-primary-foreground: var(--primary-foreground); | |
| --sidebar-accent: oklch(0.24 0.02 280); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.28 0.02 280); | |
| --sidebar-ring: oklch(0.7871 0.1187 304.7693); | |
| --font-sans: Montserrat, sans-serif; | |
| --font-serif: Georgia, serif; | |
| --font-mono: Fira Code, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(1 0 0 / 8%); | |
| --table-header: var(--muted); | |
| } | |
| /* Hover Card Effect */ | |
| .hover-card { | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| } | |
| .hover-card:hover { | |
| box-shadow: var(--shadow-md); | |
| transform: scale(1.02); | |
| border-color: var(--primary); | |
| } | |
| /* 表格行悬浮效果 */ | |
| .table-row-hover { | |
| transition: all 0.2s ease; | |
| } | |
| .table-row-hover:hover { | |
| background-color: var(--accent) ; | |
| transform: scale(1.005); | |
| box-shadow: var(--shadow-sm); | |
| border-color: var(--primary); | |
| z-index: 10; | |
| position: relative; | |
| border-radius: 12px; | |
| } | |
| .table-row-hover:hover > * { | |
| background-color: var(--accent) ; | |
| } | |
| /* 隐藏默认复选框，使用自定义样式 */ | |
| .custom-checkbox input:checked + div { | |
| background-color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .custom-checkbox input:checked + div svg { | |
| display: block; | |
| } | |
| /* 胶囊滚动条隐藏 */ | |
| .hide-scroll { | |
| -ms-overflow-style: none; /* IE and Edge */ | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .hide-scroll::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Orange Color Scheme */ | |
| .orange { | |
| --background: oklch(0.95 0.008 70); /* Softer orange-gray background */ | |
| --foreground: oklch(0.2686 0 0); | |
| --card: oklch(0.97 0.005 70); /* Slightly tinted cards */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0.005 70); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.7686 0.1647 70.0804); | |
| --primary-foreground: oklch(0 0 0); | |
| --secondary: oklch(0.92 0.008 70); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0.01 70); | |
| --muted-foreground: oklch(0.45 0.02 70); | |
| --accent: oklch(0.88 0.015 70); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.85 0.01 70); | |
| --input: oklch(0.85 0.01 70); | |
| --ring: oklch(0.7686 0.1647 70.0804); | |
| --chart-1: oklch(0.7686 0.1647 70.0804); | |
| --chart-2: oklch(0.6658 0.1574 58.3183); | |
| --chart-3: oklch(0.5553 0.1455 48.9975); | |
| --chart-4: oklch(0.4732 0.1247 46.2007); | |
| --chart-5: oklch(0.4137 0.1054 45.9038); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.7686 0.1647 70.0804); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0.008 70); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0.01 70); | |
| --sidebar-ring: oklch(0.7686 0.1647 70.0804); | |
| --font-sans: Inter, sans-serif; | |
| --font-serif: Source Serif 4, serif; | |
| --font-mono: JetBrains Mono, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(234, 88, 12, 0.1); | |
| --shadow: 0 20px 40px -12px rgba(234, 88, 12, 0.15); | |
| --shadow-md: 0 20px 40px -12px rgba(234, 88, 12, 0.15); | |
| --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2); | |
| --shadow-xl: 0 8px 10px -1px rgba(234, 88, 12, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(234, 88, 12, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.005 70); | |
| --table-header: var(--muted); | |
| } | |
| .dark.orange { | |
| --background: oklch(0.18 0.01 70); /* Very dark orange-gray background */ | |
| --foreground: oklch(0.9219 0 0); | |
| --card: oklch(0.24 0.02 70); /* Slightly lighter card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.26 0.02 70); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.7686 0.1647 70.0804); | |
| --primary-foreground: oklch(0 0 0); | |
| --secondary: oklch(0.22 0.01 70); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.2 0.01 70); | |
| --muted-foreground: oklch(0.7155 0 0); | |
| --accent: oklch(0.3 0.03 70); | |
| --accent-foreground: oklch(0.9243 0.1151 95.7459); | |
| --destructive: oklch(0.64 0.21 26); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.28 0.02 70); | |
| --input: oklch(0.28 0.02 70); | |
| --ring: oklch(0.7686 0.1647 70.0804); | |
| --chart-1: oklch(0.8369 0.1644 84.4286); | |
| --chart-2: oklch(0.6658 0.1574 58.3183); | |
| --chart-3: oklch(0.4732 0.1247 46.2007); | |
| --chart-4: oklch(0.5553 0.1455 48.9975); | |
| --chart-5: oklch(0.4732 0.1247 46.2007); | |
| --sidebar: oklch(0.16 0.01 70); | |
| --sidebar-foreground: oklch(0.9219 0 0); | |
| --sidebar-primary: oklch(0.7686 0.1647 70.0804); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.24 0.02 70); | |
| --sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459); | |
| --sidebar-border: oklch(0.28 0.02 70); | |
| --sidebar-ring: oklch(0.7686 0.1647 70.0804); | |
| --font-sans: Inter, sans-serif; | |
| --font-serif: Source Serif 4, serif; | |
| --font-mono: JetBrains Mono, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| } | |
| /* Red Color Scheme */ | |
| .red { | |
| --background: oklch(0.95 0.008 15); /* Softer red-gray background */ | |
| --foreground: oklch(0.3257 0.1161 325.0372); | |
| --card: oklch(0.97 0.005 15); /* Slightly tinted cards */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0.005 15); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.5316 0.1409 355.1999); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.92 0.008 15); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0.01 15); | |
| --muted-foreground: oklch(0.45 0.02 15); | |
| --accent: oklch(0.88 0.015 15); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.5248 0.1368 20.8317); | |
| --border: oklch(0.85 0.01 15); | |
| --input: oklch(0.85 0.01 15); | |
| --ring: oklch(0.5916 0.218 0.5844); | |
| --chart-1: oklch(0.6038 0.2363 344.4657); | |
| --chart-2: oklch(0.4445 0.2251 300.6246); | |
| --chart-3: oklch(0.379 0.0438 226.1538); | |
| --chart-4: oklch(0.833 0.1185 88.3461); | |
| --chart-5: oklch(0.7843 0.1256 58.9964); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0.5316 0.1409 355.1999); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0.008 15); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0.01 15); | |
| --sidebar-ring: oklch(0.5916 0.218 0.5844); | |
| --font-sans: | |
| ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(220, 38, 38, 0.1); | |
| --shadow: 0 20px 40px -12px rgba(220, 38, 38, 0.15); | |
| --shadow-md: 0 20px 40px -12px rgba(220, 38, 38, 0.15); | |
| --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2); | |
| --shadow-xl: 0 8px 10px -1px rgba(220, 38, 38, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(220, 38, 38, 0.2); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0.005 15); | |
| --table-header: var(--muted); | |
| } | |
| .dark.red { | |
| --background: oklch(0.18 0.01 15); /* Very dark red background */ | |
| --foreground: oklch(0.8398 0.0387 309.5391); | |
| --card: oklch(0.24 0.02 15); /* Slightly lighter red card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.26 0.02 15); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.4607 0.1853 4.0994); | |
| --primary-foreground: oklch(0.856 0.0618 346.3684); | |
| --secondary: oklch(0.22 0.01 15); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.2 0.01 15); | |
| --muted-foreground: oklch(0.794 0.0372 307.1032); | |
| --accent: oklch(0.3 0.03 15); | |
| --accent-foreground: oklch(0.9647 0.0091 341.8035); | |
| --destructive: oklch(0.2258 0.0524 12.6119); | |
| --border: oklch(0.28 0.02 15); | |
| --input: oklch(0.28 0.02 15); | |
| --ring: oklch(0.5916 0.218 0.5844); | |
| --chart-1: oklch(0.5316 0.1409 355.1999); | |
| --chart-2: oklch(0.5633 0.1912 306.8561); | |
| --chart-3: oklch(0.7227 0.1502 60.5799); | |
| --chart-4: oklch(0.6193 0.2029 312.7422); | |
| --chart-5: oklch(0.6118 0.2093 6.1387); | |
| --sidebar: oklch(0.16 0.01 15); | |
| --sidebar-foreground: oklch(0.8607 0.0293 343.6612); | |
| --sidebar-primary: oklch(0.4882 0.2172 264.3763); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.24 0.02 15); | |
| --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752); | |
| --sidebar-border: oklch(0 0 0); | |
| --sidebar-ring: oklch(0.5916 0.218 0.5844); | |
| --font-sans: | |
| ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| } | |
| .black { | |
| --background: oklch(0.97 0 0); /* Softer gray background */ | |
| --foreground: oklch(0 0 0); | |
| --card: oklch(0.985 0 0); /* Slightly off-white cards */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0 0); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0 0 0); | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.92 0 0); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0 0); | |
| --muted-foreground: oklch(0.4 0 0); | |
| --accent: oklch(0.88 0 0); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.63 0.19 23.03); | |
| --border: oklch(0.85 0 0); | |
| --input: oklch(0.85 0 0); | |
| --ring: oklch(0 0 0); | |
| --chart-1: oklch(0.81 0.17 75.35); | |
| --chart-2: oklch(0.55 0.22 264.53); | |
| --chart-3: oklch(0.72 0 0); | |
| --chart-4: oklch(0.92 0 0); | |
| --chart-5: oklch(0.56 0 0); | |
| --sidebar: var(--card); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: oklch(0 0 0); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0 0); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0 0); | |
| --sidebar-ring: oklch(0 0 0); | |
| --font-sans: | |
| ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04); | |
| --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08); | |
| --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15); | |
| --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| /* Table specific colors */ | |
| --table-background: var(--card); | |
| --table-border: oklch(0.985 0 0); | |
| --table-header: var(--muted); | |
| } | |
| .dark.black { | |
| --background: oklch(0.12 0 0); /* Very dark gray background */ | |
| --foreground: oklch(1 0 0); | |
| --card: oklch(0.18 0 0); /* Slightly lighter card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.2 0 0); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(1 0 0); | |
| --primary-foreground: oklch(0 0 0); | |
| --secondary: oklch(0.16 0 0); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.14 0 0); | |
| --muted-foreground: oklch(0.72 0 0); | |
| --accent: oklch(0.26 0 0); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.69 0.2 23.91); | |
| --border: oklch(0.22 0 0); | |
| --input: oklch(0.22 0 0); | |
| --ring: oklch(0.72 0 0); | |
| --chart-1: oklch(0.81 0.17 75.35); | |
| --chart-2: oklch(0.58 0.21 260.84); | |
| --chart-3: oklch(0.56 0 0); | |
| --chart-4: oklch(0.44 0 0); | |
| --chart-5: oklch(0.92 0 0); | |
| --sidebar: oklch(0.1 0 0); | |
| --sidebar-foreground: oklch(1 0 0); | |
| --sidebar-primary: oklch(1 0 0); | |
| --sidebar-primary-foreground: oklch(0 0 0); | |
| --sidebar-accent: oklch(0.18 0 0); | |
| --sidebar-accent-foreground: oklch(1 0 0); | |
| --sidebar-border: oklch(0.18 0 0); | |
| --sidebar-ring: oklch(0.72 0 0); | |
| --font-sans: | |
| ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, | |
| 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| } | |
| /* Cream Color Scheme - Using provided colors */ | |
| .cream { | |
| --background: #f5f5f0; /* Light cream background (similar to claude) */ | |
| --foreground: #333333; | |
| --card: #fafaf9; /* Slightly lighter cream cards */ | |
| --card-foreground: #333333; | |
| --popover: #fafaf9; | |
| --popover-foreground: #333333; | |
| --primary: #a2af9b; /* Sage green primary */ | |
| --primary-foreground: #ffffff; /* White text on sage green */ | |
| --ring: #a2af9b; | |
| --secondary: #f0f0ef; | |
| --secondary-foreground: #333333; | |
| --muted: #e8e7dc; | |
| --muted-foreground: #666666; | |
| --accent: #e0dfd0; | |
| --accent-foreground: #333333; | |
| --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */ | |
| --destructive-foreground: #ffffff; | |
| --border: #d4d3c5; | |
| --input: #d4d3c5; | |
| --sidebar: #fafaf9; | |
| --sidebar-foreground: #333333; | |
| --sidebar-primary: #a2af9b; | |
| --sidebar-primary-foreground: #ffffff; | |
| --sidebar-ring: #a2af9b; | |
| --sidebar-accent: #f0f0ef; | |
| --sidebar-accent-foreground: #333333; | |
| --sidebar-border: #d4d3c5; | |
| --chart-1: #a2af9b; /* Sage green */ | |
| --chart-2: #dccfc0; /* Warm beige */ | |
| --chart-3: #8b9a8a; /* Darker sage */ | |
| --chart-4: #c9b8a8; /* Darker beige */ | |
| --chart-5: #7a8a79; /* Deep sage */ | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05); | |
| --shadow-xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05); | |
| --shadow-sm: 0 10px 20px -5px rgba(162, 175, 155, 0.08); | |
| --shadow: 0 15px 30px -10px rgba(162, 175, 155, 0.12); | |
| --shadow-md: 0 15px 30px -10px rgba(162, 175, 155, 0.12); | |
| --shadow-lg: 0 0 15px rgba(162, 175, 155, 0.15); | |
| --shadow-xl: 0 8px 10px -1px rgba(162, 175, 155, 0.08); | |
| --shadow-2xl: 0 1px 3px 0px rgba(162, 175, 155, 0.15); | |
| --tracking-normal: 0em; | |
| --spacing: 0.25rem; | |
| } | |
| .dark.cream { | |
| --background: oklch(0.22 0.005 80); /* Dark cream background */ | |
| --foreground: oklch(0.9219 0 0); | |
| --card: oklch(0.28 0.01 80); /* Lighter cream card */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.2686 0 0); | |
| --popover-foreground: var(--foreground); | |
| --primary: #a2af9b; /* Keep sage green for dark mode */ | |
| --primary-foreground: #1a1a1a; /* Dark text on sage green */ | |
| --ring: #a2af9b; | |
| --secondary: oklch(0.2686 0 0); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.2686 0 0); | |
| --muted-foreground: oklch(0.7155 0 0); | |
| --accent: oklch(0.32 0.02 80); | |
| --accent-foreground: oklch(0.9243 0.1151 95.7459); | |
| --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */ | |
| --destructive-foreground: #ffffff; | |
| --sidebar: var(--background); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-border: oklch(1 0 0 / 10%); | |
| --sidebar-primary: #a2af9b; | |
| --sidebar-primary-foreground: #1a1a1a; | |
| --sidebar-ring: #a2af9b; | |
| --sidebar-accent: #3a3a3a; | |
| --sidebar-accent-foreground: #dccfc0; | |
| --chart-1: #a2af9b; /* Sage green */ | |
| --chart-2: #dccfc0; /* Warm beige */ | |
| --chart-3: #b5c2b0; /* Lighter sage for dark mode */ | |
| --chart-4: #e0d3c4; /* Lighter beige for dark mode */ | |
| --chart-5: #8fa08e; /* Medium sage */ | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(162, 175, 155, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| } | |
| @theme inline { | |
| /* Color System */ | |
| --color-background: var(--background); | |
| --color-foreground: var(--foreground); | |
| --color-card: var(--card); | |
| --color-card-foreground: var(--card-foreground); | |
| --color-popover: var(--popover); | |
| --color-popover-foreground: var(--popover-foreground); | |
| --color-primary: var(--primary); | |
| --color-primary-foreground: var(--primary-foreground); | |
| --color-secondary: var(--secondary); | |
| --color-secondary-foreground: var(--secondary-foreground); | |
| --color-muted: var(--muted); | |
| --color-muted-foreground: var(--muted-foreground); | |
| --color-accent: var(--accent); | |
| --color-accent-foreground: var(--accent-foreground); | |
| --color-destructive: var(--destructive); | |
| --color-destructive-foreground: var(--destructive-foreground); | |
| --color-border: var(--border); | |
| --color-input: var(--input); | |
| --color-ring: var(--ring); | |
| /* Data Visualization */ | |
| --color-chart-1: var(--chart-1); | |
| --color-chart-2: var(--chart-2); | |
| --color-chart-3: var(--chart-3); | |
| --color-chart-4: var(--chart-4); | |
| --color-chart-5: var(--chart-5); | |
| /* Brand Colors */ | |
| --color-brand-50: #fbf7f5; | |
| --color-brand-100: #f5ebe6; | |
| --color-brand-200: #edd5c8; | |
| --color-brand-300: #e0b6a1; | |
| --color-brand-400: #d08d6e; | |
| --color-brand-500: #b05d2e; | |
| --color-brand-600: #964823; | |
| --color-brand-700: #7a381d; | |
| --color-brand-800: #632e1a; | |
| --color-brand-900: #512718; | |
| /* Navigation */ | |
| --color-sidebar: var(--sidebar); | |
| --color-sidebar-foreground: var(--sidebar-foreground); | |
| --color-sidebar-primary: var(--sidebar-primary); | |
| --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); | |
| --color-sidebar-accent: var(--sidebar-accent); | |
| --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); | |
| --color-sidebar-border: var(--sidebar-border); | |
| --color-sidebar-ring: var(--sidebar-ring); | |
| /* Typography */ | |
| --font-sans: var(--font-sans); | |
| --font-mono: var(--font-mono); | |
| --font-serif: var(--font-serif); | |
| /* Border Radius */ | |
| --radius-sm: calc(var(--radius) * 0.5); | |
| --radius-md: var(--radius); | |
| --radius-lg: calc(var(--radius) * 1.5); | |
| --radius-xl: calc(var(--radius) * 2); | |
| /* Elevation */ | |
| --shadow-2xs: var(--shadow-2xs); | |
| --shadow-xs: var(--shadow-xs); | |
| --shadow-sm: var(--shadow-sm); | |
| --shadow: var(--shadow); | |
| --shadow-md: var(--shadow-md); | |
| --shadow-lg: var(--shadow-lg); | |
| --shadow-xl: var(--shadow-xl); | |
| --shadow-2xl: var(--shadow-2xl); | |
| } | |
| @layer base { | |
| * { | |
| @apply border-border outline-ring/50; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) transparent; | |
| } | |
| html { | |
| @apply overflow-x-hidden; | |
| } | |
| body { | |
| @apply bg-background text-foreground min-h-svh w-full; | |
| } | |
| button:not(:disabled), | |
| [role='button']:not(:disabled) { | |
| cursor: pointer; | |
| } | |
| /* Prevent focus zoom on mobile devices */ | |
| @media screen and (max-width: 767px) { | |
| input, | |
| select, | |
| textarea { | |
| font-size: 16px ; | |
| } | |
| } | |
| } | |
| @utility container { | |
| margin-inline: auto; | |
| padding-inline: 2rem; | |
| } | |
| @utility no-scrollbar { | |
| /* Hide scrollbar for Chrome, Safari and Opera */ | |
| &::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Hide scrollbar for IE, Edge and Firefox */ | |
| -ms-overflow-style: none; /* IE and Edge */ | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| @utility faded-bottom { | |
| @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block; | |
| } | |
| /* styles.css */ | |
| .CollapsibleContent { | |
| overflow: hidden; | |
| } | |
| .CollapsibleContent[data-state='open'] { | |
| animation: slideDown 300ms ease-out; | |
| } | |
| .CollapsibleContent[data-state='closed'] { | |
| animation: slideUp 300ms ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| height: 0; | |
| } | |
| to { | |
| height: var(--radix-collapsible-content-height); | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| height: var(--radix-collapsible-content-height); | |
| } | |
| to { | |
| height: 0; | |
| } | |
| } | |
| /* Particle float animation */ | |
| @keyframes particle-float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px) translateX(0px); | |
| opacity: 0.6; | |
| } | |
| 25% { | |
| transform: translateY(-15px) translateX(5px); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: translateY(-5px) translateX(-8px); | |
| opacity: 0.8; | |
| } | |
| 75% { | |
| transform: translateY(-20px) translateX(3px); | |
| opacity: 0.9; | |
| } | |
| } | |
| /* Matrix digital rain */ | |
| @keyframes matrix-rain { | |
| 0% { | |
| transform: translateY(-100vh); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| opacity: 0; | |
| } | |
| } | |
| /* Data flow animation */ | |
| @keyframes data-flow { | |
| 0% { | |
| transform: translateX(-100%) scaleX(0); | |
| opacity: 0; | |
| } | |
| 20% { | |
| transform: translateX(-50%) scaleX(1); | |
| opacity: 1; | |
| } | |
| 80% { | |
| transform: translateX(50%) scaleX(1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateX(100%) scaleX(0); | |
| opacity: 0; | |
| } | |
| } | |
| /* Binary code stream */ | |
| @keyframes binary-stream { | |
| 0% { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 0.3; | |
| } | |
| 90% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| transform: translateX(100vw); | |
| opacity: 0; | |
| } | |
| } | |
| /* Low-poly grid animation */ | |
| @keyframes grid-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.3; | |
| transform: scale(1.05); | |
| } | |
| } | |
| /* Animation classes */ | |
| .animate-particle-float { | |
| animation: particle-float 8s ease-in-out infinite; | |
| } | |
| .animate-matrix-rain { | |
| animation: matrix-rain 6s linear infinite; | |
| } | |
| .animate-data-flow { | |
| animation: data-flow 4s ease-in-out infinite; | |
| } | |
| .animate-binary-stream { | |
| animation: binary-stream 15s linear infinite; | |
| } | |
| .animate-grid-pulse { | |
| animation: grid-pulse 4s ease-in-out infinite; | |
| } | |
| /* Tech grid background */ | |
| .tech-grid { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 157, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 157, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: grid-pulse 6s ease-in-out infinite; | |
| } | |
| /* Low-poly network pattern */ | |
| .low-poly-network { | |
| background-image: | |
| radial-gradient(circle at 25% 25%, rgba(0, 255, 157, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 75% 75%, rgba(255, 46, 77, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 50% 50%, rgba(240, 240, 240, 0.05) 0%, transparent 50%); | |
| } | |
| /* ===== STARRY COLOR SCHEME - Deep Blue Space Theme ===== */ | |
| .starry { | |
| --background: oklch(0.94 0.01 240); /* Light blue background (similar to blue theme) */ | |
| --foreground: oklch(0.12 0.08 240); | |
| --card: oklch(0.97 0.005 240); /* Light blue cards */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.985 0.005 240); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.65 0.22 210); /* Bright cyan-blue */ | |
| --primary-foreground: oklch(1 0 0); | |
| --secondary: oklch(0.92 0.01 240); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.9 0.01 240); | |
| --muted-foreground: oklch(0.4 0.04 240); | |
| --accent: oklch(0.88 0.02 240); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.6 0.25 15); | |
| --destructive-foreground: oklch(1 0 0); | |
| --border: oklch(0.85 0.02 240); | |
| --input: oklch(0.85 0.02 240); | |
| --ring: oklch(0.65 0.22 210); | |
| --chart-1: oklch(0.65 0.22 210); | |
| --chart-2: oklch(0.72 0.18 200); | |
| --chart-3: oklch(0.58 0.2 195); | |
| --chart-4: oklch(0.8 0.15 185); | |
| --chart-5: oklch(0.45 0.18 225); | |
| --sidebar: oklch(0.97 0.005 240); | |
| --sidebar-foreground: var(--foreground); | |
| --sidebar-primary: var(--primary); | |
| --sidebar-primary-foreground: oklch(1 0 0); | |
| --sidebar-accent: oklch(0.92 0.01 240); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.85 0.02 240); | |
| --sidebar-ring: var(--primary); | |
| --font-sans: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-serif: 'SF Pro Display', ui-serif, Georgia, Cambria, serif; | |
| --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 100, 255, 0.05); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 100, 255, 0.05); | |
| --shadow-sm: 0 20px 40px -15px rgba(0, 100, 255, 0.12); | |
| --shadow: 0 20px 40px -12px rgba(0, 100, 255, 0.2); | |
| --shadow-md: 0 20px 40px -12px rgba(0, 100, 255, 0.2); | |
| --shadow-lg: 0 0 20px rgba(0, 100, 255, 0.25); | |
| --shadow-xl: 0 8px 10px -1px rgba(0, 100, 255, 0.1); | |
| --shadow-2xl: 0 1px 3px 0px rgba(0, 100, 255, 0.25); | |
| --tracking-normal: -0.01em; | |
| --spacing: 0.25rem; | |
| } | |
| .dark.starry { | |
| --background: oklch(0.12 0.04 240); /* Deeper space background */ | |
| --foreground: oklch(0.97 0.03 210); /* Brighter foreground */ | |
| --card: oklch(0.18 0.06 240); /* Slightly lighter card for contrast */ | |
| --card-foreground: var(--foreground); | |
| --popover: oklch(0.2 0.07 240); | |
| --popover-foreground: var(--foreground); | |
| --primary: oklch(0.7 0.25 205); /* Brighter primary for dark mode */ | |
| --primary-foreground: oklch(0.06 0.05 245); | |
| --secondary: oklch(0.16 0.05 240); | |
| --secondary-foreground: var(--foreground); | |
| --muted: oklch(0.14 0.04 240); | |
| --muted-foreground: oklch(0.75 0.07 215); | |
| --accent: oklch(0.22 0.08 240); | |
| --accent-foreground: var(--foreground); | |
| --destructive: oklch(0.65 0.28 20); | |
| --destructive-foreground: oklch(0.97 0.03 210); | |
| --border: oklch(0.24 0.09 240); | |
| --input: oklch(0.24 0.09 240); | |
| --ring: oklch(0.7 0.25 205); | |
| --chart-1: oklch(0.7 0.25 205); | |
| --chart-2: oklch(0.78 0.2 195); | |
| --chart-3: oklch(0.62 0.22 190); | |
| --chart-4: oklch(0.85 0.18 180); | |
| --chart-5: oklch(0.5 0.2 230); | |
| --sidebar: oklch(0.1 0.05 240); | |
| --sidebar-foreground: oklch(0.92 0.05 218); | |
| --sidebar-primary: oklch(0.7 0.25 205); | |
| --sidebar-primary-foreground: oklch(0.06 0.05 245); | |
| --sidebar-accent: oklch(0.18 0.08 240); | |
| --sidebar-accent-foreground: var(--foreground); | |
| --sidebar-border: oklch(0.2 0.09 240); | |
| --sidebar-ring: oklch(0.7 0.25 205); | |
| --font-sans: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-serif: 'SF Pro Display', ui-serif, Georgia, Cambria, serif; | |
| --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --radius: 0.75rem; | |
| --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4); | |
| --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 0 20px rgba(0, 150, 255, 0.2); | |
| --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6); | |
| --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7); | |
| --tracking-normal: -0.01em; | |
| --spacing: 0.25rem; | |
| } | |
| /* ===== SIDEBAR STYLES ===== */ | |
| [data-slot='sidebar-container'] { | |
| background: var(--sidebar); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: 2rem; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| [data-slot='sidebar-inner'] { | |
| background: var(--sidebar); | |
| border-radius: 2rem; | |
| } | |
| [data-sidebar='sidebar'] { | |
| background: var(--sidebar); | |
| } | |
| /* Remove any default border */ | |
| [data-slot='sidebar-inner'], | |
| [data-sidebar='sidebar'], | |
| [data-slot='sidebar-container'] { | |
| border: none ; | |
| outline: none ; | |
| } | |
| /* Remove shadow that might look like border */ | |
| [data-slot='sidebar-inner'] { | |
| box-shadow: none ; | |
| } | |
| [data-slot='sidebar-menu-sub'] { | |
| border: none ; | |
| } | |
| /* Ensure no border on mobile */ | |
| [data-mobile='true'] [data-slot='sidebar-inner'] { | |
| border: none ; | |
| } | |
| /* Sidebar menu button styles */ | |
| [data-slot='sidebar-menu-button'], | |
| [data-slot='sidebar-menu-sub-button'] { | |
| height: 2.25rem; | |
| border-radius: 1rem; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-slot='sidebar-menu-button'][data-active='true'], | |
| [data-slot='sidebar-menu-sub-button'][data-active='true'] { | |
| background: var(--primary); | |
| color: var(--primary-foreground); | |
| } | |
| [data-slot='sidebar-menu-button']:hover:not([data-active='true']), | |
| [data-slot='sidebar-menu-sub-button']:hover:not([data-active='true']) { | |
| background: var(--accent); | |
| color: var(--primary); | |
| } | |
| /* Sidebar group label */ | |
| [data-slot='sidebar-group-label'] { | |
| font-weight: 600; | |
| color: var(--muted-foreground); | |
| padding-left: 0.5rem; | |
| } | |
| /* Sidebar rail */ | |
| [data-slot='sidebar-rail'] { | |
| display: none; | |
| } | |
| /* Dark mode sidebar styles */ | |
| .dark [data-slot='sidebar-container'] { | |
| background: var(--sidebar); | |
| opacity: 0.8; | |
| border: none ; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dark [data-slot='sidebar-menu-button'][data-active='true'], | |
| .dark [data-slot='sidebar-menu-sub-button'][data-active='true'] { | |
| background: var(--primary); | |
| color: var(--primary-foreground); | |
| } | |
| .dark [data-slot='sidebar-menu-button']:hover:not([data-active='true']), | |
| .dark [data-slot='sidebar-menu-sub-button']:hover:not([data-active='true']) { | |
| background: var(--accent); | |
| color: var(--primary); | |
| } | |
| .dark [data-slot='sidebar-group-label'] { | |
| color: var(--muted-foreground); | |
| } | |
| @layer utilities { | |
| .glass-highlight { | |
| background: rgba(99, 102, 241, 0.15); | |
| background: color-mix(in srgb, var(--primary) 15%, transparent); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| } | |
| .active-glow { | |
| box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.3); | |
| border-color: var(--primary) ; | |
| } | |
| } | |
| /* ===== DATE RANGE PICKER STYLES ===== */ | |
| /* Range middle date - cell background */ | |
| .rdp-custom-day.rdp-custom-range-middle { | |
| @apply bg-primary/10 dark:bg-primary/20; | |
| } | |
| /* Range start date - cell background and rounded corners */ | |
| .rdp-custom-day.rdp-custom-range-start { | |
| @apply bg-primary/10 rounded-l-full dark:bg-primary/20; | |
| } | |
| /* Range end date - cell background and rounded corners */ | |
| .rdp-custom-day.rdp-custom-range-end { | |
| @apply bg-primary/10 rounded-r-full dark:bg-primary/20; | |
| } | |
| /* Range start and end on the same day */ | |
| .rdp-custom-day.rdp-custom-range-start.rdp-custom-range-end { | |
| @apply rounded-full; | |
| } | |
| /* Range start/end date - button styles */ | |
| .rdp-custom-day.rdp-custom-range-start > .rdp-custom-day-button, | |
| .rdp-custom-day.rdp-custom-range-end > .rdp-custom-day-button { | |
| @apply bg-primary text-white hover:bg-primary; | |
| } | |
| /* Today's date style */ | |
| .rdp-custom-day.rdp-custom-today > .rdp-custom-day-button { | |
| @apply ring-1 ring-inset ring-primary/40; | |
| } | |
| /* Outside dates (prev/next month) */ | |
| .rdp-custom-day.rdp-custom-outside > .rdp-custom-day-button { | |
| @apply text-gray-300 dark:text-gray-700; | |
| } | |
| /* Outside dates within range */ | |
| .rdp-custom-day.rdp-custom-outside.rdp-custom-range-middle, | |
| .rdp-custom-day.rdp-custom-outside.rdp-custom-range-start, | |
| .rdp-custom-day.rdp-custom-outside.rdp-custom-range-end { | |
| @apply bg-primary/5; | |
| } | |
| /* Disabled dates */ | |
| .rdp-custom-day.rdp-custom-disabled > .rdp-custom-day-button { | |
| @apply cursor-not-allowed opacity-30; | |
| } | |