/* ============================================================ Zwing's blog — Redefine 风格样式 明暗双色（CSS 变量 + data-theme 切换） ============================================================ */ :root { --accent: #016A8E; --accent-2: #7b5cff; --radius: 12px; --radius-sm: 8px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; --content-width: 860px; } html[data-theme="light"] { --bg: #ffffff; --bg-soft: #f6f8fa; --card: #ffffff; --card-hover: #fafbfc; --text: #1f2328; --text-secondary: #59636e; --text-muted: #8c959f; --border: #e4e7ec; --border-strong: #d0d7de; --nav-bg: rgba(255, 255, 255, 0.5); --card-glass: rgba(255, 255, 255, 0.67); --card-glass-hover: rgba(255, 255, 255, 0.78); --border-glass: rgba(255, 255, 255, 0.55); --shadow: 0 1px 3px rgba(31, 35, 40, 0.06), 0 8px 24px rgba(31, 35, 40, 0.04); --shadow-hover: 0 2px 6px rgba(31, 35, 40, 0.08), 0 12px 32px rgba(31, 35, 40, 0.08); --code-bg: #f6f8fa; --mark-bg: #fff2a8; --mark-text: inherit; --callout-bg: #f6f8fa; --callout-border: #d0d7de; --link: #016A8E; --link-hover: #014c65; --toc-active: #016A8E; /* 表格隔行变色：半透明叠层（见 .markdown-body tbody），叠在页面或提示框底色上自动协调 */ --table-stripe: rgba(31, 35, 40, 0.035); } html[data-theme="dark"] { /* 暗色下主强调色整体提亮为亮蓝（墨蓝在深底上对比度不足）；提示框颜色独立不受影响 */ --accent: #6ed5f7; --bg: #0d1117; --bg-soft: #161b22; --card: #0d1117; --card-hover: #161b22; --text: #e6edf3; --text-secondary: #a1aab4; --text-muted: #6e7681; --border: #30363d; --border-strong: #3d444d; --nav-bg: rgba(13, 17, 23, 0.5); --card-glass: rgba(13, 17, 23, 0.82); --card-glass-hover: rgba(13, 17, 23, 0.92); --border-glass: rgba(255, 255, 255, 0.14); --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35); --code-bg: #161b22; --mark-bg: #6b5d00; --mark-text: #ffe97d; --callout-bg: #161b22; --callout-border: #30363d; --link: #6ed5f7; --link-hover: #7bdefe; --toc-active: #6ed5f7; /* 暗色下对微弱亮度变化不敏感，叠层略强于浅色主题 */ --table-stripe: rgba(230, 237, 243, 0.05); } /* ---------- 基础 ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.75; font-size: 16px; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; /* sticky footer：内容不足一屏时页脚仍贴住视口底部，不露出间隙 */ display: flex; flex-direction: column; min-height: 100vh; /* svh 回退：老浏览器不支持 svh 时用 vh */ min-height: 100svh; } main { flex: 1 0 auto; width: 100%; } a { color: var(--link); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--link-hover); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } .container { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; min-height: calc(100vh - 200px); transition: max-width 0.25s ease; /* 目录展开时容器平滑加宽 */ } /* ---------- 导航栏 ---------- */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } /* Edge 性能降级：大面积 backdrop-filter 在 Edge 合成器上逐帧重采样， 配合全屏背景图滚动爆卡（main.js 检测 UA 后给 加 .edge）。 降级后为纯半透明底色（--nav-bg / --card-glass 自带透明度），视觉依旧柔和； 小面积模糊（下拉菜单、圆形按钮等）成本低，保留 */ html.edge .navbar, html.edge .glass-panel, html.edge.post-glass .post-wrap, html.edge .site-footer { backdrop-filter: none; -webkit-backdrop-filter: none; } html.edge .hero-bg { will-change: auto; } .nav-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-brand { font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; } .nav-brand:hover { color: var(--accent); } .nav-menu { display: flex; align-items: center; list-style: none; gap: 4px; } .nav-menu li a { position: relative; display: block; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 1.05rem; } .nav-menu li a:hover { color: var(--text); background: var(--bg-soft); } /* 当前页标记：标签下方一条横线（宽度与文字一致，随 padding 定位） */ .nav-menu li a.active { color: var(--accent); font-weight: 600; } .nav-menu li a.active::after { content: ''; position: absolute; left: 12px; right: 12px; /* 与 a 的水平 padding 一致 → 横线即文字宽度 */ bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); } .nav-actions { display: flex; gap: 4px; margin-left: 8px; } .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: 1.05rem; color: var(--text-secondary); } .icon-btn:hover { background: var(--bg-soft); color: var(--text); } .icon-btn svg { width: 20px; height: 20px; } /* 明暗切换按钮：白天显示月亮（点击进入夜晚），夜晚显示太阳（点击回到白天） */ html[data-theme="light"] .icon-sun { display: none; } html[data-theme="dark"] .icon-moon { display: none; } .nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; } .nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 移动端菜单 */ @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-menu { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 12px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--border); display: none; } .nav-menu.open { display: flex; } .nav-menu li a { padding: 12px; } .nav-menu li a.active::after { bottom: 8px; } .nav-actions { margin-left: 0; padding: 8px 0 0; border-top: 1px solid var(--border); } /* 移动端：下拉菜单改为面板内展开，不做浮层 */ .nav-dropdown { width: 100%; } .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px; } .nav-dropdown-menu { position: static; transform: none; min-width: 0; width: 100%; padding: 4px 0 4px 16px; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-dropdown.open .nav-dropdown-menu { transform: none; } .nav-dropdown-menu li a { padding: 10px 12px; } } /* 关于下拉菜单（毛玻璃浮层）：点击展开，点外部 / ESC 关闭（交互见 main.js） */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 6px 12px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 1.05rem; font-family: inherit; cursor: pointer; } .nav-dropdown-toggle:hover { color: var(--text); background: var(--bg-soft); } /* 当前页标记：位于「关于」下的横线（与普通导航项一致） */ .nav-dropdown.active > .nav-dropdown-toggle { color: var(--accent); font-weight: 600; } .nav-dropdown.active > .nav-dropdown-toggle::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); } .nav-dropdown-caret { width: 14px; height: 14px; transition: transform 0.2s ease; } .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 124px; padding: 8px; list-style: none; /* 取消条目左侧分点 */ background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* 覆盖 .nav-menu li a 基础样式（下拉项独立外观） */ .nav-dropdown-menu li a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--text); font-size: 0.95rem; white-space: nowrap; text-align: center; /* 条目文字居中 */ } .nav-dropdown-menu li a:hover { background: var(--bg-soft); color: var(--accent); } .nav-dropdown-menu li a.active { color: var(--accent); font-weight: 600; } /* 子项 active 不显示横线（横线只属于「关于」本身） */ .nav-dropdown-menu li a.active::after { display: none; } /* ---------- 首页 hero：全屏背景 + 打字机 ---------- */ .main-home { min-height: 100vh; } /* 导航 sticky 占文档流 61px（60 + 1px 边框），把 hero 上移回去， 打字机才能以「屏幕中心」而非「导航下方盒子的中心」垂直居中 */ .main-home .hero { margin-top: -61px; } .hero { position: relative; min-height: 100vh; min-height: 100svh; /* 移动端浏览器地址栏动态高度 */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-bg { /* 固定铺满视口（Redefine 效果）：cover 裁剪铺满； 帖子条目到达屏幕中间时由 main.js 直接切换模糊； 四周外扩 24px 防止 blur 后边缘透出背景造成白边。 注意：img 是替换元素，仅靠 inset 不会被拉伸（会保持图片 固有尺寸锚定左上角），必须显式指定宽高 object-fit 才生效 */ position: fixed; top: -24px; left: -24px; width: calc(100vw + 48px); height: calc(100svh + 48px); object-fit: cover; object-position: center; background: #060a12; z-index: 0; animation: heroFadeIn 1.4s ease; will-change: filter; /* main.js 阈值切换 0↔18px 时，由浏览器平滑过渡而非突变； opacity 用于明暗主题切换背景图时淡出淡入 */ transition: filter 0.6s ease, opacity 0.3s ease; } @keyframes heroFadeIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } /* 非首次进入会话：禁用 hero 入场动画（导航/刷新整页重载不再重播） */ .no-hero-anim .hero-bg { animation: none; } /* 文章页背景图模式（html.post-glass，模板内联脚本首帧恢复）： 默认隐藏背景图（无背景模式 = 当前文章页样式），切换后显示； opacity 过渡让切换平滑淡入淡出 */ .hero-bg-hidden { opacity: 0; } html.post-glass .hero-bg-hidden { opacity: 1; } /* 背景图模式下正文整体（含 pager/评论）绘制在 fixed 背景图（z-index:0）之上 */ html.post-glass .container { position: relative; z-index: 1; } /* 背景图模式：文章容器与关于页同宽（924px，container-wide 同款）； 仅限文章页（.container-post），标签/分类等页面不受影响 */ html.post-glass .container-post { max-width: 924px; } .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 20px; animation: heroContentUp 0.9s ease; } /* 首页滚动内容叠加在固定背景之上；加宽以容纳左侧栏 */ .main-home .container { position: relative; z-index: 1; max-width: 1084px; } @keyframes heroContentUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .no-hero-anim .hero-content { animation: none; } /* 打字机动画行（首页正中唯一文字） */ .hero-typewriter { font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 600; min-height: 1.7em; color: #fff; } .hero-typewriter::after { content: '|'; margin-left: 3px; color: var(--accent); font-weight: 400; animation: typeBlink 1.1s steps(2, start) infinite; } @keyframes typeBlink { 50% { opacity: 0; } } /* hero 内的社交链接（白边风格） */ .hero-social { margin-top: 34px; display: flex; justify-content: center; gap: 14px; } .hero-social .social-link { display: inline-flex; align-items: center; padding: 9px 22px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 999px; color: #fff; font-size: 0.95rem; backdrop-filter: blur(4px); transition: all 0.2s; } .hero-social .social-link:hover { background: #fff; color: #1f2328; border-color: #fff; transform: translateY(-2px); } /* 首屏底部下滑箭头：加粗 SVG + 半透明圆形背景 */ .hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.16); /* 半透明圆形背景 */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0.85; animation: heroBounce 2.2s ease-in-out infinite; transition: background 0.2s, opacity 0.2s; } .hero-scroll svg { width: 22px; height: 22px; } .hero-scroll:hover { background: rgba(255, 255, 255, 0.28); opacity: 1; } @keyframes heroBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- 文章卡片 ---------- */ .post-list { display: flex; flex-direction: column; gap: 20px; padding-bottom: 60px; } /* 主页分页器：无整体方框，每个按钮独立小圆角毛玻璃； 上一页/下一页紧贴页码按钮两侧，整体居中 */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; } .page-prev, .page-next { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1.2rem; font-weight: 600; color: var(--text-secondary); border-radius: 8px; background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); transition: color 0.2s, border-color 0.2s; } .page-prev:hover, .page-next:hover { color: var(--accent); border-color: var(--border); } .page-prev.disabled, .page-next.disabled { visibility: hidden; } .page-nums { display: flex; align-items: center; gap: 6px; } .page-num { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 0.95rem; font-weight: 600; border-radius: 8px; color: var(--text-secondary); background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); transition: color 0.2s, border-color 0.2s; } .page-num:hover { color: var(--accent); border-color: var(--border); } /* 当前页：蓝色反向填充（accent 底 + 白字） */ .page-num.active { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 700; } .page-ellipsis { color: var(--text-muted); padding: 0 2px; } /* 暗色下当前页为亮蓝底，白字对比度不足 → 改深色字 */ html[data-theme="dark"] .page-num.active { color: #0d1117; } .post-card { position: relative; /* 置顶标识的定位基准 */ padding: 24px 28px; /* 半透明毛玻璃卡片，透过模糊后的背景图 */ background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } /* 置顶标识（front matter priority > 0）：卡片右上角小徽标 无颜色填充：仅细边框 + 浅色文字，不抢眼 */ .post-card-pin { position: absolute; top: 14px; right: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; padding: 4px 12px; border-radius: 6px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .post-card-pin svg { width: 12px; height: 12px; } /* 文章卡片封面（front matter cover 可选）：全宽 × 150px，比例参照 Redefine 主题； 负 margin 抵消卡片 padding 顶到卡片边缘，仅顶部圆角与卡片一致 */ .post-card-cover { display: block; margin: -24px -28px 18px; width: calc(100% + 56px); height: 150px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; } .post-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .post-card:hover .post-card-cover img { transform: scale(1.03); } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); background: var(--card-glass-hover); } /* 卡片底部属性栏：创建时间 / 分类 / 标签（带图标，标签用 | 分隔，无胶囊样式） */ .post-card-meta { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; color: var(--text-secondary); font-size: 0.92rem; } .post-card-meta .card-meta-item { display: inline-flex; align-items: center; gap: 5px; } .post-card-meta svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-secondary); } .post-card-meta .card-cat { color: var(--text-secondary); } .post-card-meta .card-cat:hover { color: var(--accent); } /* 标签：不独立成胶囊，竖线分隔。竖线不用文本字符 |（受字体基线影响不居中）， 改用 1px×1.1em 的块级竖线（background 绘制），在 flex 容器中绝对垂直居中； 间距全部用 margin 控制（gap 归零），竖线左右对称 7px */ .post-card-meta .card-tags { gap: 0; } .post-card-meta .card-tags > svg { margin-right: 5px; } .post-card-meta .card-tag { display: inline-flex; align-items: center; color: var(--text-secondary); } .post-card-meta .card-tag:hover { color: var(--accent); } .post-card-meta .card-tag + .card-tag::before { content: ''; width: 1px; height: 1.1em; margin: 0 7px; background: currentColor; flex-shrink: 0; } /* 进入阅读：贴卡片右下角（flex 自动推到最右），hover 箭头微移 */ .post-card-meta .card-read-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 0.92rem; white-space: nowrap; transition: color 0.15s, gap 0.15s; } .post-card-meta .card-read-more:hover { color: var(--accent); gap: 8px; } .post-card-title { font-size: 1.35rem; font-weight: 700; line-height: 1.4; } .post-card-title a { color: var(--text); } .post-card-title a:hover { color: var(--accent); } .post-card-excerpt { margin-top: 10px; color: var(--text); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 标签 chip ---------- */ .tag-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-soft); border: 1px solid var(--border); } .tag-chip:hover { color: var(--accent); border-color: var(--accent); } /* ---------- 首页侧栏（Redefine 风格） ---------- */ .home-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 40px; } /* 翻页页（无 hero）：post-list 与 sticky 侧栏（top: 80px）上边缘齐平。 容器顶在导航栏下 61px（60px 高 + 1px 边框），差 19px 由 margin-top 补齐 */ .home-layout.paged .post-list { margin-top: 19px; } .sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; } .side-card { padding: 22px 20px; /* 与文章卡片一致的半透明毛玻璃 */ background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); border-radius: var(--radius); box-shadow: var(--shadow); } .side-profile { text-align: center; } .side-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-glass); box-shadow: var(--shadow); } .side-name { margin-top: 12px; font-size: 1.15rem; font-weight: 700; } .side-announcement { margin-top: 8px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } .side-link { display: inline-block; margin-top: 14px; padding: 6px 18px; border-radius: 999px; font-size: 0.85rem; color: var(--accent); border: 1px solid var(--border); transition: border-color 0.15s, color 0.15s; } .side-link:hover { border-color: var(--accent); } /* 作者卡片统计栏：标签 / 分类 / 文章 */ .side-stats { display: flex; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .side-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: var(--radius-sm); transition: background 0.15s; } .side-stat:hover { background: var(--bg-soft); } .side-stat-num { font-size: 1.05rem; font-weight: 700; color: var(--text); transition: color 0.15s; } .side-stat:hover .side-stat-num { color: var(--accent); } .side-stat-label { font-size: 0.85rem; /* 与背景反差加大（原 --text-muted 对比度不足），仍低于数字层级 */ color: var(--text); } /* 统计卡片：公告（统计数据已移至页脚 .footer-stats） */ .announcement-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: color-mix(in srgb, var(--text) 80%, var(--text-secondary)); } .announcement-title svg { width: 16px; height: 16px; color: var(--accent); } .announcement-text { margin: 6px 0 0; font-size: 0.9rem; font-weight: 500; /* 介于 --text 与 --text-secondary 之间：62% 主色 + 38% 次级色，明暗主题自动适配 */ color: color-mix(in srgb, var(--text) 62%, var(--text-secondary)); line-height: 1.7; } .stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 0.88rem; } .stat-row + .stat-row { border-top: 1px dashed var(--border); } .stat-label { color: var(--text); white-space: nowrap; } .stat-value { color: var(--text); font-weight: 600; /* 等宽数字：秒表每秒跳动时宽度不抖动 */ font-variant-numeric: tabular-nums; } .stat-value.uptime { font-size: 0.82rem; } /* busuanzi 站点计数：隐藏「实时值计数动画 + 基数叠加」的跳动过程， 由 main.js 在数值稳定后一次性写入最终值并移除隐藏类（0.3s 淡入）。 .js 前缀：隐藏类由模板直接输出（首帧即隐藏，不等 JS 时机）， 无 JS 时（html 无 js 类）正常显示基数 */ #busuanzi_value_site_uv, #busuanzi_value_site_pv { transition: opacity 0.3s ease; } .js .busuanzi-hide { opacity: 0; } /* 文章页：单篇访问量 */ .meta-views { color: var(--text-muted); } /* 窄屏：侧栏折叠到文章列表下方 */ @media (max-width: 900px) { .home-layout { grid-template-columns: 1fr; } .sidebar { position: static; order: 2; } .post-list { order: 1; } } /* ---------- 文章页 ---------- */ .post { padding-bottom: 0; } /* 底部由版权块 → 翻页按钮直接衔接 */ /* 文章末尾版权声明：正文下方独立 --- 分隔线，与版权块间隔 20px；下方直接接翻页按钮 */ .post-copyright-sep { height: 1px; background: var(--border); margin-top: 40px; } .post-copyright { margin-top: 20px; padding: 14px 18px; font-size: 1rem; /* 与正文同字号 */ color: var(--text-secondary); line-height: 1.9; background: var(--bg-soft); border-radius: var(--radius-sm); } .post-copyright p { margin: 0; } .post-copyright strong { color: var(--text); font-weight: 600; } .post-copyright a { color: var(--accent); } .post-header { padding: 40px 0 24px; border-bottom: 1px solid var(--border); } /* 文章页封面（front matter cover 可选）：全宽，响应式高度（对应 Redefine h-60/sm:h-72/md:h-80） */ .post-cover { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center; border-radius: var(--radius); margin-bottom: 24px; } @media (min-width: 640px) { .post-cover { height: 288px; } } @media (min-width: 768px) { .post-cover { height: 320px; } } .post-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; line-height: 1.35; } .post-meta { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; /* 两行 meta 之间的行间距（比水平间距紧凑） */ color: var(--text-muted); font-size: 0.88rem; } /* 分类 + 标签分组：单独占一行（flex-basis 100% 强制换行） */ .post-meta .meta-group { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; } .meta-link { color: var(--text-secondary); } .meta-link:hover { color: var(--accent); } /* meta 图标项（日期/修改时间/词数/阅读时间/分类/标签/访问量）：图标与文字基线对齐 */ .post-meta .meta-item, .post-meta .meta-link, .post-meta .tag-chip, .post-meta .meta-views { display: inline-flex; align-items: center; gap: 5px; } /* 图标统一 14px；颜色比 meta 文字（--text-muted）加深一档，更易区分 */ .post-meta svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-secondary); } /* ---------- 正文排版 ---------- */ .markdown-body { padding-top: 28px; font-size: 1.02rem; } .markdown-body > * + * { margin-top: 1.1em; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-weight: 700; line-height: 1.4; scroll-margin-top: 90px; } .markdown-body h1 { font-size: 1.9rem; } .markdown-body h2 { font-size: 1.75rem; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .markdown-body h3 { font-size: 1.6rem; } .markdown-body h4 { font-size: 1.45rem; } .markdown-body h5 { font-size: 1.3rem; } .markdown-body h6 { font-size: 1.15rem; } .markdown-body a { border-bottom: 1px dashed var(--border-strong); } .markdown-body a:hover { border-bottom-color: var(--accent); } .markdown-body strong { font-weight: 700; } .markdown-body em { font-style: italic; } .markdown-body ul, .markdown-body ol { padding-left: 1.6em; } .markdown-body li { margin: 0.35em 0; } .markdown-body li::marker { color: var(--text-muted); } .markdown-body blockquote { padding: 10px 20px; border-left: 4px solid var(--border-strong); color: var(--text-secondary); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .markdown-body img { max-width: 100%; border-radius: var(--radius-sm); } .markdown-body img.center-img { display: block; margin: 0 auto; } .markdown-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .markdown-body th, .markdown-body td { padding: 8px 14px; border: 1px solid var(--border); text-align: left; } .markdown-body th { background: var(--bg-soft); font-weight: 600; } /* 隔行微弱变色：半透明叠层随底色自动协调——页面白/黑底上呈极淡条纹， 提示框（callout）内则叠加在其自身底色上，不显突兀 */ .markdown-body tbody tr:nth-child(even) > td { background: var(--table-stripe); } .markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } /* ===== 荧光笔高亮（==文本==） ===== */ .markdown-body mark { background: var(--mark-bg); color: var(--mark-text); padding: 0.1em 0.35em; border-radius: 4px; font-weight: 500; } /* ===== MPE 提示框 callout ===== */ /* 整框填充各类型的浅色调背景（--callout-soft） */ .callout { position: relative; padding: 16px 20px 16px 20px; border-radius: var(--radius-sm); border: 1px solid var(--callout-soft-border, var(--callout-border)); background: var(--callout-soft, var(--callout-bg)); } .callout + .callout { margin-top: 1.1em; } .callout-title { font-weight: 700; font-size: 1rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; color: var(--callout-color, var(--text)); } .callout-title svg { width: 1em; height: 1em; flex-shrink: 0; } .callout p { margin: 0.35em 0; } .callout > *:first-child { margin-top: 0; } .callout > *:last-child { margin-bottom: 0; } /* 各类型配色（浅色主题：淡彩底 + 同色系描边） */ .callout-note { --callout-color: #4f7cff; --callout-soft: #eaf0ff; --callout-soft-border: #cfddff; } .callout-info { --callout-color: #0ea5e9; --callout-soft: #e1f3fc; --callout-soft-border: #bfe4f7; } .callout-tip { --callout-color: #22c55e; --callout-soft: #e3f7ea; --callout-soft-border: #c3edd1; } .callout-success { --callout-color: #16a34a; --callout-soft: #dff4e6; --callout-soft-border: #b9e6c9; } .callout-question{ --callout-color: #a855f7; --callout-soft: #f3eafd; --callout-soft-border: #e0cdfa; } .callout-warning { --callout-color: #f59e0b; --callout-soft: #fef4dd; --callout-soft-border: #fbe4b0; } .callout-example { --callout-color: #06b6d4; --callout-soft: #def5f9; --callout-soft-border: #b6e9f2; } .callout-quote { --callout-color: #64748b; --callout-soft: #eef1f5; --callout-soft-border: #d6dde6; } .callout-important, .callout-bug, .callout-fail { --callout-color: #ef4444; --callout-soft: #fdeaea; --callout-soft-border: #f9cdcd; } /* 暗色主题：低饱和暗调同色系底 */ html[data-theme="dark"] .callout-note { --callout-soft: #1a2240; --callout-soft-border: #2c3a6b; } html[data-theme="dark"] .callout-info { --callout-soft: #0f2433; --callout-soft-border: #1e3f57; } html[data-theme="dark"] .callout-tip { --callout-soft: #10281c; --callout-soft-border: #1e4a33; } html[data-theme="dark"] .callout-success { --callout-soft: #0c2b1c; --callout-soft-border: #1d5230; } html[data-theme="dark"] .callout-question{ --callout-soft: #241838; --callout-soft-border: #3d2760; } html[data-theme="dark"] .callout-warning { --callout-soft: #2d2110; --callout-soft-border: #4d3a1b; } html[data-theme="dark"] .callout-example { --callout-soft: #0e2830; --callout-soft-border: #1c4652; } html[data-theme="dark"] .callout-quote { --callout-soft: #1c2128; --callout-soft-border: #313a45; } html[data-theme="dark"] .callout-important, html[data-theme="dark"] .callout-bug, html[data-theme="dark"] .callout-fail { --callout-soft: #331818; --callout-soft-border: #572a2a; } /* ---------- 代码块 ---------- */ .markdown-body pre { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; line-height: 1.6; } .markdown-body pre code { background: transparent; font-size: 0.88rem; } .markdown-body code:not(pre code) { background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.88em; border: 1px solid var(--border); } /* 语言标签 + 复制按钮（JS 注入） */ .code-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-bottom: 1px solid var(--border); /* 与代码之间用线分隔 */ border-radius: var(--radius) var(--radius) 0 0; font-size: 0.8rem; color: var(--text-muted); } /* 语言名称：等宽字体 + 高对比色（--text），与浅背景和灰色复制按钮区分 */ .code-lang { font-family: var(--font-mono); font-weight: 600; color: var(--text); } /* 语言栏与代码无间距连成一体（抵消 .markdown-body > * + * 的 margin-top）， 分隔线由 .code-header 的 border-bottom 提供，故 pre 不再画顶边框 */ .code-header + pre { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .copy-btn { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; } .copy-btn:hover { color: var(--accent); background: var(--bg-soft); } /* ---------- MathJax 公式 ---------- */ .math-block { overflow-x: auto; overflow-y: hidden; padding: 6px 0; } .math-block mjx-container { display: block; margin: 0.4em 0; } .markdown-body mjx-container { overflow-x: auto; } /* ---------- Mermaid 图 ---------- */ pre.mermaid { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; font-size: 0.85rem; } .mermaid-svg { margin: 1.5em 0; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; overflow-x: auto; } /* mermaid 输出的 svg 是替换元素，text-align 管不住它，转成块级 + 左右 auto 居中 */ .mermaid-svg svg { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* 兜底：若 mermaid 以默认 auto-run 方式把 svg 注入 pre 内（未走 main.js 流程），同样居中 */ pre.mermaid svg { display: block; margin: 0 auto; max-width: 100%; height: auto; } .mermaid-error { padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.9rem; background: var(--bg-soft); } /* ---------- PlantUML ---------- */ .plantuml-figure { text-align: center; margin: 1.5em 0; } .plantuml-figure img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 12px; } .plantuml-fallback-hint { font-size: 0.85rem; color: var(--text-muted); padding: 8px 14px; background: var(--bg-soft); border-radius: var(--radius-sm); margin-bottom: 10px; } /* ---------- 目录 TOC：右侧浮动按钮 + 贴文章右侧的折叠抽屉 ---------- */ /* 背景图开关按钮与目录按钮同款圆钮，固定在其正下方 */ .toc-toggle, .toc-bg-toggle { position: fixed; top: 180px; right: 40px; z-index: 95; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--card-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow); transition: color 0.15s, border-color 0.15s; } .toc-bg-toggle { top: 234px; } /* 180 + 44 高度 + 10 间距 */ .toc-toggle:hover, .toc-bg-toggle:hover { color: var(--accent); } .toc-toggle svg, .toc-bg-toggle svg { width: 20px; height: 20px; } /* 抽屉贴在文章右侧、靠上（sticky 随滚动保持在视口内）；无边框无背景的纯文本目录 */ .toc { position: sticky; top: 80px; flex: 0 0 220px; align-self: flex-start; max-height: calc(100vh - 140px); overflow-y: auto; padding: 0; font-size: 0.85rem; display: none; /* 细滚动条：目录只是辅助导航，不抢正文注意力 */ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } body.toc-open .toc { display: block; } .toc::-webkit-scrollbar { width: 4px; height: 4px; } .toc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .toc::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .toc::-webkit-scrollbar-track { background: transparent; } /* 文章 + 目录整体：flex 让两者贴在一起，作为整体居中； wrap 使内部的上下篇 pager（flex-basis:100%）换行占满整行。 relative + z-index:1：文章页恒有全屏 hero 背景图（fixed z-index:0）， static 内容会被它盖住拦截点击（翻页按钮点不动）——始终抬升到背景图之上 */ .post-wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .post-wrap .post { flex: 1 1 0; min-width: 0; } /* Redefine 风格：小标题 + 文章标题 + 点线层级列表 */ /* 小标题紧贴文章标题上方：行高收紧且无 margin */ .toc-title { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); line-height: 1.2; margin-bottom: 0; } .toc .page-title { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 8px; } .toc ul { list-style: none; padding: 0 2px 12px 10px; } .toc li { line-height: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; transition: all 0.3s ease; } .toc li a { display: block; color: var(--text-secondary); border-left: 2px solid transparent; padding-left: 8px; transition: all 0.3s ease; } .toc li a:hover { color: var(--accent); } .toc li a.active { color: var(--toc-active); font-weight: 700; border-left-color: var(--toc-active); } /* 子级：点线左边界缩进（对应 Redefine 的 ol ol 嵌套线） */ .toc .toc-l2 { padding-left: 14px; border-left: 2px dotted var(--border-strong); } .toc .toc-l3 { padding-left: 26px; border-left: 2px dotted var(--border-strong); } /* 目录展开时：容器加宽以容纳「文章 + 目录」整体居中（244 = 24 间距 + 220 目录宽） */ body.toc-open main.container { max-width: calc(var(--content-width) + 244px); } /* 目录展开时：上下篇胶囊（post-wrap 内第二行）限制为文章列宽 （容器宽 - 244 目录列 + 间距），不延伸到目录下方 */ body.toc-open .post-pager { flex-basis: calc(100% - 244px); } /* 窄屏隐藏目录抽屉（避免挤压文章） */ @media (max-width: 900px) { .toc-toggle, .toc-bg-toggle { display: none; } body.toc-open .toc { display: none; } /* 窄屏目录已隐藏且无法展开，pager 恢复整行宽 */ body.toc-open .post-pager { flex-basis: 100%; } } /* ---------- 上下篇 ---------- */ /* 位于 post-wrap 内（背景图模式下随毛玻璃容器一起）：flex 换行占满整行， 与文章正文的间距由 post-wrap 的 row-gap 提供 */ .post-pager { display: flex; justify-content: space-between; gap: 16px; flex-basis: 100%; padding: 0 0 40px; } .post-pager a { color: var(--text-secondary); font-size: 0.95rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-pager a:hover { color: var(--accent); } .pager-next { text-align: right; } /* ---------- 评论 ---------- */ .post-comments { padding: 8px 0 48px; } .comments-title { font-size: 1.1rem; margin-bottom: 16px; } /* ---------- 归档 / 标签 / 分类 ---------- */ .page-title { font-size: 2rem; font-weight: 800; padding: 48px 0 8px; } .page-subtitle { color: var(--text-muted); font-size: 0.9rem; padding-bottom: 24px; } /* 毛玻璃面板（归档 / 标签 / 标签详情共用容器）： 与主页卡片同款，透过固定的 hero 背景图； z-index:1 使其绘制在 fixed 背景图（z-index:0）之上 */ .glass-panel, html.post-glass .post-wrap { position: relative; z-index: 1; margin: 28px 0 40px; padding: 28px 32px 8px; background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-glass); border-radius: var(--radius); box-shadow: var(--shadow); } /* 毛玻璃容器入场淡入 / 离场淡出（标签 / 分类 / 归档页共用）： JS 可用时（body.glass-anim）容器先透明微下移，双 rAF 后加 .page-loaded 触发过渡淡入；点击站内链接时 main.js 加 .leaving 快速淡出再跳转。 默认状态可见：无 JS 或 prefers-reduced-motion 时跳过动画直接显示 */ .glass-anim .glass-panel { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .glass-anim.page-loaded .glass-panel { opacity: 1; transform: none; } .glass-anim .glass-panel.leaving { opacity: 0; transform: translateY(10px); transition-duration: 0.18s, 0.18s; } @media (prefers-reduced-motion: reduce) { .glass-anim .glass-panel { opacity: 1; transform: none; transition: none; } } /* 主页卡片（分页换页）淡入：与 .glass-panel 的 page-loaded 同步。 入场逐张错开（transition-delay 由模板内联设置，每张 60ms）； 不做离场淡出——换页 / 离开首页时直接跳转，只保留淡入 */ .glass-anim .home-layout .post-card { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease; } .glass-anim.page-loaded .home-layout .post-card { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .glass-anim .home-layout .post-card { opacity: 1; transform: none; transition: none; } } /* 篇数徽标（年份胶囊 / 标签胶囊内共用）：小字圆角徽标 */ .count-badge { font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); color: var(--text-secondary); white-space: nowrap; } /* 归档页时间线（参照 hexo-theme-redefine）：年份标题 + 文章数胶囊 + 竖线圆点 */ .archive-year-block { padding: 16px 0 4px; } /* 年份与胶囊水平排列：年份固定 50px 宽使 4 位数字居中（中心 25px = 竖线中心），胶囊跟在其右侧 */ .archive-item-header { display: flex; align-items: center; gap: 24px; } .archive-year { width: 50px; text-align: center; font-size: 1.8rem; font-weight: 700; line-height: 1.2; color: var(--text); white-space: nowrap; } .archive-year-post-count { margin-top: 4px; } .archive-list-container .article-list { list-style: none; margin-left: 24px; /* 竖线中心 25px = 年份数字中心 */ padding: 6px 0; } .archive-list-container .article-item { position: relative; padding: 32px 0 8px 28px; /* 顶部留白放日期徽标，左侧留白放标题 */ border-left: 2px solid var(--border); /* 时间线竖线 */ } /* 日期徽标（MM-DD）：竖线右侧、与大节点保持间距、垂直中心对齐 */ .archive-list-container .article-item::before { content: attr(data-date); position: absolute; left: 20px; top: 2px; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* 时间大节点：白色/背景色圆点骑在竖线上，区分日期分组，hover 填充主题色 left = 竖线中心25 - 半宽6 - li padding box左缘28 = -9px（li 自身 2px 左边框计入偏移） */ .archive-list-container .article-item::after { content: ''; position: absolute; left: -8.9px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-muted); background: var(--bg); transition: background 0.2s ease, border-color 0.2s ease; } .archive-list-container .article-item:hover::after { background: var(--accent); border-color: var(--accent); } .archive-list-container .article-item a { display: block; color: var(--text); padding: 2px 0; transition: color 0.2s; } .archive-list-container .article-item a:hover { color: var(--accent); } .archive-list-container .article-title { position: relative; font-size: 1.05rem; } /* 文章小节点：每篇文章一个，纯色灰点骑在竖线上（Redefine 的 title::after 同款） left = 竖线中心25 - 半宽3.5 - title左缘56 = -34.5px */ .archive-list-container .article-title::after { content: ''; position: absolute; left: -33.8px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); /* 纯色灰 */ border: 1px solid var(--border); } /* 标签/分类胶囊云：椭圆胶囊（标签带 # 前缀 + 篇数徽标），点击跳转详情页 */ .tag-panel { padding: 48px 32px 32px; } .tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; /* 一行未占满时胶囊居中 */ gap: 14px; padding: 8px 0 16px; } .tag-pill, .category-pill { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; border: 1px solid var(--border-strong); border-radius: 999px; /* 椭圆 */ color: var(--text); background: var(--bg-soft); transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s; } .tag-pill:hover, .category-pill:hover { color: var(--accent); border-color: var(--accent); background: var(--bg); transform: translateY(-1px); } .tag-pill-name { font-size: 1.1rem; } /* 详情页面板大标题（标签/分类详情页左上角）：SVG 图标 + 名称 */ .timeline-panel { padding-bottom: 12px; } .panel-heading { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 800; color: var(--text); padding: 4px 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .panel-heading svg { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; } /* 分类胶囊：每行两个、无 # 前缀、条目放大 */ .category-panel { padding: 48px 32px 32px; } /* 两列 flex 布局：每行两个；总数为奇数时最后一项保持同宽， justify-content: center 自动将其居中（不再占满整行） */ .category-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 8px 0 16px; } .category-pill { flex-basis: calc(50% - 8px); justify-content: center; /* 胶囊内文字水平居中 */ padding: 13px 22px; gap: 12px; border-radius: 12px; /* 分类胶囊圆角改小（默认椭圆 999px） */ } .category-pill-name { font-size: 1.15rem; } /* 友链胶囊：双列布局（尺寸同分类页），头像占满胶囊最左侧 + 右侧昵称/签名 */ .friend-panel { padding: 48px 32px 32px; } .friend-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 8px 0 16px; } .friend-pill { display: flex; align-items: center; flex-basis: calc(50% - 8px); /* 与分类胶囊一致：每行两个 */ height: 64px; /* 固定胶囊高度：头像正方形的基准，内容垂直居中 */ padding: 0; /* 头像贴满左缘，不另留内边距 */ border-radius: 12px; overflow: hidden; /* 直角头像裁进胶囊圆角内 */ background: var(--bg-soft); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.2s; } .friend-pill:hover { border-color: var(--accent); transform: translateY(-2px); } /* 头像：高度撑满胶囊（64px），aspect-ratio 让宽度=高度 → 正方形适配胶囊高度 */ .friend-avatar { height: 100%; width: auto; aspect-ratio: 1 / 1; border-radius: 0; /* 直角，贴住胶囊最左侧 */ object-fit: cover; flex-shrink: 0; } /* 无头像：浅灰竖条占位（同样占满最左侧）+ 居中用户图标 */ .friend-avatar-empty { display: flex; align-items: center; justify-content: center; background: #eceef2; } .friend-avatar-empty svg { width: 55%; height: 55%; color: var(--text-muted); /* 图标用 muted 灰，随明暗主题自适应 */ } html[data-theme="dark"] .friend-avatar-empty { background: #4d5763; } .friend-info { display: flex; flex-direction: column; justify-content: center; /* 昵称/签名垂直居中于剩余空间 */ padding: 10px 16px; min-width: 0; } .friend-name { font-weight: 600; font-size: 1rem; color: var(--text); } .friend-desc { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 关于页：毛玻璃容器内的标题紧凑一点（glass-panel 已有内边距） */ .about-panel .post-header { padding: 8px 0 20px; } /* 关于页加宽：924 - 40(container) - 64(panel 内边距) = 820，文字区与文章页一致 */ .container-wide { max-width: 924px; } /* 关于页玻璃不透明度稍高（其余面板保持默认）。 背景图模式下的文章容器：容器高度数屏、透出面积远大于「我」页，同等透明度 下观感明显更透（headless 渲染实证 CSS 值相同）——不透明度提高至 0.94 做视觉补偿，保证任何滚动位置都不比「我」页透 */ /* 关于页 / 归档标签分类页容器：统一 0.88 透明度（视觉一致）； 文章页背景图模式（post-wrap）因面积更大做 0.94 视觉补偿 */ .about-panel, .glass-panel { background: rgba(255, 255, 255, 0.88); } html.post-glass .post-wrap { background: rgba(255, 255, 255, 0.94); } html[data-theme="dark"] .about-panel, html[data-theme="dark"] .glass-panel { background: rgba(13, 17, 23, 0.88); } html[data-theme="dark"].post-glass .post-wrap { background: rgba(13, 17, 23, 0.94); } /* 窄屏：友链胶囊单列 */ @media (max-width: 768px) { .friend-pill { flex-basis: 100%; } } /* ---------- 搜索 ---------- */ .search-panel { position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 16px 20px; } .search-box { max-width: var(--content-width); margin: 0 auto; } .search-box input { width: 100%; padding: 10px 16px; font-size: 1rem; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--text); outline: none; transition: border-color 0.2s; } .search-box input:focus { border-color: var(--accent); } .search-results { list-style: none; max-width: var(--content-width); margin: 12px auto 0; } .search-results li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); } .search-results li a:hover { background: var(--bg-soft); } .search-results .sr-date { color: var(--text-muted); font-size: 0.8rem; font-family: var(--font-mono); } /* ---------- 404 ---------- */ .nf { text-align: center; padding: 100px 0; } .nf-code { font-size: 6rem; font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nf-text { color: var(--text-secondary); margin: 8px 0 24px; } .nf-link { color: var(--accent); } /* ---------- 页脚 ---------- */ /* position: relative + z-index: 1 必须保留：盖在全屏 hero 背景图（.hero-bg，fixed z-index 0）之上， 否则滚动到底时页脚被背景图遮住（曾致页脚整块不可见）。 毛玻璃效果：Chrome 等浏览器正常渲染；Edge 走下方 html.edge 降级（禁用模糊， 保留半透明底 var(--card-glass)，低开销） */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-glass); padding: 14px 0 18px; margin-top: 40px; background: var(--card-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } .footer-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; text-align: center; /* 版权行颜色与页脚统计标签（如"文章总字数"）一致；统计数字另有 .footer-stats b 覆盖 */ color: var(--text-secondary); font-size: 0.85rem; } /* 页脚统计行：首页展示（文章总字数 / 访问人数 / 总访问量 / 已运行天数） */ .footer-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin-top: 8px; color: var(--text-secondary); font-size: 0.85rem; } .footer-stats b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; /* 数字跳动时宽度不抖动 */ } /* ---------- 其他 ---------- */ .empty { text-align: center; color: var(--text-muted); padding: 60px 0; } ::selection { background: var(--mark-bg); color: var(--mark-text); } /* 滚动条 */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } ::-webkit-scrollbar-track { background: transparent; }