kate522andClaude Opus 5
f14e6bd88d
With a featured image the breadcrumb sits under the title inside the cover
overlay, but its first icon started 6px left of the title's left edge.
The overlay rule carried an extra `padding: 0` that this theme added on top of
the reference. The same node also matches `ul.breadcrumb { padding: 0 }`
(0,1,1 specificity), which outranks the base `.breadcrumb { padding: 0 8px }`
(0,1,0) — so the reference's `margin-left: -6px` nudge was applied with no
inset to compensate, pulling the whole row 6px to the left.
Writing the inset back as `padding: 0 8px` on the overlay rule restores the
reference geometry: -6px + 8px nets +2px from the panel edge. The global
`ul.breadcrumb` reset and the video footer variant are untouched, so archive
and video breadcrumbs keep their current padding.
Tests: new case in the single-cover contract suite pins the 8px inset (and the
global reset); cover suite 12/12, widget suite 829/830 with the pre-existing
frontend-lifecycle failure.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
124 lines
2.9 KiB
CSS
124 lines
2.9 KiB
CSS
/* ========== 面包屑导航 — 对齐 legacy .breadcrumb (main.css) ========== */
|
||
/* Single source for breadcrumb chrome. Do not re-define in layout.css. */
|
||
|
||
.breadcrumb,
|
||
ul.breadcrumb,
|
||
.breadcrumb-nav,
|
||
.breadcrumbs-wrap {
|
||
background: transparent;
|
||
font-size: 13px;
|
||
padding: 0 8px;
|
||
margin: 0 0 12px;
|
||
opacity: 0.6;
|
||
line-height: 1.8;
|
||
list-style: none;
|
||
}
|
||
|
||
.breadcrumb-nav ol,
|
||
.breadcrumb-nav ul,
|
||
ul.breadcrumb,
|
||
.breadcrumbs.breadcrumb {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: block;
|
||
}
|
||
|
||
/* legacy uses flat li + li:before separators (not flex-gap nodes) */
|
||
.breadcrumb > li,
|
||
ul.breadcrumb > li,
|
||
.breadcrumb-nav li,
|
||
.breadcrumbs.breadcrumb > li {
|
||
display: inline;
|
||
}
|
||
|
||
.breadcrumb > li + li:before,
|
||
ul.breadcrumb > li + li:before,
|
||
.breadcrumb-nav li + li:before {
|
||
content: "/";
|
||
padding: 0 0 0 6px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Archive/nav variant may still stamp sep nodes — keep neutral */
|
||
.breadcrumbs.breadcrumb .breadcrumbs__sep {
|
||
padding: 0 6px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.breadcrumb a,
|
||
ul.breadcrumb a,
|
||
.breadcrumb-nav a,
|
||
.breadcrumbs a {
|
||
color: var(--muted-2-color, var(--color-ink-4, #999));
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.breadcrumb a:hover,
|
||
ul.breadcrumb a:hover,
|
||
.breadcrumb-nav a:hover,
|
||
.breadcrumbs a:hover {
|
||
color: var(--focus-color, var(--color-primary, #f04494));
|
||
}
|
||
|
||
.breadcrumb > li:last-child,
|
||
ul.breadcrumb > li:last-child,
|
||
.breadcrumb-nav .current,
|
||
.breadcrumbs__item.is-current {
|
||
color: var(--main-color, var(--color-ink-2, #4e5358));
|
||
}
|
||
|
||
/* Cover overlay breadcrumb — legacy .single-cover-con：标题叠加封面。
|
||
只做 -6px 左拉与不透明度还原；padding 需显式给回 0 8px：
|
||
同一节点的 ul.breadcrumb 重置（padding:0）优先级高于 .breadcrumb，
|
||
不写回就会让首项图标比标题左移 6px。 */
|
||
.single-cover-con .breadcrumb,
|
||
.single-cover-con ul.breadcrumb,
|
||
.single-cover-con .breadcrumb-nav {
|
||
font-size: 13px;
|
||
margin: 5px 0 0 -6px;
|
||
opacity: unset;
|
||
padding: 0 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
/* Video footer breadcrumb — legacy .single-video .breadcrumb：标题在下方
|
||
footer（flex jsb at 行）不叠加封面，只归零内边距，保留基础弱化样式
|
||
（opacity .6 与 12px 下边距）。 */
|
||
.single-video .breadcrumb {
|
||
padding: 0;
|
||
}
|
||
|
||
.single-cover-con .breadcrumb,
|
||
.single-cover-con ul.breadcrumb,
|
||
.single-cover-con .breadcrumb-nav {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.single-cover-con .breadcrumb a,
|
||
.single-cover-con ul.breadcrumb a,
|
||
.single-cover-con .breadcrumb-nav a {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.single-cover-con .breadcrumb a:hover,
|
||
.single-cover-con ul.breadcrumb a:hover,
|
||
.single-cover-con .breadcrumb-nav a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
.single-cover-con .breadcrumb > li:last-child,
|
||
.single-cover-con ul.breadcrumb > li:last-child {
|
||
color: #fff;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.breadcrumb,
|
||
ul.breadcrumb,
|
||
.breadcrumb-nav,
|
||
.breadcrumbs-wrap {
|
||
font-size: 12px;
|
||
}
|
||
}
|