Files
wordpress-theme-aksrt/assets/css/frontend/single-post/cover.css
T

196 lines
5.8 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ============================================================
* 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 > .img-icon,
.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 > .img-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-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); }