This commit is contained in:
make
2025-12-31 00:49:32 +08:00
parent ae57b68f99
commit eb8c097777
709 changed files with 39727 additions and 1041 deletions

View File

@@ -0,0 +1,55 @@
/* ========== item 基础结构 ========== */
.__PFX__-item{
width:100%;
}
.__PFX__-item-link{
display:block;
color:inherit;
text-decoration:none;
}
.__PFX__-item-cover{
position:relative;
background:var(--bg-soft-color);
overflow:hidden;
}
.__PFX__-item-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.__PFX__-item-score{
position:absolute;
right:6px;
top:6px;
padding:2px 6px;
font-size:12px;
background:rgba(0,0,0,.65);
color:#fff;
border-radius:4px;
}
.__PFX__-item-info{
padding:6px 4px;
}
.__PFX__-item-title{
font-size:14px;
line-height:1.4;
font-weight:600;
}
.__PFX__-item-meta{
font-size:12px;
color:var(--text-muted-color);
}
.__PFX__-item-extra{
font-size:12px;
color:var(--text-muted-color);
}

View File

@@ -0,0 +1,78 @@
/* ===================================================
* Item Mother B - Media Row
* =================================================== */
/* ========== media横向信息流 ========== */
.item-media{
/* display:flex;
gap:12px;
align-items:center; */
}
.item-media img{
width:120px;
aspect-ratio:16/9;
object-fit:cover;
}
.__PFX__-item.media{
/* display:flex;
gap:12px;
align-items:flex-start; */
}
/* 封面偏宽 */
.__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);
}
/* 信息区居中 */
.__PFX__-item.media .__PFX__-item-info{
padding:6px 4px;
display:flex;
flex-direction:column;
justify-content:center;
}
.__PFX__-item.media .__PFX__-item-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* 右侧内容 */
.__PFX__-item.media .__PFX__-item-body{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}
/* 标题 */
.__PFX__-item.media .__PFX__-item-title{
font-size:14px;
font-weight:700;
line-height:1.3;
color:var(--text-color);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* 描述 */
.__PFX__-item.media .__PFX__-item-desc{
font-size:12px;
line-height:1.4;
color:var(--text-muted-color);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

View File

@@ -0,0 +1,62 @@
/* ===================================================
* Item Mother A - Poster Card
* =================================================== */
.__PFX__-item.poster{
display:flex;
flex-direction:column;
gap:6px;
}
/* 封面容器 */
.__PFX__-item.poster .__PFX__-item-cover{
position:relative;
width:100%;
aspect-ratio:2/3;
overflow:hidden;
border-radius:12px;
background:var(--bg-soft-color);
}
/* 封面图 */
.__PFX__-item.poster .__PFX__-item-cover img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* 标题 */
.__PFX__-item.poster .__PFX__-item-title{
font-size:14px;
line-height:1.3;
font-weight:700;
color:var(--text-color);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* 元信息 */
.__PFX__-item.poster .__PFX__-item-meta{
font-size:12px;
color:var(--text-muted-color);
}
/* 强调态(评分 / 热度) */
.__PFX__-item.poster.emphasis{
position:relative;
}
.__PFX__-item.poster.emphasis::after{
content:'';
position:absolute;
inset:0;
border-radius:12px;
box-shadow:0 8px 18px var(--shadow-color);
pointer-events:none;
}

View File

@@ -0,0 +1,49 @@
/* ===================================================
* Item Mother C - Rank / Text
* =================================================== */
/* ========== rank排行榜 ========== */
.__PFX__-item.rank::before{
content:attr(data-rank);
font-size:18px;
font-weight:700;
color:var(--primary-color);
width:28px;
text-align:center;
}
.__PFX__-item.rank{
display:flex;
align-items:center;
gap:10px;
padding:6px 0;
}
/* 序号 */
.__PFX__-item.rank .rank-no{
flex:0 0 24px;
text-align:center;
font-weight:900;
font-size:14px;
color:var(--text-muted-color);
}
/* Top 强化 */
.__PFX__-item.rank.top .rank-no{
color:var(--primary-color);
font-size:16px;
}
/* 标题 */
.__PFX__-item.rank .rank-title{
flex:1;
font-size:14px;
line-height:1.3;
font-weight:600;
color:var(--text-color);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

View File

@@ -0,0 +1,12 @@
/* ========== text极简文本 ========== */
.__PFX__-item.text .__PFX__-item-cover{
display:none;
}
.__PFX__-item.text .__PFX__-item-info{
padding:10px 0;
}
.__PFX__-item.text{
border-bottom:1px solid var(--border-color);
}

View File

@@ -0,0 +1,92 @@
/* ======================================================
* Title Clamp Packs (opt-in by .__PFX__-tclamp)
* ====================================================== */
/* 统一命中 title覆盖 poster/media 里已有的 clamp */
.__PFX__-tclamp .__PFX__-item-title,
.__PFX__-tclamp .__PFX__-rank-title,
.__PFX__-tclamp .rank-title{
line-height: var(--tc-lh, 1.35);
margin: var(--tc-m, 0);
font-weight: var(--tc-fw, inherit);
/* 统一改为可换行,避免 item_04 那种 nowrap 造成高度不可控:contentReference[oaicite:4]{index=4} */
white-space: normal;
text-overflow: clip;
overflow: hidden;
height: var(--tc-h, 2.7em);
max-height: var(--tc-h, 2.7em);
/* 默认走多行 clampln1 会被下面覆盖) */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--tc-lines, 2);
word-break: break-word;
}
/* ln1强制单行省略号比 -webkit-line-clamp:1 更“可控”) */
.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-item-title,
.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-rank-title,
.__PFX__-tclamp.__PFX__-tclamp-l1 .rank-title{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: unset;
max-height: var(--tc-h, 1.35em);
height: var(--tc-h, 1.35em);
}
/* =========================
* Pack 0紧凑型偏短行高
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p0{ --tc-lh:1.25; --tc-fw:600; --tc-m:0; }
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.25em; }
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.50em; }
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.75em; }
/* =========================
* Pack 1舒展型更易读
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p1{ --tc-lh:1.40; --tc-fw:700; --tc-m:0 0 4px; }
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.40em; }
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.80em; }
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.20em; }
/* =========================
* Pack 2强调标题行高略小 + 字重更高)
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p2{ --tc-lh:1.30; --tc-fw:800; --tc-m:0 0 2px; }
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.30em; }
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.60em; }
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.90em; }
/* =========================
* Pack 3网格对齐优先高度更“硬”
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p3{ --tc-lh:1.28; --tc-fw:650; --tc-m:0; }
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.28em; }
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.56em; }
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.84em; }
/* =========================
* Pack 4更适合英文/混排(行高更大,断词更激进)
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p4{ --tc-lh:1.45; --tc-fw:700; --tc-m:0; }
.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-item-title,
.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-rank-title,
.__PFX__-tclamp.__PFX__-tclamp-p4 .rank-title{
overflow-wrap: anywhere;
}
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.45em; }
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.90em; }
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.35em; }
/* =========================
* Pack 5极简文本/榜单更合适(轻字重 + 更小 margin
* ========================= */
.__PFX__-tclamp.__PFX__-tclamp-p5{ --tc-lh:1.32; --tc-fw:600; --tc-m:0; }
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.32em; }
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.64em; }
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.96em; }

