:root { --wm-border: #e1dfdd; --wm-bg: #f3f2f1; --wm-surface: #fff; --wm-text: #242424; --wm-muted: #605e5c; --wm-faint: #8a8886; --wm-accent: #0f6cbd; --wm-accent-hover: #115ea3; --wm-accent-soft: #e8f1fb; --wm-danger: #e5484d; --wm-danger-soft: #fdecec; --wm-warning: #eda100; --wm-warning-soft: #fff4d9; --wm-folder-bg: #faf9f8; /* Nền wm-topbar — tách riêng khỏi --wm-accent (dùng ở khắp nơi cho nút/link) vì dark mode cần topbar đen thay vì xanh, trong khi --wm-accent vẫn phải giữ nguyên làm màu nhấn cho phần còn lại của app. */ --wm-topbar-bg: var(--wm-accent); /* Thang chữ dùng chung cho tên folder (sidebar), chủ đề (subject) và tên người gửi trong danh sách mail — trước đây mỗi nơi tự đặt 1 rem riêng (.8/.93/1rem) không theo quy luật nào, nhìn không đồng bộ khi lướt mắt từ sidebar sang list. Giờ folder name và subject dùng CHUNG 1 biến (cùng cấp độ, cùng là "tên mục"), tên người gửi nhỉnh hơn 1 bậc vì là thông tin nổi bật nhất của 1 dòng mail. */ --wm-fs-list-name: .95rem; --wm-fs-list-title: .85rem; --wm-fs-list-meta: .8rem; } /* ---------- 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; --wm-warning-soft: #3a2f14; --wm-folder-bg: #1e2024; --wm-topbar-bg: #000; } } :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; --wm-warning-soft: #3a2f14; --wm-folder-bg: #1e2024; --wm-topbar-bg: #000; } :root[data-theme="light"] { --wm-border: #e1dfdd; --wm-bg: #f3f2f1; --wm-surface: #fff; --wm-text: #242424; --wm-muted: #605e5c; --wm-faint: #8a8886; --wm-accent: #0f6cbd; --wm-accent-hover: #115ea3; --wm-accent-soft: #e8f1fb; --wm-danger: #e5484d; --wm-danger-soft: #fdecec; --wm-warning: #eda100; --wm-warning-soft: #fff4d9; --wm-folder-bg: #faf9f8; --wm-topbar-bg: var(--wm-accent); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--wm-text); background: var(--wm-bg); font-size: 14px; } /* Cỡ chữ mặc định (Settings > Hiển thị, Mailbox.FontSize) — hầu hết font-size trong file này dùng rem nên chỉ cần đổi font-size gốc của là toàn bộ giao diện (danh sách mail, khung đọc, soạn thư…) scale theo tỉ lệ tương ứng; "medium" giữ nguyên 14px như trước khi có tùy chọn này. */ :root[data-font-size="xsmall"] { font-size: 12px; } :root[data-font-size="small"] { font-size: 13px; } :root[data-font-size="large"] { font-size: 15.5px; } :root[data-font-size="xlarge"] { font-size: 17.5px; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* CKEditor's toolbar/dropdown/balloon chrome (buttons, menus — NOT the editable content area, which has no font rule of its own and already inherits Roboto from body above) ships with its own hardcoded --ck-font-face default; override it here so the editor UI matches the rest of the page instead of falling back to its own Helvetica/Arial default. */ .ck.ck-reset_all, .ck.ck-editor { --ck-font-face: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* 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); } #swal-foldername {color: #22304f;} /* ---------- 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-field-password-wrap { position: relative; } .wm-field-password-wrap input { padding-right: 2.6rem; } .wm-field-toggle-btn { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: .3rem; font-size: .9rem; line-height: 1; } .wm-field-toggle-btn:hover { color: var(--wm-accent); } .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; } } .swal2-modal {border-radius: 30px;} .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); text-decoration: none; } .wm-btn.wm-btn-danger { background: var(--wm-danger); border-color: var(--wm-danger); } /* Nút chỉ có icon, không chữ (vd đính kèm file cạnh Gửi trong footer soạn thư) — bớt padding ngang cho gần vuông thay vì rộng như nút có chữ. */ .wm-btn.wm-btn-icon-only { padding: .6rem .75rem; } .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; } /* ---------- Outlook-style shell (Mail page only) ---------- Wraps wm-topbar + wm-cmdbar + wm-app in a column so the blue ribbon and flat command bar span the full width above the existing rail/sidebar/list/reading-pane row — other pages (Compose, Contacts, Calendar, Settings) don't use this wrapper and keep .wm-app at 100vh exactly as before. */ .wm-shell-col { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .wm-shell-col .wm-app { height: auto; flex: 1; min-height: 0; } /* Top ribbon — matches wwwroot/webmail-outlook-style.html's .ribbon exactly: solid brand blue, fixed regardless of light/dark theme (like Outlook's own bar), white icons/text/translucent search pill. */ .wm-topbar { height: 48px; flex-shrink: 0; background: var(--wm-topbar-bg); color: #fff; display: flex; align-items: center; padding: 0 8px; gap: 4px; } .wm-topbar-brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-right: 12px; } .wm-topbar-logo { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; flex-shrink: 0; } .wm-topbar-brand span { font-size: 1rem; font-weight: 600; white-space: nowrap; color: #fff; } .wm-topbar-icon-btn { width: 34px; height: 34px; border-radius: 4px; border: none; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .wm-topbar-icon-btn:hover { background: rgba(255,255,255,.15); } .wm-topbar-badge-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--wm-danger); border: 1.5px solid var(--wm-topbar-bg); } .wm-topbar-search { flex: 1; max-width: 720px; margin: 0 auto; position: relative; display: flex; align-items: center; background: rgba(255,255,255,.18); border-radius: 4px; height: 32px; transition: background .15s ease; } .wm-topbar-search:focus-within { background: #fff; } /* Contacts dùng ô tìm kiếm này KHÔNG có nút phạm vi (wm-search-scope-btn) đứng trước icon như bên Mail — thiếu phần đệm trái mà nút đó vốn tạo ra khiến icon kính lúp dính sát viền trái. Bo tròn hẳn thành viên thuốc (pill, bán kính = nửa chiều cao) thay vì góc vuông 4px kiểu Outlook — hợp với ô tìm kiếm đứng độc lập hơn, không có gì để "ngắt" hình chữ nhật thành nhiều đoạn như bên Mail. */ .wm-topbar-search-plain { border-radius: 16px; padding-left: .9rem; } .wm-topbar-search-plain .wm-topbar-search-icon { margin-left: 0; } .wm-topbar-search-plain .wm-topbar-search-input { padding-right: .9rem; } /* Icon kính lúp giờ là 1 flex item thường (đứng sau nút phạm vi tìm kiếm), không còn absolute-overlay lên input như trước — layout đơn giản hơn khi có thêm .wm-search-scope-btn chen vào bên trái. */ .wm-topbar-search-icon { color: rgba(255,255,255,.85); font-size: .8rem; margin: 0 .5rem 0 .1rem; flex-shrink: 0; pointer-events: none; } .wm-topbar-search:focus-within .wm-topbar-search-icon { color: var(--wm-muted); } .wm-topbar-search-input { flex: 1; min-width: 0; height: 32px; border: none; background: none; padding: 0 2.2rem 0 0; font-size: .85rem; color: #fff; } .wm-topbar-search-input::placeholder { color: rgba(255,255,255,.85); } .wm-topbar-search:focus-within .wm-topbar-search-input { color: var(--wm-text); } .wm-topbar-search:focus-within .wm-topbar-search-input::placeholder { color: var(--wm-faint); } .wm-topbar-search-input:focus { outline: none; } .wm-topbar-search-btn { position: absolute; right: .3rem; width: 1.6rem; height: 1.6rem; border: none; background: none; color: rgba(255,255,255,.85); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .78rem; } .wm-topbar-search:focus-within .wm-topbar-search-btn { color: var(--wm-muted); } .wm-topbar-search-btn:hover { color: var(--wm-accent) !important; } /* Nút "Junk Email ⌄" / "Tất cả thư mục ⌄"... đứng đầu ô tìm kiếm (giống Outlook) — bấm mở .wm-search-scope-menu bên dưới để đổi phạm vi tìm kiếm trước khi bấm tìm. */ .wm-search-scope-btn { display: flex; align-items: center; gap: .3rem; height: 100%; flex-shrink: 0; max-width: 130px; margin-right: .4rem; padding: 0 .6rem 0 .8rem; border: none; border-right: 1px solid rgba(255,255,255,.3); background: none; color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 600; cursor: pointer; } .wm-search-scope-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-search-scope-btn i { font-size: .6rem; flex-shrink: 0; } .wm-topbar-search:focus-within .wm-search-scope-btn { color: var(--wm-muted); border-right-color: var(--wm-border); } .wm-search-scope-btn:hover { background: rgba(0,0,0,.06); } .wm-search-scope-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--wm-surface); border: 1px solid var(--wm-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 190px; padding: .35rem; z-index: 60; } .wm-search-scope-option { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; font-size: .85rem; color: var(--wm-text); } .wm-search-scope-option:hover { background: var(--wm-bg); } .wm-search-scope-option.active { border-color: var(--wm-accent); } .wm-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; } .wm-topbar-avatar { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--wm-accent); font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; margin-left: 4px; cursor: pointer; flex-shrink: 0; } /* Command bar — a single flat row of buttons below the ribbon, matching .command-bar in the reference (no File/Home/View/Help ribbon tabs — this app doesn't have separate "pages" to switch between there). */ .wm-cmdbar { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--wm-border); background: var(--wm-surface); } .wm-cmd-btn { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 4px; border: none; background: none; font-size: .8rem; color: var(--wm-muted); cursor: pointer; } .wm-cmd-btn:hover { background: var(--wm-bg); color: var(--wm-text); } .wm-cmd-btn i { font-size: .9rem; } /* Nút nổi bật (vd "Thư mới") — nền accent đặc, tách khỏi các nút phẳng còn lại của cmdbar, giống nút "New mail" của Outlook. */ .wm-cmd-btn-primary { background: var(--wm-accent); color: #fff; } .wm-cmd-btn-primary:hover { background: var(--wm-accent-hover); color: #fff; } .wm-cmd-sep { width: 1px; height: 20px; background: var(--wm-border); margin: 0 6px; flex-shrink: 0; } .wm-cmd-btn.wm-empty-trash-btn:hover { background: var(--wm-danger-soft); color: var(--wm-danger); } /* Compose page reuses the same command bar (see Compose.cshtml) — buttons that only make sense with a message/list open (Xoá/Đọc-chưa đọc/Gắn cờ/…) are visually dimmed but stay clickable (shows a toast explaining why, see compose.js), same "honest, not silently broken" spirit as wm-rail-disabled. */ .wm-cmd-btn.wm-cmd-inactive { opacity: .45; } /* Mail page: same dimmed look, but a real disabled state (no selection/open email yet) — becomes clickable/bright once updateCmdBarState (webmail.js) detects a valid target. */ .wm-cmd-btn:disabled { opacity: .45; cursor: not-allowed; } .wm-cmd-btn:disabled:hover { background: none; color: var(--wm-muted); } /* "Tất cả" / "Chưa đọc" filter tabs above the message list — a real client-side filter (see applyListFilter in webmail.js), matching .list-filter in the reference. */ .wm-list-tabs { display: flex; gap: 12px; padding: 0 14px 10px; font-size: .75rem; color: var(--wm-muted); border-bottom: 1px solid var(--wm-border); } .wm-list-tab { padding-bottom: 2px; cursor: pointer; } .wm-list-tab.active { color: var(--wm-accent); font-weight: 600; border-bottom: 2px solid var(--wm-accent); } /* Far-left app-switcher rail — matches .app-rail in the reference: light gray bg, square-ish icons. */ .wm-rail { width: 48px; flex-shrink: 0; background: var(--wm-bg); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: .6rem 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: 4px; 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); } /* 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; } /* Folder pane — matches .folder-pane in the reference (off-white bg, narrower than before). Uses --wm-folder-bg (defined alongside the other theme variables at the top of this file) rather than a hardcoded color, so it still follows the light/dark/system precedence the rest of the file already established instead of fighting @media specificity here. */ .wm-sidebar { width: 220px; flex-shrink: 0; background: var(--wm-folder-bg); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; overflow-y: auto; padding: 10px 8px; } .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-search-wrap { position: relative; margin: 0 1rem .75rem; } .wm-search-icon-btn { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--wm-muted); font-size: .8rem; cursor: pointer; border-radius: 6px; } .wm-search-icon-btn:hover { color: var(--wm-accent); background: var(--wm-bg); } .wm-search-input { width: 100%; padding: .5rem 1.9rem .5rem .6rem; 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; } /* Favorites (folder người dùng tự ghim, xem renderFavorites trong shell.js) đứng trên khối account/folder chính, không chia đều chiều cao với nó — chỉ cao bằng đúng nội dung, có viền dưới phân tách rõ 2 khối. */ .wm-favorites-section { flex: 0 0 auto; overflow: visible; border-bottom: 1px solid var(--wm-border); padding-bottom: .4rem; margin-bottom: .4rem; } /* matches .folder-title in the reference */ .wm-section-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; font-size: .69rem; font-weight: 700; color: var(--wm-faint); text-transform: uppercase; letter-spacing: .03em; } /* Header hiện địa chỉ mailbox đang đăng nhập (thay vì nhãn tĩnh "Thư mục") — không viết hoa/giãn chữ như nhãn thường, và cắt bớt bằng "…" thay vì xuống dòng vì địa chỉ email có thể khá dài. Font-size nhích lên 1 chút so với .wm-section-head gốc (.69rem) — chữ thường không viết hoa nhìn "nhỏ" hơn rõ rệt so với nhãn viết hoa (FAVORITES/FOLDERS) dù đo bằng công cụ thì đúng là cùng cỡ, bù lại bằng mắt cho cân đối. */ .wm-account-head span { text-transform: none; letter-spacing: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: .78rem; text-overflow: ellipsis; } /* Thu gọn/mở rộng danh sách folder (xem btnToggleFolderList trong shell.js) — nút bọc cả icon chevron lẫn địa chỉ mailbox, chiếm hết phần còn lại của hàng (trừ nút "Folder mới" cạnh nó). */ .wm-account-toggle { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1; background: none; border: none; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .wm-account-toggle i { font-size: .65rem; flex-shrink: 0; transition: transform .15s ease; } .wm-account-toggle.collapsed i { transform: rotate(-90deg); } .wm-folders.collapsed { display: none; } .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-empty-trash-btn:hover { background: var(--wm-danger-soft); color: var(--wm-danger); } /* matches .folder-item in the reference */ .wm-folder-group { margin-bottom: .1rem; } .wm-folder-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 4px; cursor: pointer; font-size: var(--wm-fs-list-title); 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: 600; } .wm-folder-row .wm-folder-icon { font-size: .9rem; width: 1rem; text-align: center; color: var(--wm-muted); } .wm-folder-row.active .wm-folder-icon { color: var(--wm-accent); } .wm-folder-row .wm-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* matches .folder-count in the reference */ .wm-folder-row .wm-folder-unread { margin-left: auto; font-size: .69rem; background: none; color: var(--wm-faint); padding: 0; border-radius: 0; } .wm-folder-row.active .wm-folder-unread { color: var(--wm-accent); font-weight: 700; } .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-row .wm-folder-rename { display: none; background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: 0 .2rem; font-size: .8rem; } .wm-folder-row:hover .wm-folder-rename { display: inline-block; } .wm-folder-row .wm-folder-rename:hover, .wm-folder-row .wm-folder-delete:hover { color: var(--wm-accent); } .wm-folder-sub { padding-left: 1.1rem; } /* ---------- Message list ---------- */ .wm-message-list { position: relative; width: 370px; flex-shrink: 0; background: var(--wm-surface); border-right: 1px solid var(--wm-border); display: flex; flex-direction: column; overflow: hidden; } /* Kéo để đổi độ rộng danh sách mail (xem initListResize trong webmail.js) — dải mỏng đè lên đúng viền phải, mở rộng vùng bấm/kéo ra ngoài viền 1px thật để dễ trúng chuột hơn mà không đổi bố cục. */ .wm-list-resize-handle { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; background: transparent; } .wm-list-resize-handle:hover, .wm-list-resize-handle.dragging { background: var(--wm-accent); opacity: .5; } .wm-list-header { padding: .95rem 1.1rem .6rem; 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; } /* Ghim folder đang xem vào Favorites (xem btnFolderFavorite trong Index.cshtml) — nhỏ hơn wm-star-btn mặc định (vốn để dùng trong khung đọc 1 email) cho vừa hàng tiêu đề danh sách. */ .wm-list-favorite-btn { font-size: .95rem; padding: .15rem; } .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); } /* matches .mail-row.selected::before in the reference — a thin accent bar on the selected row's left edge */ .wm-message-row.active::before, .wm-message-row.selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wm-accent); } .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); } /* Conversation view — "N" count badge next to sender, and the chevron that expands a thread's individual messages inline in the list (separate from opening the full stacked thread in the reading pane). */ .wm-msg-thread-toggle { align-self: center; flex-shrink: 0; background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: .3rem; font-size: .78rem; border-radius: 4px; } .wm-msg-thread-toggle:hover { background: var(--wm-border); color: var(--wm-accent); } .wm-thread-sublist { background: var(--wm-bg); } .wm-thread-subrow { padding-left: 2.6rem; } .wm-thread-subrow .wm-msg-subject { display: none; } .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: var(--wm-fs-list-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Thread size badge next to the sender name — a soft pill that lights up accent-colored when the conversation has something unread, same visual language as the unread dot elsewhere in the row. */ .wm-msg-thread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3em; padding: .04rem .38rem; font-size: .7rem; font-weight: 600; color: var(--wm-muted); background: var(--wm-border); border-radius: 999px; vertical-align: middle; transition: background .15s ease, color .15s ease; } .wm-message-row.unread .wm-msg-thread-count { background: var(--wm-accent-soft); color: var(--wm-accent); } /* Groups the (optional) folder badge with the timestamp on the row's right edge, so justify-content: space-between on .wm-msg-top still only ever sees two children (sender vs. this cluster). */ .wm-msg-top-right { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } /* Shown only when conversation view merges in a message from a folder other than the one being browsed (see folderBadgeHtml in webmail.js) — e.g. a Sent reply surfacing inside an Inbox thread. */ .wm-msg-folder-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; color: var(--wm-muted); background: var(--wm-bg); border: 1px solid var(--wm-border); border-radius: 999px; padding: .04rem .45rem; white-space: nowrap; } .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: var(--wm-fs-list-title); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-msg-preview { font-size: var(--wm-fs-list-meta); 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-col bọc ngoài wm-reading-pane (xem Index.cshtml) để chứa nút "quay lại" trên di động (nằm ngoài #readingPane vì nội dung bên trong bị ghi đè mỗi lần mở email) — bản thân nó phải là flex:1 + flex container thì wm-reading-pane bên trong mới giãn hết cỡ được, không riêng gì màn hình hẹp. */ .wm-reading-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .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); } /* matches .read-toolbar .cmd-btn.primary in the reference — Reply stands out from Reply all/Forward/... */ .wm-toolbar-btn.wm-thread-card-reply { /*background: var(--wm-accent-soft); color: var(--wm-accent);*/ } .wm-toolbar-btn.wm-thread-card-reply:hover { filter: brightness(0.97); } .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-to { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; } /* Contact name vs raw address inline in From/To/Cc/Bcc ("Name ") — name stands out, address recedes. */ .wm-reading-meta-text .wm-contact-name { font-weight: 600; color: var(--wm-text); } .wm-reading-meta-text .wm-addr-inline { font-weight: 400; color: var(--wm-muted); } .wm-reading-date { font-size: .8rem; color: var(--wm-muted); white-space: nowrap; } /* Wraps the date + the optional "⋮" more-actions button (older thread cards only, see buildThreadCard/ openMoreMenu in webmail.js) so both sit together at the right edge of .wm-reading-meta. */ .wm-reading-date-wrap { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .wm-thread-card-more { background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: .25rem .4rem; border-radius: 4px; font-size: .85rem; } .wm-thread-card-more:hover { background: var(--wm-border); color: var(--wm-accent); } /* Popup opened by .wm-thread-card-more — appended to document.body with position:fixed so it isn't clipped by the reading pane's own scroll container. */ .wm-more-menu { position: fixed; z-index: 1000; background: var(--wm-surface); border: 1px solid var(--wm-border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); padding: .35rem; min-width: 170px; display: flex; flex-direction: column; } .wm-more-menu button { display: flex; align-items: center; gap: .55rem; background: none; border: none; text-align: left; font-size: .85rem; color: var(--wm-text); padding: .5rem .6rem; border-radius: 6px; cursor: pointer; } .wm-more-menu button:hover { background: var(--wm-bg); } /* Dropdown tài khoản (avatar/cài đặt trên rail lẫn topbar — xem openSettingsMenu trong shell.js), dùng chung khung .wm-more-menu, chỉ rộng hơn 1 chút cho vừa "Dung lượng lưu trữ" và có nút Đăng xuất tô đỏ khi hover, khác các mục còn lại. */ .wm-account-menu { min-width: 380px; } .wm-more-menu button.wm-more-menu-danger:hover { background: var(--wm-danger-soft); color: var(--wm-danger); } /* Tên hiển thị + địa chỉ email đang đăng nhập, đứng đầu dropdown tài khoản (xem openSettingsMenu) — để biết đang mở đúng mailbox nào, nhất là khi quản lý nhiều mailbox khác nhau. */ .wm-account-menu-header { padding: .5rem .6rem .6rem; } .wm-account-menu-name { font-size: .9rem; font-weight: 700; color: var(--wm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-account-menu-email { font-size: .8rem; color: var(--wm-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-account-menu-sep { height: 1px; background: var(--wm-border); margin: 0 0 .35rem; } /* Lưới icon kiểu "Google apps" (xem openSettingsMenu) thay cho danh sách nút full-width — icon tròn ở trên, nhãn ngắn bên dưới, 3 cột/hàng. Đăng xuất KHÔNG nằm trong lưới này (giữ dạng nút full-width tô đỏ khi hover như cũ) vì đây là hành động khác hẳn nhóm "cài đặt/xem" còn lại — tách riêng cho rõ, tránh bấm nhầm giữa các ô lưới sát nhau. */ .wm-account-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem; padding: .35rem; } .wm-account-menu-grid-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; background: none; border: none; padding: .6rem .2rem; border-radius: 10px; cursor: pointer; text-align: center; } .wm-account-menu-grid-item:hover { background: var(--wm-bg); } .wm-account-menu-grid-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wm-accent-soft); color: var(--wm-accent); font-size: 1.05rem; } .wm-account-menu-grid-label { font-size: .72rem; line-height: 1.2; color: var(--wm-text); white-space: nowrap; } .wm-reading-content { white-space: pre-wrap; word-wrap: break-word; font-size: .92rem; line-height: 1.6; } /* Conversation view — Gmail-style stacked thread in the reading pane (renderThreadPane/buildThreadCard in webmail.js). No card boxes — messages are just separated by a plain hairline (like Gmail's own thread view), the first message flush with the top of the stack. Collapsed ones are a one-line summary, expanded ones reuse .wm-reading-meta/.wm-reading-content unchanged so they look identical to the single-message view. */ .wm-reading-top .wm-msg-thread-count { background: var(--wm-border); border-radius: 10px; padding: .1rem .55rem; align-self: center; } .wm-thread-cards { display: flex; flex-direction: column; margin-top: .5rem; } .wm-thread-card { border-top: 1px solid var(--wm-border); padding: 1rem 0; } .wm-thread-cards .wm-thread-card:first-child { border-top: none; padding-top: 0; } .wm-thread-card.collapsed:hover { background: var(--wm-bg); } .wm-thread-card-summary { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; } .wm-thread-card-summary-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .6rem; } .wm-thread-card-from { font-weight: 600; flex-shrink: 0; } .wm-thread-card-preview { color: var(--wm-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wm-thread-card-date { font-size: .78rem; color: var(--wm-muted); white-space: nowrap; flex-shrink: 0; } /* Per-card Reply/Reply All/Forward (buildThreadCardActionsHtml) — lets the user reply to any one message in the thread, not just whichever the page-level toolbar targets (the newest). */ .wm-thread-card-actions { display: flex; gap: .25rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--wm-border); } .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 label (display:block) có độ đặc hiệu cao hơn .wm-rule-enabled-check (display:flex) nên luôn thắng bất kể thứ tự khai báo — ghi đè riêng cho trường hợp checkbox dùng lại class đó bên trong modal (vd "Cả ngày" ở form Sự kiện lịch) để checkbox và chữ canh giữa cùng 1 hàng thay vì lệch baseline. */ .wm-swal-form label.wm-rule-enabled-check { display: flex; align-items: center; font-weight: 400; margin-bottom: 0; } .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; color: #242424; } .wm-swal-form textarea { resize: vertical; } /* input[type=checkbox/radio] không nên kéo giãn theo width:100% ở trên — sẽ bị phóng to hết chiều ngang modal. */ .wm-swal-form input[type="checkbox"], .wm-swal-form input[type="radio"] { width: auto; } .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 */ /* Sits right under .wm-reading-meta (inside .wm-reading-body/.wm-thread-card, both already padded horizontally), so no side padding here — just the vertical rhythm + separating hairline. */ .wm-attachment-bar { border-top: 1px solid var(--wm-border); padding: .85rem 0; margin-bottom: .5rem; } .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; } /* Banner "Đã chặn N ảnh từ xa..." — hiện trên đầu iframe khi blockRemoteImages (shell.js) tìm thấy ảnh http(s):// trong email, trước khi người dùng bấm "Tải ảnh" để xem đầy đủ. */ .wm-remote-image-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--wm-warning-soft); border: 1px solid var(--wm-warning); border-radius: 8px; padding: .55rem .8rem; margin-bottom: .6rem; font-size: .85rem; color: var(--wm-text); } .wm-remote-image-banner i { color: var(--wm-warning); } .wm-remote-image-banner button { margin-left: auto; border: 1px solid var(--wm-accent); background: none; color: var(--wm-accent); border-radius: 6px; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .wm-remote-image-banner button:hover { background: var(--wm-accent); color: #fff; } .wm-attachment-list:empty { display: none; } /* Kéo-thả file vào cả khung soạn thảo (không còn khung riêng luôn hiện sẵn nữa — nút đính kèm chuyển xuống footer cạnh Gửi, xem Compose.cshtml/compose.js) — viền nét đứt phủ lên trên bằng outline (không chiếm layout như border) để không bị giật khi bật/tắt lúc kéo file qua/ra khỏi khung. */ #composeForm.wm-attach-dropzone--active { outline: 2px dashed var(--wm-accent); outline-offset: -8px; background: var(--wm-accent-soft); border-radius: 10px; transition: background .15s ease; } .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) ---------- */ /* Sidebar kiểu Google Contacts (nút Tạo người liên hệ, điều hướng Danh bạ/Thường xuyên/Người liên hệ khác, Sửa và quản lý, Nhãn) — .wm-sidebar (base) đã lo layout/mobile-drawer, các hàng dùng lại nguyên .wm-folder-row/.wm-folders-section/.wm-section-head/.wm-account-toggle của folder-pane bên Mail, chỉ cần thêm khoảng cách dọc giữa các khối ở đây. */ .wm-contacts-sidebar { gap: .5rem; } .wm-contacts-create-btn { border-radius: 24px; margin: 4px 8px 8px; } /* .wm-folders-section (dùng chung với folder-pane Mail) mặc định flex:1 để 1 khối DUY NHẤT giãn hết chiều cao sidebar còn lại — Contacts có tới 2 khối (Sửa và quản lý + Nhãn) dùng chung class này, cả 2 cùng flex:1 khiến chúng tự giãn ra, đẩy khối Nhãn cách xa khối "Sửa và quản lý"/Thùng rác phía trên một khoảng trống lớn. Ghi đè về chiều cao tự nhiên (không giãn) để 2 khối nằm sát nhau như ý. */ .wm-contacts-sidebar .wm-folders-section { flex: 0 0 auto; overflow: visible; } .wm-topbar-icon-btn.wm-rail-disabled { opacity: .35; cursor: not-allowed; } .wm-topbar-icon-btn.wm-rail-disabled:hover { background: transparent; } /* Không còn cột chi tiết bên phải (wm-contact-detail-col) — pane này giờ là nội dung DUY NHẤT của trang, chiếm toàn bộ chiều rộng còn lại. Bên trong, #contactListView (bảng) và #contactFormView (form thêm/sửa, dùng lại .wm-compose-main) đứng CHUNG chỗ và ẩn/hiện thay nhau qua JS (xem switchToListView/openEditPage trong contacts.js) — click 1 liên hệ mở "trang" form thay hẳn bảng, không còn panel xem cạnh bảng nữa. */ .wm-contact-list-pane { width: auto; flex: 1; background: var(--wm-surface); display: flex; flex-direction: column; overflow: hidden; } .wm-contact-list-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; } /* Bảng danh bạ kiểu Google Contacts (Tên/Email/SĐT/Chức danh+Công ty/Nhãn) — thay cho danh sách avatar xếp chồng cũ, header dính khi cuộn nhờ .wm-list-scroll đã overflow-y:auto sẵn. */ .wm-contact-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .wm-contact-table thead th { position: sticky; top: 0; background: var(--wm-surface); text-align: left; padding: .6rem 1.1rem; font-weight: 600; font-size: .76rem; color: var(--wm-muted); text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--wm-border); white-space: nowrap; } .wm-contact-table tbody tr.wm-contact-row { cursor: pointer; border-bottom: 1px solid var(--wm-border); } .wm-contact-table tbody tr.wm-contact-row:hover { background: var(--wm-bg); } .wm-contact-table tbody tr.wm-contact-row.active { background: var(--wm-accent-soft); } .wm-contact-table td { padding: .5rem 1.1rem; vertical-align: middle; color: var(--wm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .wm-contact-td-name { font-weight: 600; } .wm-contact-name-cell { display: flex; align-items: center; gap: .6rem; } .wm-contact-table-avatar { width: 32px; height: 32px; font-size: .76rem; flex-shrink: 0; } .wm-contact-label-chip { display: inline-block; background: var(--wm-bg); border: 1px solid var(--wm-border); border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; margin: 0 .25rem .25rem 0; color: var(--wm-muted); } .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; } /* Cột hành động Sửa/Xoá trên mỗi hàng bảng danh bạ (thay cho việc phải mở panel chi tiết mới xoá/sửa được) — click hàng hoặc nút Sửa đều mở thẳng trang sửa (#contactFormView), nút Xoá xử lý tại chỗ. */ .wm-contact-td-actions { white-space: nowrap; text-align: right; } .wm-contact-row-action-btn { border: none; background: none; color: var(--wm-muted); cursor: pointer; padding: .3rem .4rem; border-radius: 6px; font-size: .85rem; } .wm-contact-row-action-btn:hover { background: var(--wm-bg); color: var(--wm-accent); } .wm-contact-row-action-btn.wm-contact-row-delete-btn:hover { color: var(--wm-danger); background: var(--wm-danger-soft); } .wm-contact-detail-avatar { width: 64px; height: 64px; font-size: 1.4rem; flex-shrink: 0; } .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; } .wm-btn-text { border: none; background: none; color: var(--wm-accent); font-size: .8rem; cursor: pointer; padding: 0; font-weight: 600; } .wm-btn-text:hover { text-decoration: underline; } /* Hộp thoại "Hợp nhất và sửa" (nội dung HTML tuỳ biến bên trong Swal.fire, xem contacts.js) */ .wm-merge-list { text-align: left; max-height: 60vh; overflow-y: auto; } .wm-merge-group { border: 1px solid var(--wm-border); border-radius: 8px; padding: .75rem; margin-bottom: .75rem; } .wm-merge-group-title { font-size: .8rem; font-weight: 600; color: var(--wm-muted); margin-bottom: .5rem; } .wm-merge-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .88rem; cursor: pointer; } .wm-merge-btn { margin-top: .5rem; } /* Tên/Họ cạnh nhau trong form sửa liên hệ */ .wm-contact-form-cols { display: flex; gap: .75rem; } .wm-contact-form-cols .wm-compose-field { flex: 1; min-width: 0; } /* Mỗi dòng email/SĐT có thể thêm/xoá động (kiểu Google Contacts) trong form sửa liên hệ */ .wm-contact-form-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .wm-contact-form-row input { flex: 1; min-width: 0; } .wm-contact-form-row select { flex: 0 0 118px; } .wm-contact-form-remove { border: none; background: none; color: var(--wm-muted); cursor: pointer; padding: .3rem; flex-shrink: 0; } .wm-contact-form-remove:hover { color: var(--wm-danger); } .wm-contact-form-add { border: none; background: none; color: var(--wm-accent); cursor: pointer; font-size: .85rem; padding: .25rem 0; } .wm-contact-form-add:hover { text-decoration: underline; } /* Ô nhập nhãn dạng "chip" — gõ rồi Enter/dấu phẩy để thêm, backspace trên ô trống để xoá chip cuối */ .wm-contact-labels-input { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; border: 1px solid var(--wm-border); border-radius: 8px; padding: .4rem .55rem; /* background: var(--wm-surface); */ } .wm-contact-labels-input:focus-within { border-color: var(--wm-accent); box-shadow: 0 0 0 3px var(--wm-accent-soft); } .wm-contact-label-chip-removable { display: inline-flex; align-items: center; gap: .3rem; background: var(--wm-bg); border-radius: 999px; padding: .15rem .4rem .15rem .65rem; font-size: .78rem; } .wm-contact-label-chip-removable button { border: none; background: none; cursor: pointer; color: var(--wm-muted); padding: .1rem; font-size: .7rem; } .wm-contact-label-chip-removable button:hover { color: var(--wm-danger); } .wm-contact-labels-input input { border: none; outline: none; flex: 1; min-width: 90px; font-size: .88rem; background: transparent; font-family: inherit; } /* ---------- 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; /* Compose chỉ dùng thẻ (không viền mặc định); Contacts (trang sửa liên hệ) dùng