fix(single): place the video footer breadcrumb like the reference

Drop the invented .post-breadcrumbs wrapper and echo the breadcrumb
inside the reference's flex jsb at row; split .single-video .breadcrumb
out of the cover-overlay rule (-6px pull and opacity reset belong to
title-over-cover contexts only) and restore the legacy 15px footer
padding. Pin the structure in the cover contract test and rebuild the
homepage aggregates.
This commit is contained in:
2026-09-06 11:26:21 +08:00
parent d3eef19b95
commit 9496db5171
6 changed files with 46 additions and 20 deletions
+6 -4
View File
@@ -839,12 +839,11 @@ ul.breadcrumb > li:last-child,
color: var(--main-color, var(--color-ink-2, #4e5358));
}
/* Cover / video footer breadcrumb — legacy single-cover-con / single-video */
/* Cover overlay breadcrumb — legacy .single-cover-con:标题叠加封面,
面包屑需要 -6px 左拉与不透明度还原。 */
.single-cover-con .breadcrumb,
.single-cover-con ul.breadcrumb,
.single-cover-con .breadcrumb-nav,
.post-breadcrumbs .breadcrumb,
.single-video .breadcrumb {
.single-cover-con .breadcrumb-nav {
font-size: 13px;
margin: 5px 0 0 -6px;
opacity: unset;
@@ -852,6 +851,9 @@ ul.breadcrumb > li:last-child,
background: transparent;
}
/* Video footer breadcrumb — legacy .single-video .breadcrumb:标题在下方
footer(flex jsb at 行)不叠加封面,只归零内边距,保留基础弱化样式
(opacity .6 与 12px 下边距),对齐 zibll main.css。 */
.single-video .breadcrumb {
padding: 0;
}
+1 -1
View File
File diff suppressed because one or more lines are too long
+6 -4
View File
@@ -69,12 +69,11 @@ ul.breadcrumb > li:last-child,
color: var(--main-color, var(--color-ink-2, #4e5358));
}
/* Cover / video footer breadcrumb — legacy single-cover-con / single-video */
/* Cover overlay breadcrumb — legacy .single-cover-con:标题叠加封面,
面包屑需要 -6px 左拉与不透明度还原。 */
.single-cover-con .breadcrumb,
.single-cover-con ul.breadcrumb,
.single-cover-con .breadcrumb-nav,
.post-breadcrumbs .breadcrumb,
.single-video .breadcrumb {
.single-cover-con .breadcrumb-nav {
font-size: 13px;
margin: 5px 0 0 -6px;
opacity: unset;
@@ -82,6 +81,9 @@ ul.breadcrumb > li:last-child,
background: transparent;
}
/* Video footer breadcrumb — legacy .single-video .breadcrumb:标题在下方
footer(flex jsb at 行)不叠加封面,只归零内边距,保留基础弱化样式
(opacity .6 与 12px 下边距),对齐 zibll main.css。 */
.single-video .breadcrumb {
padding: 0;
}
+2 -8
View File
@@ -50,13 +50,6 @@
background: var(--color-bg-2, #f5f5f5);
}
/* ===== 面包屑 ===== */
.post-breadcrumbs {
margin-bottom: 12px;
font-size: 13px;
color: var(--color-ink-4, var(--color-ink-4));
}
.article-title + .img-badge,
.single-head-cover .img-badge.right,
.article-header .img-badge.right {
@@ -101,7 +94,8 @@
/* ===== Video footer (legacy single-video-footer) ===== */
.single-head-cover .single-video-footer { padding: 12px 4px 4px; }
/* 内边距沿用 legacy 契约 .single-video-footer{padding:15px}(与 zibll 一致),
面包屑在 flex jsb at 行首,不再额外包装。 */
.single-head-cover .single-video-footer .article-title {
font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; margin: 8px 0 0; line-height: 1.35;
}
+3 -3
View File
@@ -38,9 +38,9 @@ if (!function_exists('aksrt_single_render_cover')) :
<div class="aksrt-video single-cover__player" data-aksrt-video data-src="<?php echo esc_url($ctx['cover_url']); ?>"<?php echo $poster !== '' ? ' data-poster="' . esc_url($poster) . '"' : ''; ?> style="position:absolute;inset:0;width:100%;height:100%;"></div>
</div>
<div class="single-video-footer dplayer-featured">
<?php if ($crumbs !== '') : ?>
<div class="post-breadcrumbs"><?php echo $crumbs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
<?php endif; ?>
<div class="flex jsb at">
<?php echo $crumbs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h1 class="article-title">
<?php
$episodes = is_array($ctx['video_episodes'] ?? null) ? $ctx['video_episodes'] : [];
@@ -123,6 +123,34 @@ test('video cover: play never runs against a sourceless player', () => {
assert.doesNotMatch(player, /querySelectorAll\('\.switch-video, \.switch-iframe'\)/);
});
test('video cover: footer breadcrumb sits in the reference flex row', () => {
const breadcrumbCss = read('assets/css/frontend/breadcrumb.css');
const coverCss = read('assets/css/frontend/single-post/cover.css');
// 对齐 zibll:footer 里面包屑直接位于 flex jsb at 行,无自造包装层。
assert.match(
singleRender,
/single-video-footer dplayer-featured">\s*\n\s*<div class="flex jsb at">\s*\n\s*<\?php echo \$crumbs;/,
'视频 footer 面包屑必须在 flex jsb at 行内直出'
);
assert.doesNotMatch(
singleRender + breadcrumbCss + coverCss,
/post-breadcrumbs/,
'自造的 .post-breadcrumbs 包装层已死,禁止回归'
);
// 视频面包屑只归零 padding、保留基础弱化样式;-6px 左拉仅属封面叠加层。
assert.match(breadcrumbCss, /\.single-video \.breadcrumb \{\s*\n padding: 0;\s*\n\}/);
assert.doesNotMatch(
breadcrumbCss,
/\.single-video \.breadcrumb,[\s\S]{0,200}margin: 5px 0 0 -6px/,
'.single-video 不得并入 -6px 叠加组,否则面包屑贴出左边界'
);
// footer 内边距恢复 legacy 15px 契约,禁止 4px 侧边距覆盖。
assert.doesNotMatch(coverCss, /\.single-video-footer \{ padding:/);
});
test('resource singles get the cover leaf versioned, never via the aggregate @import', () => {
// 聚合文件的 @import 无版本号:浏览器会拿旧缓存(含已废弃的 .single-cover
// padding 规则)把封面高度链挤成 0,资源型文章封面直接空白。