laoyang
420605f462
3.2.22 评论区:引导线跟着右移到正文左边缘,锚点高亮改回黄色
用户对 3.2.21 的反馈:
「回复的内容和上面评论的正文是对齐了,但是回复内容左侧有一条蓝色的线
还是没有对齐。那条蓝色的线也要向右移,让那条线和上面评论的内容正文对齐。
如果是为了突出显示打开文章时的锚点,那还是用黄色吧。」
1. 引导线右移
原来线写在容器的 border-left 上。边框只能贴在盒子外沿,也就是父评论的
最左边(父头像那一列),而子回复整块已经右移到父正文的位置了,中间
空出 55px,线与内容脱节。
现在改成绝对定位的 ::before,位置由缩进算出:
left: calc(var(--yq-indent) - var(--yq-guide-w))
线的右边缘正好压住正文左边缘。断点里改缩进,线自动跟着走,
不需要另写一遍。三档屏幕实测误差 0px。
取右边缘对齐而不是左边缘,是因为线宽 2px:若左边缘对齐,线会压住
子头像左侧(头像有一圈 1px 描边,压上去发脏)。
2. 缩进值 53 → 55(连带 44→46、40→42)
旧值扣掉了 2px,因为那时线是 border,而 padding 从边框内侧算起。
线不再占布局后,那 2px 不该再扣,否则子回复整体左移 2px。
缩进回到最朴素的形式:头像宽 + 列间距。以后改这一个数,
线和内容一起动,不会再出现「只对一半」。
3. 锚点高亮改回暖黄 #fffbe8
3.2.21 改成浅蓝的理由是「全站只有待审核用暖色」。但用户指出它
是用于突出显示锚点,该用黄色。这个判断是对的:锚点高亮需要在一整片
蓝白里「跳出来」,浅蓝与引导线、按钮描边同色系,反而被当成背景噪音。
与「刚提交」的分工因此清楚:
:target → 暖黄(一次性,指路)
is-new → 浅蓝(即时反馈,我刚发的)
同页出现也能分辨。
深层(第三个 children 容器起)仍然不画线,改用 content: none 关掉,
而不是以前的 border-left-color: transparent —— 伪元素没有"透明的线"
这种语义,直接不生成更干净。
只改样式表与版本号,评论的取数、分页、回复、加载更多逻辑未动。
2026-10-24 20:12:23 +08:00
..
2026-10-24 20:12:23 +08:00
2026-10-23 22:56:10 +08:00
2026-10-23 22:56:10 +08:00
2026-10-24 01:03:36 +08:00