/* ============================================================ 个人博客样式 — 亮 / 暗双主题 · 毛玻璃 · 流式阅读 主题切换通过 控制 ============================================================ */ :root { --bg: #eef2ee; --bg-card: rgba(255, 255, 255, 0.9); /* 毛玻璃卡片：90% 不透明 */ --bg-card-solid: #ffffff; --bg-code: rgba(238, 240, 243, 0.95); --text: #24312a; --text-soft: #57606a; --text-faint: #8b949e; --accent: #2b7a4b; --accent-soft: rgba(43, 122, 75, 0.12); --border: rgba(216, 222, 228, 0.7); --glass-blur: blur(18px) saturate(1.4); --scrim: rgba(248, 250, 246, 0.42); /* 背景图上的遮罩（亮色） */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); --radius: 12px; --max-width: 860px; --header-h: 60px; } [data-theme="dark"] { --bg: #0d1117; --bg-card: rgba(22, 27, 34, 0.9); --bg-card-solid: #161b22; --bg-code: rgba(33, 38, 45, 0.95); --text: #e6edf3; --text-soft: #9ea7b3; --text-faint: #6e7681; --accent: #6ccb8f; --accent-soft: rgba(108, 203, 143, 0.14); --border: rgba(48, 54, 61, 0.8); --scrim: rgba(8, 12, 10, 0.62); /* 背景图上的遮罩（暗色） */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; font-size: 16px; transition: background 0.25s ease, color 0.25s ease; min-height: 100vh; } /* ---------- 常驻背景图（mianma） ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(var(--scrim), var(--scrim)), url("../images/mianma.jpg") center / cover no-repeat; background-attachment: fixed, fixed; transition: background 0.3s ease; } /* 流式阅读模式下锁定页面滚动 */ body.reader-open { overflow: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* ---------- 毛玻璃通用 ---------- */ .site-header, .post-card, .article, .search-box, .demo-card, .todo-item, .overlay, .tag { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ---------- 顶部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; } .site-logo { font-weight: 700; font-size: 1.15rem; color: var(--text); white-space: nowrap; } .site-logo:hover { text-decoration: none; color: var(--accent); } .site-logo .logo-dot { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--text-soft); padding: 6px 12px; border-radius: 8px; font-size: 0.95rem; transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(--text); background: var(--accent-soft); text-decoration: none; } .nav-links a.active { color: var(--accent); font-weight: 600; } #theme-toggle { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; transition: transform 0.2s; flex-shrink: 0; } #theme-toggle:hover { transform: rotate(20deg) scale(1.08); } /* ---------- 首页 Hero ---------- */ .hero { padding: 56px 0 32px; } .hero h1 { font-size: 2.2rem; margin: 0 0 8px; text-shadow: 0 1px 8px rgba(255,255,255,0.35); } .hero p { color: var(--text-soft); margin: 0; font-size: 1.05rem; } /* ---------- 搜索框 ---------- */ .search-box { width: 100%; padding: 10px 16px; margin: 20px 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); font-size: 0.95rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- 文章卡片 ---------- */ .post-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 48px; } .post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .post-card:hover { transform: translateY(-2px); border-color: var(--accent); } .post-card h2, .post-card h3 { margin: 0 0 6px; font-size: 1.25rem; } .post-card h2 a, .post-card h3 a { color: var(--text); } .post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); text-decoration: none; } .post-meta { font-size: 0.85rem; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .post-summary { color: var(--text-soft); margin: 10px 0 0; font-size: 0.95rem; } .tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; white-space: nowrap; } .tag:hover { text-decoration: none; filter: brightness(1.1); } /* ---------- 归档 / 标签页 ---------- */ .year-group h2 { font-size: 1.4rem; border-bottom: 2px solid var(--border); padding-bottom: 8px; margin: 40px 0 16px; } .archive-item { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .archive-item time { color: var(--text-faint); font-size: 0.9rem; white-space: nowrap; } .archive-item a { color: var(--text); } .archive-item a:hover { color: var(--accent); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; } .tag-cloud .tag { font-size: 0.9rem; padding: 4px 14px; } /* ---------- 传统阅读视图：文章正文 ---------- */ .article { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; margin: 32px 0 56px; } .article-header { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 28px; } .article-header h1 { font-size: 1.9rem; margin: 0 0 10px; line-height: 1.35; } .article-body h1, .article-body h2, .article-body h3 { line-height: 1.4; margin-top: 1.8em; } .article-body h2 { border-bottom: 1px solid var(--border); padding-bottom: 6px; } .article-body img { max-width: 100%; border-radius: 8px; } .article-body blockquote { margin: 1em 0; padding: 4px 18px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--text-soft); } .article-body code { background: var(--bg-code); padding: 2px 6px; border-radius: 6px; font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: 0.88em; } .article-body pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; overflow-x: auto; line-height: 1.6; } .article-body pre code { background: none; padding: 0; font-size: 0.86rem; } .article-body table { border-collapse: collapse; width: 100%; margin: 1em 0; } .article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 14px; text-align: left; } .article-body th { background: var(--bg-code); } .article-body hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } .article-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .back-link { font-size: 0.92rem; } /* ---------- 页脚 ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--text-faint); font-size: 0.88rem; text-align: center; } .site-footer a { color: var(--text-soft); } /* ---------- 提示 / 空状态 ---------- */ .empty-tip { color: var(--text-faint); text-align: center; padding: 48px 0; } .loading-tip { color: var(--text-faint); text-align: center; padding: 48px 0; } /* ============================================================ 流式阅读器（默认视图） ============================================================ */ #reader { position: fixed; inset: 0; z-index: 50; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: none; /* 沉浸式：隐藏滚动条 */ } #reader::-webkit-scrollbar { display: none; } .reader-section { min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 20px) 20px 48px; } .reader-card { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 760px; width: 100%; margin: 0 auto; padding: 32px 38px; } /* 第一段：标题卡片 */ .reader-card.title-card { text-align: center; padding: 48px 32px; } .title-card h1 { font-size: 1.8rem; margin: 0 0 14px; line-height: 1.4; } .title-card .post-meta { justify-content: center; margin-bottom: 8px; } .title-card .swipe-hint { margin-top: 28px; color: var(--text-faint); font-size: 0.9rem; animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* 流式卡片内的正文样式与传统视图共用 */ .reader-card .article-body h1, .reader-card .article-body h2, .reader-card .article-body h3 { margin-top: 0.4em; font-size: 1.35rem; border-bottom: 1px solid var(--border); padding-bottom: 6px; } /* 进度条（顶部） */ #reader-progress, #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), #7ec8a9); z-index: 200; transition: width 0.25s ease; pointer-events: none; } /* 底部段落计数器 */ #reader-counter { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-radius: 999px; background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-soft); user-select: none; } #reader-counter button { border: none; background: none; color: var(--accent); font-size: 1rem; cursor: pointer; padding: 2px 6px; } #reader-counter button:disabled { color: var(--text-faint); cursor: default; } /* ---------- 视图切换 / 引导按钮 ---------- */ .float-btn { position: fixed; right: 18px; z-index: 60; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text); border-radius: 999px; padding: 9px 16px; font-size: 0.88rem; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .float-btn:hover { transform: translateY(-2px); border-color: var(--accent); } #view-toggle { bottom: 60px; } #help-btn { bottom: 18px; } /* ============================================================ 新手引导弹窗 ============================================================ */ #tutorial-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(10, 16, 12, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.25s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tutorial-card { background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); max-width: 440px; width: 100%; padding: 32px 30px; animation: slideUp 0.3s ease; max-height: 86vh; overflow-y: auto; } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .tutorial-card h2 { margin: 0 0 6px; font-size: 1.35rem; } .tutorial-card .sub { color: var(--text-soft); font-size: 0.92rem; margin: 0 0 20px; } .tutorial-item { display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start; } .tutorial-item .emoji { font-size: 1.5rem; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 12px; } .tutorial-item b { display: block; font-size: 0.98rem; } .tutorial-item p { margin: 2px 0 0; color: var(--text-soft); font-size: 0.88rem; line-height: 1.55; } #tutorial-start { width: 100%; margin-top: 8px; padding: 12px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 1rem; cursor: pointer; transition: filter 0.15s; } #tutorial-start:hover { filter: brightness(1.1); } /* ---------- 移动端适配 ---------- */ @media (max-width: 640px) { .hero { padding: 36px 0 20px; } .hero h1 { font-size: 1.7rem; } .article { padding: 24px 20px; margin-bottom: 110px; } /* 给右下角浮动按钮留出空间 */ .nav-inner { gap: 6px; } .site-logo { font-size: 0.98rem; } .nav-links { gap: 0; } .nav-links a { white-space: nowrap; padding: 6px 6px; font-size: 0.85rem; } #theme-toggle { width: 32px; height: 32px; } .reader-card { padding: 24px 20px; border-radius: 14px; } .title-card h1 { font-size: 1.45rem; } .reader-section { padding: calc(var(--header-h) + 10px) 12px 72px; } .float-btn { right: 12px; font-size: 0.82rem; padding: 8px 13px; } .tutorial-card { padding: 26px 22px; } } /* 流式阅读时页脚隐藏，避免透过阅读器显示 */ body.reader-open .site-footer { display: none; } /* 桌面端隐藏计数器箭头提示的冗余（手机靠滑动） */ @media (pointer: coarse) { #reader-counter button { display: none; } }