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.
200 lines
5.9 KiB
CSS
200 lines
5.9 KiB
CSS
/* ============================================================
|
||
* v4.3 cover, author bar, actions, author card, nav, and related posts
|
||
* The cover stays inside the content column with a fixed aspect ratio box.
|
||
* ============================================================ */
|
||
|
||
/* ===== Cover (in-column ratio box) — legacy .single-cover ===== */
|
||
/* 高度由各模式的内联 padding-bottom 决定;此处不得再声明 padding-bottom,
|
||
* 否则会挤压绝对定位轮播内层(同样挂 .single-cover 类)的 content box。 */
|
||
.single-cover {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: var(--main-radius, var(--radius, 8px));
|
||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.single-cover > .fit-cover,
|
||
.single-cover > img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.single-cover-con {
|
||
color: #fff;
|
||
padding: 15px 15px 10px 15px;
|
||
border-radius: 0 0 var(--main-radius, var(--radius, 8px)) var(--main-radius, var(--radius, 8px));
|
||
background-image: linear-gradient(0deg, rgba(29, 41, 49, 0.5), rgba(255, 255, 255, 0));
|
||
padding-top: 2em;
|
||
}
|
||
|
||
.single-cover-con a {
|
||
color: #fff;
|
||
}
|
||
|
||
.single-video .article-title,
|
||
.single-cover-con .article-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ===== Video Cover ===== */
|
||
.single-cover--video {
|
||
background: #000;
|
||
}
|
||
|
||
.single-cover--slide {
|
||
background: var(--color-bg-2, #f5f5f5);
|
||
}
|
||
|
||
.article-title + .img-badge,
|
||
.single-head-cover .img-badge.right,
|
||
.article-header .img-badge.right {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.article-avatar {
|
||
position: relative;
|
||
}
|
||
|
||
/* line-form-line geometry owned by legacy-utilities.css (absolute full-width bottom).
|
||
* Here only ensure the meta row has height so the rule sits correctly. */
|
||
.article-header .article-avatar .relative {
|
||
margin-top: 20px;
|
||
position: relative;
|
||
min-height: 1px;
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
/* ===== Article Card ===== */
|
||
.article-card {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.article-card__header {
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--color-line);
|
||
}
|
||
|
||
.article-card__title {
|
||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||
font-weight: 800;
|
||
margin: 0;
|
||
line-height: 1.35;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
|
||
|
||
/* ===== Video footer (legacy single-video-footer) ===== */
|
||
/* 内边距沿用 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;
|
||
}
|
||
.single-head-cover .featured-video-episode { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
||
.single-head-cover .featured-video-episode .switch-video {
|
||
display: inline-flex; align-items: center; max-width: 100%; padding: 6px 10px; border-radius: 8px;
|
||
background: var(--surface-2, rgba(0,0,0,.04)); color: var(--color-ink); font-size: 13px;
|
||
}
|
||
.single-head-cover .featured-video-episode .switch-video.active {
|
||
background: var(--color-primary-soft, rgba(240, 68, 148, 0.12)); color: var(--color-primary);
|
||
}
|
||
/* Cover meta pills + title-h-left */
|
||
.single-cover-con .article-title.title-h-left,
|
||
.single-cover .article-title.title-h-left {
|
||
color: #fff;
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
|
||
margin: 0;
|
||
}
|
||
.single-metabox .post-metas item,
|
||
.single-metabox .post-metas item a {
|
||
color: inherit;
|
||
opacity: 0.92;
|
||
margin-left: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.single-metabox .post-metas item .fa,
|
||
.single-metabox .post-metas item i {
|
||
margin-right: 3px;
|
||
opacity: 0.9;
|
||
}
|
||
.article-avatar name.flex {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-wrap: nowrap;
|
||
min-height: 1.1em;
|
||
line-height: 1.1;
|
||
}
|
||
.article-avatar name.flex > .display-name {
|
||
line-height: 1.1;
|
||
}
|
||
.article-avatar name.flex > .aksrt-vip-badge,
|
||
.article-avatar name.flex > .aksrt-identity-certification-icon,
|
||
.article-avatar name.flex > .aksrt-identity-medal,
|
||
.article-avatar name.flex > .aksrt-user-level-icon,
|
||
.article-avatar name.flex > .aksrt-user-level-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: auto;
|
||
height: 1.1em;
|
||
max-height: 1.1em;
|
||
max-width: 6em;
|
||
margin: 0;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
line-height: 1;
|
||
vertical-align: middle;
|
||
box-sizing: border-box;
|
||
flex: 0 0 auto;
|
||
}
|
||
.article-avatar name.flex > .aksrt-vip-badge__icon,
|
||
.article-avatar name.flex > .aksrt-identity-certification-icon,
|
||
.article-avatar name.flex > .aksrt-identity-medal,
|
||
.article-avatar name.flex > .aksrt-user-level-icon {
|
||
object-fit: contain;
|
||
}
|
||
.article-avatar name.flex > .aksrt-vip-badge > i {
|
||
font-size: .9em;
|
||
line-height: 1;
|
||
}
|
||
.article-avatar name.flex > .aksrt-user-level-badge {
|
||
font-size: .78em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
|
||
/* Slide cover overlay (injected by aksrt_render_slider overlay_html) */
|
||
.aksrt-slider-wrapper--has-overlay,
|
||
.aksrt-slider-wrapper--scale {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: var(--main-radius, var(--radius, 8px));
|
||
}
|
||
.aksrt-slider-wrapper--scale .new-swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
.aksrt-slider-wrapper--scale .swiper-slide img.fit-cover { width: 100%; height: 100%; object-fit: cover; }
|
||
.aksrt-slider-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
|
||
.aksrt-slider-overlay .abs-center.left-bottom {
|
||
pointer-events: none;
|
||
padding: 15px 15px 10px 15px;
|
||
color: #fff;
|
||
background-image: linear-gradient(0deg, rgba(29, 41, 49, 0.5), rgba(255, 255, 255, 0));
|
||
padding-top: 2em;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.aksrt-slider-overlay .article-title,
|
||
.aksrt-slider-overlay .article-title.title-h-left { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
|
||
.aksrt-slider-overlay .breadcrumb a,
|
||
.aksrt-slider-overlay .breadcrumb li { color: rgba(255,255,255,.9); }
|