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)。徽标里的
「待审核」暖色保留 —— 那是状态色,需要区分度。
只改样式表与版本号,评论的取数、分页、回复、加载更多逻辑未动。
This commit is contained in:
Reference in New Issue
Block a user