/* ============================================================ 多套主題皮膚 — 由後台「資料維護 → 主題」切換 每套覆蓋 :root 變數,客人只看到套用後的外觀 透過 生效 ============================================================ */ /* ===== 1. 午夜金 midnight-gold(預設,現有風格:精品深藍金)===== */ /* 不需覆蓋,使用 style.css 的 :root 預設值 */ /* ===== 2. 科技藍 cyber-blue(冷冽科技感、電子藍青)===== */ [data-theme="cyber-blue"] { --bg:#070B12; --bg-deep:#04070C; --surface:#0E1826; --surface2:#152234; --surface3:#1D2E45; --line:#22374F; --line-soft:rgba(90,200,250,.08); --text:#E6F1FA; --text-dim:#A9C4DA; --muted:#6E8AA3; --gold:#39C3E8; --gold-hi:#7EE0FF; --gold-dim:#2A94B4; --gold-deep:#1B5E75; --gold-ink:#04141B; --ok:#4FE3B0; --warn:#F5C451; --danger:#FF6B7A; --info:#5AB0FF; --r-sm:6px; --r:10px; --r-lg:14px; } [data-theme="cyber-blue"] .brand .coin { color:#7EE0FF; } [data-theme="cyber-blue"] .btn.primary { box-shadow:0 0 16px -4px rgba(57,195,232,.6); } /* ===== 3. 電競紫 esport-purple(炫麗電競、霓虹紫粉)===== */ [data-theme="esport-purple"] { --bg:#0C0814; --bg-deep:#07040D; --surface:#170F26; --surface2:#1F1533; --surface3:#2A1D45; --line:#352548; --line-soft:rgba(200,120,255,.09); --text:#F1E9FA; --text-dim:#C9B6E0; --muted:#8B76A3; --gold:#B57BFF; --gold-hi:#D6ADFF; --gold-dim:#8A50D8; --gold-deep:#5C2E96; --gold-ink:#160821; --ok:#5FE3A0; --warn:#F5B84B; --danger:#FF6B9E; --info:#8AB0FF; --r-sm:8px; --r:14px; --r-lg:18px; } [data-theme="esport-purple"] .btn.primary { background:linear-gradient(135deg,#d6adff,#8a50d8); box-shadow:0 0 18px -4px rgba(181,123,255,.6); } [data-theme="esport-purple"] .nav { box-shadow:0 2px 24px -8px rgba(181,123,255,.35); } /* ===== 4. 簡約黑白 mono-clean(極簡、黑白灰,無彩色)===== */ [data-theme="mono-clean"] { --bg:#0F0F10; --bg-deep:#080809; --surface:#18181A; --surface2:#202023; --surface3:#2A2A2E; --line:#33333A; --line-soft:rgba(255,255,255,.05); --text:#F2F2F3; --text-dim:#BBBBBF; --muted:#7C7C82; --gold:#E8E8EA; --gold-hi:#FFFFFF; --gold-dim:#A8A8AD; --gold-deep:#6E6E74; --gold-ink:#101012; --ok:#7ED99B; --warn:#E0C060; --danger:#E08080; --info:#80AEE0; --r-sm:4px; --r:8px; --r-lg:12px; } [data-theme="mono-clean"] .btn.primary { background:#F2F2F3; color:#101012; } [data-theme="mono-clean"] .gold { color:#E8E8EA !important; } /* ===== 5. 活力橘 vivid-orange(溫暖活潑、橘紅暖色)===== */ [data-theme="vivid-orange"] { --bg:#12100C; --bg-deep:#0B0906; --surface:#1E1A12; --surface2:#28221A; --surface3:#352C20; --line:#3D3323; --line-soft:rgba(255,160,80,.08); --text:#FAF2E8; --text-dim:#DAC9B4; --muted:#9E8A72; --gold:#FF8C42; --gold-hi:#FFB347; --gold-dim:#D46A1E; --gold-deep:#96460F; --gold-ink:#1B0F04; --ok:#6FD98B; --warn:#F5C451; --danger:#FF6B5A; --info:#5AACE8; --r-sm:10px; --r:16px; --r-lg:22px; } [data-theme="vivid-orange"] .btn.primary { background:linear-gradient(135deg,#ffb347,#d46a1e); } /* ===== 6. 森林綠 forest-green(沉穩自然、墨綠翡翠)===== */ [data-theme="forest-green"] { --bg:#0A1210; --bg-deep:#060C0A; --surface:#111E1A; --surface2:#182823; --surface3:#20342D; --line:#26403A; --line-soft:rgba(90,220,170,.08); --text:#E8F5EF; --text-dim:#B4D6C8; --muted:#729E8C; --gold:#3DD9A0; --gold-hi:#6FF0C0; --gold-dim:#2AA47A; --gold-deep:#1B6E52; --gold-ink:#041B13; --ok:#5FE3A0; --warn:#F5C451; --danger:#FF7A6B; --info:#5AB0E8; --r-sm:8px; --r:12px; --r-lg:16px; } [data-theme="forest-green"] .btn.primary { background:linear-gradient(135deg,#6ff0c0,#2aa47a); color:#041B13; } /* ===== 7. 玫瑰金 rose-luxe(精緻奢華、玫瑰粉金)===== */ [data-theme="rose-luxe"] { --bg:#130D10; --bg-deep:#0C0709; --surface:#20161A; --surface2:#2B1E23; --surface3:#38272E; --line:#3F2C34; --line-soft:rgba(255,160,190,.08); --text:#FAECF0; --text-dim:#DCBFC9; --muted:#A17E8B; --gold:#E8919E; --gold-hi:#FFB8C4; --gold-dim:#C46476; --gold-deep:#8E3E4E; --gold-ink:#1E0A0F; --ok:#6FD9A0; --warn:#F5C451; --danger:#FF6B7A; --info:#8AAEE8; --r-sm:10px; --r:16px; --r-lg:20px; } [data-theme="rose-luxe"] .btn.primary { background:linear-gradient(135deg,#ffb8c4,#c46476); color:#1E0A0F; }