View File

@@ -0,0 +1,58 @@
/* ========== item_01 基础 ========== */
.__PFX__-item{
background:var(--bg-soft-color);
border-radius:12px;
overflow:hidden;
}
.__PFX__-item-link{
display:block;
color:inherit;
}
.__PFX__-item-cover{
position:relative;
overflow:hidden;
background:#000;
}
.__PFX__-item-cover img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
}
.__PFX__-item-info{
padding:10px 12px;
}
.__PFX__-item-title{
font-size:14px;
font-weight:600;
line-height:1.35;
}
.__PFX__-item-meta{
font-size:12px;
color:var(--text-muted-color);
margin-top:4px;
}
.__PFX__-item-desc{
font-size:12px;
color:var(--text-muted-color);
margin-top:6px;
}
.__PFX__-item-score{
position:absolute;
top:6px;
right:6px;
font-size:12px;
padding:2px 6px;
border-radius:6px;
background:rgba(0,0,0,.65);
color:#fff;
}

View File

@@ -0,0 +1,103 @@
/* item_02封面横向信息流
* 继承_item_media.css
* 无额外样式
*/
/* ========== item_02 个性微调(可选) */
.__PFX__-item.item02 .__PFX__-item-title{
font-size:15px;
}
/* item_media.css | item_02 专用(在通用 item 基础上补齐 media 布局) */
.__PFX__-item.item02{
width:100%;
}
/* 横向信息流:默认左右布局(由 shell 控制列数) */
.__PFX__-item.item02 .__PFX__-item-link{
display:flex;
gap:12px;
align-items:flex-start;
text-decoration:none;
}
/* 封面:横向信息流用 16:9 更稳(宽>高) */
.__PFX__-item.item02 .__PFX__-item-cover{
flex:0 0 42%;
max-width:42%;
aspect-ratio:16/9;
position:relative;
overflow:hidden;
border-radius:12px;
background:var(--bg-soft-color);
}
.__PFX__-item.item02 .__PFX__-item-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* 评分角标 */
.__PFX__-item.item02 .__PFX__-item-score{
position:absolute;
right:8px;
top:8px;
padding:2px 6px;
font-size:12px;
border-radius:999px;
background:rgba(0,0,0,.55);
color:#fff;
}
/* 信息区 */
.__PFX__-item.item02 .__PFX__-item-info{
flex:1;
min-width:0;
}
.__PFX__-item.item02 .__PFX__-item-title{
font-size:14px;
line-height:1.25;
margin:0 0 6px;
color:var(--text-color);
}
.__PFX__-item.item02 .__PFX__-item-meta{
font-size:12px;
color:var(--text-muted-color);
margin:0 0 6px;
}
.__PFX__-item.item02 .__PFX__-item-extra{
font-size:12px;
color:var(--text-muted-color);
margin:0 0 4px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* PC稍微压缩封面占比提升信息量 */
@media (min-width: 1024px){
.__PFX__-item.item02 .__PFX__-item-cover{
flex-basis:36%;
max-width:36%;
border-radius:14px;
}
.__PFX__-item.item02 .__PFX__-item-title{
font-size:15px;
}
}
/* item02-5*/
.__PFX__-item.__PFX__-item02 {
display: block;
}
.__PFX__-item.item02 .__PFX__-item-cover{
max-width: 100%;
}

View File

@@ -0,0 +1,81 @@
/* ======================================================
* item_03 | 极简文本 / 榜单型
* ====================================================== */
.__PFX__-item{
display:block;
}
/* 点击区域 */
.__PFX__-item-link{
display:flex;
align-items:flex-start;
gap:12px;
padding:10px 6px;
text-decoration:none;
color:var(--text-color);
}
/* 序号 */
.__PFX__-item-index{
min-width:22px;
font-size:14px;
font-weight:700;
color:var(--text-muted-color);
text-align:right;
}
/* 主体 */
.__PFX__-item-main{
flex:1;
min-width:0;
}
/* 标题 */
.__PFX__-item-title{
font-size:14px;
line-height:1.4;
font-weight:500;
margin:0 0 4px;
color:var(--text-color);
}
/* 元信息 */
.__PFX__-item-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
font-size:12px;
color:var(--text-muted-color);
}
/* ===== 行为适配 ===== */
/* 紧凑 */
.compact .__PFX__-item-link{
padding:6px 4px;
}
.compact .__PFX__-item-title{
font-size:13px;
}
/* 宽松 */
.loose .__PFX__-item-link{
padding:14px 8px;
}
/* Top 榜单 */
.top .__PFX__-item-index{
color:var(--primary-color);
}
/* 强调 */
.emphasis .__PFX__-item-link{
background:var(--bg-soft-color);
border-radius:8px;
}
/* hover */
.__PFX__-item-link:hover .__PFX__-item-title{
color:var(--primary-color);
}

