fix(base-assets): 资产详情还原 — 容器比例/提示词框固定/hover反白/缺三视图标签
- F1 缺三视图标签:橙底白字 r-sm → 白底琥珀描边胶囊(对齐设计稿) - F3 立绘容器 3/4 → 9/16(资产详情左 + 库 adx-lead-img) - F4 库三视图格 adx-tri-cell 3/4 → 16/9(流水线详情本就 16/9) - F6 资产详情提示词栏 .ad-detail-prompt 固定高度 88px + resize:none - F2 人物提示词框 .asset-prompt-edit 固定 74px(≈三行)+ resize:none,studio rows 4→3 - F7 三视图上方 icon 按钮 hover:橙底+白 icon(原仅字色变橙) - F5 资产详情「重跑立绘/替换」按钮行右对齐 - F8(商品块 vs 人物块统一)结构性差异,待用户指认,本轮挂起 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
8550d532ac
commit
2e880714b1
@@ -646,7 +646,7 @@
|
||||
.asset-detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
|
||||
.asset-detail-lead { display: flex; flex-direction: column; gap: 10px; }
|
||||
.asset-detail-lead .ad-lead-wrap { position: relative; }
|
||||
.asset-detail-lead .placeholder.ad-lead-img { aspect-ratio: 3/4; border-radius: var(--r-md); }
|
||||
.asset-detail-lead .placeholder.ad-lead-img { aspect-ratio: 9/16; border-radius: var(--r-md); }
|
||||
.ad-zoom-btn { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; padding: 0; background: rgba(21,20,15,.7); color: #fff; border: 0; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity var(--t-base), background var(--t-base); z-index: 3; }
|
||||
.ad-zoom-btn:hover { background: rgba(21,20,15,.92); }
|
||||
.ad-zoom-btn svg { width: 14px; height: 14px; }
|
||||
@@ -662,7 +662,8 @@
|
||||
.asset-detail-section-h .ic svg { width: 14px; height: 14px; }
|
||||
.asset-detail-section-h .ad-ratio-chip { margin-left: auto; font-family: var(--font-mono); font-size: 12px; padding: 2px 8px; border-radius: var(--r-sm); background: var(--background-lighter); border: 1px solid var(--border-faint); color: var(--black-alpha-56); letter-spacing: .02em; }
|
||||
.asset-detail-section-h .ad-icon-btn { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-56); cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
|
||||
.asset-detail-section-h .ad-icon-btn:hover { color: var(--heat); border-color: var(--heat-40); }
|
||||
/* hover 整体反色:橙底 + 白 icon(原仅字色变橙,icon 在白底上看不出反色) */
|
||||
.asset-detail-section-h .ad-icon-btn:hover { background: var(--heat); color: var(--accent-white); border-color: var(--heat); }
|
||||
.asset-detail-section-h .ad-icon-btn svg { width: 12px; height: 12px; }
|
||||
.asset-detail-section-h .ad-icon-gap { margin-left: 8px; }
|
||||
.asset-detail-tri-row .placeholder { aspect-ratio: 16 / 9; border-radius: var(--r-md); }
|
||||
@@ -680,7 +681,8 @@
|
||||
.asset-modal-f .ad-stat-btn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-72); font-size: 12px; font-family: inherit; cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
|
||||
.asset-modal-f .ad-stat-btn:hover { background: var(--background-lighter); color: var(--accent-black); }
|
||||
.asset-modal-f .ad-stat-btn svg { width: 13px; height: 13px; }
|
||||
.ad-detail-prompt { width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--black-alpha-72); background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 10px 12px; outline: none; resize: vertical; min-height: 64px; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
|
||||
/* 固定大小、不可拖拽(对齐设计稿:描述角色立绘的提示词栏固定) */
|
||||
.ad-detail-prompt { width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--black-alpha-72); background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 10px 12px; outline: none; resize: none; height: 88px; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
|
||||
/* 版本缩略图(非 .placeholder,需自己接 --mock-media-url 才显图) */
|
||||
.ad-thumbs .thumb.has-mock-media, .md-view-versions .v-thumb.has-mock-media, .prod-preview-history .h-thumb.has-mock-media { background-image: var(--mock-media-url); background-size: cover; background-position: center; background-repeat: no-repeat; }
|
||||
.ad-detail-prompt:hover { border-color: var(--heat-20); }
|
||||
@@ -729,7 +731,8 @@
|
||||
|
||||
/* ── 流程步骤4 · 演员库覆盖层(portal 到 body,顶层选择器才生效)── */
|
||||
/* 资产卡/演员库工作台的提示词输入框:顶层定义,页面内(资产卡)与 portal 弹窗(添加人物工作台)都生效 */
|
||||
.asset-prompt-edit { width: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; letter-spacing: .01em; color: var(--black-alpha-72); background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 8px 10px; outline: none; resize: vertical; min-height: 56px; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
|
||||
/* 固定三行高度、不可拖拽(对齐设计稿:人物提示词框固定在三行) */
|
||||
.asset-prompt-edit { width: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; letter-spacing: .01em; color: var(--black-alpha-72); background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 8px 10px; outline: none; resize: none; min-height: 0; height: 74px; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
|
||||
.asset-prompt-edit:hover { border-color: var(--heat-20); }
|
||||
.asset-prompt-edit:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); }
|
||||
.asset-prompt-edit::placeholder { color: var(--black-alpha-32); }
|
||||
|
||||
Reference in New Issue
Block a user