用户在 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)。徽标里的
「待审核」暖色保留 —— 那是状态色,需要区分度。
只改样式表与版本号,评论的取数、分页、回复、加载更多逻辑未动。
14 lines
609 B
CSS
14 lines
609 B
CSS
/*
|
|
Theme Name: Kratos_Yang
|
|
Text Domain: kratos_Yang
|
|
Version: 3.2.21
|
|
Requires PHP: 7.0
|
|
Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。
|
|
Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好
|
|
Author: Yongquan Yang
|
|
Author URI: https://yangyq.net
|
|
Theme URI: https://code.yangyq.net/laoyang/wordpress-kratos-yang
|
|
License: MIT License
|
|
License URI: https://code.yangyq.net/laoyang/wordpress-kratos-yang/src/branch/main/LICENSE
|
|
*/
|