/* Brevo Email GUI — application styles */
:root {
/* Cream-toned light palette, paired with the Django admin's muted-teal
* header + yellow accent so the app and /admin/ feel like the same site. */
--bg: #f7f1de;
--surface: #fdf8ea;
--surface-alt: #f0e8cf;
--border: #d8cdaa;
--text: #2c2926;
--muted: #6b6356;
--primary: #417690;
--primary-dark: #264b5d;
--accent: #f5dd5d;
--header-bg: #417690;
--header-fg: #ffffff;
--header-accent: #f5dd5d;
--success: #1f9d55;
--danger: #ba2121;
--warning: #b7791f;
--radius: 8px;
}
/* Dark mode: applied via [data-theme="dark"] on , set by the toggle in
* the header and persisted in localStorage. The editor canvas (.tiptap-host)
* and the preview iframe are force-kept on a white background below so the
* WYSIWYG still matches what the email will look like in an inbox. */
html[data-theme="dark"] {
--bg: #1a1c20;
--surface: #252830;
--surface-alt: #2e323c;
--border: #3a3d45;
--text: #e6e7eb;
--muted: #9aa0a6;
--primary: #79aec8;
--primary-dark: #417690;
--header-bg: #264b5d;
--header-fg: #ffffff;
--header-accent: #f5dd5d;
}
* { box-sizing: border-box; }
/* Base font size bumped to 18px for readability. Almost all sizing below is
* expressed in rem, so this scales the whole app up proportionally; the few
* explicitly-small helper styles are floored to >= 1rem (18px) so no text
* renders below size 18. */
html { font-size: 18px; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 1rem;
line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* --- Header / nav --- */
/* Mirrors the Django admin header: dark teal/navy bar, white nav links,
* yellow accent on the brand. Theme tokens (--header-bg / --header-fg /
* --header-accent) flip in dark mode to the admin's darker breadcrumb shade. */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 56px;
background: var(--header-bg);
border-bottom: 1px solid var(--header-bg);
color: var(--header-fg);
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--header-accent); }
.brand:hover { text-decoration: none; color: var(--header-accent); }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav > a,
.site-nav .link-button {
font-size: 1.15rem;
padding: 8px 14px;
border-radius: 6px;
line-height: 1.2;
color: var(--header-fg);
}
.site-nav > a:hover,
.site-nav .link-button:hover {
background: rgba(255, 255, 255, 0.15);
text-decoration: none;
color: var(--header-fg);
}
.nav-user { color: rgba(255, 255, 255, 0.85); font-size: 1rem; }
.inline-form { display: inline; margin: 0; }
.link-button {
background: none; border: none; padding: 0;
color: var(--primary); cursor: pointer; font-size: 1rem;
}
.link-button:hover { text-decoration: underline; }
.link-danger { color: var(--danger); }
/* Header-context theme toggle: outlined on the teal bar, not on the body bg. */
.site-header .theme-toggle {
border-color: rgba(255, 255, 255, 0.4);
color: var(--header-fg);
}
.site-header .theme-toggle:hover {
background: rgba(255, 255, 255, 0.15);
}
/* --- Layout --- */
.site-main { max-width: 960px; margin: 32px auto; padding: 0 24px; }
.full-bleed { max-width: none; margin: 0; padding: 0; }
/* --- Messages --- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.message {
padding: 10px 14px; border-radius: var(--radius);
margin-bottom: 8px; border: 1px solid transparent;
}
.message-success { background: #e7f6ec; border-color: #b6e3c4; color: #1f7a44; }
.message-error { background: #fbeaea; border-color: #f0c3c3; color: #a93232; }
.message-warning { background: #fdf3e1; border-color: #f0dcb0; color: #8a6116; }
.message-info { background: #e8f0ff; border-color: #c2d6ff; color: #29508f; }
/* --- Typography helpers --- */
.muted { color: var(--muted); }
.small { font-size: 1rem; }
.form-error { color: var(--danger); font-weight: 600; }
/* --- Cards / panels --- */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.page-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; gap: 16px;
}
.page-header h1 { margin: 0; font-size: 1.5rem; }
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 9px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 1rem;
cursor: pointer;
text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--surface-alt); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #19833f; color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #a41515; color: #fff; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* --- Forms --- */
form label { display: block; font-weight: 600; margin: 14px 0 4px; }
form input[type=text],
form input[type=email],
form input[type=password],
form textarea,
form select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 1rem;
font-family: inherit;
}
form textarea { min-height: 80px; }
.help-text { color: var(--muted); font-size: 1rem; margin: 4px 0 0; }
.field-error { color: var(--danger); font-size: 1rem; margin: 4px 0 0; }
/* --- Auth card --- */
.auth-card {
max-width: 380px; margin: 60px auto;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 32px;
}
.auth-card h1 { margin-top: 0; }
/* --- Email list table --- */
.email-table { width: 100%; border-collapse: collapse; }
.email-table th, .email-table td {
text-align: left; padding: 12px 10px;
border-bottom: 1px solid var(--border);
}
.email-table th { font-size: 1rem; text-transform: uppercase; color: var(--muted); }
.email-table tr:last-child td { border-bottom: none; }
/* --- Status badges --- */
.badge {
display: inline-block; padding: 3px 11px; border-radius: 999px;
font-size: 1rem; font-weight: 600; text-transform: uppercase;
}
.badge-draft { background: #eceef1; color: #555; }
.badge-sending { background: #fdf3e1; color: var(--warning); }
.badge-sent { background: #e7f6ec; color: var(--success); }
.badge-shared { background: var(--accent, #f5c400); color: #1f2a37; margin-left: 6px; }
.badge-failed { background: #fbeaea; color: var(--danger); }
/* --- Empty state --- */
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
/* --- Links page --- */
/* Centered, slightly wider than the default site-main so the two-column
* split (link list + add/group sidebar) has room to breathe. */
.links-page { max-width: 1320px; margin: 32px auto; padding: 0 24px; }
.links-layout { display: flex; gap: 24px; align-items: flex-start; }
.links-main { flex: 1; min-width: 0; }
.links-sidebar { width: 340px; flex-shrink: 0; position: sticky; top: 24px; }
/* The .anim class is added by JS after first paint, so restoring a saved
* collapsed state on load doesn't visibly slide the panel shut. */
.links-sidebar.anim { transition: width 0.2s ease; }
/* Collapsed: the add/group forms slide away and the sidebar shrinks to a slim
* tab, handing the freed width to the link list (.links-main is flex:1). */
.links-sidebar.collapsed { width: 40px; }
.links-sidebar.collapsed .sidebar-content { display: none; }
.links-sidebar.collapsed .sidebar-tab { display: flex; }
.sidebar-content { min-width: 0; }
/* Small "Hide" control at the top-right of the expanded panel. */
.sidebar-content-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.sidebar-collapse-btn {
background: none; border: none; cursor: pointer; font: inherit;
font-size: 0.95rem; color: var(--muted);
padding: 4px 8px; border-radius: var(--radius);
}
.sidebar-collapse-btn:hover { background: var(--surface-alt); color: var(--text); }
/* The peek tab — only shown when collapsed — sticks out with a vertical label
* so people know the add panel is still there. */
.sidebar-tab {
display: none; /* flipped to flex by .collapsed */
flex-direction: column; align-items: center; gap: 8px;
width: 40px; padding: 14px 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text); cursor: pointer; font: inherit;
}
.sidebar-tab:hover { background: var(--surface-alt); }
.sidebar-tab-icon { color: var(--muted); font-size: 1.2rem; line-height: 1; }
.sidebar-tab-text {
writing-mode: vertical-rl;
font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap;
}
.page-intro { color: var(--muted); margin: 0 0 18px; max-width: 72ch; }
/* The search box is an , which the global form rule above
* doesn't cover — so without this it falls back to the browser's tiny default
* font. Match the rest of the page (and let it grow within the header row). */
.links-search { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; max-width: 540px; }
.links-search input[type=search] {
flex: 1; min-width: 180px;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 1.05rem;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.link-group { margin-bottom: 18px; }
.link-group > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: 10px;
margin: -6px -8px; padding: 6px 8px; border-radius: 8px;
}
.link-group > summary::-webkit-details-marker { display: none; }
.link-group > summary:hover { background: var(--surface-alt); }
.link-group > summary h2 { margin: 0; font-size: 1.25rem; }
.link-group-chev { transition: transform .15s ease; color: var(--muted); font-size: 1.1rem; }
.link-group[open] > summary .link-group-chev { transform: rotate(90deg); }
.link-group-count {
margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--primary);
background: var(--surface-alt); border: 1px solid var(--border);
padding: 2px 10px; border-radius: 999px;
}
.link-group-byline { margin: 10px 0 4px; }
.link-group-edit { font-size: 1rem; }
.link-group-desc { color: var(--muted); margin: 6px 0 12px; }
@media (prefers-reduced-motion: reduce) { .link-group-chev { transition: none; } }
.link-items { list-style: none; margin: 0; padding: 0; }
.link-item {
display: flex; align-items: flex-start; gap: 16px;
padding: 12px 2px; border-bottom: 1px solid var(--border);
}
.link-item:last-child { border-bottom: none; }
/* Left column grows to fill the row, so the link + its description — the data
* people actually came for — get the lion's share of the width. */
.link-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link-title { font-weight: 600; font-size: 1.05rem; }
.link-note { min-width: 0; }
/* Right column: the "Added by" line stacked above compact Edit/Delete buttons,
* kept narrow and right-aligned so it stays out of the data's way. */
.link-aside {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
text-align: right;
}
.link-meta { white-space: nowrap; }
.link-item-actions { display: flex; align-items: center; gap: 6px; }
.link-action {
font-size: 0.82rem; line-height: 1.4;
padding: 3px 12px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
cursor: pointer; text-decoration: none;
}
.link-action:hover { background: var(--surface-alt); text-decoration: none; }
.link-action--danger { color: var(--danger); border-color: var(--danger); }
.link-action--danger:hover { background: var(--danger); color: #fff; }
/* Below the split's comfortable width, stack the sidebar under the list. The
* side-drawer collapse doesn't suit a full-width column, so the peek tab
* becomes a full-width horizontal bar with a normal (horizontal) label. */
@media (max-width: 900px) {
.links-layout { flex-direction: column; }
.links-sidebar { width: auto; position: static; }
.links-sidebar.collapsed { width: auto; }
.sidebar-tab { width: auto; flex-direction: row; justify-content: center; padding: 12px; }
.sidebar-tab-text { writing-mode: horizontal-tb; }
}
/* --- Editor page --- */
/* The editor and the settings/send sidebar sit side by side, filling the
* viewport below the 56px site header. The sidebar can be collapsed via the
* "Hide settings" toggle (adds .settings-hidden on .editor-layout). */
.editor-layout { display: flex; height: calc(100vh - 56px); }
.editor-layout .editor-shell { flex: 1; min-width: 0; }
.settings-sidebar {
width: 360px;
flex-shrink: 0;
height: 100%;
overflow-y: auto;
background: var(--surface);
border-left: 1px solid var(--border);
padding: 18px 20px;
}
.editor-layout.settings-hidden .settings-sidebar { display: none; }
.sidebar-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.sidebar-head h2 { margin: 0; font-size: 1.2rem; }
.settings-sidebar .send-box { background: var(--bg); }
/* On narrow screens the side-by-side split is too cramped; stack instead. */
@media (max-width: 860px) {
.editor-layout { flex-direction: column; height: auto; }
.editor-shell { height: calc(100vh - 56px); }
.settings-sidebar {
width: auto; height: auto; border-left: none;
border-top: 1px solid var(--border);
}
}
.editor-shell { display: flex; flex-direction: column; height: 100%; }
.editor-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 20px;
background: var(--surface); border-bottom: 1px solid var(--border);
}
.editor-bar .email-name { font-weight: 600; }
.editor-bar .save-state { color: var(--muted); font-size: 1rem; }
/* TipTap editor host (post simple-editor swap). The SimpleEditor React tree
* uses `flex: 1` internally to fill, so its mount point needs to be a flex
* container in the column-direction shell. */
#editor-root {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
}
/* Keep the editor canvas on a white surface even in dark mode so authoring
* still matches what the email will look like in a recipient's inbox. */
.tiptap-host { background: #ffffff; color: #1a1a1a; }
/* --- Help content (shared: the Help page + the editor's help drawer) --- */
/* The step-by-step writing guide lives in templates/emails/_writing_guide.html
* and is included in both places, so its styles are global rather than scoped
* to one page. Theme tokens keep it correct in light and dark mode. */
.help-body { line-height: 1.6; color: var(--text); }
.help-body h3 { margin: 22px 0 6px; font-size: 1.02rem; color: var(--primary); }
.help-body ol, .help-body ul { padding-left: 22px; }
.help-body li { margin: 8px 0; }
.help-tip {
background: var(--surface-alt);
border-left: 4px solid var(--accent);
border-radius: 6px;
padding: 10px 14px;
margin: 16px 0;
color: var(--text);
}
.help-tip.important { border-left-color: var(--primary); }
/* A little pill that stands in for a real on-screen button, so a step can say
* "click [ + New email ]" and it looks like the thing people will click. */
.ui-btn {
display: inline-block;
background: var(--primary); color: #fff;
border-radius: 5px; padding: 1px 9px;
font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.ui-btn.plain { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.ui-check {
display: inline-block;
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: 5px; padding: 1px 9px;
font-weight: 600; white-space: nowrap;
}
.help-cta { text-align: center; margin: 20px 0 6px; }
.help-cta .btn { font-size: 1.05rem; padding: 12px 26px; }
/* --- Editor help drawer (left side of the editor page) --- */
/* Mirrors the Links page's collapsible sidebar, but on the left: a slim tab
* peeks out; clicking it slides open a panel with the writing guide, so people
* who get stuck can pull up help without leaving the editor. Collapsed by
* default; the open/closed choice is remembered in localStorage. */
.help-drawer {
flex-shrink: 0;
height: 100%;
width: 360px;
overflow-y: auto;
background: var(--surface);
border-right: 1px solid var(--border);
}
.help-drawer.anim { transition: width 0.2s ease; }
.help-drawer.collapsed { width: 46px; overflow: hidden; }
.help-drawer.collapsed .help-drawer-content { display: none; }
.help-drawer:not(.collapsed) .help-drawer-tab { display: none; }
.help-drawer-tab {
display: flex; flex-direction: column; align-items: center; gap: 10px;
width: 46px; height: 100%; padding: 16px 0;
background: none; border: none; cursor: pointer; font: inherit; color: var(--text);
}
.help-drawer-tab:hover { background: var(--surface-alt); }
.help-drawer-tab-icon { font-size: 1.35rem; line-height: 1; }
.help-drawer-tab-text {
writing-mode: vertical-rl;
font-weight: 600; font-size: 0.98rem; letter-spacing: 0.02em; white-space: nowrap;
}
.help-drawer-content { padding: 14px 18px 24px; }
.help-drawer-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 4px;
}
.help-drawer-head h2 { margin: 0; font-size: 1.15rem; }
@media (max-width: 860px) {
.help-drawer {
width: auto; height: auto; overflow: visible;
border-right: none; border-bottom: 1px solid var(--border);
}
.help-drawer.collapsed { width: auto; }
.help-drawer-tab { width: auto; height: auto; flex-direction: row; justify-content: center; padding: 12px; }
.help-drawer-tab-text { writing-mode: horizontal-tb; }
}
/* --- Editor toolbar: larger, easier-to-read buttons --- */
/* The TipTap toolbar lives inside the compiled editor bundle and styles its
* buttons with inline styles, so these overrides need `!important` to win.
* The toolbar is the first child the React editor renders inside
* #editor-root; its control buttons sit at 1-3 levels deep (plain buttons are
* direct children; the emoji/section triggers one level in; the colour/
* highlight triggers two levels in). We deliberately stop at depth 3 so the
* pop-over panels (emoji grid, colour swatches) and dialogs aren't enlarged.
* Bigger buttons + the toolbar's existing flex-wrap make the row reflow onto
* two (or more, on narrow windows) rows. */
#editor-root > div > div:first-child {
gap: 8px !important;
row-gap: 10px !important;
padding: 12px 16px !important;
}
#editor-root > div > div:first-child > button,
#editor-root > div > div:first-child > div > button,
#editor-root > div > div:first-child > div > div > button {
font-size: 18px !important;
padding: 10px 14px !important;
min-width: 44px !important;
min-height: 42px !important;
border-radius: 6px !important;
}
/* The undo/redo + alignment icons are inline SVGs with fixed width/height
* attributes; size them up to match the bigger buttons. */
#editor-root > div > div:first-child svg {
width: 20px !important;
height: 20px !important;
}
/* Theme-toggle button in the editor toolbar. */
.theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
}
.theme-toggle:hover { background: var(--bg); }
/* --- Preview iframe --- */
.preview-frame {
width: 100%; height: 70vh;
border: 1px solid var(--border); border-radius: var(--radius);
background: #fff;
}
/* --- Stats grid --- */
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px; margin-top: 16px;
}
.stat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px; text-align: center;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-card .stat-label { color: var(--muted); font-size: 1rem; text-transform: uppercase; }
/* --- Definition list (settings summary) --- */
.summary-list { margin: 0; }
.summary-list dt { font-weight: 600; color: var(--muted); font-size: 1rem; margin-top: 12px; }
.summary-list dd { margin: 2px 0 0; }
/* --- Preview modal --- */
.preview-modal-overlay {
position: fixed; inset: 0; z-index: 1100;
background: rgba(15, 23, 42, 0.45);
display: flex; align-items: center; justify-content: center;
}
.preview-modal-card {
width: min(90vw, 960px); height: 90vh;
background: #fff; border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
display: flex; flex-direction: column; overflow: hidden;
}
.preview-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.preview-modal-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.preview-modal-close {
background: transparent; border: 0; cursor: pointer;
font-size: 1.4rem; line-height: 1; color: var(--muted);
padding: 4px 10px; border-radius: var(--radius);
}
.preview-modal-close:hover { background: var(--border); color: inherit; }
.preview-modal-body { flex: 1; min-height: 0; display: flex; }
.preview-modal-iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.preview-modal-loading,
.preview-modal-error {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 24px; text-align: center; white-space: pre-wrap;
}
.preview-modal-loading { color: var(--muted); }
.preview-modal-error { color: #b91c1c; }
/* ---- Supplies page (poll-greeting gear + swap board) ---------------------- */
.supply-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.supply-section-head h2 { margin: 0; }
.supply-board { padding: 18px 20px; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.board-post { border: 1px solid var(--border, #dfe3e8); border-radius: 12px; padding: 14px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 8px; }
.board-post.resolved { opacity: .6; }
.board-post-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-post-title { font-weight: 700; margin: 0; line-height: 1.35; }
.board-post-details { margin: 0; line-height: 1.45; }
.board-post-meta { margin: 0; }
.board-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.badge-have { background: #e7f6ec; color: var(--success); }
.badge-need { background: #fdf3e1; color: var(--warning); }
.supply-qty { font-weight: 700; color: var(--primary); }
.supply-item-main { display: flex; gap: 12px; align-items: flex-start; }
.supply-photo { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #dfe3e8); flex: none; display: block; }
.supply-photo-wide { width: 100%; height: 150px; }
.supply-photo-lg { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin-bottom: 14px; }
.supply-kind { border: 0; padding: 0; margin: 0 0 10px; }
.supply-kind legend { font-weight: 600; margin-bottom: 4px; }
.supply-kind label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 400; }
.supply-kind input[type="radio"] { width: auto; margin: 0; }
/* Number inputs (quantity) match the width of the text inputs beside them. */
.links-sidebar input[type="number"], .panel input[type="number"] { width: 100%; }