/* Theme Name: 一搜主题 Theme URI: https://www.aisearchhub.com/ Author: AI Search Hub Description: 网盘搜索、BT 资源搜索站的主题。包含首页、博客、落地页三大版式，内置 SEO 结构化数据与广告位挂载点。自带设计令牌层，所有组件通过语义令牌取色，版式只覆写令牌值。 Version: 0.27.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ai-search-hub Tags: search, blog, custom-colors, translation-ready */ /* ========================================================================== 0. 设计令牌（语义层） -------------------------------------------------------------------------- 规则：令牌「名」全站统一，令牌「值」由版式在自己的作用域里覆写。 组件只准用语义名（--ink / --accent / --line），不准写死颜色。 这样同一个 .aib-btn 在首页是红橙、在博客版式自动变橙，不用写两遍。 ========================================================================== */ :root { /* —— 字体 —— */ /* 站点规则：正文一律微软雅黑打头，不要用别的 */ --font: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif; /* 等宽只给真正的代码用。末位挂雅黑，避免代码块里的中文注释掉到默认字体 */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Microsoft YaHei", "微软雅黑", monospace; /* —— 面 —— */ --bg: #ffffff; /* 页面底色 */ --surface: #ffffff; /* 内容面（卡片、面板） */ --surface-2: #f5f7f8; /* 次级面（表头、代码底、凹槽） */ /* —— 墨（文字）—— 三个层级都要在**白底上过 WCAG AA（4.5:1）**。这是硬指标不是偏好： --ink-3 原来取 #8b95a3，白底上只有 3.03:1，站头副标题、时间戳、 面包屑、页脚全是它，等于全站次要信息都读不清。 现在是 #696f7a：白面 5.05:1，--surface-2（#f5f7f8）4.70:1。 上一版是 #6b7280，在白面上 4.83 看着没问题，压 --surface-2 却是 **4.499:1——卡在门槛下 0.001**。这种值最麻烦：两位小数显示出来是 "4.50"，看着是过的，实际上没有；而且它悬在一根头发丝上， 以后动任何一个相邻的浅面色，都可能把它推过线或推得更远， 没人会发现。次要信息本来就遍布各种浅面（徽标底、表头、代码块）， 这里留出余量，别让全站次要文字吊在门槛上。 代价是它和 --ink-2 的差距被压小了（原来两级差 1.87 倍，现在 1.17 倍）。 这是没法两全的：任何能过 AA 的 --ink-3 都必然更靠近 --ink-2。 好在视觉层次主要靠字号和字重撑，颜色只是辅助。 ⚠ 它压不住**浅灰页面底**（博客版式的 #e9ecee 上只有 4.21:1）， 站头副标题、面包屑、页脚这些直接压在页面底上的次要文字 正好就在那一层。那一路不看这个值：.layout-blog 和 body.aish-scheme-mist 各自把 --ink-3 调深了一档，见那两处。 */ --ink: #1b2634; /* 标题、正文主色 */ --ink-2: #5c6878; /* 次要文字、摘要 */ --ink-3: #696f7a; /* 元信息、时间戳、标签 */ /* —— 线 —— */ --line: #e4e8ee; /* 常规分隔线、卡片描边 */ --line-2: #d3dadf; /* 加重分隔线、hover 描边 */ /* —— 强调 —— 三件套，再加下面单独说的第四件 --accent-btn。 */ --accent: #de3f27; --accent-dk: #a02a19; --accent-soft: #fdeeeb; /* —— 强调色「实底/当文字」专用的一档 —— 背景：品牌朱红 #de3f27 有两个位置够不上 AA —— 白字压在它上面（搜索按钮、当前页码、主按钮） 4.33:1 ✗ 它压在白面/灰底上当**文字**（a:hover、当前导航项） 4.33 / 3.65 ✗ 门槛是 4.5。而它作为**描边、浅底、装饰条**时完全不涉及文字， 4.33 没有任何问题——那正是它好看的地方，不该跟着一起变深。 一个令牌被派了两个相互矛盾的差事，就是这个结果： 当底要足够深，当描边要足够亮。同一句 var(--accent) 不可能两头都对。 所以拆开：--accent 继续当品牌色（描边、浅底、装饰、插图）， 凡是**要压字、或者自己就是字**的地方一律改用 --accent-btn。 为什么是 #bf3220 而不是别处：它原来是 --accent-dk 的值， 白字压它 5.69:1、它压白面 5.04:1，两个位置都过。 零新颜色——只是把原本用于 hover 的这档提升成常规档。 那 --accent-dk 就顺次下移一档到 #a02a19（白字压它 7.39:1）。 hover 必须比常规更深，否则鼠标划过去没有任何反馈。 三档的深浅关系：--accent(亮) > --accent-btn(中) > --accent-dk(深)。 */ --accent-btn: #bf3220; /* 压在 --accent **实底**上的字色（按钮、当前页码、选中标签）。 单独给一个令牌，是因为它必须跟着底一起翻面。 浅色方案里 --accent 是深色，所以这个值是白；但深色方案 （body.aish-scheme-ink）里 --accent 换成了一组**浅**色—— 不换的话深蓝压深灰底直接看不见。这时候白字压上去只剩 1.8～2.6:1，按钮上的字基本读不出来。 所以「白字压强调色」这句话里的"白"不能写死在组件里， 必须是一个可以被方案覆盖的令牌。全站的实底按钮都取这个值。 */ --on-accent: #ffffff; /* —— 辅助色（用于分类标识、状态）—— */ --teal: #0e9488; --teal-soft: #e6f4f2; --steel: #3a5baf; --steel-soft: #eaeffa; /* —— 入口卡色相 —— 首页那三张搜索入口卡可以各挑一个色相，见 AISH_Customize::tones() 和 home.css 的 .home-entry--tone-*。 为什么是**一组具名色相**而不是让人填色值： 这套主题的底色有五档（默认 / 纯白 / 浅灰 / 暖白 / 深色）， 任何一个写死的色值到了某一档上都会翻车，而且没人会去核。 这里每一档都量过对比度，三条硬指标在 check-contrast.php 的 $mustPass 表里，不合格直接 FAIL： tone-X / tone-X-soft >= 3.0 图标字形压自家浅底 tone-X / surface >= 3.0 卡片顶上那道 3px 描边压卡片面 ink-2 / tone-X-soft >= 4.5 11px 小标签的字压那块浅底 第三条最紧：浅底稍微深一点它就掉下去，所以下面这些 -soft 都比"看着舒服"再浅一档。 浅色只有**这一套**：五档底色里四档浅底的 --surface 都是 #ffffff， --surface-2 也都浅到同一量级，所以一套值在四档上算出来是同一个数。 深色那档另有一套，在 schemes.css 的 body.aish-scheme-ink 里—— 和 --accent-soft 是同一个分工，不是漏了。 下面这张数字**是 check-contrast.php 第 5 节打出来的**，不是手算的。 它每次还会重算一遍——对不上就 FAIL，所以这张表不会悄悄过期。 --tone-* 八档（浅色四档通用；「页面底」那列取最暗的博客版式 #e9ecee） 色相 图标/浅底 描边/卡面 描边/页面底 小字/浅底 蓝 4.34 4.95 4.17 4.97 青 4.67 5.36 4.52 4.94 靛 5.73 6.83 5.76 4.75 紫 5.50 6.40 5.39 4.87 琥珀 4.12 4.60 3.87 5.08 玫红 4.32 4.98 4.20 4.91 绿 4.69 5.33 4.49 4.99 石板 5.36 6.07 5.12 5.00 前三列按 3.0 判（图形），最后一列按 4.5 判（它压的是 11px 的字）。 全表最低的一格就是最后一列的靛 4.75——挑 -soft 的值时盯的就是它。 深色那一套余量大得多（最低的一格是靛 图标/浅底 6.57， 离 3.0 的门槛还有一倍），不逐个记；明细同样在第 5 节。 */ --tone-blue: #1f6fd0; --tone-blue-soft: #e8f1fd; --tone-cyan: #0d7490; --tone-cyan-soft: #e3f2f7; --tone-indigo: #5145cc; --tone-indigo-soft: #ece9fb; --tone-violet: #8a35b8; --tone-violet-soft: #f5eafb; --tone-amber: #a8660a; --tone-amber-soft: #fdf1de; --tone-rose: #cf2f5c; --tone-rose-soft: #fdeaf0; --tone-green: #1a7a50; --tone-green-soft: #e5f4ec; --tone-slate: #4e6480; --tone-slate-soft: #eef1f5; /* —— 形 —— */ --radius: 8px; --radius-sm: 4px; --radius-pill: 999px; /* —— 间距刻度（组件用：按钮内边距、卡片间距这类"块与块之间"）—— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; /* —— 行距刻度（正文用：标题上下、段落之间这类"阅读节奏"）—— 比 --sp-* 松一档，因为正文的呼吸感要求和界面组件不是一回事： 组件挤一点显得紧凑，正文挤一点就直接读不下去。 放在 :root 而不是放在 .layout-read 里，是**必须**的： 文章页（layout-read）和"页面"（layout-page，比如投稿页、关于我们） 加载同一份 single.css，而后者身上没有 .layout-read。 刻度写在 .layout-read 里的话，页面上的 var(--gap-3) 全部求值失败， 对应的声明会被整条丢掉——不报错，只是间距静默地变成 0。 */ --gap-1: 8px; --gap-2: 14px; --gap-3: 22px; --gap-4: 34px; --gap-5: 56px; --gap-6: 88px; --gap-7: 128px; /* —— 容器 —— */ --shell: 1200px; /* 首页 / 落地页内容宽 */ --shell-wide: 1240px; /* 博客列表（带侧栏）宽 */ --side: 320px; /* 侧栏宽 */ /* —— 阅读宽 —— 这一版正文按 16px 排，720px 一行约 45 个汉字。 45 是什么概念：中文正文的传统舒适区是 25～40 字/行，但那个是 **印刷**场景——纸上没有滚动条，眼睛的落点是固定的，行太长会串行。 屏幕上要宽一档，因为读者是靠滚动找位置的，行短了反而要不停地滚。 国内内容站基本都落在 40～50 字/行（正文栏 640～800px），45 是中间值。 这个数字**只给 .read-main 用**（max-width），不是"正文栏加内边距" 凑出来的：.read-prose 自己没有左右内边距，720 就是文字实打实的宽度。 想让它变窄，改的是这一个令牌，不要去给 .read-prose 加 padding—— 加了之后 h2 左边那条竖线和配图都会跟着往里缩，而它们本该是齐的。 和 --gap-* 同一个理由放在 :root：文章页（layout-read）和普通页面 （layout-page）共用 single.css，而页面身上没有 .layout-read。 放在版式里的话，页面上的 var(--read-measure) 会求值失败， 连带着用了它的那条声明一起被丢掉。 */ --read-measure: 720px; /* —— 投影 —— 两档，用在两个不同的场合： --shadow-1 常驻的极浅一层。搜索结果的卡片用它，好让白卡片 从浅灰页面底上"浮"起来，而不是只靠那根 1px 边框 和底色分开。 --shadow-2 悬停／浮层。列表条目被指到时、下拉菜单、模态框。 仍然克制：全站没有第三档，也没有把投影当装饰用（大标题后面、 区块之间那类）。搜索页那批卡片是**唯一**常驻投影的地方， 因为只有它是一整屏白卡片铺在灰底上。 */ --shadow-1: 0 1px 2px rgba(27, 38, 52, .04), 0 4px 12px -6px rgba(27, 38, 52, .10); --shadow-2: 0 2px 4px rgba(27, 38, 52, .05), 0 14px 32px -12px rgba(27, 38, 52, .16); /* —— 遮罩 —— 浮层背后压的那一层。目前只有一处用它：搜索结果页上点「正版入口」 那几条链接时弹出的确认框（见本文件第 11 节）。 ⚠ 它和 --shadow-* 是同一类东西：**半透明层必须在深色方案里翻过来**。 这里取的是"深墨色压一层"，因为它默认落在白/浅灰底上； 深色方案下页面本身就是深的，再压一层深色等于什么都没压—— 浮层和背景糊在一起，看不出来哪个在上面。 body.aish-scheme-ink 里把它翻成了浅色压一层（见 assets/css/schemes.css「遮罩」那一段）。改这个值之前先看那边。 0.45 是按"底下的内容看得见、但明显退到后面"调的：再浅一点 遮不住底下的按钮，再深一点就变成一块实心色，用户会以为页面卡了。 */ --scrim: rgba(27, 38, 52, .45); } /* -------------------------------------------------------------------------- 版式覆写：博客版式（blog-03） 底色是浅灰不是纯白、强调色是橙、容器略宽——这是用户明确认可的设计， 所以只覆写值，不动任何组件代码。 -------------------------------------------------------------------------- */ .layout-blog { --bg: #e9ecee; --surface: #ffffff; --surface-2: #f2f5f6; --ink: #13212c; --ink-2: #41525f; /* 和 :root 不同，这一版必须给自己挑一个值，不能继承。 原因只有一个：这一版的**页面底是浅灰 #e9ecee**，而 :root 那个 --ink-3 是按白面挑的。 上一版这里写的是 #647280，附了一句「--ink-3 压页面底只有 4.26:1， 所以要写在这一层上的次要文字一律用 --ink-2，或者让它落在白面里」—— 这条约定**守不住**：站头副标题（.aib-brand-sub）、面包屑（.aib-crumb）、 页脚导航（.aib-nav--footer）、侧栏分类计数（.aib-cat-count）全都在 页面底上，而且都由 header.php / footer.php / 侧栏渲染， 不属于 blog-03 的模板，改版式模板管不到它们。 一条靠"所有人都记得"维持的规则，迟早会漏。 所以直接把这个值调到能在自家页面底上站住：4.65:1（白面 5.51:1）。 这样上面那些组件不用改一行，自动就是对的。 */ --ink-3: #5e6a78; --line: #e2e6e8; --line-2: #d3dadf; /* 强调色四件套。 这里要专门说一句 --accent 为什么是 #c94b06 而不是更跳的 #e8590c： 强调色有两种用法，对明度的要求是**相反**的。 当描边、当浅底 —— 越亮越好，和背景分得开就行（按 3:1 判）； 当实底、上面压白字 —— 越深越安全（按 4.5 判）。 #e8590c 在白底上当文字、或者反过来白字压它，都只有 3.58:1。 而它承载的恰恰是**搜索按钮**和**当前页码**这两个最常见的东西， 还有悬停时的链接色。换成 #c94b06 之后是 4.68:1，过 AA。 —— 但 #c94b06 只解决了"白底"那半边 —— 这一版用的是浅灰页面底 #e9ecee，还有自家的浅强调底 #fdeee4。 #c94b06 压在它们上面是 3.94 和 4.12，都不够。 （这和 schemes.css 里橙那一档是同一笔账、同一组数字： 那个文件里的颜色是从这里抄过去的，两处必须一起动。） 所以四件套按"深浅"分工，而不是按"亮不亮"： --accent #c94b06 描边、浅底、入口卡图标 —— 只要 3:1 --accent-btn #a83c04 实底压白字 / 自己当链接文字 —— 要 4.5 --accent-dk #8f3303 hover，必须比 --accent-btn 更深 --accent-soft #fdeee4 浅底，不参与前景判定 --accent-btn 必须显式写出来：它定义在 :root，这里是 .layout-blog 自己的作用域，不写就继承到朱红那一档的 #bf3220 —— 一个橙色版式的按钮长成砖红色，而且不会有任何报错。 check-contrast.php 会逐块核对这件事。 */ --accent: #c94b06; --accent-btn: #a83c04; --accent-dk: #8f3303; --accent-soft: #fdeee4; --radius: 8px; --radius-sm: 6px; --shell: 1240px; } /* -------------------------------------------------------------------------- 搜索页：在 blog 版式之上再覆写一层（只改页面底色） -------------------------------------------------------------------------- 搜索结果页走的是 blog 版式（见 inc/setup.php 的 aish_layout()）， 但它和博客列表页长得不该一样，差别就在这一条。 博客列表页一篇一篇都是"文章卡"，卡片之间有大量文字、图片、留白， #e9ecee 那层浅灰底是给它们当背景的，没问题。 搜索结果页是**一整屏白卡片**：一排三个、几十条铺下去。白卡片压在 #e9ecee 上，两者明度差得很少，卡片只能靠那根 1px 边框和页面分开， 滚起来整页是一片糊的。 提亮到 #eef0f2 之后差值拉开，卡片靠底色本身就能"浮"起来， 边框也回到它该有的轻量。粉笔灰而不是纯白，是**故意**的： 纯白底 + 白卡片等于没有底，卡片会重新糊回去。 ⚠ 只覆写 --bg 一个值。强调色四件套、墨色三档、描边两档全部沿用 .layout-blog ——那套值逐格验过对比度（check-contrast.php 第 1/4 节）， 换主色会连着首页、博客、落地页一起歪，而那三页用户没有提过意见。 ⚠ --ink-3（#5e6a78）是按 #e9ecee 挑的，这里底色**变浅**了， 它压上去的对比度只会更高，不需要跟着调。反过来（把底调深） 就一定要重挑——check-contrast.php 会拦。 */ body.aish-search { --bg: #eef0f2; } /* -------------------------------------------------------------------------- 版式覆写：文章详情版式（blog-02-detail） 阅读型版式：纯白纸、深墨蓝强调、窄栏。 -------------------------------------------------------------------------- */ .layout-read { --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f5; --ink: #101113; --ink-2: #24272c; /* 这一版是暖中性（--line 是 #e8e8e6，不带蓝），所以 --ink-3 也取暖灰， 不跟着 :root 用那个偏蓝的墨——一页里两种灰混着用看得出来。 上一版是 #6f7278，注释里写的是"白底 4.82:1"，那个数没错， 但**量错了底**：这一版的 --surface-2 是 #f7f7f5，不是纯白， 而元信息（表头、代码块、图注压在上面的那种块）恰恰就在那一层， #6f7278 压上去是 4.496:1——又差 0.004 不过线。 #6b6e74：页面底 5.11:1，--surface-2 4.77:1，暖灰的调子不变。 */ --ink-3: #6b6e74; --line: #e8e8e6; --line-2: #d5d5d2; --accent: #1e3a5c; --accent-dk: #16293f; --accent-soft: #eef2f7; /* 同 .layout-blog：墨蓝本来就过线，但必须显式写出， 否则继承到 :root 那一档的朱红 #bf3220。 */ --accent-btn: #1e3a5c; --radius: 4px; --radius-sm: 3px; /* —— 容器 —— 这一版是两栏：正文 + 右侧广告栏（.aib-layout 的网格，见第 2 节）。 --shell 是**两栏加起来、再加上容器自己的内边距**的宽度，不是正文宽。 写成 calc() 而不是写死数字，是因为先定的其实是正文宽（--read-measure， 一行约 45 个汉字，见 :root），容器是被它推出来的。 写死数字的话，哪天正文宽调了，容器不会跟——正文栏会凭空宽出或窄掉一截， 而且两张值分在两个文件里，很难想到它们是一对。 四项，少一项正文就窄一截： 正文 720 + 侧栏 320 + 列间距 40 + 容器内边距 24×2 = 1128 最后那 48px 是最容易漏的一项，而且漏了之后从代码上看不出来： 全局是 border-box，.aib-shell 的 max-width 把 padding **包含在内**， 只算前两项的话内容盒剩 1080-48=1032，1fr 拿到 672—— 正文悄悄窄了 48px，一行从 45 个字变成 42 个，谁也不会觉得哪里不对。 （上面那句"45 变 42"是漏算之后的结果，不是笔误—— 这一项漏过，所以留着当记号。） 列间距和内边距这里引用的是 --sp-8 / --sp-6，和 .aib-layout 的 gap、 .aib-shell 的 padding 用的是同一个令牌，不是抄来的数字。 下面 ≤1200px 那条断点会把 --side 调到 280、gap 调到 --sp-6， **故意不改这里**：那两处变小只会让 1fr 变宽松（1128 宽时 1fr 是 776）， 而 .read-main 有 max-width: 720 加 margin-inline: auto 兜着， 正文被居中放回 720，不会跟着变宽也不会被挤窄。 所以这一版不需要跟着设断点——设了反而多一处要对齐的东西。 */ --shell: calc(var(--read-measure) + var(--side) + var(--sp-8) + var(--sp-6) * 2); } /* ========================================================================== 1. 基础重置 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-btn); } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } /* 焦点可见性：键盘用户必须看得见焦点环，但鼠标用户不该被它打扰 */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent-soft); color: var(--ink); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* ========================================================================== 2. 布局骨架 ========================================================================== */ .aib-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--sp-6); } /*
本身不设宽度、不设内边距——每一段（区块）自己决定要不要套 .aib-shell。 写死在这里的话，首页那种「整块通栏 + 内部居中的窄容器」的区块 就得反过来去抵消它。它唯一的职责是给跳转链接一个落点。 */ .aib-main { display: block; } /* 跳转链接跳过来时给个焦点落点，否则键盘用户点完「跳到主要内容」 焦点还在原地，下一次 Tab 又回到导航。 */ .aib-main:focus { outline: none; } /* 带右侧栏的两列布局（博客列表页 / 落地页） */ .aib-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--sp-8); align-items: start; } /* 主列必须能收缩，否则内嵌的表格会把整个 grid 撑破 */ .aib-layout > * { min-width: 0; } /* 关掉右侧栏的版式：只剩一条轨道，宽度全归主列。 两处挂这个类： · search.php —— 「搜索页右侧栏」选「不显示」（主列 .blog-main 本身不定宽， 所以去掉侧栏之后结果区是真的变宽）； · single.php —— 「文章页右侧栏」选「不显示」（主列 .read-main 仍被 --read-measure 封在 720px 并居中，所以那边变的是 "有没有那一栏"，不是正文宽窄，见 settings.php 的 hint）。 为什么是改轨道数而不是"把 aside 藏起来"：藏起来的话第二条轨道还在 （只是空的），主列仍是 minmax(0, 1fr) 那一份，宽度一点没变—— 两种版式看起来一模一样，站长会以为开关坏了。 和 .aib-layout 同为 (0,1,0)，靠**源序**赢：它在下面。 （下面 900px 那条媒体查询里也有 .aib-layout，那一条本来就是一列， 对 --full 无影响，所以没有跟着写一份。） */ .aib-layout--full { grid-template-columns: minmax(0, 1fr); } /* 侧栏是个纵向堆叠的槽，里面一块一块（广告位、分类…）。 gap 在这里而不是各个块自己写 margin：块的上下间距必须一致， 否则"广告位和分类之间 20px、分类和自己内部 16px"这种不齐会很明显。 */ .aib-side { display: flex; flex-direction: column; gap: var(--sp-4); } /* 侧栏**不做 sticky**。 看着很诱人（长列表上广告一直可见），但侧栏内容高度不可控—— 广告插件往里塞 3 张竖版海报就超过 700px，一旦高于视口， sticky 会把底部卡在屏幕外面，用户怎么滚都看不到， 而"看不到的那个块"恰好可能是真正赚钱的那个。 加 max-height + overflow 能绕开，代价是侧栏变成一个嵌套滚动区， 鼠标停在侧栏上时滚轮滚的是侧栏不是页面——那个更烦人。 广告位放侧栏第一位（首屏内）已经满足了"首屏可见"这条硬要求， sticky 带来的额外曝光不值这个复杂度。 */ @media (max-width: 1200px) { .aib-layout { --side: 280px; gap: var(--sp-6); } } @media (max-width: 900px) { .aib-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .aib-shell { padding: 0 var(--sp-3); } } /* ========================================================================== 3. 共用组件 —— 只准用语义令牌取色，版式切换时自动跟随 ========================================================================== */ /* --- 3.1 按钮 ----------------------------------------------------------- 四种视觉层级。type 只管埋点归类，视觉层级一律由 style 决定。 ---------------------------------------------------------------------- */ .aib-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 42px; padding: 0 var(--sp-5); border-radius: var(--radius); border: 1px solid transparent; font-size: 14.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; } .aib-btn--primary { background: var(--accent-btn); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .aib-btn--primary:hover { background: var(--accent-dk); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow-2); } .aib-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .aib-btn--secondary:hover { border-color: var(--accent-btn); color: var(--accent-btn); } .aib-btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--line); } .aib-btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); } /* 纯文字按钮：用于页脚这类不需要视觉重量的位置 */ .aib-btn--link { height: auto; padding: 0; background: none; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); } .aib-btn--link:hover { color: var(--accent-btn); text-decoration-color: currentColor; } /* 小一号。搜索结果每一条上那两个按钮（打开 / 复制链接）用它。 42px 高的按钮压在一条结果里，会让每一条都变成一块操作面板， 而这两个动作是次要的——正文才是。 取色沿用已有的 --secondary / --ghost，没有引入新的前景/背景组合， 所以 check-contrast 覆盖的那 90 种状态依然盖得住（见那个脚本第 0b 节）。 */ .aib-btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; font-weight: 500; } /* 按钮组：多个按钮并排，窄屏自动换行 */ .aib-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* 按钮组前面刚跟了一段正文时用它拉开距离。 不写 .aib-btns { margin-top } 是因为大多数按钮组是紧接标题的， 统一加上会让那些地方多出一截说不清来由的空白。 */ .aib-btns--spaced { margin-top: var(--sp-6); } /* --- 3.2 卡片 ----------------------------------------------------------- */ .aib-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } /* --- 3.2b 素列表 -------------------------------------------------------- 最朴素的「标题 + 时间 + 摘要」。兜底模板用它，搜索结果页也会用。 刻意不做缩略图、不做网格、不做悬停浮起——那些是版式的活。 这一套要保证的是「不管站里出了什么状况，内容都还读得到」： 落地页插件被停用、版式样式没加载、模板掉进兜底…… 这些情况下页面都不该是一堆没有排版的裸文本。 ---------------------------------------------------------------------- */ .aib-list { display: flex; flex-direction: column; gap: var(--sp-3); } .aib-list-item { padding: var(--sp-5); } /* 搜索结果那一条（卡片 + 条目两个类同时挂）。 ───────────────────────────────────────────────────────────────── 为什么必须是 flex 纵向，而不是随便什么块 ───────────────────────────────────────────────────────────────── 上面 .aib-grid 把同一行的卡片拉成了等高，但**卡片里面**还是各排各的： 标题两行的卡片，按钮紧跟标题；标题四行的，按钮被顶到更下面。 整排看过去卡片一样高了，按钮却还在四个不同的高度上——不齐只是从 卡片下沿挪到了卡片里面。 flex 纵向 + 下面 .aib-list-actions 的 margin-top: auto， 才能把按钮那一行推到卡片底部，让整排按钮落在同一条基线上。 overflow: hidden 是给标题兜底的：截断（.aib-list-title 的 -webkit-line-clamp）已经拦住了绝大多数情况，但 line-clamp 是 WebKit 系的私有实现，别的排版引擎上不生效。真到那时候， 溢出的一行会被裁掉而不是画到卡片外面去——宁可少一行， 也不要那种"字压在下一页内容上"的样子。 */ .aib-card.aib-list-item { display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-1); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } /* 悬停：描边转强调色 + 轻轻抬起。 只给搜索结果的条目，不给全部 .aib-card——博客列表那种一条压一条的 长列表里，鼠标每划过一条整行就动一下，滚轮滚过去满屏都在抖。 */ .aib-card.aib-list-item:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); } /* ───────────────────────────────────────────────────────────────── 标题：**最多两行**。这是需求里点名的那件事 ───────────────────────────────────────────────────────────────── 两个毛病是两个独立的原因，要分别治： A. 标题跑出卡片 两个原因叠在一起：没有截断，以及没有地方断行。 资源名里经常有「【1080P】」「[全集打包]」、magnet 哈希这种 长串没有空格的字符，浏览器默认只在空格处断行， 那串东西就把卡片横向撑出去了 → overflow-wrap: anywhere。 B. 卡片高度参差（配合上面 .aib-grid 的 stretch） 标题短的卡片如果只按内容撑，整排还是不平 → min-height 兜住两行。 两行这个数是定死的，不是"可以调的另一种排版"： 三行就是这次要修的那个高度差的形状。 17px × 1.45 × 2 就是这里 min-height 的来源，和 font-size / line-height 是同一组数——改字号要连着改它。 */ .aib-list-title { font-size: 17px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: calc(17px * 1.45 * 2); } .aib-list-title a { color: var(--ink); } /* 双类名：单类的 .aib-list-title a 是 (0,1,1)，和全局 a:hover 同权重， 谁后加载谁赢——那种"改了一个文件另一个地方就变色"的 bug 来源。 */ .aib-list-title a:hover { color: var(--accent-btn); } .aib-list-meta { margin-top: var(--sp-2); font-size: 13px; color: var(--ink-3); } .aib-list-meta > * + * { margin-left: var(--sp-3); } .aib-list-excerpt { margin-top: var(--sp-3); font-size: 14.5px; line-height: 1.75; color: var(--ink-2); } .aib-list-excerpt > * + * { margin-top: var(--sp-2); } /* 摘要里不该出现超大标题：the_excerpt 一般不带上标题， 但插件在摘要里塞

的情况真实存在过。 */ .aib-list-excerpt h1, .aib-list-excerpt h2, .aib-list-excerpt h3 { font-size: 15px; font-weight: 600; } /* 条目底部那两个动作按钮（打开 / 复制链接）。 只在家里有按钮时才渲染这一块（没有地址的条目整块不出）， 所以这里不需要 :empty 之类的兜底。 margin-top: auto 是「整排卡片按钮落在同一条基线上」的后半截 （前半截是 .aib-card.aib-list-item 的 flex 纵向）。它把这一行 推到卡片底部——注意推到的是**父容器底部**，所以父级必须是 flex 容器、且这一块是最后一个子元素。换成块级父容器的话 auto 会算成 0，这一整条就悄悄失效了。 padding-top 而不是 margin-top 来留这段距离：分隔线要贴着 按钮那一行的上沿，margin 的话线会跟着按钮一起飘。 线平时是透明的（transparent 而不是不写），悬停才显色—— 写成"平时没有边框、悬停才加"的话，卡片内容会在鼠标划过时 整体下移 1px，一排卡片跟着抖。 */ .aib-list-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid transparent; } .aib-card.aib-list-item:hover .aib-list-actions { border-top-color: var(--line); } /* --- 3.2c 网格 ---------------------------------------------------------- 同一个列表的另一副排布：一排 N 个。选它还是不选由 「搜索结果 → 结果排布」决定，模板二选一地挂 aib-list / aib-grid。 默认（没有 --N 修饰类）是 2 列。写一个默认值而不是让裸 .aib-grid 回落到单列，是因为修饰类万一没拼上（模板改了、值非法）， 2 列仍然是个能看的版面；单列会让"卡片"这个选择看起来毫无效果。 minmax(0, 1fr) 里的那个 0 是必须的：只写 1fr 时，网格项的最小宽度 是内容的**最大不可断行宽度**，而搜索结果里恰好有那种东西—— 一长串没有空格的资源名、magnet 哈希。它们会把所在那一列撑出去， 表现是卡片溢出容器、页面横向滚动条出现，而"是哪一列撑的" 在浏览器里要逐个排查才看得出来。 ───────────────────────────────────────────────────────────────── **这里不能写 align-items: start**（原来就是它） ───────────────────────────────────────────────────────────────── 网格项默认是 stretch：同一行里每张卡片拉到那一行最高的那张的高度， 于是整排的底边齐平。写了 start 之后每一项只取自身内容高度， 标题两行的卡片就比三行的矮一截——一排卡片下沿参差不齐。 这不是"两种都行"的排版口味问题。结果列表里标题长度本来就不可控 （资源名多长完全看别人怎么命名），所以这个差异**每一页都会出现**， 而且是页面主体上最显眼的一处不齐。 等高只解决了一半：卡片内部还得把"打开 / 复制链接"那一行推到卡片底 （.aib-list-actions 的 margin-top: auto），否则卡片一样高、 按钮却悬在各自标题下面不同的高度上，看着还是乱的。 ---------------------------------------------------------------------- */ .aib-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .aib-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aib-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 窄屏降级。四列在 900px 上每列只剩 200px，标题会被折成单字一行—— 那不是"卡片版式不好用"，是四列不好用。所以降的是列数，不是版式： 选了卡片的人拿到的仍然是卡片，只是一排少几个。 */ @media (max-width: 1100px) { .aib-grid, .aib-grid--3, .aib-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .aib-grid, .aib-grid--3, .aib-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* --- 3.3 徽标 / 分类标签 ------------------------------------------------- */ .aib-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2); border-radius: var(--radius-sm); background: var(--accent-soft); /* 浅强调底上必须用 --accent-dk，不能用 --accent。 这一条 single.css 的 .read-tags 那里写着，这里原来没照做： #de3f27 压在 #fdeeeb 上只有 3.84:1，而橙那一档 4.12:1，都不过。 换成 --accent-dk 之后朱红 5.04、橙 5.59，五档全部过线。 */ color: var(--accent-dk); font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } /* 用 --ink-2 而不是 --ink-3：12px 的标签要"读得清"，不是"退到背景里"。 这是**层级取舍，不是合规补救**——--ink-3 压 --surface-2 是过的 （默认版式 4.70，博客版式 5.03，版式那一列见 check-contrast.php 第 4 节）。 特意写清楚，是因为这条注释以前记的是另一个数（"4.47:1，不合格"）， 那个数对应的 --ink-3 早就不在了；再照它去推，结论会反。 */ .aib-badge--muted { background: var(--surface-2); color: var(--ink-2); } /* 推广标识：广告位必须带，且要和正文标签在视觉上区分得开 */ .aib-badge--promo { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); font-weight: 500; font-size: 11px; } /* --- 3.4 区块标题 ------------------------------------------------------- */ .aib-sec-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); } .aib-sec-head > h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; } .aib-sec-head > .aib-sec-more { margin-left: auto; font-size: 13.5px; color: var(--ink-3); } .aib-sec-head > .aib-sec-more:hover { color: var(--accent-btn); } /* --- 3.5 面包屑 --------------------------------------------------------- 与 inc/breadcrumbs.php 生成的 BreadcrumbList JSON-LD 同源。 结构化数据必须对应读者看得见的内容，所以这两者只能由同一份数据渲染。 ---------------------------------------------------------------------- */ .aib-crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); font-size: 12.5px; line-height: 1.7; color: var(--ink-3); letter-spacing: .06em; } .aib-crumb a { color: var(--ink-3); } .aib-crumb a:hover { color: var(--accent-btn); } .aib-crumb .aib-crumb-sep { color: var(--line-2); } .aib-crumb [aria-current] { color: var(--ink-2); } /* --- 3.6 广告位挂载点 --------------------------------------------------- 方案 C（混合）：静态导出时这里已有一份兜底内容，JS 加载后拉实时结果替换。 所以这个容器绝不能是空的——它同时承担容灾职责。 ---------------------------------------------------------------------- */ .aib-slot { display: block; } .aib-slot[data-slot-state="loading"] { opacity: .55; } /* 一条兜底内容都没有（新站还没配广告）：整块不显示。 藏整个 .aib-slot 而不是里面的内容——标题还留着、下面空着， 比整块不出现更像"坏了"。JS 拉到结果后把状态改掉，它就回来了。 */ .aib-slot[data-slot-state="empty"] { display: none; } .aib-slot-title { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .aib-slot-title::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* --- 3.7 分页 ----------------------------------------------------------- */ .aib-pager { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) 0; font-variant-numeric: tabular-nums; } .aib-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; color: var(--ink-2); } /* 描边和文字必须同一档。 这里原来两个都是 --accent，只换文字的话就只剩描边是亮的—— 1px 的亮朱红圈着一行深朱红字，看着像描边漏改了。 */ .aib-pager .page-numbers:hover { border-color: var(--accent-btn); color: var(--accent-btn); } .aib-pager .page-numbers.current { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-accent); font-weight: 600; } /* dots 不是页码，是「中间还隔着几页」的省略号，但核心给它的类名就是 page-numbers dots，会被上面那条规则一视同仁地套上边框和白底—— 于是它看上去像一个**按不动的页码**，而旁边"上一页"又能按， 这个对比会让人以为是坏了。这里只把框去掉。 颜色不另设，跟着 .page-numbers 的 --ink-2 走：和两边的真数字同色， 读起来才是"这段是空的"，而不是"这个按钮是灰的"。 用 border-color: transparent 而不是 border: 0——后者会少掉 2px 边框高度，这一格就比两边的页码矮一截，除非全站设了 border-box。 */ .aib-pager .page-numbers.dots { border-color: transparent; background: transparent; } /* 窄屏：paginate_links() 在中间页给出的是一长串 （上一页 1 … 3 4 5 … 12 下一页，mid_size=2 时最多 9 格）， 375px 下按 9×34 + 8×8 的间距算是 370px，比内容宽还宽，会直接溢出。 flex-wrap 是这里的**兜底**（宁可折成两行也不能横向溢出）， 缩尺寸和去掉省略号是为了让它在大多数情况下根本用不着折行。 */ @media (max-width: 560px) { .aib-pager { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-6) 0; } .aib-pager .page-numbers { min-width: 34px; height: 34px; padding: 0 var(--sp-2); font-size: 13.5px; } .aib-pager .page-numbers.dots { display: none; } } /* --- 3.7b 结果组的分页条（网盘 / 磁力那两栏）--------------------------- 和上面那条的区别，不是样式而是**它是什么**：上面那条是主查询的翻页， 一格一个真实地址，点了就重新请求；这条是前端切片，按钮是