/* ============================================================ 落秋阁 APP — 全站唯一配色/设计令牌文件（Single Source of Truth） ------------------------------------------------------------ ✦ 全站只改这一个文件，就能统一换肤、换色、换质感。 ✦ 所有页面 / 所有 CSS / 所有内联样式，颜色都应引用这里的变量。 ✦ 命名规则：--c-* 颜色 --s-* 间距 --r-* 圆角 --e-* 阴影/特效 ✦ 换主题：把 改成 blue/dark-gold/forest... 即可。 （右下角 🎨 皮肤面板会自动记住用户选择，无需手改） ============================================================ */ /* ========== 1) 基础令牌（与主题无关，全站固定） ========== */ :root{ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 26px; --s-5: 38px; --e-blur: 14px; --e-glow: 10px; /* 语义功能色（跨主题通用） */ --c-success: #3a9060; --c-warning: #d99a3a; --c-danger: #c2453a; --c-info: #4a80d4; } /* ============================================================ 2) 主题皮肤（默认 = 翡翠绿 emerald） 每套皮肤定义 9 个语义色，全站元素都从这里取色： --c-bg 背景 / --c-surface 卡片 / --c-surface-2 输入框 --c-border 描边 / --c-text 主文字 / --c-text-2 次要文字 --c-accent 强调色 / --c-accent-2 强调深色 / --c-on-accent 强调上的文字 ============================================================ */ /* 翡翠绿 emerald */ [data-theme="emerald"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(80,180,120,.07), transparent 60%), linear-gradient(160deg,#f2faf6,#ecf7f0 46%,#f5faf7); --c-surface: linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,248,240,.9)); --c-surface-2: #ffffff; --c-border: rgba(80,180,120,.24); --c-text: #1a2a20; --c-text-2: #4a6a50; --c-accent: #3a9060; --c-accent-2: #276a44; --c-on-accent: #ffffff; } /* 暖金 · 经典 */ [data-theme="warm"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(214,182,106,.06), transparent 60%), radial-gradient(1000px 540px at 94% -4%, rgba(180,150,100,.04), transparent 58%), linear-gradient(160deg,#fdfcf9,#f7f4ee 46%,#faf8f3); --c-surface: linear-gradient(145deg, rgba(255,253,248,.95), rgba(250,245,237,.9)); --c-surface-2: #fffefc; --c-border: rgba(214,182,106,.22); --c-text: #3a2e1a; --c-text-2: #8a754e; --c-accent: #c9a227; --c-accent-2: #9c7130; --c-on-accent: #191105; } /* 蓝 · 科技（默认皮肤，未设置 data-theme 时生效） */ :root, [data-theme="blue"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(100,149,237,.07), transparent 60%), linear-gradient(160deg,#f0f4fa,#e8eef6 46%,#f5f7fb); --c-surface: linear-gradient(145deg, rgba(255,255,255,.95), rgba(235,240,248,.9)); --c-surface-2: #ffffff; --c-border: rgba(100,149,237,.24); --c-text: #1a2a3a; --c-text-2: #4a6a8a; --c-accent: #4a80d4; --c-accent-2: #2f5aa0; --c-on-accent: #ffffff; } /* 紫韵 · 社交/装扮 */ [data-theme="purple"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(140,100,200,.07), transparent 60%), linear-gradient(160deg,#f8f6fa,#f2eef6 46%,#faf8fc); --c-surface: linear-gradient(145deg, rgba(255,255,255,.95), rgba(242,238,248,.9)); --c-surface-2: #ffffff; --c-border: rgba(160,120,220,.24); --c-text: #2a1a3a; --c-text-2: #5a3a6a; --c-accent: #8b5cf6; --c-accent-2: #6a3fce; --c-on-accent: #ffffff; } /* 黑金 · 高端旗舰（深色） */ [data-theme="dark-gold"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(214,182,106,.05), transparent 60%), linear-gradient(160deg,#0a0a0a,#111 46%,#0d0d0d); --c-surface: linear-gradient(145deg, rgba(30,28,22,.9), rgba(24,22,18,.82)); --c-surface-2: rgba(40,36,28,.9); --c-border: rgba(184,148,47,.3); --c-text: #e7d29a; --c-text-2: #9a8656; --c-accent: #d6b66a; --c-accent-2: #9c7130; --c-on-accent: #191105; } /* 暗夜 · 蓝黑（深色） */ [data-theme="dark"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(80,120,200,.05), transparent 60%), linear-gradient(160deg,#10151a,#151a22 46%,#10151a); --c-surface: linear-gradient(145deg, rgba(26,32,40,.9), rgba(20,26,34,.82)); --c-surface-2: rgba(30,38,48,.9); --c-border: rgba(100,150,200,.26); --c-text: #c8d6e5; --c-text-2: #7a8ea8; --c-accent: #6ea8fe; --c-accent-2: #3f7ad0; --c-on-accent: #0a0f16; } /* 墨绿 · 森林（深色·绿黑调） */ [data-theme="forest"]{ --c-bg: radial-gradient(1200px 620px at 16% -8%, rgba(60,180,100,.05), transparent 60%), linear-gradient(160deg,#0d1410,#101a15 46%,#0d1410); --c-surface: linear-gradient(145deg, rgba(20,32,26,.9), rgba(16,28,22,.82)); --c-surface-2: rgba(26,40,32,.9); --c-border: rgba(60,160,90,.26); --c-text: #c0d8c8; --c-text-2: #609070; --c-accent: #50b870; --c-accent-2: #2f8a4c; --c-on-accent: #06120a; } /* 极简白 */ [data-theme="minimal-white"]{ --c-bg: linear-gradient(160deg,#ffffff,#fcfcfc 46%,#f8f8f8); --c-surface: rgba(255,255,255,.96); --c-surface-2: #ffffff; --c-border: rgba(0,0,0,.08); --c-text: #1a1a1a; --c-text-2: #6a6a6a; --c-accent: #333333; --c-accent-2: #000000; --c-on-accent: #ffffff; } /* ============================================================ 3) 全站基础应用（让变量真正生效到通用元素） —— 具体组件仍在各自 CSS 内用 var(--c-*)，此处兜底最常用元素 —— ============================================================ */ body{ background: var(--c-bg) !important; color: var(--c-text); } .muted, .hero-desc, .card p{ color: var(--c-text-2); } .card, .auth-card, .modal-card, .hero-panel, .welcome-strip, .account-card, .tool-card, .zone-card, .func-card, .feat-card, .admin-panel, .admin-stats .stat-card, .profile-info-card{ background: var(--c-surface); border-color: var(--c-border); } .gold-btn, .tab.active, .filter-tabs button.active{ background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)) !important; color: var(--c-on-accent) !important; } .ghost-btn{ color: var(--c-accent); border-color: var(--c-border); } .badge, .official-seal{ color: var(--c-accent); border-color: var(--c-border); } /* 品牌标题渐变统一走强调色 */ .brand h1, .hero-title, .topbar h2, .admin-hero h1, .admin-logo{ background: linear-gradient(92deg, var(--c-accent), var(--c-accent-2)) !important; -webkit-background-clip: text; background-clip: text; color: transparent; } /* 输入框统一底色 */ .field input, .field select, .field textarea, .search-box input, .nickname-edit input{ background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); } /* ============================================================ 4) 兼容旧变量：把历史上散落的 --lq-* / --t-* 全部指向新令牌 —— 旧 CSS 不用一次性重写，也能立刻跟着换肤 —— ============================================================ */ :root{ --lq-gold: var(--c-accent); --lq-gold-2: var(--c-accent-2); --lq-gold-deep: var(--c-accent-2); --lq-line: var(--c-border); --lq-radius: var(--r-lg); --t-bg: var(--c-bg); --t-body-bg: var(--c-bg); --t-text: var(--c-text); --t-text-muted: var(--c-text-2); --t-card-bg: var(--c-surface); --t-card-border: var(--c-border); --t-gold: var(--c-accent); }