:root { --wm-border: #e8eaed; --wm-bg: #f6f7f9; --wm-surface: #fff; --wm-text: #1f2328; --wm-muted: #6b7280; --wm-accent: #3b6bf0; --wm-accent-soft: #eef2ff; --wm-danger: #e5484d; --wm-danger-soft: #fdecec; --wm-warning: #eda100; } /* ---------- Dark mode ---------- Theme is picked per-mailbox in Settings ("light"/"dark"/"system") and rendered server-side as to avoid a flash on load. "system" (and any page without the attribute, e.g. the pre-login screen) falls through to this prefers-color-scheme block; [data-theme="dark"/"light"] below has higher specificity than a bare :root and so overrides it regardless of OS setting. */ @media (prefers-color-scheme: dark) { :root { --wm-border: #33353a; --wm-bg: #16171a; --wm-surface: #1e2024; --wm-text: #e6e8eb; --wm-muted: #9aa1ab; --wm-accent: #6c8fff; --wm-accent-soft: #22304f; --wm-danger: #f0605f; --wm-danger-soft: #3a2224; --wm-warning: #f0b429; } } :root[data-theme="dark"] { --wm-border: #33353a; --wm-bg: #16171a; --wm-surface: #1e2024; --wm-text: #e6e8eb; --wm-muted: #9aa1ab; --wm-accent: #6c8fff; --wm-accent-soft: #22304f; --wm-danger: #f0605f; --wm-danger-soft: #3a2224; --wm-warning: #f0b429; } :root[data-theme="light"] { --wm-border: #e8eaed; --wm-bg: #f6f7f9; --wm-surface: #fff; --wm-text: #1f2328; --wm-muted: #6b7280; --wm-accent: #3b6bf0; --wm-accent-soft: #eef2ff; --wm-danger: #e5484d; --wm-danger-soft: #fdecec; --wm-warning: #eda100; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--wm-text); background: var(--wm-bg); font-size: 14px; } a { color: inherit; } button { font-family: inherit; } /* Form controls don't reliably inherit color from the document in every browser (dark-mode-aware UA styles can pick their own text color for the light color-scheme our page never declares) — pin it explicitly so inputs/selects/textareas always match the theme instead of rendering unreadable. */ input, select, textarea { color: var(--wm-text); } /* ---------- Login page (split screen: dark brand panel + form panel) ---------- */ .wm-login-page { min-height: 100vh; display: flex; background: var(--wm-surface); } .wm-login-left { width: 440px; flex-shrink: 0; background: linear-gradient(145deg, #1e2a45 0%, #16181d 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; } .wm-login-left::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(59,130,246,.18) 0%, transparent 65%), radial-gradient(ellipse at 70% 70%, rgba(139,92,246,.12) 0%, transparent 60%); } .wm-login-brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .wm-login-brand-icon { width: 72px; height: 72px; background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); border-radius: 20px; display: flex; align-items: center; justify-content: center; } .wm-login-brand-icon i { font-size: 2rem; color: #3b82f6; } .wm-login-brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; } .wm-login-brand h1 { font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: -.3px; margin: 0; } .wm-login-brand p { font-size: .88rem; color: #9ca3af; max-width: 280px; line-height: 1.6; margin: 0; } .wm-login-features { position: relative; z-index: 1; margin-top: 3rem; display: flex; flex-direction: column; gap: .85rem; width: 100%; } .wm-feature-item { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: .75rem 1rem; } .wm-feature-icon { width: 32px; height: 32px; flex-shrink: 0; background: rgba(59,130,246,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .wm-feature-icon i { font-size: 1rem; color: #3b82f6; } .wm-feature-text { font-size: .8rem; color: #9ca3af; line-height: 1.4; } .wm-feature-text strong { color: #d1d5db; font-weight: 600; } .wm-login-right { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; } .wm-login-form-wrap { width: 100%; max-width: 380px; } .wm-login-form-wrap h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; } .wm-login-form-wrap .wm-sub { color: var(--wm-muted); margin: 0 0 1.75rem; font-size: .88rem; } .wm-field { margin-bottom: 1.1rem; } .wm-field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; } .wm-field input { width: 100%; padding: .65rem .85rem; border: 1.5px solid var(--wm-border); border-radius: 10px; font-size: .9rem; background: var(--wm-bg); } .wm-field input:focus { outline: none; border-color: var(--wm-accent); background: var(--wm-surface); box-shadow: 0 0 0 3px var(--wm-accent-soft); } .wm-login-footer-note { text-align: center; font-size: .76rem; color: var(--wm-muted); margin-top: 1.75rem; } @media (max-width: 760px) { .wm-login-left { display: none; } } .wm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1rem; border-radius: 8px; border: 1px solid var(--wm-accent); background: var(--wm-accent); color: #fff; font-size: .9rem; font-weight: 600; cursor: pointer; } .wm-btn:hover { filter: brightness(1.05); } .wm-btn.wm-btn-block { width: 100%; } .wm-btn.wm-btn-secondary { background: var(--wm-surface); color: var(--wm-text); border-color: var(--wm-border); } .wm-btn.wm-btn-danger { background: var(--wm-danger); border-color: var(--wm-danger); } .wm-alert { padding: .6rem .8rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1rem; background: var(--wm-danger-soft); color: var(--wm-danger); } /* ---------- App shell ---------- */ .wm-app { display: flex; height: 100vh; overflow: hidden; } /* Far-left app-switcher rail */ .wm-rail { width: 56px; flex-shrink: 0; background: var(--wm-surface); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: .75rem 0; } .wm-rail-top, .wm-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .wm-rail-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent; color: var(--wm-muted); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wm-rail-btn:hover { background: var(--wm-bg); } .wm-rail-btn.active { background: var(--wm-accent-soft); color: var(--wm-accent); } .wm-rail-btn.wm-rail-disabled { opacity: .35; cursor: not-allowed; } .wm-rail-avatar { cursor: pointer; } .wm-rail-btn-logout:hover { background: var(--wm-danger-soft); color: var(--wm-danger); } /* Quota-ring avatar: a small conic progress ring (storage used / limit) in place of a flat initial. */ .wm-quota-ring { position: relative; background: var(--wm-bg); } .wm-quota-ring .wm-quota-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .wm-quota-ring .wm-quota-track { fill: none; stroke: var(--wm-border); stroke-width: 3; } .wm-quota-ring .wm-quota-fill { fill: none; stroke: var(--wm-accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .3s ease; } .wm-quota-ring .wm-quota-fill.wm-quota-warning { stroke: var(--wm-warning); } .wm-quota-ring .wm-quota-fill.wm-quota-critical { stroke: var(--wm-danger); } .wm-quota-ring .wm-quota-label { position: relative; z-index: 1; font-size: .58rem; font-weight: 700; color: var(--wm-text); } /* Fallback for mailboxes with no quota configured: plain colored initial, same as before this existed. */ .wm-quota-ring.wm-quota-ring--plain .wm-quota-svg { display: none; } .wm-quota-ring.wm-quota-ring--plain .wm-quota-label { color: #fff; font-size: .95rem; } /* Usage-details popup opened by clicking the quota button */ .wm-quota-modal { text-align: left; } .wm-quota-modal-row { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; font-size: .9rem; } .wm-quota-modal-row strong { font-weight: 700; } .wm-quota-bar { height: 8px; border-radius: 999px; background: var(--wm-border); overflow: hidden; margin-top: .35rem; } .wm-quota-bar-fill { height: 100%; border-radius: 999px; background: var(--wm-accent); transition: width .3s ease; } .wm-quota-bar-fill.wm-quota-warning { background: var(--wm-warning); } .wm-quota-bar-fill.wm-quota-critical { background: var(--wm-danger); } .wm-quota-modal-percent { margin-top: .3rem; font-size: .78rem; color: var(--wm-muted); text-align: right; } .wm-quota-modal-divider { border-top: 1px solid var(--wm-border); margin: .75rem 0; } .wm-sidebar { width: 250px; flex-shrink: 0; background: var(--wm-surface); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; } .wm-user { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .75rem; } .wm-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .wm-avatar.wm-avatar-sm { width: 34px; height: 34px; font-size: .8rem; } .wm-user-info { min-width: 0; flex: 1; } .wm-user-info .wm-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-user-info .wm-email { font-size: .78rem; color: var(--wm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-user-menu-btn { background: none; border: none; color: var(--wm-muted); cursor: pointer; font-size: 1rem; padding: .25rem .4rem; } .wm-search-wrap { position: relative; margin: 0 1rem .75rem; } .wm-search-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--wm-muted); font-size: .8rem; } .wm-search-input { width: 100%; padding: .5rem .6rem .5rem 1.9rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .85rem; background: var(--wm-bg); } .wm-search-input:focus { outline: none; border-color: var(--wm-accent); background: var(--wm-surface); } .wm-folders-section { flex: 1; overflow-y: auto; padding: 0 .5rem; } .wm-section-head { display: flex; align-items: center; justify-content: space-between; padding: .4rem .6rem; font-size: .74rem; font-weight: 700; color: var(--wm-muted); text-transform: uppercase; letter-spacing: .03em; } .wm-section-action { background: none; border: none; color: var(--wm-muted); cursor: pointer; font-size: .95rem; line-height: 1; padding: .1rem .3rem; border-radius: 4px; } .wm-section-action:hover { background: var(--wm-bg); color: var(--wm-accent); } .wm-folder-group { margin-bottom: .1rem; } .wm-folder-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; font-size: .87rem; color: var(--wm-text); } .wm-folder-row:hover { background: var(--wm-bg); } .wm-folder-row.active { background: var(--wm-accent-soft); color: var(--wm-accent); font-weight: 700; } .wm-folder-row .wm-folder-icon { font-size: .95rem; width: 1.1rem; text-align: center; } .wm-folder-row .wm-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-folder-row .wm-folder-unread { font-size: .72rem; background: var(--wm-border); color: var(--wm-muted); padding: .05rem .45rem; border-radius: 999px; } .wm-folder-row.active .wm-folder-unread { background: var(--wm-accent); color: #fff; } .wm-folder-row .wm-folder-delete { display: none; background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: 0 .2rem; } .wm-folder-row:hover .wm-folder-delete { display: inline-block; } .wm-folder-sub { padding-left: 1.1rem; } /* ---------- Message list ---------- */ .wm-message-list { width: 370px; flex-shrink: 0; background: var(--wm-surface); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; overflow: hidden; } .wm-list-header { padding: .95rem 1.1rem; border-bottom: 1px solid var(--wm-border); font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; } .wm-list-header-left { display: flex; align-items: center; gap: .65rem; } .wm-list-header-right { display: flex; align-items: center; gap: .3rem; } .wm-list-compose-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--wm-accent); color: #fff; font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wm-list-compose-btn:hover { filter: brightness(1.06); } .wm-select-all-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wm-accent); } .wm-list-scroll { flex: 1; overflow-y: auto; } .wm-list-pagination { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.1rem; border-top: 1px solid var(--wm-border); flex-shrink: 0; font-size: .78rem; color: var(--wm-muted); } .wm-pagination-btns { display: flex; align-items: center; gap: .5rem; } .wm-pagination-page { min-width: 3.5rem; text-align: center; } .wm-pagination-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--wm-border); background: var(--wm-surface); color: var(--wm-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .78rem; } .wm-pagination-btn:hover:not(:disabled) { background: var(--wm-bg); border-color: var(--wm-accent); color: var(--wm-accent); } .wm-pagination-btn:disabled { opacity: .35; cursor: not-allowed; } .wm-message-row { display: flex; gap: .65rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--wm-border); cursor: pointer; position: relative; } .wm-message-row:hover { background: var(--wm-bg); } .wm-message-row.active { background: var(--wm-accent-soft); } .wm-message-row.selected { background: var(--wm-accent-soft); } .wm-message-row.unread .wm-msg-from, .wm-message-row.unread .wm-msg-subject { font-weight: 700; } .wm-msg-select { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; } .wm-msg-select input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wm-accent); } /* Bulk move/delete bar — shown above the list once 1+ messages are selected */ .wm-bulk-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; background: var(--wm-accent-soft); border-bottom: 1px solid var(--wm-border); } .wm-bulk-count { font-size: .82rem; font-weight: 600; color: var(--wm-accent); flex: 1; } .wm-bulk-bar button { display: inline-flex; align-items: center; gap: .35rem; background: var(--wm-surface); color: var(--wm-text); border: 1px solid var(--wm-border); padding: .35rem .65rem; border-radius: 6px; font-size: .78rem; cursor: pointer; } .wm-bulk-bar button:hover { border-color: var(--wm-accent); color: var(--wm-accent); } .wm-bulk-bar button.wm-bulk-danger:hover { border-color: var(--wm-danger); color: var(--wm-danger); background: var(--wm-danger-soft); } .wm-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wm-accent); flex-shrink: 0; margin-top: .4rem; } .wm-msg-body { min-width: 0; flex: 1; } .wm-msg-top { display: flex; justify-content: space-between; gap: .5rem; } .wm-msg-from { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-msg-time { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; } .wm-msg-date { font-size: .72rem; color: var(--wm-muted); white-space: nowrap; } .wm-msg-hour { font-size: .68rem; color: var(--wm-muted); opacity: .75; white-space: nowrap; } .wm-msg-subject { font-size: .85rem; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-msg-preview { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-empty-state { padding: 2rem 1rem; text-align: center; color: var(--wm-muted); font-size: .88rem; } /* ---------- Reading pane ---------- */ .wm-reading-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--wm-surface); } .wm-reading-toolbar { padding: .65rem 1.25rem; border-bottom: 1px solid var(--wm-border); display: flex; align-items: center; gap: .3rem; } .wm-toolbar-btn { background: none; border: none; color: var(--wm-text); text-decoration: none; cursor: pointer; font-size: .82rem; padding: .4rem .6rem; border-radius: 8px; display: flex; align-items: center; gap: .35rem; } .wm-toolbar-btn:hover { background: var(--wm-bg); } .wm-toolbar-btn.wm-toolbar-danger:hover { background: var(--wm-danger-soft); color: var(--wm-danger); } .wm-toolbar-divider { width: 1px; align-self: stretch; background: var(--wm-border); margin: .25rem .4rem; } .wm-reading-toolbar .wm-spacer { flex: 1; } .wm-star-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; color: var(--wm-border); padding: .3rem; } .wm-star-btn.active { color: #f5a623; } .wm-reading-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; } .wm-reading-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .wm-reading-subject { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; flex: 1; } /* Meta is a header row for the message below it, set off by the same hairline-divider convention the rest of the app already uses (folder rows, message rows, the toolbar) — not a floating card, just a clean rule between "who/when" and the body copy. */ .wm-reading-meta { display: flex; align-items: flex-start; gap: .75rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--wm-border); } .wm-reading-meta .wm-avatar { width: 42px; height: 42px; } .wm-reading-meta-text .wm-from-name { font-weight: 600; } .wm-reading-meta-text .wm-from-addr { font-size: .82rem; color: var(--wm-muted); } .wm-reading-meta-text .wm-to { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; } .wm-reading-date { margin-left: auto; font-size: .8rem; color: var(--wm-muted); white-space: nowrap; } .wm-reading-content { white-space: pre-wrap; word-wrap: break-word; font-size: .92rem; line-height: 1.6; } .wm-select { padding: .5rem .6rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .85rem; background: var(--wm-surface); } /* SweetAlert2 form bits reused across modals */ .wm-swal-form .form-group { margin-bottom: .85rem; text-align: left; } .wm-swal-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; } .wm-swal-form input, .wm-swal-form select, .wm-swal-form textarea { width: 100%; padding: .5rem .65rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .9rem; font-family: inherit; } .wm-swal-form textarea { resize: vertical; } .wm-swal-raw-source.swal2-popup { border-radius: 16px; padding-bottom: 1.75rem; } .wm-swal-raw-source .swal2-title { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.15rem; } .wm-swal-raw-source .swal2-title i { color: var(--wm-accent); } .wm-swal-raw-source .swal2-html-container { margin: .75rem 0 0; } .wm-swal-raw-source .swal2-actions { margin-top: 1.1rem; } .wm-swal-raw-source .swal2-confirm.swal2-styled { background: var(--wm-accent); border-radius: 8px; } .wm-raw-source-pre { text-align: left; max-height: 65vh; overflow: auto; margin: 0; padding: 1.1rem 1.25rem; background: #1e1e1e; color: #d4d4d4; border-radius: 10px; font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } /* * Custom folder-tree picker used instead of a native 's dropdown list with the OS's native UI font rather than the * page's CSS font, which can drop glyph coverage for Vietnamese diacritics. A plain div-based list * always renders through our own font stack (Lato), and lets us show real hierarchy/indentation. */ .wm-folder-picker { max-height: 220px; overflow-y: auto; border: 1px solid var(--wm-border); border-radius: 8px; text-align: left; } .wm-folder-picker-item { padding: .5rem .75rem; cursor: pointer; font-size: .87rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--wm-border); } .wm-folder-picker-item:last-child { border-bottom: none; } .wm-folder-picker-item:hover { background: var(--wm-bg); } .wm-folder-picker-item.selected { background: var(--wm-accent-soft); color: var(--wm-accent); font-weight: 700; } /* Attachments */ /* Sibling of .wm-reading-body (which scrolls), not a child of it — stays pinned to the bottom of the reading pane regardless of message length, the same footer slot the old quick-reply bar used. */ .wm-attachment-bar { border-top: 1px solid var(--wm-border); padding: .85rem 1.75rem; flex-shrink: 0; } .wm-attachment-divider { border-top: 1px solid var(--wm-border); margin: 1.5rem 0 1rem; } .wm-attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; } .wm-attachment-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .8rem; background: var(--wm-bg); text-decoration: none; color: var(--wm-text); } .wm-attachment-chip:hover { border-color: var(--wm-accent); color: var(--wm-accent); } .wm-attachment-chip .wm-attachment-size { color: var(--wm-muted); } .wm-attachment-remove { border: none; background: none; color: var(--wm-muted); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 0 0 .1rem; } .wm-attachment-remove:hover { color: var(--wm-danger); } .wm-msg-attach-icon { color: var(--wm-muted); font-size: .82rem; flex-shrink: 0; align-self: center; } .wm-html-frame { width: 100%; border: none; min-height: 200px; } .wm-attach-dropzone { border: 1px dashed var(--wm-border); border-radius: 10px; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; transition: border-color .15s ease, background .15s ease; } .wm-attach-dropzone--active { border-color: var(--wm-accent); background: var(--wm-accent-soft); } .wm-attach-dropzone .wm-attachment-list:empty { display: none; } .wm-attach-browse { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; padding: .4rem .75rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .82rem; color: var(--wm-muted); cursor: pointer; background: var(--wm-surface); } .wm-attach-browse:hover { border-color: var(--wm-accent); color: var(--wm-accent); } /* Contact autocomplete dropdown for the To/Cc/Bcc fields */ .wm-compose-recipient-field { position: relative; } .wm-contact-suggest { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: .25rem; max-height: 220px; overflow-y: auto; background: var(--wm-surface); border: 1px solid var(--wm-border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .wm-contact-suggest.wm-contact-suggest--open { display: block; } .wm-contact-suggest-item { display: flex; flex-direction: column; padding: .5rem .7rem; cursor: pointer; } .wm-contact-suggest-item:hover { background: var(--wm-bg); } .wm-contact-suggest-item strong { font-size: .86rem; } .wm-contact-suggest-item span { font-size: .76rem; color: var(--wm-muted); } /* Sender name in the reading pane: a clickable contact name, or a raw address with a quick "add" button */ .wm-from-name-btn { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--wm-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .wm-from-name-btn:hover { color: var(--wm-accent); } .wm-from-add-contact { border: none; background: none; color: var(--wm-muted); cursor: pointer; font-size: .8rem; padding: 0 0 0 .35rem; } .wm-from-add-contact:hover { color: var(--wm-accent); } /* Quick "view contact" card opened from the reading pane */ .wm-contact-quickview { text-align: center; padding: .5rem 0; } .wm-contact-quickview-avatar { width: 64px; height: 64px; font-size: 1.4rem; margin: 0 auto .75rem; } .wm-contact-quickview h3 { margin: 0 0 .15rem; font-size: 1.05rem; } .wm-contact-quickview .wm-contact-field { text-align: left; } /* Shared "label: value" row used by both the quick-view card and the Contacts detail pane */ .wm-contact-field { display: flex; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--wm-border); font-size: .88rem; } .wm-contact-field span { width: 120px; flex-shrink: 0; color: var(--wm-muted); } .wm-contact-field strong { font-weight: 600; } /* ---------- Contacts page (full page, not a modal) ---------- */ .wm-contact-list-pane { width: 320px; flex-shrink: 0; background: var(--wm-surface); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; overflow: hidden; } .wm-contact-list-header { padding: .95rem 1.1rem; border-bottom: 1px solid var(--wm-border); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 1.02rem; } .wm-contact-list-row { display: flex; align-items: center; gap: .65rem; padding: .65rem 1.1rem; border-bottom: 1px solid var(--wm-border); cursor: pointer; } .wm-contact-list-row:hover { background: var(--wm-bg); } .wm-contact-list-row.active { background: var(--wm-accent-soft); } .wm-contact-list-avatar { width: 36px; height: 36px; font-size: .85rem; flex-shrink: 0; } .wm-contact-list-text { min-width: 0; } .wm-contact-list-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-contact-list-email { font-size: .78rem; color: var(--wm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-contact-detail-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--wm-surface); } .wm-contact-detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .wm-contact-detail-header h2 { margin: 0; font-size: 1.15rem; } .wm-contact-detail-avatar { width: 64px; height: 64px; font-size: 1.4rem; flex-shrink: 0; } .wm-contact-detail-fields { margin-top: .25rem; } .wm-contact-avatar-edit { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .wm-contact-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; } .wm-btn-text-danger { border: none; background: none; color: var(--wm-danger); font-size: .8rem; cursor: pointer; padding: 0; } .wm-btn-text-danger:hover { text-decoration: underline; } /* ---------- Compose page (full page, not a modal) — sits in the wm-reading-pane's slot inside wm-app, keeping the rail + sidebar frame visible instead of taking over the whole viewport. ---------- */ .wm-compose-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--wm-surface); } .wm-compose-header { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--wm-border); flex-shrink: 0; } .wm-compose-back { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--wm-muted); text-decoration: none; } .wm-compose-back:hover { background: var(--wm-bg); color: var(--wm-text); } .wm-compose-title { font-size: 1.05rem; font-weight: 700; } .wm-compose-body { flex: 1; width: 100%; /* max-width: 760px; */ margin: 0 auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; overflow-y: auto; } .wm-compose-field { display: flex; flex-direction: column; gap: .35rem; } .wm-compose-field label { font-size: .82rem; font-weight: 600; color: var(--wm-muted); } .wm-compose-field input[type="text"], .wm-compose-field input[type="password"], .wm-compose-field input:not([type]), .wm-compose-field select { padding: .6rem .75rem; border: 1px solid var(--wm-border); border-radius: 8px; font-size: .9rem; font-family: inherit; background: var(--wm-surface); } .wm-compose-field input:focus, .wm-compose-field select:focus { outline: none; border-color: var(--wm-accent); box-shadow: 0 0 0 3px var(--wm-accent-soft); } .wm-compose-cc-toggle { display: flex; justify-content: flex-end; margin-top: -.5rem; } /* ---------- Full-page reading view (double-click a message row) — standalone page, no rail/sidebar, for a large distraction-free read. Reuses .wm-reading-* classes from the reading pane for consistency. ---------- */ .wm-view-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--wm-bg); } .wm-view-header { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--wm-border); background: var(--wm-surface); flex-shrink: 0; } .wm-view-header .wm-compose-title { flex: 1; } .wm-view-raw-link { margin-left: auto; } .wm-view-body { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .wm-compose-cc-toggle button { border: none; background: none; color: var(--wm-accent); font-size: .82rem; font-weight: 600; cursor: pointer; padding: .15rem 0; } .wm-compose-editor-field { flex: 1; } .wm-compose-editor-field .ck-editor__editable { min-height: 320px; font-size: .92rem; } /* CKEditor ships its own theme (white bg, dark text) baked into its bundle — beat that specificity so the compose body follows our theme instead of staying white-on-white in dark mode. */ .wm-compose-editor-field .ck.ck-editor__editable { background: var(--wm-surface) !important; color: var(--wm-text) !important; } .wm-signature-editor-field .ck-editor__editable { min-height: 140px; } .wm-compose-footer { display: flex; gap: .6rem; width: 100%; /* max-width: 760px; */ margin: 0 auto; padding: 1rem 1.5rem; border-top: 1px solid var(--wm-border); flex-shrink: 0; } /* ---------- Settings page ---------- */ .wm-settings-tabs { display: flex; padding: 0 1.5rem; border-bottom: 1px solid var(--wm-border); flex-shrink: 0; } .wm-settings-tab { padding: .85rem 0; margin-right: 1.5rem; font-size: .88rem; font-weight: 600; color: var(--wm-muted); text-decoration: none; border-bottom: 2px solid transparent; } .wm-settings-tab:hover { color: var(--wm-text); } .wm-settings-tab.active { color: var(--wm-accent); border-bottom-color: var(--wm-accent); } .wm-settings-body { gap: 0; } .wm-settings-section { padding: 1.5rem 0; border-bottom: 1px solid var(--wm-border); display: flex; flex-direction: column; gap: .9rem; } .wm-settings-section:last-child { border-bottom: none; } .wm-settings-section h3 { margin: 0; font-size: 1rem; } .wm-settings-section-head { display: flex; align-items: center; justify-content: space-between; } .wm-settings-section-head h3 { margin: 0; } .wm-settings-hint { margin: -.4rem 0 0; font-size: .82rem; color: var(--wm-muted); } .wm-settings-inline-form { display: flex; gap: .5rem; } .wm-settings-inline-form input { flex: 1; min-width: 0; } .wm-settings-section--danger { align-items: flex-start; } /* Filter-rule rows */ .wm-rule-row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--wm-border); border-radius: 8px; margin-bottom: .6rem; } .wm-rule-row--disabled { opacity: .55; } .wm-rule-info { min-width: 0; flex: 1; } .wm-rule-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-rule-summary { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; } .wm-rule-actions { display: flex; gap: .2rem; flex-shrink: 0; } /* Toggle switch (enable/disable a rule) */ .wm-rule-toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; } .wm-rule-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .wm-rule-toggle-slider { position: absolute; inset: 0; background: var(--wm-border); border-radius: 999px; cursor: pointer; transition: background .15s ease; } .wm-rule-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--wm-surface); border-radius: 50%; transition: transform .15s ease; } .wm-rule-toggle input:checked + .wm-rule-toggle-slider { background: var(--wm-accent); } .wm-rule-toggle input:checked + .wm-rule-toggle-slider::before { transform: translateX(14px); } /* Add/edit rule form */ .wm-rule-form { border: 1px solid var(--wm-border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .85rem; background: var(--wm-bg); } .wm-rule-form-row { display: flex; gap: .75rem; } .wm-rule-form-row .wm-compose-field { flex: 1; min-width: 0; } .wm-rule-enabled-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; } .wm-rule-form-footer { border-top: none; padding: 0; }