31 lines
2.3 KiB
Markdown
31 lines
2.3 KiB
Markdown
修复文章详情页分割线右侧三点图标不居中的问题
|
|
|
|
## 根因
|
|
|
|
三点按钮（`inc/helpers/aksrt-single-components.php:131-146`）为 `<button class="but cir post-drop-meta__toggle"><i class="fa fas fa-ellipsis-h"></i></button>`，位于 `templates/parts/single-author-bar.php` 中 `.single-meta-row` 分割线右端。`.but.cir` 是 `inline-flex; justify-content: center`，flex 居中的是子元素的 margin box。`assets/css/core/buttons.css` 中存在特异性冲突：
|
|
|
|
- 第 183 行 `.but > i[class*="fa-"]:not(.fa-angle-right) { margin-right: 0.25em; }` 特异性 (0,3,1)
|
|
- 第 225 行 `.but.cir > .fa { margin: 0; }`（本意的重置规则）特异性 (0,3,0)，被压掉
|
|
|
|
导致图标右侧残留 0.25em 外边距（15px 字号下约 3.75px），三点整体左偏约 1.9px。这是全局 bug，所有 `.but.cir` 图标按钮都受影响。
|
|
|
|
## 修改内容
|
|
|
|
1. **`assets/css/core/buttons.css:224-225`** — 加强重置规则的特异性到 (0,4,0)，稳定压过 (0,3,1) 的 margin 规则（不依赖源码顺序）：
|
|
```css
|
|
.but.cir svg.icon,
|
|
.but.cir > .fa,
|
|
.but.cir > .fa:not(.fa-angle-right),
|
|
.but.cir > i[class*="fa-"]:not(.fa-angle-right) { margin: 0; }
|
|
```
|
|
附一行注释说明 `:not()` 变体是为压过 `.but > i[class*="fa-"]:not(.fa-angle-right)` 的 margin 规则。保留原 `.but.cir > .fa` 选择器以继续覆盖 fa-angle-right 图标。不改 main.css（旧的手工捆绑副本）：public 捆绑包中 core/buttons.css 副本排在 main.min.css 之后，高特异性重置必然胜出。
|
|
|
|
2. **重建捆绑包** — 运行 `node tools/build-public-assets.mjs`（esbuild 已就绪），重新生成 `assets/css/build/public.css/.min.css` 等捆绑文件。
|
|
|
|
3. **新增契约测试** `tests/widget-system/circular-button-icon-margin-contract.test.cjs`：断言源文件 buttons.css 与构建产物 public.min.css 中包含加强后的重置选择器（防止特异性回归），沿用现有 `*.test.cjs` 契约测试模式。
|
|
|
|
## 验证
|
|
|
|
- `node --test tests/widget-system/circular-button-icon-margin-contract.test.cjs` 通过
|
|
- 在构建后的 `public.min.css` 中确认重置规则存在且位于 margin 规则之后
|
|
- 刷新文章详情页目视确认三点图标在圆形按钮内水平居中（同时全站其他 `.but.cir` 图标按钮居中恢复正常） |