Suyash091/agentic.email
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

email box empty styling

Browse source
This commit is contained in:
debu-2 2026-10-05 21:34:12 +05:30
parent 1ee8a58117
commit 5cb49f4cb1
19 changed files with 547 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/styles.css
View file

@ -558,12 +558,30 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.mailbox-list-footer { margin-top:auto; padding:18px 20px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #ebe7e3; background:linear-gradient(180deg,#fcfbfa 0%,#f8f7f5 100%); color:#8f8a94; font-size:11px; }
.mailbox-list-footer p { margin:0; color:#5c5763; font-weight:600; }
.mailbox-list-footer span { color:#a09aa4; font-size:10px; }
.mailbox-state { min-height:220px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8d8891; text-align:center; font-size:11px; background:#ebe8e3; }
.mailbox-state.empty span { width:46px; height:46px; margin-bottom:13px; display:grid; place-items:center; border-radius:14px; color:var(--coral); background:#fff0eb; }
.mailbox-state.empty strong { color:#393541; font:600 15px "Manrope"; }
.mailbox-state { min-height:120px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8d8891; text-align:center; font-size:11px; background:var(--surface); }
.mailbox-state.loading { min-height:300px; }
.mailbox-state p { margin:7px 0; }
.mailbox-state.error { color:#a94f40; }
.mailbox-state button { margin-top:8px; padding:7px 12px; border:0; border-radius:8px; background:var(--ink); color:white; font-size:10px; }
.mailbox-empty-body { min-height:300px; padding:28px 20px; display:flex; align-items:center; justify-content:center; background:#FCFBFA; border-bottom:1px solid var(--border-subtle); }
.mailbox-empty-content { width:min(100%,360px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.mailbox-empty-illustration { position:relative; width:60px; height:60px; margin-bottom:15px; }
.mailbox-empty-icon-wrap { width:52px; height:52px; position:absolute; left:4px; top:4px; display:grid; place-items:center; border-radius:14px; color:var(--coral); background:#FFF1ED; box-shadow:0 1px 2px rgba(20,20,30,0.04); }
.mailbox-empty-spark { position:absolute; color:var(--agent); font-size:11px; line-height:1; }
.mailbox-empty-spark-top { top:0; left:50%; transform:translateX(-50%); }
.mailbox-empty-spark-bottom { right:2px; bottom:2px; font-size:9px; opacity:.85; }
.mailbox-empty-content h3 { margin:0; color:#2a2530; font:650 16px/1.35 "Manrope"; letter-spacing:-.3px; }
.mailbox-empty-content p { margin:6px 0 0; color:#8d8792; font:400 12px/1.55 "DM Sans"; }
.mailbox-empty-actions { margin-top:15px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mailbox-empty-cta { height:36px; padding:0 14px; border:0; border-radius:8px; background:linear-gradient(180deg,#ff806d 0%,#ff5c55 100%); color:#fff; font:600 12px "DM Sans"; box-shadow:0 6px 16px rgba(255,92,85,0.22); cursor:pointer; }
.mailbox-empty-cta:hover { filter:brightness(1.03); }
.mailbox-empty-link { border:0; background:transparent; color:#7b67c8; font:600 12px "DM Sans"; cursor:pointer; }
.mailbox-empty-link:hover { color:#5a3fe0; }
.mailbox-empty-badge { margin:14px 0 0; display:inline-flex; align-items:center; gap:6px; color:#3d8a5d; font:500 11px "DM Sans"; }
.agent-ready-card { margin:0 0 12px; padding:12px 13px; border:1px solid rgba(118,86,232,0.12); border-radius:12px; background:#faf8ff; }
.agent-ready-card p { margin:0; color:#77758A; font:400 10px/15px "DM Sans"; }
.agent-ready-lead { margin:0 0 6px !important; display:flex; align-items:center; gap:6px; color:#5a3fe0 !important; font:600 11px/14px "DM Sans" !important; }
.agent-quick-btn:disabled { opacity:.45; cursor:not-allowed; }
.mailbox-pagination { min-height:44px; padding:var(--space-2) var(--space-4); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--space-3); border-top:1px solid var(--border-subtle); background:var(--surface); color:#8d8792; font-size:var(--text-micro); }
.mailbox-pagination-range { font-weight:500; }
.mailbox-pagination-controls,.mailbox-pagination-density { display:flex; align-items:center; gap:var(--space-1); }
@ -839,7 +857,7 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.dashboard-content { padding:var(--space-3) var(--space-4) var(--space-4); background:var(--canvas); }
.dashboard-content-heading h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-1.4px; }
.mailbox-workspace { display:flex; flex-direction:column; gap:var(--space-3); }
.mailbox-main-column { min-width:0; align-self:start; }
.mailbox-main-column { width:100%; min-width:0; align-self:stretch; }
.workspace-header { min-height:56px; padding:var(--space-2) var(--space-3); display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:0 var(--space-4); align-items:center; border-radius:var(--radius-lg); background:var(--workspace); }
.workspace-zone { display:flex; align-items:center; min-width:0; }
.workspace-zone-command { padding-right:8px; }
@ -884,8 +902,8 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.workspace-account strong { color:#241f2b; font-size:12px; font-weight:600; }
.workspace-account small { color:#7a7580; font-size:10px; max-width:160px; }
.workspace-account>span { width:32px; height:32px; font-size:11px; }
.mailbox-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,320px); gap:var(--space-4); align-items:start; }
.mailbox-shell { position:relative; align-self:start; overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-surface); }
.mailbox-stage { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.mailbox-shell { position:relative; width:100%; align-self:stretch; overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-surface); }
.mailbox-list-pane { display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius-xl); }
.mailbox-categories { min-height:44px; padding:0 var(--space-2); display:flex; align-items:flex-end; gap:var(--space-1); border-bottom:1px solid var(--border-subtle); background:var(--surface); overflow:auto; }
.mailbox-categories button { height:44px; padding:0 var(--space-3) var(--space-2); position:relative; display:inline-flex; align-items:center; gap:var(--space-2); border:0; border-radius:0; background:transparent; color:#7a7580; font-size:var(--text-meta); font-weight:500; white-space:nowrap; transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard); }
@ -904,6 +922,7 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.mailbox-selection-actions button:hover { background:#ebe8e3; color:#241f2b; }
.mailbox-selection-summarize { height:36px; padding:0 var(--space-3); white-space:nowrap; font-size:var(--text-meta); }
.mailbox-rows { flex:0 1 auto; max-height:calc(100vh - 260px); overflow-y:auto; background:var(--surface); }
.mailbox-rows.is-empty { max-height:none; overflow:visible; }
.mailbox-row { width:100%; height:46px; min-height:46px; max-height:46px; padding:0 var(--space-3); display:grid; grid-template-columns:28px 28px 38px minmax(150px,180px) minmax(0,1fr) minmax(72px,108px) 28px minmax(148px,168px); align-items:center; gap:var(--space-2); position:relative; border:0; border-bottom:1px solid rgba(20,20,30,0.055); background:var(--surface); color:#4a4652; text-align:left; cursor:pointer; overflow:hidden; transition:background var(--motion-fast) var(--ease-standard); }
.mailbox-row.unread { background:#fffcfa; }
.mailbox-row:not(.unread) .mailbox-sender { color:#5a5562; font-weight:500; }