3.2.26: 评论布局重排(姓名/时间垂直居中于头像、正文全宽下移 10px,锚点黄底不再压作者徽章);引导线与子块留 8px 空隙并与缩进同源(--yq-my-indent);修深层缩进晚一层生效的存量 bug;后台设置页标题 margin 收编(项间空白 42→22px)

This commit is contained in:
2026-10-24 23:58:55 +08:00
parent fb12d58067
commit 92ffced7cf
3 changed files with 102 additions and 12 deletions
+90 -9
View File
@@ -103,6 +103,11 @@
* 改成 2px 以外还要同时看 --yq-indent 的定义,别只改一处。 */
--yq-guide-w: 2px;
/* 引导线与子回复块(头像)之间的空隙(3.2.26)。
* 3.2.22 线的右边缘贴着子头像左边缘 —— 用户反馈"紧挨着不好看",
* 现在线让出 8px。线的 left = indent − 线宽 − 这个空隙。 */
--yq-guide-gap: 8px;
/* 统一动效曲线:进出都用同一条,避免"有的滑有的弹" */
--yq-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -300,12 +305,70 @@
min-width: 0; /* 关键:让内部的 text-overflow / 换行能生效 */
}
/* ── 3.2.26 布局重排:姓名信息与头像垂直居中,内容移到头像下方 ──
* 旧布局是"左头像、右(头行+正文)"两列并排,两个问题:
* ① 锚点黄底(打在正文区,带 8px 外扩光晕)向上顶到头行的
* 「作者」蓝标,两块颜色叠在一起;
* ② 正文顶着头行,离姓名/时间太近。
* 用户方案:姓名/时间**垂直居中于头像**(头行与头像同一行、
* align-self: center),正文**整行移到头像那一行的下面**,
* 顶部再留 10px —— 内容与作者信息自然拉开,黄底光晕也够不着头行。
*
* 实现:walker 生成的 .yang-comment-main 包着头行/正文/操作区,
* 模板不动,用 display: contents 把这个盒子从布局里"拿掉",
* 让三个孩子直接成为 li 的 grid 项:
* 第 1 行 头像 | 头行(居中)
* 第 2 行 正文(跨两列,全宽)
* 第 3 行 操作区(跨两列)
* 第 4 行 子评论(跨两列,原有规则)
* ⚠️ display: contents 后 .yang-comment-main 自身的 min-width 失效,
* 由头行接棒;正文成为跨列 grid 项后,长 URL 的 min-content 可能
* 把第 1 列(auto,头像列)撑宽 —— 用 overflow-wrap: anywhere 压掉
* 它的 min-content 贡献(探针断言头像列恒为 42px 兜底)。 */
.yang-comment-main {
display: contents;
}
.yang-comment {
grid-template-areas:
"avatar head"
"body body";
}
.yang-comment-avatar {
grid-area: avatar;
}
.yang-comment-head {
grid-area: head;
min-width: 0;
/* 姓名信息显示在头像的正中间:第 1 行的高度由头像(42px)撑起,
头行在行内垂直居中 */
align-self: center;
margin-bottom: 0; /* 原来的 5px 交给正文的 margin-top */
}
.yang-comment-content {
grid-area: body;
margin-top: 10px;
/* 压掉跨列项的 min-content 贡献,防止长 URL 撑宽头像列
(break-word 不参与 min-content 计算,anywhere 才参与) */
overflow-wrap: anywhere;
}
.yang-comment-actions {
/* 操作区也整行放下(跟随正文全宽),隐式第 3 行 */
grid-column: 1 / -1;
}
.yang-comment-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 5px;
/* 3.2.26:原 5px。正文下移后间距由 .yang-comment-content 的
margin-top 统一控制,这里清零,别两处叠加 */
margin-bottom: 0;
}
.yang-comment-author {
@@ -555,31 +618,42 @@
* 重合,于是线完全落在头像左侧、不压头像(头像有一圈 1px 描边,压上去会脏)。
* 视觉上就是"一条竖线紧贴正文左边缘",这也正是用户要的对齐。
*
* ⚠️ 3.2.26 起不再"紧贴":用户反馈线与子回复头像挨得太近,
* 定位改为 `left: calc(indent - 线宽 - var(--yq-guide-gap))`,
* 线的右边缘与子块(头像)左边缘之间留 8px 空隙。
* (3.2.26 同批布局重排后正文整行下移到头像下方,"线对齐正文"
* 这个前提也不复存在 —— 线现在是"挂在子块左侧、让出空隙"的装饰。)
*
* ⚠️ 缩进仍然只能用 padding-left,**不能用 margin-left**:
* `_diag318_children_geo.js` 判据 A 要求 `ol.yang-children` 的
* 左偏移(相对父 li)≤4px、判据 B 要求宽度 ≥ 父宽 90%。
* margin-left 会同时破坏这两条,padding-left 不会。
* (伪元素是绝对定位、不参与布局,所以加它不影响这两条判据。)
*
* 引导线用主题主色的浅色版 #cfe6fb(和「写下你的评论」按钮的描边
* 同一个色)—— 原来是灰蓝 #dbe6f2,用户要求改成主题自带的浅蓝。 */
* ⚠️ 3.2.26:缩进量收进**本容器的单一变量** --yq-my-indent ——
* padding 与引导线的 left 都从它取值。此前线写死 `var(--yq-indent)`,
* 深层容器换成 deep 缩进后线还按基础缩进定位,会压进子正文 12px;
* 单一变量后改哪层缩进,线自动跟。 */
.yang-children {
--yq-my-indent: var(--yq-indent, 55px);
position: relative;
margin-top: 4px;
padding-left: var(--yq-indent, 55px);
padding-left: var(--yq-my-indent);
}
/* 竖线本体。不占布局,所以不会像 border 那样把内容再推 2px。
* top/bottom 撑满整块,等价于原来 border-left 的长度。
* pointer-events: none —— 它压在 padding 区域上,别让它拦住点击。 */
* pointer-events: none —— 它压在 padding 区域上,别让它拦住点击。
* 3.2.26:左端从 `indent − 线宽` 改成 `indent − 线宽 − 空隙` ——
* 原来线的右边缘与子头像左边缘重合(紧挨着),用户要求留出空间。 */
.yang-children::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--yq-indent, 55px) - var(--yq-guide-w, 2px));
left: calc(var(--yq-my-indent, 55px) - var(--yq-guide-w, 2px) - var(--yq-guide-gap, 8px));
width: var(--yq-guide-w, 2px);
background-color: var(--yq-guide, #cfe6fb);
background-color: var(--yq-guide, var(--yq-primary, #00a2ff));
pointer-events: none;
}
@@ -626,11 +700,18 @@
* ⚠️ 这里**必须显式设 padding-left**,不能只关掉线 ——
* 否则它会继承上一层的 55px,与"减小"的意图正好相反。
*
* ⚠️ 选择器必须是**两个** .yang-children(3.2.26 修):
* 第 1 个 ol 装第 2 层回复、第 2 个 ol 装第 3 层回复 ——
* "第三层起换小缩进"要命中的是第 2 个 ol。原来写成三个类,
* 实际命中第 3 个 ol(装第 4 层),深层缩进整整晚了一层才生效;
* 旧探针只判"≥6px"所以多年没暴露,3.2.26 改精确判据后现形。
*
* 注:去掉 border 后,这里的 30px 变成"纯粹的偏移量"。
* 上一版因为 border 占 2px,实际偏移是 32px;差这 2px 对第三层
* 的观感没有影响,且方向是略微更宽松,不去追平。 */
.yang-children .yang-children .yang-children {
padding-left: var(--yq-indent-deep, 30px);
.yang-children .yang-children {
--yq-my-indent: var(--yq-indent-deep, 30px);
padding-left: var(--yq-my-indent);
}
.yang-children .yang-children .yang-children::before {