Claude
4325ce0c1c
The level (等级) badge was wrapping to its own line below the username and rendering at the intrinsic PNG size in most surfaces. Centralize the badge sizing after zibll's `.img-icon` (height: 1.1em, inline-block) in base.css so every route gets the same compact inline badge, and keep the name row from flex-wrapping. - Add shared `.aksrt-user-level-icon / .aksrt-identity-medal` rule + nowrap name rows in base.css (loaded on all routes). - Header dropdown: append the level icon next to the display name (was a separate badges row); constrain the name to ellipsis so the badge never wraps. - User center profile header & author hero: render the level icon inside the <h1> name row; drop the duplicate level chip from the signals row. - Single article author bar / after-box author card: nowrap the name row and size the level icon to 1.2em (was unstyled → intrinsic PNG size). - Comments: inner <name> nowrap with a name clamp; medal sized to 1em. - Consolidate the per-route `.aksrt-user-level-icon` duplicates in user-center/level.css and profile/layout.css onto the shared rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
329 lines
8.3 KiB
CSS
329 lines
8.3 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) — Zibll .single-cover ===== */
|
|
.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;
|
|
/* Zibll: padding-bottom: calc(var(--single-cover-scale) + 50px) */
|
|
padding-bottom: calc(var(--single-cover-scale, 35%) + 50px);
|
|
}
|
|
|
|
.single-cover-slide {
|
|
padding-bottom: calc(var(--scale-height, var(--single-cover-scale, 35%)) + 50px);
|
|
border-radius: var(--main-radius, var(--radius, 8px));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Legacy overlay helpers (kept for non-zibll markup) */
|
|
.single-cover__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 30%,
|
|
rgba(0, 0, 0, 0.6) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.single-cover__content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 24px;
|
|
color: #fff;
|
|
border-radius: 0 0 var(--main-radius, var(--radius, 8px)) var(--main-radius, var(--radius, 8px));
|
|
}
|
|
|
|
.single-cover__title,
|
|
.single-cover__content .article-title {
|
|
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
|
|
font-weight: 700;
|
|
margin: 0 0 6px;
|
|
line-height: 1.35;
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
color: #fff;
|
|
}
|
|
|
|
.single-cover__meta,
|
|
.single-cover__content .cover-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.single-cover__meta span,
|
|
.single-cover__content .cover-meta .meta-view {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* ===== Video Cover ===== */
|
|
.single-cover--video {
|
|
background: #000;
|
|
}
|
|
|
|
.single-cover--video .single-cover__video {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ===== Slide Cover ===== */
|
|
.single-cover--slide {
|
|
background: var(--color-bg-2, #f5f5f5);
|
|
}
|
|
|
|
.single-cover__slides {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.single-cover__slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.single-cover__slide.is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.single-cover__slide img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-cover__dots {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
right: 18px;
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.single-cover__dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.32);
|
|
transition: background 0.3s ease, transform 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.single-cover__dot.is-active {
|
|
background: #fff;
|
|
transform: scale(1.12);
|
|
}
|
|
|
|
/* ===== 面包屑 ===== */
|
|
.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 {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.article-avatar {
|
|
position: relative;
|
|
}
|
|
|
|
/* line-form-line geometry owned by zibll-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 (Zibll single-video-footer) ===== */
|
|
.single-head-cover .single-video-footer { padding: 12px 4px 4px; }
|
|
.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);
|
|
}
|
|
.single-head-cover .cover-meta.single-metabox {
|
|
display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--color-ink-4);
|
|
}
|
|
/* Pay box root — Zibll #posts-pay.zib-widget.pay-box */
|
|
#posts-pay.zib-widget,
|
|
#posts-pay.pay-box,
|
|
.aksrt-single-pay-box {
|
|
margin: 16px 0 20px;
|
|
}
|
|
#posts-pay .aksrt-paywall,
|
|
.aksrt-single-pay-box .pay-box,
|
|
.aksrt-single-pay-box .aksrt-paywall {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 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.cover-meta,
|
|
.cover-meta.abs-right {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 3;
|
|
color: #fff;
|
|
}
|
|
.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;
|
|
}
|
|
.single-cover-slide-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--main-radius, var(--radius, 8px));
|
|
}
|
|
.single-cover-slide-wrap .abs-center.left-bottom {
|
|
z-index: 2;
|
|
padding: 15px 15px 10px 15px;
|
|
color: #fff;
|
|
}
|
|
.article-avatar name.flex {
|
|
gap: 4px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.article-avatar .aksrt-vip-badge,
|
|
.article-avatar .aksrt-identity-chip {
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
vertical-align: middle;
|
|
}
|
|
.article-avatar .medal-icon.img-icon,
|
|
.article-avatar .aksrt-identity-medal,
|
|
.article-avatar .aksrt-user-level-icon {
|
|
width: auto;
|
|
height: 1.2em;
|
|
max-width: 6em;
|
|
object-fit: contain;
|
|
vertical-align: -.15em;
|
|
margin-left: 4px;
|
|
}
|
|
.article-avatar .display-name {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
|
|
/* 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); }
|
|
.aksrt-slider-overlay .single-metabox,
|
|
.aksrt-slider-overlay .cover-meta { pointer-events: auto; }
|
|
.aksrt-slider-overlay .post-drop-meta { pointer-events: auto; }
|