/* ========================================================================== 博客双主题共享样式层（文章页 + 列表页共用） 主题挂在 上；默认 = 夜间。 ========================================================================== */ /* ---- 🌙 夜间（默认）---- */ :root { --bg: #000000; --text: #dddddd; --heading-3: #e0e0e0; --heading-4: #cccccc; --muted: #888888; --accent: #00f2ff; --link: #00ffff; --link-hover: #ffffff; --link-hover-glow: 0 0 8px rgba(0, 255, 255, 0.6); --card-bg: rgba(20, 20, 30, 0.4); --card-blur: 20px; --card-border: rgba(255, 255, 255, 0.1); --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); --hairline: rgba(255, 255, 255, 0.1); --heading-glow: 0 0 5px rgba(0, 242, 255, 0.7), 0 0 15px rgba(0, 242, 255, 0.5); --h1-weight: 300; --measure: 900px; --code-bg: rgba(0, 0, 0, 0.5); --code-text: #f8f8f2; --code-border: rgba(255, 255, 255, 0.1); --inline-code-bg: rgba(255, 255, 255, 0.1); --inline-code-text: #ff79c6; --quote-bg: rgba(255, 255, 255, 0.05); --table-head-bg: rgba(255, 255, 255, 0.1); --table-border: rgba(255, 255, 255, 0.2); --canvas-display: block; --home-btn-text: rgba(255, 255, 255, 0.8); --home-btn-border: rgba(255, 255, 255, 0.3); --home-btn-hover-bg: rgba(255, 255, 255, 0.1); --home-btn-hover-text: #ffffff; --home-btn-hover-border: #ffffff; } /* ---- ☀️ 白天（极简纸感阅读）---- */ :root[data-theme="light"] { --bg: #faf9f7; --text: #2b2b2b; --heading-3: #333333; --heading-4: #444444; --muted: #777777; --accent: #0b7a75; --link: #0b7a75; --link-hover: #094f4b; --link-hover-glow: none; --card-bg: #ffffff; --card-blur: 0px; --card-border: rgba(0, 0, 0, 0.08); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --hairline: rgba(0, 0, 0, 0.08); --heading-glow: none; --h1-weight: 400; /* 栏宽与夜间保持一致（不收缩）*/ --code-bg: #f4f4f2; --code-text: #2b2b2b; --code-border: rgba(0, 0, 0, 0.08); --inline-code-bg: #f0efec; --inline-code-text: #9a3b6e; --quote-bg: rgba(0, 0, 0, 0.03); --table-head-bg: rgba(0, 0, 0, 0.04); --table-border: rgba(0, 0, 0, 0.12); --canvas-display: none; --home-btn-text: rgba(0, 0, 0, 0.7); --home-btn-border: rgba(0, 0, 0, 0.15); --home-btn-hover-bg: rgba(0, 0, 0, 0.05); --home-btn-hover-text: #000000; --home-btn-hover-border: rgba(0, 0, 0, 0.4); } /* ========================================================================== 共享骨架 ========================================================================== */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); overflow-x: hidden; background-color: var(--bg); transition: background-color 0.3s ease, color 0.3s ease; } /* Canvas 背景（仅夜间显示） */ #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: var(--canvas-display); background: var(--bg); pointer-events: none; } /* 返回按钮 */ .home-btn { position: fixed; top: 20px; left: 20px; padding: 8px 16px; color: var(--home-btn-text); text-decoration: none; border: 1px solid var(--home-btn-border); border-radius: 20px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 0.3s ease; z-index: 100; font-size: 0.9rem; } .home-btn:hover { background: var(--home-btn-hover-bg); color: var(--home-btn-hover-text); border-color: var(--home-btn-hover-border); } /* 主题切换按钮（与返回按钮对称，右上角） */ .theme-toggle { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--home-btn-text); background: transparent; border: 1px solid var(--home-btn-border); border-radius: 50%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 0.3s ease; z-index: 100; cursor: pointer; } .theme-toggle:hover { background: var(--home-btn-hover-bg); color: var(--home-btn-hover-text); border-color: var(--home-btn-hover-border); } .theme-toggle svg { width: 20px; height: 20px; display: block; } /* 白天显示月亮（点击切到夜间），夜间显示太阳（点击切到白天） */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* 毛玻璃 / 纸感 容器 */ .glass-container { max-width: var(--measure); margin: 80px auto 40px; padding: 40px; background: var(--card-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border-radius: 16px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease; } /* 主标题 */ .glass-container h1 { margin-top: 0; font-weight: var(--h1-weight); border-bottom: 1px solid var(--hairline); padding-bottom: 16px; margin-bottom: 10px; text-align: center; color: var(--accent); text-shadow: var(--heading-glow); letter-spacing: 2px; } /* 链接 */ .glass-container a { color: var(--link); text-decoration: none; transition: color 0.2s; } .glass-container a:hover { color: var(--link-hover); text-decoration: underline; text-shadow: var(--link-hover-glow); } /* 访问统计图标：跟随强调色 */ .stat-icon { width: 12px; height: 12px; vertical-align: -1px; margin: 0 1px; color: var(--accent); } /* ========================================================================== 响应式（共享） ========================================================================== */ @media (max-width: 600px) { .glass-container { margin: 72px 12px 20px; padding: 20px; } .home-btn { top: 16px; left: 16px; padding: 8px 14px; } .theme-toggle { top: 16px; right: 16px; width: 38px; height: 38px; } .glass-container h1 { font-size: 1.8rem; letter-spacing: 1px; } }