zyc/AirShelf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AirShelf/core/frontend/src/messages-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

356 lines
8.2 KiB
CSS
Raw Blame History

/* messages-page.css · 对齐 public/exact/messages.html · 仅 token,scoped 在 .msg-* */
.msg-page {
display: flex;
flex-direction: column;
gap: 16px;
}
.msg-page .page-head {
margin-bottom: 0;
}
.msg-head-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
.msg-workbench {
display: grid;
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
min-height: 640px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
overflow: hidden;
}
.msg-panel {
min-width: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: hidden;
}
.msg-inbox,
.msg-detail {
display: flex;
flex-direction: column;
min-height: 0;
}
.msg-inbox { border-right: 1px solid var(--border-faint); }
.msg-panel-h {
min-height: 58px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-faint);
}
.msg-panel-h .ti {
font-size: 13px;
font-weight: 600;
color: var(--accent-black);
}
.msg-panel-h .mono {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--black-alpha-48);
letter-spacing: .04em;
}
.msg-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-faint);
}
.msg-filter {
height: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 10px;
border: 1px solid var(--border-faint);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--black-alpha-56);
font-family: inherit;
font-size: 12px;
cursor: pointer;
}
.msg-filter:hover {
border-color: var(--black-alpha-24);
color: var(--accent-black);
background: var(--black-alpha-4);
}
.msg-filter.active {
border-color: var(--heat-20);
background: var(--heat-12);
color: var(--heat);
font-weight: 600;
}
.msg-filter .ct {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .02em;
}
.msg-search {
position: relative;
padding: 0 14px 12px;
border-bottom: 1px solid var(--border-faint);
}
.msg-search svg {
position: absolute;
left: 26px;
top: 10px;
width: 13px;
height: 13px;
color: var(--black-alpha-48);
pointer-events: none;
}
.msg-search input {
width: 100%;
height: 34px;
padding: 0 12px 0 32px;
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
background: var(--background-lighter);
color: var(--accent-black);
font-family: inherit;
font-size: 13px;
outline: none;
}
.msg-search input:focus {
background: var(--surface);
border-color: var(--heat-40);
box-shadow: inset 0 0 0 1px var(--heat-40);
}
.msg-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.msg-item {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 10px;
padding: 14px 16px;
border: 0;
border-bottom: 1px solid var(--border-faint);
background: transparent;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.msg-item:hover { background: var(--black-alpha-4); }
.msg-item.active { background: var(--heat-12); }
.msg-item.active::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background: var(--heat);
}
.msg-item.read .msg-item-title { color: var(--black-alpha-56); font-weight: 500; }
.msg-type-ic {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
background: var(--background-lighter);
color: var(--black-alpha-72);
}
.msg-type-ic svg { width: 14px; height: 14px; }
.msg-type-ic.task { background: var(--heat-12); border-color: var(--heat-20); color: var(--heat); }
.msg-type-ic.team { background: var(--black-alpha-4); color: var(--accent-black); }
.msg-type-ic.billing { background: var(--honey-bg); border-color: var(--honey-bd); color: var(--accent-honey); }
.msg-type-ic.system { background: var(--black-alpha-7); color: var(--black-alpha-72); }
.msg-item-main { min-width: 0; }
.msg-item-row {
display: flex;
align-items: center;
gap: 8px;
}
.msg-dot {
width: 7px;
height: 7px;
border-radius: var(--r-pill);
background: var(--heat);
flex-shrink: 0;
}
.msg-item.read .msg-dot { display: none; }
.msg-item-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--accent-black);
font-size: 13px;
font-weight: 600;
}
.msg-time {
flex-shrink: 0;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .02em;
}
.msg-brief {
margin-top: 4px;
color: var(--black-alpha-56);
font-size: 12px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.msg-item-foot {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.msg-priority {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
background: var(--background-lighter);
color: var(--black-alpha-56);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .02em;
}
.msg-priority.ok { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); }
.msg-priority.warn { background: var(--honey-bg); border-color: var(--honey-bd); color: var(--accent-honey); }
.msg-priority.err { background: var(--crimson-bg); border-color: var(--crimson-bd); color: var(--accent-crimson); }
.msg-priority.info { background: var(--heat-12); border-color: var(--heat-20); color: var(--heat); }
.msg-empty {
min-height: 320px;
display: grid;
place-items: center;
gap: 8px;
padding: 24px;
color: var(--black-alpha-48);
font-size: 13px;
text-align: center;
}
.msg-empty svg { width: 24px; height: 24px; color: var(--black-alpha-48); }
.msg-detail-empty {
flex: 1;
min-height: 520px;
display: grid;
place-items: center;
gap: 8px;
color: var(--black-alpha-48);
text-align: center;
}
.msg-detail-empty .ic {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
background: var(--background-lighter);
}
.msg-detail-empty svg { width: 21px; height: 21px; }
.msg-detail-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 22px 24px 24px;
}
.msg-detail-top {
display: flex;
align-items: flex-start;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border-faint);
}
.msg-detail-title {
min-width: 0;
flex: 1;
}
.msg-detail-title h2 {
margin: 0;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
letter-spacing: -.012em;
color: var(--accent-black);
}
.msg-detail-title .meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .04em;
}
.msg-body-text {
margin: 18px 0 0;
color: var(--accent-black);
font-size: 14px;
line-height: 1.75;
}
.msg-props {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px 16px;
margin-top: 18px;
padding: 14px 16px;
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
background: var(--background-lighter);
}
.msg-props .k {
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .04em;
}
.msg-props .v {
min-width: 0;
color: var(--accent-black);
font-size: 13px;
}
.msg-props .v a { color: var(--heat); }
.msg-detail-f {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
border-top: 1px solid var(--border-faint);
background: var(--background-lighter);
}
.msg-detail-f .spacer { flex: 1; }
.msg-foot-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .04em;
}
.msg-foot-note a { color: var(--heat); cursor: pointer; }
@media (max-width: 1280px) {
.msg-workbench { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
}
@media (max-width: 860px) {
.msg-workbench { grid-template-columns: 1fr; }
.msg-inbox { border-right: 0; border-bottom: 1px solid var(--border-faint); }
.msg-list { max-height: 360px; }
}
Reference in New Issue View Git Blame Copy Permalink