/* ============================================================ * 主题系统 —— 三套主题（暗 / 亮 / 赛博） * 通过切换 * 默认：dark（保持原有玻璃拟态深色风格） * ============================================================ */ /* ---------- 默认主题：暗色（原有风格基线） ---------- */ :root, body[data-theme="dark"] { --bg-base: #0a0a0f; --bg-gradient: radial-gradient(ellipse at 20% 10%, rgba(102, 126, 234, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(118, 75, 162, 0.12) 0%, transparent 50%), #0a0a0f; --pattern-stroke: rgba(255, 255, 255, 0.06); --pattern-stroke-2: rgba(255, 255, 255, 0.04); --card-bg: rgba(255, 255, 255, 0.06); --card-bg-hover: rgba(255, 255, 255, 0.10); --card-border: rgba(255, 255, 255, 0.14); --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.86); --text-muted: rgba(255, 255, 255, 0.68); --text-faint: rgba(255, 255, 255, 0.45); --accent: #667eea; --accent-2: #764ba2; --accent-glow: rgba(102, 126, 234, 0.4); --particle-color: 255, 255, 255; /* RGB，用于粒子 rgba() */ --particle-line: 255, 255, 255; color-scheme: dark; } /* ---------- 亮色主题 ---------- */ body[data-theme="light"] { --bg-base: #f5f6fa; --bg-gradient: radial-gradient(ellipse at 20% 10%, rgba(102, 126, 234, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(118, 75, 162, 0.12) 0%, transparent 50%), #f5f6fa; --pattern-stroke: rgba(20, 20, 40, 0.08); --pattern-stroke-2: rgba(20, 20, 40, 0.05); --card-bg: rgba(255, 255, 255, 0.78); --card-bg-hover: rgba(255, 255, 255, 0.92); --card-border: rgba(20, 20, 40, 0.10); --card-shadow: 0 10px 30px rgba(20, 20, 60, 0.12); --text-primary: rgba(20, 20, 40, 0.92); --text-secondary: rgba(20, 20, 40, 0.78); --text-muted: rgba(20, 20, 40, 0.58); --text-faint: rgba(20, 20, 40, 0.38); --accent: #5568d8; --accent-2: #6a3fbd; --accent-glow: rgba(85, 104, 216, 0.35); --particle-color: 85, 104, 216; --particle-line: 118, 75, 162; color-scheme: light; } /* ---------- 赛博朋克主题（深紫 + 霓虹青/粉） ---------- */ body[data-theme="cyber"] { --bg-base: #0d0220; --bg-gradient: radial-gradient(ellipse at 15% 20%, rgba(255, 0, 170, 0.22) 0%, transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(0, 240, 255, 0.18) 0%, transparent 55%), #0d0220; --pattern-stroke: rgba(0, 240, 255, 0.10); --pattern-stroke-2: rgba(255, 0, 170, 0.07); --card-bg: rgba(25, 8, 50, 0.78); --card-bg-hover: rgba(40, 15, 75, 0.88); --card-border: rgba(0, 240, 255, 0.28); --card-shadow: 0 10px 40px rgba(255, 0, 170, 0.25), 0 0 20px rgba(0, 240, 255, 0.1); --text-primary: rgba(240, 230, 255, 0.96); --text-secondary: rgba(200, 220, 255, 0.85); --text-muted: rgba(180, 200, 240, 0.65); --text-faint: rgba(160, 180, 220, 0.45); --accent: #ff00aa; /* 霓虹粉 */ --accent-2: #00f0ff; /* 霓虹青 */ --accent-glow: rgba(255, 0, 170, 0.55); --particle-color: 0, 240, 255; --particle-line: 255, 0, 170; color-scheme: dark; } /* ============================================================ * 基础元素覆盖（依赖 CSS 变量） * ============================================================ */ body { background: var(--bg-gradient); color: var(--text-primary); transition: background .4s ease, color .3s ease; /* 文字排版优化 */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; line-height: 1.65; letter-spacing: 0.01em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* 背景缩短：上下 padding 收紧，不再撑出长条 */ padding: clamp(20px, 4vw, 40px) clamp(12px, 3vw, 20px); min-height: 100svh; } /* 段落 / 标题排版 */ h1, h2, h3, h4, h5, h6 { line-height: 1.3; letter-spacing: 0.02em; margin-block: 0.4em 0.3em; } p { line-height: 1.7; } /* 统一背景色渲染规则：主内容模块统一为「透明容器」（与 word.css 设计一致），不使用暗色/浅色玻璃块，避免部分模块有背景、部分透明的不一致。模块内部的子卡片（.card / .post-item / .reply-item / .shop-item 等）保持各自玻璃风格。 */ .sidebar, .avatar-card, .title-card, .subtitle-card, .intro-card, .skills-card, .posts-card, .shop-card, .pixel-banner, .announcement-bar, .mobile-avatar-card, .comms-card, .replies-card { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } input[type="text"], input[type="email"], input[type="password"], textarea, .shop-search-input { border-radius: 14px; } button, .email-submit, .shop-buy-btn { border-radius: 14px; } /* 六边形 pattern 背景 */ .bg .pattern-bg svg path, .bg .pattern-bg svg rect { stroke: var(--pattern-stroke) !important; transition: stroke .3s ease; } /* 标题 / 文字 */ h1, h2, h3, h4, .section-title, .title-wrap, .subtitle-wrap, .intro-text, .comms-col-title, .comms-subtitle, .email-label, .email-input, .email-textarea { color: var(--text-primary); } .text-muted, .subtitle-prefix, .post-subtitle, .email-subtitle, .email-hint, .shop-modal-desc { color: var(--text-muted); } /* 链接 / 强调 */ a, .post-lightbox-content a { color: var(--accent); } /* 输入框 */ input[type="text"], input[type="email"], input[type="password"], textarea, .shop-search-input { background: rgba(0, 0, 0, 0.15); color: var(--text-primary); border-color: var(--card-border); } body[data-theme="light"] input[type="text"], body[data-theme="light"] input[type="email"], body[data-theme="light"] input[type="password"], body[data-theme="light"] textarea, body[data-theme="light"] .shop-search-input { background: rgba(255, 255, 255, 0.6); } /* 按钮主色 */ button.primary, .email-submit, .shop-buy-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; } /* ============================================================ * 主题切换按钮（右上角悬浮 —— 加大 + 更醒目） * ============================================================ */ .theme-switch { position: fixed; top: 22px; right: 22px; z-index: 1001; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--card-border); background: var(--card-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.04) inset; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease; padding: 0; color: var(--text-primary); } .theme-switch:hover { transform: scale(1.12) rotate(18deg); background: var(--card-bg-hover); border-color: var(--accent); box-shadow: 0 12px 30px var(--accent-glow), 0 0 0 1px var(--accent) inset; } .theme-switch:active { transform: scale(0.95); } .theme-switch svg { width: 26px; height: 26px; stroke: var(--text-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease, filter .3s ease; filter: drop-shadow(0 0 4px var(--accent-glow)); } .theme-switch .icon-sun, .theme-switch .icon-moon, .theme-switch .icon-bolt { display: none; } body[data-theme="dark"] .theme-switch .icon-moon { display: block; } body[data-theme="light"] .theme-switch .icon-sun { display: block; } body[data-theme="cyber"] .theme-switch .icon-bolt { display: block; stroke: var(--accent-2); } /* 切换时的闪光动画 */ .theme-switch.flash::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--accent-glow); filter: blur(10px); opacity: 0; animation: theme-flash .6s ease-out; } @keyframes theme-flash { 0% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.6); } } /* ============================================================ * 粒子 canvas * ============================================================ */ #particleCanvas { position: fixed; inset: 0; z-index: 0; /* 在所有内容之下，但在 .bg 之上 */ pointer-events: none; /* 不拦截鼠标事件 */ width: 100%; height: 100%; } /* 让 container / bg 等位于 canvas 之上（不覆盖 fixed 定位的 music-player / theme-switch） */ .bg, .bg-blur, .container, .sponsor-tab, .shop-modal-overlay, .sponsor-overlay, .project-confirm-overlay { position: relative; z-index: 1; } .bg { z-index: 0; } .bg-blur { z-index: 0; } /* 减少动效偏好：关闭粒子 + 过渡 */ @media (prefers-reduced-motion: reduce) { #particleCanvas { display: none; } body, .sidebar, .intro-card, .skills-card, .posts-card, .shop-card, .comms-card, .replies-card, .theme-switch { transition: none !important; } } /* ============================================================ * 移动端适配 * ============================================================ */ @media (max-width: 600px) { .theme-switch { top: 14px; right: 14px; width: 44px; height: 44px; } .theme-switch svg { width: 22px; height: 22px; } /* 小屏卡片圆角稍收敛 */ .sidebar, .avatar-card, .intro-card, .skills-card, .posts-card, .shop-card, .comms-card, .replies-card, .terminal-card { border-radius: 18px !important; } }