asepharyana
abbd78f42b
Select dropdowns (voice tab, guild selector) rendered with a transparent background because --color-popover/--color-input were undefined, and the popup overlapped the trigger due to alignItemWithTrigger. Define the missing theme tokens (popover, popover-foreground, input, secondary) and default the select popup to open below the trigger.
328 lines
9.7 KiB
CSS
328 lines
9.7 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Theme variables — light mode lives in :root (default), dark mode overrides
|
|
* via `.dark`. Toggle in TopNav swaps the class on <html>.
|
|
*
|
|
* NOTE: this is `@theme` (NOT `@theme inline`) on purpose — inline inlines
|
|
* literal values into utilities, so a `.dark` class override of the custom
|
|
* property would NOT re-skin utilities. With plain `@theme`, utilities
|
|
* reference `var(--color-*)`, so runtime theme switching works.
|
|
*/
|
|
@theme {
|
|
/* ── Light (default) ── */
|
|
/* Canvas — soft off-white */
|
|
--color-canvas: oklch(0.97 0.005 250);
|
|
--color-surface: oklch(1 0 0 / 0.7);
|
|
--color-surface-hover: oklch(0.93 0.01 250 / 0.8);
|
|
|
|
/* Glass */
|
|
--color-glass-bg: oklch(0 0 0 / 0.04);
|
|
--color-glass-border: oklch(0.2 0.02 250 / 0.12);
|
|
--glass-shadow: 0 8px 32px oklch(0.2 0.02 250 / 0.12);
|
|
|
|
/* Primary — teal-cyan */
|
|
--color-primary: oklch(0.52 0.17 215);
|
|
--color-primary-glow: oklch(0.52 0.17 215 / 0.35);
|
|
--color-primary-foreground: oklch(0.98 0 0);
|
|
--color-border: oklch(0.2 0.02 250 / 0.08);
|
|
--color-border-glow: oklch(0.52 0.17 215 / 0.35);
|
|
|
|
/* Accents */
|
|
--color-accent-purple: oklch(0.55 0.2 280);
|
|
--color-accent-amber: oklch(0.65 0.17 75);
|
|
--color-destructive: oklch(0.577 0.245 27.325);
|
|
--color-success: oklch(0.55 0.18 160);
|
|
|
|
/* Text */
|
|
--color-text-primary: oklch(0.25 0.02 250);
|
|
--color-text-secondary: oklch(0.48 0.02 250);
|
|
--color-text-mono: oklch(0.52 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.9 0.01 250);
|
|
--color-muted-foreground: var(--color-text-secondary);
|
|
--color-accent: var(--color-primary);
|
|
--color-accent-foreground: var(--color-primary-foreground);
|
|
|
|
/* Ring / focus outline for shadcn outline-ring utility */
|
|
--color-ring: var(--color-primary);
|
|
|
|
/* Base-ui / shadcn primitives */
|
|
--color-popover: oklch(0.99 0.005 250 / 0.95);
|
|
--color-popover-foreground: var(--color-text-primary);
|
|
--color-input: oklch(0.55 0.02 250 / 0.35);
|
|
--color-secondary: oklch(0.92 0.01 250 / 0.6);
|
|
--color-secondary-foreground: var(--color-text-primary);
|
|
|
|
/* Sidebar (shadcn) */
|
|
--color-sidebar: oklch(1 0 0 / 0.6);
|
|
--color-sidebar-foreground: var(--color-text-primary);
|
|
--color-sidebar-primary: var(--color-primary);
|
|
--color-sidebar-primary-foreground: var(--color-primary-foreground);
|
|
--color-sidebar-accent: oklch(0.93 0.01 250 / 0.7);
|
|
--color-sidebar-accent-foreground: var(--color-text-primary);
|
|
--color-sidebar-border: var(--color-border);
|
|
--color-sidebar-ring: var(--color-ring);
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ── Dark theme overrides ── */
|
|
.dark {
|
|
--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);
|
|
|
|
--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);
|
|
|
|
--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);
|
|
|
|
--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);
|
|
|
|
--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);
|
|
|
|
--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);
|
|
--color-ring: var(--color-primary);
|
|
|
|
/* Base-ui / shadcn primitives */
|
|
--color-popover: oklch(0.13 0.02 245 / 0.96);
|
|
--color-popover-foreground: var(--color-text-primary);
|
|
--color-input: oklch(1 0 0 / 0.18);
|
|
--color-secondary: oklch(0.2 0.02 245 / 0.7);
|
|
--color-secondary-foreground: var(--color-text-primary);
|
|
|
|
/* Sidebar (shadcn) */
|
|
--color-sidebar: oklch(0.11 0.02 245 / 0.55);
|
|
--color-sidebar-foreground: var(--color-text-primary);
|
|
--color-sidebar-primary: var(--color-primary);
|
|
--color-sidebar-primary-foreground: var(--color-primary-foreground);
|
|
--color-sidebar-accent: oklch(0.17 0.02 245 / 0.7);
|
|
--color-sidebar-accent-foreground: var(--color-text-primary);
|
|
--color-sidebar-border: var(--color-border);
|
|
--color-sidebar-ring: var(--color-ring);
|
|
}
|
|
|
|
@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 var(--glass-shadow), 0 0 20px var(--color-primary-glow);
|
|
}
|
|
.glass-intense {
|
|
background: oklch(1 0 0 / 0.75);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid oklch(0.2 0.02 250 / 0.12);
|
|
box-shadow: 0 8px 32px oklch(0.2 0.02 250 / 0.12);
|
|
}
|
|
}
|
|
|
|
/* Dark variant of glass-intense (reads better on dark canvas) */
|
|
.dark .glass-intense {
|
|
background: oklch(1 0 0 / 0.08);
|
|
border: 1px solid oklch(1 0 0 / 0.12);
|
|
box-shadow: none;
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
body {
|
|
@apply bg-canvas text-text-primary font-sans antialiased;
|
|
background-image:
|
|
radial-gradient(circle, oklch(0.3 0.02 250 / 0.05) 1px, transparent 1px),
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.52 0.17 215 / 0.08), transparent),
|
|
radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.55 0.2 280 / 0.05), transparent);
|
|
background-size: 24px 24px, 100% 100%, 100% 100%;
|
|
}
|
|
/* Dark body background */
|
|
.dark body {
|
|
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%;
|
|
}
|
|
html {
|
|
@apply font-sans scroll-smooth;
|
|
}
|
|
|
|
/* Custom selection color */
|
|
::selection {
|
|
background: oklch(0.62 0.17 215 / 0.4);
|
|
color: inherit;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: oklch(0.4 0.02 250 / 0.2);
|
|
border-radius: 999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.4 0.02 250 / 0.35);
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: oklch(0.4 0.02 250 / 0.2); border-radius: 999px; }
|
|
::-webkit-scrollbar-thumb:hover { background: oklch(0.4 0.02 250 / 0.35); }
|
|
}
|
|
|
|
/* ── Animations ──────────────────────────── */
|
|
|
|
@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;
|
|
}
|
|
|
|
/* Equalizer bars — bouncing heights for the "now playing" waveform */
|
|
@keyframes eq-bounce {
|
|
0%,
|
|
100% {
|
|
transform: scaleY(0.25);
|
|
}
|
|
30% {
|
|
transform: scaleY(1);
|
|
}
|
|
60% {
|
|
transform: scaleY(0.5);
|
|
}
|
|
}
|
|
.animate-eq {
|
|
animation: eq-bounce 0.9s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
/* Soft pulsing glow for the active/loading card */
|
|
@keyframes card-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 oklch(0.62 0.17 215 / 0);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 22px 0 oklch(0.62 0.17 215 / 0.25);
|
|
}
|
|
}
|
|
.animate-card-glow {
|
|
animation: card-glow 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Utility classes ─────────────────────── */
|
|
|
|
/* Gradient text */
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Gradient border (via pseudo-element trick) */
|
|
.gradient-border {
|
|
position: relative;
|
|
}
|
|
.gradient-border::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
/* Live pulse ring (compat alias) */
|
|
.live-pulse-ring {
|
|
animation: pulse-ring 1.5s ease-out infinite;
|
|
}
|