3.2.23 评论区:引导线和输入框聚焦统一成主色

用户对 3.2.22 的反馈:
「这蓝色有点奇怪啊,应该用主题颜色,就是评论的那个按钮背景色。
  把评论回复左侧那个竖着的小蓝条,改成这个颜色,下面输入框被选中的
  时候,周边的颜色,也变成这个颜色。」

1. 引导线 #cfe6fb → var(--yq-primary)
   浅蓝和「发布评论」按钮的背景色(#00a2ff)不是一个蓝,
   页面上两蓝并存反而显乱。改成引用主色变量,以后改主色线自动跟。

2. 输入框聚焦变主色 —— 顺带翻出一个藏了三版的老问题
   实测发现正文输入框聚焦后边框仍是灰色:kratos.css 里
     .k-main .details .comments .comment-respond .comment-textarea
       { border: 1px solid #eee; ... }
   特异性 0,6,0,把 comments.css 的静态边框(0,1,0)、hover 变深
   (0,2,0)、focus 变主色(0,2,0)全部压死。也就是说 3.2.20 重做
   以来,正文框的边框色、圆角、浅底、悬停变色、聚焦变色**全部
   从未真正上线**,用户看到的一直是基础主题的 #eee / 3px / 灰底,
   聚焦时只有一圈很淡的外环是主色的。

   修法:textarea 的静态 / hover / focus 三态都改用同样的
   0,6,0 选择器收编(本表依赖 kratos 后加载,每条稳定压过)。
   不去改 kratos.css —— 那是基础主题,改它等于放弃覆盖层架构。

   姓名/邮箱/网址那排 input 不受影响(kratos.css 没对它们写边框),
   聚焦本来就是主色。

3. 新增线上判据并先证明它能红
   ④ 引导线颜色 = 主色(动态取 .comment-submit 背景色做参照,
      不写死 RGB,主色一改判据自动跟);
   ⑧ 真实点击姓名框与正文框、等 0.16s 过渡结束后量边框色。
   部署前在 3.2.22 线上跑:④⑧ 正确变红、几何项依旧全绿——
   判据有效,不是空转。

只改样式表与版本号,评论的取数、分页、回复、加载更多逻辑未动。
This commit is contained in:
2026-10-24 20:49:41 +08:00
parent 420605f462
commit 78fce2d87d
2 changed files with 27 additions and 3 deletions
+26 -2
View File
@@ -72,7 +72,11 @@
/* 线:把"分隔"和"装饰"分开,不要用一个 #f0f0f0 打天下 */
--yq-line: #eaedf2; /* 结构性分隔,看得见 */
--yq-line-soft: #f1f4f8; /* 同层细分隔 */
--yq-guide: #cfe6fb; /* 嵌套引导线(主题主色的浅色版) */
/* 嵌套引导线:直接用主色(「发布评论」按钮的背景色)。
* 3.2.22 之前用浅蓝 #cfe6fb,用户反馈"这蓝色有点奇怪,应该用主题颜色"——
* 浅蓝和主色按钮不是一个蓝,两蓝并存反而显乱,索性同色。
* 引用 --yq-primary 而不是再写一个色值:以后改主色,线自动跟。 */
--yq-guide: var(--yq-primary, #00a2ff);
--yq-bg-soft: #f7f9fb;
--yq-bg-input: #fcfcfd;
@@ -866,7 +870,23 @@
color: var(--yq-text-3, #6b7280);
}
/* textarea 容器 */
/* textarea 容器。
*
* 🔴 三态(静态 / hover / focus)都必须带
* `.k-main .details .comments .comment-respond` 前缀 —— 不是为了好看,
* 是为了**特异性**。kratos.css 里有
* .k-main .details .comments .comment-respond .comment-textarea
* { border: 1px solid #eee; border-radius: 3px; background: 灰 }
* 特异性 0,6,0。我们下面不带前缀的三条只有 0,1,0 / 0,2,0,
* **一条都赢不了** —— 也就是说 3.2.20 重做以来,正文框的
* 边框色(#dfe4ec)、圆角(4px)、浅底(#fcfcfd)、hover 变深、
* focus 变主色,**全部从未真正上线**,用户看到的一直是
* kratos.css 的 #eee / 3px / 灰底,focus 时只有那圈外环是我们的。
* 3.2.23 用户指出"输入框选中时周边颜色不对",才把这个老问题翻出来。
*
* 修法:同选择器(0,6,0)+ 三态伪类(各再 +0,1,0),且本表
* 依赖 kratos 后加载 —— 每条都稳定压过基础主题。 */
.k-main .details .comments .comment-respond .comment-textarea,
.comment-textarea {
position: relative;
border: 1px solid #dfe4ec;
@@ -876,10 +896,14 @@
background-color 0.16s var(--yq-ease);
}
.k-main .details .comments .comment-respond .comment-textarea:hover:not(:focus-within),
.comment-textarea:hover:not(:focus-within) {
border-color: #cdd6e2;
}
/* focus:边框与外环都是主色(「发布评论」按钮的背景色)——
* 3.2.23 用户要求:"输入框被选中的时候,周边的颜色,也变成这个颜色"。 */
.k-main .details .comments .comment-respond .comment-textarea:focus-within,
.comment-textarea:focus-within {
border-color: var(--yq-primary, #00a2ff);
background-color: #fff;