155 lines
3.7 KiB
CSS
155 lines
3.7 KiB
CSS
/* 模特库 · 顶级实体(形象图 + 三视图)· 仅用 design-restraint token,不写裸 hex */
|
|
.models-empty { min-height: 240px; flex-direction: column; gap: 8px; }
|
|
.models-empty-hint { font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
|
|
|
|
.models-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.model-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-faint);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: border-color .15s;
|
|
}
|
|
.model-card:hover { border-color: var(--border-loud); }
|
|
.model-card:focus-visible { outline: 2px solid var(--heat-40); outline-offset: 2px; }
|
|
|
|
/* 形象图(9:16 氛围正面图)· 主视觉 */
|
|
.model-portrait {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 3 / 4;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* 官方模板标签:复用 .pill.info(单橙锚点),定位左上 */
|
|
.model-official {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 删除按钮:默认半隐,hover 卡片才显;crimson 危险态 */
|
|
.model-del-btn {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: var(--r-sm);
|
|
background: var(--black-alpha-48);
|
|
color: var(--accent-white);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity .15s, background .15s;
|
|
}
|
|
.model-card:hover .model-del-btn { opacity: 1; }
|
|
.model-del-btn:hover { background: var(--accent-crimson); }
|
|
|
|
.model-confirm {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background: var(--black-alpha-56);
|
|
}
|
|
.model-confirm .btn {
|
|
background: var(--surface);
|
|
color: var(--accent-black);
|
|
border-color: var(--border-faint);
|
|
}
|
|
.model-confirm .btn:hover {
|
|
background: var(--surface);
|
|
border-color: var(--border-loud);
|
|
}
|
|
.model-del { background: var(--accent-crimson); border-color: var(--accent-crimson); color: var(--accent-white); }
|
|
.model-confirm .model-del,
|
|
.model-confirm .model-del:hover {
|
|
background: var(--accent-crimson);
|
|
border-color: var(--accent-crimson);
|
|
color: var(--accent-white);
|
|
}
|
|
|
|
.model-body { padding: 10px 12px 12px; }
|
|
.model-name {
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
color: var(--accent-black);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 三视图(16:9 白底)· 成套证明 */
|
|
.model-triview {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
margin-top: 8px;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.model-triview .ph-frame { font-size: 11px; }
|
|
|
|
.model-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
font-size: 11.5px;
|
|
color: var(--black-alpha-48);
|
|
letter-spacing: .02em;
|
|
}
|
|
|
|
/* 模特详情弹窗:继承 .modal(不重写),只加宽度 modifier(同 .invite-modal 惯例) */
|
|
.model-detail-modal { max-width: 560px; }
|
|
|
|
.model-detail-b { display: flex; flex-direction: column; gap: 14px; }
|
|
|
|
/* 形象图大图:3:4 竖版,与卡片缩图比例一致 */
|
|
.model-detail-portrait {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 4;
|
|
border-radius: var(--r-md);
|
|
}
|
|
.model-detail-portrait[role="button"] { cursor: zoom-in; }
|
|
|
|
.model-detail-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.model-detail-desc {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
color: var(--black-alpha-64);
|
|
}
|
|
|
|
.model-detail-label {
|
|
font-size: 11px;
|
|
color: var(--black-alpha-48);
|
|
letter-spacing: .04em;
|
|
}
|
|
|
|
/* 三视图:16:9 单容器(不拆 3 张) */
|
|
.model-detail-triview {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.model-detail-triview[role="button"] { cursor: zoom-in; }
|