gpt
This commit is contained in:
make
@@ -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