diff --git a/vault/app/globals.css b/vault/app/globals.css new file mode 100644 index 0000000..b49c713 --- /dev/null +++ b/vault/app/globals.css @@ -0,0 +1,185 @@ +@import "tailwindcss"; +@import "tw-animate-css"; +@import "shadcn/tailwind.css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-sans); + --font-mono: var(--font-geist-mono); + --font-heading: var(--font-sans); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); +} + +:root { + --background: oklch(0.985 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.696 0.17 162.48); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.968 0.003 155); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.968 0.001 155); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.968 0.003 155); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.696 0.17 162.48); + --chart-1: oklch(0.696 0.17 162.48); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.696 0.17 162.48); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.968 0.003 155); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.696 0.17 162.48); +} + +.dark { + --background: oklch(0.115 0.005 155); + --foreground: oklch(0.985 0 0); + --card: oklch(0.165 0.005 155); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.165 0.005 155); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.696 0.17 162.48); + --primary-foreground: oklch(0.145 0 0); + --secondary: oklch(0.225 0.008 155); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.225 0.008 155); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.225 0.008 155); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.696 0.17 162.48); + --chart-1: oklch(0.696 0.17 162.48); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --sidebar: oklch(0.165 0.005 155); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.696 0.17 162.48); + --sidebar-primary-foreground: oklch(0.145 0 0); + --sidebar-accent: oklch(0.225 0.008 155); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.696 0.17 162.48); +} + +@keyframes shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-6px); } +} + +@keyframes glow-pulse { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 0.8; } +} + +.animate-shimmer { + background-size: 200% auto; + animation: shimmer 3s linear infinite; +} + +.animate-float { + animation: float 3s ease-in-out infinite; +} + +.animate-glow-pulse { + animation: glow-pulse 2s ease-in-out infinite; +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + html { + @apply font-sans; + } +} + +/* Smooth scrollbar */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--muted-foreground); + border-radius: 3px; + opacity: 0.3; +} +::-webkit-scrollbar-thumb:hover { + opacity: 0.5; +} + +/* CodeMirror theme overrides */ +.cm-editor { + font-size: 14px; + border-radius: var(--radius); + overflow: hidden; +} +.cm-editor.cm-focused { + outline: none; +}