3.2.21 评论区：去掉多余的装饰，把回复对齐到正文

用户在 3.2.20 上线后提了 5 条，逐条对应：

1. 去掉「评论」左侧的蓝色竖条。它本身是多余的视觉噪音，
   而且逼着标题让出 12px 左内边距，让标题和下方评论正文对不齐。
   连带断点里为它让路的 11px 一起删掉。

2. 去掉标题下方的灰色横线。它和评论容器自己的上边框只隔十几像素，
   两条平行线挨得太近，像是重复画了一次。

3. 回复内容对齐到父评论正文的左边缘。上一版缩进 18px 是拍脑袋定的，
   结果子回复正文比父正文又右偏 20px，左边缘错开一小截。
   这一版按布局算：父评论一行是「头像 42 + 列间距 13 + 正文」，
   子容器是父 li 的直接子元素、从父 li 左边缘起算，自身还有 2px 引导线，
   而 padding-left 从边框内侧算起，所以
       缩进 = 42 + 13 − 2 = 53px
   窄屏同步为 36+10−2=44、32+10−2=40。实测四个视口误差均为 0。
   缩进改存成 CSS 变量，在 .comments 作用域定义、断点里重新赋值，
   避免三处写死改一漏二。

   同时收住深层累加：padding-left 逐层叠加，53×3=159px 会把
   390px 屏的正文切成竖条。第三层起换用更小的缩进并去掉引导线，
   三层累计 136px 仍有递进感。

4. 回复左侧的引导线换成主题浅蓝 #cfe6fb，与「写下你的评论」
   按钮的描边同一个色系；原来的灰蓝在一片灰白里发闷。

5. 统一高亮底色。原来「有些回复有黄色背景、有些没有」并不是随机：
   暖黄只出现在 :target 命中的那一条，也就是链接末尾带了
   #comment-1234 锚点的时候（从评论通知邮件点进来就是这种）。
   正常打开文章一条都不黄。加上刚发出的 is-new 原本也是暖黄，
   两个黄叠在同一页面上更难分辨。
   现在两者统一为 --yq-primary-soft（#eaf6ff）。徽标里的
   「待审核」暖色保留 —— 那是状态色，需要区分度。

只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。

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;
+  padding-left: var(--yq-indent, 53px);
-  border-left: 2px solid var(--yq-guide, #dbe6f2);
+  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;
+  padding-left: var(--yq-indent-deep, 30px);
-  border-left-color: #e6edf5;
+  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;
+  background-color: var(--yq-primary-soft, #eaf6ff);
-  box-shadow: 0 0 0 8px #fffbe8;
+  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 在三层后正文只剩很窄一条。
+  /* 窄屏的缩进值改在 `.comments` 的变量里统一设（见本节开头），
-     仍然 ≥6px，`_comments_geometry.js` 的"最小可感知缩进"判据要求的。 */
+     这里不再单独写 .yang-children 的 padding-left —— 上一版就是在
-  .yang-children {
+     两个地方分别写死，改一处忘一处，深层的 9px/0 把方向写反了。 */
-    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;
-  }
 
   .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,

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: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好