/* * YssVipApi / Claude Code Hub theme v2 * Sub2API-inspired: navy structure, cyan accents, quiet surfaces. * Keep this file selector-safe: never use [class*="bg-primary"], because * Tailwind modifiers such as selection:bg-primary and hover:bg-primary/5 * would otherwise paint inputs and menu items permanently. */ :root, :root.light { color-scheme: light; --y-ink: #0a1628; --y-cyan: #00b4d8; --y-cyan-hover: #0096b8; --y-cyan-soft: #e6f6fb; --y-page: #f7fafd; --y-surface: #ffffff; --y-surface-hover: #f4f8fc; --y-text: #0a1628; --y-muted: #4a5b72; --y-subtle: #7c8a9e; --y-border: #e2e8f0; --y-border-strong: #cbd5e1; --y-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 8px 24px -12px rgba(10, 22, 40, 0.08); --y-shadow-lift: 0 2px 4px rgba(10, 22, 40, 0.05), 0 20px 40px -16px rgba(10, 22, 40, 0.12); /* Claude Code Hub/shadcn semantic tokens. */ --background: var(--y-page) !important; --foreground: var(--y-text) !important; --card: var(--y-surface) !important; --card-foreground: var(--y-text) !important; --popover: var(--y-surface) !important; --popover-foreground: var(--y-text) !important; /* Cyan remains the semantic accent/tint; exact primary buttons are navy below. */ --primary: var(--y-cyan) !important; --primary-foreground: #060c18 !important; --secondary: #eef3f8 !important; --secondary-foreground: var(--y-text) !important; --muted: #eef3f8 !important; --muted-foreground: #647387 !important; --accent: var(--y-surface-hover) !important; --accent-foreground: var(--y-text) !important; --destructive: #ef4444 !important; --border: var(--y-border) !important; --input: var(--y-border) !important; --ring: var(--y-cyan) !important; --chart-1: #00b4d8 !important; --chart-2: #0096b8 !important; --chart-3: #155e78 !important; --chart-4: #8b5cf6 !important; --chart-5: #10b981 !important; --sidebar: #ffffff !important; --sidebar-foreground: var(--y-text) !important; --sidebar-primary: var(--y-ink) !important; --sidebar-primary-foreground: #ffffff !important; --sidebar-accent: var(--y-surface-hover) !important; --sidebar-accent-foreground: var(--y-text) !important; --sidebar-border: var(--y-border) !important; --sidebar-ring: var(--y-cyan) !important; --radius: 0.75rem !important; } :root.dark, .dark { color-scheme: dark; --y-page: #060c18; --y-surface: #0f1d2f; --y-surface-hover: #1e2a3f; --y-text: #e8eff8; --y-muted: #94a3b8; --y-subtle: #647387; --y-border: rgba(255, 255, 255, 0.08); --y-border-strong: rgba(255, 255, 255, 0.14); --y-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --y-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 40px -16px rgba(0, 0, 0, 0.6); --background: var(--y-page) !important; --foreground: var(--y-text) !important; --card: var(--y-surface) !important; --card-foreground: var(--y-text) !important; --popover: var(--y-surface) !important; --popover-foreground: var(--y-text) !important; --primary: #2bcdf2 !important; --primary-foreground: #060c18 !important; --secondary: #1e2a3f !important; --secondary-foreground: var(--y-text) !important; --muted: #1e2a3f !important; --muted-foreground: #94a3b8 !important; --accent: #1e2a3f !important; --accent-foreground: var(--y-text) !important; --destructive: #f87171 !important; --border: var(--y-border) !important; --input: rgba(255, 255, 255, 0.12) !important; --ring: #2bcdf2 !important; --sidebar: #0a1628 !important; --sidebar-foreground: var(--y-text) !important; --sidebar-primary: #2bcdf2 !important; --sidebar-primary-foreground: #060c18 !important; --sidebar-accent: #1e2a3f !important; --sidebar-accent-foreground: var(--y-text) !important; --sidebar-border: var(--y-border) !important; --sidebar-ring: #2bcdf2 !important; } html, body { font-family: "Public Sans", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important; } body { background: radial-gradient(760px 340px at 84% -12%, rgba(0, 180, 216, 0.07), transparent 68%), var(--background) !important; } :root.dark body, .dark body { background: radial-gradient(840px 380px at 84% -12%, rgba(0, 180, 216, 0.10), transparent 70%), var(--background) !important; } ::selection { background: rgba(0, 180, 216, 0.22); color: var(--foreground); } /* Header: translucent white/navy, without painting every nav child. */ header { border-color: var(--border) !important; background: color-mix(in srgb, var(--card) 90%, transparent) !important; box-shadow: 0 1px 0 rgba(10, 22, 40, 0.03) !important; backdrop-filter: saturate(180%) blur(14px) !important; } header nav { border-color: var(--border) !important; background: color-mix(in srgb, var(--card) 72%, var(--background)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } header nav a, header nav button { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } header nav a:hover, header nav button:hover { color: var(--foreground) !important; } /* Menus/popovers remain quiet surfaces. */ [role="menu"], [role="listbox"], [data-slot="dropdown-menu-content"], [data-slot="select-content"] { border: 1px solid var(--border) !important; background: var(--popover) !important; color: var(--popover-foreground) !important; box-shadow: var(--y-shadow-lift) !important; } [role="menuitem"], [role="option"] { color: var(--foreground) !important; } [role="menuitem"]:hover, [role="menuitem"][data-highlighted], [role="option"]:hover, [role="option"][data-highlighted] { background: var(--accent) !important; color: var(--accent-foreground) !important; } /* Inputs are white/navy surfaces; cyan is only the focus ring. */ input, textarea, select, [data-slot="input"] { border-color: var(--border) !important; background-color: var(--card) !important; color: var(--foreground) !important; box-shadow: 0 1px 2px rgba(10, 22, 40, 0.03) !important; } input::placeholder, textarea::placeholder { color: var(--muted-foreground) !important; } input:focus, textarea:focus, select:focus, [data-slot="input"]:focus-within { border-color: var(--ring) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) !important; } button, [data-slot="button"] { transition: transform 160ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } button:active, [data-slot="button"]:active { transform: scale(0.98); } /* * Exact primary surfaces only. This deliberately does not match bg-primary/5, * selection:bg-primary or hover:bg-primary/90. */ :root:not(.dark) .bg-primary, :root.light .bg-primary { background-color: var(--y-ink) !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 10px 24px -16px rgba(10, 22, 40, 0.65) !important; } :root:not(.dark) .bg-primary:hover, :root.light .bg-primary:hover { background-color: #0f1d2f !important; } :root.dark .bg-primary, .dark .bg-primary { background-color: #2bcdf2 !important; background-image: none !important; color: #060c18 !important; box-shadow: 0 10px 24px -16px rgba(0, 180, 216, 0.58) !important; } button[role="switch"][data-state="checked"] { background-color: #00b4d8 !important; background-image: none !important; box-shadow: none !important; } /* Cards and tables: restrained border/shadow hierarchy. */ [class~="bg-card"][class*="border"], [class*="rounded-xl"][class*="border"], [class*="rounded-2xl"][class*="border"] { border-color: var(--border) !important; } [class~="bg-card"][class*="shadow"], [class*="rounded-xl"][class*="shadow"], [class*="rounded-2xl"][class*="shadow"] { box-shadow: var(--y-shadow) !important; } table { border-color: var(--border) !important; } thead, th { background: color-mix(in srgb, var(--secondary) 76%, transparent) !important; color: var(--muted-foreground) !important; } tbody tr:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent) !important; } footer { border-color: var(--border) !important; background: color-mix(in srgb, var(--card) 74%, transparent) !important; } /* Login-only split panel. Settings sidebars are also