nate/hub
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mail: Outlook.com inside the app through Microsoft Graph (folders, reader, compose, reply, unread badge); Cypht webmail removed

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-22 08:09:11 -04:00
1 parent 1564941ea5
commit a9c277b497
23 files changed
+637 -405
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/style.css
+42 -15
View File
@@ -303,21 +303,6 @@ body:not(.editing) #view { padding-top: 8px; }
@media (min-width: 768px) { #navbar { padding-left: 24px; } body:not(.editing) #view { padding-top: 12px; } }
/* Mail */
.mailgrid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 768px) { .mailgrid { grid-template-columns: repeat(2, 1fr); } }
.mcard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.mcard::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--mc); }
.mhd { display: flex; align-items: center; gap: 12px; }
.mhd .grow { flex: 1; min-width: 0; }
.mhd b, .mhd small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhd b { font-size: 17px; }
.mhd small { color: var(--muted); }
.mbadge { width: 48px; height: 48px; border-radius: 14px; background: var(--mc); color: #fff; display: grid; place-items: center; flex: none; }
.mbadge svg { width: 26px; height: 26px; }
.mact { display: flex; gap: 8px; }
.mact .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.mact .btn svg { width: 20px; height: 20px; }
.mact .btn:not(.ghost) { background: var(--mc); color: #fff; }
/* Collapsible menu (tablet / computer) */
.navtoggle { display: none; }
@@ -526,3 +511,45 @@ body.lyropen { overflow: hidden; }
.tgev b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgev small { color: var(--muted); font-size: 11px; }
.tgnow { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
/* Mail */
.mailapp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 70dvh; }
.mlist, .mread { min-width: 0; }
.mailapp .mfold { display: none; }
.mailapp[data-mode="list"] .mread, .mailapp[data-mode="read"] .mlist { display: none; }
.mtool { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.mtool select { width: auto; max-width: 42%; }
.mtool input[type=search] { flex: 1; min-width: 120px; margin: 0; }
.mrow { align-items: flex-start; }
.mrow .grow { min-width: 0; display: flex; flex-direction: column; }
.mrow b, .mrow .msub, .mrow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mrow .msub { font-size: 14px; }
.mrow:not(.unread) b { font-weight: 500; }
.mrow:not(.unread) .msub { color: var(--muted); }
.mrow.unread b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.mrow.sel { background: var(--panel2); }
.mmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; color: var(--muted); }
.mmeta svg { width: 14px; height: 14px; }
.mread { min-width: 0; display: flex; flex-direction: column; }
.mrhead { padding: 4px 0 8px; }
.msubj { margin: 8px 0 4px; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.mfrom, .mto { margin: 0 0 2px; }
.mact, .matt { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mact .btn, .matt .btn { min-height: 38px; }
.mimg { background: var(--panel2); border-radius: 10px; padding: 8px 12px; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mbody { width: 100%; flex: 1; min-height: 55dvh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (min-width: 1024px) {
.mailapp { grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - 40px); min-height: 0; }
.mailapp[data-mode] .mlist, .mailapp[data-mode] .mread { display: block; }
.mailapp[data-mode] .mread { display: flex; }
.mlist, .mread { overflow-y: auto; min-height: 0; }
.mback { display: none; }
.mbody { min-height: 0; }
}
@media (min-width: 1500px) {
.mailapp { grid-template-columns: 190px 340px minmax(0, 1fr); }
.mailapp .mfold { display: flex; flex-direction: column; gap: 2px; }
.mfold a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--muted); }
.mfold a.on { background: var(--panel2); color: var(--text); font-weight: 600; }
.mtool select { display: none; }
}