/* ============================================================ Outlook-style webmail ============================================================ */ /* Self-hosted Inter (variable, latin subset) — no external font CDN, so first paint never waits on Google Fonts and the reader's IP is never disclosed to a third party. Falls back to the system UI stack for glyphs outside this range. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand — Microsoft Outlook palette */ --c-brand: #0078d4; --c-brand-hover: #106ebe; --c-brand-active: #005a9e; --c-brand-light: #e3edf7; /* selected/active item background */ --c-brand-tint: #f3f9fd; --c-brand-band: #0078d4; --c-brand-band-end: #106ebe; /* Surfaces */ --c-bg: #ffffff; --c-actionbar-bg: #fafbfc; --c-list-bg: #ffffff; --c-divider: #eceef1; --c-hover: #f4f5f7; --c-page-bg: #f5f6f8; /* Text */ --c-text: #1a1d23; --c-text-secondary: #3a3f4a; --c-text-muted: #5b6270; --c-text-subtle: #707782; /* WCAG AA 4.52:1 on white (was #9aa1ac = 2.60:1) */ --c-text-on-brand: #ffffff; /* Borders */ --c-border: #e3e6ea; --c-border-strong: #cdd2da; /* Status */ --c-error: #c2333a; --c-error-bg: #fce8ea; --c-success: #107c10; --c-success-bg: #dff6dd; --c-warning: #f7e9c1; --c-warning-text: #8a6f12; /* Avatar palette — desaturated, professional tones */ --c-av-1: #2c5e9e; --c-av-2: #6b4c93; --c-av-3: #2a7a7a; --c-av-4: #b3464a; --c-av-5: #4f7d2e; --c-av-6: #b6571f; --c-av-7: #b73670; --c-av-8: #7a5536; /* Sizes */ --topbar-h: 48px; --actionbar-h: 48px; --list-w: 380px; --drawer-w: 260px; /* Type */ /* Inter (Rasmus Andersson) is the only typeface in this app — UI, reading, writing, system. The generic `sans-serif` is only a safety net if Inter fails to load. --font-mono is kept as an alias so legacy rules still render Inter; tabular-figure feature is enabled per-element where digits need to align (timestamps, badges). */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: var(--font-ui); /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(15, 23, 42, 0.10), 0 6px 16px -8px rgba(15, 23, 42, 0.24); } /* ============================================================ Dark theme The inline script resolves the saved theme pref (+ the OS setting for "system") and sets html.theme-dark before first paint, so there is no flash of light. Every surface/text/border in the app reads from the variables above, so overriding them here flips the whole UI. Rendered email bodies and the compose editor keep a light reading surface (further down) so third-party HTML mail stays legible — the same approach Gmail/Outlook use. ============================================================ */ html.theme-dark { color-scheme: dark; --c-brand: #2b88d8; --c-brand-hover: #3a96e8; --c-brand-active: #6cb4ee; --c-brand-light: #1c3a52; /* selected/active item background */ --c-brand-tint: #17293a; --c-bg: #20242b; --c-actionbar-bg: #262b33; --c-list-bg: #20242b; --c-divider: #2d333d; --c-hover: #2a3039; --c-page-bg: #15171c; --c-text: #e6e8ec; --c-text-secondary: #c4c9d2; --c-text-muted: #98a0ab; --c-text-subtle: #838b98; /* WCAG AA 4.53:1 on the dark surface (was #6b7380 = 3.25:1) */ --c-text-on-brand: #ffffff; --c-border: #2f343d; --c-border-strong: #434a56; --c-error: #f0717b; --c-error-bg: #3a1f23; --c-success: #5cc16a; --c-success-bg: #18301c; --c-warning: #3a3320; --c-warning-text: #e8c878; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 12px -2px rgba(0, 0, 0, 0.6); /* Avatar palette. These had been lightened so the disc would separate from the dark list surface, but the initials sit ON the disc in white, and lightening it is exactly what takes that pair apart: every colour landed between 2.9 and 4.0:1, the green worst at 2.85. The disc only has to be dark enough for its own white text, which does not depend on the page behind it — so these are the same hues stepped down until white clears 4.6:1. They still read as the brighter dark-mode set next to the light values. */ --c-av-1: #4376b2; /* was #4a82c4 — 3.98:1 */ --c-av-2: #8368ae; /* was #9072bf — 3.93:1 */ --c-av-3: #317f7f; /* was #3fa3a3 — 3.01:1 */ --c-av-4: #b25a5d; /* was #d46b6f — 3.42:1 */ --c-av-5: #548036; /* was #6fa847 — 2.85:1 */ --c-av-6: #a96231; /* was #d97e3f — 3.00:1 */ --c-av-7: #b85281; /* was #d65f96 — 3.54:1 */ --c-av-8: #946d48; /* was #a3784f — 3.92:1 */ } /* In dark mode keep the ENTIRE reading pane (right side) on a light surface — email HTML is authored for white backgrounds, so the whole panel (subject, headers, dividers, message bodies) reads cleaner light. Re-declaring the colour tokens here, scoped to the pane, flips every descendant that uses var(--c-*) to light automatically. */ html.theme-dark .reading-pane { --c-brand: #0078d4; --c-brand-hover: #106ebe; --c-brand-active: #005a9e; --c-brand-light: #e3edf7; --c-bg: #ffffff; --c-list-bg: #ffffff; --c-actionbar-bg: #fafbfc; --c-page-bg: #f5f6f8; --c-hover: #f4f5f7; --c-divider: #eceef1; --c-border: #e3e6ea; --c-border-strong: #cdd2da; --c-text: #1a1d23; --c-text-secondary: #3a3f4a; --c-text-muted: #5b6270; --c-text-subtle: #707782; /* WCAG AA 4.52:1 on white (was #9aa1ac = 2.60:1) */ --c-error: #c2333a; --c-error-bg: #fce8ea; --c-success: #107c10; --c-success-bg: #dff6dd; --c-warning: #f7e9c1; --c-warning-text: #8a6f12; background: #ffffff; color: #1a1d23; } /* Keep rendered email + the message you're composing on a light surface so HTML mail authored for white backgrounds stays readable in dark mode. The compose FIELDS / toolbar / footer keep the app's dark chrome — only the message text area (.compose-body) is light, like a real email on white. */ html.theme-dark .thread-msg-body, html.theme-dark .compose-body { background: #ffffff; color: #1a1d23; } html.theme-dark .thread-msg-body a { color: #0b57d0; } html.theme-dark .thread-msg-body blockquote { border-left-color: #d0d3d8; color: #5b6270; } html.theme-dark .thread-msg-body pre { background: #f3f4f6; color: #1a1d23; } /* Attachment previews that render a document (spreadsheet / Word) keep a light paper surface, so force dark ink on them in dark mode. */ html.theme-dark .attach-preview-spreadsheet, html.theme-dark .ssheet-content, html.theme-dark .ssheet-content table, html.theme-dark .ssheet-tab.active, html.theme-dark .docx-wrapper > section.docx { color: #1a1d23; } /* The toast uses --c-text as its background for a dark snackbar in light mode; pin it to a fixed elevated dark so it can't invert to light-on-light. */ html.theme-dark .app-toast { background: #383f4a; } /* Browser autofill paints its own near-white fill; repaint it to the dark surface. */ html.theme-dark .form-input:-webkit-autofill, html.theme-dark .form-input:-webkit-autofill:hover, html.theme-dark .form-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset; } /* Login is reachable before any saved theme exists (resolves to the OS setting). */ html.theme-dark .login-page { background: radial-gradient(1200px 600px at 18% 22%, rgba(43, 136, 216, 0.10), transparent 60%), radial-gradient(900px 600px at 88% 86%, rgba(107, 76, 147, 0.10), transparent 55%), linear-gradient(180deg, #15171c 0%, #0f1115 100%); } /* Remaining hardcoded light values that don't read from a variable. */ html.theme-dark .msg-folder-badge[data-folder-type="trash"] { color: #d98a8a; } html.theme-dark .signature-editor:focus { background: var(--c-hover); } html.theme-dark .logo-preview { background: repeating-conic-gradient(#2a2f37 0% 25%, #20242b 0% 50%) 50% / 18px 18px; } /* Scrollbar thumb is a dark slate tint for light surfaces; on a dark surface that's invisible, so flip it to a light translucent tint. The compose body and the reading pane keep a white surface in dark mode (above), so they're excluded and keep the default dark thumb (visible on white). */ html.theme-dark .list-items::-webkit-scrollbar-thumb, html.theme-dark .folder-list::-webkit-scrollbar-thumb, html.theme-dark .dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); } html.theme-dark .list-items::-webkit-scrollbar-thumb:hover, html.theme-dark .folder-list::-webkit-scrollbar-thumb:hover, html.theme-dark .dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* The disabled primary button uses a light slate that reads brighter than the enabled state on a dark page; mute it to a dark grey instead. */ html.theme-dark .btn-primary:disabled { background: var(--c-border-strong); } /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-ui); color: var(--c-text); background: var(--c-bg); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01', 'ss03'; } button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } a { color: inherit; text-decoration: none; } svg { display: block; } /* The `hidden` attribute means "not rendered", but the browser enforces it from its own stylesheet — and ANY author rule setting `display` beats the whole UA sheet regardless of specificity. `svg { display: block }` directly above is enough to defeat it, which is why the login page painted both the eye and the crossed-out eye at once: the show/hide-password button toggles `hidden` on two SVGs and neither ever disappeared. This had already been patched one selector at a time for .snooze-menu, .compose-row and #offlineBar. One rule instead, so the next element to use `hidden` works without a fourth patch. !important is deliberate: `hidden` is a statement that the element is not part of the page, and nothing should be able to out-specify it. */ [hidden] { display: none !important; } /* === Login page === */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: radial-gradient(1200px 600px at 18% 22%, rgba(0, 120, 212, 0.10), transparent 60%), radial-gradient(900px 600px at 88% 86%, rgba(107, 76, 147, 0.07), transparent 55%), linear-gradient(180deg, #f6f9fc 0%, #eef3f9 100%); position: relative; overflow: hidden; } .login-page::before { /* subtle dotted pattern, very faint */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; pointer-events: none; opacity: 0.5; } .login-shell { position: relative; z-index: 1; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; animation: login-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes login-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .login-card { background: var(--c-bg); border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 24px -8px rgba(15, 23, 42, 0.10), 0 36px 60px -28px rgba(15, 23, 42, 0.18); padding: 32px 36px 28px; } .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--c-divider); } .login-brand-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--c-brand-band) 0%, var(--c-brand-band-end) 100%); color: white; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 12px rgba(22, 58, 107, 0.32); } .login-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .login-brand-domain { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; } .login-brand-tag { font-size: 10px; font-weight: 700; color: var(--c-brand); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; } .login-intro { margin-bottom: 22px; } .login-intro h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; color: var(--c-text); } .login-intro p { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; } .form-field { margin-bottom: 14px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--c-text); margin-bottom: 6px; letter-spacing: 0.005em; } .input-shell { position: relative; display: flex; align-items: center; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .input-shell:hover { border-color: var(--c-border-strong); } .input-shell:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.14); } .input-shell .input-icon { margin-left: 12px; color: var(--c-text-subtle); flex-shrink: 0; transition: color 0.15s; } .input-shell:focus-within .input-icon { color: var(--c-brand); } .form-input { flex: 1; border: 0; background: transparent; padding: 11px 12px; font-size: 14px; color: var(--c-text); outline: none; min-width: 0; } .form-input::placeholder { color: var(--c-text-subtle); } /* Suppress browser autofill yellow/blue tint */ .form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-color: var(--c-text); caret-color: var(--c-text); transition: background-color 5000s ease-in-out 0s; } .input-toggle { width: 34px; height: 34px; margin-right: 4px; background: transparent; border: 0; color: var(--c-text-muted); cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .input-toggle:hover { background: var(--c-hover); color: var(--c-text); } .advanced-toggle { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 6px 0; margin: 4px 0 14px; color: var(--c-brand); font-size: 12px; font-weight: 500; cursor: pointer; letter-spacing: 0.005em; } .advanced-toggle:hover { color: var(--c-brand-hover); } .advanced-toggle .chev { transition: transform 0.15s; } .advanced-toggle.open .chev { transform: rotate(90deg); } .advanced-fields { display: none; padding: 14px; background: var(--c-actionbar-bg); border: 1px solid var(--c-divider); border-radius: 10px; margin-bottom: 14px; } .advanced-fields.open { display: block; } .advanced-row { display: flex; gap: 10px; align-items: flex-end; } .advanced-fields .form-field:last-child { margin-bottom: 0; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; } .checkbox-row input { accent-color: var(--c-brand); width: 16px; height: 16px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.06s; border: none; cursor: pointer; font-family: inherit; } .btn-primary { background: linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-active) 100%); color: white; width: 100%; padding: 13px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.005em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(0, 120, 212, 0.30); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(0, 120, 212, 0.36); } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; opacity: 0.85; } .btn-primary .btn-icon { opacity: 0.85; } .error-banner { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--c-error-bg); color: var(--c-error); border-radius: 8px; font-size: 13px; line-height: 1.4; margin-bottom: 14px; border: 1px solid rgba(209, 52, 56, 0.22); } .error-banner svg { flex-shrink: 0; margin-top: 1px; } .login-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; padding: 10px 12px; font-size: 11.5px; color: var(--c-text-muted); border-top: 1px solid var(--c-divider); padding-top: 16px; margin-top: 18px; } .login-secure svg { color: var(--c-success); flex-shrink: 0; } .login-page-footer { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--c-text-subtle); letter-spacing: 0.005em; } .login-page-footer a { color: var(--c-brand); text-decoration: none; } .login-page-footer a:hover { text-decoration: underline; } .login-page-footer strong { color: var(--c-text-muted); font-weight: 600; } @media (max-width: 480px) { .login-card { padding: 26px 22px 22px; border-radius: 12px; } .login-intro h1 { font-size: 22px; } } /* === Main app shell === */ .app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Top brand band */ .topbar { height: var(--topbar-h); /* Flat-colour fallback first, then a subtle diagonal gradient derived from the theme's own brand colour (works in light AND dark) for depth. The shadow lifts the bar above the content. */ background: var(--c-brand); background: linear-gradient(135deg, color-mix(in srgb, var(--c-brand), #fff 8%) 0%, color-mix(in srgb, var(--c-brand), #000 14%) 100%); box-shadow: var(--shadow-topbar); display: flex; align-items: center; justify-content: center; padding: 0 16px; position: relative; flex-shrink: 0; z-index: 10; } .topbar-search { width: 100%; max-width: 460px; position: relative; } .topbar-search-input { width: 100%; height: 34px; padding: 0 14px 0 38px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: white; font-size: 13px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } .topbar-search-input::placeholder { color: rgba(255, 255, 255, 0.85); font-weight: 400; } .topbar-search-input:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.28); } .topbar-search-input:focus { outline: none; background: #fff; color: var(--c-text); border-color: transparent; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30), 0 6px 18px -6px rgba(0, 0, 0, 0.28); } .topbar-search-input:focus::placeholder { color: var(--c-text-subtle); } .topbar-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.95); pointer-events: none; } .topbar-search-input:focus + .topbar-search-icon, .topbar-search-input:not(:placeholder-shown) + .topbar-search-icon { color: var(--c-text-muted); } .topbar-end { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; } .topbar-logo-slot { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; max-width: 300px; height: 36px; cursor: pointer; text-decoration: none; border-radius: 6px; transition: opacity 0.15s; } .topbar-logo-slot:hover { opacity: 0.85; } .topbar-logo-slot:hover .topbar-logo-default { background: rgba(255, 255, 255, 0.26); } .topbar-logo-slot:active { opacity: 0.7; } .topbar-logo { max-height: 32px; max-width: 280px; width: auto; height: auto; display: block; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .topbar-logo-default { display: inline-flex; align-items: center; gap: 9px; color: white; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); letter-spacing: -0.005em; max-width: 280px; transition: background 0.15s; } .topbar-logo-default:hover { background: rgba(255, 255, 255, 0.26); } .topbar-logo-mark { width: 22px; height: 22px; border-radius: 50%; background: white; color: var(--c-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .topbar-logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topbar-brand-mini { display: flex; align-items: center; gap: 8px; color: white; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); letter-spacing: -0.005em; max-width: 240px; } .topbar-brand-mini-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topbar-user { display: flex; align-items: center; gap: 8px; background: transparent; border-radius: 999px; padding: 3px 12px 3px 3px; color: white; font-size: 12px; font-weight: 500; transition: background 0.15s; } .topbar-user:hover { background: rgba(255, 255, 255, 0.18); } .topbar-user-logout { width: 15px; height: 15px; margin-left: 1px; opacity: 0.75; transition: opacity 0.15s; flex-shrink: 0; } .topbar-user:hover .topbar-user-logout { opacity: 1; } .topbar-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: white; color: var(--c-brand); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .topbar-icon-light { width: 32px; height: 32px; border: 0; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; background: transparent; cursor: pointer; transition: background 0.15s; } .topbar-icon-light:hover { background: rgba(255, 255, 255, 0.2); } /* Dark-mode quick toggle: moon means "switch to dark" (shown in light mode), sun means "switch to light" (shown in dark mode). */ #themeToggle .icon { display: block; } #themeToggle .theme-ic-to-light { display: none; } html.theme-dark #themeToggle .theme-ic-to-dark { display: none; } html.theme-dark #themeToggle .theme-ic-to-light { display: block; } /* Action bar */ .actionbar { height: var(--actionbar-h); background: var(--c-actionbar-bg); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; padding: 0 8px; gap: 2px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .actionbar::-webkit-scrollbar { display: none; } .ab-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--c-text-secondary); white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .ab-btn:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text); } .ab-btn:active:not(:disabled) { background: var(--c-divider); } .ab-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ab-btn .icon { color: var(--c-text-muted); transition: color 0.15s; } .ab-btn:hover:not(:disabled) .icon { color: var(--c-text); } .ab-btn.ab-icon-only { width: 34px; padding: 0; justify-content: center; } .ab-btn.ab-primary { background: var(--c-brand); color: white; font-weight: 600; } .ab-btn.ab-primary .icon { color: white; } .ab-btn.ab-primary:hover:not(:disabled) { background: var(--c-brand-hover); } .ab-btn.ab-primary:hover:not(:disabled) .icon { color: white; } .ab-btn .ab-chev { color: var(--c-text-muted); margin-left: -2px; } .ab-divider { width: 1px; height: 22px; background: var(--c-border); margin: 0 6px; } /* Main two-pane area */ .app-main { flex: 1; display: flex; overflow: hidden; position: relative; background: var(--c-bg); } /* Folder pane (pinned by default) */ .folder-pane { width: var(--drawer-w); background: var(--c-bg); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } .app-main.folders-collapsed .folder-pane { display: none; } .folder-pane-header { padding: 14px 18px 6px; display: flex; align-items: center; justify-content: space-between; } .folder-pane-title { font-size: 11px; font-weight: 600; color: var(--c-text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); flex: 1; } .folder-pane-add { width: 24px; height: 24px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-muted); background: transparent; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .folder-pane-add:hover { background: var(--c-hover); color: var(--c-brand); } .folder-list { flex: 1; overflow-y: auto; padding: 4px 0 8px; } .folder-item { display: flex; align-items: center; gap: 10px; padding: 7px 18px; font-size: 13px; color: var(--c-text); cursor: pointer; position: relative; width: 100%; text-align: left; border-radius: 0; transition: background 0.1s; } .folder-item:hover { background: var(--c-hover); } .folder-item.active { background: var(--c-brand-light); color: var(--c-brand-active); font-weight: 600; } .folder-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--c-text-muted); } .folder-item.active .folder-icon { color: var(--c-brand-active); } .folder-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folder-badge { background: transparent; color: var(--c-text-muted); font-size: 12px; font-weight: 400; padding: 0; border-radius: 0; min-width: 0; text-align: right; font-family: var(--font-ui); font-feature-settings: 'tnum'; letter-spacing: 0; } .folder-item.active .folder-badge { color: var(--c-brand-active); font-weight: 600; } .folder-pane-footer { border-top: 1px solid var(--c-divider); padding: 0 0 6px; } .folder-pane-footer .folder-item { padding: 8px 18px; } .folder-pane-account { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--c-divider); font-size: 12px; color: var(--c-text-muted); margin-bottom: 4px; } .folder-pane-account .icon { color: var(--c-text-muted); flex-shrink: 0; } .folder-pane-account-email { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--c-text); } /* Message list pane */ .list-pane { width: var(--list-w); background: var(--c-list-bg); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; flex-shrink: 0; } .list-tabs { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--c-divider); gap: 4px; } .list-tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--c-text-muted); border-bottom: 2px solid transparent; border-radius: 0; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .list-tab:hover { color: var(--c-text); } .list-tab.active { color: var(--c-brand); border-bottom-color: var(--c-brand); } .tab-count { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10px; background: var(--c-border); color: var(--c-text-muted); font-feature-settings: 'tnum'; font-weight: 600; font-family: var(--font-mono); vertical-align: 1px; } .list-tab.active .tab-count { background: var(--c-brand); color: white; } .list-tab-spacer { flex: 1; } .list-filter-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; } .list-filter-btn:hover { background: var(--c-hover); color: var(--c-text); } .list-folder-name { padding: 14px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); font-family: var(--font-mono); background: var(--c-list-bg); border-bottom: 1px solid var(--c-divider); } /* Folder filter chips (Unread / Flagged / Attachments) */ .list-filters { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--c-divider); background: var(--c-list-bg); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .list-filters::-webkit-scrollbar { display: none; } .list-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--c-text-secondary); background: transparent; border: 1px solid var(--c-border); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: inherit; } .list-filter-chip .icon { color: var(--c-text-muted); transition: color 0.15s; } .list-filter-chip:hover { background: var(--c-hover); border-color: var(--c-border-strong); color: var(--c-text); } .list-filter-chip:hover .icon { color: var(--c-text); } .list-filter-chip.active { background: var(--c-brand); color: white; border-color: var(--c-brand); } .list-filter-chip.active .icon { color: white; } .list-filter-chip.active:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); } .list-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); background: var(--c-border); color: var(--c-text-muted); margin-left: 2px; } .list-filter-chip:hover .list-filter-count { background: var(--c-divider); } .list-filter-chip.active .list-filter-count { background: rgba(255, 255, 255, 0.25); color: white; } /* New-message arrival highlight */ .msg-item.msg-item-fresh { background: linear-gradient(90deg, rgba(0, 120, 212, 0.08) 0%, transparent 70%); animation: msg-fresh-pulse 1.6s ease-out; } @keyframes msg-fresh-pulse { 0% { background: rgba(0, 120, 212, 0.18); } 60% { background: rgba(0, 120, 212, 0.10); } 100% { background: transparent; } } .list-items { flex: 1; overflow-y: auto; } .list-group-header { padding: 14px 18px 6px; font-size: 11px; font-weight: 600; color: var(--c-text-muted); letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-list-bg); position: sticky; top: 0; z-index: 1; } .msg-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 8px 22px; border-bottom: 1px solid var(--c-divider); cursor: pointer; position: relative; transition: background 0.08s; } .msg-item:hover { background: var(--c-hover); } .msg-item.active { background: var(--c-brand-light); } .msg-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-brand); } .msg-dot { position: absolute; left: 9px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); display: none; } .msg-item.unread .msg-dot { display: block; } .msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600; flex-shrink: 0; letter-spacing: 0.02em; margin-top: 1px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .msg-body { flex: 1; min-width: 0; } .msg-row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 1px; line-height: 1.35; } .msg-from { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; display: inline-flex; align-items: center; gap: 6px; } .msg-thread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--c-border); color: var(--c-text-muted); font-size: 10px; font-weight: 700; font-family: var(--font-mono); font-feature-settings: 'tnum'; flex-shrink: 0; } .msg-folder-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 7px; border-radius: 4px; background: var(--c-actionbar-bg); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; font-family: var(--font-mono); } .msg-folder-badge[data-folder-type="inbox"] { color: var(--c-av-1); border-color: rgba(44, 94, 158, 0.22); background: rgba(44, 94, 158, 0.06); } .msg-folder-badge[data-folder-type="sent"] { color: var(--c-av-5); border-color: rgba(79, 125, 46, 0.22); background: rgba(79, 125, 46, 0.06); } .msg-folder-badge[data-folder-type="drafts"] { color: var(--c-av-6); border-color: rgba(182, 87, 31, 0.22); background: rgba(182, 87, 31, 0.06); } .msg-folder-badge[data-folder-type="trash"] { color: #b3464a; background: rgba(179,70,74,0.06); border-color: rgba(179,70,74,0.22); } .msg-folder-badge[data-folder-type="archive"] { color: var(--c-av-2); border-color: rgba(107, 76, 147, 0.22); background: rgba(107, 76, 147, 0.06); } .msg-item.unread .msg-thread-count { background: var(--c-brand-light); color: var(--c-brand); } .msg-item.active .msg-thread-count { background: white; color: var(--c-brand); } .msg-item:not(.unread) .msg-from { font-weight: 500; } .msg-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .msg-indicator { color: var(--c-text-muted); flex-shrink: 0; } .msg-indicator-pin { color: var(--c-brand); } .msg-time { font-size: 11px; color: var(--c-text-muted); flex-shrink: 0; font-feature-settings: 'tnum'; letter-spacing: 0; } .msg-item.unread .msg-time { color: var(--c-brand); font-weight: 500; } .msg-subject { font-size: 13px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; line-height: 1.35; } .msg-item.unread .msg-subject { color: var(--c-brand); font-weight: 500; } .msg-preview { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .msg-preview:empty { display: none; } .list-pagination { padding: 8px 14px; border-top: 1px solid var(--c-divider); display: flex; align-items: center; justify-content: space-between; font-size: 12px; background: var(--c-bg); } .pager-btn { padding: 4px 10px; border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: 12px; transition: background 0.15s; } .pager-btn:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text); } .pager-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pager-info { font-family: var(--font-mono); color: var(--c-text-muted); font-size: 11px; } .list-empty, .list-loading { padding: 40px 20px; text-align: center; color: var(--c-text-muted); font-size: 13px; } /* ---------- Outbox (virtual folder) ---------- */ .folder-badge.folder-badge-outbox { background: var(--c-warning-text); color: #fff; } .outbox-list { display: flex; flex-direction: column; } .outbox-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-divider); } .outbox-item-main { flex: 1 1 auto; min-width: 0; } .outbox-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .outbox-to { font-size: 12px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .outbox-subject { font-size: 13px; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .outbox-detail { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; } .outbox-item.outbox-failed .outbox-detail { color: var(--c-error); } .outbox-pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em; } .outbox-pill-sending, .outbox-pill-scheduled { background: var(--c-brand-light); color: var(--c-brand); } .outbox-pill-retrying { background: var(--c-warning); color: var(--c-warning-text); } .outbox-pill-failed { background: var(--c-error-bg); color: var(--c-error); } .outbox-item-actions { flex: 0 0 auto; display: flex; gap: 6px; } .outbox-btn { border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .outbox-btn:hover { border-color: var(--c-border-strong); background: var(--c-brand-tint); } .outbox-btn-retry { border-color: var(--c-brand); color: var(--c-brand); } .outbox-btn-retry:hover { background: var(--c-brand-light); } .outbox-btn-cancel:hover { border-color: var(--c-error); color: var(--c-error); background: var(--c-error-bg); } .outbox-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 56px; } .outbox-empty-icon { width: 40px; height: 40px; color: var(--c-text-muted); opacity: 0.5; margin-bottom: 8px; } .outbox-empty-title { font-size: 14px; font-weight: 600; color: var(--c-text); margin: 0; } .outbox-empty-sub { font-size: 12px; color: var(--c-text-muted); margin: 0; max-width: 340px; } /* Widen-the-search affordances below results (full text / every folder). */ .search-fulltext-row { padding: 12px 16px; text-align: center; border-top: 1px solid var(--c-divider); display: flex; flex-direction: column; align-items: center; gap: 8px; } .search-scope-note { font-size: 12px; color: var(--c-text-muted); } .search-fulltext-cta { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--c-brand); background: var(--c-brand-light); border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .search-fulltext-cta:hover { border-color: var(--c-brand); } .search-fulltext-cta .icon { width: 13px; height: 13px; } /* Reading pane */ .reading-pane { flex: 1; background: var(--c-bg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .reading-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c-text-subtle); padding: 40px; background: radial-gradient(640px 360px at 50% 38%, rgba(0, 120, 212, 0.05), transparent 70%), var(--c-bg); } .reading-empty-icon { width: 56px; height: 56px; color: var(--c-brand); opacity: 0.55; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(0, 120, 212, 0.12)); } .reading-empty-text { font-size: 14px; font-weight: 600; color: var(--c-text-secondary); margin-bottom: 4px; letter-spacing: -0.005em; } .reading-empty::after { content: 'Choose a conversation from the list to view it here.'; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; } .reading-content { flex: 1; overflow-y: auto; padding: 28px 36px 64px; position: relative; } .reading-actions { position: absolute; top: 22px; right: 28px; display: flex; gap: 4px; } .reading-action-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .reading-action-btn:hover { background: var(--c-hover); color: var(--c-text); } .reading-action-btn.danger:hover { background: var(--c-error-bg); color: var(--c-error); } .reading-action-unsub { width: auto; gap: 6px; padding: 0 12px; font-size: 12px; font-weight: 600; } .reading-action-unsub .reading-action-label { white-space: nowrap; } .reading-action-unsub:hover { background: var(--c-error-bg); color: var(--c-error); } .reading-subject { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 18px; padding-right: 160px; /* clears the reading-action cluster incl. the wider "Unsubscribe" pill */ color: var(--c-text); } .reading-meta { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; padding-bottom: 0; } .reading-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 13px; flex-shrink: 0; } .reading-meta-text { flex: 1; min-width: 0; } .reading-from-line { font-size: 13px; margin-bottom: 2px; } .reading-from-name { font-weight: 600; color: var(--c-text); } .reading-from-email { color: var(--c-text-muted); margin-left: 6px; font-weight: 400; } .reading-to-line { font-size: 12px; color: var(--c-text-muted); } .reading-to-line span { color: var(--c-text); } .reading-date { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; flex-shrink: 0; font-feature-settings: 'tnum'; } .reading-banner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--c-warning); color: var(--c-warning-text); border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 18px; } .reading-banner svg { color: var(--c-warning-text); flex-shrink: 0; } .reading-banner-msg { flex: 1; } .reading-body { line-height: 1.6; color: var(--c-text); word-wrap: break-word; overflow-wrap: break-word; font-size: 14px; margin-top: 12px; } .reading-body img { max-width: 100%; height: auto; } .reading-body a { color: var(--c-brand); text-decoration: underline; } .reading-body p { margin-bottom: 12px; } .reading-body blockquote { border-left: 3px solid var(--c-border); padding-left: 16px; color: var(--c-text-muted); margin: 12px 0; } .reading-body pre { font-family: var(--font-mono); background: var(--c-actionbar-bg); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 12px; } .reading-body table { border-collapse: collapse; margin: 12px 0; max-width: 100%; } .reading-body td, .reading-body th { padding: 6px 10px; border: 1px solid var(--c-divider); } /* Thread (conversation) */ .reading-thread-summary { font-size: 12px; color: var(--c-text-muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--c-divider); font-family: var(--font-mono); letter-spacing: 0.01em; } .reading-thread { display: flex; flex-direction: column; gap: 0; } /* Gmail-style thread: flat rows separated by a single hairline — no cards, borders, rounded corners, or shadows around each message. */ .thread-msg { border-bottom: 1px solid var(--c-divider); background: transparent; } .thread-msg:last-child { border-bottom: none; } .thread-msg-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; width: 100%; text-align: left; background: transparent; cursor: pointer; border-radius: 0; transition: background 0.1s; } /* Only a collapsed row highlights on hover; an open message's header doesn't. */ .thread-msg:not(.expanded) .thread-msg-header:hover { background: var(--c-hover); } .thread-msg-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 12px; flex-shrink: 0; } .thread-msg-meta { flex: 1; min-width: 0; } .thread-msg-from { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; } .thread-msg-from-name { font-weight: 600; color: var(--c-text); } .thread-msg-from-email { color: var(--c-text-muted); font-weight: 400; font-size: 12px; } .thread-msg-to { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-msg-to span { color: var(--c-text-secondary); } .thread-msg-date { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; flex-shrink: 0; font-feature-settings: 'tnum'; } /* Paperclip on a thread header — flags which message in the conversation carries an attachment, visible even while the message is collapsed. */ .thread-msg-attach { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; color: var(--c-text-muted); } .thread-msg-body { padding: 2px 0 20px 48px; /* align under the sender name (past the 36px avatar + gap) */ font-size: 14px; line-height: 1.6; color: var(--c-text); max-height: 0; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; /* Message HTML is sender-controlled, so pen it inside its own box. Paint containment makes this element the containing block for any positioned descendant AND its own stacking context, so a message cannot escape to cover the app's UI with a fake prompt — covering transform/absolute tricks as well as the position:fixed the sanitizer already neutralizes. Layout is unaffected (this is paint-only, and overflow was already hidden), so legitimate mail renders exactly as before. Ignored by browsers without support, which is why the sanitizer remains the primary defense rather than this. */ contain: paint; } .thread-msg.expanded .thread-msg-body { max-height: none; } .thread-msg-body img { max-width: 100%; height: auto; } .thread-msg-body a { color: var(--c-brand); text-decoration: underline; } .thread-msg-body p { margin-bottom: 12px; } .thread-msg-body blockquote { border-left: 3px solid var(--c-border); padding-left: 14px; color: var(--c-text-muted); margin: 10px 0; } .thread-msg-body pre { font-family: var(--font-mono); background: var(--c-actionbar-bg); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 12px; } .thread-folder-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; background: var(--c-brand-light); color: var(--c-brand-active); border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); } /* Phishing / sender-trust signals */ .trust-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 1px 6px 1px 4px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .trust-badge svg { width: 11px; height: 11px; } .trust-badge.trust-danger { background: var(--c-error-bg); color: var(--c-error); } .trust-badge.trust-warn { background: var(--c-warning); color: var(--c-warning-text); } .trust-banner { display: none; align-items: flex-start; gap: 10px; margin: 12px 16px 0; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; } .thread-msg.expanded .trust-banner { display: flex; } .trust-banner.trust-danger { background: var(--c-error-bg); color: var(--c-error); border: 1px solid var(--c-error); } .trust-banner.trust-warn { background: var(--c-warning); color: var(--c-warning-text); border: 1px solid var(--c-warning-text); } .trust-banner-icon { flex-shrink: 0; margin-top: 1px; } .trust-banner-title { font-weight: 700; } .trust-banner-reasons { margin: 5px 0 0; padding-left: 16px; list-style: disc; font-weight: 400; } .trust-banner-reasons li { margin: 2px 0; } /* Attachments inside a thread card */ .msg-attachments-wrap { /* Sits at the TOP of the message (Outlook/Gmail style), just under the header and above the body text — spacing only, no divider line. */ margin: 0 0 16px; } .msg-attachments-header { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 8px; } .msg-attachments-header .icon { color: var(--c-text-muted); } .msg-attachments { /* Compact chips that size to content and wrap — a single attachment no longer stretches across the whole message (Outlook-style). */ display: flex; flex-wrap: wrap; gap: 8px; } .msg-attachment { display: flex; align-items: center; gap: 9px; padding: 6px 9px; width: 240px; max-width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-bg); text-decoration: none; color: var(--c-text); transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; } .msg-attachment:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .msg-attachment-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; text-shadow: 0 1px 1px rgba(0,0,0,0.18); } .att-icon-pdf { background: #d1342f; } .att-icon-doc { background: #2a5599; } .att-icon-xls { background: #1f7244; } .att-icon-ppt { background: #d04423; } .att-icon-zip { background: #6f4ba0; } .att-icon-aud { background: #ad4673; } .att-icon-vid { background: #185fa3; } .att-icon-img { background: #5e8c2c; } .att-icon-txt { background: #4a4a4a; } .att-icon-generic { background: #6e6e6e; } .msg-attachment-meta { flex: 1; min-width: 0; } .msg-attachment-name { font-size: 12.5px; font-weight: 500; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-attachment-size { font-size: 11px; color: var(--c-text-muted); font-feature-settings: 'tnum'; margin-top: 1px; } .msg-attachment-action { color: var(--c-text-muted); flex-shrink: 0; transition: color 0.15s; } .msg-attachment:hover .msg-attachment-action { color: var(--c-brand); } .msg-attachment-dl { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-muted); border-radius: 50%; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .msg-attachment-dl:hover { background: var(--c-brand-light); color: var(--c-brand); } .msg-attachment { cursor: pointer; border: 1px solid var(--c-border); background: var(--c-bg); font: inherit; text-align: left; } .msg-attachment:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; } /* Folder context menu */ .ctx-menu { position: fixed; z-index: 400; min-width: 200px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px; font-size: 13px; } .ctx-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; color: var(--c-text); cursor: pointer; text-align: left; font-family: inherit; } .ctx-item:hover { background: var(--c-hover); } .ctx-item .icon { color: var(--c-text-muted); } .ctx-item:hover .icon { color: var(--c-brand); } .ctx-item.ctx-item-danger { color: var(--c-error); } .ctx-item.ctx-item-danger:hover { background: var(--c-error-bg); } .ctx-item.ctx-item-danger .icon { color: var(--c-error); } .ctx-divider { height: 1px; background: var(--c-divider); margin: 4px 6px; } /* Multi-select: checkbox replaces avatar on hover or when any selection is active */ .msg-select { position: relative; width: 32px; height: 32px; flex-shrink: 0; margin-top: 1px; background: transparent; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .msg-select .msg-avatar { margin-top: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); transition: opacity 0.12s; } .msg-select-check { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg); color: var(--c-brand); border: 2px solid var(--c-border-strong); padding: 6px; opacity: 0; transform: scale(0.85); transition: opacity 0.12s, transform 0.12s, border-color 0.12s, background 0.12s; pointer-events: none; } .msg-item:hover .msg-select-check, .msg-list-selecting .msg-select-check { opacity: 1; transform: scale(1); } .msg-item:hover .msg-avatar { opacity: 0; } .msg-list-selecting .msg-avatar { opacity: 0; } .msg-item.selected .msg-select-check { opacity: 1; transform: scale(1); background: var(--c-brand); border-color: var(--c-brand); color: white; } .msg-item.selected .msg-avatar { opacity: 0; } .msg-item.selected { background: var(--c-brand-light); } .msg-item.selected:hover { background: var(--c-brand-light); } .msg-item.selected.active::before { background: var(--c-brand-active); } /* Snooze popover */ .snooze-menu { position: fixed; z-index: 450; width: 240px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; font-size: 13px; } .snooze-menu-header { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); padding: 8px 10px 6px; } .snooze-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; font-family: inherit; } .snooze-item:hover { background: var(--c-hover); } .snooze-item-label { font-size: 13px; color: var(--c-text); font-weight: 500; } .snooze-item-sub { font-size: 11px; color: var(--c-text-muted); font-feature-settings: 'tnum'; } .snooze-divider { height: 1px; background: var(--c-divider); margin: 4px 6px; } .snooze-custom { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; } .snooze-custom .snooze-item-label { font-size: 11px; color: var(--c-text-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .snooze-custom-input { border: 1px solid var(--c-border); border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; width: 100%; } .snooze-custom-input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.14); } .snooze-custom-go { background: var(--c-brand); color: white; border: 0; padding: 7px 0; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 12px; } .snooze-custom-go:hover { background: var(--c-brand-hover); } /* Drag-and-drop messages → folders */ body.dragging-msg .msg-item { cursor: grabbing; } body.dragging-msg .folder-item:not([data-folder="' + state.currentFolder + '"]):hover { background: var(--c-hover); } .folder-item.drop-target { background: var(--c-brand-light) !important; outline: 2px dashed var(--c-brand); outline-offset: -2px; color: var(--c-brand-active); } .folder-item.drop-target .folder-icon { color: var(--c-brand); } .folder-item.drop-target::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .msg-item[draggable="true"] { -webkit-user-drag: element; } /* Selection bar (replaces filter chips when selection is active) */ .list-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--c-divider); background: var(--c-brand-light); flex-shrink: 0; } .list-selection.hidden { display: none; } .list-selection-all { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--c-brand-active); cursor: pointer; user-select: none; } .list-selection-all input[type="checkbox"] { accent-color: var(--c-brand); width: 16px; height: 16px; cursor: pointer; } .list-selection-count { letter-spacing: 0.005em; } .list-selection-close { background: transparent; border: 0; color: var(--c-brand-active); font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s; } .list-selection-close:hover { background: rgba(0, 120, 212, 0.12); } /* Attachment preview modal */ .attach-preview { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; } .attach-preview.hidden { display: none; } .attach-preview-backdrop { position: absolute; inset: 0; background: rgba(15, 17, 22, 0.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .attach-preview-panel { position: relative; z-index: 1; width: min(1100px, calc(100vw - 40px)); height: min(800px, calc(100vh - 40px)); background: var(--c-bg); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; overflow: hidden; } .attach-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--c-divider); background: var(--c-bg); } .attach-preview-title { min-width: 0; flex: 1; } .attach-preview-name { display: block; font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attach-preview-meta { display: block; font-size: 11px; color: var(--c-text-muted); margin-top: 2px; font-feature-settings: 'tnum'; } .attach-preview-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .attach-preview-close { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .attach-preview-close:hover { background: var(--c-hover); color: var(--c-text); } .attach-preview-body { flex: 1; display: flex; align-items: center; justify-content: center; background: #1e2024; overflow: auto; } .attach-preview-body iframe { width: 100%; height: 100%; border: 0; background: white; } .attach-preview-body img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; } .attach-preview-body.attach-preview-fallback { background: var(--c-actionbar-bg); color: var(--c-text); } .attach-preview-fallback-inner { text-align: center; padding: 40px; max-width: 480px; } .attach-preview-fallback-inner h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; word-break: break-word; } .attach-preview-fallback-inner p { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; } .attach-preview-error { margin-top: 10px; font-size: 12px; color: var(--c-error); font-family: var(--font-mono); } /* Spreadsheet preview */ .attach-preview-body.attach-preview-spreadsheet { background: #ffffff; align-items: stretch; justify-content: stretch; flex-direction: column; padding: 0; color: var(--c-text); } .attach-preview-loading { margin: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text-muted); } .ssheet-tabs { display: flex; gap: 2px; padding: 6px 14px 0; background: var(--c-actionbar-bg); border-bottom: 1px solid var(--c-border); overflow-x: auto; flex-shrink: 0; } .ssheet-tab { font-size: 12px; padding: 8px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--c-text-muted); cursor: pointer; white-space: nowrap; border-radius: 4px 4px 0 0; transition: color 0.15s, background 0.15s, border-color 0.15s; font-weight: 500; } .ssheet-tab:hover { color: var(--c-text); background: var(--c-hover); } .ssheet-tab.active { color: var(--c-brand); border-bottom-color: var(--c-brand); background: white; } .ssheet-content { flex: 1; overflow: auto; padding: 14px 18px; background: white; } .ssheet-content table { border-collapse: collapse; font-size: 12px; font-family: var(--font-ui); font-feature-settings: 'tnum'; background: white; } .ssheet-content th, .ssheet-content td { padding: 5px 10px; border: 1px solid var(--c-border); white-space: nowrap; text-align: left; vertical-align: middle; min-width: 64px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; } .ssheet-content tr:first-child td, .ssheet-content thead th { background: var(--c-actionbar-bg); font-weight: 600; color: var(--c-text-secondary); position: sticky; top: 0; z-index: 1; } .ssheet-content tr:hover td { background: rgba(0, 120, 212, 0.04); } /* Document (.docx) preview — rendered by docx-preview */ .attach-preview-body.attach-preview-document { background: var(--c-page-bg); align-items: stretch; justify-content: stretch; flex-direction: column; padding: 0; color: var(--c-text); overflow: auto; } .docx-render { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 24px 0; } /* docx-preview's wrapper layout */ .docx-wrapper { background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 16px; } .docx-wrapper > section.docx { background: white !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.10) !important; border-radius: 2px; margin: 0 !important; } .docx img { max-width: 100%; height: auto; } .docx table { border-collapse: collapse; } @media (max-width: 720px) { .docx-wrapper > section.docx { transform: scale(0.85); transform-origin: top center; } } /* Image attachment — render a thumbnail at the top of the card */ /* Image attachments use the same compact row chip, with a small thumbnail in place of the file-type icon (click opens the full-size preview). */ .msg-attachment.image .msg-attachment-thumb { width: 28px; height: 28px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--c-actionbar-bg); flex-shrink: 0; } /* Gmail-style trimmed-quote toggle: a compact "···" chip that expands the quoted email trail inline. No bulky button, no full-width divider. */ .email-quote-trim { margin-top: 8px; } .email-quote-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 18px; padding: 0 9px; background: var(--c-actionbar-bg); border: 1px solid var(--c-border); border-radius: 999px; cursor: pointer; vertical-align: middle; line-height: 0; transition: background 0.12s, border-color 0.12s; } .email-quote-toggle:hover { background: var(--c-hover); border-color: var(--c-border-strong); } .email-quote-toggle.open { background: var(--c-hover); } .email-quote-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-text-muted); } .email-quote-toggle:hover .email-quote-dot { background: var(--c-text); } /* Expanded trail reads as a quote: subtle left bar, muted text. */ .email-quote-content { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--c-border); color: var(--c-text-muted); } .email-quote-content blockquote { margin-left: 0; } /* Compose modal */ .compose-modal { position: fixed; bottom: 24px; right: 24px; width: 600px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); background: var(--c-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: none; flex-direction: column; z-index: 200; transform: translateY(20px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; overflow: hidden; border: 1px solid var(--c-border); } .compose-modal.open { display: flex; transform: translateY(0); opacity: 1; } .compose-header { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--c-brand); color: white; } .compose-title { font-size: 13px; font-weight: 500; } .compose-close { width: 26px; height: 26px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; } .compose-close:hover { background: rgba(255, 255, 255, 0.18); color: white; } .compose-header-actions { display: flex; align-items: center; gap: 2px; } .compose-hdr-btn { width: 26px; height: 26px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; } .compose-hdr-btn:hover { background: rgba(255, 255, 255, 0.18); color: white; } /* Minimized — collapse to just the header bar (Gmail dock). */ .compose-modal.compose-minimized { max-height: none; } .compose-modal.compose-minimized .compose-fields, .compose-modal.compose-minimized .compose-toolbar, .compose-modal.compose-minimized .compose-body, .compose-modal.compose-minimized .compose-attachments, .compose-modal.compose-minimized .compose-footer, .compose-modal.compose-minimized .compose-drop-overlay { display: none; } .compose-modal.compose-minimized .compose-title { cursor: pointer; } /* Expanded — large centered dialog. */ .compose-modal.compose-expanded { top: 50%; left: 50%; right: auto; bottom: auto; width: 850px; max-width: calc(100vw - 80px); height: 88vh; max-height: calc(100vh - 60px); transform: translate(-50%, -50%); } .compose-modal.compose-expanded.open { transform: translate(-50%, -50%); } /* Expanded window: the message text area grows to fill the height (instead of capping at 360px), so there's no empty gap and Send sits at the bottom. */ .compose-modal.compose-expanded .compose-body { flex: 1 1 auto; min-height: 0; max-height: none; } .compose-fields { padding: 4px 18px 0; } .compose-row { display: flex; align-items: center; border-bottom: 1px solid var(--c-divider); padding: 4px 0; position: relative; } .compose-row-label { width: 50px; font-size: 12px; color: var(--c-text-muted); font-weight: 500; } .compose-row-input { flex: 1; border: none; outline: none; padding: 8px 4px; font-size: 13px; background: transparent; } /* "Bcc" reveal link at the end of the Cc row (Gmail/Outlook pattern) */ .compose-row-toggle { flex-shrink: 0; border: none; background: transparent; padding: 4px 8px; font-size: 12px; font-weight: 500; color: var(--c-text-muted); border-radius: 4px; cursor: pointer; transition: color 0.15s, background 0.15s; } .compose-row-toggle:hover { color: var(--c-brand); background: var(--c-hover); } /* Recipient autocomplete (To / Cc). left/top/width are set inline in JS to track the focused input; the rest is theme-driven via CSS variables. */ .compose-autocomplete { position: absolute; z-index: 50; background: var(--c-list-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto; padding: 4px; } .ac-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; line-height: 1.3; overflow: hidden; } .ac-item:hover, .ac-item.active { background: var(--c-brand-light); } .ac-item-name { color: var(--c-text); font-weight: 500; flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-item-email { color: var(--c-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compose-toolbar { padding: 8px 18px; border-bottom: 1px solid var(--c-divider); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; row-gap: 4px; } .compose-tool-divider { width: 1px; height: 18px; background: var(--c-border); margin: 0 6px; } /* Text-colour tool: an "A" with a colour bar, with a real (but invisible) native colour input overlaid on top so a click opens the OS picker directly. */ .compose-color-wrap { position: relative; display: inline-flex; } .compose-tool-color { position: relative; font-weight: 700; font-size: 13px; } .compose-color-bar { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 3px; border-radius: 2px; background: #d13438; } .compose-color-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .compose-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px; border-top: 1px solid var(--c-divider); } .compose-attachments:empty { display: none; } .attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; background: var(--c-actionbar-bg); border: 1px solid var(--c-border); border-radius: 999px; font-size: 12px; max-width: 280px; } .attach-chip .icon { color: var(--c-text-muted); flex-shrink: 0; } .attach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .attach-size { color: var(--c-text-muted); font-size: 11px; flex-shrink: 0; font-feature-settings: 'tnum'; } .attach-remove { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: transparent; color: var(--c-text-muted); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .attach-remove:hover { background: var(--c-error-bg); color: var(--c-error); } .compose-drop-overlay { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 5; } .compose-modal.drag-active .compose-drop-overlay { display: flex; align-items: center; justify-content: center; background: rgba(0, 120, 212, 0.08); border: 2px dashed var(--c-brand); border-radius: var(--radius-lg); } .compose-drop-overlay-inner { background: var(--c-brand); color: white; padding: 10px 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; pointer-events: none; } .compose-tool { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); font-size: 12px; font-weight: 600; } .compose-tool:hover { background: var(--c-hover); color: var(--c-text); } .compose-body { padding: 14px 18px; outline: none; min-height: 220px; max-height: 360px; overflow-y: auto; font-size: 13px; line-height: 1.6; } .compose-body:empty::before { content: attr(data-placeholder); color: var(--c-text-subtle); pointer-events: none; } .compose-footer { padding: 12px 18px; border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .compose-status { font-size: 12px; color: var(--c-text-muted); flex: 1; } .compose-discard { width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .compose-discard:hover { background: var(--c-error-bg); color: var(--c-error); } .compose-status.success { color: var(--c-success); } .compose-status.error { color: var(--c-error); } .btn-send { background: var(--c-brand); color: white; padding: 8px 22px; border-radius: var(--radius-md); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .btn-send:hover:not(:disabled) { background: var(--c-brand-hover); } .btn-send:disabled { background: #a19f9d; cursor: not-allowed; } /* Move-to dropdown */ .dropdown { position: fixed; min-width: 220px; max-height: 360px; overflow-y: auto; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: 200; padding: 4px; } .dropdown.open { display: block; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 13px; width: 100%; text-align: left; border-radius: var(--radius-sm); color: var(--c-text); } .dropdown-item:hover { background: var(--c-hover); } .dropdown-item .icon { color: var(--c-text-muted); } .ab-btn-wrap { position: relative; } /* === Settings page === */ .settings-page { background: var(--c-page-bg); min-height: 100vh; } .settings-topbar { height: var(--topbar-h); background: var(--c-brand); background: linear-gradient(135deg, color-mix(in srgb, var(--c-brand), #fff 8%) 0%, color-mix(in srgb, var(--c-brand), #000 14%) 100%); box-shadow: var(--shadow-topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: white; position: sticky; top: 0; z-index: 5; } .settings-back { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 500; color: white; transition: background 0.15s; } .settings-back:hover { background: rgba(255, 255, 255, 0.28); } .settings-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .settings-main { display: flex; max-width: 1100px; margin: 0 auto; padding: 28px 24px 80px; gap: 28px; } .settings-nav { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; align-self: flex-start; } .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--c-text-secondary); transition: background 0.15s, color 0.15s; } .settings-nav-item:hover { background: var(--c-hover); color: var(--c-text); } .settings-nav-item.active { background: var(--c-bg); color: var(--c-brand); box-shadow: var(--shadow-sm); } .settings-nav-item .icon { color: var(--c-text-muted); } .settings-nav-item.active .icon { color: var(--c-brand); } .settings-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 36px; } .settings-section { scroll-margin-top: 70px; } .settings-section-header { margin-bottom: 14px; } .settings-section h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 4px; } .settings-section-desc { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; max-width: 640px; } .settings-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; } .settings-row { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--c-divider); gap: 16px; } .settings-row:last-child { border-bottom: none; } .settings-row-label { flex: 0 0 160px; font-size: 12px; color: var(--c-text-muted); font-weight: 500; letter-spacing: 0.01em; } .settings-row-value { flex: 1; font-size: 13px; color: var(--c-text); word-break: break-all; } .settings-row-value.mono { font-family: var(--font-mono); font-size: 12px; } .pill-ok, .pill-warn { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 6px; font-family: var(--font-mono); } .pill-ok { background: var(--c-success-bg); color: var(--c-success); } .pill-warn { background: var(--c-warning); color: var(--c-warning-text); } .signature-toolbar { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--c-divider); background: var(--c-actionbar-bg); } .sig-tool { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); font-size: 13px; transition: background 0.15s, color 0.15s; } .sig-tool:hover { background: var(--c-hover); color: var(--c-text); } .sig-tool-divider { width: 1px; height: 18px; background: var(--c-border); margin: 0 6px; } .signature-editor { padding: 18px; min-height: 160px; max-height: 420px; overflow-y: auto; font-size: 14px; line-height: 1.6; outline: none; transition: background 0.15s, box-shadow 0.15s; } .signature-editor:focus { background: #fcfcfc; } .signature-editor:empty::before { content: attr(data-placeholder); color: var(--c-text-subtle); pointer-events: none; } .signature-editor.drag-active { background: var(--c-brand-tint); box-shadow: inset 0 0 0 2px var(--c-brand); } .signature-editor img { max-width: 100%; height: auto; border: 0; vertical-align: middle; cursor: pointer; } .signature-editor img.img-selected { outline: 2px solid var(--c-brand); outline-offset: 2px; } .img-resize-overlay { position: fixed; pointer-events: none; z-index: 1000; } .img-resize-overlay .resize-handle { position: absolute; width: 12px; height: 12px; background: white; border: 2px solid var(--c-brand); border-radius: 2px; pointer-events: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .img-resize-overlay .resize-nw { top: -7px; left: -7px; cursor: nw-resize; } .img-resize-overlay .resize-ne { top: -7px; right: -7px; cursor: ne-resize; } .img-resize-overlay .resize-sw { bottom: -7px; left: -7px; cursor: sw-resize; } .img-resize-overlay .resize-se { bottom: -7px; right: -7px; cursor: se-resize; } .signature-hint { font-size: 12px; color: var(--c-text-muted); margin-top: 8px; line-height: 1.5; font-style: italic; } .settings-toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .settings-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-size: 13px; user-select: none; } .settings-toggle input { display: none; } .toggle-track { width: 32px; height: 18px; background: var(--c-border-strong); border-radius: 999px; position: relative; flex-shrink: 0; transition: background 0.18s; } .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .settings-toggle input:checked + .toggle-track { background: var(--c-brand); } .settings-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); } .toggle-label { color: var(--c-text); } .settings-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; } .settings-actions .btn { width: auto; padding: 9px 18px; } .settings-status { font-size: 12px; color: var(--c-text-muted); font-feature-settings: 'tnum'; } .settings-status.success { color: var(--c-success); font-weight: 500; } .settings-status.error { color: var(--c-error); font-weight: 500; } /* Blocked remote images: notice bar above the message body + image placeholder. */ .img-block-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-actionbar-bg); font-size: 12px; color: var(--c-text-secondary); } .img-block-bar .icon { flex: 0 0 auto; color: var(--c-text-muted); } .img-block-text { flex: 1 1 220px; min-width: 0; } .img-block-load { flex: 0 0 auto; border: 1px solid var(--c-brand); background: transparent; color: var(--c-brand); border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .img-block-load:hover { background: var(--c-brand); color: #fff; } img.img-blocked { border: 1px dashed var(--c-border-strong); border-radius: 4px; background: var(--c-actionbar-bg); min-width: 12px; min-height: 12px; } /* Add/edit form inside the Contacts settings card. */ .contact-form { padding: 14px 16px; border-bottom: 1px solid var(--c-divider); background: var(--c-actionbar-bg); } .contact-form-row { display: flex; gap: 12px; flex-wrap: wrap; } .contact-form-row .cal-field { flex: 1 1 220px; min-width: 0; } .contact-form-actions { display: flex; gap: 8px; margin-top: 12px; } /* Prominent alert inside the settings page (e.g. private-data exposure). */ .settings-alert { border: 1px solid var(--c-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; font-size: 13px; line-height: 1.55; } .settings-alert p { margin: 8px 0 0; } .settings-alert pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--c-actionbar-bg); overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .settings-alert code { font-family: var(--font-mono); font-size: 12px; } .settings-alert-danger { border-color: var(--c-error); background: var(--c-error-bg); color: var(--c-text); } .settings-alert-danger strong { color: var(--c-error); } /* Inline editable field inside a settings row (e.g. Display name). */ .settings-inline-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .settings-inline-input { flex: 1 1 220px; min-width: 150px; max-width: 340px; border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; background: var(--c-bg); color: var(--c-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .settings-inline-input:hover { border-color: var(--c-border-strong); } .settings-inline-input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.14); } .settings-inline-save { flex: 0 0 auto; border: 1px solid var(--c-brand); background: var(--c-brand); color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, opacity 0.15s; } .settings-inline-save:hover:not(:disabled) { background: var(--c-brand-hover); } .settings-inline-save:disabled { opacity: 0.6; cursor: default; } .settings-inline-hint { margin: 7px 0 0; font-size: 12px; color: var(--c-text-muted); } .settings-hint { font-size: 12px; color: var(--c-text-muted); margin-top: 12px; font-style: italic; } /* Logo settings card */ .logo-card { padding: 0; } .logo-preview { min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 24px; background: repeating-conic-gradient(#f7f7f8 0% 25%, white 0% 50%) 50% / 18px 18px; border-bottom: 1px solid var(--c-divider); transition: background-color 0.15s, box-shadow 0.15s; position: relative; } .logo-preview img { max-height: 80px; max-width: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)); } .logo-preview.drag-active { box-shadow: inset 0 0 0 2px var(--c-brand); } .logo-empty { font-size: 13px; color: var(--c-text-muted); font-style: italic; } .logo-actions { display: flex; gap: 8px; padding: 12px 14px; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; background: var(--c-actionbar-bg); color: var(--c-text); border: 1px solid var(--c-border); transition: background 0.15s, border-color 0.15s; } .btn-ghost:hover { background: var(--c-hover); border-color: var(--c-border-strong); } .btn-ghost.danger { color: var(--c-error); border-color: rgba(209,52,56,0.2); } .btn-ghost.danger:hover { background: var(--c-error-bg); border-color: rgba(209,52,56,0.35); } /* Email signature wrapper inside reading & compose */ .email-signature { font-size: 13px; color: var(--c-text-secondary); line-height: 1.55; padding-top: 4px; } /* Footer */ .app-footer { position: fixed; bottom: 8px; right: 14px; font-size: 10px; color: var(--c-text-muted); font-family: var(--font-mono); z-index: 5; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 11px; border-radius: 999px; letter-spacing: 0.02em; /* The pill floats over the scrolling page, so whatever scrolls under it was having its clicks swallowed — on Settings → Calendars that meant a feed's Show toggle and its refresh/delete buttons became dead while the row sat behind the pill. It is a copyright line with nothing to click, so it opts out of hit-testing entirely; the rule below keeps any link that is ever added to it clickable. */ pointer-events: none; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .app-footer a { color: var(--c-brand); font-weight: 500; pointer-events: auto; } .app-footer a:hover { text-decoration: underline; } .app-footer strong { color: var(--c-text-secondary); font-weight: 600; } /* Dark mode: the footer pill hardcodes a light background above — re-scope it so it isn't a bright white chip on the dark UI. */ html.theme-dark .app-footer { background: rgba(32, 36, 43, 0.88); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Utilities */ .spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } .spinner.dark { border-color: var(--c-border); border-top-color: var(--c-brand); } @keyframes spin { to { transform: rotate(360deg); } } .icon { width: 16px; height: 16px; flex-shrink: 0; } .hidden { display: none !important; } /* Scrollbar polish */ .list-items::-webkit-scrollbar, .reading-content::-webkit-scrollbar, .compose-body::-webkit-scrollbar, .folder-list::-webkit-scrollbar, .dropdown::-webkit-scrollbar { width: 10px; height: 10px; } .list-items::-webkit-scrollbar-track, .reading-content::-webkit-scrollbar-track, .compose-body::-webkit-scrollbar-track, .folder-list::-webkit-scrollbar-track, .dropdown::-webkit-scrollbar-track { background: transparent; } .list-items::-webkit-scrollbar-thumb, .reading-content::-webkit-scrollbar-thumb, .compose-body::-webkit-scrollbar-thumb, .folder-list::-webkit-scrollbar-thumb, .dropdown::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .list-items::-webkit-scrollbar-thumb:hover, .reading-content::-webkit-scrollbar-thumb:hover, .compose-body::-webkit-scrollbar-thumb:hover, .folder-list::-webkit-scrollbar-thumb:hover, .dropdown::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.24); background-clip: padding-box; } /* === Print === */ @media print { /* Hide everything except the open conversation */ .topbar, .actionbar, .folder-pane, .list-pane, .reading-actions, .reading-thread-summary, .app-footer, .compose-modal, .list-filters, .img-resize-overlay, .dropdown { display: none !important; } html, body { background: white !important; color: black !important; } .app-shell { height: auto !important; overflow: visible !important; } .app-main { display: block !important; height: auto !important; overflow: visible !important; } .reading-pane { flex: none !important; width: 100% !important; display: block !important; overflow: visible !important; } .reading-empty { display: none !important; } .reading-content { padding: 0 !important; overflow: visible !important; } .reading-subject { font-size: 16pt !important; color: black !important; margin-bottom: 16pt !important; padding-right: 0 !important; page-break-after: avoid; } .reading-thread { gap: 12pt !important; } .thread-msg { border: 1px solid #aaa !important; box-shadow: none !important; page-break-inside: avoid; } /* Force every card open and visible */ .thread-msg .thread-msg-body { display: block !important; max-height: none !important; color: black !important; font-size: 11pt !important; line-height: 1.45 !important; } .thread-msg-header { background: #f3f3f3 !important; cursor: default !important; border-bottom: 1px solid #ccc !important; } .thread-msg-from-name { color: black !important; } .thread-msg-from-email, .thread-msg-to, .thread-msg-date { color: #333 !important; } .thread-folder-badge { background: #ddd !important; color: #333 !important; border: 1px solid #bbb; } .thread-msg-avatar { background: #555 !important; color: white !important; } .thread-msg-body img { max-width: 100% !important; height: auto !important; } .thread-msg-body a { color: #1a55a8 !important; text-decoration: underline; } /* Hide quoted-content wrappers — earlier cards in the thread already show that content on their own pages, so reprinting the quote here just duplicates it. */ .email-quote-trim { display: none !important; } /* Attachments aren't relevant to a printout of the conversation. */ .msg-attachments-wrap { display: none !important; } /* Prevent orphaned headers */ .thread-msg + .thread-msg { page-break-before: auto; } @page { margin: 16mm; } } /* Responsive */ /* Mobile-only "back" button on reading pane (hidden on desktop) */ .reading-back { display: none; align-items: center; gap: 6px; position: absolute; top: 12px; left: 12px; z-index: 5; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 12px; font-weight: 600; color: var(--c-text); cursor: pointer; box-shadow: var(--shadow-sm); } .reading-back:hover { background: var(--c-hover); } .reading-back .icon { color: var(--c-text-muted); } @media (max-width: 1180px) { .folder-pane { width: 220px; } .list-pane { width: 340px; } .topbar-search { max-width: 380px; } .topbar-logo-slot { max-width: 220px; } } @media (max-width: 960px) { .folder-pane { width: 200px; } .list-pane { width: 300px; } } @media (max-width: 900px) { .topbar-logo-text { display: none; } .topbar-logo-slot { max-width: 60px; } .topbar-logo { max-width: 60px; } } /* Mobile drawer for the folder pane: < 820px the folder pane slides in over the list pane instead of taking layout space. */ @media (max-width: 820px) { .folder-pane { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: 280px; max-width: 88vw; z-index: 40; transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18); } .app-main.mobile-folders-open .folder-pane { transform: translateX(0); } .app-main.mobile-folders-open::before { content: ''; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15, 23, 42, 0.42); z-index: 35; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .app-main.folders-collapsed .folder-pane { transform: translateX(-100%); } } /* Single-column on phones: list pane is full width; reading pane is a sliding overlay activated on row click. */ @media (max-width: 720px) { body { font-size: 14px; } .topbar-search { max-width: none; flex: 1; margin: 0 8px; } /* Settings page: the base layout is a fixed 220px sticky sidebar + flex row, which crushes the form on phones. Stack it and turn the nav into a horizontal scroller. (This @media comes after the base rules so it wins.) */ .settings-main { flex-direction: column; padding: 16px 14px 60px; gap: 16px; } .settings-nav { width: auto; position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .settings-nav-item { white-space: nowrap; flex-shrink: 0; } .topbar-user .topbar-user-name { display: none; } .ab-btn span { display: none; } .ab-btn.ab-primary span { display: inline; } .ab-btn { padding: 0 10px; height: 38px; min-width: 38px; } .ab-btn.ab-icon-only { width: 38px; } .ab-divider { margin: 0 4px; } .list-pane { width: 100%; max-width: none; flex: 1; } .list-folder-name { padding: 12px 16px 6px; font-size: 12px; } .reading-pane { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); background: var(--c-bg); } .reading-pane.mobile-active { transform: translateX(0); } .reading-back { display: inline-flex; } .reading-content { padding-top: 56px; padding-left: 18px; padding-right: 18px; } .reading-actions { right: 12px; top: 12px; } .reading-subject { padding-right: 0; font-size: 16px; line-height: 1.3; } .msg-attachment { width: 100%; } /* full-width chips on phones */ .thread-msg-header { padding: 12px 0; gap: 10px; } .thread-msg-body { padding: 2px 0 16px 46px; font-size: 13.5px; } /* Compose modal: full-screen on phones */ .compose-modal { inset: 0; width: 100%; height: 100%; border-radius: 0; max-width: none; max-height: none; } .compose-modal.open { display: flex; flex-direction: column; } .compose-body { flex: 1; min-height: 0; } /* Phone: compose is already full-screen — the dock/minimize/expand controls don't apply, so hide them and neutralize those states. */ .compose-header-actions .compose-hdr-btn { display: none; } .compose-modal.compose-expanded, .compose-modal.compose-minimized { inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; transform: none; } .compose-modal.compose-minimized .compose-fields, .compose-modal.compose-minimized .compose-toolbar, .compose-modal.compose-minimized .compose-body, .compose-modal.compose-minimized .compose-footer { display: flex; } .compose-attachments { max-height: 25vh; overflow: auto; } /* Filter chips wrap nicely on small screens */ .list-filters { padding: 6px 10px; gap: 4px; } .list-filter-chip { padding: 5px 9px; font-size: 11.5px; } /* Tap-target minimum for icon buttons */ .reading-action-btn, .topbar-icon-light, .pager-btn, .ab-btn.ab-icon-only { min-width: 38px; min-height: 38px; } /* Hide the dense calendar widget on phones — sidebar is a drawer anyway */ .cal-pane { display: none; } /* Hide the floating footer; it's noise on phones */ .app-footer { display: none; } } /* Very narrow phones */ @media (max-width: 380px) { .ab-btn.ab-primary span { display: none; } .ab-btn.ab-primary { width: 38px; padding: 0; justify-content: center; } .topbar-search { font-size: 12px; } } /* ============================================================ Calendar — sidebar widget ============================================================ */ .folder-pane .folder-list { flex: 1 1 0; min-height: 80px; } .cal-pane { flex-shrink: 0; border-top: 1px solid var(--c-border); background: var(--c-actionbar-bg); display: flex; flex-direction: column; max-height: 360px; } .cal-pane.collapsed .cal-pane-body { display: none; } .cal-pane.collapsed { max-height: none; } .cal-pane.collapsed .cal-pane-chev { transform: rotate(-90deg); } .cal-pane-header { display: flex; align-items: center; padding: 8px 14px 6px; gap: 6px; } .cal-pane-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); cursor: pointer; padding: 4px 4px 4px 0; flex: 1; text-align: left; font-family: var(--font-mono); } .cal-pane-toggle:hover { color: var(--c-text); } .cal-pane-toggle .icon { color: var(--c-text-muted); } .cal-pane-chev { transition: transform 0.15s; } .cal-pane-add { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .cal-pane-add:hover { background: var(--c-hover); color: var(--c-brand); } .cal-pane-body { display: flex; flex-direction: column; overflow: hidden; } .cal-mini { padding: 0 12px 8px; } .cal-mini-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .cal-mini-month { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--c-text); background: transparent; border: 0; cursor: pointer; padding: 4px 0; border-radius: 4px; letter-spacing: -0.005em; } .cal-mini-month:hover { background: var(--c-hover); } .cal-mini-navbtn { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 4px; color: var(--c-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cal-mini-navbtn:hover { background: var(--c-hover); color: var(--c-text); } .cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .cal-mini-cell { height: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; border-radius: 4px; position: relative; background: transparent; border: 0; font-family: inherit; color: var(--c-text); cursor: default; padding: 0; } .cal-mini-head { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--c-text-subtle); text-transform: uppercase; height: 18px; } .cal-mini-empty { background: transparent; cursor: default; } .cal-mini-day { cursor: pointer; transition: background 0.1s, color 0.1s; } .cal-mini-day:hover { background: var(--c-hover); } .cal-mini-day.today .cal-mini-num { background: var(--c-brand); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: 600; } .cal-mini-day.selected:not(.today) { background: var(--c-brand-light); color: var(--c-brand-active); font-weight: 600; } .cal-mini-day.selected.today { box-shadow: 0 0 0 2px var(--c-brand-light); } .cal-mini-num { display: flex; align-items: center; justify-content: center; font-feature-settings: 'tnum'; line-height: 1; } .cal-mini-dots { display: flex; gap: 2px; margin-top: 1px; height: 4px; } .cal-mini-dot { width: 4px; height: 4px; border-radius: 50%; } .cal-agenda { border-top: 1px solid var(--c-divider); background: var(--c-bg); display: flex; flex-direction: column; flex: 1; min-height: 70px; max-height: 200px; overflow: hidden; } .cal-agenda-header { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; color: var(--c-text-secondary); letter-spacing: 0.005em; } .cal-agenda-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; } .cal-agenda-empty { padding: 12px 14px; font-size: 11px; color: var(--c-text-muted); /* empty-state is real content — keep it above the AA line */ text-align: center; font-style: italic; } .cal-ev { display: flex; align-items: stretch; gap: 8px; padding: 6px 6px 6px 0; border-radius: 6px; cursor: pointer; transition: background 0.1s; } .cal-ev:hover { background: var(--c-hover); } .cal-ev-bar { width: 3px; border-radius: 999px; background: var(--c-brand); flex-shrink: 0; } .cal-ev-body { flex: 1; min-width: 0; } .cal-ev-time { font-size: 10px; color: var(--c-text-muted); font-feature-settings: 'tnum'; font-weight: 500; letter-spacing: 0.01em; } .cal-ev-title { font-size: 12px; font-weight: 500; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .cal-ev-loc, .cal-ev-feed { font-size: 10px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .cal-ev-feed { font-style: italic; } /* ============================================================ Calendar — modal ============================================================ */ .cal-modal { position: fixed; inset: 0; /* Above the compose panel (200) + account modal (300) so the event editor / "Filter like this" modal never renders behind an open compose window. */ z-index: 600; display: flex; align-items: center; justify-content: center; padding: 24px; } .cal-modal.hidden { display: none; } .cal-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .cal-modal-panel { position: relative; width: 100%; max-width: 460px; background: var(--c-bg); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; animation: cal-modal-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes cal-modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cal-modal-header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--c-divider); } .cal-modal-title { font-size: 14px; font-weight: 600; flex: 1; } .cal-modal-close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; } .cal-modal-close:hover { background: var(--c-hover); color: var(--c-text); } .cal-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .cal-field { display: flex; flex-direction: column; gap: 4px; } .cal-field-label { font-size: 11px; font-weight: 600; color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .cal-field-input { border: 1px solid var(--c-border); border-radius: 8px; padding: 9px 11px; font-size: 13px; background: var(--c-bg); color: var(--c-text); font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .cal-field-input:hover:not(:disabled) { border-color: var(--c-border-strong); } .cal-field-input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.14); } .cal-field-input:disabled { background: var(--c-actionbar-bg); color: var(--c-text-secondary); cursor: not-allowed; } .cal-field-input[type="datetime-local"] { font-family: var(--font-ui); } textarea.cal-field-input { resize: vertical; min-height: 60px; } .cal-field-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; } .cal-field-check input { accent-color: var(--c-brand); width: 16px; height: 16px; } .cal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cal-modal-footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--c-divider); background: var(--c-actionbar-bg); } .cal-modal-spacer { flex: 1; } .cal-modal-btn { border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); font-size: 13px; font-weight: 500; border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s; font-family: inherit; } .cal-modal-btn:hover { background: var(--c-hover); border-color: var(--c-border-strong); } .cal-modal-btn-primary { background: linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-hover) 100%); border-color: var(--c-brand); color: white; font-weight: 600; } .cal-modal-btn-primary:hover { background: linear-gradient(180deg, var(--c-brand-hover) 0%, var(--c-brand-active) 100%); border-color: var(--c-brand-hover); } .cal-modal-btn-danger { border-color: rgba(194, 51, 58, 0.3); color: var(--c-error); } .cal-modal-btn-danger:hover { background: var(--c-error-bg); border-color: var(--c-error); } /* ============================================================ Calendar — settings page ============================================================ */ .cal-feed-form { display: flex; flex-direction: column; gap: 10px; } .cal-feed-form-row { display: flex; gap: 8px; align-items: stretch; } .cal-feed-form-row .cal-field-input { flex: 1; } .cal-feed-color { width: 42px; height: 38px; border: 1px solid var(--c-border); border-radius: 8px; background: transparent; cursor: pointer; padding: 2px; } .cal-feed-form-actions { display: flex; align-items: center; gap: 12px; } .cal-feed-list-card { margin-top: 14px; } .settings-card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 12px; } .cal-feed-list { display: flex; flex-direction: column; gap: 8px; } .cal-feed-empty { padding: 22px 16px; text-align: center; color: var(--c-text-muted); font-size: 13px; font-style: italic; } .cal-feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); } .cal-feed-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(15, 23, 42, 0.08); } .cal-feed-info { flex: 1; min-width: 0; } .cal-feed-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-feed-meta { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; font-family: var(--font-mono); } .cal-feed-err { color: var(--c-error); } .cal-feed-pending { color: var(--c-text-muted); } .cal-feed-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-text-muted); cursor: pointer; user-select: none; } .cal-feed-toggle input { accent-color: var(--c-brand); } .cal-feed-btn { width: 30px; height: 30px; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: 7px; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cal-feed-btn:hover { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border-strong); } .cal-feed-btn.cal-feed-btn-syncing svg { animation: spin 1s linear infinite; } .cal-feed-btn-danger:hover { background: var(--c-error-bg); color: var(--c-error); border-color: rgba(194, 51, 58, 0.3); } @media (max-width: 1180px) { .cal-pane { max-height: 320px; } } @media (max-width: 820px) { .cal-pane { display: none; } } /* ============================================================ Keyboard shortcuts modal ============================================================ */ .shortcuts-modal { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 24px; } .shortcuts-modal.hidden { display: none; } .shortcuts-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .shortcuts-modal-panel { position: relative; background: var(--c-bg); border-radius: 12px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; animation: cal-modal-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .shortcuts-modal-header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--c-divider); } .shortcuts-modal-title { flex: 1; font-size: 14px; font-weight: 600; } .shortcuts-modal-close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; } .shortcuts-modal-close:hover { background: var(--c-hover); color: var(--c-text); } .shortcuts-modal-body { padding: 16px 22px 20px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; } .shortcuts-group h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); margin-bottom: 8px; } .shortcuts-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--c-text); } .shortcuts-row span { flex: 1; color: var(--c-text-secondary); } .shortcuts-row kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; font-weight: 600; font-family: ui-monospace, 'SF Mono', Menlo, monospace; background: var(--c-actionbar-bg); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 5px; color: var(--c-text); } @media (max-width: 600px) { .shortcuts-modal-body { grid-template-columns: 1fr; } } /* ============================================================ Density toggle (settings) + density classes ============================================================ */ .density-options { display: flex; flex-direction: column; gap: 8px; } .density-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .density-option:hover { border-color: var(--c-border-strong); background: var(--c-hover); } .density-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--c-brand); flex-shrink: 0; } .density-option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .density-option-title { font-size: 13px; font-weight: 600; color: var(--c-text); } .density-option-desc { font-size: 12px; color: var(--c-text-muted); } .density-option-check { width: 22px; height: 22px; border-radius: 50%; background: var(--c-brand); color: white; display: none; align-items: center; justify-content: center; } .density-option.active { border-color: var(--c-brand); background: var(--c-brand-tint); } .density-option.active .density-option-check { display: inline-flex; } /* ============================================================ Filters / Rules (settings page) ============================================================ */ .rules-list-header { margin-bottom: 14px; display: flex; justify-content: flex-end; } .rules-list { display: flex; flex-direction: column; gap: 8px; } .rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); } .rule-toggle { display: inline-flex; align-items: center; cursor: pointer; } .rule-toggle input { accent-color: var(--c-brand); width: 16px; height: 16px; } .rule-info { flex: 1; min-width: 0; } .rule-when, .rule-then { font-size: 12.5px; line-height: 1.45; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rule-when { font-weight: 500; } .rule-then { color: var(--c-text-secondary); } .rule-when em, .rule-then em { font-style: normal; background: var(--c-brand-light); color: var(--c-brand-active); padding: 1px 6px; border-radius: 4px; font-weight: 500; } .rule-row[data-rule-id]:has(.rule-enabled:not(:checked)) { opacity: 0.5; } .rule-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); margin-bottom: 4px; } .rule-preview { margin-top: 8px; padding: 10px 12px; background: var(--c-actionbar-bg); border-radius: 8px; font-size: 12px; color: var(--c-text-secondary); line-height: 1.5; } .rule-preview:empty { display: none; } .rule-preview ul { margin: 6px 0 0 18px; padding: 0; } .rule-preview li { margin: 2px 0; font-size: 11.5px; } .filter-modal-hint { margin-top: 6px; font-size: 11.5px; color: var(--c-text-muted); } .filter-modal-hint a { color: var(--c-brand); text-decoration: none; } .filter-modal-hint a:hover { text-decoration: underline; } /* Lightweight toast */ .app-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); background: var(--c-text); color: white; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 900; max-width: 90vw; text-align: center; } .app-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Undo-Send toasts stack: one per in-flight send, newest nearest the bottom, so a second send never displaces the first message's Undo button. */ .app-toast-stack { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; z-index: 901; pointer-events: none; /* children opt back in */ } .app-toast-stack .app-toast-undo { position: static; left: auto; bottom: auto; transform: translateY(8px); } .app-toast-stack .app-toast-undo.visible { transform: translateY(0); } /* Any toast carrying an Undo button must be clickable — .app-toast sets pointer-events:none so a faded-out toast can't swallow clicks, which also made the Trash/Archive/Move Undo button (#appToastAction, appended straight to body) impossible to press. Re-enable only while visible, so a hidden toast still intercepts nothing. */ .app-toast-undo.visible { pointer-events: auto; } .app-toast-action { background: transparent; border: 0; color: #66b1ff; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; padding: 0 6px; text-transform: uppercase; letter-spacing: 0.04em; } .app-toast-action:hover { color: #93c8ff; } .app-toast-counter { font-size: 11px; color: rgba(255, 255, 255, 0.6); font-feature-settings: 'tnum'; letter-spacing: 0.02em; margin-left: 4px; } /* Send button chevron menu (Schedule Send) */ .btn-send-group { display: inline-flex; align-items: stretch; position: relative; } .btn-send-group .btn-send { border-radius: 6px 0 0 6px; } .btn-send-chev { background: var(--c-brand); color: white; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0 6px 6px 0; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; transition: background 0.15s; } .btn-send-chev:hover { background: var(--c-brand-hover); } .send-menu { position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 240px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; } .send-menu.hidden { display: none; } .send-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; font-family: inherit; text-align: left; cursor: pointer; } .send-menu-item:hover { background: var(--c-hover); } .send-menu-item .icon { color: var(--c-text-muted); } .send-menu-label { font-size: 13px; color: var(--c-text); font-weight: 500; } .send-menu-sub { font-size: 11px; color: var(--c-text-muted); } .send-menu-divider { height: 1px; background: var(--c-divider); margin: 4px 6px; } .send-menu-schedule { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; } .send-menu-schedule .cal-field-input { width: 100%; } .send-menu-schedule .cal-modal-btn-primary { padding: 7px 0; font-size: 12px; font-weight: 600; } /* Density: Cozy — slightly tighter rows */ body.density-cozy .msg-item { padding: 6px 12px 6px 22px; } body.density-cozy .msg-avatar { width: 28px; height: 28px; font-size: 10px; } body.density-cozy .msg-select { width: 28px; height: 28px; } body.density-cozy .msg-select-check { width: 28px; height: 28px; padding: 5px; } body.density-cozy .msg-subject { font-size: 12.5px; } body.density-cozy .msg-preview { font-size: 11.5px; } /* Density: Compact — single-line, tightest */ body.density-compact .msg-item { padding: 5px 12px 5px 22px; align-items: center; } body.density-compact .msg-avatar { width: 24px; height: 24px; font-size: 10px; } body.density-compact .msg-select { width: 24px; height: 24px; } body.density-compact .msg-select-check { width: 24px; height: 24px; padding: 4px; } body.density-compact .msg-preview { display: none; } body.density-compact .msg-subject { font-size: 12.5px; line-height: 1.25; margin-bottom: 0; } body.density-compact .msg-row1 { margin-bottom: 0; } body.density-compact .msg-from { font-size: 12.5px; } body.density-compact .msg-dot { top: 13px; } /* ============================================================ Calendar invitations (RSVP) Rendered inside .thread-msg-body, which is kept a white surface in both themes (see top of file), so these use fixed light-surface colors rather than theme tokens that would flip and break contrast. ============================================================ */ .invite-card { max-width: 540px; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid #e3e6ea; border-left: 3px solid #0078d4; border-radius: 10px; background: #f8fbfe; color: #1a1d23; } .invite-head { display: flex; align-items: flex-start; gap: 10px; } .invite-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: #0078d4; } .invite-headings { min-width: 0; } .invite-kind { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #5b6270; } .invite-title { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 1px; color: #1a1d23; word-break: break-word; } .invite-body { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .invite-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; } .invite-row-k { flex: 0 0 64px; color: #5b6270; font-weight: 500; } .invite-row-v { color: #1a1d23; word-break: break-word; } .invite-status { margin-top: 12px; display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #eef1f4; color: #3a3f4a; } .invite-status[data-ps="ACCEPTED"] { background: #dff6dd; color: #107c10; } .invite-status[data-ps="DECLINED"] { background: #fce8ea; color: #c2333a; } .invite-status[data-ps="TENTATIVE"] { background: #fbf0cf; color: #8a6f12; } .invite-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .invite-btn { appearance: none; -webkit-appearance: none; border: 1px solid #cdd2da; background: #ffffff; color: #1a1d23; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; } .invite-btn:hover:not(:disabled) { background: #f4f5f7; border-color: #b9c0ca; } .invite-btn:disabled { opacity: 0.55; cursor: default; } .invite-btn.is-sending { opacity: 0.6; cursor: progress; } .invite-yes[aria-pressed="true"] { background: #107c10; border-color: #107c10; color: #fff; } .invite-maybe[aria-pressed="true"] { background: #8a6f12; border-color: #8a6f12; color: #fff; } .invite-no[aria-pressed="true"] { background: #c2333a; border-color: #c2333a; color: #fff; } .invite-feedback { margin-top: 10px; font-size: 12px; color: #107c10; } .invite-feedback.invite-feedback-err { color: #c2333a; } .invite-cancelled { border-left-color: #c2333a; background: #fdf3f4; } .invite-cancelled .invite-ic { color: #c2333a; } .invite-cancelled .invite-title { text-decoration: line-through; color: #5b6270; } /* ============================================================ Offline indicator Injected by app.js and toggled on the window online/offline events. Theme-aware (warning tokens) — it sits on the page chrome, not inside .thread-msg-body, so flipping tokens are safe here. ============================================================ */ #offlineBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1200; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; background: var(--c-warning); color: var(--c-warning-text); border: 1px solid var(--c-border); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 500; } #offlineBar svg { flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { #offlineBar { animation: offlineBarIn 0.2s ease; } } @keyframes offlineBarIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================ Multi-account sidebar (Outlook-style grouped accounts) Every colour is a theme token so the groups, headers, badges and the add-account modal all track light/dark automatically. ============================================================ */ /* "All accounts" unified entry — a prominent folder-like row at the top. */ .acct-unified { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--c-text); cursor: pointer; border: 0; background: transparent; border-bottom: 1px solid var(--c-divider); transition: background 0.1s; } .acct-unified:hover { background: var(--c-hover); } .acct-unified.active { background: var(--c-brand-light); color: var(--c-brand-active); } .acct-unified .folder-icon { color: var(--c-text-muted); } .acct-unified.active .folder-icon { color: var(--c-brand-active); } .acct-unified .folder-label { flex: 1; } /* Account group: collapsible block, header + (when expanded) its folders. */ .acct-group { border-bottom: 1px solid var(--c-divider); } .acct-group-header { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 14px 9px 12px; cursor: pointer; user-select: none; transition: background 0.1s; } .acct-group-header:hover { background: var(--c-hover); } .acct-group.current > .acct-group-header { background: var(--c-brand-light); } .acct-chev { flex-shrink: 0; color: var(--c-text-muted); transform: rotate(-90deg); transition: transform 0.15s ease; } .acct-group.expanded > .acct-group-header .acct-chev { transform: rotate(0deg); } .acct-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .acct-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-group.current > .acct-group-header .acct-name { color: var(--c-brand-active); } .acct-email { font-size: 11px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-unread { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--c-brand); font-feature-settings: 'tnum'; margin-left: 4px; } .acct-group.current > .acct-group-header .acct-unread { color: var(--c-brand-active); } .acct-remove { flex-shrink: 0; width: 22px; height: 22px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--c-text-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.1s, background 0.1s, color 0.1s; } .acct-group-header:hover .acct-remove, .acct-remove:focus-visible { opacity: 1; } .acct-remove:hover { background: var(--c-hover); color: var(--c-error); } .acct-folders { padding: 2px 0 6px; } .acct-folders-loading { padding: 6px 18px 6px 44px; font-size: 12px; color: var(--c-text-subtle); font-style: italic; } /* Add-account affordance pinned under the groups. */ .acct-add { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 18px; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--c-brand); background: transparent; border: 0; cursor: pointer; transition: background 0.1s; } .acct-add:hover { background: var(--c-hover); } .acct-add .icon { color: var(--c-brand); flex-shrink: 0; } /* Per-account badge on unified-inbox message rows. --acct-color is set inline (stable per account) and used only as a small accent. */ .msg-acct-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 7px; font-size: 10px; font-weight: 600; line-height: 1.5; border-radius: 9px; color: #fff; background: var(--acct-color, var(--c-brand)); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } /* Compose "From" account picker — match the other compose-row inputs. */ .compose-row-select { appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--c-text); font-family: var(--font-ui); } .compose-row-select option { color: var(--c-text); background: var(--c-bg); } /* ---------- Add-account modal ---------- */ .acct-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; } .acct-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .acct-modal-card { position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .acct-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--c-divider); } .acct-modal-title { font-size: 14px; font-weight: 600; color: var(--c-text); } .acct-modal-close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .acct-modal-close:hover { background: var(--c-hover); color: var(--c-text); } .acct-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .acct-field { display: flex; flex-direction: column; gap: 4px; } .acct-field-label { font-size: 11px; font-weight: 600; color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .acct-field-input { width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 9px 11px; font-size: 13px; font-family: var(--font-ui); color: var(--c-text); background: var(--c-bg); transition: border-color 0.1s, box-shadow 0.1s; } .acct-field-input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand-light); } .acct-field-input::placeholder { color: var(--c-text-subtle); } .acct-advanced-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--c-brand); font-size: 12px; font-weight: 500; cursor: pointer; padding: 2px 0; } .acct-advanced-toggle:hover { text-decoration: underline; } .acct-advanced { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--c-divider); border-radius: var(--radius-md); background: var(--c-page-bg); } .acct-field-row { display: flex; align-items: flex-end; gap: 12px; } .acct-field-grow { flex: 1; } .acct-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-secondary); padding-bottom: 9px; white-space: nowrap; cursor: pointer; } .acct-form-status { font-size: 12px; color: var(--c-text-muted); min-height: 16px; } .acct-form-status.error { color: var(--c-error); font-weight: 500; } .acct-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; } .acct-btn-secondary, .acct-btn-primary { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent; } .acct-btn-secondary { background: transparent; color: var(--c-text-secondary); border-color: var(--c-border); } .acct-btn-secondary:hover { background: var(--c-hover); } .acct-btn-primary { background: var(--c-brand); color: var(--c-text-on-brand); } .acct-btn-primary:hover { background: var(--c-brand-hover); } .acct-btn-primary:disabled { opacity: 0.6; cursor: default; } /* ============================================================ Accessibility Keyboard focus rings via :focus-visible so pointer interaction stays clean while keyboard navigation is always visible. Placed last so it wins source-order ties against the base `outline: none` resets above. Controls that already paint a box-shadow focus ring (snooze/signature/calendar inputs) are intentionally left alone. ============================================================ */ :where(a, button, select, textarea, [tabindex], [contenteditable="true"]):focus-visible, .form-input:focus-visible, .compose-row-input:focus-visible, .compose-body:focus-visible, .topbar-search-input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; } /* contenteditable bodies clip their own overflow, so an outset ring is hidden; inset it slightly so it stays visible. */ .compose-body:focus-visible, .signature-editor:focus-visible { outline-offset: -2px; } /* Respect users who ask the OS to minimise motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Mobile swipe-to-triage: the row follows the finger and reveals its intent. Colour comes from the row's own background so the cue reads in both themes. */ @media (max-width: 820px) { .msg-item.swiping { position: relative; z-index: 1; will-change: transform; user-select: none; } .msg-item.swipe-delete { background: var(--c-error-bg); } .msg-item.swipe-archive { background: var(--c-success-bg); } } /* ═══════════════════════════════════════════════════════════════════════════ SETTINGS — iPadOS design language ═══════════════════════════════════════════════════════════════════════════ Everything here is scoped to .settings-page so the mail UI is untouched: the two share component classes (.cal-field-input, .settings-status, …) and the inbox must keep its own look. Modelled on iPadOS Settings: a two-column split view, inset grouped lists on a grouped background, 44pt rows, hairline separators inset to the label, and system colours. Kept as one block so the design reads as a system rather than a pile of overrides. ═════════════════════════════════════════════════════════════════════════ */ .settings-page { /* Apple system palette (light) */ --ip-bg: #f2f2f7; /* systemGroupedBackground */ --ip-card: #ffffff; /* secondarySystemGroupedBackground */ --ip-card-hover: #f7f7fa; --ip-sep: rgba(60, 60, 67, 0.29); --ip-label: #000000; /* Apple ships secondaryLabel at 60% and tertiaryLabel at 30% black, which land at 3.4:1 and 1.9:1 — the same trap the inbox hit. These are the same greys at AA-safe darkness. */ --ip-label-2: #5f5f63; --ip-label-3: #6d6d72; /* Text blue and fill blue are one value in light, but must differ in dark (lighter for tinted text on black, darker behind white text). */ --ip-blue: #0068cc; --ip-blue-fill: #0068cc; --ip-green: #34c759; --ip-green-ink: #1a7a37; /* green as TEXT, on its own 18% wash */ --ip-red: #ff3b30; --ip-red-ink: #d70015; /* red as TEXT — systemRed is 3.6:1 */ --ip-orange: #ff9500; --ip-fill: rgba(120, 120, 128, 0.12); --ip-fill-2: rgba(120, 120, 128, 0.20); --ip-sidebar: #ececf0; --ip-radius: 12px; --ip-radius-sm: 8px; --ip-row: 44px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", var(--font-ui, Inter), system-ui, sans-serif; background: var(--ip-bg); color: var(--ip-label); -webkit-font-smoothing: antialiased; } html.theme-dark .settings-page { --ip-bg: #000000; --ip-card: #1c1c1e; --ip-card-hover: #2c2c2e; --ip-sep: rgba(84, 84, 88, 0.65); --ip-label: #ffffff; --ip-label-2: rgba(235, 235, 245, 0.72); --ip-label-3: rgba(235, 235, 245, 0.58); --ip-blue: #0a84ff; /* tinted text on black */ --ip-blue-fill: #0a6ecd; /* behind white text */ --ip-green: #30d158; --ip-green-ink: #30d158; /* already bright enough on a dark card */ --ip-red: #ff453a; --ip-red-ink: #ff6961; --ip-orange: #ff9f0a; --ip-fill: rgba(120, 120, 128, 0.24); --ip-fill-2: rgba(120, 120, 128, 0.32); --ip-sidebar: #1c1c1e; } /* ---- top bar: translucent, centred title ---- */ .settings-page .settings-topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: color-mix(in srgb, var(--ip-bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--ip-sep); } .settings-page .settings-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; color: var(--ip-blue); font-size: 17px; font-weight: 400; text-decoration: none; padding: 6px 8px 6px 2px; border-radius: var(--ip-radius-sm); } .settings-page .settings-back:hover { opacity: 0.7; } .settings-page .settings-back .icon { width: 18px; height: 18px; stroke-width: 2.4; } .settings-page .settings-title { justify-self: center; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ip-label); } .settings-page .topbar-user { justify-self: end; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ip-label-2); font-size: 15px; padding: 4px 8px; border-radius: 999px; } .settings-page .topbar-user:hover { background: var(--ip-fill); } .settings-page .topbar-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ip-blue-fill); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; } .settings-page .topbar-user-logout { color: var(--ip-label-3); } /* ---- split view ---- */ .settings-page .settings-main { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 0; max-width: none; padding: 0; } /* ---- sidebar ---- */ .settings-page .settings-nav { position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; padding: 14px 12px 32px; background: var(--ip-sidebar); border-right: 0.5px solid var(--ip-sep); display: flex; flex-direction: column; gap: 2px; } .settings-page .settings-nav-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 12px; border-radius: 10px; font-size: 15px; font-weight: 400; color: var(--ip-label); text-decoration: none; border: 0; transition: background 0.12s ease; } .settings-page .settings-nav-item:hover { background: var(--ip-fill); } .settings-page .settings-nav-item.active { background: var(--ip-blue-fill); color: #fff; font-weight: 500; } .settings-page .settings-nav-item.active .snav-icon { box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; } /* iPadOS icon tiles */ .settings-page .snav-icon { flex: 0 0 auto; width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; background: var(--tile, #8e8e93); } .settings-page .snav-icon .icon { width: 17px; height: 17px; color: #fff; stroke-width: 2.1; } .settings-page .snav-icon-blue { --tile: #007aff; } .settings-page .snav-icon-indigo { --tile: #5856d6; } .settings-page .snav-icon-pink { --tile: #ff2d55; } .settings-page .snav-icon-orange { --tile: #ff9500; } .settings-page .snav-icon-teal { --tile: #30b0c7; } .settings-page .snav-icon-green { --tile: #34c759; } .settings-page .snav-icon-red { --tile: #ff3b30; } .settings-page .snav-icon-graphite { --tile: #6c6c70; } .settings-page .snav-icon-gray { --tile: #8e8e93; } /* ---- content column ---- */ .settings-page .settings-content { padding: 8px 0 96px; max-width: none; background: var(--ip-bg); min-height: calc(100vh - 52px); } .settings-page .settings-hero { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; margin: 18px 0 8px; padding: 0 28px; color: var(--ip-label); } .settings-page .settings-section { padding: 0 28px; margin-bottom: 30px; } /* Section header = iOS grouped-list header: small, secondary, sentence case. */ .settings-page .settings-section-header { margin: 26px 0 8px; padding: 0 4px; } .settings-page .settings-section-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; color: var(--ip-label); } .settings-page .settings-section-desc { font-size: 13px; line-height: 1.45; color: var(--ip-label-2); margin: 0; max-width: 68ch; } .settings-page .settings-hint { font-size: 13px; color: var(--ip-label-2); margin: 8px 4px 0; max-width: 68ch; } /* ---- inset grouped card ---- */ .settings-page .settings-card { background: var(--ip-card); border: 0; border-radius: var(--ip-radius); overflow: hidden; box-shadow: none; margin: 0; } /* Hairline separators inset to the label, as iOS does. */ .settings-page .settings-row { display: flex; align-items: center; gap: 16px; min-height: var(--ip-row); padding: 11px 16px; border: 0; position: relative; } .settings-page .settings-row + .settings-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--ip-sep); } .settings-page .settings-row-label { flex: 0 0 auto; min-width: 150px; font-size: 15px; font-weight: 400; color: var(--ip-label); letter-spacing: 0; } .settings-page .settings-row-value { flex: 1; font-size: 15px; color: var(--ip-label-2); text-align: right; word-break: break-word; } .settings-page .settings-row-value.mono, .settings-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } /* ---- selectable list rows (density / theme) ---- */ .settings-page .density-options { display: block; } .settings-page .density-option { display: flex; align-items: center; gap: 12px; min-height: var(--ip-row); padding: 10px 16px; border: 0; border-radius: 0; background: transparent; cursor: pointer; position: relative; } .settings-page .density-option + .density-option::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--ip-sep); } .settings-page .density-option:hover { background: var(--ip-card-hover); } .settings-page .density-option.active { background: transparent; } .settings-page .density-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .settings-page .density-option-text { display: flex; flex-direction: column; gap: 1px; flex: 1; } .settings-page .density-option-title { font-size: 15px; font-weight: 400; color: var(--ip-label); } .settings-page .density-option-desc { font-size: 13px; color: var(--ip-label-2); } /* iOS marks the chosen row with a blue checkmark, not a filled card. */ .settings-page .density-option-check { flex: 0 0 auto; color: var(--ip-blue); opacity: 0; transform: none; background: none; border: 0; width: auto; height: auto; } .settings-page .density-option.active .density-option-check { opacity: 1; } /* ---- iOS switch ---- */ .settings-page .settings-toggles { display: block; } .settings-page .settings-toggle { display: flex; align-items: center; gap: 16px; min-height: var(--ip-row); padding: 8px 16px; cursor: pointer; position: relative; } .settings-page .settings-toggle + .settings-toggle::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--ip-sep); } .settings-page .settings-toggle input { position: absolute; opacity: 0; pointer-events: none; } .settings-page .toggle-label { flex: 1; order: -1; font-size: 15px; color: var(--ip-label); } .settings-page .toggle-track { flex: 0 0 auto; width: 51px; height: 31px; border-radius: 999px; background: var(--ip-fill-2); transition: background 0.2s ease; position: relative; display: block; } .settings-page .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16); transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); } .settings-page .settings-toggle input:checked ~ .toggle-track { background: var(--ip-green); } .settings-page .settings-toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); } .settings-page .settings-toggle input:focus-visible ~ .toggle-track { outline: 2px solid var(--ip-blue); outline-offset: 2px; } /* ---- inputs ---- */ .settings-page .cal-field-input, .settings-page .settings-inline-input { width: 100%; border: 0.5px solid var(--ip-sep); background: var(--ip-card); color: var(--ip-label); border-radius: 10px; padding: 9px 12px; font-size: 15px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } html.theme-dark .settings-page .cal-field-input, html.theme-dark .settings-page .settings-inline-input { background: rgba(120,120,128,0.16); } .settings-page .cal-field-input:focus, .settings-page .settings-inline-input:focus { outline: none; border-color: var(--ip-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-blue) 22%, transparent); } .settings-page .cal-field { display: flex; flex-direction: column; gap: 6px; } /* ...except the checkbox variant. A .cal-field stacks its label above its input, which is right for a text field and wrong for a checkbox: .cal-field-check asks for `row` but is only (0,1,0), so the line above outranked it and left every checkbox in Settings floating above its own caption. Re-assert the row at matching specificity rather than weakening the column rule. */ .settings-page .cal-field-check { flex-direction: row; align-items: center; gap: 8px; } .settings-page .cal-field-label { font-size: 13px; color: var(--ip-label-2); } .settings-page .settings-inline-edit { justify-content: flex-end; } .settings-page .settings-inline-input { max-width: 320px; text-align: right; } /* A row holding a text field plus a Save button needs more width than the value column gets in the two-column card layout (~150px), so the button wrapped below the field and ended up sitting beside the label instead of after it. These rows put the label on its own line and give the control the full card width — the same thing iPadOS Settings does when a control won't fit inline. */ .settings-page .settings-row-stack { flex-direction: column; align-items: stretch; gap: 8px; } .settings-page .settings-row-stack .settings-row-label { flex: none; } .settings-page .settings-row-stack .settings-inline-edit { justify-content: flex-start; } .settings-page .settings-row-stack .settings-inline-input { text-align: left; } .settings-page .settings-row-stack .settings-inline-hint { text-align: left; } .settings-page .settings-inline-hint { font-size: 13px; color: var(--ip-label-2); margin-top: 6px; text-align: right; } /* ---- buttons ---- */ .settings-page .btn, .settings-page .cal-modal-btn, .settings-page .settings-inline-save { appearance: none; border: 0; border-radius: 10px; padding: 8px 16px; font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer; background: var(--ip-fill); color: var(--ip-blue); transition: background 0.15s, opacity 0.15s; } .settings-page .btn:hover, .settings-page .cal-modal-btn:hover, .settings-page .settings-inline-save:hover { background: var(--ip-fill-2); } .settings-page .btn-primary, .settings-page .cal-modal-btn-primary, .settings-page .settings-inline-save { background: var(--ip-blue-fill); color: #fff; } .settings-page .btn-primary:hover, .settings-page .cal-modal-btn-primary:hover, .settings-page .settings-inline-save:hover { background: var(--ip-blue-fill); opacity: 0.85; } .settings-page .btn:disabled, .settings-page .cal-modal-btn:disabled, .settings-page .settings-inline-save:disabled { opacity: 0.4; cursor: default; } .settings-page .btn-danger, .settings-page .cal-modal-btn-danger { background: var(--ip-red); color: #fff; } /* ---- status text ---- */ .settings-page .settings-status { font-size: 13px; color: var(--ip-label-2); } /* The ink variants, not the system colours: systemRed is 3.6:1 on the white card and systemGreen 1.9:1. A status line only appears when something succeeded or failed, so it is the one moment the text has to be readable. */ .settings-page .settings-status.success { color: var(--ip-green-ink); font-weight: 500; } .settings-page .settings-status.error { color: var(--ip-red-ink); font-weight: 500; } /* ---- dynamic list rows (filters, calendars, contacts) ---- */ .settings-page .rules-list-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; } .settings-page .rules-list-header::after { content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 0.5px; background: var(--ip-sep); } .settings-page .cal-feed-row, .settings-page .rule-row { display: flex; align-items: center; gap: 12px; min-height: var(--ip-row); padding: 10px 16px; border: 0; position: relative; background: transparent; } .settings-page .cal-feed-row + .cal-feed-row::before, .settings-page .rule-row + .rule-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--ip-sep); } .settings-page .cal-feed-row:hover, .settings-page .rule-row:hover { background: var(--ip-card-hover); } .settings-page .cal-feed-main, .settings-page .rule-main { flex: 1; min-width: 0; } .settings-page .cal-feed-name, .settings-page .rule-name { font-size: 15px; color: var(--ip-label); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-page .cal-feed-url, .settings-page .rule-summary { font-size: 13px; color: var(--ip-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Row actions in the filter, calendar and contact lists. No resting fill: the grey plate lightens the surface under the button's own tinted glyph, and on a contact card — which is already a raised surface — that stacked to 2.7:1. The fill returns on hover, where it reads as feedback rather than decoration. */ .settings-page .cal-feed-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--ip-blue); display: grid; place-items: center; cursor: pointer; } .settings-page .cal-feed-btn:hover { background: var(--ip-fill); } .settings-page .cal-feed-btn-danger { color: var(--ip-red-ink); } .settings-page .cal-feed-btn-danger:hover { background: var(--ip-fill); color: var(--ip-red-ink); } .settings-page .cal-feed-empty { padding: 22px 16px; text-align: center; font-size: 14px; color: var(--ip-label-2); } /* ---- signature / rich-text editors ---- */ .settings-page .signature-editor, .settings-page .sig-editor { border-radius: 0; border: 0; border-top: 0.5px solid var(--ip-sep); background: var(--ip-card); color: var(--ip-label); padding: 14px 16px; min-height: 150px; font-size: 15px; } .settings-page .sig-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; background: transparent; border: 0; } .settings-page .sig-tool, .settings-page .signature-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ip-label); display: grid; place-items: center; cursor: pointer; } .settings-page .sig-tool:hover, .settings-page .signature-btn:hover { background: var(--ip-fill); } .settings-page .sig-tool.active { background: var(--ip-fill-2); color: var(--ip-blue); } /* ---- alert (data exposure) ---- */ .settings-page .settings-alert { margin: 8px 28px 20px; border-radius: var(--ip-radius); border: 0; padding: 16px 18px; background: var(--ip-card); border-left: 4px solid var(--ip-red); font-size: 14px; color: var(--ip-label); } .settings-page .settings-alert-danger strong { color: var(--ip-red); } .settings-page .settings-alert pre { background: var(--ip-fill); border-radius: var(--ip-radius-sm); padding: 12px 14px; font-size: 12.5px; } /* ---- pills ---- */ .settings-page .pill-ok, .settings-page .pill-warn { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: inherit; } /* The tint lightens the pill under its own text: systemGreen on an 18% green wash is 1.9:1. The ink variant is the same hue at AA. */ .settings-page .pill-ok { background: color-mix(in srgb, var(--ip-green) 18%, transparent); color: var(--ip-green-ink); } .settings-page .pill-warn { background: color-mix(in srgb, var(--ip-orange) 20%, transparent); color: var(--ip-orange); } /* ---- contacts add/edit form ---- */ .settings-page .contact-form { background: transparent; border: 0; border-bottom: 0.5px solid var(--ip-sep); padding: 14px 16px; } /* ---- focus ring ---- */ .settings-page a:focus-visible, .settings-page button:focus-visible, .settings-page input:focus-visible, .settings-page label:focus-visible { outline: 2px solid var(--ip-blue); outline-offset: 2px; border-radius: 6px; } /* ---- compact widths: collapse to a single column like iPhone Settings ---- */ @media (max-width: 900px) { .settings-page .settings-main { grid-template-columns: 1fr; } .settings-page .settings-nav { position: static; height: auto; /* The base rule pins this to the 220px sidebar width. Once the grid is a single column the nav is a full-width horizontal scroller, and 220px left all nine items crammed into a stub strip with dead space beside it — 1337px of content in a 220px box. */ width: auto; max-width: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 0.5px solid var(--ip-sep); padding: 10px 12px; gap: 6px; } .settings-page .settings-nav-item { flex: 0 0 auto; } .settings-page .settings-nav-item span:not(.snav-icon) { white-space: nowrap; } .settings-page .settings-hero { font-size: 28px; padding: 0 16px; } .settings-page .settings-section { padding: 0 16px; } .settings-page .settings-alert { margin-inline: 16px; } .settings-page .settings-row { flex-direction: column; align-items: flex-start; gap: 4px; } .settings-page .settings-row-value { text-align: left; } .settings-page .settings-inline-edit { justify-content: flex-start; } .settings-page .settings-inline-input { text-align: left; } .settings-page .settings-inline-hint { text-align: left; } } /* ═══════════════════════════════════════════════════════════════════════════ SETTINGS — pane switching, two-column grouping, density fixes ═══════════════════════════════════════════════════════════════════════════ The first pass restyled the page but left every section stacked on one scroll, which printed to thirteen pages. iPadOS shows ONE pane at a time and uses the width it has; this does the same. ═════════════════════════════════════════════════════════════════════════ */ /* One pane at a time. */ .settings-page .settings-section { display: none; } .settings-page .settings-section.visible { display: block; } /* Use the horizontal space: a pane's header+card pairs flow into two columns on a wide screen instead of one narrow ribbon down the left. break-inside keeps a card whole and break-after keeps each heading with the card it introduces. */ @media (min-width: 1100px) { .settings-page .settings-section.visible { column-count: 2; column-gap: 26px; } .settings-page .settings-section-header { break-after: avoid; page-break-after: avoid; break-inside: avoid; } .settings-page .settings-card, .settings-page .settings-hint { break-inside: avoid; page-break-inside: avoid; } /* Editors, long lists and anything with its own internal layout stay full width — splitting those across columns would be worse, not better. */ .settings-page #signature, .settings-page #out-of-office, .settings-page #contacts, .settings-page #filters, .settings-page #calendars { column-count: 1; } } /* First heading in a pane sits close to the title. */ .settings-page .settings-section > .settings-section-header:first-child { margin-top: 6px; } .settings-page .settings-hero { margin-bottom: 2px; } .settings-page .settings-content { padding-top: 4px; } /* ---- contacts: compact grid instead of one full-width row each ---- */ .settings-page .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding: 12px; max-height: 62vh; overflow-y: auto; } .settings-page .contact-card { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--ip-fill); min-width: 0; } .settings-page .contact-card:hover { background: var(--ip-fill-2); } .settings-page .contact-card-main { flex: 1; min-width: 0; } .settings-page .contact-card-name { font-size: 14px; color: var(--ip-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-page .contact-card-mail { font-size: 12px; color: var(--ip-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-page .contact-card-actions { display: flex; gap: 4px; flex: 0 0 auto; } .settings-page .contact-card .cal-feed-btn { width: 26px; height: 26px; border-radius: 7px; } .settings-page .contact-filter { max-width: 260px; flex: 0 1 260px; } .settings-page .contact-count { font-size: 13px; color: var(--ip-label-2); margin-right: auto; } .settings-page .rules-list-header { flex-wrap: wrap; } /* ---- fix: hint text escaping its card (signature tip, calendar help) ---- Deliberately NOT `p em`: an inside a paragraph is inline emphasis, and making it a padded block shattered the calendar help into one row per label — "Google Calendar:", "Outlook 365:" and "iCloud:" each broke onto their own ruled line, leaving the sentence's trailing full stop orphaned below them. Only an used as a card's own child is a standalone hint. */ /* The hint itself is italic, so an inline inside it would be invisible as emphasis. Revert it to roman — the long-standing typographic convention for emphasis within italic text — and give it a little weight, so the service names stay the thing the eye lands on when scanning the paragraph. */ .settings-page .settings-hint em { font-style: normal; font-weight: 600; color: var(--ip-label); } .settings-page .settings-card > .settings-hint, .settings-page .settings-card .sig-hint, .settings-page .settings-card .cal-hint, .settings-page .settings-card > em { display: block; margin: 0; padding: 10px 16px; font-size: 12.5px; line-height: 1.5; color: var(--ip-label-2); border-top: 0.5px solid var(--ip-sep); background: transparent; } /* ---- fix: out-of-office field block ---- */ .settings-page #out-of-office .settings-card { padding-bottom: 4px; } .settings-page #out-of-office .cal-field, .settings-page #calendars .cal-field { padding: 10px 16px; } .settings-page .cal-field-label, .settings-page #out-of-office .cal-field-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ip-label-2); } /* Start/end dates belong side by side, not stacked full width. */ .settings-page .ooo-dates, .settings-page #out-of-office .cal-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; } /* The enable switch is its own row, clear of the fields under it. */ .settings-page #out-of-office .settings-toggle, .settings-page #out-of-office .toggle-row { border-bottom: 0.5px solid var(--ip-sep); margin-bottom: 4px; } /* ---- tighter vertical rhythm between groups ---- */ .settings-page .settings-section-header { margin: 20px 0 8px; } .settings-page .settings-section { margin-bottom: 20px; } /* ═══════════════════════════════════════════════════════════════════════════ INBOX — iPadOS Mail design language ═══════════════════════════════════════════════════════════════════════════ Scoped to .mail-page, exactly as the Settings block is scoped to .settings-page, so the two never bleed into each other and either can be reverted on its own. Modelled on Mail for iPadOS: translucent chrome, a grouped sidebar with colour-coded icon tiles, list rows led by an unread dot with the time set to the right, and a filled blue selection. Every class the JS touches is kept — this restyles, it does not restructure. ═════════════════════════════════════════════════════════════════════════ */ .mail-page { --m-bg: #f2f2f7; /* systemGroupedBackground */ --m-surface: #ffffff; --m-sidebar: #ececf0; --m-list: #ffffff; --m-sep: rgba(60, 60, 67, 0.22); --m-label: #000000; /* Apple's secondaryLabel/tertiaryLabel are 62% and 34% black, which land at 3.4:1 and 1.9:1 on white — below the 4.5:1 this app committed to in the accessibility pass. These are the same greys at AA-safe darkness (6.4:1 and 5.1:1); at 12px the difference is barely perceptible next to the win. */ --m-label-2: #5f5f63; --m-label-3: #6d6d72; /* Deeper than systemBlue #007AFF, which is only 4.0:1 on white and 3.8:1 on the grouped grey the toolbar sits on — tinted toolbar labels would miss AA. This clears 4.5:1 on both, and white-on-blue for the filled controls at 5.4:1, while still reading as iOS blue. */ --m-blue: #0068cc; /* Same blue in light mode. It is a separate token because dark mode needs a LIGHTER blue for tinted text on black and a DARKER one behind white text — one value cannot clear AA in both roles. */ --m-blue-fill: #0068cc; /* Mailbox tints. A white glyph on a saturated tile is legible whatever the tile colour, but an untiled glyph has to carry the contrast itself, and systemGreen/systemOrange are only ~1.9:1 and ~2.4:1 on this sidebar. These are Apple's published accessible variants of the same colours. */ --f-blue: #0071e3; --f-green: #1f9142; --f-orange: #cc6f00; --f-red: #d70015; --f-indigo: #4b48c8; --f-purple: #9333b8; --f-brown: #8a6f4f; --f-teal: #00728f; --f-gray: #6d6d72; --m-red: #ff3b30; --m-orange: #ff9500; --m-green: #34c759; --m-fill: rgba(120, 120, 128, 0.12); --m-fill-2: rgba(120, 120, 128, 0.20); --m-sep-solid: #c6c6c8; --m-chrome: #ffffff; --m-radius: 10px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", var(--font-ui, Inter), system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--m-bg); } html.theme-dark .mail-page { --m-bg: #000000; --m-surface: #1c1c1e; /* The elevation was inverted here: the sidebar was the raised surface and the message list — the panel you actually read — was pure black, so the harshest contrast on screen sat where the eye rests longest, with a lighter sidebar beside it drawing attention away from the content. Light mode already had this the right way round (grouped grey behind, white panel in front); this matches it. Pure black stays for the chrome and the sidebar, which is also what makes the raised list read as raised. */ --m-sidebar: #000000; --m-list: #1c1c1e; --m-sep: rgba(84, 84, 88, 0.55); /* Row hairlines inside the list: the structural separator is too strong when it repeats every 44px down a long list. */ --m-sep-row: rgba(84, 84, 88, 0.34); /* Apple opaqueSeparator. A translucent hairline over a dark surface composites to almost the surface itself — it has to be opaque to read. */ --m-sep-solid: #38383a; --m-chrome: #1c1c1e; /* toolbar surface, distinct from the page */ --m-label: #ffffff; --m-label-2: rgba(235, 235, 245, 0.72); /* 34% white is 2.6:1 on black; 58% clears AA on both #000 and #1C1C1E. */ --m-label-3: rgba(235, 235, 245, 0.58); --m-blue: #0a84ff; /* tinted text on black — 5.8:1 */ --m-blue-fill: #0a6ecd; /* behind white text — 5.1:1 */ /* The light-mode tints are far too dark against black; these are Apple's accessible variants for dark appearance. */ --f-blue: #409cff; --f-green: #30db5b; --f-orange: #ffb340; --f-red: #ff6961; --f-indigo: #7d7aff; --f-purple: #da8fff; --f-brown: #b59469; --f-teal: #5de6ff; --f-gray: #98989d; --m-red: #ff453a; --m-orange: #ff9f0a; --m-green: #30d158; --m-fill: rgba(120, 120, 128, 0.24); --m-fill-2: rgba(120, 120, 128, 0.32); } /* The reading pane stays white in dark mode — email HTML is authored for white backgrounds — so the surrounding chrome must stay light with it. The app already does this for the --c-* tokens a few hundred lines up; the --m-* tokens need the same treatment or the subject renders white-on-white and the empty-state placeholder drops to 1.18:1. Re-declaring them here flips every descendant rule at once, so no reading-pane rule has to special-case dark. */ html.theme-dark .mail-page .reading-pane { --m-surface: #ffffff; --m-sep: rgba(60, 60, 67, 0.22); --m-label: #000000; --m-label-2: #5f5f63; --m-label-3: #6d6d72; --m-blue: #0068cc; --m-blue-fill: #0068cc; --m-red: #ff3b30; --m-orange: #ff9500; --m-green: #34c759; --m-fill: rgba(120, 120, 128, 0.12); --m-fill-2: rgba(120, 120, 128, 0.20); } /* ---- chrome: translucent toolbars ---- */ /* ⚠ Do NOT add backdrop-filter, filter, transform, perspective, contain:paint or will-change to the topbar or the action bar. Any of those makes the element the containing block for its position:fixed descendants. The Move menu (#moveDropdown) is a position:fixed child of the action bar positioned from getBoundingClientRect(), so a containing block there re-bases its viewport coordinates onto a 48px-tall bar that also clips overflow — the menu lands 48px low and is scissored to nothing. That is exactly what happened in v1.5.x. Nothing is lost by leaving them out: both bars sit in normal flow with no content behind them, so blurring a flat background just reproduces the same flat colour. These are opaque for that reason, not by oversight. */ .mail-page .topbar { background: var(--m-bg); border-bottom: 0.5px solid var(--m-sep); box-shadow: none; } .mail-page .topbar-logo-text { font-weight: 600; letter-spacing: -0.01em; color: var(--m-label); } .mail-page .topbar-logo-mark { background: var(--m-blue-fill); color: #fff; border-radius: 7px; } .mail-page .topbar-search-input { background: var(--m-fill); border: 0; border-radius: 10px; height: 34px; font-size: 14px; color: var(--m-label); } /* label-2, not label-3: the search field's fill is lighter than the surfaces label-3 was chosen against, and on it the placeholder measured 4.47 in light theme — under the 4.5 this app holds itself to. A placeholder is text you have to read to know what the field is for. */ .mail-page .topbar-search-input::placeholder { color: var(--m-label-2); } /* The focused state is declared in full, and with `body.` in front so it wins on SPECIFICITY rather than on being further down the file. The base .topbar-search-input:focus rule turns the field white and its text dark — correct when the search box sat on a coloured brand band, wrong here, where the field keeps its dark fill. Only source order was keeping that white background off it, and a matching dark-theme rule forced the text to #1a1d23 on top of the dark fill: 1.32:1, which is what "black and invisible while typing" looks like measured. Inheriting any of that again would bring it straight back. */ body.mail-page .topbar-search-input:focus { outline: none; background: var(--m-fill); color: var(--m-label); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-blue) 22%, transparent); } body.mail-page .topbar-search-input:focus::placeholder { color: var(--m-label-2); } .mail-page .topbar-icon-light { border: 0; background: transparent; color: var(--m-blue); border-radius: 8px; width: 32px; height: 32px; } .mail-page .topbar-icon-light:hover { background: var(--m-fill); } .mail-page .topbar-user { border-radius: 999px; } .mail-page .topbar-user:hover { background: var(--m-fill); } .mail-page .topbar-user-avatar { background: var(--m-blue-fill); color: #fff; } /* Opaque, and no backdrop-filter — see the warning on .mail-page .topbar above. This bar is the direct parent of the Move menu, so it is the one that broke. */ .mail-page .actionbar { background: var(--m-bg); border-bottom: 0.5px solid var(--m-sep); gap: 4px; padding: 6px 12px; } .mail-page .ab-btn { /* A flex item defaults to min-width:auto, which is what stops it shrinking below its own content. The phone rules below set an explicit min-width for the touch target, which removes that floor — at 768px, where the labels are still shown, the bar then squeezed the buttons instead of scrolling and every label overflowed onto its neighbour. The bar already has overflow-x:auto; this makes it use it. */ flex-shrink: 0; border: 0; background: transparent; color: var(--m-blue); border-radius: 8px; font-size: 14px; font-weight: 400; padding: 7px 10px; } .mail-page .ab-btn:hover:not(:disabled) { background: var(--m-fill); } .mail-page .ab-btn:disabled { color: var(--m-label-3); opacity: 1; } .mail-page .ab-primary { background: var(--m-blue-fill); color: #fff; font-weight: 500; border-radius: 999px; padding: 7px 15px; } .mail-page .ab-primary:hover { background: var(--m-blue-fill); opacity: 0.88; } .mail-page .ab-divider { background: var(--m-sep); } /* ---- sidebar ---- */ .mail-page .folder-pane { background: var(--m-sidebar); border-right: 0.5px solid var(--m-sep); } .mail-page .folder-pane-header, .mail-page .folder-pane-footer { border-color: var(--m-sep); } .mail-page .folder-list { padding: 6px; } .mail-page .folder-item { border-radius: 8px; /* 30px, not 38px: a mailbox list is scanned, not tapped one item at a time, and on a pointer device the row only has to be comfortably clickable. Nine mailboxes reclaim roughly a quarter of the sidebar. The phone drawer takes these back up to a 44px touch target further down. */ min-height: 30px; padding: 2px 10px; font-size: 14px; color: var(--m-label); gap: 9px; margin-bottom: 0; } .mail-page .folder-item:hover { background: var(--m-fill); } .mail-page .folder-item.active { background: var(--m-blue-fill); color: #fff; font-weight: 500; } /* No capsule on the selected row: a 28%-white pill over the blue lifts the backdrop to 3.3:1 against its own white digits. Mail drops the pill here and lets the plain white count sit on the blue (5.5:1). */ .mail-page .folder-item.active .folder-badge { background: transparent; color: #fff; } /* Tinted glyphs, not filled tiles. A 27px tile forced a 38px row and made the sidebar the loudest thing on screen; Mail draws these as a plain coloured symbol, which is both quieter and ~8px shorter per row. Colours still key off the type the JS already stamps on each row, so no markup changed. */ .mail-page .folder-item .folder-icon { box-sizing: border-box; width: 19px; height: 19px; padding: 0; border-radius: 0; background: transparent; color: var(--f-gray); flex: 0 0 auto; } .mail-page .folder-item[data-folder-type="inbox"] .folder-icon { color: var(--f-blue); } .mail-page .folder-item[data-folder-type="sent"] .folder-icon { color: var(--f-green); } .mail-page .folder-item[data-folder-type="drafts"] .folder-icon { color: var(--f-orange); } .mail-page .folder-item[data-folder-type="trash"] .folder-icon { color: var(--f-red); } /* Brown, not pink: pink sits a few degrees from the red used for Trash and the two read as the same colour at this size. */ .mail-page .folder-item[data-folder-type="spam"] .folder-icon { color: var(--f-brown); } .mail-page .folder-item[data-folder-type="archive"] .folder-icon { color: var(--f-indigo); } .mail-page .folder-item[data-folder-type="later"] .folder-icon { color: var(--f-teal); } .mail-page .folder-item[data-folder-type="outbox"] .folder-icon { color: var(--f-purple); } /* On the filled blue row the tint would be blue-on-blue. */ .mail-page .folder-item.active .folder-icon, .mail-page .folder-item.active[data-folder-type] .folder-icon { color: #fff; } .mail-page .folder-badge { /* --m-fill, not --m-fill-2: the heavier 20% grey darkens the pill enough that the secondary-label digits inside it land at 4.3:1. The lighter pill reads the same and clears AA. */ background: var(--m-fill); color: var(--m-label-2); border-radius: 999px; font-size: 12px; font-weight: 600; padding: 1px 7px; } .mail-page .acct-group-header { border-radius: 8px; } .mail-page .acct-group-header:hover { background: var(--m-fill); } .mail-page .acct-name { font-size: 13px; font-weight: 600; color: var(--m-label); } .mail-page .acct-email { font-size: 11px; color: var(--m-label-2); } .mail-page .acct-add { color: var(--m-blue); border-radius: 8px; } .mail-page .acct-add:hover { background: var(--m-fill); } /* ---- message list ---- */ .mail-page .list-pane { background: var(--m-list); border-right: 0.5px solid var(--m-sep); } .mail-page .list-folder-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--m-label); border-bottom: 0; padding-bottom: 4px; } .mail-page .list-filters { border-bottom: 0.5px solid var(--m-sep); gap: 6px; } .mail-page .list-filter-chip { border: 0; background: var(--m-fill); color: var(--m-label-2); border-radius: 999px; font-size: 13px; padding: 5px 12px; } .mail-page .list-filter-chip:hover { background: var(--m-fill-2); } .mail-page .list-filter-chip.active { background: var(--m-blue-fill); color: #fff; font-weight: 500; } .mail-page .list-group-header { font-size: 12px; font-weight: 600; color: var(--m-label-2); background: transparent; padding: 14px 16px 4px; border: 0; letter-spacing: 0; text-transform: none; } /* iOS Mail row: unread dot, sender, time right, subject, two-line preview. */ .mail-page .msg-item { position: relative; align-items: flex-start; gap: 10px; padding: 10px 14px 11px 12px; border: 0; border-radius: 0; background: transparent; } .mail-page .msg-item::after { content: ''; position: absolute; left: 58px; right: 0; bottom: 0; height: 0.5px; /* Falls back to --m-sep in light, where the structural weight is right. */ background: var(--m-sep-row, var(--m-sep)); } .mail-page .msg-item:last-child::after { display: none; } .mail-page .msg-item:hover { background: var(--m-fill); } .mail-page .msg-item.active { background: var(--m-blue-fill); color: #fff; } .mail-page .msg-item.active .msg-from, .mail-page .msg-item.active .msg-subject { color: #fff; } .mail-page .msg-item.active .msg-preview, /* Opaque white, not 78%: over the blue fill the translucent version lands at 3.9:1. The time is de-emphasised by size and weight instead. */ .mail-page .msg-item.active .msg-time { color: #fff; } .mail-page .msg-item.active::after { background: transparent; } .mail-page .msg-item.active .msg-dot { background: #fff; } .mail-page .msg-item.selected { background: color-mix(in srgb, var(--m-blue) 16%, transparent); } .mail-page .msg-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; margin-top: 6px; flex: 0 0 auto; } .mail-page .msg-item.unread .msg-dot { background: var(--m-blue); } .mail-page .msg-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 600; } .mail-page .msg-from { font-size: 15px; font-weight: 400; color: var(--m-label); letter-spacing: -0.01em; } .mail-page .msg-item.unread .msg-from { font-weight: 700; } .mail-page .msg-time { font-size: 12.5px; color: var(--m-label-2); } .mail-page .msg-subject { font-size: 14px; font-weight: 400; color: var(--m-label); margin-top: 1px; } .mail-page .msg-item.unread .msg-subject { font-weight: 500; } .mail-page .msg-preview { font-size: 13px; line-height: 1.35; color: var(--m-label-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mail-page .msg-indicator { color: var(--m-label-3); } .mail-page .msg-indicator-pin { color: var(--m-orange); } .mail-page .msg-thread-count { background: var(--m-fill-2); color: var(--m-label-2); border-radius: 999px; font-size: 11px; font-weight: 600; padding: 0 6px; } /* ---- reading pane ---- */ .mail-page .reading-pane { background: var(--m-surface); } .mail-page .reading-actions { background: color-mix(in srgb, var(--m-surface) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--m-sep); gap: 4px; } .mail-page .reading-actions button, .mail-page .read-btn { border: 0; background: transparent; color: var(--m-blue); border-radius: 8px; } .mail-page .reading-actions button:hover, .mail-page .read-btn:hover { background: var(--m-fill); } .mail-page .reading-subject { font-size: 22px; font-weight: 700; letter-spacing: -0.022em; color: var(--m-label); } .mail-page .thread-msg { border-color: var(--m-sep); } .mail-page .thread-msg-from-name { font-weight: 600; color: var(--m-label); } .mail-page .thread-msg-from-email, .mail-page .thread-msg-to, .mail-page .thread-msg-date { color: var(--m-label-2); font-size: 12.5px; } /* No colour here on purpose: the base rule uses --c-text-secondary, which the pane's existing dark-mode token block already keeps legible on the white reading surface. */ .mail-page .reading-empty-text { font-size: 15px; } /* ---- compose: an iOS sheet ---- */ .mail-page .compose-modal { border-radius: 14px 14px 0 0; border: 0.5px solid var(--m-sep); box-shadow: 0 -8px 40px rgba(0,0,0,0.22); overflow: hidden; } .mail-page .compose-header { background: color-mix(in srgb, var(--m-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--m-sep); } .mail-page .compose-title { font-size: 15px; font-weight: 600; color: var(--m-label); } .mail-page .compose-hdr-btn { color: var(--m-label-2); border-radius: 7px; } .mail-page .compose-hdr-btn:hover { background: var(--m-fill); } .mail-page .compose-row { border-bottom: 0.5px solid var(--m-sep); } .mail-page .compose-row label, .mail-page .compose-label { color: var(--m-label-2); font-size: 14px; } .mail-page .compose-row input { font-size: 14px; color: var(--m-label); } .mail-page .compose-send { background: var(--m-blue-fill); color: #fff; border: 0; border-radius: 999px; font-weight: 500; } .mail-page .compose-send:hover { opacity: 0.88; } .mail-page .compose-tool { border-radius: 7px; color: var(--m-label); } .mail-page .compose-tool:hover { background: var(--m-fill); } .mail-page .compose-tool.active { background: var(--m-fill-2); color: var(--m-blue); } /* ---- focus ring ---- */ .mail-page a:focus-visible, .mail-page button:focus-visible, .mail-page input:focus-visible, .mail-page [role="option"]:focus-visible { outline: 2px solid var(--m-blue); outline-offset: -2px; border-radius: 8px; } /* Unread rows: the previous design tinted subject/time/count brand-blue. In Mail the unread cue is the blue DOT plus a bolder sender — the text itself stays label-coloured, or every unread row reads as a link. These selectors carry the .msg-item.unread qualifier so they outrank the original rules. */ .mail-page .msg-item.unread .msg-subject { color: var(--m-label); } .mail-page .msg-item.unread .msg-time { color: var(--m-label-2); font-weight: 400; } /* (0,3,0), so it outranks the plain .msg-thread-count rule further down and has to carry the corrected colours itself. */ .mail-page .msg-item.unread .msg-thread-count { color: var(--m-label); background: var(--m-fill); } .mail-page .msg-item.active.unread .msg-subject { color: #fff; } .mail-page .msg-item.active.unread .msg-time { color: #fff; } /* ---- typography: no mono, no all-caps ---- The previous design leaned on a monospace face and letter-spaced ALL CAPS for labels. iPadOS uses one face (SF) at every size and reserves capitals for actual acronyms, so a folder called "Folders" reads as "Folders". Undoing it here rather than in the markup keeps the strings translatable and leaves the Settings page — which is scoped separately — exactly as it is. */ .mail-page .list-folder-name, .mail-page .folder-pane-title, .mail-page .cal-pane-toggle, .mail-page .cal-field-label, .mail-page .acct-field-label, .mail-page .rule-section-label, .mail-page .shortcuts-group h3 { text-transform: none; letter-spacing: -0.01em; font-family: inherit; } .mail-page .folder-pane-title, .mail-page .cal-pane-toggle { font-size: 13px; font-weight: 600; color: var(--m-label-2); } .mail-page .cal-field-label, .mail-page .acct-field-label, .mail-page .rule-section-label, .mail-page .shortcuts-group h3 { font-size: 13px; font-weight: 600; color: var(--m-label-2); } .mail-page .folder-pane-account-email, .mail-page .pager-info, .mail-page .reading-thread-summary, .mail-page .app-footer { font-family: inherit; letter-spacing: 0; } .mail-page .pager-info { font-size: 12px; color: var(--m-label-2); } .mail-page .folder-pane-account-email { font-size: 13px; color: var(--m-label); } .mail-page .reading-thread-summary { font-size: 13px; color: var(--m-label-2); border-bottom: 0.5px solid var(--m-sep); } /* The footer pill hard-coded a white background, so on the black Mail background it showed as a bright chip. Track the surface token instead. */ .mail-page .app-footer { font-size: 11px; background: color-mix(in srgb, var(--m-surface) 82%, transparent); border: 0.5px solid var(--m-sep); color: var(--m-label-3); box-shadow: none; } .mail-page .app-footer strong { color: var(--m-label-2); font-weight: 600; } .mail-page .app-footer a { color: var(--m-blue); } /* ---- dialogs: iOS sheets ---- Four dialog families share one look: a heavier scrim, a 14pt card, hairline rules, and a filled blue confirm. Listed rather than wildcarded so a future dialog opts in deliberately. */ .mail-page .cal-modal-backdrop, .mail-page .shortcuts-modal-backdrop, .mail-page .acct-modal-backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .mail-page .cal-modal-panel, .mail-page .shortcuts-modal-panel, .mail-page .acct-modal-card { background: var(--m-surface); border: 0.5px solid var(--m-sep); border-radius: 14px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28); } .mail-page .cal-modal-header, .mail-page .shortcuts-modal-header, .mail-page .acct-modal-header { border-bottom: 0.5px solid var(--m-sep); } .mail-page .cal-modal-footer { border-top: 0.5px solid var(--m-sep); } .mail-page .cal-modal-title, .mail-page .shortcuts-modal-title, .mail-page .acct-modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--m-label); } .mail-page .cal-modal-close, .mail-page .shortcuts-modal-close, .mail-page .acct-modal-close { border-radius: 999px; color: var(--m-label-2); } .mail-page .cal-modal-close:hover, .mail-page .shortcuts-modal-close:hover, .mail-page .acct-modal-close:hover { background: var(--m-fill); color: var(--m-label); } .mail-page .cal-modal-btn { border: 0; border-radius: 999px; background: var(--m-fill); color: var(--m-blue); font-weight: 500; } .mail-page .cal-modal-btn:hover { background: var(--m-fill-2); } .mail-page .cal-modal-btn-primary { background: var(--m-blue-fill); color: #fff; } .mail-page .cal-modal-btn-primary:hover { background: var(--m-blue-fill); opacity: 0.88; } .mail-page .cal-modal-btn-danger { background: var(--m-fill); color: var(--m-red); } .mail-page .cal-modal-btn-danger:hover { background: var(--m-fill-2); color: var(--m-red); } /* ---- sidebar: account groups ---- The current account was marked with a brand-tinted bar and brand-coloured name. In Mail the selected mailbox is the only blue thing in the sidebar, so the account header stays neutral and carries its weight in type instead. */ .mail-page .acct-group { border-bottom: 0.5px solid var(--m-sep); } .mail-page .acct-group.current > .acct-group-header { background: transparent; } .mail-page .acct-group-header:hover { background: var(--m-fill); } .mail-page .acct-group-header { border-radius: 8px; } .mail-page .acct-name, .mail-page .acct-group.current > .acct-group-header .acct-name { color: var(--m-label); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .mail-page .acct-email { color: var(--m-label-2); font-size: 12px; font-family: inherit; letter-spacing: 0; } .mail-page .acct-group.current > .acct-group-header .acct-unread { color: var(--m-blue); } .mail-page .acct-chev { color: var(--m-label-3); } .mail-page .acct-folders-loading { color: var(--m-label-3); font-size: 12px; } .mail-page .acct-add { color: var(--m-blue); font-size: 13px; border-radius: 8px; } .mail-page .acct-add:hover { background: var(--m-fill); } .mail-page .acct-add .icon { color: var(--m-blue); } .mail-page .folder-pane-add, .mail-page .cal-pane-add { border-radius: 999px; color: var(--m-blue); } .mail-page .folder-pane-add:hover, .mail-page .cal-pane-add:hover { background: var(--m-fill); color: var(--m-blue); } /* ---- sidebar: mini calendar ---- Today was a rounded-square brand chip; iOS draws it as a filled circle. */ .mail-page .cal-mini-day.today .cal-mini-num { background: var(--m-blue-fill); color: #fff; border-radius: 50%; font-weight: 600; } .mail-page .cal-mini-day:hover { background: transparent; } .mail-page .cal-mini-day:hover .cal-mini-num { background: var(--m-fill); border-radius: 50%; } .mail-page .cal-mini-day.today:hover .cal-mini-num { background: var(--m-blue-fill); } .mail-page .cal-mini-head { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 600; color: var(--m-label-3); } .mail-page .cal-mini-num { color: var(--m-label); font-size: 12px; } .mail-page .cal-mini-month { font-size: 14px; font-weight: 600; color: var(--m-label); border-radius: 8px; } .mail-page .cal-mini-month:hover { background: var(--m-fill); } .mail-page .cal-mini-navbtn { border-radius: 999px; color: var(--m-blue); } .mail-page .cal-mini-navbtn:hover { background: var(--m-fill); color: var(--m-blue); } .mail-page .cal-agenda { border-top: 0.5px solid var(--m-sep); background: transparent; } .mail-page .cal-agenda-header { color: var(--m-label-2); font-size: 12px; } .mail-page .cal-agenda-empty { color: var(--m-label-3); font-size: 12px; } /* ---- selection bar ---- */ .mail-page .list-selection { background: color-mix(in srgb, var(--m-blue) 12%, var(--m-surface)); border-bottom: 0.5px solid var(--m-sep); } .mail-page .list-selection-count { color: var(--m-label); font-size: 13px; font-weight: 600; } .mail-page .list-selection-all { color: var(--m-blue); font-size: 13px; } .mail-page .list-selection-close { border-radius: 999px; color: var(--m-blue); } .mail-page .list-selection-close:hover { background: var(--m-fill); } /* ---- topbar on phones ---- The logo and the right-hand controls are absolutely positioned so the search field can sit optically centred on wide screens. Below 720px the search grows to `flex: 1` and, because the other two are out of flow, it runs underneath both of them — the brand mark lands on top of the placeholder text. Returning all three to normal flex flow on phones lets the row size itself, which also holds if a white-label brand ships a wider logo. */ @media (max-width: 720px) { .mail-page .topbar-logo-slot, .mail-page .topbar-end { position: static; transform: none; } .mail-page .topbar-search { margin: 0 10px; min-width: 0; } } /* ---- topbar text colour ---- The original topbar was a solid brand-blue bar, so its contents are hard-coded white. This design makes the bar a light translucent panel, which leaves the user's name and the sign-out control white-on-near-white (1.1:1). Re-point them at the label tokens; the logo tile keeps white glyphs because it paints its own blue fill. */ .mail-page .topbar-user, .mail-page .topbar-user-name { color: var(--m-label); } .mail-page .topbar-user-logout { color: var(--m-label-2); opacity: 1; } .mail-page .topbar-user:hover { background: var(--m-fill); } .mail-page .topbar-user:hover .topbar-user-logout { color: var(--m-label); } .mail-page .topbar-logo-default { background: transparent; } .mail-page .topbar-logo-default:hover { background: var(--m-fill); } .mail-page .topbar-logo-text { color: var(--m-label); } /* A row that is both unread and selected paints the dot in the same blue as the selection fill, so the unread cue disappears exactly when the row is focused. White keeps it readable, matching the rest of the selected row's text. */ .mail-page .msg-item.active.unread .msg-dot { background: #fff; } /* The compact 30px mailbox row suits a pointer. In the phone drawer the same row is a touch target, so it goes back to the 44px minimum. */ /* Sized by INPUT TYPE, not width: an iPad in landscape is 1024px wide and still a touch device, so a width-only query left every control at pointer size there. (pointer: coarse) covers that; the width clause keeps a narrow desktop window working too. */ @media (max-width: 820px), (pointer: coarse) { .mail-page .folder-item { min-height: 44px; padding: 4px 14px; font-size: 15px; gap: 11px; } .mail-page .folder-item .folder-icon { width: 21px; height: 21px; } .mail-page .folder-list { padding: 8px; } } /* ═══════════════════════════════════════════════════════════════════════════ WORKSPACE LOGO — legibility on the opposite appearance ═══════════════════════════════════════════════════════════════════════════ Tenants upload the logo they already have, and brand assets are usually drawn in dark ink on transparency because they were made for white letterheads. On the dark topbar such a logo vanishes; a knocked-out white logo vanishes in light mode just the same. assets/logo-ink.js measures the image once and stamps data-needs-plate="dark"|"light"|"both" — the appearance(s) the mark would be lost on, judged per pixel against a 3:1 floor, and nothing at all when it is legible either way. A plate rather than filter:invert(): inversion would rescue a black wordmark but turn a blue one orange, and a white-label tenant's colours are the one thing that must survive. box-sizing keeps the padding inside the existing max-height so the topbar never grows. ═══════════════════════════════════════════════════════════════════════════ */ .mail-page .topbar-logo, .settings-page .logo-preview img { box-sizing: border-box; border-radius: 6px; } /* Dark ink on a dark surface. */ html.theme-dark .mail-page .topbar-logo[data-needs-plate="dark"], html.theme-dark .mail-page .topbar-logo[data-needs-plate="both"], html.theme-dark .settings-page .logo-preview img[data-needs-plate="dark"], html.theme-dark .settings-page .logo-preview img[data-needs-plate="both"] { background: #fff; padding: 3px 7px; /* The drop-shadow is tuned for a mark floating on the bar; over a white plate it just dirties the edge. */ filter: none; } /* Light ink on a light surface. */ html.theme-light .mail-page .topbar-logo[data-needs-plate="light"], html.theme-light .mail-page .topbar-logo[data-needs-plate="both"], html.theme-light .settings-page .logo-preview img[data-needs-plate="light"], html.theme-light .settings-page .logo-preview img[data-needs-plate="both"] { background: #1c1c1e; padding: 3px 7px; filter: none; } /* ---- the Move menu ---- Left unstyled by the original pass, so it kept the old boxy look while everything around it moved. An iOS menu: 12pt panel, hairline border, roomy rows. No containing-block property here or on any ancestor — see the warning on .mail-page .topbar. */ .mail-page .dropdown { background: var(--m-surface); border: 0.5px solid var(--m-sep); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24); padding: 5px; min-width: 200px; } .mail-page .dropdown-item { border-radius: 7px; padding: 7px 10px; font-size: 14px; color: var(--m-label); gap: 9px; } .mail-page .dropdown-item:hover { background: var(--m-fill); } .mail-page .dropdown-item .icon { color: var(--m-label-2); } /* ---- compose header: the close button ---- .compose-close is a DIFFERENT class from .compose-hdr-btn, so restyling the header's minimize/expand buttons left this one on the white it was given for the old dark brand header — white on a white header, 1.0:1, invisible. It sits outside .app-shell, which is why the first contrast sweep never saw it. */ .mail-page .compose-close { color: var(--m-label-2); border-radius: 7px; } .mail-page .compose-close:hover { background: var(--m-fill); color: var(--m-label); } /* ---- alert buttons ---- These were given a grey fill, which lifts the backdrop under their own tinted text: Cancel fell to 3.0:1 and Delete to 3.0:1. iOS alert buttons are plain tinted text on the sheet itself, which is both the native look and legible. Destructive text uses the accessible red — systemRed is only 3.6:1 on white. */ .mail-page .cal-modal-btn { background: transparent; color: var(--m-blue); } .mail-page .cal-modal-btn:hover { background: var(--m-fill); } .mail-page .cal-modal-btn-danger, .mail-page .cal-modal-btn-danger:hover { color: var(--f-red); background: transparent; } .mail-page .cal-modal-btn-danger:hover { background: var(--m-fill); } .mail-page .cal-modal-btn-primary, .mail-page .cal-modal-btn-primary:hover { color: #fff; } /* ---- action bar: colour-coded glyphs ---- Mail tints a toolbar with one accent colour and reserves per-item colour for the sidebar, which is why these started out uniformly blue. Side by side with the colour-coded mailboxes it just read as flat, so the toolbar now uses the same semantic palette — Delete in the Trash red, Archive in the Archive indigo — and the label drops to the neutral label colour so the colour reads as the icon's, exactly as it does in the sidebar. Carried on a custom property rather than per-button colour rules: that keeps the disabled rule below at a higher specificity than the tints, so a disabled Delete greys out instead of staying bright red and inviting a click. */ .mail-page [id="abDelete"] { --ab-tint: var(--f-red); } .mail-page [id="abArchive"] { --ab-tint: var(--f-indigo); } .mail-page [id="abMove"] { --ab-tint: var(--f-teal); } .mail-page [id="abFlag"] { --ab-tint: var(--f-orange); } .mail-page [id="abMarkRead"] { --ab-tint: var(--f-green); } .mail-page [id="abMarkUnread"] { --ab-tint: var(--f-gray); } .mail-page [id="abSync"] { --ab-tint: var(--f-blue); } .mail-page .ab-btn { color: var(--m-label); } .mail-page .ab-btn .icon { color: var(--ab-tint, var(--m-blue)); } .mail-page .ab-btn .ab-chev { color: var(--m-label-3); } /* (0,4,0) — outranks both tint rules above, so disabled always wins. */ .mail-page .ab-btn:disabled { color: var(--m-label-3); } .mail-page .ab-btn:disabled .icon { color: var(--m-label-3); } /* ---- restore the filled buttons ---- The two rules above are written against the plain .cal-modal-btn / .ab-btn, and the filled variants carry those same classes, so at equal specificity the later rule was winning and stripping their fill and their white text: the alert's confirm button went white-on-white (1.0:1) and New Email's label and "+" went dark-on-blue. These re-assert the filled treatment after them. */ .mail-page .cal-modal-btn.cal-modal-btn-primary { background: var(--m-blue-fill); color: #fff; } .mail-page .cal-modal-btn.cal-modal-btn-primary:hover { background: var(--m-blue-fill); opacity: 0.88; } .mail-page .ab-btn.ab-primary, .mail-page .ab-btn.ab-primary .icon, .mail-page .ab-btn.ab-primary:hover .icon { color: #fff; } .mail-page .ab-btn.ab-primary { background: var(--m-blue-fill); } /* The alert footer kept its own grey fill, which lightens the surface under the tinted Cancel text (3.9:1 in dark). iOS alerts have no separate footer plate — the buttons sit on the sheet itself. */ .mail-page .cal-modal-footer { background: transparent; } /* Send and the account-form submit still carried the old brand blue, which is only 3.7:1 under white text. They were never restyled, so they were also the last two controls not speaking the same language as everything around them. */ .mail-page .btn-send, .mail-page .btn-send-chev, .mail-page .acct-btn-primary { background: var(--m-blue-fill); border-color: transparent; } .mail-page .btn-send:hover:not(:disabled), .mail-page .btn-send-chev:hover:not(:disabled), .mail-page .acct-btn-primary:hover:not(:disabled) { background: var(--m-blue-fill); opacity: 0.88; } .mail-page .btn-send:disabled { background: var(--m-fill-2); color: var(--m-label-3); } /* --m-label-3 is the tertiary tone; on the sidebar's own grey it lands at 4.4:1, just under. This is a transient status line, but it is still text. */ .mail-page .acct-folders-loading { color: var(--m-label-2); } /* The thread-count pill and the selection bar's Cancel both sat a little under 4.5:1 in dark — the tinted fill behind each lightens the backdrop under its own text. Found by sweeping the whole document rather than one pane. */ .mail-page .msg-thread-count { color: var(--m-label); background: var(--m-fill); } .mail-page .list-selection-close { color: var(--m-label); } .mail-page .list-selection-close:hover { background: var(--m-fill); color: var(--m-label); } /* The one base .msg-item.active rule with no .mail-page counterpart at matching specificity, so on a selected row the count stayed old-brand-blue on white (3.7:1). No pill here for the same reason the folder badge drops its own on a selected row — a translucent plate over the blue fill lifts the backdrop under its own white digits. */ .mail-page .msg-item.active .msg-thread-count, .mail-page .msg-item.active.unread .msg-thread-count { background: transparent; color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ SETTINGS — legibility corrections found by the whole-app sweep ═══════════════════════════════════════════════════════════════════════════ */ /* Secondary buttons carried a grey fill, and a tinted plate under tinted text lifts the backdrop against it: 4.3:1 in light, 3.5:1 in dark. iOS draws these as plain tinted text on the card, which is both the native look and legible. The filled variants below re-assert themselves after this. */ .settings-page .btn, .settings-page .cal-modal-btn { background: transparent; } .settings-page .btn:hover, .settings-page .cal-modal-btn:hover { background: var(--ip-fill); } .settings-page .btn.btn-primary, .settings-page .cal-modal-btn.cal-modal-btn-primary, .settings-page .settings-inline-save { background: var(--ip-blue-fill); color: #fff; } .settings-page .btn.btn-primary:hover, .settings-page .cal-modal-btn.cal-modal-btn-primary:hover, .settings-page .settings-inline-save:hover { background: var(--ip-blue-fill); opacity: 0.85; } /* Destructive: tinted text, not a red plate, so it matches the others — and the accessible red, since systemRed is 3.6:1 on white. */ .settings-page .btn.btn-danger, .settings-page .cal-modal-btn.cal-modal-btn-danger { background: transparent; color: var(--ip-red-ink); } .settings-page .btn.btn-danger:hover, .settings-page .cal-modal-btn.cal-modal-btn-danger:hover { background: var(--ip-fill); color: var(--ip-red-ink); } /* The banner heading used systemRed as text (3.6:1 on the white card). The class is .settings-alert-danger, not .settings-banner. */ .settings-page .settings-alert-danger strong, .settings-page .settings-alert-danger b { color: var(--ip-red-ink); } /* The sticky bar is 80% opaque with real content scrolling beneath it, so a white card passing under lifts it toward #333 and the tinted title and "Back to inbox" drop to 3.7:1. Raising the opacity bounds how far the backdrop can lift it while keeping the frosted look the blur is there for. */ html.theme-dark .settings-page .settings-topbar { background: color-mix(in srgb, var(--ip-bg) 94%, transparent); } /* "Back to inbox" carries an 18% white plate from the era when the bar was solid brand blue. Over the dark bar that plate lifts the backdrop to #2e2e2e and the tinted label falls to 3.7:1 — the plate is the whole problem, and on a translucent bar it was never doing anything anyway. */ .settings-page .settings-back { background: transparent; } .settings-page .settings-back:hover { background: var(--ip-fill); } /* Same as the inbox: the dialog footer kept its own grey fill, lightening the surface under the tinted buttons that sit on it. */ .settings-page .cal-modal-footer { background: transparent; } /* The dialog panel kept the old dark surface (#20242b), lighter than the card the rest of the page uses, which left the tinted footer buttons at 4.3:1. Matching the card also makes the dialog look like the page it belongs to. */ .settings-page .cal-modal-panel, .settings-page .acct-modal-card { background: var(--ip-card); border: 0.5px solid var(--ip-sep); } /* ═══════════════════════════════════════════════════════════════════════════ SIGN-IN — legibility corrections found by the whole-app sweep ═══════════════════════════════════════════════════════════════════════════ This page was never part of the iPadOS work, so it still runs on the base brand tokens. Three of them do not survive dark mode. */ /* The primary button is a gradient from --c-brand to --c-brand-active. In dark mode "active" is LIGHTER than the base (the opposite of light mode, where it is the pressed/darker shade), so the gradient ends on #6cb4ee and the white label sits at 2.2:1 across the bottom half of the biggest button on the page. A flat fill removes the gradient's bad end entirely. */ .login-page .btn-primary { background: #0068cc; } .login-page .btn-primary:hover:not(:disabled) { background: #0068cc; opacity: 0.9; } html.theme-dark .login-page .btn-primary { background: #0a6ecd; } html.theme-dark .login-page .btn-primary:hover:not(:disabled) { background: #0a6ecd; opacity: 0.9; } /* Tinted text on the card: the brand blue is 4.2:1 in dark. */ html.theme-dark .login-page .login-brand-tag, html.theme-dark .login-page .advanced-toggle { color: #4da3ff; } .login-page .login-brand-tag, .login-page .advanced-toggle { color: #0068cc; } /* Footer sits on the shell rather than the white card, so the AA-on-white grey lands at 4.05:1 there. */ .login-page .login-page-footer, .login-page .login-page-footer span { color: #5f5f63; } html.theme-dark .login-page .login-page-footer, html.theme-dark .login-page .login-page-footer span { color: rgba(235, 235, 245, 0.72); } html.theme-dark .login-page .login-page-footer strong { color: rgba(235, 235, 245, 0.86); } .login-page .login-page-footer strong { color: #48484c; } /* ---- separating the two bars ---- Both were the same colour with a 0.5px translucent hairline between them, which over a dark surface composites to nearly the surface itself — at 0.5px the boundary simply was not there. Two changes: the bars now sit on different surfaces (the header on the chrome surface, the toolbar at page level, so the band between them reads tonally), and the rules between them are opaque so the line survives whatever it is drawn over. This also gives the toolbar/list boundary its own contrast, since the list is the raised surface. */ .mail-page .topbar { background: var(--m-chrome); border-bottom: 1px solid var(--m-sep-solid); } .mail-page .actionbar { background: var(--m-bg); border-bottom: 1px solid var(--m-sep-solid); } /* ═══════════════════════════════════════════════════════════════════════════ PHONE TOUCH TARGETS ═══════════════════════════════════════════════════════════════════════════ Measured at 375px: the toolbar buttons were 38x38, the filter chips 25 tall, the row select-avatars and the folder "+" 24x24, and the compose formatting tools 28x28. All were sized for a pointer. Apple asks for 44pt; WCAG 2.5.8 sets a 24px floor, which several of these were sitting exactly on. Where the control's own box can simply grow it does. Where growing it would change the design — the 32px avatar, the small glyph buttons — the visual size is kept and only the hit box is enlarged, so nothing looks different but the whole 44px is tappable. */ @media (max-width: 820px), (pointer: coarse) { /* toolbar and header glyph buttons */ .mail-page .ab-btn, .mail-page .ab-btn.ab-icon-only, .mail-page .topbar-icon-light, .mail-page .pager-btn { min-height: 44px; min-width: 44px; } .mail-page .topbar-user { min-height: 44px; } /* filter chips: 25px tall is a hard target while scrolling */ .mail-page .list-filter-chip { min-height: 36px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } /* The select-avatar stays 32px; the button around it becomes the target. Negative margin keeps the row's layout and height exactly as it was. */ /* body.mail-page, not .mail-page: the density preference is written as body.density-compact .msg-select, which at (0,2,1) outranks a plain two-class selector and pinned this back to 24px. */ body.mail-page .msg-select { width: 44px; height: 44px; margin: -6px; display: flex; align-items: center; justify-content: center; } /* Small glyph buttons: grow the hit box past the visual box. The pseudo element is the target, so the icon keeps its size and position. */ .mail-page .folder-pane-add, .mail-page .cal-pane-add, .mail-page .compose-tool, .mail-page .compose-close, .mail-page .compose-hdr-btn, .mail-page .cal-modal-close, .mail-page .shortcuts-modal-close, .mail-page .acct-modal-close, .mail-page .attach-preview-close, .mail-page .cal-mini-navbtn { position: relative; } .mail-page .folder-pane-add::after, .mail-page .cal-pane-add::after, .mail-page .compose-tool::after, .mail-page .compose-close::after, .mail-page .compose-hdr-btn::after, .mail-page .cal-modal-close::after, .mail-page .shortcuts-modal-close::after, .mail-page .acct-modal-close::after, .mail-page .attach-preview-close::after, .mail-page .cal-mini-navbtn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Menu and dialog buttons */ .mail-page .dropdown-item, .mail-page .cal-modal-btn, .mail-page .btn-send, .mail-page .btn-send-chev, .mail-page .acct-btn-primary, .mail-page .acct-btn-secondary, .mail-page .compose-discard, .mail-page .list-selection-close, .mail-page .acct-advanced-toggle, .mail-page .compose-row-toggle { min-height: 44px; } .mail-page .compose-discard { min-width: 44px; } /* A checkbox is tapped via its label, so the label carries the target. */ .mail-page .cal-row label, .mail-page .shortcuts-row label, .mail-page label:has(> input[type="checkbox"]) { min-height: 44px; display: flex; align-items: center; } } /* The rest of the phone targets the sweep turned up: the brand link, the reading-pane Back button, the Bcc toggle, the send-menu chevron, the attachment Download button and the filter's folder