feat(frontend): polish login and design tokens

This commit is contained in:
iye
2026-06-16 12:30:45 +08:00
parent 77c037495e
commit b2288a2652
23 changed files with 828 additions and 926 deletions
+80 -80
View File
@@ -44,7 +44,7 @@
.asset-factory .factory-tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .06em;
padding: 2px 8px;
@@ -62,7 +62,7 @@
}
.asset-factory .factory-desc {
margin-top: 8px;
font-size: 13.5px;
font-size: 14px;
color: var(--black-alpha-64);
line-height: 1.55;
}
@@ -77,7 +77,7 @@
}
.asset-factory .factory-cta .cost {
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .04em;
}
@@ -86,14 +86,14 @@
.asset-factory .section-h { margin-top: 24px; }
.asset-factory .section-h .sub-mono {
font-family: var(--font-mono);
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
.asset-factory .result-meta {
font-family: var(--font-mono);
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
margin: 2px 0 12px;
@@ -119,9 +119,9 @@
.asset-factory .task-name-cell { display: flex; align-items: center; gap: 12px; }
.asset-factory .task-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); }
.asset-factory .task-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; }
.asset-factory .task-name { font-weight: 600; color: var(--accent-black); font-size: 14px; }
.asset-factory .task-sub {
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
margin-top: 3px;
font-family: var(--font-mono);
@@ -139,7 +139,7 @@
animation: af-hp-pulse 1.4s ease-in-out infinite;
}
.asset-factory .task-list-prog .pct {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--heat); letter-spacing: .02em; white-space: nowrap;
}
@keyframes af-hp-pulse {
@@ -155,11 +155,11 @@
line-height: 1.6;
}
.asset-factory .task-empty .mono {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: .04em; margin-bottom: 6px;
}
.asset-factory .task-load-more { display: flex; justify-content: center; margin-top: 18px; }
.asset-factory .task-load-more .lm-rest { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-left: 6px; }
.asset-factory .task-load-more .lm-rest { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-left: 6px; }
/* ============================================================
B · 图片工作室壳(.image-workbench)
@@ -237,7 +237,7 @@
padding: 4px 14px 10px;
}
.image-workbench .iw-list-h .mono {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em;
text-transform: uppercase;
}
@@ -281,7 +281,7 @@
background: var(--background-lighter);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-size: 12.5px; color: var(--accent-black);
font-size: 13px; color: var(--accent-black);
font-family: inherit; outline: none;
transition: border-color var(--t-base), background var(--t-base);
}
@@ -313,21 +313,21 @@
}
.image-workbench .iw-prod-item .body { flex: 1; min-width: 0; }
.image-workbench .iw-prod-item .nm {
font-size: 12.5px; color: var(--accent-black); font-weight: 500;
font-size: 13px; color: var(--accent-black); font-weight: 500;
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-workbench .iw-prod-item.active .nm { color: var(--heat); font-weight: 600; }
.image-workbench .iw-prod-item .sub {
margin-top: 2px;
font-family: var(--font-mono); font-size: 10px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-workbench .iw-ps-empty {
padding: 24px 14px;
text-align: center;
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
line-height: 1.7;
}
@@ -349,7 +349,7 @@
min-width: 0; max-width: 50%;
}
.image-workbench .iw-main-h .cur-title .crumb {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
flex-shrink: 0;
}
@@ -381,12 +381,12 @@
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-size: 12.5px; color: var(--black-alpha-72);
font-size: 13px; color: var(--black-alpha-72);
font-family: inherit; cursor: pointer;
transition: border-color var(--t-base), color var(--t-base);
}
.image-workbench .iw-main-h .tb-chip:hover { border-color: var(--heat-20); color: var(--heat); }
.image-workbench .iw-main-h .tb-chip svg { width: 10px; height: 10px; opacity: .6; }
.image-workbench .iw-main-h .tb-chip svg { width: 10px; height: 10px; color: var(--ink-3); }
.image-workbench .iw-main-h .tb-menu-wrap { position: relative; }
.image-workbench .iw-main-h .tb-search-wrap { display: inline-flex; align-items: center; }
.image-workbench .iw-main-body {
@@ -419,7 +419,7 @@
width: 22px; height: 22px;
border-radius: 50%;
background: var(--heat-12); color: var(--heat);
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
display: grid; place-items: center;
flex-shrink: 0;
}
@@ -443,7 +443,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
color: var(--black-alpha-72);
font-size: 12.5px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
@@ -489,10 +489,10 @@
object-fit: cover; display: block;
background: var(--black-alpha-4);
}
.image-workbench .model-card .m-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
.image-workbench .model-card .m-name { font-size: 13px; font-weight: 500; color: var(--accent-black); }
.image-workbench .model-card.selected .m-name { color: var(--heat); }
.image-workbench .model-card .m-tag {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .model-card .m-check {
@@ -504,9 +504,9 @@
display: grid; place-items: center;
color: var(--accent-white); z-index: 2;
}
.image-workbench .model-card .m-check svg { width: 11px; height: 11px; opacity: 0; }
.image-workbench .model-card .m-check svg { width: 11px; height: 11px; visibility: hidden; }
.image-workbench .model-card.selected .m-check { background: var(--heat); border-color: var(--heat); }
.image-workbench .model-card.selected .m-check svg { opacity: 1; }
.image-workbench .model-card.selected .m-check svg { visibility: visible; }
/* ── 平台选择 · 3 列卡多选(基线 .platform-card)── */
.image-workbench .platform-grid {
@@ -533,9 +533,9 @@
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--accent-white);
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.image-workbench .platform-card .p-name { font-size: 11.5px; color: var(--accent-black); font-weight: 500; }
.image-workbench .platform-card .p-name { font-size: 12px; color: var(--accent-black); font-weight: 500; }
.image-workbench .platform-card.selected .p-name { color: var(--heat); }
.image-workbench .platform-card .p-check {
position: absolute; top: 4px; right: 4px;
@@ -572,7 +572,7 @@
}
.image-workbench .iw-cta-hint {
margin-top: 8px;
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
text-align: center; line-height: 1.5;
}
@@ -602,7 +602,7 @@
}
.image-workbench .iw-pv-h .pv-meta {
float: right;
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
line-height: 1.5;
}
@@ -614,7 +614,7 @@
}
.image-workbench .iw-pv-h .pv-line + .pv-line { margin-top: 2px; }
.image-workbench .iw-pv-h .pv-line .k {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
margin-right: 8px; min-width: 36px;
}
@@ -634,7 +634,7 @@
.image-workbench .gen-meta {
display: flex; align-items: center; gap: 8px;
padding: 0 4px;
font-family: var(--font-mono); font-size: 11.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
}
.image-workbench .gen-meta .m-sep { color: var(--black-alpha-24); }
@@ -702,13 +702,13 @@
gap: 6px;
}
.image-workbench .iw-pv-empty .mono {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em;
margin-bottom: 4px;
}
.image-workbench .iw-pv-empty .title { font-size: 14px; font-weight: 600; color: var(--accent-black); }
.image-workbench .iw-pv-empty .hint {
font-size: 12.5px; color: var(--black-alpha-48);
font-size: 13px; color: var(--black-alpha-48);
line-height: 1.6; max-width: 320px;
}
.image-workbench .iw-pv-empty .hint b { color: var(--heat); font-weight: 600; }
@@ -762,7 +762,7 @@
.image-workbench .ic-new-conv svg { width: 13px; height: 13px; }
.image-workbench .ic-side-sec {
margin: 16px 14px 6px;
font-family: var(--font-mono); font-size: 10px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .08em;
text-transform: uppercase;
}
@@ -795,16 +795,16 @@
.image-workbench .ic-conv-item .thumb svg { width: 13px; height: 13px; }
.image-workbench .ic-conv-item .nm {
flex: 1; min-width: 0;
font-size: 12.5px;
font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-workbench .ic-conv-item.active .nm { color: var(--heat); font-weight: 600; }
.image-workbench .ic-conv-empty {
padding: 14px 12px;
font-size: 11.5px; color: var(--black-alpha-48); line-height: 1.55;
font-size: 12px; color: var(--black-alpha-48); line-height: 1.55;
}
.image-workbench .ic-conv-empty .mono {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: .02em; display: inline-block; margin-top: 4px;
}
@@ -841,7 +841,7 @@
color: var(--heat);
}
.image-workbench .ic-empty .badge {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: .08em; color: var(--black-alpha-48);
text-transform: uppercase;
}
@@ -890,7 +890,7 @@
.image-workbench .ic-msg-prompt .pt-tags {
margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .ic-msg-prompt .pt-tags .meta-chip {
@@ -944,7 +944,7 @@
.image-workbench .ic-input-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.image-workbench .ic-input-bottom .right-meta {
margin-left: auto;
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .ic-input-bottom .right-meta .val { color: var(--accent-black); }
@@ -955,11 +955,11 @@
border: 0; border-radius: var(--r-md);
cursor: pointer;
display: grid; place-items: center;
transition: opacity var(--t-base), filter var(--t-base);
transition: background var(--t-base), color var(--t-base), filter var(--t-base);
margin-left: 8px;
}
.image-workbench .ic-input .send-btn:hover { filter: brightness(1.05); }
.image-workbench .ic-input .send-btn:disabled { opacity: .4; cursor: not-allowed; }
.image-workbench .ic-input .send-btn:disabled { background: var(--background-lighter); color: var(--ink-3); cursor: not-allowed; }
.image-workbench .ic-input .send-btn svg { width: 15px; height: 15px; }
/* 输入栏参数胶囊(比例 / 风格 / 张数 · 基线 .param + 下拉气泡) */
@@ -970,18 +970,18 @@
background: var(--background-lighter);
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: 11.5px; color: var(--black-alpha-72);
font-size: 12px; color: var(--black-alpha-72);
font-family: inherit; cursor: pointer;
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.image-workbench .ic-param-btn:hover { background: var(--surface); border-color: var(--border-faint); }
.image-workbench .ic-param.open .ic-param-btn { background: var(--heat-12); color: var(--heat); border-color: transparent; }
.image-workbench .ic-param-btn .lbl-mono {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; margin-right: 1px;
}
.image-workbench .ic-param.open .ic-param-btn .lbl-mono { color: var(--heat); }
.image-workbench .ic-param-btn svg { width: 10px; height: 10px; opacity: .6; }
.image-workbench .ic-param-btn svg { width: 10px; height: 10px; color: var(--ink-3); }
.image-workbench .ic-param.open .ic-param-btn svg { transform: rotate(180deg); }
.image-workbench .ic-param-menu {
position: absolute; bottom: calc(100% + 6px); left: -2px;
@@ -1001,13 +1001,13 @@
padding: 7px 10px;
border: 0; border-radius: var(--r-sm);
background: transparent;
font-size: 12.5px; color: var(--accent-black);
font-size: 13px; color: var(--accent-black);
font-family: inherit; text-align: left; cursor: pointer;
}
.image-workbench .ic-param-menu .mi:hover { background: var(--background-lighter); }
.image-workbench .ic-param-menu .mi.selected { color: var(--heat); font-weight: 600; }
.image-workbench .ic-param-menu .mi .mi-check { margin-left: auto; opacity: 0; color: var(--heat); }
.image-workbench .ic-param-menu .mi.selected .mi-check { opacity: 1; }
.image-workbench .ic-param-menu .mi .mi-check { margin-left: auto; visibility: hidden; color: var(--heat); }
.image-workbench .ic-param-menu .mi.selected .mi-check { visibility: visible; }
/* ============================================================
C · 模特图方案对比 Demo(.model-demo · 纯静态展示)
@@ -1057,7 +1057,7 @@
.model-demo .dm-side-h { padding: 14px 14px 10px; flex-shrink: 0; }
.model-demo .dm-side-h .ti-row { display: flex; align-items: center; margin-bottom: 10px; }
.model-demo .dm-side-h .ti {
font-size: 11px; font-family: var(--font-mono);
font-size: 12px; font-family: var(--font-mono);
color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase;
}
.model-demo .dm-side-h .add {
@@ -1079,11 +1079,11 @@
transition: border-color var(--t-base), background var(--t-base);
}
.model-demo .dm-search:focus-within { border-color: var(--heat-40); background: var(--surface); }
.model-demo .dm-search svg { width: 13px; height: 13px; color: var(--black-alpha-48); flex-shrink: 0; }
.model-demo .dm-search svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }
.model-demo .dm-search input {
flex: 1; min-width: 0; height: 100%;
border: 0; outline: 0; background: transparent;
font-size: 12.5px; color: var(--accent-black); font-family: inherit;
font-size: 13px; color: var(--accent-black); font-family: inherit;
}
.model-demo .dm-search input::placeholder { color: var(--black-alpha-48); }
@@ -1112,18 +1112,18 @@
overflow: hidden;
background: repeating-linear-gradient(135deg, transparent 0 4px, var(--black-alpha-4) 4px 5px);
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 9px; color: var(--black-alpha-32);
font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
}
.model-demo .dm-prod.active .thumb { border-color: var(--heat); }
.model-demo .dm-prod .body { flex: 1; min-width: 0; }
.model-demo .dm-prod .nm {
font-size: 12.5px; color: var(--accent-black); font-weight: 500; line-height: 1.3;
font-size: 13px; color: var(--accent-black); font-weight: 500; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-demo .dm-prod.active .nm { color: var(--heat); font-weight: 600; }
.model-demo .dm-prod .sub {
margin-top: 2px;
font-family: var(--font-mono); font-size: 10px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@@ -1143,7 +1143,7 @@
.model-demo .dm-all:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
.model-demo .dm-all .ct {
color: var(--black-alpha-48);
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
margin-left: auto;
}
.model-demo .dm-all svg { width: 12px; height: 12px; }
@@ -1158,7 +1158,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-pill);
color: var(--accent-black);
font-size: 12.5px; font-weight: 500; font-family: inherit;
font-size: 13px; font-weight: 500; font-family: inherit;
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
@@ -1188,11 +1188,11 @@
border-radius: var(--r-sm);
display: grid; place-items: center;
color: var(--heat);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.model-demo .dm-batch-h .meta { flex: 1; min-width: 0; }
.model-demo .dm-batch-h .nm { font-size: 13px; font-weight: 600; color: var(--accent-black); }
.model-demo .dm-batch-h .info { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo .dm-batch-h .info { margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo .dm-batch-h .info .sep { color: var(--black-alpha-24); }
.model-demo .dm-batch-h .ops { display: flex; gap: 4px; }
.model-demo .dm-batch-h .ops button {
@@ -1219,7 +1219,7 @@
.model-demo .dm-cell .ph {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-32);
font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px);
}
.model-demo .dm-cell .tag {
@@ -1228,7 +1228,7 @@
background: var(--accent-black);
color: var(--accent-white);
border-radius: var(--r-sm);
font-size: 10px; font-weight: 500;
font-size: 12px; font-weight: 500;
}
/* ════════════════════════════════════════════════
@@ -1243,7 +1243,7 @@
}
.model-demo.dm-a .dm-main-h .cur { min-width: 0; }
.model-demo.dm-a .dm-main-h .crumb {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
}
.model-demo.dm-a .dm-main-h h2 {
@@ -1253,7 +1253,7 @@
.model-demo.dm-a .dm-main-h .stats {
margin-left: auto;
display: flex; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.model-demo.dm-a .dm-main-h .stats b { color: var(--accent-black); font-weight: 600; }
@@ -1276,7 +1276,7 @@
.model-demo.dm-a .dm-field { margin-bottom: 16px; }
.model-demo.dm-a .dm-field:last-child { margin-bottom: 0; }
.model-demo.dm-a .dm-field-h { font-size: 12px; font-weight: 600; color: var(--accent-black); margin-bottom: 8px; }
.model-demo.dm-a .dm-field-h .opt { font-weight: 400; font-size: 11px; color: var(--black-alpha-48); margin-left: 4px; }
.model-demo.dm-a .dm-field-h .opt { font-weight: 400; font-size: 12px; color: var(--black-alpha-48); margin-left: 4px; }
.model-demo.dm-a .dm-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.model-demo.dm-a .dm-model {
@@ -1292,14 +1292,14 @@
.model-demo.dm-a .dm-model .ph {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-32);
font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px);
}
.model-demo.dm-a .dm-model .nm {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 4px 6px;
background: linear-gradient(transparent, var(--black-alpha-48));
font-size: 10px; color: var(--accent-white); font-weight: 500;
font-size: 12px; color: var(--accent-white); font-weight: 500;
}
.model-demo.dm-a .dm-model.selected::after {
content: ''; position: absolute; top: 4px; right: 4px;
@@ -1333,7 +1333,7 @@
background: var(--background-lighter);
border: 1px solid var(--black-alpha-12);
border-radius: var(--r-sm);
font-family: inherit; font-size: 12.5px;
font-family: inherit; font-size: 13px;
color: var(--accent-black);
outline: none; resize: vertical;
}
@@ -1349,7 +1349,7 @@
.model-demo.dm-a .dm-cost {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.model-demo.dm-a .dm-cost .v { color: var(--accent-black); font-weight: 600; }
@@ -1372,7 +1372,7 @@
}
.model-demo.dm-a .dm-result-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.model-demo.dm-a .dm-result-h .ti { font-size: 15px; font-weight: 600; color: var(--accent-black); }
.model-demo.dm-a .dm-result-h .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo.dm-a .dm-result-h .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo.dm-a .dm-batch-h {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px; padding-bottom: 10px;
@@ -1389,7 +1389,7 @@
background: var(--surface);
}
.model-demo.dm-b .dm-main-h .crumb {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; margin-bottom: 4px;
}
.model-demo.dm-b .dm-main-h .title-row { display: flex; align-items: center; gap: 14px; }
@@ -1400,7 +1400,7 @@
.model-demo.dm-b .dm-main-h .title-row .dm-back { margin-left: auto; }
.model-demo.dm-b .dm-main-h .row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.model-demo.dm-b .dm-main-h .stats {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
display: flex; gap: 4px;
}
@@ -1431,7 +1431,7 @@
transition: border-color var(--t-base), color var(--t-base);
}
.model-demo.dm-b .dm-tb .chip:hover { border-color: var(--heat-20); color: var(--heat); }
.model-demo.dm-b .dm-tb .chip svg { width: 10px; height: 10px; opacity: .6; }
.model-demo.dm-b .dm-tb .chip svg { width: 10px; height: 10px; color: var(--ink-3); }
.model-demo.dm-b .dm-stream {
flex: 1; min-height: 0;
@@ -1442,7 +1442,7 @@
.model-demo.dm-b .dm-day-h {
display: flex; align-items: baseline; gap: 8px;
margin: 6px 0 10px;
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase;
}
.model-demo.dm-b .dm-day-h::before {
@@ -1456,13 +1456,13 @@
}
.model-demo.dm-b .dm-batch-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.model-demo.dm-b .dm-batch-h .nm { font-size: 13.5px; }
.model-demo.dm-b .dm-batch-h .nm { font-size: 14px; }
.model-demo.dm-b .dm-batch-h .info { display: flex; flex-wrap: wrap; gap: 4px; }
/* 状态 pill 紧贴标题右侧(局部尺寸变体 · 不改全局 .pill) */
.model-demo.dm-b .stat-pill {
margin-left: 8px;
padding: 2px 7px;
font-size: 10px;
font-size: 12px;
}
.model-demo.dm-b .stat-pill .dot { width: 4px; height: 4px; }
@@ -1499,16 +1499,16 @@
}
.model-demo.dm-b .dm-param .pchip:hover { background: var(--surface); border-color: var(--border-faint); }
.model-demo.dm-b .dm-param .pchip.active { background: var(--heat-12); color: var(--heat); }
.model-demo.dm-b .dm-param .pchip svg { width: 10px; height: 10px; opacity: .6; }
.model-demo.dm-b .dm-param .pchip svg { width: 10px; height: 10px; color: var(--ink-3); }
.model-demo.dm-b .dm-param .pchip .lbl-mono {
font-family: var(--font-mono); font-size: 10px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.model-demo.dm-b .dm-param .pchip.active .lbl-mono { color: var(--heat); }
.model-demo.dm-b .dm-param .pchip .muted { color: var(--black-alpha-48); }
.model-demo.dm-b .dm-param .spacer { flex: 1; }
.model-demo.dm-b .dm-param .meta-right {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em;
margin-right: 6px; text-align: right;
}
@@ -1517,7 +1517,7 @@
height: 38px; padding: 0 20px;
background: var(--heat); color: var(--accent-white);
border: 0; border-radius: var(--r-md);
font-size: 13.5px; font-weight: 600; font-family: inherit;
font-size: 14px; font-weight: 600; font-family: inherit;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-cta);
@@ -1537,7 +1537,7 @@
.asset-factory .placeholder.has-img .ph-frame { display: none; }
.asset-factory .placeholder.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-factory .history-body { min-width: 0; }
.asset-factory .history-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; }
.asset-factory .history-type { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.asset-factory .history-name { font-weight: 600; color: var(--accent-black); font-size: 14px; }
.asset-factory .history-type { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.asset-factory .history-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.asset-factory .history-foot .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); }
.asset-factory .history-foot .mono { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }