This commit is contained in:
make
2026-01-09 01:28:23 +08:00
parent eb8c097777
commit 90fc16fbc3
241 changed files with 26518 additions and 3570 deletions

View File

@@ -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;
}

View File

@@ -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);
}
/* 信息区居中 */

View File

@@ -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);
}
/* 封面图 */

View File

@@ -17,7 +17,7 @@
display:flex;
align-items:center;
gap:10px;
padding:6px 0;
padding:6px;
}
/* 序号 */

View File

@@ -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 / v08root 直接左右分栏 */
.__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;
}
/* v01row 才是主 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;
}
/* v02meta 行左右分布 */
.__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;
}
/* v03top 行左右 */
.__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;
}
/* v04grid 两列 */
.__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;
}
/* v06body 行左右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;
}
/* v07wrap 左右 */
.__PFX__-titleF.__PFX__-titleF-v07 .__PFX__-titleF-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
/* v09bar 左右 */
.__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;
}
/* v10head 左右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;
}
/* v11rail + contentcontent 左右 */
.__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;
}
/* v12shell 左右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;
}
/* v13inner 左右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;
}
/* v14frame 左右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;
}
/* v15core 左右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;
}
/* v16hero 左右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;
}
/* v17flex 左右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;
}
/* v18split 左右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;
}
/* v19pane 左右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;
}
}