zyc/AirShelf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AirShelf/core/frontend/src/product-create-page.css
seaislee1209 78fd7ee13d feat(core/frontend): P1 pixel restoration (settings/messages/wizard/product-create faithful; ai-tools draft) 
- settings.tsx + settings-page.css: restore to settings.html (left-nav + sections), real user/team data
- messages.tsx + messages-page.css: rich inbox restore (filters/detail/props grid) on real notifications
- projects.tsx ProjectWizardPage + project-wizard-page.css: restore to projects-new.html
- products.tsx ProductCreateUploadPage + product-create-page.css: restore to product-create-v2 baseline
- ai-tools.tsx (AssetFactory/ImageWorkbench) + ai-tools-page.css: DRAFT unified studio shell;
  deviates from per-page baselines (image-optimize should be chat-stream; model-photo product+person picker)
  -> pending rework alongside P3 standalone image-gen decision
- shot-p1.mjs: playwright visual-parity capture (react vs exact baseline; uses 127.0.0.1 not localhost)
- verified: tsc --noEmit clean; screenshots confirm settings/wizard/product-create/messages faithful

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-05 14:25:19 +08:00

268 lines
7.7 KiB
CSS
Raw Blame History

/* ============================================================
product-create-upload · 新建商品(上传原图 + 基本信息)
像素基线: public/exact/_archive/.../product-create-v2.html
只用 design-restraint.css 的 token · 共享类 (.page-head/.field/
.input/.select/.textarea/.btn/.bullet-list) 直接复用,本文件只放
该页专属布局(双栏卡片 / 原图槽位 / 提示框 / 吸底操作栏)。
全部规则 scope 在 .product-create-page 下,避免污染他页。
============================================================ */
/* ─── 主表单双栏 ─── */
.product-create-page .form-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.product-create-page .form-card {
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
padding: 24px;
}
.product-create-page .form-card-wide { margin-bottom: 24px; }
.product-create-page .form-card .card-h {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.product-create-page .form-card .card-h h3 {
font-size: 14px;
font-weight: 600;
color: var(--accent-black);
}
.product-create-page .form-card .req-tag {
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 7px;
background: var(--crimson-bg);
color: var(--accent-crimson);
border: 1px solid var(--crimson-bd);
border-radius: var(--r-sm);
letter-spacing: .04em;
}
.product-create-page .form-card .opt-tag {
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 7px;
background: var(--background-lighter);
color: var(--black-alpha-56);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
letter-spacing: .04em;
}
.product-create-page .form-card .card-sub {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--black-alpha-48);
margin: -10px 0 14px;
letter-spacing: .02em;
}
/* 字段:本页卡片内最后一个 field 去掉底距 */
.product-create-page .field-last { margin-bottom: 0; }
.product-create-page .form-card .field-hint { margin: 4px 0 8px; }
/* ─── 原图槽位 ─── */
.product-create-page .photo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 8px;
}
.product-create-page .photo-slot {
aspect-ratio: 1;
border: 1px dashed var(--border-faint);
border-radius: var(--r-md);
background: var(--background-lighter);
display: grid;
place-items: center;
gap: 4px;
color: var(--black-alpha-32);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .04em;
overflow: hidden;
position: relative;
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.product-create-page .photo-slot-add { cursor: pointer; }
.product-create-page .photo-slot-add:hover {
border-color: var(--heat);
color: var(--heat);
background: var(--heat-8);
}
.product-create-page .photo-slot .plus {
width: 22px;
height: 22px;
border: 1px solid currentColor;
border-radius: var(--r-sm);
display: grid;
place-items: center;
}
.product-create-page .photo-slot .plus svg { width: 12px; height: 12px; }
.product-create-page .photo-slot .slot-label {
position: absolute;
top: 5px;
left: 5px;
font-size: 9.5px;
font-weight: 600;
padding: 2px 6px;
background: var(--surface);
color: var(--black-alpha-48);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
letter-spacing: .04em;
}
/* ─── 上传提示(虚线 tip) ─── */
.product-create-page .upload-tip {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 12px;
background: var(--heat-8);
border: 1px dashed var(--heat-40);
border-radius: var(--r-md);
font-size: 12px;
color: var(--accent-black);
line-height: 1.5;
}
.product-create-page .upload-tip svg {
width: 14px;
height: 14px;
color: var(--heat);
flex-shrink: 0;
}
.product-create-page .upload-tip strong { color: var(--heat); font-weight: 600; }
/* ─── AI 提示 banner(虚线 tip · 中性) ─── */
.product-create-page .ai-tip {
margin: -6px 0 16px;
padding: 10px 12px;
background: var(--background-lighter);
border: 1px dashed var(--border-faint);
border-radius: var(--r-md);
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: var(--black-alpha-64);
line-height: 1.55;
}
.product-create-page .ai-tip svg {
width: 13px;
height: 13px;
color: var(--heat);
flex-shrink: 0;
margin-top: 2px;
}
.product-create-page .ai-tip strong { color: var(--accent-black); font-weight: 600; }
/* ─── 卖点列表 · 复用 §4.17.5 .bullet-list 语义 ───
共享定义 scope 在 .np-body 下,这里把同一套 token 规则
挂到本页根,视觉与 restraint.css 完全一致。 */
.product-create-page .bullet-list { list-style: none; padding: 0; }
.product-create-page .bullet-list li {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--background-lighter);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
margin-bottom: 6px;
font-size: 13px;
color: var(--accent-black);
transition: border-color var(--t-base), background var(--t-base);
}
.product-create-page .bullet-list li.bl-item:hover { border-color: var(--black-alpha-24); }
.product-create-page .bullet-list li.bl-add { background: var(--surface); border-style: dashed; }
.product-create-page .bullet-list li.bl-add:focus-within { border-color: var(--heat-40); }
.product-create-page .bullet-list .num {
width: 20px;
height: 20px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--black-alpha-56);
display: grid;
place-items: center;
flex-shrink: 0;
}
.product-create-page .bullet-list li.bl-add .num {
background: transparent;
color: var(--heat);
border-color: var(--heat-40);
}
.product-create-page .bullet-list .bl-text { flex: 1; min-width: 0; }
.product-create-page .bullet-list .bl-input {
flex: 1;
min-width: 0;
height: 24px;
border: 0;
padding: 0 4px;
background: transparent;
font-size: 13px;
color: var(--accent-black);
font-family: inherit;
outline: none;
}
.product-create-page .bullet-list .bl-input::placeholder { color: var(--black-alpha-48); }
.product-create-page .bullet-list .bl-x {
width: 24px;
height: 24px;
display: grid;
place-items: center;
color: var(--black-alpha-32);
border: 0;
border-radius: var(--r-sm);
background: transparent;
cursor: pointer;
flex-shrink: 0;
opacity: 0;
transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
}
.product-create-page .bullet-list li.bl-item:hover .bl-x { opacity: 1; }
.product-create-page .bullet-list .bl-x:hover { background: var(--crimson-bg); color: var(--accent-crimson); }
.product-create-page .bullet-list .bl-x svg { width: 11px; height: 11px; }
/* ─── 底部操作行(吸底) ─── */
.product-create-page .form-foot {
position: sticky;
bottom: 0;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
padding: 14px 22px;
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px;
}
.product-create-page .form-foot .req-info {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
.product-create-page .form-foot .req-info .ok { color: var(--accent-forest); }
.product-create-page .form-foot .req-info .miss { color: var(--accent-crimson); }
.product-create-page .form-foot .foot-actions {
margin-left: auto;
display: flex;
gap: 10px;
}
/* ─── 响应式 · 窄屏单列 ─── */
@media (max-width: 1100px) {
.product-create-page .form-grid { grid-template-columns: 1fr; }
}
Reference in New Issue View Git Blame Copy Permalink