/* * 58120-theme · 前台样式（M04 博客园式三栏 + 掘金视觉 Token） * Design Token 见 docs/58120.cn-产品与UI设计说明书.md §六 */ /* 一键同步结果浮层（M04.3 文章详情页） */ .s58120-modal-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; } .s58120-modal { background: var(--c-surface); width: 100%; max-width: 420px; border-radius: var(--radius-card); box-shadow: 0 8px 30px rgba(0, 0, 0, .22); overflow: hidden; font-family: var(--font); } .s58120-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--c-border-2); font-size: 15px; } .s58120-modal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--c-text-3); cursor: pointer; } .s58120-modal-list { list-style: none; margin: 0; padding: 12px 16px; max-height: 50vh; overflow: auto; } .s58120-modal-list li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--c-text-2); line-height: 1.5; } /* 结果行内容为单一 flex 项（此前文本+链接各自成项，长文案会碎成竖排） */ .s58120-modal-list li .s-txt { flex: 1; min-width: 0; } /* 结果行内链接（下载/脚本/去发帖等）不折行 */ .s58120-modal-list li a { white-space: nowrap; } .s58120-modal-list .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--c-text-3); } .s58120-modal-list .s-synced .dot { background: var(--c-success); } .s58120-modal-list .s-relay .dot { background: var(--c-primary); } .s58120-modal-list .s-skipped .dot { background: var(--c-warning); } .s58120-modal-list .s-failed .dot { background: var(--c-danger); } .s58120-modal-list .s-pending .dot { background: var(--c-warning); animation: s58120-pulse 1s ease-in-out infinite; } @keyframes s58120-pulse { 50% { opacity: 0.25; } } .s58120-modal-list .s-synced { color: var(--c-success); } .s58120-modal-list .s-failed { color: var(--c-danger); } .s58120-modal-btn { display: block; margin: 0 16px 12px; padding: 10px 12px; background: var(--c-primary); color: var(--c-on-primary); text-align: center; text-decoration: none; border-radius: var(--radius-btn); font-size: 14px; } .s58120-modal-btn:hover { background: var(--c-primary-hover); color: var(--c-on-primary); } .s58120-modal-close { width: calc(100% - 32px); margin: 0 16px 16px; padding: 9px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-btn); font-size: 14px; color: var(--c-text-2); cursor: pointer; } .s58120-modal-close:hover { background: var(--c-border-2); } .s58120-modal-login { padding: 0 16px 4px; border-top: 1px solid var(--c-border-2); margin-top: 4px; padding-top: 10px; } .s58120-modal-tip { font-size: 12.5px; color: var(--c-text-3); line-height: 1.6; margin: 0 0 8px; } .s58120-modal-login-link { display: inline-block; margin: 0 8px 8px 0; padding: 6px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-btn); font-size: 13px; color: var(--c-text-2); text-decoration: none; } .s58120-modal-login-link:hover { background: var(--c-border-2); color: var(--c-text); } /* 扩展安装引导弹窗（M14） */ .s58120-modal-ext { max-width: 520px; } .s58120-modal-ext .s58120-modal-tip { padding: 0 16px; } .s58120-ext-steps { margin: 4px 16px 8px 34px; padding: 0; font-size: 13px; line-height: 1.9; color: var(--c-text-2); } .s58120-ext-steps code { background: var(--c-border-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; } .s58120-ext-steps a { color: var(--c-primary); } .s58120-ext-foot { display: flex; gap: 8px; padding: 4px 16px 16px; } .s58120-ext-foot .s58120-modal-close { width: auto; margin: 0; flex: 1; } .s58120-ext-dl, .s58120-ext-retry { flex: 1; text-align: center; border: 1px solid var(--c-border); border-radius: var(--radius-btn); padding: 9px 12px; font-size: 14px; cursor: pointer; text-decoration: none; color: var(--c-text-2); background: var(--c-bg); } .s58120-ext-dl { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); } .s58120-ext-dl:hover { background: var(--c-primary-hover); color: var(--c-on-primary); } .s58120-ext-retry:hover { background: var(--c-border-2); } .s58120-ext-retry:disabled { opacity: 0.6; cursor: not-allowed; } /* 同步助手安装引导页（M14，/sync-helper/，CSDN 式图文教程） */ .s58120-helper { max-width: 760px; margin: 32px auto; padding: 0 16px; } .s58120-helper-card { background: var(--c-bg, #fff); border: 1px solid var(--c-border, #eaeaea); border-radius: 14px; padding: 28px 32px 32px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .s58120-helper-h1 { font-size: 22px; margin: 0 0 10px; } .s58120-helper-lead { color: var(--c-text-2, #666); line-height: 1.8; margin: 0 0 16px; } .s58120-helper-lead b { color: var(--c-text, #222); } .s58120-helper-status { font-size: 13px; padding: 8px 12px; border-radius: 8px; margin: 0 0 18px; background: var(--c-border-2, #f4f4f5); } .s58120-helper-status.ok { color: #1a7f37; background: #e7f6ec; } .s58120-helper-status.warn { color: #b54708; background: #fef3e6; } .s58120-helper-h2 { font-size: 16px; margin: 18px 0 8px; } .s58120-helper-p { color: var(--c-text-2, #666); line-height: 1.8; } .s58120-helper-actions { display: flex; gap: 10px; margin: 14px 0 20px; flex-wrap: wrap; } .s58120-helper-actions .s58120-ext-dl, .s58120-helper-actions .s58120-ext-retry { flex: 0 0 auto; min-width: 160px; } .s58120-helper-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-border, #eaeaea); color: var(--c-text-2, #666); font-size: 13px; } .s58120-helper-foot a { color: var(--c-primary, #2f6fed); } /* 同步平台选择面板（对齐 CSDN「同步到多平台」交互，M04.3） */ .s58120-modal-picker { max-width: 820px; border-radius: 12px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .s58120-modal-picker .s58120-modal-head { padding: 20px 24px 12px; font-size: 17px; border-bottom: none; flex: none; } .s58120-modal-picker .s58120-modal-x { font-size: 24px; width: 32px; height: 32px; border-radius: 50%; } .s58120-modal-picker .s58120-modal-x:hover { background: var(--c-bg); color: var(--c-text); } /* 标题右上角：刷新登录状态图标 + 关闭按钮 */ .s58120-modal-head-btns { display: flex; align-items: center; gap: 8px; } .s58120-prefresh { border: 0; background: transparent; font-size: 19px; width: 32px; height: 32px; border-radius: 50%; color: var(--c-text-3); cursor: pointer; line-height: 1; padding: 0; } .s58120-prefresh:hover { background: var(--c-bg); color: var(--c-primary); } .s58120-prefresh:disabled { cursor: wait; } .s58120-prefresh.is-busy { animation: s58120-spin 0.8s linear infinite; } @keyframes s58120-spin { to { transform: rotate(360deg); } } .s58120-modal-picker .s58120-modal-tip { padding: 0 24px; font-size: 13px; color: var(--c-text-3); } .s58120-pmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 24px 8px; } .s58120-pmode { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; border: 1px solid var(--c-border-2); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; } .s58120-pmode:hover { border-color: #b9c2ce; } .s58120-pmode:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent); } .s58120-pmode b { font-size: 14px; color: var(--c-text); } .s58120-pmode i { font-style: normal; font-size: 12.5px; color: var(--c-text-3); } .s58120-pnote { display: flex; align-items: center; gap: 8px; margin: 8px 24px 4px; padding: 11px 14px; border: 1px solid var(--c-border-2); border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--c-text); } .s58120-pnote:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent); } .s58120-pnote i { font-style: normal; color: var(--c-text-3); font-size: 12px; } .s58120-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 24px 14px; max-height: 46vh; overflow-y: auto; overflow-x: hidden; } .s58120-pgrid::-webkit-scrollbar { width: 6px; } .s58120-pgrid::-webkit-scrollbar-thumb { background: #d3d9e0; border-radius: 3px; } .s58120-pgrid::-webkit-scrollbar-thumb:hover { background: #b9c2ce; } .s58120-pcard { display: flex; flex-direction: column; gap: 8px; padding: 13px 16px; border: 1px solid var(--c-border-2); border-radius: 10px; cursor: pointer; position: relative; background: var(--c-surface); transition: border-color .14s, transform .14s, box-shadow .14s, background .14s; } .s58120-pcard:hover { border-color: #b9c2ce; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 28, 40, .08); } /* 不可同步（未登录/未配置）：不预选、不可勾选，去登录后才可同步（CSDN 逻辑） */ .s58120-pcard-off { cursor: not-allowed; } .s58120-pcard-off:hover { border-color: var(--c-border-2); transform: none; box-shadow: none; } .s58120-pcard-off .s58120-pcheck { border-style: dashed; border-color: #d5dae1; } .s58120-pcard:has(input:checked) { border-color: var(--pc, var(--c-primary)); background: color-mix(in srgb, var(--pc, var(--c-primary)) 5%, var(--c-surface)); } .s58120-pcard input { position: absolute; opacity: 0; pointer-events: none; } /* 右上角可见勾选框（CSDN 同款）：选中用平台品牌色填充 */ .s58120-pcheck { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border: 1.5px solid var(--c-control); border-radius: 5px; background: var(--c-surface); transition: background .12s, border-color .12s; } .s58120-pcard:has(input:checked) .s58120-pcheck { background: var(--pc, var(--c-primary)); border-color: var(--pc, var(--c-primary)); } .s58120-pcard:has(input:checked) .s58120-pcheck::after { content: '✓'; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff; font-size: 12px; line-height: 1; } .s58120-pcard-logo { width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } .s58120-pcard-logo svg { width: 22px; height: 22px; display: block; } .s58120-pcard-head { display: flex; align-items: center; gap: 8px; padding-right: 22px; min-width: 0; } .s58120-pcard-name { font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s58120-pcard-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .s58120-pcard-status { font-size: 12.5px; color: var(--c-text-3); white-space: nowrap; } /* 选择器卡片上的同步状态（对齐 CSDN：进度/结果实时写在各平台卡片下方） */ .s58120-pcard-sync { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--c-text-2, var(--c-text-3)); word-break: break-word; } .s58120-pcard-sync a { color: var(--c-primary); } .s58120-pcard-sync.s58120-ps-synced { color: var(--c-success); } .s58120-pcard-sync.s58120-ps-failed { color: var(--c-danger); } .s58120-pcard-sync.s58120-ps-skipped { color: var(--c-warning); } .s58120-pcard-sync.s58120-ps-pending { animation: s58120-pulse 1s ease-in-out infinite; } /* 同步进行中：锁定交互——隐藏发布方式/提示/出处选项，未选中的卡片变暗 */ .s58120-syncing .s58120-pmodes, .s58120-syncing .s58120-modal-tip, .s58120-syncing .s58120-pnote { display: none; } .s58120-pcard-idle { opacity: 0.45; } /* 「去登录 / 去发帖」：品牌色描边小按钮（CSDN 同款） */ .s58120-pcard-login { font-size: 12px; color: var(--pc, var(--c-primary)); text-decoration: none; white-space: nowrap; border: 1px solid var(--pc, var(--c-primary)); border-radius: 6px; padding: 2px 10px; transition: background .12s, color .12s; } .s58120-pcard-login:hover { background: var(--pc, var(--c-primary)); color: var(--c-on-primary); text-decoration: none; } .s58120-cfg { color: var(--c-primary); text-decoration: none; font-size: 12.5px; white-space: nowrap; } .s58120-cfg:hover { text-decoration: underline; } .s58120-psect { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--c-text); padding: 8px 0 0; } .s58120-pfoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 18px; border-top: 1px solid var(--c-border-2); margin-top: 8px; font-size: 13px; color: var(--c-text-3); } .s58120-pfoot-btns { display: flex; gap: 10px; } .s58120-pcancel, .s58120-pgo { border: 1px solid var(--c-border-2); background: var(--c-surface); color: var(--c-text); border-radius: 8px; padding: 8px 20px; font-size: 13.5px; cursor: pointer; } .s58120-pgo { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); min-width: 96px; } .s58120-pgo:hover { background: var(--c-primary-hover); } .s58120-pgo:disabled { opacity: 0.5; cursor: not-allowed; } /* 平台 Cookie 配置（弹窗内粘贴登录态） */ .s58120-pcookie { border: 1px solid var(--pc, var(--c-primary)); background: var(--c-surface); color: var(--pc, var(--c-primary)); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; white-space: nowrap; } .s58120-pcookie:hover { background: var(--pc, var(--c-primary)); color: var(--c-on-primary); } .s58120-cookie-modal { max-width: 480px; width: 92%; } .s58120-cookie-input { display: block; width: calc(100% - 32px); box-sizing: border-box; margin: 0 16px; min-height: 120px; border: 1px solid var(--c-border-2); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; font-family: Consolas, Menlo, monospace; color: var(--c-text); background: var(--c-bg); resize: vertical; } .s58120-cookie-input:focus { outline: none; border-color: var(--c-primary); } .s58120-cookie-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px; } .s58120-cookie-login { font-size: 12.5px; color: var(--c-primary); text-decoration: none; } .s58120-cookie-login:hover { text-decoration: underline; } .s58120-cookie-save { border: none; background: var(--c-primary); color: var(--c-on-primary); border-radius: 6px; padding: 6px 18px; font-size: 13px; cursor: pointer; } .s58120-cookie-save:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 720px) { .s58120-pgrid { grid-template-columns: repeat(2, 1fr); padding: 4px 16px 12px; } .s58120-pmodes { padding: 12px 16px 6px; } .s58120-modal-picker .s58120-modal-head { padding: 16px 16px 10px; } .s58120-modal-picker .s58120-modal-tip { padding: 0 16px; } .s58120-pnote { margin: 8px 16px 4px; } .s58120-pfoot { padding: 12px 16px 16px; } } @media (max-width: 480px) { .s58120-pgrid { grid-template-columns: 1fr; } .s58120-pmodes { grid-template-columns: 1fr; } } :root { /* 配色模式（M04-IA13）： `light dark` = 两种都支持，**由浏览器按 `prefers-color-scheme` 选**（默认跟随系统）； 用户在顶栏选浅/深时，JS 会给 写 `data-theme="light|dark"`， 下面 `:root[data-theme=…]` 规则改写 `color-scheme`，浏览器随即改用指定配色 —— 于是「自动」与「手动」共用同一套 light-dark() 取值，不存在第二份深色定义。 顺带把原生控件（滚动条 / 输入框 / 勾选框 / 日期选择器）一起带入对应配色。 */ color-scheme: light dark; /* 主色令牌（2026-10-07 可访问性收口）： 品牌亮绿 #2DAE67 与白底只有 **2.86:1** —— 既不能当小字文字色（绿字）， 也不能当按钮底色（白字），两者都不达 WCAG AA(4.5:1)。 故把 `--c-primary` 定义为 **AA 安全绿 #17804A（4.97:1）**，承担所有 「文字色 / 按钮底色 / 边框」角色；品牌亮绿另立 `--c-primary-bright`， 只用于**不承载小字**的装饰（色条、下划线、图标）。 实测（_e2e/a11y_audit.js）：改前单页最高 166 处对比度违规，改后见 CHANGELOG。 */ --c-primary: #17804A; --c-primary-hover: #135F37; /* 悬停更深（7.7:1）：原 #239A59 只有 3.0:1，悬停反而掉出 AA */ --c-primary-bright: #2DAE67; --c-primary-soft: rgba(45, 174, 103, .08); /* S2（2026-10-11）主色**深色档**：做大面积深底区块用（Hero 深底、焦点大卡、页脚强调带）。 此前主色只有一档 + 一个装饰亮绿，缺「深」这一层，导致「大气」所需的 大块压场色无处可取（整屏90% 是灰底 + 白卡，明度层级只有两级）。 对比度：#0B3D24 在白底 10.8:1，作深底时配白字 14.2:1 —— 均远超 AA。 ⚠ 纪律（与 --c-primary-bright 同源）：**只作底色，不承载小字文字**。 需要深底上的文字色时请取 #FFFFFF。*/ --c-primary-deep: #0B3D24; /* 主色**浅色档**：浅底上的品牌文字/图标底/标签底（如场景带图标底、场景卡 hover 底）。 */ --c-primary-tint: #E8F5EE; /* 实心主色底上的文字（按钮 / chips / 分页当前页）。抽成令牌是为了深色模式： 深色下主色变亮绿，白字会掉到 2.1:1，必须换成深墨绿（≈9:1）。 */ --c-on-primary: #FFFFFF; /* 表单控件描边（复选/输入框边缘）：WCAG 1.4.11 要求 ≥3:1，浅色 #c9ced6 恰好达标 */ --c-control: #c9ced6; --c-accent: #FF7A45; --c-success: #52B03A; --c-warning: #F5A623; --c-danger: #E8402A; --c-bg: #F5F6F8; --c-surface: #FFFFFF; --c-border: #ECEEF0; --c-border-2: #F2F3F5; --c-text: #1D2129; --c-text-2: #4E5969; /* 三级文字（日期 / 计数 / 页脚等小字）：由 #86909C（白底 3.24:1）加深到 #666D78。 取 #666D78 而非 #6B7280：三级文字大量出现在**页面灰底 #F5F6F8** 上， #6B7280 在那里的实测比值只有 4.47（差 0.03 未达 AA），再深一档才稳过。 */ --c-text-3: #666D78; --c-code-bg: #F6F8FA; --radius-card: 12px; --radius-btn: 8px; --radius-tag: 6px; /* 控件高度四档：全站交互控件只允许用这四档（历史上的 40px / 47px 等魔数已收敛到这里） */ --ctl-sm: 32px; /* 标签 / 列表行 / 次级输入 */ --ctl: 34px; /* 普通按钮 / 下拉 / 面板小控件 */ --ctl-lg: 36px; /* 顶栏输入 / 图标按钮 */ --ctl-hero: 44px; /* 主 CTA（首页搜索）与顶栏场景条 */ /* 阴影颜色单独成令牌再拼成 box-shadow：`light-dark()` 只接受 ， 整条 `0 1px 2px rgba(...)` 不是颜色，包不进去（这点踩过一次）。 */ --c-shadow-sm: rgba(0, 21, 41, .04); --c-shadow: rgba(0, 21, 41, .06); --c-shadow-lg: rgba(0, 21, 41, .10); --shadow-sm: 0 1px 2px var(--c-shadow-sm); --shadow: 0 2px 10px var(--c-shadow); --shadow-lg: 0 10px 28px var(--c-shadow-lg); --container: 1200px; --gap: 16px; --container-pad: 16px; /* 顶栏高度 = 字标高 48px + 上下留白 8px；改字标尺寸时同步这里，粘性偏移自动跟随 */ --header-h: 64px; --sticky-top: calc(var(--header-h) + 56px); /* 顶栏 + 分类 chips 条 + 间距，各粘性栏统一基准 */ --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Source Han Sans", sans-serif; --font-code: "JetBrains Mono", Consolas, Menlo, monospace; /* 「内嵌面」：比卡片底更深/更浅一档的小面板（场景卡、.kb-panel 等）， 让卡片内部有层次而不需要用边框（P2 视觉语言「三层浮起」）。 */ --c-tile: #F5F6F8; } /* ------------------------------------------------------------ 手动切换配色模式（M04-IA13） `data-theme` 由 header.php 的防闪内联脚本在首次绘制前写入；这里只负责把 「用户选择」翻译成 `color-scheme`，其余配色全部由 light-dark() 自动跟随。 ------------------------------------------------------------ */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* 双值令牌：**同一处**给出浅 / 深两种取值，由 color-scheme 决定用哪一个。 包在 `@supports` 里是为了优雅降级 —— 不支持 `light-dark()` 的旧浏览器 会整块跳过，退回上面 `:root` 的浅色值（而不是让 var() 失效导致整站变透明）。 ⚠ 令牌值必须在 `:root`（含上面的 @supports）**之外**的地方引用才安全， 故此处只放颜色类令牌，尺寸 / 圆角等与配色无关的令牌保持单值。 */ @supports (color: light-dark(#fff, #000)) { :root { --c-primary: light-dark(#17804A, #4ECB84); --c-primary-hover: light-dark(#135F37, #6FDD9F); --c-primary-bright: light-dark(#2DAE67, #45C077); --c-primary-soft: light-dark(rgba(45, 174, 103, .08), rgba(78, 203, 132, .16)); /* S2 深/浅档的深色模式取值。⚠ 注意方向与主色相反： 深色模式下深底需要**提亮**（否则与 --c-bg #14161A 糊在一起、失去边界）， 浅色档则需**压暗**（浅色在深底上刺眼）。这与 3708-3715 封面渐变 「压暗」的方向也相反 —— 那批是渐变亮端，此处是整块底色。 */ --c-primary-deep: light-dark(#0B3D24, #16261D); --c-primary-tint: light-dark(#E8F5EE, #17281E); --c-on-primary: light-dark(#FFFFFF, #0E1A13); --c-control: light-dark(#c9ced6, #6B7686); --c-accent: light-dark(#FF7A45, #FF9B6B); --c-success: light-dark(#52B03A, #6FCF97); --c-warning: light-dark(#F5A623, #F5B95B); --c-danger: light-dark(#E8402A, #FF8A7A); --c-bg: light-dark(#F5F6F8, #14161A); --c-surface: light-dark(#FFFFFF, #1C1F25); --c-border: light-dark(#ECEEF0, #2B3038); --c-border-2: light-dark(#F2F3F5, #23272E); --c-text: light-dark(#1D2129, #E8EAED); --c-text-2: light-dark(#4E5969, #B4BBC6); --c-text-3: light-dark(#666D78, #99A1AE); --c-code-bg: light-dark(#F6F8FA, #0F1116); --c-tile: light-dark(#F5F6F8, #23262D); --c-shadow-sm: light-dark(rgba(0, 21, 41, .04), rgba(0, 0, 0, .5)); --c-shadow: light-dark(rgba(0, 21, 41, .06), rgba(0, 0, 0, .55)); --c-shadow-lg: light-dark(rgba(0, 21, 41, .10), rgba(0, 0, 0, .6)); } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--c-bg); color: var(--c-text); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* 长不可断串（URL / 型号 / 哈希）不得撑破视口：采集稿正文里的「原文：」 在 390px 下会把整页顶出 100~190px 横向滚动条（实测：抽样 14 篇中 4 篇、 全部来自当日自动采集批次）。break-word 只在会溢出时才断词，不影响 min-content。 */ overflow-wrap: break-word; } a { color: var(--c-primary); text-decoration: none; } a:hover { color: var(--c-primary-hover); } img { max-width: 100%; } /* 仅屏幕阅读器可见（与 WP 核心同名约定，核心给评论列表也用这一套）。 用途：给区块补可访问名 / 补标题层级，而**视觉零变化**—— 例：单篇页正文前的 `

正文

`。 */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; border: 0; padding: 0; margin: -1px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } /* ---------- 顶部条（博客园式深色顶栏） ---------- */ .site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; } .topbar { display: flex; align-items: center; gap: 16px; height: var(--header-h); transition: height .18s ease; } .brand { font-size: 20px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 8px; } .brand .dot { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); display: inline-block; } /* 站点品牌标（图形随主题 assets/logo/，字面量走配置）：优先 logo 图，缺省回退内联 SVG mark */ .brand-mark { width: 30px; height: 30px; flex: none; display: block; } /* 58120 整幅字标：高 48px（「58120」约 34px、下排站名约 10px），宽按原比例约 109px */ .brand-logo { height: 48px; width: auto; flex: none; display: block; transition: height .18s ease; } .brand-name { letter-spacing: .2px; } /* 顶栏滚动收缩（桌面/平板 ≥769px）：首屏 80px（品牌优先）→ 滚动 60px（阅读空间优先）。 由 assets/main.js 切换 html.is-scrolled；高度与字标尺寸统一由 --header-h 驱动，粘性栏偏移自动跟随。 移动端顶栏本就自适应高度（.topbar{height:auto}），不参与收缩。 */ @media (min-width: 769px) { html.is-scrolled { --header-h: 52px; } html.is-scrolled .brand-logo { height: 38px; } } .search-box { flex: 1; max-width: 420px; margin-left: auto; position: relative; } .search-box input { width: 100%; height: var(--ctl-lg); border: 1px solid var(--c-border); border-radius: var(--radius-btn); padding: 0 12px 0 34px; font-size: 14px; background: var(--c-bg); color: var(--c-text); transition: border-color .15s, background .15s; } .search-box input:hover { background: var(--c-surface); border-color: var(--c-control); } .search-box input:focus { outline: none; background: var(--c-surface); border-color: var(--c-primary); } .search-box input::placeholder { color: var(--c-text-3); } /* 搜索图标改为内联 SVG（data URI）：emoji 在 Windows 下由系统彩色字体渲染， 与全站线性扁平风格冲突，且 macOS / Android / Windows 字形差异明显。 */ .search-box::before { content: ""; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.6 16.6 3.9 3.9'/%3E%3C/svg%3E"); background-size: 15px 15px; background-repeat: no-repeat; pointer-events: none; } .topnav { display: flex; gap: 18px; font-size: 14px; } .topnav a { color: var(--c-text-2); } .topnav a:hover { color: var(--c-primary); } .top-actions { display: flex; gap: 10px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl); padding: 0 14px; border-radius: var(--radius-btn); font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: .15s; } .btn-primary { background: var(--c-primary); color: var(--c-on-primary); } .btn-primary:hover { background: var(--c-primary-hover); color: var(--c-on-primary); } .btn-ghost { border-color: var(--c-border); color: var(--c-text-2); background: transparent; } .btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); } /* ---------- 分类 chips 条 ---------- */ .cat-bar { background: var(--c-surface); border-bottom: 1px solid var(--c-border-2); overflow-x: auto; } /* 顶栏场景条（对外导航轴）：下划线 tab 式。 与第 1 行文字导航形成「主行 / 栏目行」的视觉层级差（原先两行都是胶囊/文字，权重相同）。 此处曾是 15 大类胶囊条，与左侧「知识分类」同源重复，见 CHANGELOG IA-01 / IA-02。 */ .cat-chips { display: flex; gap: 2px; padding: 0 16px; white-space: nowrap; } .cat-chips a { position: relative; display: inline-flex; align-items: center; height: var(--ctl-hero); padding: 0 13px; border-radius: 0; font-size: 13.5px; color: var(--c-text-2); background: transparent; } .cat-chips a:hover { color: var(--c-primary); } .cat-chips a.active { color: var(--c-primary); font-weight: 600; } .cat-chips a.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; /* 装饰性色条用品牌亮绿（不承载文字，无需 AA） */ background: var(--c-primary-bright); } /* ---------- 三栏布局（博客园式：左竖排菜单 + 信息流 + 右排行边栏） ---------- */ .layout { display: grid; grid-template-columns: 72px minmax(0, 1fr) 300px; gap: var(--gap); padding-top: var(--gap); align-items: start; } .col-nav, .col-right { position: sticky; top: var(--sticky-top); } /* Grid/Flex 项默认 min-width:auto 会被长内容撑宽，统一收敛 */ .col-nav, .col-main, .col-right { min-width: 0; } /* 左侧竖排小菜单（对齐博客园左栏） */ .col-nav { background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-card); padding: 6px 0; } .col-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0; font-size: 12px; color: var(--c-text-2); } .col-nav a .ic { font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 18px; } .col-nav a .ic svg { width: 18px; height: 18px; display: block; } .col-nav a:hover { color: var(--c-primary); background: var(--c-bg); } .card { background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-card); padding: 14px; margin-bottom: var(--gap); box-shadow: var(--shadow-sm); } .card h3, .card h2.kb-sec-h { margin: 0 0 10px; font-size: 14px; color: var(--c-text); display: flex; align-items: center; justify-content: space-between; } /* 区块标题的「更多 →」：原为 --c-text-3（#86909C，白底约 3.0:1，未达 WCAG AA 4.5:1）， 改用 --c-text-2（约 6.9:1）。层级靠字号（12px vs 14px）而非对比度不足来体现。 */ .card h3 .more, .card h2.kb-sec-h .more { font-size: 12px; color: var(--c-text-2); font-weight: 400; } /* 分类树 */ .cat-tree { list-style: none; margin: 0; padding: 0; } .cat-tree > li { border-bottom: 1px solid var(--c-border-2); } .cat-tree > li:last-child { border-bottom: none; } .cat-tree .cat-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 600; color: var(--c-text); } .cat-tree .cat-top .count { color: var(--c-text-3); font-weight: 400; font-size: 12px; } .cat-tree .cat-sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 12px; } .cat-tree .cat-sub li { padding: 4px 0; } .cat-tree .cat-sub a { color: var(--c-text-2); font-size: 13px; } .cat-tree .cat-sub a:hover { color: var(--c-primary); } /* 标签云 */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .tag-cloud a { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-tag); background: var(--c-bg); color: var(--c-text-2); } .tag-cloud a:hover { background: var(--c-primary); color: var(--c-on-primary); } /* 归档日历（简化） */ .archive-cal { font-size: 12px; color: var(--c-text-2); } /* ---------- 信息流 ---------- */ .feed-tabs { display: flex; gap: 4px; background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-card); padding: 6px; margin-bottom: var(--gap); } .feed-tabs a { padding: 7px 18px; border-radius: var(--radius-btn); font-size: 14px; color: var(--c-text-2); } .feed-tabs a.active { background: var(--c-primary); color: var(--c-on-primary); } .post-card { background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-card); padding: 16px 20px 12px; margin-bottom: var(--gap); box-shadow: var(--shadow-sm); transition: box-shadow .18s, border-color .18s, transform .18s; } .post-card:hover { box-shadow: var(--shadow-lg); border-color: #e3e7ec; transform: translateY(-2px); } .badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: var(--radius-tag); margin-right: 6px; vertical-align: middle; } /* 徽标是 11px 小字，浅底 + 亮色字普遍不达 AA（实测 badge-orig 原为 2.50:1）： 统一改用与 `.kb-post-type.is-*` 同一批已按 AA 挑过的深色值。 */ .badge-top { background: #FFF3E8; color: #A8442A; } .badge-fine { background: #E8F3FF; color: #2F5FA8; } .badge-orig { background: #E8F8EE; color: #1E7A36; } /* 列表项主体：缩略图 + 标题/摘要（博客园式） */ .post-row { display: flex; gap: 14px; } .post-thumb { flex: none; width: 110px; height: 74px; border-radius: var(--radius-btn); overflow: hidden; background: var(--c-bg); } .post-main { flex: 1; min-width: 0; } .post-card h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card h2 a { color: var(--c-primary); } .post-card h2 a:hover { color: var(--c-primary-hover); } .post-excerpt { color: var(--c-text-2); font-size: 13px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-text-3); flex-wrap: wrap; border-top: 1px solid var(--c-border-2); padding-top: 8px; } .post-meta .author { color: var(--c-primary); } .post-meta .author:hover { color: var(--c-primary-hover); } .post-meta .tags a { color: var(--c-primary); } .post-meta .dot-sep::before { content: "·"; margin: 0 4px; color: var(--c-border); } /* 右栏热榜 */ .rank-list { list-style: none; margin: 0; padding: 0; counter-reset: r; } .rank-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--c-border-2); font-size: 13px; } .rank-list li:last-child { border-bottom: none; } .rank-list .idx { width: 18px; height: 18px; flex: none; border-radius: 4px; background: var(--c-bg); color: var(--c-text-3); font-size: 12px; display: flex; align-items: center; justify-content: center; } /* 前三名徽标：原用亮色底 + 白字，实测白字对比度仅 2.03 / 2.59 / 4.04（均不达 AA）。 保留「前三名有颜色」的语言，改用同色系深底（5.4 / 5.3 / 5.1:1）。 */ .rank-list li:nth-child(1) .idx { background: #C0392B; color: #fff; } .rank-list li:nth-child(2) .idx { background: #A8550A; color: #fff; } .rank-list li:nth-child(3) .idx { background: #7E6A0B; color: #fff; } .rank-list .t { flex: 1; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-list .v { color: var(--c-text-3); font-size: 12px; } .author-rank { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; } .author-rank .ava { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; } .notice { font-size: 13px; color: var(--c-text-2); line-height: 1.6; } /* ---------- 文章详情 ---------- */ .article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); padding-top: var(--gap); align-items: start; } .article { background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-card); padding: 28px 32px; box-shadow: var(--shadow-sm); } .article h1 { font-size: 26px; line-height: 1.4; margin: 0 0 14px; } .article-meta { display: flex; align-items: center; gap: 14px; color: var(--c-text-3); font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border-2); margin-bottom: 18px; flex-wrap: wrap; } .article-meta .act { margin-left: auto; display: flex; gap: 8px; } .article-body { font-size: 16px; line-height: 1.8; color: var(--c-text); } .article-body h2, .article-body h3 { margin: 1.4em 0 .6em; line-height: 1.4; } .article-body pre { background: var(--c-code-bg); padding: 14px; border-radius: var(--radius-btn); overflow-x: auto; } .article-body code { font-family: var(--font-code); font-size: 13px; background: var(--c-code-bg); padding: 2px 6px; border-radius: 4px; } .article-body pre code { background: none; padding: 0; } .article-body blockquote { border-left: 3px solid var(--c-primary); margin: 1em 0; padding: 4px 14px; color: var(--c-text-2); background: var(--c-bg); } /* 正文图（2026-10-23）：行内 → 块级居中。原为行内左对齐，窄图贴左、宽图撑满， 同一篇里参差；块级 + margin:auto 后所有正文图都走同一套居中对齐。 */ .article-body img { border-radius: var(--radius-btn); margin: 12px auto; display: block; max-width: 100%; height: auto; } /* 正文配图显示窗：figure 统一居中定宽（≤720px，正文窗 ~760px 内收一档更耐看）， 图注小字居中 —— 注入的 .stock-fig 带「图库来源 + 摄影师」署名图注（合规要求）， 此前无任何样式，与正文默认字号混在一起。 */ .article-body figure { max-width: 720px; margin: 18px auto; } .article-body figure img { max-width: 100%; height: auto; } .article-body figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--c-text-3); text-align: center; } /* 图库配图（.stock-fig）：固定窗口高 + cover 裁切。 注入的是 1280×848 通用素材，按自然比例在 720px 窗里会塌出 ≈478px 竖高， 把正文节奏打散；280px 窗口 + 圆角 + 图注，形态与文章头图（300px）一致。 只约束 .stock-fig：正文里若有技术截图/表格图，保留自然比例（上面 figure 规则）。 */ .article-body .stock-fig img { height: 280px; object-fit: cover; } .article-body table { border-collapse: collapse; width: 100%; margin: 1em 0; } .article-body th, .article-body td { border: 1px solid var(--c-border); padding: 8px 12px; } /* 封面图：详情头图 + 信息流缩略图 2026-10-23：max-height 420 → 300px。420px 时 1280×848 的配图几乎按原比例 全量展出（正文窗宽 ~760px 自然高 ≈ 505px），头图把标题与正文推出首屏； 300px 窗口 + object-fit: cover 裁切后，头图仍是完整横幅但不再抢首屏。 */ .article-cover { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius-btn); margin: 0 0 16px; display: block; } .post-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .author-card { text-align: center; } .author-card .ava { width: 56px; height: 56px; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 8px; } .author-card .name { font-size: 16px; font-weight: 600; } .author-card .sig { color: var(--c-text-3); font-size: 12px; margin: 6px 0 10px; } .article-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--c-border-2); font-size: 13px; color: var(--c-text-3); display: flex; gap: 14px; flex-wrap: wrap; } .pager { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; } /* * 详情页侧栏（2026-10-07 结构修正）。 * * 改前：只有 `.toc` 自身 `position: sticky`，约束框是整个 `