From 92ffced7cfd02cb1448d5c9dd9acddc9f77ec6b0 Mon Sep 17 00:00:00 2001 From: laoyang Date: Sat, 24 Oct 2026 23:58:55 +0800 Subject: [PATCH] =?UTF-8?q?3.2.26:=20=E8=AF=84=E8=AE=BA=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E9=87=8D=E6=8E=92=EF=BC=88=E5=A7=93=E5=90=8D/=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD=E4=BA=8E=E5=A4=B4?= =?UTF-8?q?=E5=83=8F=E3=80=81=E6=AD=A3=E6=96=87=E5=85=A8=E5=AE=BD=E4=B8=8B?= =?UTF-8?q?=E7=A7=BB=2010px=EF=BC=8C=E9=94=9A=E7=82=B9=E9=BB=84=E5=BA=95?= =?UTF-8?q?=E4=B8=8D=E5=86=8D=E5=8E=8B=E4=BD=9C=E8=80=85=E5=BE=BD=E7=AB=A0?= =?UTF-8?q?=EF=BC=89=EF=BC=9B=E5=BC=95=E5=AF=BC=E7=BA=BF=E4=B8=8E=E5=AD=90?= =?UTF-8?q?=E5=9D=97=E7=95=99=208px=20=E7=A9=BA=E9=9A=99=E5=B9=B6=E4=B8=8E?= =?UTF-8?q?=E7=BC=A9=E8=BF=9B=E5=90=8C=E6=BA=90=EF=BC=88--yq-my-indent?= =?UTF-8?q?=EF=BC=89=EF=BC=9B=E4=BF=AE=E6=B7=B1=E5=B1=82=E7=BC=A9=E8=BF=9B?= =?UTF-8?q?=E6=99=9A=E4=B8=80=E5=B1=82=E7=94=9F=E6=95=88=E7=9A=84=E5=AD=98?= =?UTF-8?q?=E9=87=8F=20bug=EF=BC=9B=E5=90=8E=E5=8F=B0=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E9=A1=B5=E6=A0=87=E9=A2=98=20margin=20=E6=94=B6=E7=BC=96?= =?UTF-8?q?=EF=BC=88=E9=A1=B9=E9=97=B4=E7=A9=BA=E7=99=BD=2042=E2=86=9222px?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/comments.css | 99 +++++++++++++++++-- .../css/optionsframework.css | 13 ++- style.css | 2 +- 3 files changed, 102 insertions(+), 12 deletions(-) diff --git a/assets/css/comments.css b/assets/css/comments.css index 5c8ef99..940d58b 100644 --- a/assets/css/comments.css +++ b/assets/css/comments.css @@ -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 { diff --git a/inc/options-framework/css/optionsframework.css b/inc/options-framework/css/optionsframework.css index 554583f..ac0412f 100644 --- a/inc/options-framework/css/optionsframework.css +++ b/inc/options-framework/css/optionsframework.css @@ -458,12 +458,21 @@ color: #1d2327; } -/* 2. 区块间距与分隔：原来 10px 的内边距太挤，项与项之间没有分界 */ +/* 2. 区块间距与分隔：原来 10px 的内边距太挤，项与项之间没有分界。 + * 3.2.26 调整：16/8 → 14/12，并清掉 h4 标题的 WP 默认 margin（见下） */ #optionsframework .section { - padding: 16px 18px 8px; + padding: 14px 18px 12px; border-bottom: 1px solid #f6f7f7; } +/* 3.2.26：配置项标题（h4.heading）继承 WP 后台 common.css 的 + * 上下 margin ≈17px，与 section 的 padding 叠加后，相邻两个配置项 + * 之间出现约 42px 的空白（8+16+17.3）。标题的内距统一由本条控制： + * 上边距清零（section 的 padding-top 负责），下边距 10px 压住控件。 */ +#optionsframework .section > .heading { + margin: 0 0 10px; +} + /* 3. 提交栏：与分组标题同一套留白 */ #optionsframework-submit { padding: 12px 18px; diff --git a/style.css b/style.css index 96497e3..f264419 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.25 +Version: 3.2.26 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好