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

ui enhancement

Browse source
This commit is contained in:
debu-2 2026-10-03 22:13:49 +05:30
parent 78aac5a925
commit 45e3898acb
4 changed files with 175 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/styles.css
View file

@ -450,36 +450,41 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.dns-value-cell { display:flex; align-items:flex-start; gap:8px; }
.dns-copy { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #ece7e3; border-radius:8px; background:white; color:#67677a; }
.link-button { border:0; background:transparent; color:var(--coral); font:inherit; font-weight:600; cursor:pointer; padding:0; }
.dashboard { grid-template-columns:248px minmax(0,1fr); background:#f4f3f1; }
.dashboard-sidebar { padding:22px 14px 16px; overflow:auto; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#1c1730 0%,#161226 55%,#221833 100%); box-shadow:none; }
.dashboard { grid-template-columns:236px minmax(0,1fr); background:#f4f3f1; }
.dashboard-sidebar { padding:18px 12px 14px; overflow:auto; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#1b162d 0%,#141024 52%,#1d1528 100%); box-shadow:inset -1px 0 0 #ffffff08; }
.dashboard-brand-row { padding:0 6px 2px; }
.dashboard-brand-row>button { color:#c8c3d4; }
.dashboard-sidebar .brand { color:#fff; font-size:18px; }
.dashboard-sidebar .brand { color:#fff; font-size:17px; }
.dashboard-sidebar .brand-mark { background:#fff; }
.dashboard-sidebar .robot-eyes i { background:#1c1730; }
.dashboard-sidebar .robot-smile { border-color:#1c1730; }
.dashboard-compose { margin:22px 4px 18px; color:#fff; background:linear-gradient(180deg,#ff8d72,#ff6a52); box-shadow:0 10px 22px #ff6a5240; border-radius:12px; }
.dashboard-compose:hover { background:linear-gradient(180deg,#ff9a82,#ff735c); }
.dashboard-nav-group h2 { color:#8d879c; }
.dashboard-nav-group button { min-height:36px; color:#c8c3d4; border-radius:10px; font-size:13px; }
.dashboard-nav-group button em,.dashboard-labels button em { margin-left:auto; min-width:18px; height:18px; padding:0 6px; display:grid; place-items:center; border-radius:99px; background:#ff6a52; color:#fff; font-size:10px; font-style:normal; font-weight:700; }
.dashboard-nav-group button:hover { background:#ffffff12; color:#fff; }
.dashboard-nav-group button.active { background:#ffffff14; color:#fff; font-weight:600; box-shadow:none; }
.dashboard-labels { margin:2px 0 18px; }
.dashboard-labels-toggle,.dashboard-labels button { width:100%; min-height:36px; padding:0 11px; display:flex; align-items:center; gap:11px; border:0; border-radius:10px; background:transparent; color:#c8c3d4; font-size:13px; text-align:left; }
.dashboard-labels-toggle svg:last-child { margin-left:auto; transition:transform .15s ease; }
.dashboard-labels-toggle svg.open { transform:rotate(180deg); }
.dashboard-labels nav { display:grid; gap:2px; margin-top:2px; }
.dashboard-labels button:hover,.dashboard-labels button.active { background:#ffffff12; color:#fff; }
.label-dot { width:8px; height:8px; border-radius:50%; }
.label-dot-rose { background:#ff8b78; }
.label-dot-violet { background:#a78bfa; }
.label-dot-blue { background:#7eb6ff; }
.label-dot-amber { background:#f0c14a; }
.label-dot-green { background:#7dcea0; }
.dashboard-profile { border-top-color:#ffffff14; }
.dashboard-profile>span { background:#ff8b78; color:#2a2038; }
.dashboard-compose { min-height:42px; margin:16px 4px 0; padding:0 14px; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:linear-gradient(180deg,#ff9478 0%,#ff6a52 48%,#f2553f 100%); border:1px solid #ff8a7240; border-radius:12px; box-shadow:0 10px 24px #ff6a5247, inset 0 1px 0 #ffffff30; font-weight:700; }
.dashboard-compose span { flex:1; text-align:left; }
.dashboard-compose-caret { margin-left:auto; opacity:.85; }
.dashboard-compose:hover { background:linear-gradient(180deg,#ffa287 0%,#ff7659 48%,#f35f48 100%); box-shadow:0 12px 28px #ff6a5252, inset 0 1px 0 #ffffff38; }
.dashboard-sidebar-section { margin-top:18px; padding-top:16px; border-top:1px solid #ffffff0a; }
.dashboard-sidebar-section h2 { margin:0 0 6px; padding:0 8px; color:#6f6a7d; font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.dashboard-sidebar-section nav { display:grid; gap:1px; }
.dashboard-nav-item { min-height:32px; padding:0 8px; display:flex; align-items:center; gap:10px; border:0; border-radius:9px; background:transparent; color:#b9b4c6; font-size:12.5px; font-weight:500; text-align:left; transition:background .14s ease,color .14s ease,box-shadow .14s ease; }
.dashboard-nav-item svg { flex-shrink:0; opacity:.92; }
.dashboard-nav-item span { flex:1; min-width:0; }
.dashboard-nav-item em { margin-left:auto; min-width:17px; height:17px; padding:0 5px; display:grid; place-items:center; border-radius:99px; background:#ff6a52; color:#fff; font-size:9px; font-style:normal; font-weight:700; line-height:1; box-shadow:0 1px 4px #ff6a5238; }
.dashboard-nav-item:hover { background:#ffffff10; color:#f4f1fa; }
.dashboard-nav-item.active { color:#fff; font-weight:600; background:linear-gradient(90deg,#ffffff1f 0%,#ffffff10 100%); box-shadow:inset 3px 0 0 #ff7a62, 0 1px 0 #ffffff10; }
.dashboard-sidebar-mail .dashboard-nav-item.active { background:linear-gradient(90deg,#ff7a6228 0%,#ffffff12 100%); box-shadow:inset 3px 0 0 #ff8a72, 0 4px 14px #00000018; }
.dashboard-label-item { padding-left:10px; }
.dashboard-label-item .label-dot { width:10px; height:10px; flex-shrink:0; border-radius:50%; box-shadow:0 0 0 2px #ffffff10; }
.label-dot-rose { background:#ff8f7d; }
.label-dot-violet { background:#b79cff; }
.label-dot-blue { background:#8ec0ff; }
.label-dot-amber { background:#f5c85a; }
.label-dot-green { background:#8ed9ad; }
.dashboard-agent-item { color:#c3bed0; }
.dashboard-agent-item.active { background:linear-gradient(90deg,#8b7cff22 0%,#ffffff10 100%); box-shadow:inset 3px 0 0 #9f8cff; }
.dashboard-profile { margin-top:14px; padding-top:12px; border-top:1px solid #ffffff10; }
.dashboard-profile>span { background:linear-gradient(180deg,#ff9a82,#ff6f57); color:#2a2038; }
.dashboard-profile strong { color:#fff; }
.dashboard-profile small,.dashboard-profile button { color:#a39eb2; }
.dashboard-profile small,.dashboard-profile button { color:#9a95a8; }
.dashboard-profile button:hover { background:#ffffff12; color:#fff; }
.dashboard-content { padding:14px 16px 16px; background:#f7f6f4; }
.dashboard-content-heading h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-1.4px; }