View File

@@ -0,0 +1,93 @@
/* ======================================================
* item_04 | 评分 / 热度强化型
* ====================================================== */
.__PFX__-item.poster.score{
display:block;
}
/* 链接 */
.__PFX__-item-link{
display:flex;
flex-direction:column;
gap:6px;
color:var(--text-color);
text-decoration:none;
}
/* ===== 封面 ===== */
.__PFX__-item-cover{
position:relative;
width:100%;
aspect-ratio: 3 / 4; /* 比 item_01 稍宽,更利于列表 */
overflow:hidden;
border-radius:12px;
background:var(--bg-soft-color);
}
.__PFX__-item-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* ===== 评分角标 ===== */
.__PFX__-item-score{
position:absolute;
right:6px;
top:6px;
padding:2px 6px;
font-size:12px;
font-weight:700;
color:#fff;
background:var(--accent-color);
border-radius:6px;
line-height:1;
}
/* ===== 信息区 ===== */
.__PFX__-item-info{
padding:0 2px;
}
/* 标题 */
.__PFX__-item-title{
font-size:14px;
font-weight:600;
line-height:1.4;
margin:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* 元信息 */
.__PFX__-item-meta{
display:flex;
gap:6px;
font-size:12px;
color:var(--text-muted-color);
}
/* ===== 行为适配 ===== */
/* 紧凑 */
.compact .__PFX__-item-title{
font-size:13px;
}
/* 宽松 */
.loose .__PFX__-item-link{
gap:10px;
}
/* 强调 */
.emphasis .__PFX__-item-cover{
box-shadow:0 6px 18px var(--shadow-color);
}
/* hover */
.__PFX__-item-link:hover .__PFX__-item-title{
color:var(--primary-color);
}

View File

@@ -0,0 +1,94 @@
/* ======================================================
* item_05 | Top 强化榜单型
* ====================================================== */
.__PFX__-item.rank{
display:block;
}
/* 主链接 */
.__PFX__-rank-link{
display:flex;
align-items:center;
gap:12px;
padding:10px 8px;
text-decoration:none;
color:var(--text-color);
}
/* ===== 排名数字 ===== */
.__PFX__-rank-no{
min-width:28px;
font-size:16px;
font-weight:700;
text-align:center;
color:var(--text-muted-color);
}
/* Top 1-3 强化 */
.__PFX__-rank-no.rank-1{
color:#d32f2f;
font-size:18px;
}
.__PFX__-rank-no.rank-2{
color:#f57c00;
}
.__PFX__-rank-no.rank-3{
color:#fbc02d;
}
/* 主体 */
.__PFX__-rank-main{
flex:1;
min-width:0;
}
/* 标题 */
.__PFX__-rank-title{
font-size:14px;
font-weight:600;
margin:0 0 4px;
line-height:1.4;
}
/* 元信息 */
.__PFX__-rank-meta{
display:flex;
gap:8px;
font-size:12px;
color:var(--text-muted-color);
flex-wrap:wrap;
}
/* 评分 / 热度 */
.__PFX__-rank-score{
font-size:13px;
font-weight:600;
color:var(--accent-color);
}
/* ===== 行为适配 ===== */
/* 紧凑 */
.compact .__PFX__-rank-link{
padding:6px 6px;
}
.compact .__PFX__-rank-title{
font-size:13px;
}
/* 宽松 */
.loose .__PFX__-rank-link{
padding:14px 10px;
}
/* 强调模块 */
.emphasis .__PFX__-rank-link{
background:var(--bg-soft-color);
border-radius:10px;
}
/* hover */
.__PFX__-rank-link:hover .__PFX__-rank-title{
color:var(--primary-color);
}