email compose
This commit is contained in:
parent
f95901d596
commit
342eb78676
3 changed files with 86 additions and 75 deletions
|
|
@ -133,6 +133,16 @@ export default function ComposeDock({ account, onSent, agentOpen = true }) {
|
|||
const visibleExpanded = expandedWindows.slice(0, MAX_EXPANDED);
|
||||
const hiddenMinimized = minimizedWindows.slice(3);
|
||||
const visibleChips = minimizedWindows.slice(0, 3);
|
||||
const hasOpenComposer = windows.some((window) => !window.minimized);
|
||||
const hasBlankComposer = windows.some((window) => !window.minimized && isDraftEmpty(window.id));
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.toggle("compose-open", hasOpenComposer);
|
||||
document.body.classList.toggle("compose-blank-open", hasBlankComposer);
|
||||
return () => {
|
||||
document.body.classList.remove("compose-open", "compose-blank-open");
|
||||
};
|
||||
}, [hasOpenComposer, hasBlankComposer]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -455,16 +455,16 @@ export default function ComposeModal({
|
|||
>
|
||||
<header className="compose-window-header">
|
||||
<div className="compose-window-title">
|
||||
<span className="compose-agent-mark"><AgentSpark /></span>
|
||||
<span className="compose-header-spark" aria-hidden="true"><AgentSpark /></span>
|
||||
<div className="compose-window-heading">
|
||||
<h2>New message</h2>
|
||||
<MenuDropdown
|
||||
className="compose-from-picker"
|
||||
showCaret={false}
|
||||
showCaret
|
||||
iconStroke={iconStroke}
|
||||
label={
|
||||
<span className="compose-from-label">
|
||||
From: <strong>{fromAddress.email}</strong>
|
||||
<strong>{fromAddress.email}</strong>
|
||||
</span>
|
||||
}
|
||||
items={fromOptions.map((option) => ({
|
||||
|
|
@ -541,22 +541,19 @@ export default function ComposeModal({
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="compose-row compose-subject-row">
|
||||
<span className="compose-row-label" aria-hidden="true" />
|
||||
<div className="compose-row-main compose-subject-main">
|
||||
<input
|
||||
className="compose-subject-input"
|
||||
value={subject}
|
||||
onChange={(event) => setSubject(event.target.value)}
|
||||
placeholder="Subject"
|
||||
maxLength={998}
|
||||
/>
|
||||
{bodyHtml && !subject && (
|
||||
<button type="button" className="compose-subject-suggest" onClick={suggestSubject}>
|
||||
<AgentSpark /> Suggest
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="compose-subject-row">
|
||||
<input
|
||||
className="compose-subject-input"
|
||||
value={subject}
|
||||
onChange={(event) => setSubject(event.target.value)}
|
||||
placeholder="Subject"
|
||||
maxLength={998}
|
||||
/>
|
||||
{bodyHtml && !subject && (
|
||||
<button type="button" className="compose-subject-suggest" onClick={suggestSubject}>
|
||||
<AgentSpark /> Suggest
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{attachments.length > 0 && (
|
||||
|
|
|
|||
|
|
@ -670,121 +670,126 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail-meta time { white-space:nowrap; }
|
||||
.mail-detail-body { padding-top:23px; color:#383440; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
|
||||
|
||||
.compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
|
||||
.compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:12px; pointer-events:auto; }
|
||||
.compose-draft-chip { max-width:220px; height:34px; padding:0 10px 0 12px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-normal); border-radius:9px; background:#fff; box-shadow:0 6px 20px rgba(8,8,33,.12); color:var(--ink); font-size:11px; font-weight:600; }
|
||||
.compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; transition:right 160ms ease-out; }
|
||||
.compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; pointer-events:auto; }
|
||||
.compose-draft-chip { max-width:220px; height:34px; padding:0 10px 0 12px; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(24,20,35,.08); border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(20,18,30,.08),0 8px 24px rgba(20,18,30,.12); color:var(--ink); font-size:11px; font-weight:600; }
|
||||
.compose-draft-chip span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.compose-draft-chip-close { width:18px; height:18px; display:grid; place-items:center; border-radius:5px; color:#8a848d; font-size:14px; line-height:1; }
|
||||
.compose-draft-chip-close { width:18px; height:18px; display:grid; place-items:center; border-radius:4px; color:#8a848d; font-size:14px; line-height:1; }
|
||||
.compose-draft-chip-close:hover { background:#f3efec; color:var(--ink); }
|
||||
.compose-draft-overflow { position:relative; }
|
||||
.compose-draft-overflow-menu { position:absolute; right:0; bottom:calc(100% + 6px); min-width:180px; padding:6px; display:grid; gap:2px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-draft-overflow-menu button { width:100%; min-height:32px; padding:0 10px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:11px; font-weight:600; }
|
||||
.compose-draft-overflow-menu { position:absolute; right:0; bottom:calc(100% + 6px); min-width:180px; padding:6px; display:grid; gap:2px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,.12); }
|
||||
.compose-draft-overflow-menu button { width:100%; min-height:32px; padding:0 10px; border:0; border-radius:6px; background:transparent; text-align:left; font-size:11px; font-weight:600; }
|
||||
.compose-draft-overflow-menu button:hover { background:#f7f4f1; }
|
||||
.compose-window { --compose-pad:15px; --compose-label:30px; width:580px; min-width:520px; max-width:680px; height:520px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border-normal); border-radius:12px 12px 4px 4px; background:#fff; box-shadow:0 10px 32px rgba(8,8,33,.16); animation:composeSlideUp var(--motion-slow) var(--ease-standard); pointer-events:auto; resize:both; }
|
||||
.compose-window { --compose-pad:14px; --compose-label:30px; width:560px; min-width:500px; max-width:640px; height:560px; display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid rgba(24,20,35,.08); border-radius:10px; box-shadow:0 1px 2px rgba(20,18,30,.08),0 8px 24px rgba(20,18,30,.12),0 20px 48px rgba(20,18,30,.08); animation:composeSlideUp var(--motion-slow) var(--ease-standard); pointer-events:auto; flex-shrink:0; }
|
||||
.compose-window.docked { position:relative; right:auto; bottom:auto; }
|
||||
.compose-window.expanded { position:fixed; left:50%; top:50%; right:auto !important; bottom:auto !important; transform:translate(-50%,-50%); width:min(900px,calc(100vw - 80px)); min-width:min(800px,calc(100vw - 80px)); max-width:960px; height:min(78vh,760px); z-index:50; resize:none; }
|
||||
.compose-window.focused { box-shadow:0 14px 40px rgba(8,8,33,.2); }
|
||||
@keyframes composeSlideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
|
||||
.compose-window.expanded { position:fixed; left:50%; top:50%; right:auto !important; bottom:auto !important; transform:translate(-50%,-50%); width:min(900px,calc(100vw - 80px)); min-width:min(800px,calc(100vw - 80px)); max-width:960px; height:min(78vh,760px); z-index:50; }
|
||||
.compose-window.focused { box-shadow:0 1px 2px rgba(20,18,30,.1),0 10px 28px rgba(20,18,30,.14),0 24px 56px rgba(20,18,30,.1); }
|
||||
@keyframes composeSlideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
|
||||
.compose-window.expanded { animation:composeExpandIn var(--motion-slow) var(--ease-standard); }
|
||||
@keyframes composeExpandIn { from { opacity:0; transform:translate(-50%,-48%); } to { opacity:1; transform:translate(-50%,-50%); } }
|
||||
.compose-window-header { height:52px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:#fffefd; flex-shrink:0; }
|
||||
.compose-window-title { min-width:0; display:flex; align-items:center; gap:9px; }
|
||||
.compose-window-heading { min-width:0; display:grid; gap:2px; }
|
||||
.compose-window-heading h2 { margin:0; font:650 14px/1.1 "Manrope"; letter-spacing:-.25px; white-space:nowrap; }
|
||||
.compose-from-picker .compose-menu-trigger { min-height:auto; height:auto; padding:0; border:0; background:transparent; color:#8a848d; font:400 10px/1.2 "DM Sans"; box-shadow:none; }
|
||||
.compose-window-header { height:48px; padding:0 var(--compose-pad); display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #ECE9EE; background:#FCFAFB; flex-shrink:0; }
|
||||
.compose-window-title { min-width:0; display:flex; align-items:center; gap:8px; }
|
||||
.compose-header-spark { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:14px; line-height:1; color:#7357F6; flex-shrink:0; }
|
||||
.compose-window-heading { min-width:0; display:grid; gap:1px; }
|
||||
.compose-window-heading h2 { margin:0; font:650 14px/1.15 "Manrope"; letter-spacing:-.2px; white-space:nowrap; color:var(--ink); }
|
||||
.compose-from-picker .compose-menu-trigger { min-height:auto; height:auto; padding:0; border:0; background:transparent; color:#7a7585; font:400 10px/1.2 "DM Sans"; box-shadow:none; gap:4px; }
|
||||
.compose-from-picker .compose-menu-trigger svg { width:12px; height:12px; color:#9a95a3; }
|
||||
.compose-from-label strong { color:#5c5760; font-weight:500; }
|
||||
.compose-window-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
|
||||
.compose-window-controls button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#6f6a73; }
|
||||
.compose-window-controls button:hover { background:#f4eeea; color:var(--ink); }
|
||||
.compose-window-body { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
|
||||
.compose-row { min-height:46px; padding:0 var(--compose-pad); display:grid; grid-template-columns:var(--compose-label) minmax(0,1fr) auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); flex-shrink:0; }
|
||||
.compose-window-controls button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#6f6a73; }
|
||||
.compose-window-controls button:hover { background:rgba(20,18,30,.05); color:var(--ink); }
|
||||
.compose-window-body { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; background:#fff; }
|
||||
.compose-row { height:44px; padding:0 var(--compose-pad); display:grid; grid-template-columns:var(--compose-label) minmax(0,1fr) auto; align-items:center; gap:12px; border-bottom:1px solid #ECE9EE; flex-shrink:0; }
|
||||
.compose-row-label { color:#77717a; font-size:11px; font-weight:700; }
|
||||
.compose-row-main { min-width:0; }
|
||||
.compose-recipient-row .compose-row-main { display:flex; align-items:center; min-height:34px; }
|
||||
.compose-recipient-row .compose-row-main { display:flex; align-items:center; min-height:28px; }
|
||||
.compose-recipient-toggles { display:flex; align-items:center; gap:12px; align-self:center; }
|
||||
.compose-recipient-toggles button { padding:0; border:0; background:transparent; color:#847e87; font-size:10px; font-weight:700; line-height:1; }
|
||||
.compose-recipient-toggles button:hover { color:#bc5948; }
|
||||
.compose-recipient-field { position:relative; width:100%; }
|
||||
.compose-recipient-field.inline { display:block; }
|
||||
.compose-recipient-chips { min-height:28px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
|
||||
.compose-recipient-input { flex:1; min-width:80px; height:28px; border:0; outline:0; background:transparent; color:var(--ink); font:500 12px/28px "DM Sans"; }
|
||||
.compose-recipient-input { flex:1; min-width:80px; height:28px; border:0; border-radius:0; outline:none; background:transparent; color:var(--ink); font:500 12px/28px "DM Sans"; box-shadow:none; }
|
||||
.compose-recipient-input:focus { outline:none; box-shadow:none; }
|
||||
.compose-chip { max-width:100%; height:24px; padding:0 4px 0 8px; display:inline-flex; align-items:center; gap:4px; border-radius:6px; background:#f3efec; color:var(--ink); font-size:11px; font-weight:600; }
|
||||
.compose-chip.external { background:#fff4ea; color:#9a5b28; }
|
||||
.compose-chip.invalid { background:#fdeeed; color:#b54f3d; }
|
||||
.compose-chip.group { background:#eef4ff; color:#4d74c4; }
|
||||
.compose-chip-label { display:inline-flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.compose-chip-label em { padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.06); font-size:8px; font-weight:700; font-style:normal; letter-spacing:.3px; text-transform:uppercase; }
|
||||
.compose-chip button { width:18px; height:18px; display:grid; place-items:center; border:0; border-radius:5px; background:transparent; color:#8a848d; }
|
||||
.compose-chip button { width:18px; height:18px; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; color:#8a848d; }
|
||||
.compose-chip button:hover { background:rgba(0,0,0,.06); color:var(--ink); }
|
||||
.compose-recipient-suggestions { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:8; margin:0; padding:6px; list-style:none; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-recipient-suggestions button { width:100%; padding:8px 10px; display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; border:0; border-radius:8px; background:transparent; text-align:left; color:var(--ink); }
|
||||
.compose-recipient-suggestions { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:8; margin:0; padding:6px; list-style:none; border:1px solid #ECE9EE; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,.12); }
|
||||
.compose-recipient-suggestions button { width:100%; padding:8px 10px; display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; border:0; border-radius:6px; background:transparent; text-align:left; color:var(--ink); }
|
||||
.compose-recipient-suggestions button strong { font-size:12px; font-weight:600; }
|
||||
.compose-recipient-suggestions button small { grid-column:1; color:#8a848d; font-size:10px; }
|
||||
.compose-recipient-suggestions button em { font-size:8px; font-weight:700; font-style:normal; letter-spacing:.3px; text-transform:uppercase; color:#9a5b28; }
|
||||
.compose-recipient-suggestions button.active,.compose-recipient-suggestions button:hover { background:#f7f4f1; }
|
||||
.compose-subject-row { grid-template-columns:var(--compose-label) minmax(0,1fr); }
|
||||
.compose-subject-main { display:flex; align-items:center; gap:8px; min-width:0; }
|
||||
.compose-subject-input { width:100%; min-width:0; height:28px; border:0; outline:0; background:transparent; color:var(--ink); font:500 13px/28px "DM Sans"; }
|
||||
.compose-subject-suggest { flex-shrink:0; height:26px; padding:0 8px; display:inline-flex; align-items:center; gap:4px; border:1px solid #E5DFFB; border-radius:7px; background:#FAF8FF; color:#7357F6; font-size:10px; font-weight:700; }
|
||||
.compose-subject-suggest:hover { background:#F3F0FF; }
|
||||
.compose-attachments { padding:8px var(--compose-pad) 4px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); flex-shrink:0; }
|
||||
.compose-attachment-card { min-width:min(100%,200px); max-width:260px; padding:7px 9px; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:9px; background:#fcfbfa; }
|
||||
.compose-subject-row { height:44px; padding:0 var(--compose-pad); display:flex; align-items:center; gap:8px; border-bottom:1px solid #ECE9EE; flex-shrink:0; }
|
||||
.compose-subject-input { flex:1; min-width:0; height:28px; border:0; border-radius:0; outline:none; background:transparent; color:var(--ink); font:500 13px/28px "DM Sans"; box-shadow:none; }
|
||||
.compose-subject-input:focus { outline:none; box-shadow:none; }
|
||||
.compose-subject-suggest { flex-shrink:0; padding:0; border:0; background:transparent; color:#7357F6; font-size:10px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
|
||||
.compose-subject-suggest:hover { color:#5a3fe0; }
|
||||
.compose-attachments { padding:8px var(--compose-pad) 4px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #ECE9EE; flex-shrink:0; }
|
||||
.compose-attachment-card { min-width:min(100%,200px); max-width:260px; padding:7px 9px; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; border:1px solid #ECE9EE; border-radius:6px; background:#fcfbfa; }
|
||||
.compose-attachment-icon { font-size:16px; line-height:1; }
|
||||
.compose-attachment-card strong { display:block; font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.compose-attachment-card small { display:block; margin-top:1px; color:#8a848d; font-size:9px; }
|
||||
.compose-attachment-actions { display:flex; align-items:center; gap:2px; }
|
||||
.compose-attachment-actions button { padding:3px 4px; border:0; border-radius:5px; background:transparent; color:#8a848d; font-size:8px; font-weight:700; }
|
||||
.compose-attachment-actions button { padding:3px 4px; border:0; border-radius:4px; background:transparent; color:#8a848d; font-size:8px; font-weight:700; }
|
||||
.compose-attachment-actions button:hover { background:#f3efec; color:var(--ink); }
|
||||
.compose-editor { min-height:180px; flex:1; padding:12px var(--compose-pad); overflow:auto; outline:0; color:var(--ink); font:400 13px/1.6 "DM Sans"; }
|
||||
.compose-editor { min-height:160px; flex:1; padding:16px; overflow:auto; outline:none; color:var(--ink); font:400 13px/1.6 "DM Sans"; background:#fff; }
|
||||
.compose-editor:focus { outline:none; box-shadow:none; }
|
||||
.compose-editor:empty:before { content:attr(data-placeholder); color:#aaa4ac; pointer-events:none; }
|
||||
.compose-editor blockquote { margin:8px 0; padding-left:12px; border-left:3px solid #e5dfd9; color:#67677a; }
|
||||
.compose-bottom-stack { flex-shrink:0; border-top:1px solid var(--line); }
|
||||
.compose-agent-bar { height:44px; padding:0 var(--compose-pad); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border-bottom:1px solid #EEE9FF; background:#FAF8FF; color:#77728C; font-size:11px; }
|
||||
.compose-bottom-stack { flex-shrink:0; border-top:1px solid #EEECEF; background:#fff; }
|
||||
.compose-agent-bar { height:42px; padding:0 var(--compose-pad); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border-top:1px solid #EEEAF8; border-bottom:1px solid #EEEAF8; background:#FBF9FF; color:#77728C; font-size:11px; }
|
||||
.compose-agent-bar .agent-spark { color:#7357F6; }
|
||||
.compose-agent-bar-disabled { pointer-events:none; }
|
||||
.compose-agent-bar button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; background:#ECE7FF; color:#B7AEE6; }
|
||||
.compose-agent-arrow { color:#B7AEE6; }
|
||||
.compose-agent-bar button { width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; }
|
||||
.compose-agent-arrow { color:#C8BFE8; }
|
||||
.compose-agent-arrow.active { color:#7357F6; }
|
||||
.compose-format-bar { height:40px; padding:0 var(--compose-pad); display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--line); background:#fff; }
|
||||
.compose-format-group { display:flex; align-items:center; gap:1px; }
|
||||
.compose-format-bar button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#6f6a73; }
|
||||
.compose-format-bar { height:38px; padding:0 12px; display:flex; align-items:center; gap:2px; border-bottom:1px solid #ECE9EE; background:#fff; }
|
||||
.compose-format-group { display:flex; align-items:center; gap:2px; }
|
||||
.compose-format-bar button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:0; background:transparent; color:#6f6a73; }
|
||||
.compose-format-bar button:hover { background:#f7f4f1; color:#c25c49; }
|
||||
.compose-format-divider { width:1px; height:16px; margin:0 5px; background:#ebe5e1; flex-shrink:0; }
|
||||
.compose-format-divider { width:1px; height:16px; margin:0 5px; background:#ECE9EE; flex-shrink:0; }
|
||||
.compose-warnings { padding:6px var(--compose-pad); border-bottom:1px solid #f0e2c8; background:#fff8ea; }
|
||||
.compose-warnings p { margin:0; color:#9a7228; font-size:10px; line-height:1.4; }
|
||||
.compose-warnings p+p { margin-top:3px; }
|
||||
.compose-error { margin:0; padding:6px var(--compose-pad); color:#b54f3d; font-size:10px; background:#fdeeed; }
|
||||
.compose-notice { margin:0; padding:6px var(--compose-pad); color:#4d74c4; font-size:10px; background:#eef4ff; }
|
||||
.compose-action-bar { height:52px; padding:0 var(--compose-pad); display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; }
|
||||
.compose-action-left { display:flex; align-items:center; gap:2px; min-width:0; flex-wrap:nowrap; overflow:hidden; }
|
||||
.compose-action-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
|
||||
.compose-send-split { position:relative; height:36px; display:inline-flex; align-items:stretch; border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(255,95,80,.18); flex-shrink:0; }
|
||||
.compose-action-bar { height:52px; padding:0 12px; display:flex; align-items:center; gap:8px; background:#fff; }
|
||||
.compose-action-left { display:flex; align-items:center; gap:4px; min-width:0; flex:1; overflow:hidden; }
|
||||
.compose-action-right { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
|
||||
.compose-send-split { position:relative; height:36px; display:inline-flex; align-items:stretch; border-radius:8px; overflow:hidden; flex-shrink:0; }
|
||||
.compose-send-primary { min-width:94px; height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; background:var(--coral); color:var(--ink); font-size:12px; font-weight:700; }
|
||||
.compose-send-primary:hover:not(:disabled) { filter:brightness(1.03); }
|
||||
.compose-send-primary:disabled { opacity:.6; cursor:wait; }
|
||||
.compose-send-caret { width:30px; height:36px; display:grid; place-items:center; border:0; border-left:1px solid rgba(8,8,33,.08); background:#ff7f67; color:var(--ink); }
|
||||
.compose-send-caret:hover:not(:disabled) { background:#ff7560; }
|
||||
.compose-send-menu-panel { position:absolute; left:0; bottom:calc(100% + 6px); z-index:8; min-width:170px; padding:6px; display:grid; gap:2px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-send-menu-panel button { width:100%; min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; font-size:11px; font-weight:600; text-align:left; }
|
||||
.compose-send-menu-panel { position:absolute; left:0; bottom:calc(100% + 6px); z-index:8; min-width:170px; padding:6px; display:grid; gap:2px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,.12); }
|
||||
.compose-send-menu-panel button { width:100%; min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:6px; background:transparent; font-size:11px; font-weight:600; text-align:left; }
|
||||
.compose-send-menu-panel button:hover { background:#f7f4f1; }
|
||||
.compose-menu { position:relative; }
|
||||
.compose-menu-trigger { min-height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; background:var(--coral); color:var(--ink); font-size:12px; font-weight:700; box-shadow:var(--shadow-accent); }
|
||||
.compose-icon-menu .compose-menu-trigger,.compose-icon-btn { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#6f6a73; box-shadow:none; }
|
||||
.compose-menu-trigger { min-height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; background:var(--coral); color:var(--ink); font-size:12px; font-weight:700; }
|
||||
.compose-icon-menu .compose-menu-trigger,.compose-icon-btn { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#6f6a73; box-shadow:none; }
|
||||
.compose-icon-menu .compose-menu-trigger:hover,.compose-icon-btn:hover { background:#f3efec; color:var(--ink); }
|
||||
.compose-menu-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:8; min-width:190px; padding:6px; display:grid; gap:2px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-menu-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:8; min-width:190px; padding:6px; display:grid; gap:2px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,.12); }
|
||||
.compose-menu-panel.align-right { left:auto; right:0; }
|
||||
.compose-menu-panel button { width:100%; min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:11px; font-weight:600; text-align:left; }
|
||||
.compose-menu-panel button { width:100%; min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:6px; background:transparent; color:var(--ink); font-size:11px; font-weight:600; text-align:left; }
|
||||
.compose-menu-panel button small { margin-left:auto; color:#8a848d; font-size:9px; font-weight:500; }
|
||||
.compose-menu-panel button:hover:not(:disabled) { background:#f7f4f1; }
|
||||
.compose-menu-panel button.active { background:#eef8f2; color:#3d8a5d; }
|
||||
.compose-menu-panel button:disabled { opacity:.45; cursor:not-allowed; }
|
||||
.compose-draft-status { color:#8a848d; font-size:10px; font-weight:600; white-space:nowrap; }
|
||||
.compose-discard { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#8a848d; }
|
||||
.compose-discard { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#8a848d; margin-left:auto; }
|
||||
.compose-discard:hover { background:#fdeeed; color:#b54f3d; }
|
||||
.compose-emoji-wrap { position:relative; }
|
||||
.compose-emoji-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:8; width:180px; padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-emoji-panel button { width:26px; height:26px; border:0; border-radius:6px; background:transparent; font-size:15px; }
|
||||
.compose-emoji-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:8; width:180px; padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,.12); }
|
||||
.compose-emoji-panel button { width:26px; height:26px; border:0; border-radius:4px; background:transparent; font-size:15px; }
|
||||
.compose-emoji-panel button:hover { background:#f3efec; }
|
||||
body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55); pointer-events:none; }
|
||||
@media (max-width:640px) {
|
||||
.compose-format-divider-advanced,.compose-format-advanced { display:none; }
|
||||
.compose-format-align { display:none; }
|
||||
|
|
@ -840,7 +845,7 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail { position:static; flex:1; }
|
||||
.mail-detail-close { display:flex!important; }
|
||||
.compose-dock { right:12px !important; bottom:12px; }
|
||||
.compose-window { width:min(calc(100vw - 24px),580px); min-width:0; max-width:none; height:min(520px,calc(100vh - 24px)); resize:none; }
|
||||
.compose-window { width:min(calc(100vw - 24px),560px); min-width:0; max-width:none; height:min(560px,calc(100vh - 24px)); }
|
||||
.compose-window.expanded { width:calc(100vw - 24px); min-width:0; height:min(78vh,calc(100vh - 24px)); }
|
||||
}
|
||||
@media(max-width:480px) {
|
||||
|
|
@ -1158,7 +1163,6 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail.open { animation:slideInDetail var(--motion-slow) var(--ease-standard); }
|
||||
.mail-detail-agent-bar .agent-action.subtle { height:36px; padding:0 var(--space-3); font-size:var(--text-meta); border-radius:var(--radius-sm); }
|
||||
.mail-detail-content h2 { margin-top:0; }
|
||||
.compose-agent-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--agent-soft); color:var(--agent); flex-shrink:0; }
|
||||
.mailbox-notes-pane.compact { min-height:0; border-radius:10px; border:1px solid rgba(26,24,38,0.055); background:#FFFFFF; box-shadow:0 1px 2px rgba(20,18,30,0.025),0 4px 12px rgba(20,18,30,0.03); overflow:hidden; }
|
||||
.mailbox-notes-pane.compact.empty { background:#FFFFFF; }
|
||||
.mailbox-notes-pane.compact.empty .sticky-notes-toggle { min-height:38px; color:#77758A; font-size:11px; font-weight:600; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue