diff --git a/assets/css/comments.css b/assets/css/comments.css index 186077e..59f40d8 100644 --- a/assets/css/comments.css +++ b/assets/css/comments.css @@ -72,7 +72,7 @@ /* 线:把"分隔"和"装饰"分开,不要用一个 #f0f0f0 打天下 */ --yq-line: #eaedf2; /* 结构性分隔,看得见 */ --yq-line-soft: #f1f4f8; /* 同层细分隔 */ - --yq-guide: #dbe6f2; /* 嵌套引导线 */ + --yq-guide: #cfe6fb; /* 嵌套引导线(主题主色的浅色版) */ --yq-bg-soft: #f7f9fb; --yq-bg-input: #fcfcfd; @@ -80,6 +80,14 @@ --yq-radius: 4px; --yq-radius-lg: 6px; + /* 子回复的缩进量(见第 5 节的推导)。 + * 公式:头像宽 + 列间距 − 引导线宽(2px) + * 桌面 42+13−2 = 53 / ≤768 36+10−2 = 44 / ≤400 32+10−2 = 40。 + * 存在变量里是因为它必须和头像宽度、列间距**同时**在断点里改, + * 分散写三处迟早漏一处(上一版就是这么漏掉 img 宽度的)。 */ + --yq-indent: 53px; + --yq-indent-deep: 30px; + /* 统一动效曲线:进出都用同一条,避免"有的滑有的弹" */ --yq-ease: cubic-bezier(0.4, 0, 0.2, 1); } @@ -108,15 +116,14 @@ justify-content: space-between; gap: 12px; padding-bottom: 15px; - border-bottom: 1px solid var(--yq-line, #eaedf2); } -/* 标题左侧加一条主色短竖条:中文博客里很常见,成本极低, - 但它让"这是评论区"在长页面滚动时有一眼可辨的锚点。 */ +/* 标题:不加任何装饰。 + * 曾经在左侧加过一条主色竖条 —— 用户明确要求去掉:标题本身字重足够, + * 竖条只是多余的视觉噪音,而且它逼着标题让出 12px 左内边距, + * 让「评论」两个字和下方评论正文的左边缘对不齐。 */ .comments-head .title { - position: relative; margin: 0; - padding-left: 12px; color: #1f2328; font-weight: 600; font-size: 19px; @@ -124,18 +131,6 @@ letter-spacing: -0.005em; } -.comments-head .title::before { - content: ""; - position: absolute; - left: 0; - top: 50%; - width: 3px; - height: 16px; - margin-top: -8px; - border-radius: 2px; - background-color: var(--yq-primary, #00a2ff); -} - /* 「写下你的评论」:原来用 3px 圆角 + #f4f8ff 底,白底上几乎看不出是按钮。 * 改成描边式,hover 时反色 —— 可点性更明确,又不抢标题的注意力。 */ .comments-jump-form { @@ -520,18 +515,32 @@ * ② 引导线(border-left) * ③ 头像尺寸(42 → 34) * - * 引导线原来用 #f0f2f5 —— 和白底差 5 级灰阶,基本看不见, - * 于是"缩进 20px 但没有任何归属提示",三层以上完全看不出谁回谁。 - * 现在提到 #dbe6f2(带一点主色倾向),既看得见又不刺眼。 + * ── 缩进值是怎么算出来的(别随手改)──────────────────────────── + * 目标:**子回复那一块的正文左边缘,正好落在父评论正文的左边缘上**。 + * + * 父评论一行是 `[头像 42][列间距 13][正文…]`,所以父正文左边缘 + * 距父 li 左边缘 42 + 13 = 55px。`ol.yang-children` 是父 li 的 + * 直接子元素、从父 li 左边缘起算,但它自己带 2px 的 border-left, + * 而 padding-left 是从边框**内侧**算起的,所以 + * + * padding-left = 头像宽 + 列间距 − 边框宽 + * = 42 + 13 − 2 = 53px + * + * 就精确对齐了,不是"接近"。`_geo_indent.js` 卡的就是「子正文左边缘 + * 减父正文左边缘 == 0」。768 / 400 两个断点头像与列间距都变小, + * 这个值必须跟着换(44 / 40),否则窄屏上子回复会突出去。 * * ⚠️ 缩进只能用 padding-left,**不能用 margin-left**: * `_diag318_children_geo.js` 判据 A 要求 `ol.yang-children` 的 * 左偏移(相对父 li)≤4px、判据 B 要求宽度 ≥ 父宽 90%。 - * margin-left 会同时破坏这两条,padding-left 不会。 */ + * margin-left 会同时破坏这两条,padding-left 不会。 + * + * 引导线用主题主色的浅色版 #cfe6fb(和「写下你的评论」按钮的描边 + * 同一个色)—— 原来是灰蓝 #dbe6f2,用户要求改成主题自带的浅蓝。 */ .yang-children { margin-top: 4px; - padding-left: 18px; - border-left: 2px solid var(--yq-guide, #dbe6f2); + padding-left: var(--yq-indent, 53px); + border-left: 2px solid var(--yq-guide, #cfe6fb); } .yang-children > .yang-comment { @@ -562,11 +571,19 @@ font-size: 14px; } -/* 第三层以后不再继续缩进 —— 否则窄屏上正文只剩一条竖线。 - * 引导线也去掉:三条竖线叠在一起会变成"表格"观感。 */ +/* 第三层起改用更小的缩进(--yq-indent-deep),并去掉引导线。 + * + * 为什么必须减小:padding-left 是**逐层累加**的。第一层 53px 对齐好看, + * 但到第三层就是 53×3 = 159px —— 390px 屏上正文只剩 100 多像素, + * 长文会被切成竖条。所以从第三层起换成 30px,三层累计 53+53+30 = 136px, + * 仍然呈现递进,但不再失控。 + * + * 引导线也去掉:三条竖线平行叠在一起会变成"表格"观感,反而更难读。 + * ⚠️ 这里**必须显式设 padding-left**,不能只是清掉 border-left —— + * 否则它会继承上一层的 53px,与"减小"的意图正好相反。 */ .yang-children .yang-children .yang-children { - padding-left: 8px; - border-left-color: #e6edf5; + padding-left: var(--yq-indent-deep, 30px); + border-left-color: transparent; } /* 新提交的评论:淡入 + 短暂底色,让用户看到自己刚发的那条 */ @@ -581,19 +598,35 @@ } } +/* 刚提交的那条:淡入 + 短暂底色。 + * 底色用主题浅蓝而不是暖黄 —— 全站只有「待审核」是暖色, + * 这里再用黄会和状态色混淆。 */ .yang-comment.is-new { animation: yang-comment-in 0.28s var(--yq-ease); border-radius: var(--yq-radius-lg, 6px); - background-color: #fffdf4; + background-color: var(--yq-primary-soft, #eaf6ff); } /* 从通知/后台带 #comment-123 跳过来时,高亮那一条。 - * 只在正文区上色,不动布局宽度 —— 用整条 li 加内边距的话, - * 页面会在跳转瞬间"抖一下",比不高亮更难受。 */ + * + * ── 这就是「有些回复下面有黄色背景、有些没有」的原因 ────────── + * 原来的底色是暖黄 #fffbe8。它只在**链接里带了该条评论的锚点**时出现 + * (:target 伪类),所以: + * · 从评论通知邮件点进来 → URL 末尾有 #comment-1234 → 那一条是黄的; + * · 自己正常打开文章 → 没有任何锚点 → 一条都不黄。 + * 于是同一个页面上"有的黄有的不黄",看起来像随机。 + * + * 加上 `is-new`(刚发的新评论)原本也是暖黄,两个黄色叠在一起, + * 更难判断哪条是"被高亮的"、哪条是"刚发的"。 + * + * 现在统一成主题浅蓝,和引导线、按钮描边同一色系: + * · :target → #eaf6ff(和主色按钮的浅底同色) + * · is-new → 同上 + * 一眼能看出"这是被指到的那条",但不再是突兀的黄色块。 */ .yang-comment:target .yang-comment-content { border-radius: var(--yq-radius, 4px); - background-color: #fffbe8; - box-shadow: 0 0 0 8px #fffbe8; + background-color: var(--yq-primary-soft, #eaf6ff); + box-shadow: 0 0 0 8px var(--yq-primary-soft, #eaf6ff); } /*-------------------------------------------------------------- @@ -1013,6 +1046,15 @@ padding: 17px 15px 19px; } + /* 缩进量必须和下面的头像宽度、列间距同步改: + * 头像 36 + 列间距 10 − 引导线 2 = 44;深层同上 36+10−2=44, + * 但深层要更省空间,取 26。写在这里(.comments 上)是因为变量 + * 定义在 .comments 作用域,媒体查询里重新赋值就能让所有后代取到新值。 */ + .comments { + --yq-indent: 44px; + --yq-indent-deep: 26px; + } + .comments-head { flex-wrap: wrap; gap: 8px; @@ -1021,12 +1063,6 @@ .comments-head .title { font-size: 17px; - padding-left: 11px; - } - - .comments-head .title::before { - height: 14px; - margin-top: -7px; } .yang-comment { @@ -1065,21 +1101,9 @@ line-height: 1.78; } - /* 窄屏缩进收窄:20px 在三层后正文只剩很窄一条。 - 仍然 ≥6px,`_comments_geometry.js` 的"最小可感知缩进"判据要求的。 */ - .yang-children { - padding-left: 12px; - margin-top: 3px; - } - - .yang-children .yang-children { - padding-left: 9px; - } - - .yang-children .yang-children .yang-children { - padding-left: 0; - border-left: 0; - } + /* 窄屏的缩进值改在 `.comments` 的变量里统一设(见本节开头), + 这里不再单独写 .yang-children 的 padding-left —— 上一版就是在 + 两个地方分别写死,改一处忘一处,深层的 9px/0 把方向写反了。 */ .comment-info { flex-direction: column; @@ -1115,6 +1139,12 @@ } @media screen and (max-width: 400px) { + /* 同样要同步缩进:头像 32 + 列间距 10 − 引导线 2 = 40;深层取 22。 */ + .comments { + --yq-indent: 40px; + --yq-indent-deep: 22px; + } + /* 400px 断点:同样必须把 img 的 width 一起覆盖(理由见 768 断点那条) */ .yang-comment-avatar, .yang-comment-avatar img, diff --git a/style.css b/style.css index 2c23bb2..5e4077d 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.20 +Version: 3.2.21 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好