/* Ethereal Curator Design System for Emby Hub Pro */ :root { /* ── Ethereal Curator Palette — Light Mode ── */ --surface: #f5f7fb; --surface-container-low: #eef0f6; --surface-container: #ffffff; --surface-container-high: #ffffff; --surface-bright: #e8e5f5; --primary: #6f5fea; --primary-dim: #5a4bd6; --on-surface: #1a1f36; --on-surface-variant: #6b7194; --outline-variant: #d4d7e3; --ghost-border: rgba(212, 215, 227, 0.15); --ghost-border-hover: rgba(212, 215, 227, 0.4); --glass-bg: rgba(255, 255, 255, 0.7); --ambient-shadow: 0 0 40px rgba(111, 95, 234, 0.06); --primary-glow: rgba(111, 95, 234, 0.08); /* Semantic Status Colors */ --ec-success: #10b981; --ec-success-bg: rgba(16, 185, 129, 0.08); --ec-warning: #f59e0b; --ec-warning-bg: rgba(245, 158, 11, 0.08); --ec-danger: #ef4444; --ec-danger-bg: rgba(239, 68, 68, 0.08); --ec-info: #6f5fea; --ec-info-bg: rgba(111, 95, 234, 0.08); /* ── Legacy Aliases (apple-*) ── */ --apple-bg: var(--surface); --apple-bg-secondary: var(--surface-container); --apple-bg-tertiary: var(--surface-container-low); --apple-blue: var(--primary); --apple-blue-hover: var(--primary-dim); --apple-blue-light: var(--ec-info-bg); --apple-green: var(--ec-success); --apple-green-light: var(--ec-success-bg); --apple-orange: var(--ec-warning); --apple-orange-light: var(--ec-warning-bg); --apple-red: var(--ec-danger); --apple-red-light: var(--ec-danger-bg); --apple-gray: #8e8e93; --apple-gray2: #aeaeb2; --apple-gray3: var(--outline-variant); --apple-gray4: var(--outline-variant); --apple-gray5: var(--surface-container-low); --apple-gray6: var(--surface-container-low); /* Text Colors */ --apple-text-primary: var(--on-surface); --apple-text-secondary: var(--on-surface-variant); --apple-text-tertiary: var(--on-surface-variant); --apple-text-inverse: #ffffff; /* Page Background */ --bg-page: var(--surface); --bg-gradient: var(--surface); --bg-base: var(--surface); /* Glass System */ --glass-alpha: 0.72; --glass-blur: 24px; --surface-glass: var(--glass-bg); --surface-glass-hover: rgba(255, 255, 255, 0.85); --surface-glass-border: var(--ghost-border); --surface-glass-border-hover: var(--ghost-border-hover); /* Surfaces */ --surface-solid: var(--surface-container); --surface-solid-subtle: var(--surface-container-low); --surface-content: var(--surface-container); /* Borders */ --border-subtle: var(--ghost-border); --border-default: var(--ghost-border-hover); --border-focus: var(--primary); --border-color: var(--ghost-border); /* Shadows — Subtle Light Mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), var(--ambient-shadow); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05), var(--ambient-shadow); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.07), var(--ambient-shadow); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.10), var(--ambient-shadow); /* Text Hierarchy */ --text-primary: var(--on-surface); --text-secondary: var(--on-surface-variant); --text-tertiary: var(--on-surface-variant); --text-inverse: #ffffff; /* Accent Colors */ --accent-primary: var(--primary); --accent-primary-hover: var(--primary-dim); --accent-success: var(--ec-success); --accent-warning: var(--ec-warning); --accent-danger: var(--ec-danger); --accent-info: var(--primary); --text-on-primary: #ffffff; --text-on-success: #ffffff; --text-on-warning: #0f172a; --text-on-danger: #ffffff; --text-on-info: #ffffff; /* ── Brand Gold (Star Mascot Identity) ── */ --brand-gold: #FFD93D; --brand-gold-dim: #FFB300; --brand-gold-dark: #E6A200; --brand-gold-bg: rgba(255, 217, 61, 0.08); --brand-gold-glow: rgba(255, 217, 61, 0.15); --accent-brand: var(--brand-gold); --accent-brand-hover: var(--brand-gold-dim); /* Functional Blue (links, info indicators) */ --functional-blue: #3B82F6; --functional-blue-dim: #2563EB; --functional-blue-bg: rgba(59, 130, 246, 0.08); --accent-link: var(--functional-blue); /* ── Unified Card Token ── */ --card-radius: var(--radius-lg); --card-padding: 20px; --card-padding-sm: 14px; --card-bg: var(--surface-container); --card-bg-glass: var(--glass-bg); --card-border: 1px solid var(--ghost-border); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04); --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.06); /* Input & Interactive */ --input-bg: var(--surface-container-low); --input-border: var(--ghost-border); /* Sidebar */ --sidebar-bg: var(--glass-bg); --sidebar-border: var(--ghost-border); /* Legacy aliases (referenced in HTML) */ --glass-border: var(--surface-glass-border); --bottom-nav-bg: var(--glass-bg); --hover-bg: var(--surface-container-low); --accent-blue: var(--primary); --carousel-grad-from: rgba(245, 247, 251, 0.95); --carousel-grad-via: rgba(245, 247, 251, 0.75); --carousel-text: #1a1f36; /* Glow System — subtle in light mode */ --glow-primary: rgba(111, 95, 234, 0.3); --glow-success: rgba(16, 185, 129, 0.15); --glow-danger: rgba(239, 68, 68, 0.15); --glow-warning: rgba(245, 158, 11, 0.15); --glow-spread: 18px; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 16px; --radius-full: 9999px; /* Transition standard */ --transition-fast: 200ms ease-out; /* ── Typography Scale (5 tiers) ── */ --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 18px; --font-size-xl: 24px; /* ── Spacing Scale ── */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; /* Typography */ --font-sans: 'Inter', "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Segoe UI", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace; } /* Dark Mode — Ethereal Curator */ html.dark { /* ── Ethereal Curator Palette — Dark Mode ── */ --surface: #060e20; --surface-container-low: #091328; --surface-container: #0f1930; --surface-container-high: #141f38; --surface-bright: #1f2b49; --primary: #aca3ff; --primary-dim: #6f5fea; --on-surface: #dee5ff; --on-surface-variant: #a3aac4; --outline-variant: #40485d; --ghost-border: rgba(64, 72, 93, 0.15); --ghost-border-hover: rgba(64, 72, 93, 0.4); --glass-bg: rgba(15, 25, 48, 0.7); --ambient-shadow: 0 0 40px rgba(111, 95, 234, 0.08); --primary-glow: rgba(111, 95, 234, 0.15); /* Semantic Status Colors */ --ec-success: #34d399; --ec-success-bg: rgba(52, 211, 153, 0.12); --ec-warning: #fbbf24; --ec-warning-bg: rgba(251, 191, 36, 0.12); --ec-danger: #fb7185; --ec-danger-bg: rgba(251, 113, 133, 0.12); --ec-info: #aca3ff; --ec-info-bg: rgba(172, 163, 255, 0.12); /* ── Legacy Aliases (apple-*) ── */ --apple-bg: var(--surface); --apple-bg-secondary: var(--surface-container); --apple-bg-tertiary: var(--surface-container-low); --apple-blue: var(--primary); --apple-blue-hover: var(--primary-dim); --apple-blue-light: var(--ec-info-bg); --apple-green: var(--ec-success); --apple-green-light: var(--ec-success-bg); --apple-orange: var(--ec-warning); --apple-orange-light: var(--ec-warning-bg); --apple-red: var(--ec-danger); --apple-red-light: var(--ec-danger-bg); --apple-gray: #8e8e93; --apple-gray2: #636366; --apple-gray3: var(--outline-variant); --apple-gray4: var(--outline-variant); --apple-gray5: var(--surface-container-low); --apple-gray6: var(--surface-container-low); /* Text Colors */ --apple-text-primary: var(--on-surface); --apple-text-secondary: var(--on-surface-variant); --apple-text-tertiary: var(--on-surface-variant); /* Page Background */ --bg-page: var(--surface); --bg-gradient: var(--surface); --bg-base: var(--surface); /* Glass System */ --glass-alpha: 0.72; --glass-blur: 24px; --surface-glass: var(--glass-bg); --surface-glass-hover: rgba(15, 25, 48, 0.85); --surface-glass-border: var(--ghost-border); --surface-glass-border-hover: var(--ghost-border-hover); /* Surfaces */ --surface-solid: var(--surface-container); --surface-solid-subtle: var(--surface-container-low); --surface-content: var(--surface-container); /* Borders */ --border-subtle: var(--ghost-border); --border-default: var(--ghost-border-hover); --border-focus: var(--primary); --border-color: var(--ghost-border); /* Shadows — Deeper Dark Mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), var(--ambient-shadow); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), var(--ambient-shadow); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5), var(--ambient-shadow); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6), var(--ambient-shadow); /* Text Hierarchy */ --text-primary: var(--on-surface); --text-secondary: var(--on-surface-variant); --text-tertiary: var(--on-surface-variant); --text-inverse: #ffffff; --text-on-primary: #ffffff; --text-on-success: #ffffff; --text-on-warning: #0f172a; --text-on-danger: #ffffff; --text-on-info: #ffffff; /* Accent Colors */ --accent-primary: var(--primary); --accent-primary-hover: var(--primary-dim); --accent-success: var(--ec-success); --accent-warning: var(--ec-warning); --accent-danger: var(--ec-danger); --accent-info: var(--primary); /* ── Brand Gold (Star Mascot Identity) ── */ --brand-gold: #FFD93D; --brand-gold-dim: #E6A200; --brand-gold-dark: #CC8F00; --brand-gold-bg: rgba(255, 217, 61, 0.12); --brand-gold-glow: rgba(255, 217, 61, 0.25); --accent-brand: var(--brand-gold); --accent-brand-hover: var(--brand-gold-dim); /* Functional Blue (links, info indicators) */ --functional-blue: #60A5FA; --functional-blue-dim: #3B82F6; --functional-blue-bg: rgba(96, 165, 250, 0.12); --accent-link: var(--functional-blue); /* ── Unified Card Token ── */ --card-radius: var(--radius-lg); --card-padding: 20px; --card-padding-sm: 14px; --card-bg: rgba(15, 15, 30, 0.75); --card-bg-glass: rgba(15, 25, 48, 0.7); --card-border: 1px solid var(--ghost-border-hover); --card-shadow: 0 0 var(--glow-spread) var(--primary-glow), 0 4px 24px rgba(0, 0, 0, 0.4); --card-shadow-hover: 0 0 35px rgba(111, 95, 234, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5); /* Input & Interactive */ --input-bg: var(--surface-container-low); --input-border: var(--ghost-border); /* Sidebar */ --sidebar-bg: var(--glass-bg); --sidebar-border: var(--ghost-border); /* Glow System */ --glow-primary: rgba(111, 95, 234, 0.4); --glow-success: rgba(52, 211, 153, 0.4); --glow-danger: rgba(251, 113, 133, 0.4); --glow-warning: rgba(251, 191, 36, 0.4); --glow-spread: 20px; /* Legacy aliases (referenced in HTML) */ --glass-border: var(--surface-glass-border); --bottom-nav-bg: var(--glass-bg); --hover-bg: var(--surface-container-low); --accent-blue: var(--primary); --carousel-grad-from: rgba(6, 14, 32, 0.95); --carousel-grad-via: rgba(6, 14, 32, 0.7); --carousel-text: #dee5ff; } /* Base Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Body */ body { font-family: var(--font-sans); font-size: var(--font-size-md); line-height: 1.5; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; letter-spacing: -0.01em; } /* Typography Scale — Inter optimized */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.02em; } h1 { font-size: var(--font-size-xl); font-weight: 800; } h2 { font-size: var(--font-size-xl); font-weight: 800; } h3 { font-size: var(--font-size-lg); font-weight: 700; } h4 { font-size: var(--font-size-md); font-weight: 700; } h5 { font-size: var(--font-size-md); font-weight: 600; } h6 { font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } p { color: var(--text-secondary); line-height: 1.6; letter-spacing: -0.005em; } /* Cards - Ethereal Curator Style (Unified Card Token) */ .card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; } .card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--ghost-border-hover); transform: translateY(-2px); } /* Card modifier — highlight important cards (e.g. expiring, alerts) */ .card-highlight { border-color: var(--ghost-border-hover); box-shadow: var(--card-shadow-hover), 0 0 0 1px var(--accent-primary); } /* Tile — reusable inset element (icons, stat blocks, mini-cards inside cards) */ .tile { background: var(--surface-container-low); border: 1px solid var(--ghost-border); transition: border-color var(--transition-fast); } .tile:hover { border-color: var(--ghost-border-hover); } html.dark .tile { background: var(--surface-container-low); border-color: var(--ghost-border); } html.dark .tile:hover { border-color: rgba(111, 95, 234, 0.25); } .glass-card { position: relative; background: var(--card-bg-glass); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--surface-glass-border); border-radius: var(--card-radius); box-shadow: var(--shadow-md); } .card-elevated { position: relative; background: var(--surface-glass-hover); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--surface-glass-border); border-radius: var(--card-radius); box-shadow: var(--shadow-lg); } /* Subtle Shine Effect - Apple Style */ .glass-card::before, .card-elevated::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50% ); opacity: 0.5; } html.dark .glass-card::before, html.dark .card-elevated::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50% ); } /* .card-solid — removed (dead class) */ /* Buttons — unified pill shape, consistent sizing */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1.25rem; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-full); border: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); cursor: pointer; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dim)); color: var(--text-on-primary); border: 1px solid rgba(111, 95, 234, 0.35); box-shadow: 0 0 var(--glow-spread) var(--glow-primary), 0 0 36px var(--primary-glow); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dim), var(--primary)); transform: translateY(-2px) scale(1.01); box-shadow: 0 0 25px var(--glow-primary), 0 0 50px var(--primary-glow), 0 4px 15px rgba(0,0,0,0.1); } .btn-secondary { background: var(--surface-solid-subtle); color: var(--text-primary); border: 1px solid var(--ghost-border-hover); } .btn-secondary:hover { background: var(--surface-glass); border-color: rgba(111, 95, 234, 0.4); box-shadow: 0 0 15px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(-1px); } .btn-danger { background: linear-gradient(135deg, var(--ec-danger), #dc2626); color: #fff; border-radius: var(--radius-full); border: 1px solid rgba(239, 68, 68, 0.35); box-shadow: 0 0 var(--glow-spread) var(--glow-danger), 0 0 36px rgba(239, 68, 68, 0.12); } .btn-danger:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 25px var(--glow-danger), 0 0 50px rgba(239, 68, 68, 0.15), 0 4px 15px rgba(0,0,0,0.1); } .btn-success { background: linear-gradient(135deg, var(--ec-success), #059669); color: #fff; border: 1px solid rgba(16, 185, 129, 0.35); box-shadow: 0 0 var(--glow-spread) var(--glow-success), 0 0 36px rgba(16, 185, 129, 0.12); } .btn-success:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 25px var(--glow-success), 0 0 50px rgba(16, 185, 129, 0.15), 0 4px 15px rgba(0,0,0,0.1); } /* Button size variants */ .btn-sm { padding: 0.375rem 0.875rem; font-size: 12px; } /* Inputs - Ethereal Curator Style */ .input { width: 100%; background: var(--surface-container-low); border: 1px solid var(--ghost-border); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; color: var(--on-surface); font-size: var(--font-size-md); font-family: inherit; transition: border-color 200ms ease-out, box-shadow 200ms ease-out; outline: none; } .input:hover { border-color: var(--ghost-border-hover); } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .input::placeholder { color: var(--text-tertiary); } /* Navigation */ .sidebar { background: var(--sidebar-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-right: 1px solid var(--sidebar-border); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.04), inset -1px 0 0 rgba(255, 255, 255, 0.5); } html.dark .sidebar { background: rgba(9, 19, 40, 0.88); border-right-color: rgba(64, 72, 93, 0.15); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 30px rgba(111, 95, 234, 0.03); } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: var(--card-radius); color: var(--text-secondary); cursor: pointer; font-size: var(--font-size-md); font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; position: relative; } .nav-item:hover { background: var(--surface-container); color: var(--text-primary); border-color: var(--ghost-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .nav-item.active { background: var(--surface-container); color: var(--primary); font-weight: 600; border-color: var(--ghost-border-hover); box-shadow: 0 2px 10px rgba(111, 95, 234, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Status Tags - Apple Style */ .tag { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-full); } .tag-success { background: var(--ec-success-bg); color: var(--ec-success); } .tag-warning { background: var(--ec-warning-bg); color: var(--ec-warning); } .tag-danger { background: var(--ec-danger-bg); color: var(--ec-danger); } .tag-info { background: var(--ec-info-bg); color: var(--ec-info); } /* Scrollbar - Apple Style */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--apple-gray4); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--apple-gray3); } /* Utility Classes */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .bg-primary { background: var(--surface-solid); } .bg-secondary { background: var(--surface-solid-subtle); } .border-subtle { border-color: var(--border-subtle); } .border-default { border-color: var(--border-default); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .animate-enter { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Tab Switching Transitions (P2 — PillNav inspired) */ .tab-fade-enter-active { animation: tabEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .tab-fade-leave-active { animation: tabLeave 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes tabEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes tabLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } /* Gradient Text - Ethereal Curator Style */ .gradient-text { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } /* Login / Auth Page */ .auth-text { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); } .auth-title { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); } .login-card { background: rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .login-input { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #111827 !important; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } .login-input::placeholder { color: #6b7280; } .login-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow); } /* Modal & Dialog - Apple Style */ .modal-overlay { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Mobile Optimizations */ @media (max-width: 768px) { .card, .glass-card, .card-elevated { border-radius: var(--card-radius); } body { font-size: var(--font-size-md); } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus States - Accessibility */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Navigation group title */ .nav-group-title { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; padding: 1.25rem 0.875rem 0.375rem; } /* Legacy Support */ .glass-bg { background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .hover-bg:hover { background: var(--surface-solid-subtle); } /* ============================================================ 暗夜水晶 (Dark Crystal) — Phase 2: 毛玻璃卡片 + 霓虹按钮 ============================================================ */ /* 卡片升级 — 毛玻璃 + 微光边框 */ html.dark .card, html.dark .card-elevated, html.dark .glass-card { background: rgba(15, 15, 30, 0.75) !important; backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--ghost-border-hover) !important; } /* 霓虹发光按钮 — Primary */ html.dark .btn-primary { background: linear-gradient(135deg, var(--primary-dim), var(--primary)) !important; box-shadow: 0 0 var(--glow-spread) var(--glow-primary), 0 0 40px var(--primary-glow); border: 1px solid rgba(111, 95, 234, 0.4) !important; color: #fff !important; } html.dark .btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--primary-dim)) !important; } /* 霓虹发光按钮 — Danger */ html.dark .btn-danger { background: linear-gradient(135deg, #f87171, #ef4444) !important; box-shadow: 0 0 var(--glow-spread) var(--glow-danger), 0 0 40px rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.4) !important; color: #fff !important; } /* 霓虹发光按钮 — Success */ html.dark .btn-success { background: linear-gradient(135deg, #34d399, #10b981) !important; box-shadow: 0 0 var(--glow-spread) var(--glow-success), 0 0 40px rgba(52, 211, 153, 0.15); border: 1px solid rgba(52, 211, 153, 0.4) !important; } /* 霓虹发光按钮 — Secondary */ html.dark .btn-secondary { background: rgba(20, 20, 35, 0.8) !important; border: 1px solid var(--ghost-border-hover) !important; color: var(--on-surface) !important; } html.dark .btn-secondary:hover { background: rgba(30, 30, 50, 0.9) !important; } /* 脉冲呼吸动画 */ @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px var(--glow-primary); } 50% { box-shadow: 0 0 35px var(--glow-primary), 0 0 60px var(--primary-glow); } } /* ============================================================ 暗夜水晶 — Phase 3: 侧边栏 Dock 放大效果 ============================================================ */ /* Dock 放大效果 — 仅暗色模式 */ /* Dock 效果 — 用 box-shadow 扩大代替 scale（不抖动） */ .nav-item:hover { box-shadow: 0 2px 8px rgba(111, 95, 234, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--ghost-border) !important; } /* 侧边栏活跃指示器 — 发光竖条 */ html.dark .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: linear-gradient(180deg, var(--primary-dim), var(--primary)); border-radius: 0 3px 3px 0; } /* 侧边栏活跃指示器 — 亮色模式 */ html:not(.dark) .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: linear-gradient(180deg, var(--primary), var(--primary-dim)); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px var(--glow-primary); } /* 侧边栏 — 暗色模式立体感 */ html.dark .nav-item:hover { background: var(--surface-container-high) !important; border-color: var(--ghost-border) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; color: var(--on-surface) !important; } html.dark .nav-item.active { background: var(--surface-container-high) !important; color: var(--primary) !important; border-color: var(--ghost-border-hover) !important; box-shadow: 0 2px 12px rgba(111, 95, 234, 0.12), 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* 亮色模式 — 通过基础 .nav-item 规则已经有立体感，不再单独覆盖 */ /* ============================================================ 暗夜水晶 — Phase 4: 微光氛围背景 + Shimmer + Modal 增强 ============================================================ */ /* 渐变微光背景 — 覆盖 #app inline style */ html.dark body, html.dark #app { background: radial-gradient(ellipse at 20% 50%, rgba(111,95,234,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(172,163,255,0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(52,211,153,0.04) 0%, transparent 50%), #060e20 !important; } /* 骨架屏 Shimmer 加载效果 (P1 — 亮/暗模式兼容) */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .shimmer-loading { background: linear-gradient( 90deg, var(--surface-solid-subtle) 25%, var(--surface-glass-hover, rgba(255, 255, 255, 0.08)) 50%, var(--surface-solid-subtle) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 6px; } /* 水晶卡片 — 登录页特效 */ html.dark .crystal-card { background: rgba(6, 14, 32, 0.7) !important; border: 1px solid rgba(111, 95, 234, 0.3) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; } /* 统计数字发光 */ html.dark .stat-glow .text-xl, html.dark .stat-glow .text-3xl, html.dark .stat-glow [class*="md:text-3xl"] { filter: drop-shadow(0 0 8px rgba(111, 95, 234, 0.5)); } /* 渐变文字 — Ethereal Curator 版本 */ html.dark .gradient-text { background: linear-gradient(135deg, #aca3ff 0%, #6f5fea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ 暗夜水晶 — Phase 5: 移动端适配 ============================================================ */ /* 移动端禁用 Dock 放大 (触屏不适用 hover) */ /* 底部导航栏毛玻璃增强 */ html.dark .md\:hidden[class*="fixed"] { background: rgba(6, 14, 32, 0.75) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-color: var(--ghost-border) !important; } /* ============================================================ 暗夜水晶 — Tailwind dark: 覆盖层 Tailwind CDN 生成的 dark: 类会硬编码颜色值, 以下规则确保暗夜水晶主题色覆盖 Tailwind 默认暗色 ============================================================ */ /* 侧边栏 — 通过变量统一控制，不再硬覆盖 */ /* 输入框暗夜水晶化 */ html.dark .input, html.dark select, html.dark textarea { background: var(--surface-container-low) !important; border-color: var(--ghost-border) !important; color: var(--on-surface) !important; } /* Table/列表行 hover */ html.dark .hover\:bg-\[var\(--surface-solid-subtle\)\]:hover { background: var(--ec-info-bg) !important; } /* Tags 暗夜水晶版 */ html.dark .tag-success { background: var(--ec-success-bg) !important; color: var(--ec-success) !important; } html.dark .tag-warning { background: var(--ec-warning-bg) !important; color: var(--ec-warning) !important; } html.dark .tag-danger { background: var(--ec-danger-bg) !important; color: var(--ec-danger) !important; } html.dark .tag-info { background: var(--ec-info-bg) !important; color: var(--ec-info) !important; } /* Modal/对话框暗夜水晶化 */ html.dark .card-elevated, html.dark [class*="rounded-2xl"][class*="shadow"] { background: rgba(15, 25, 48, 0.92) !important; border-color: var(--ghost-border-hover) !important; } /* 滚动条暗夜水晶 */ html.dark ::-webkit-scrollbar-thumb { background: rgba(111, 95, 234, 0.25) !important; } /* 页面级全屏背景覆盖 (支付返回页等) */ html.dark [class*="dark\:bg-\[#1e1e1e\]"], html.dark [class*="dark\:bg-\[#1c1c1e\]"] { background: #060e20 !important; } /* 覆盖 Tailwind toast 硬编码色 */ html.dark [class*="dark\:bg-green-900"] { background: rgba(52, 211, 153, 0.15) !important; } html.dark [class*="dark\:border-green-800"] { border-color: rgba(52, 211, 153, 0.3) !important; } html.dark [class*="dark\:text-green-200"], html.dark [class*="dark\:text-green-300"] { color: #34d399 !important; } html.dark [class*="dark\:bg-red-900"] { background: rgba(248, 113, 113, 0.15) !important; } html.dark [class*="dark\:border-red-800"] { border-color: rgba(248, 113, 113, 0.3) !important; } html.dark [class*="dark\:text-red-200"], html.dark [class*="dark\:text-red-300"] { color: #f87171 !important; } html.dark [class*="dark\:bg-orange-900"] { background: rgba(251, 191, 36, 0.15) !important; } html.dark [class*="dark\:border-orange-800"] { border-color: rgba(251, 191, 36, 0.3) !important; } html.dark [class*="dark\:text-orange-200"] { color: #fbbf24 !important; } html.dark [class*="dark\:bg-blue-900"] { background: var(--ec-info-bg) !important; } html.dark [class*="dark\:border-blue-800"] { border-color: rgba(111, 95, 234, 0.3) !important; } html.dark [class*="dark\:text-blue-200"] { color: var(--primary) !important; } /* Toast 通知 — Ethereal Curator 版 */ .toast-success { background: var(--ec-success-bg); border-color: rgba(16, 185, 129, 0.2); color: var(--ec-success); } html.dark .toast-success { background: var(--ec-success-bg) !important; border-color: rgba(52, 211, 153, 0.3) !important; color: var(--ec-success) !important; } .toast-error { background: var(--ec-danger-bg); border-color: rgba(239, 68, 68, 0.2); color: var(--ec-danger); } html.dark .toast-error { background: var(--ec-danger-bg) !important; border-color: rgba(251, 113, 133, 0.3) !important; color: var(--ec-danger) !important; } .toast-warning { background: var(--ec-warning-bg); border-color: rgba(245, 158, 11, 0.2); color: var(--ec-warning); } html.dark .toast-warning { background: var(--ec-warning-bg) !important; border-color: rgba(251, 191, 36, 0.3) !important; color: var(--ec-warning) !important; } .toast-info { background: var(--ec-info-bg); border-color: rgba(111, 95, 234, 0.2); color: var(--ec-info); } html.dark .toast-info { background: var(--ec-info-bg) !important; border-color: rgba(111, 95, 234, 0.3) !important; color: var(--ec-info) !important; } /* 连接信息瓦片 — 和排行榜卡片一致的叠层底色 */ .connect-tile { background: var(--surface-container-low); border: 1px solid var(--ghost-border); transition: border-color 200ms ease-out; } .connect-tile:hover { border-color: var(--ghost-border-hover); } html.dark .connect-tile { background: var(--surface-container-low); border-color: var(--ghost-border); } html.dark .connect-tile:hover { border-color: rgba(111, 95, 234, 0.25); } /* 教程资源卡片内组件 — 叠层底色 */ .res-icon-tile { background: var(--surface-container-low); border: 1px solid var(--ghost-border); color: var(--accent-primary); } .res-pill { background: var(--surface-container-low) !important; border: 1px solid var(--ghost-border) !important; color: var(--accent-primary) !important; transition: border-color 200ms ease-out; } .res-pill:hover { border-color: var(--ghost-border-hover) !important; } .res-seg { background: var(--surface-container-low); border: 1px solid var(--ghost-border); } /* 暗色 tone 覆盖 — 与 Ethereal Curator 配色一致 */ html.dark .tone-info-weak { background: var(--ec-info-bg) !important; border-color: rgba(111, 95, 234, 0.25) !important; } html.dark .tone-success-weak { background: var(--ec-success-bg) !important; border-color: rgba(52, 211, 153, 0.25) !important; } /* ============================================================ Phase 6: ReactBits-Inspired UI Enhancements 灵感来源: SpotlightCard · GlassSurface · BorderGlow · GlassIcons ============================================================ */ /* ----------------------------------------------------------- 6.1 SpotlightCard — 鼠标追踪聚光灯 灵感: reactbits.dev/components/spotlight-card 卡片 hover 时，鼠标位置处出现柔和的径向渐变聚光 需配合 JS 设置 --mouse-x / --mouse-y (见 index.html) ----------------------------------------------------------- */ .card-elevated, .glass-card { --mouse-x: 50%; --mouse-y: 50%; } /* 排除 .crystal-card 避免与 7.2 渐变边框的 ::after 冲突 */ html.dark .card-elevated:not(.crystal-card)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), rgba(111, 95, 234, 0.1), transparent 40% ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1; } html.dark .card-elevated:not(.crystal-card):hover::after { opacity: 1; } /* 亮色模式 — 更柔和的聚光 (同样排除 crystal-card) */ html:not(.dark) .card-elevated:not(.crystal-card)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), rgba(111, 95, 234, 0.04), transparent 40% ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1; } html:not(.dark) .card-elevated:not(.crystal-card):hover::after { opacity: 1; } /* ----------------------------------------------------------- 6.2 GlassSurface — 多层 inset shadow 增强玻璃深度 灵感: reactbits.dev/components/glass-surface 在暗色模式下为卡片增加多层 inset shadow，模拟真实玻璃折射 ----------------------------------------------------------- */ html.dark .card, html.dark .card-elevated, html.dark .glass-card { box-shadow: 0 0 var(--glow-spread) var(--primary-glow), 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 3px 1px rgba(255, 255, 255, 0.03), inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important; } html.dark .card:hover, html.dark .card-elevated:hover, html.dark .glass-card:hover { box-shadow: 0 0 35px rgba(111, 95, 234, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 4px 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important; border-color: rgba(111, 95, 234, 0.4) !important; transform: translateY(-2px); } /* 亮色模式 — GlassSurface 风格 inset shadow */ html:not(.dark) .card-elevated, html:not(.dark) .glass-card { box-shadow: 0 0 20px rgba(111, 95, 234, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 3px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.03); } html:not(.dark) .card-elevated:hover, html:not(.dark) .glass-card:hover { box-shadow: 0 0 30px rgba(111, 95, 234, 0.1), 0 8px 28px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 4px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.04); border-color: rgba(111, 95, 234, 0.2); transform: translateY(-2px); } /* ----------------------------------------------------------- 6.3 Button Polish — 按压反馈 + 弹簧动画 灵感: GlassIcons 的 3D 变换 + Stepper 的药丸按钮 ----------------------------------------------------------- */ /* 按压反馈 — 缩放 + 快速过渡 */ .btn:active { transform: scale(0.96) translateY(0px) !important; filter: brightness(0.95); transition-duration: 0.08s !important; } /* Primary 按钮增强 hover 发光 */ html.dark .btn-primary:hover { box-shadow: 0 0 25px var(--glow-primary), 0 0 50px rgba(111, 95, 234, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; transform: translateY(-2px) scale(1.01); } html.dark .btn-primary:active { box-shadow: 0 0 10px var(--glow-primary), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } /* Danger 按钮增强 hover */ html.dark .btn-danger:hover { box-shadow: 0 0 25px var(--glow-danger), 0 0 50px rgba(248, 113, 113, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; transform: translateY(-2px) scale(1.01); } /* Success 按钮增强 hover */ html.dark .btn-success:hover { box-shadow: 0 0 25px var(--glow-success), 0 0 50px rgba(52, 211, 153, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; transform: translateY(-2px) scale(1.01); } /* Secondary 按钮 — hover 发光边框 (BorderGlow 简化版) */ html.dark .btn-secondary:hover { border-color: rgba(111, 95, 234, 0.4) !important; box-shadow: 0 0 15px rgba(111, 95, 234, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transform: translateY(-1px); } /* 亮色模式按钮 hover 提升 */ html:not(.dark) .btn-primary:hover { box-shadow: 0 0 20px var(--glow-primary), 0 4px 16px rgba(111, 95, 234, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-2px) scale(1.01); } html:not(.dark) .btn-danger:hover { box-shadow: 0 0 20px var(--glow-danger), 0 4px 16px rgba(239, 68, 68, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-2px) scale(1.01); } html:not(.dark) .btn-success:hover { box-shadow: 0 0 20px var(--glow-success), 0 4px 16px rgba(16, 185, 129, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-2px) scale(1.01); } /* ----------------------------------------------------------- 6.4 Input Focus Enhancement — BorderGlow 风格聚焦环 灵感: reactbits.dev/components/border-glow 输入框聚焦时显示多层发光环，取代单调的 box-shadow ----------------------------------------------------------- */ html.dark .input:focus, html.dark select:focus, html.dark textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow), 0 0 15px rgba(111, 95, 234, 0.2), 0 0 30px rgba(111, 95, 234, 0.08), inset 0 0 0 1px rgba(111, 95, 234, 0.1) !important; transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important; } html.dark .login-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(111, 95, 234, 0.2), 0 0 20px rgba(111, 95, 234, 0.25), 0 0 40px rgba(111, 95, 234, 0.1) !important; } /* 亮色模式输入框增强 */ html:not(.dark) .input:focus, html:not(.dark) select:focus, html:not(.dark) textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow), 0 0 12px rgba(111, 95, 234, 0.08); transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important; } /* ----------------------------------------------------------- 6.5 Tag / Badge 微光效果 灵感: GlassSurface 的多层阴影 + GlassIcons 的光泽 为状态标签添加内嵌光泽和 hover 微交互 注: HTML 中 tag 类名为 tag-success / tag-danger 等，无基础 .tag 类 ----------------------------------------------------------- */ .tag, .tag-success, .tag-danger, .tag-warning, .tag-info { transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out; position: relative; overflow: hidden; } .tag::before, .tag-success::before, .tag-danger::before, .tag-warning::before, .tag-info::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50% ); pointer-events: none; } html.dark .tag::before, html.dark .tag-success::before, html.dark .tag-danger::before, html.dark .tag-warning::before, html.dark .tag-info::before { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50% ); } /* ----------------------------------------------------------- 6.7 Sidebar Nav Active — 增强活跃指示器发光 灵感: Dock 组件的项目样式 + BorderGlow 的边缘发光 ----------------------------------------------------------- */ html.dark .nav-item.active::before { box-shadow: 0 0 10px var(--glow-primary), 0 0 20px rgba(111, 95, 234, 0.2); } /* Nav item — 只过渡背景和颜色，不过渡 transform（防止抖动） */ .nav-item { transition: background 200ms ease-out, color 200ms ease-out; } /* ----------------------------------------------------------- 6.8 Modal 增强 — 更深的毛玻璃 + 微光 灵感: GlassSurface 的 fallback 多层阴影 ----------------------------------------------------------- */ html.dark .modal-overlay { background: rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(12px) saturate(120%) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; } /* ----------------------------------------------------------- 6.9 Scrollbar 增强 — hover 时发光 ----------------------------------------------------------- */ html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(111, 95, 234, 0.45) !important; box-shadow: 0 0 6px rgba(111, 95, 234, 0.3); } /* ----------------------------------------------------------- 6.10 Selection 增强 — 更鲜明的选中色 ----------------------------------------------------------- */ html.dark ::selection { background: rgba(111, 95, 234, 0.35); color: var(--on-surface); } html:not(.dark) ::selection { background: rgba(111, 95, 234, 0.15); color: var(--on-surface); } /* ----------------------------------------------------------- 6.11 水晶登录卡片 — 增强发光层次 灵感: BorderGlow 的多层 mesh-gradient 发光 ----------------------------------------------------------- */ html.dark .crystal-card { box-shadow: 0 0 50px rgba(111, 95, 234, 0.15), 0 0 100px rgba(111, 95, 234, 0.08), 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 3px 1px rgba(255, 255, 255, 0.04) !important; } /* ----------------------------------------------------------- 6.12 Table Row Hover — 聚光灯行效果 ----------------------------------------------------------- */ html.dark tr { transition: background 200ms ease-out; } html.dark tbody tr:hover td { background: rgba(111, 95, 234, 0.06) !important; } html:not(.dark) tbody tr:hover td { background: rgba(111, 95, 234, 0.04) !important; } /* ============================================================ Phase 7: UIverse-Inspired UI Enhancements 灵感来源: uiverse.io — Shine Sweep · Gradient Border · Loading ============================================================ */ /* ----------------------------------------------------------- 7.1 Shine Sweep — 按钮 hover 时光带扫过 灵感: uiverse.io 热门按钮组件 为 .btn-primary 添加光带扫过特效 ----------------------------------------------------------- */ /* ═══ 按钮鼠标跟踪光晕（全局） ═══ */ .btn { position: relative; overflow: hidden; --btn-x: 50%; --btn-y: 50%; } /* 光晕层 — 跟随鼠标位置 */ .btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 120px circle at var(--btn-x) var(--btn-y), rgba(255, 255, 255, 0.25), transparent 60% ); opacity: 0; transition: opacity 200ms ease-out; pointer-events: none; z-index: 2; } .btn:hover::before { opacity: 1; } /* 按钮类型特定光晕色 */ .btn-primary::before { background: radial-gradient( 120px circle at var(--btn-x) var(--btn-y), rgba(172, 163, 255, 0.35), transparent 60% ); } .btn-danger::before { background: radial-gradient( 120px circle at var(--btn-x) var(--btn-y), rgba(251, 113, 133, 0.3), transparent 60% ); } .btn-success::before { background: radial-gradient( 120px circle at var(--btn-x) var(--btn-y), rgba(52, 211, 153, 0.3), transparent 60% ); } .btn-secondary::before { background: radial-gradient( 120px circle at var(--btn-x) var(--btn-y), rgba(111, 95, 234, 0.15), transparent 60% ); } /* ----------------------------------------------------------- 7.2 Animated Gradient Border — 动态渐变边框 灵感: uiverse.io 的 animated border glow card 用于登录卡片、重要弹窗等需要突出的元素 用法: 给元素添加 class="gradient-border-wrap" ----------------------------------------------------------- */ html.dark .crystal-card { position: relative; } html.dark .crystal-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(111, 95, 234, 0.5), rgba(172, 163, 255, 0.3), rgba(52, 211, 153, 0.2), rgba(111, 95, 234, 0.5) ); background-size: 300% 300%; animation: gradient-border-flow 6s ease infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } @keyframes gradient-border-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ----------------------------------------------------------- 7.3 Gradient Shift 按钮 — 背景渐变流动 灵感: uiverse.io gradient animated button 购买/CTA 类按钮的背景渐变缓慢移动 ----------------------------------------------------------- */ .buy-plan-btn { background-size: 200% 200% !important; animation: gradient-shift 4s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ----------------------------------------------------------- 7.4 Pulse Dot — 在线状态脉冲指示器 灵感: uiverse.io pulse loader 可用于服务器在线状态等指示 用法: ----------------------------------------------------------- */ .pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; } .pulse-dot::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } .pulse-dot--success { background: var(--apple-green); color: var(--apple-green); } .pulse-dot--danger { background: var(--apple-red); color: var(--apple-red); } .pulse-dot--warning { background: var(--apple-orange); color: var(--apple-orange); } .pulse-dot--info { background: var(--apple-blue); color: var(--apple-blue); } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } /* ----------------------------------------------------------- 7.5 Focus Ring — 全局聚焦可见性增强 灵感: UIverse 的 Accessibility 最佳实践 统一所有交互元素的 focus-visible 样式 ----------------------------------------------------------- */ html.dark :focus-visible { outline: 2px solid rgba(111, 95, 234, 0.6); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(111, 95, 234, 0.15); } html:not(.dark) :focus-visible { outline: 2px solid rgba(111, 95, 234, 0.6); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(111, 95, 234, 0.1); } /* ============================================================ Phase 8: P1 — 表格重构 + 骨架屏 + 滚动渐变 ============================================================ */ /* ----------------------------------------------------------- 8.1 表格统一系统 ----------------------------------------------------------- */ /* 表格分隔线修复 */ tbody { border-color: var(--border-subtle); } /* 斑马纹 — subtle purple tint */ tbody tr:nth-child(even) { background: rgba(111, 95, 234, 0.02); } html.dark tbody tr:nth-child(even) { background: rgba(111, 95, 234, 0.03); } /* 选中行覆盖斑马纹 */ tbody tr.row-selected, tbody tr.row-selected:nth-child(even) { background: var(--ec-info-bg) !important; } /* 表头增强 — ghost separators */ thead th { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background: var(--surface-container-low); border-bottom: 1px solid var(--ghost-border); padding: 12px 16px; } tbody td { border-bottom: 1px solid var(--ghost-border); } /* 统一空状态 */ .table-empty-state { padding: 3rem 1rem; text-align: center; color: var(--text-tertiary); } .table-empty-state i { display: block; font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.4; } /* ----------------------------------------------------------- 8.2 滚动渐变遮罩 (ReactBits AnimatedList inspired) 配合 JS v-scroll-fade 指令使用 mask-image ----------------------------------------------------------- */ .scroll-fade-y { -webkit-mask-image: linear-gradient(to bottom, black, black); mask-image: linear-gradient(to bottom, black, black); transition: -webkit-mask-image 0.3s, mask-image 0.3s; } /* 隐藏侧边栏导航滚动条 */ .scroll-fade-y::-webkit-scrollbar { display: none; } .scroll-fade-y.fade-top { -webkit-mask-image: linear-gradient(to bottom, transparent, black 28px, black); mask-image: linear-gradient(to bottom, transparent, black 28px, black); } .scroll-fade-y.fade-bottom { -webkit-mask-image: linear-gradient(to top, transparent, black 28px, black); mask-image: linear-gradient(to top, transparent, black 28px, black); } .scroll-fade-y.fade-top.fade-bottom { -webkit-mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent); } /* ============================================================ Phase 9: P2 — Pulse Dot 变体 + 渐变文字动画 ============================================================ */ /* Pulse dot 静态/小尺寸变体 */ .pulse-dot--static::before { animation: none; display: none; } .pulse-dot--sm { width: 6px; height: 6px; } .pulse-dot--sm::before { inset: -2px; } /* Gradient Text 动画版 (用于侧边栏 App Name) */ .gradient-text-animated { background: linear-gradient(135deg, var(--primary), #aca3ff, var(--ec-success), var(--primary)); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 4s ease infinite; display: inline-block; } html.dark .gradient-text-animated { background: linear-gradient(135deg, #aca3ff, #6f5fea, #34d399, #aca3ff); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 4s ease infinite; } /* ============================================================ Phase 10: 酷炫视觉效果 — ReactBits + UIverse 精华 GlitchText · ChromaSpotlight · SpinBorder · 3D Tilt NoiseTexture · NeonGlow · Aurora · LiquidButton ============================================================ */ /* ----------------------------------------------------------- 10.1 Conic Spinning Border — 旋转彩虹边框 灵感: UIverse animated-border-button + ReactBits BorderGlow 用 @property 实现平滑旋转的锥形渐变边框 用法: class="spin-border" ----------------------------------------------------------- */ @property --spin-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes spin-rotate { to { --spin-angle: 360deg; } } .spin-border { position: relative; z-index: 0; } .spin-border::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--spin-angle), #aca3ff, #6f5fea, #34d399, #fbbf24, #fb7185, #aca3ff ); animation: spin-rotate 3s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } /* 暗模式发光增强 */ html.dark .spin-border::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: conic-gradient( from var(--spin-angle), #aca3ff, #6f5fea, #34d399, #fbbf24, #fb7185, #aca3ff ); animation: spin-rotate 3s linear infinite; filter: blur(16px); opacity: 0.4; pointer-events: none; z-index: -2; } /* ----------------------------------------------------------- 10.2 Glitch Text — 故障风文字效果 灵感: reactbits.dev/text-animations/glitch-text 用法: class="glitch-text" data-text="文字内容" ----------------------------------------------------------- */ .glitch-text { position: relative; font-weight: 900; color: #fff; user-select: none; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .glitch-text::before { text-shadow: -3px 0 #ff00ea; animation: glitch-shift 2.5s infinite linear alternate-reverse; clip-path: inset(0 0 65% 0); } .glitch-text::after { text-shadow: 3px 0 #00ffff; animation: glitch-shift 3s infinite linear alternate-reverse; clip-path: inset(65% 0 0 0); } @keyframes glitch-shift { 0% { clip-path: inset(40% 0 20% 0); transform: translate(0); } 20% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 2px); } 40% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); } 60% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 1px); } 80% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); } 100% { clip-path: inset(5% 0 75% 0); transform: translate(0); } } /* Hover 才触发故障 (默认静态) */ .glitch-text-hover::before, .glitch-text-hover::after { opacity: 0; animation: none; } .glitch-text-hover:hover::before { opacity: 1; animation: glitch-shift 2.5s infinite linear alternate-reverse; } .glitch-text-hover:hover::after { opacity: 1; animation: glitch-shift 3s infinite linear alternate-reverse; } /* ----------------------------------------------------------- 10.3 Chroma Spotlight — 彩色聚光灯 灵感: ReactBits ChromaGrid + SpotlightCard 替代之前单色的聚光，改为彩虹色跟随鼠标 ----------------------------------------------------------- */ html.dark .card-elevated:not(.crystal-card)::after { background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), rgba(111, 95, 234, 0.15), rgba(172, 163, 255, 0.08) 25%, rgba(52, 211, 153, 0.04) 50%, transparent 70% ) !important; } /* ----------------------------------------------------------- 10.4 Noise / Grain Texture — 噪点纹理覆盖 灵感: ReactBits ReflectiveCard 的 noise overlay 为暗色模式添加微妙噪点，增加质感深度 ----------------------------------------------------------- */ html.dark #app::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; pointer-events: none; z-index: 9999; mix-blend-mode: overlay; } /* ----------------------------------------------------------- 10.5 Neon Glow Numbers — 霓虹数字 灵感: UIverse neon text effects 仪表盘数字 + 统计数字的脉冲发光 ----------------------------------------------------------- */ html.dark .stat-glow .font-mono, html.dark .stat-glow [class*="font-black"] { text-shadow: 0 0 7px currentColor, 0 0 20px currentColor, 0 0 42px rgba(111, 95, 234, 0.3); transition: text-shadow 200ms ease-out; } html.dark .stat-glow:hover .font-mono, html.dark .stat-glow:hover [class*="font-black"] { text-shadow: 0 0 10px currentColor, 0 0 30px currentColor, 0 0 60px rgba(111, 95, 234, 0.4), 0 0 100px rgba(111, 95, 234, 0.2); } /* ----------------------------------------------------------- 10.6 3D Card Tilt — 透视倾斜效果 灵感: ReactBits TiltedCard 配合 JS 鼠标追踪实现卡片 3D 倾斜 用法: class="tilt-card" ----------------------------------------------------------- */ .tilt-card { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform 0.3s ease; will-change: transform; } .tilt-card:hover { transition: transform 0.1s ease; } /* 反光层 */ .tilt-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 55%, transparent 60% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; } .tilt-card:hover::before { opacity: 1; } /* ----------------------------------------------------------- 10.7 Aurora Background — 极光渐变背景 灵感: ReactBits Aurora background 暗色模式下的动态极光色彩 ----------------------------------------------------------- */ html.dark body::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 20% 50%, rgba(111, 95, 234, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(172, 163, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(52, 211, 153, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(251, 113, 133, 0.04) 0%, transparent 40%); animation: aurora-drift 20s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes aurora-drift { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(2%, -3%) rotate(1deg); } 50% { transform: translate(-1%, 2%) rotate(-0.5deg); } 75% { transform: translate(3%, 1%) rotate(0.5deg); } 100% { transform: translate(-2%, -1%) rotate(-1deg); } } /* 液态填充已替换为鼠标跟踪光晕（见 7.1 节） */ /* Button active state shadow — light mode */ html:not(.dark) .btn-primary:active { box-shadow: 0 0 8px var(--glow-primary), 0 1px 4px rgba(0, 0, 0, 0.2) !important; } /* ----------------------------------------------------------- 10.9 TrueFocus 聚焦框 — 角落括号指示器 灵感: reactbits.dev/text-animations/true-focus 用于高亮当前激活的卡片或区域 用法: class="focus-frame" ----------------------------------------------------------- */ .focus-frame { position: relative; } .focus-frame::before, .focus-frame::after, .focus-frame > .corner-br::before, .focus-frame > .corner-br::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent-primary); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; filter: drop-shadow(0 0 4px var(--accent-primary)); } .focus-frame::before { top: -4px; left: -4px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; } .focus-frame::after { top: -4px; right: -4px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; } .focus-frame:hover::before, .focus-frame:hover::after { opacity: 1; } /* ----------------------------------------------------------- 10.10 Floating Animation — 悬浮动画 灵感: UIverse floating elements 用于装饰性图标、Logo 等 ----------------------------------------------------------- */ @keyframes float-gentle { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(0.5deg); } 75% { transform: translateY(4px) rotate(-0.5deg); } } .float-anim { animation: float-gentle 6s ease-in-out infinite; } .float-anim-delay { animation: float-gentle 6s ease-in-out infinite; animation-delay: -3s; } /* ----------------------------------------------------------- 10.11 Hover Ripple — 点击涟漪效果 灵感: UIverse ripple buttons ----------------------------------------------------------- */ @keyframes ripple-expand { to { transform: scale(4); opacity: 0; } } .btn .ripple-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: ripple-expand 0.6s ease-out; pointer-events: none; } /* ----------------------------------------------------------- 10.12 Glassmorphism Depth Layers — 多层玻璃深度 灵感: UIverse glassmorphism + ReactBits GlassSurface 给登录卡片/重要弹窗添加多层玻璃背景 ----------------------------------------------------------- */ html.dark .crystal-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 30% 20%, rgba(111, 95, 234, 0.08), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(172, 163, 255, 0.06), transparent 50%); pointer-events: none; z-index: 0; } /* ═══ Right Decorative Panel — always dark ═══ */ .deco-panel { width: 340px; position: fixed; top: 0; bottom: 0; right: 0; z-index: 10; background: linear-gradient(165deg, #091328, #060e20); color: #dee5ff; display: flex; flex-direction: column; overflow-y: auto; border-left: 1px solid rgba(64,72,93,0.1); transition: transform 200ms ease-out; } .deco-panel::-webkit-scrollbar { width: 4px; } .deco-panel::-webkit-scrollbar-thumb { background: rgba(172,163,255,0.15); border-radius: 99px; } .dp-inner { padding: var(--space-xl) var(--space-lg); flex: 1; display: flex; flex-direction: column; gap: var(--space-md); } .dp-label { font-size: var(--font-size-xs); font-weight: 700; color: #aca3ff; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; } .dp-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(64,72,93,0.1); border-radius: var(--card-radius); padding: var(--card-padding-sm); transition: border-color 200ms ease-out; } .dp-card:hover { border-color: rgba(172,163,255,0.2); } .dp-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(172,163,255,0.12), transparent); } .dp-poster { width: 56px; height: 78px; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,0.35); cursor: pointer; transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out; flex-shrink: 0; } .dp-poster:hover { transform: translateY(-4px) scale(1.05); } .dp-poster img { width: 100%; height: 100%; object-fit: cover; } .dp-stat-value { font-size: var(--font-size-xl); font-weight: 800; color: #aca3ff; } .dp-stat-label { font-size: var(--font-size-xs); color: #a3aac4; } .dp-act-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .dp-act-text { font-size: var(--font-size-sm); color: #a3aac4; line-height: 1.5; } .dp-act-text strong { color: #dee5ff; } .dp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #aca3ff, #6f5fea); color: #fff; padding: var(--space-sm); border-radius: 9999px; font-size: var(--font-size-md); font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(111,95,234,0.25); transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out; margin-top: auto; } .dp-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(111,95,234,0.35); } @media (max-width: 1099px) { .deco-panel { display: none !important; } } @media (min-width: 1100px) { .main-with-deco { margin-right: 340px; } } /* LIVE ticker scroll */ @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ Global Consistency Pass — Glass Depth for All Components ============================================================ */ /* ═══ FIX 1: Sub-card tiles — auto depth for rounded containers inside cards ═══ */ .card [class*="rounded-xl"], .card [class*="rounded-2xl"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.03); border-color: var(--ghost-border) !important; } html.dark .card [class*="rounded-xl"], html.dark .card [class*="rounded-2xl"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.2); } /* ═══ FIX 3: Soften all divider lines ═══ */ .border-t, .border-b { border-color: var(--ghost-border) !important; } [class*="divide-y"] > * + * { border-color: var(--ghost-border) !important; } [class*="border-[var(--border-color)]"] { border-color: var(--ghost-border) !important; } /* ═══ FIX 5: Toast notifications — glass depth ═══ */ .toast-success, .toast-error, .toast-warning, .toast-info { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.dark .toast-success, html.dark .toast-error, html.dark .toast-warning, html.dark .toast-info { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ═══ FIX 10: Settings section containers — depth for bordered rounded-xl inside cards ═══ */ .card [class*="rounded-xl"][class*="border"] { background: var(--surface-container-low); } /* ═══ FIX 11: 手机端管理表格紧凑化 — 减小内边距+允许换行，杜绝横向滑动 ═══ */ @media (max-width: 767px) { .table-compact th, .table-compact td { padding: 0.5rem 0.5rem !important; white-space: normal !important; word-break: break-word; } .table-compact { font-size: 0.8125rem; } }