gpt
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
.__PFX__-item{
|
||||
width:100%;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.__PFX__-item-link{
|
||||
@@ -53,3 +54,9 @@
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
.lazyload-img{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -18,14 +18,25 @@
|
||||
gap:12px;
|
||||
align-items:flex-start; */
|
||||
}
|
||||
.__PFX__-itv-media01{ --itv-cover-ratio: 16/9; --itv-cover-radius: 12px; }
|
||||
.__PFX__-itv-media02{ --itv-cover-ratio: 4/3; --itv-cover-radius: 10px; }
|
||||
.__PFX__-itv-media03{ --itv-cover-ratio: 3/2; --itv-cover-radius: 14px; }
|
||||
.__PFX__-itv-media04{ --itv-cover-ratio: 21/9; --itv-cover-radius: 18px; }
|
||||
.__PFX__-itv-media05{ --itv-cover-ratio: 5/3; --itv-cover-radius: 8px; --itv-cover-outline: 1px solid rgba(0,0,0,.12); }
|
||||
.__PFX__-itv-media06{ --itv-cover-ratio: 1/1; --itv-cover-radius: 12px; }
|
||||
|
||||
|
||||
/* 封面偏宽 */
|
||||
.__PFX__-item.media .__PFX__-item-cover , .__PFX__-item.media img{
|
||||
flex:0 0 38%;
|
||||
aspect-ratio:16 / 9;
|
||||
border-radius:10px;
|
||||
overflow:hidden;
|
||||
|
||||
background:var(--bg-soft-color);
|
||||
aspect-ratio: var(--itv-cover-ratio, 16/9);
|
||||
border-radius: var(--itv-cover-radius, 12px);
|
||||
background: var(--itv-cover-bg, var(--bg-soft-color));
|
||||
outline: var(--itv-cover-outline, none);
|
||||
box-shadow: var(--itv-cover-shadow, none);
|
||||
}
|
||||
|
||||
/* 信息区居中 */
|
||||
|
||||
@@ -8,14 +8,29 @@
|
||||
gap:6px;
|
||||
}
|
||||
|
||||
.__PFX__-itv-poster01{ --itv-cover-ratio: 2/3; --itv-cover-radius: 12px; }
|
||||
.__PFX__-itv-poster02{ --itv-cover-ratio: 4/5; --itv-cover-radius: 14px; }
|
||||
.__PFX__-itv-poster03{ --itv-cover-ratio: 3/4; --itv-cover-radius: 10px; }
|
||||
.__PFX__-itv-poster04{ --itv-cover-ratio: 9/16; --itv-cover-radius: 16px; }
|
||||
|
||||
.__PFX__-itv-poster05{ --itv-cover-ratio: 1/1; --itv-cover-radius: 12px; }
|
||||
.__PFX__-itv-poster06{ --itv-cover-ratio: 2/3; --itv-cover-radius: 0px; --itv-cover-outline: 1px solid rgba(0,0,0,.10); }
|
||||
.__PFX__-itv-poster07{ --itv-cover-ratio: 4/5; --itv-cover-radius: 20px; --itv-cover-shadow: 0 10px 24px rgba(0,0,0,.12); }
|
||||
.__PFX__-itv-poster08{ --itv-cover-ratio: 3/4; --itv-cover-radius: 8px; --itv-cover-outline: 1px solid rgba(0,0,0,.14); }
|
||||
|
||||
|
||||
/* 封面容器 */
|
||||
.__PFX__-item.poster .__PFX__-item-cover{
|
||||
position:relative;
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
overflow:hidden;
|
||||
border-radius:12px;
|
||||
|
||||
background:var(--bg-soft-color);
|
||||
aspect-ratio: var(--itv-cover-ratio, 2 / 3);
|
||||
border-radius: var(--itv-cover-radius, 12px);
|
||||
background: var(--itv-cover-bg, var(--bg-soft-color));
|
||||
outline: var(--itv-cover-outline, none);
|
||||
box-shadow: var(--itv-cover-shadow, none);
|
||||
}
|
||||
|
||||
/* 封面图 */
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
padding:6px 0;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
/* 序号 */
|
||||
|
||||
@@ -1,45 +1,415 @@
|
||||
/* ================================
|
||||
* Title_F|分类区块标题(带更多)
|
||||
* ================================ */
|
||||
/* =========================================================
|
||||
* Title_F (Family F) — 20 variants compatible CSS
|
||||
* - 只依赖 class 命名:.__PFX__-titleF + .__PFX__-titleF-v00..v19
|
||||
* - 目标:任何 variant 的结构都不会被“全局 flex”误伤
|
||||
* - 你只需要把 __PFX__ 替换为 {$TpStyle.dom_prefix}
|
||||
* ========================================================= */
|
||||
|
||||
.__PFX__-titleF{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
margin:18px 0 10px;
|
||||
/* -------- Base Reset / Tokens -------- */
|
||||
.__PFX__-titleF {
|
||||
margin: 18px 0 10px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 左侧标题区 */
|
||||
.__PFX__-titleF-left{
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
gap:8px;
|
||||
.__PFX__-titleF :where(h1, h2, h3, h4, h5, h6, p, div, span, small, em, i, strong) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.__PFX__-titleF-main{
|
||||
font-size:16px;
|
||||
font-weight:700;
|
||||
color:var(--text-color);
|
||||
line-height:1.2;
|
||||
.__PFX__-titleF :where(a) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.__PFX__-titleF-sub{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
.__PFX__-titleF :where(h3.__PFX__-titleF-main) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: var(--text-color);
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 右侧“更多” */
|
||||
.__PFX__-titleF-more a{
|
||||
font-size:12px;
|
||||
color:var(--primary-color);
|
||||
text-decoration:none;
|
||||
padding:4px 8px;
|
||||
border-radius:999px;
|
||||
background:var(--bg-soft-color);
|
||||
border:1px solid var(--border-color);
|
||||
.__PFX__-titleF :where(.__PFX__-titleF-sub) {
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
color: var(--text-muted-color);
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.__PFX__-titleF-more a:hover{
|
||||
opacity:.85;
|
||||
/* 左侧常见容器:统一“纵向堆叠”,避免被 align-items:center 造成“居中错觉” */
|
||||
.__PFX__-titleF :where(.__PFX__-titleF-left,
|
||||
.__PFX__-titleF-head,
|
||||
.__PFX__-titleF-text,
|
||||
.__PFX__-titleF-stack,
|
||||
.__PFX__-titleF-l,
|
||||
.__PFX__-titleF-cell,
|
||||
.__PFX__-titleF-caption,
|
||||
.__PFX__-titleF-txtBox) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* “更多”链接:兼容三种写法
|
||||
* 1) <a class="...-titleF-more">
|
||||
* 2) <div class="...-titleF-more"><a>...</a>
|
||||
* 3) <div class="...-titleF-cta"><a>...</a>
|
||||
*/
|
||||
.__PFX__-titleF a.__PFX__-titleF-more,
|
||||
.__PFX__-titleF .__PFX__-titleF-more>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-cta>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-nav>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-tail>a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: var(--primary-color);
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-soft-color);
|
||||
border: 1px solid var(--border-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.__PFX__-titleF a.__PFX__-titleF-more:hover,
|
||||
.__PFX__-titleF .__PFX__-titleF-more>a:hover,
|
||||
.__PFX__-titleF .__PFX__-titleF-cta>a:hover,
|
||||
.__PFX__-titleF .__PFX__-titleF-nav>a:hover,
|
||||
.__PFX__-titleF .__PFX__-titleF-tail>a:hover {
|
||||
opacity: .86;
|
||||
}
|
||||
|
||||
/* 为了避免某些布局“撑开后挤压标题”,给右侧按钮一个最小尺寸与不换行策略 */
|
||||
.__PFX__-titleF :where(.__PFX__-titleF-more, .__PFX__-titleF-cta, .__PFX__-titleF-nav, .__PFX__-titleF-tail) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* -------- Decorative bits (safe defaults) -------- */
|
||||
.__PFX__-titleF .__PFX__-titleF-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 99px;
|
||||
background: var(--primary-color);
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.__PFX__-titleF .__PFX__-titleF-kicker {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-color);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.__PFX__-titleF .__PFX__-titleF-mark {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-color);
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.__PFX__-titleF .__PFX__-titleF-sfx {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 99px;
|
||||
background: var(--color_bg_soft, var(--bg-soft-color));
|
||||
border: 1px solid var(--border-color);
|
||||
margin-left: 8px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.__PFX__-titleF .__PFX__-titleF-rail,
|
||||
.__PFX__-titleF .__PFX__-titleF-line {
|
||||
width: 3px;
|
||||
border-radius: 99px;
|
||||
background: var(--primary-color);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
/* -------- Variant Layouts -------- */
|
||||
|
||||
/* v00 / v05 / v08:root 直接左右分栏 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v00,
|
||||
.__PFX__-titleF.__PFX__-titleF-v05,
|
||||
.__PFX__-titleF.__PFX__-titleF-v08 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* v01:row 才是主 flex(修复你提到的“左边居中”问题) */
|
||||
.__PFX__-titleF.__PFX__-titleF-v01 .__PFX__-titleF-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v01 .__PFX__-titleF-stack {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
/* v02:meta 行左右分布 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v02 .__PFX__-titleF-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v02 .__PFX__-titleF-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* v03:top 行左右 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v03 .__PFX__-titleF-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v03 .__PFX__-titleF-more>a {
|
||||
padding: 4px 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* v04:grid 两列 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v04 .__PFX__-titleF-grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v04 .__PFX__-titleF-cell--more {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* v06:body 行左右;line 为装饰 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v06 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v06 .__PFX__-titleF-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v06 .__PFX__-titleF-line {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* v07:wrap 左右 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v07 .__PFX__-titleF-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* v09:bar 左右 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v09 .__PFX__-titleF-bar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v09 .__PFX__-titleF-r {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* v10:head 左右;foot 在下 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v10 .__PFX__-titleF-head {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v10 .__PFX__-titleF-foot {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* v11:rail + content;content 左右 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v11 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v11 .__PFX__-titleF-content {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v11 .__PFX__-titleF-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* v12:shell 左右;badge 装饰 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v12 .__PFX__-titleF-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v12 .__PFX__-titleF-badge {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 99px;
|
||||
background: var(--primary-color);
|
||||
opacity: .7;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* v13:inner 左右;hint 可在下 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v13 {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v13 .__PFX__-titleF-hint {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* v14:frame 左右;tag 装饰 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v14 .__PFX__-titleF-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v14 .__PFX__-titleF-tag {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-color);
|
||||
opacity: .7;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* v15:core 左右;subline 在下 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v15 .__PFX__-titleF-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v15 .__PFX__-titleF-subline {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* v16:hero 左右;note 在下 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v16 .__PFX__-titleF-hero {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v16 .__PFX__-titleF-note {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* v17:flex 左右;pill 装饰 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v17 .__PFX__-titleF-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v17 .__PFX__-titleF-pill {
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border-radius: 99px;
|
||||
background: var(--primary-color);
|
||||
opacity: .7;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* v18:split 左右(root 不做 flex,防止你提到的“居中”再出现) */
|
||||
.__PFX__-titleF.__PFX__-titleF-v18 .__PFX__-titleF-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v18 .__PFX__-titleF-sign {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 99px;
|
||||
background: var(--primary-color);
|
||||
opacity: .7;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* v19:pane 左右;badge/mini 装饰 */
|
||||
.__PFX__-titleF.__PFX__-titleF-v19 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-titleF.__PFX__-titleF-v19 .__PFX__-titleF-badge {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-color);
|
||||
opacity: .75;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* -------- Small screens safety -------- */
|
||||
@media (max-width:420px) {
|
||||
|
||||
.__PFX__-titleF a.__PFX__-titleF-more,
|
||||
.__PFX__-titleF .__PFX__-titleF-more>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-cta>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-nav>a,
|
||||
.__PFX__-titleF .__PFX__-titleF-tail>a {
|
||||
padding: 5px 9px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user