jcoffey-dev
abb07acc80
The sidebar's right edge is now a splitter, like the one between the message list and the reading pane: drag it between 240 and 480px, move it with the arrow keys, double-click to put it back. The width is a device setting, and stays null until someone drags, so a width set in the reader's own CSS through --sidebar-w is kept until they choose otherwise. Hidden on a phone, where the sidebar is a drawer, and while collapsed. Arrow keys on either splitter moved the pane and never saved it: the keyboard path called onResize without onEnd. It ends each key press now, and both views keep the in-progress size in a ref as well as state, so the end reads the value set in the same tick. The message-list splitter's accessible name was an untranslated literal. It goes through translate() now, and it and the sidebar's new name are in all nine catalogues. Closes #345
2376 lines
139 KiB
CSS
2376 lines
139 KiB
CSS
/* ==========================================================================
|
||
ihasmail design system
|
||
========================================================================== */
|
||
|
||
:root {
|
||
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||
--fs: 14px;
|
||
--radius: 10px;
|
||
--radius-sm: 6px;
|
||
--radius-lg: 16px;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
--shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
|
||
--shadow-3: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
--row-h: 44px;
|
||
--topbar-h: 56px;
|
||
--sidebar-w: 256px;
|
||
--sidebar-w-collapsed: 68px;
|
||
--list-w: 42%;
|
||
--ease: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* Light palette */
|
||
--bg: #f6f8fa;
|
||
--bg-elev: #ffffff;
|
||
--bg-sunken: #eef1f4;
|
||
--bg-hover: rgba(15, 23, 42, 0.05);
|
||
--bg-active: rgba(15, 23, 42, 0.09);
|
||
--fg: #111827;
|
||
--fg-muted: #5b6472;
|
||
--fg-faint: #8b94a3;
|
||
--border: #e3e7ec;
|
||
--border-strong: #cbd2da;
|
||
--accent: #0f766e;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #d9f1ee;
|
||
--accent-soft-fg: #0b5750;
|
||
--danger: #dc2626;
|
||
--danger-soft: #fee2e2;
|
||
--warn: #b45309;
|
||
--warn-soft: #fef3c7;
|
||
--success: #15803d;
|
||
--success-soft: #dcfce7;
|
||
--link: #0e7490;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f3f5f7;
|
||
--selected-bg: #d9f1ee;
|
||
--focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.35);
|
||
--star: #f59e0b;
|
||
--q1: #2563eb;
|
||
--q2: #16a34a;
|
||
--q3: #9333ea;
|
||
--scrollbar: rgba(0, 0, 0, 0.25);
|
||
color-scheme: light;
|
||
}
|
||
|
||
:root[data-theme="dark"] {
|
||
--bg: #0b1220;
|
||
--bg-elev: #111a2b;
|
||
--bg-sunken: #0d1524;
|
||
--bg-hover: rgba(255, 255, 255, 0.06);
|
||
--bg-active: rgba(255, 255, 255, 0.1);
|
||
--fg: #e5e9f0;
|
||
--fg-muted: #9aa5b8;
|
||
--fg-faint: #6b7689;
|
||
--border: #1f2a3d;
|
||
--border-strong: #31405a;
|
||
--accent: #2dd4bf;
|
||
--accent-fg: #052e2b;
|
||
--accent-soft: rgba(45, 212, 191, 0.16);
|
||
--accent-soft-fg: #99f6e4;
|
||
--danger: #f87171;
|
||
--danger-soft: rgba(248, 113, 113, 0.15);
|
||
--warn: #fbbf24;
|
||
--warn-soft: rgba(251, 191, 36, 0.15);
|
||
--success: #4ade80;
|
||
--success-soft: rgba(74, 222, 128, 0.15);
|
||
--link: #67e8f9;
|
||
--unread-bg: #121c2e;
|
||
--read-bg: #0e1627;
|
||
--selected-bg: rgba(45, 212, 191, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.4);
|
||
--star: #fbbf24;
|
||
--q1: #60a5fa;
|
||
--q2: #4ade80;
|
||
--q3: #c084fc;
|
||
--scrollbar: rgba(255, 255, 255, 0.25);
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||
--shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||
--shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/*
|
||
* The "ihasmail" theme: the palette from ihasmail.org, which is a teal-navy
|
||
* rather than the blue-slate of the plain dark theme, warmed by the orange the
|
||
* logo's cat is drawn in.
|
||
*
|
||
* It rides on data-theme="dark" rather than replacing it, so every dark-only
|
||
* rule further down this file -- tooltips, toasts, the message frame -- keeps
|
||
* applying without being duplicated. Only the palette is overridden.
|
||
*
|
||
* Specificity is doing deliberate work here. This block is [data-palette] plus
|
||
* :root, so 0,2,0; the accent variants below are :root[data-theme][data-accent],
|
||
* so 0,3,0 and they win. That is what makes the accent swatches keep working on
|
||
* top of this theme -- and because the default accent ("teal") has no rule of
|
||
* its own, ihasmail.org's own accent is what shows until someone picks another.
|
||
*/
|
||
:root[data-theme="dark"][data-palette="ihasmail"] {
|
||
--bg: #0d2430;
|
||
--bg-elev: #12303e;
|
||
--bg-sunken: #0a1c26;
|
||
--bg-hover: rgba(70, 202, 195, 0.10);
|
||
--bg-active: rgba(70, 202, 195, 0.16);
|
||
--fg: #eaf6f6;
|
||
--fg-muted: #a3c3cb;
|
||
--fg-faint: #86aab4;
|
||
--border: #21505f;
|
||
--border-strong: #2e6a7a;
|
||
--accent: #46cac3;
|
||
--accent-fg: #062028;
|
||
--accent-soft: rgba(70, 202, 195, 0.16);
|
||
--accent-soft-fg: #9fe6e2;
|
||
--danger: #f87171;
|
||
--danger-soft: rgba(248, 113, 113, 0.15);
|
||
--warn: #f9a34b;
|
||
--warn-soft: rgba(249, 163, 75, 0.14);
|
||
--success: #4ade80;
|
||
--success-soft: rgba(74, 222, 128, 0.15);
|
||
--link: #6fdcd6;
|
||
--unread-bg: #163a4a;
|
||
--read-bg: #12303e;
|
||
--selected-bg: rgba(70, 202, 195, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(70, 202, 195, 0.4);
|
||
/* The cat is orange; so is the star. */
|
||
--star: #f9a34b;
|
||
--q1: #6fdcd6;
|
||
--q2: #4ade80;
|
||
--q3: #c084fc;
|
||
--scrollbar: rgba(163, 195, 203, 0.3);
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* === generated palettes: begin === */
|
||
|
||
/*
|
||
|
||
* Written by scripts/build-palettes.py -- edit the sources there, not here.
|
||
|
||
*
|
||
|
||
* Every colour is from the palette's own project (all MIT); the published
|
||
|
||
* values are recorded in .palette-sources/palettes-upstream.md. The tiers
|
||
|
||
* between them are derived, and every text colour is checked against the
|
||
|
||
* surface it sits on: 4.5:1 for prose, 3:1 for borders and marks. Several
|
||
|
||
* of these palettes do not meet that as published -- Dracula's comment grey
|
||
|
||
* is about 3.0:1 on its own background -- so those tiers are lifted, which
|
||
|
||
* is why this is arithmetic rather than a hand-written block.
|
||
|
||
*/
|
||
|
||
/* ihasmail (light) lifted for contrast: faint #7d969c -> #62757a (2.94 -> 4.55); accent #46cac3 -> #379e98 (1.88 -> 3.04); star #f9a34b -> #c5813b (1.91 -> 3.00); border-strong #b2c5c9 -> #849295 (1.69 -> 3.03) */
|
||
|
||
:root[data-palette="ihasmail"] {
|
||
--bg: #f4f9f9;
|
||
--bg-elev: #ffffff;
|
||
--bg-sunken: #e7f1f2;
|
||
--bg-hover: rgba(13, 36, 48, 0.06);
|
||
--bg-active: rgba(13, 36, 48, 0.11);
|
||
--fg: #0d2430;
|
||
--fg-muted: #4a6b74;
|
||
--fg-faint: #62757a;
|
||
--border: #cfe2e4;
|
||
--border-strong: #849295;
|
||
--accent: #379e98;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #daeceb;
|
||
--accent-soft-fg: #28736f;
|
||
--danger: #dc2626;
|
||
--danger-soft: rgba(220, 38, 38, 0.15);
|
||
--warn: #b45309;
|
||
--warn-soft: rgba(180, 83, 9, 0.15);
|
||
--success: #15803d;
|
||
--success-soft: rgba(21, 128, 61, 0.15);
|
||
--link: #0e7490;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #edf3f3;
|
||
--selected-bg: #daeceb;
|
||
--focus-ring: 0 0 0 3px rgba(55, 158, 152, 0.4);
|
||
--star: #c5813b;
|
||
--q1: #0e7490;
|
||
--q2: #15803d;
|
||
--q3: #7c3aed;
|
||
--scrollbar: rgba(74, 107, 116, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* dracula (light) lifted for contrast: faint #98937b -> #787461 (2.98 -> 4.53); border-strong #b5b5c1 -> #91919a (1.96 -> 3.01) */
|
||
|
||
:root[data-palette="dracula"] {
|
||
--bg: #fffbeb;
|
||
--bg-elev: #ffffff;
|
||
--bg-sunken: #f6f1de;
|
||
--bg-hover: rgba(31, 31, 31, 0.06);
|
||
--bg-active: rgba(31, 31, 31, 0.11);
|
||
--fg: #1f1f1f;
|
||
--fg-muted: #6c664b;
|
||
--fg-faint: #787461;
|
||
--border: #cfcfde;
|
||
--border-strong: #91919a;
|
||
--accent: #644ac9;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #e9e2e6;
|
||
--accent-soft-fg: #644ac9;
|
||
--danger: #cb3a2a;
|
||
--danger-soft: rgba(203, 58, 42, 0.15);
|
||
--warn: #a34d14;
|
||
--warn-soft: rgba(163, 77, 20, 0.15);
|
||
--success: #14710a;
|
||
--success-soft: rgba(20, 113, 10, 0.15);
|
||
--link: #036a96;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f8f4e5;
|
||
--selected-bg: #e9e2e6;
|
||
--focus-ring: 0 0 0 3px rgba(100, 74, 201, 0.4);
|
||
--star: #846e15;
|
||
--q1: #036a96;
|
||
--q2: #14710a;
|
||
--q3: #a3144d;
|
||
--scrollbar: rgba(108, 102, 75, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* dracula (dark) lifted for contrast: muted #6272a4 -> #8390b7 (3.03 -> 4.50); faint #687190 -> #8b92aa (2.95 -> 4.60); border-strong #5f6271 -> #717381 (2.35 -> 3.03) */
|
||
|
||
:root[data-theme="dark"][data-palette="dracula"] {
|
||
--bg: #282a36;
|
||
--bg-elev: #2f3140;
|
||
--bg-sunken: #21222c;
|
||
--bg-hover: rgba(248, 248, 242, 0.06);
|
||
--bg-active: rgba(248, 248, 242, 0.11);
|
||
--fg: #f8f8f2;
|
||
--fg-muted: #8390b7;
|
||
--fg-faint: #8b92aa;
|
||
--border: #44475a;
|
||
--border-strong: #717381;
|
||
--accent: #bd93f9;
|
||
--accent-fg: #282a36;
|
||
--accent-soft: rgba(189, 147, 249, 0.16);
|
||
--accent-soft-fg: #bf96f9;
|
||
--danger: #ff5555;
|
||
--danger-soft: rgba(255, 85, 85, 0.15);
|
||
--warn: #ffb86c;
|
||
--warn-soft: rgba(255, 184, 108, 0.15);
|
||
--success: #50fa7b;
|
||
--success-soft: rgba(80, 250, 123, 0.15);
|
||
--link: #8be9fd;
|
||
--unread-bg: #2f3140;
|
||
--read-bg: #21222c;
|
||
--selected-bg: rgba(189, 147, 249, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(189, 147, 249, 0.4);
|
||
--star: #f1fa8c;
|
||
--q1: #8be9fd;
|
||
--q2: #50fa7b;
|
||
--q3: #ff79c6;
|
||
--scrollbar: rgba(131, 144, 183, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* gruvbox (light) lifted for contrast: muted #7c6f64 -> #776b60 (4.29 -> 4.56); faint #9f937f -> #746b5d (2.66 -> 4.62); link #427b58 -> #417956 (4.40 -> 4.52); success #79740e -> #746f0d (4.29 -> 4.60); border-strong #beaf91 -> #948871 (1.90 -> 3.07); q2 #79740e -> #746f0d (4.29 -> 4.60) */
|
||
|
||
:root[data-palette="gruvbox"] {
|
||
--bg: #fbf1c7;
|
||
--bg-elev: #f9f5d7;
|
||
--bg-sunken: #f2e5bc;
|
||
--bg-hover: rgba(60, 56, 54, 0.06);
|
||
--bg-active: rgba(60, 56, 54, 0.11);
|
||
--fg: #3c3836;
|
||
--fg-muted: #776b60;
|
||
--fg-faint: #746b5d;
|
||
--border: #d5c4a1;
|
||
--border-strong: #948871;
|
||
--accent: #076678;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #d9debc;
|
||
--accent-soft-fg: #076678;
|
||
--danger: #9d0006;
|
||
--danger-soft: rgba(157, 0, 6, 0.15);
|
||
--warn: #af3a03;
|
||
--warn-soft: rgba(175, 58, 3, 0.15);
|
||
--success: #746f0d;
|
||
--success-soft: rgba(116, 111, 13, 0.15);
|
||
--link: #417956;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f5ebc3;
|
||
--selected-bg: #d9debc;
|
||
--focus-ring: 0 0 0 3px rgba(7, 102, 120, 0.4);
|
||
--star: #b57614;
|
||
--q1: #076678;
|
||
--q2: #746f0d;
|
||
--q3: #8f3f71;
|
||
--scrollbar: rgba(119, 107, 96, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* gruvbox (dark) lifted for contrast: faint #827768 -> #968d80 (3.36 -> 4.51); danger #fb4934 -> #fb5440 (4.29 -> 4.52); border-strong #675f55 -> #787168 (2.35 -> 3.06) */
|
||
|
||
:root[data-theme="dark"][data-palette="gruvbox"] {
|
||
--bg: #282828;
|
||
--bg-elev: #32302f;
|
||
--bg-sunken: #1d2021;
|
||
--bg-hover: rgba(235, 219, 178, 0.06);
|
||
--bg-active: rgba(235, 219, 178, 0.11);
|
||
--fg: #ebdbb2;
|
||
--fg-muted: #a89984;
|
||
--fg-faint: #968d80;
|
||
--border: #504945;
|
||
--border-strong: #787168;
|
||
--accent: #83a598;
|
||
--accent-fg: #282828;
|
||
--accent-soft: rgba(131, 165, 152, 0.16);
|
||
--accent-soft-fg: #8cab9f;
|
||
--danger: #fb5440;
|
||
--danger-soft: rgba(251, 84, 64, 0.15);
|
||
--warn: #fe8019;
|
||
--warn-soft: rgba(254, 128, 25, 0.15);
|
||
--success: #b8bb26;
|
||
--success-soft: rgba(184, 187, 38, 0.15);
|
||
--link: #8ec07c;
|
||
--unread-bg: #32302f;
|
||
--read-bg: #1d2021;
|
||
--selected-bg: rgba(131, 165, 152, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(131, 165, 152, 0.4);
|
||
--star: #fabd2f;
|
||
--q1: #83a598;
|
||
--q2: #b8bb26;
|
||
--q3: #d3869b;
|
||
--scrollbar: rgba(168, 153, 132, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* rose-pine (light) lifted for contrast: muted #797593 -> #716d89 (4.02 -> 4.52); faint #9a96a7 -> #706e7a (2.64 -> 4.58); danger #b4637a -> #a45a6f (3.84 -> 4.50); warn #ea9d34 -> #986622 (2.05 -> 4.51); success #56949f -> #467881 (3.14 -> 4.51); star #ea9d34 -> #be7f2a (2.05 -> 3.07); border-strong #c8c2c1 -> #908c8b (1.61 -> 3.05); q2 #56949f -> #467881 (3.14 -> 4.51); q3 #907aa9 -> #7a6890 (3.47 -> 4.57) */
|
||
|
||
:root[data-palette="rose-pine"] {
|
||
--bg: #faf4ed;
|
||
--bg-elev: #fffaf3;
|
||
--bg-sunken: #f2e9e1;
|
||
--bg-hover: rgba(70, 66, 97, 0.06);
|
||
--bg-active: rgba(70, 66, 97, 0.11);
|
||
--fg: #464261;
|
||
--fg-muted: #716d89;
|
||
--fg-faint: #706e7a;
|
||
--border: #dfd9d2;
|
||
--border-strong: #908c8b;
|
||
--accent: #907aa9;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #ebe3e3;
|
||
--accent-soft-fg: #705f84;
|
||
--danger: #a45a6f;
|
||
--danger-soft: rgba(164, 90, 111, 0.15);
|
||
--warn: #986622;
|
||
--warn-soft: rgba(152, 102, 34, 0.15);
|
||
--success: #467881;
|
||
--success-soft: rgba(70, 120, 129, 0.15);
|
||
--link: #286983;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f5efe9;
|
||
--selected-bg: #ebe3e3;
|
||
--focus-ring: 0 0 0 3px rgba(144, 122, 169, 0.4);
|
||
--star: #be7f2a;
|
||
--q1: #286983;
|
||
--q2: #467881;
|
||
--q3: #7a6890;
|
||
--scrollbar: rgba(113, 109, 137, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* rose-pine (dark) lifted for contrast: faint #6c6982 -> #828095 (3.35 -> 4.60); success #31748f -> #5089a0 (3.38 -> 4.56); border-strong #423f56 -> #666376 (1.75 -> 3.04); q2 #31748f -> #5089a0 (3.38 -> 4.56) */
|
||
|
||
:root[data-theme="dark"][data-palette="rose-pine"] {
|
||
--bg: #191724;
|
||
--bg-elev: #1f1d2e;
|
||
--bg-sunken: #14121f;
|
||
--bg-hover: rgba(224, 222, 244, 0.06);
|
||
--bg-active: rgba(224, 222, 244, 0.11);
|
||
--fg: #e0def4;
|
||
--fg-muted: #908caa;
|
||
--fg-faint: #828095;
|
||
--border: #26233a;
|
||
--border-strong: #666376;
|
||
--accent: #c4a7e7;
|
||
--accent-fg: #191724;
|
||
--accent-soft: rgba(196, 167, 231, 0.16);
|
||
--accent-soft-fg: #c4a7e7;
|
||
--danger: #eb6f92;
|
||
--danger-soft: rgba(235, 111, 146, 0.15);
|
||
--warn: #f6c177;
|
||
--warn-soft: rgba(246, 193, 119, 0.15);
|
||
--success: #5089a0;
|
||
--success-soft: rgba(80, 137, 160, 0.15);
|
||
--link: #9ccfd8;
|
||
--unread-bg: #1f1d2e;
|
||
--read-bg: #14121f;
|
||
--selected-bg: rgba(196, 167, 231, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(196, 167, 231, 0.4);
|
||
--star: #f6c177;
|
||
--q1: #9ccfd8;
|
||
--q2: #5089a0;
|
||
--q3: #c4a7e7;
|
||
--scrollbar: rgba(144, 140, 170, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* tokyo-night (light) lifted for contrast: faint #777a8b -> #646675 (3.44 -> 4.60); border-strong #acaeb6 -> #83848a (1.79 -> 3.02) */
|
||
|
||
:root[data-palette="tokyo-night"] {
|
||
--bg: #e6e7ed;
|
||
--bg-elev: #f2f3f7;
|
||
--bg-sunken: #d6d8df;
|
||
--bg-hover: rgba(52, 59, 89, 0.06);
|
||
--bg-active: rgba(52, 59, 89, 0.11);
|
||
--fg: #343b59;
|
||
--fg-muted: #484c61;
|
||
--fg-faint: #646675;
|
||
--border: #c1c2c7;
|
||
--border-strong: #83848a;
|
||
--accent: #2959aa;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #ccd3e4;
|
||
--accent-soft-fg: #2959aa;
|
||
--danger: #8c4351;
|
||
--danger-soft: rgba(140, 67, 81, 0.15);
|
||
--warn: #8f5e15;
|
||
--warn-soft: rgba(143, 94, 21, 0.15);
|
||
--success: #385f0d;
|
||
--success-soft: rgba(56, 95, 13, 0.15);
|
||
--link: #006c86;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #e1e2e9;
|
||
--selected-bg: #ccd3e4;
|
||
--focus-ring: 0 0 0 3px rgba(41, 89, 170, 0.4);
|
||
--star: #8f5e15;
|
||
--q1: #006c86;
|
||
--q2: #385f0d;
|
||
--q3: #65359d;
|
||
--scrollbar: rgba(72, 76, 97, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* tokyo-night (dark) lifted for contrast: border-strong #4b506c -> #62677f (2.17 -> 3.06) */
|
||
|
||
:root[data-theme="dark"][data-palette="tokyo-night"] {
|
||
--bg: #1a1b26;
|
||
--bg-elev: #1f2130;
|
||
--bg-sunken: #16161e;
|
||
--bg-hover: rgba(192, 202, 245, 0.06);
|
||
--bg-active: rgba(192, 202, 245, 0.11);
|
||
--fg: #c0caf5;
|
||
--fg-muted: #a9b1d6;
|
||
--fg-faint: #7e84a1;
|
||
--border: #363b54;
|
||
--border-strong: #62677f;
|
||
--accent: #7aa2f7;
|
||
--accent-fg: #1a1b26;
|
||
--accent-soft: rgba(122, 162, 247, 0.16);
|
||
--accent-soft-fg: #7aa2f7;
|
||
--danger: #f7768e;
|
||
--danger-soft: rgba(247, 118, 142, 0.15);
|
||
--warn: #e0af68;
|
||
--warn-soft: rgba(224, 175, 104, 0.15);
|
||
--success: #9ece6a;
|
||
--success-soft: rgba(158, 206, 106, 0.15);
|
||
--link: #7dcfff;
|
||
--unread-bg: #1f2130;
|
||
--read-bg: #16161e;
|
||
--selected-bg: rgba(122, 162, 247, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(122, 162, 247, 0.4);
|
||
--star: #e0af68;
|
||
--q1: #7dcfff;
|
||
--q2: #9ece6a;
|
||
--q3: #bb9af7;
|
||
--scrollbar: rgba(169, 177, 214, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* catppuccin (light) lifted for contrast: fg #4c4f69 -> #484b64 (6.57 -> 7.00); muted #6c6f85 -> #64677c (4.06 -> 4.58); faint #8b8e9e -> #656873 (2.67 -> 4.57); link #1e66f5 -> #1c5fe4 (4.04 -> 4.54); danger #d20f39 -> #d00f38 (4.46 -> 4.53); warn #fe640b -> #b24608 (2.45 -> 4.58); success #40a02b -> #307820 (2.75 -> 4.50); star #df8e1d -> #b97618 (2.15 -> 3.05); border-strong #b8bcc8 -> #83858e (1.56 -> 3.02); q1 #1e66f5 -> #1c5fe4 (4.04 -> 4.54); q2 #40a02b -> #307820 (2.75 -> 4.50); q3 #ea76cb -> #9a4e86 (2.17 -> 4.53) */
|
||
|
||
:root[data-palette="catppuccin"] {
|
||
--bg: #e6e9ef;
|
||
--bg-elev: #eff1f5;
|
||
--bg-sunken: #dce0e8;
|
||
--bg-hover: rgba(72, 75, 100, 0.06);
|
||
--bg-active: rgba(72, 75, 100, 0.11);
|
||
--fg: #484b64;
|
||
--fg-muted: #64677c;
|
||
--fg-faint: #656873;
|
||
--border: #ccd0da;
|
||
--border-strong: #83858e;
|
||
--accent: #8839ef;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #d9d0ef;
|
||
--accent-soft-fg: #7632d0;
|
||
--danger: #d00f38;
|
||
--danger-soft: rgba(208, 15, 56, 0.15);
|
||
--warn: #b24608;
|
||
--warn-soft: rgba(178, 70, 8, 0.15);
|
||
--success: #307820;
|
||
--success-soft: rgba(48, 120, 32, 0.15);
|
||
--link: #1c5fe4;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #e1e4eb;
|
||
--selected-bg: #d9d0ef;
|
||
--focus-ring: 0 0 0 3px rgba(136, 57, 239, 0.4);
|
||
--star: #b97618;
|
||
--q1: #1c5fe4;
|
||
--q2: #307820;
|
||
--q3: #9a4e86;
|
||
--scrollbar: rgba(100, 103, 124, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* catppuccin (dark) lifted for contrast: faint #7d829a -> #81869d (4.32 -> 4.55); border-strong #595c71 -> #66697c (2.49 -> 3.03) */
|
||
|
||
:root[data-theme="dark"][data-palette="catppuccin"] {
|
||
--bg: #1e1e2e;
|
||
--bg-elev: #313244;
|
||
--bg-sunken: #181825;
|
||
--bg-hover: rgba(205, 214, 244, 0.06);
|
||
--bg-active: rgba(205, 214, 244, 0.11);
|
||
--fg: #cdd6f4;
|
||
--fg-muted: #a6adc8;
|
||
--fg-faint: #81869d;
|
||
--border: #45475a;
|
||
--border-strong: #66697c;
|
||
--accent: #cba6f7;
|
||
--accent-fg: #1e1e2e;
|
||
--accent-soft: rgba(203, 166, 247, 0.16);
|
||
--accent-soft-fg: #cba6f7;
|
||
--danger: #f38ba8;
|
||
--danger-soft: rgba(243, 139, 168, 0.15);
|
||
--warn: #fab387;
|
||
--warn-soft: rgba(250, 179, 135, 0.15);
|
||
--success: #a6e3a1;
|
||
--success-soft: rgba(166, 227, 161, 0.15);
|
||
--link: #89b4fa;
|
||
--unread-bg: #313244;
|
||
--read-bg: #181825;
|
||
--selected-bg: rgba(203, 166, 247, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(203, 166, 247, 0.4);
|
||
--star: #f9e2af;
|
||
--q1: #89b4fa;
|
||
--q2: #a6e3a1;
|
||
--q3: #f5c2e7;
|
||
--scrollbar: rgba(166, 173, 200, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* solarized (light) lifted for contrast: fg #657b83 -> #47565c (4.13 -> 7.07); muted #93a1a1 -> #687272 (2.48 -> 4.59); faint #959a94 -> #6e726e (2.66 -> 4.53); link #2aa198 -> #217e77 (2.93 -> 4.51); danger #dc322f -> #d5302e (4.29 -> 4.54); warn #cb4b16 -> #c34815 (4.27 -> 4.57); success #859900 -> #687700 (2.97 -> 4.61); star #b58900 -> #b38800 (2.98 -> 3.02); border-strong #cecab8 -> #928f83 (1.53 -> 3.00); q1 #2aa198 -> #217e77 (2.93 -> 4.51); q2 #859900 -> #687700 (2.97 -> 4.61); q3 #6c71c4 -> #666ab8 (4.06 -> 4.51) */
|
||
|
||
:root[data-palette="solarized"] {
|
||
--bg: #fdf6e3;
|
||
--bg-elev: #fffdf6;
|
||
--bg-sunken: #eee8d5;
|
||
--bg-hover: rgba(71, 86, 92, 0.06);
|
||
--bg-active: rgba(71, 86, 92, 0.11);
|
||
--fg: #47565c;
|
||
--fg-muted: #687272;
|
||
--fg-faint: #6e726e;
|
||
--border: #e6dfc8;
|
||
--border-strong: #928f83;
|
||
--accent: #268bd2;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #dfe7e1;
|
||
--accent-soft-fg: #1d6ba2;
|
||
--danger: #d5302e;
|
||
--danger-soft: rgba(213, 48, 46, 0.15);
|
||
--warn: #c34815;
|
||
--warn-soft: rgba(195, 72, 21, 0.15);
|
||
--success: #687700;
|
||
--success-soft: rgba(104, 119, 0, 0.15);
|
||
--link: #217e77;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f8f1df;
|
||
--selected-bg: #dfe7e1;
|
||
--focus-ring: 0 0 0 3px rgba(38, 139, 210, 0.4);
|
||
--star: #b38800;
|
||
--q1: #217e77;
|
||
--q2: #687700;
|
||
--q3: #666ab8;
|
||
--scrollbar: rgba(104, 114, 114, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* solarized (dark) lifted for contrast: fg #839496 -> #a8b4b6 (4.75 -> 7.06); muted #586e75 -> #809196 (2.79 -> 4.58); faint #5a7279 -> #7d9095 (2.94 -> 4.50); danger #dc322f -> #e56563 (3.25 -> 4.56); warn #cb4b16 -> #d67147 (3.26 -> 4.51); border-strong #245661 -> #4e767f (1.84 -> 3.02); q3 #6c71c4 -> #8488cd (3.43 -> 4.56) */
|
||
|
||
:root[data-theme="dark"][data-palette="solarized"] {
|
||
--bg: #002b36;
|
||
--bg-elev: #073642;
|
||
--bg-sunken: #001f28;
|
||
--bg-hover: rgba(168, 180, 182, 0.06);
|
||
--bg-active: rgba(168, 180, 182, 0.11);
|
||
--fg: #a8b4b6;
|
||
--fg-muted: #809196;
|
||
--fg-faint: #7d9095;
|
||
--border: #0d4552;
|
||
--border-strong: #4e767f;
|
||
--accent: #268bd2;
|
||
--accent-fg: #002b36;
|
||
--accent-soft: rgba(38, 139, 210, 0.16);
|
||
--accent-soft-fg: #56a5dc;
|
||
--danger: #e56563;
|
||
--danger-soft: rgba(229, 101, 99, 0.15);
|
||
--warn: #d67147;
|
||
--warn-soft: rgba(214, 113, 71, 0.15);
|
||
--success: #859900;
|
||
--success-soft: rgba(133, 153, 0, 0.15);
|
||
--link: #2aa198;
|
||
--unread-bg: #073642;
|
||
--read-bg: #001f28;
|
||
--selected-bg: rgba(38, 139, 210, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(38, 139, 210, 0.4);
|
||
--star: #b58900;
|
||
--q1: #2aa198;
|
||
--q2: #859900;
|
||
--q3: #8488cd;
|
||
--scrollbar: rgba(128, 145, 150, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* ayu (light) lifted for contrast: fg #5c6166 -> #52565b (5.93 -> 7.01); muted #828e9f -> #697381 (3.15 -> 4.56); faint #949ba5 -> #6e737a (2.66 -> 4.53); link #22a4e6 -> #1979aa (2.65 -> 4.57); danger #f07171 -> #b45555 (2.73 -> 4.56); warn #fa8532 -> #af5d23 (2.35 -> 4.51); success #86b300 -> #5e7d00 (2.35 -> 4.52); accent #f29718 -> #cb7f14 (2.16 -> 3.03); star #eba400 -> #be8500 (2.02 -> 3.04); border-strong #cacdd0 -> #8d9092 (1.51 -> 3.05); q1 #55b4d4 -> #3a7a90 (2.25 -> 4.56); q2 #86b300 -> #5e7d00 (2.35 -> 4.52); q3 #a37acc -> #8664a7 (3.21 -> 4.53) */
|
||
|
||
:root[data-palette="ayu"] {
|
||
--bg: #f8f9fa;
|
||
--bg-elev: #fcfcfc;
|
||
--bg-sunken: #ebeef0;
|
||
--bg-hover: rgba(82, 86, 91, 0.06);
|
||
--bg-active: rgba(82, 86, 91, 0.11);
|
||
--fg: #52565b;
|
||
--fg-muted: #697381;
|
||
--fg-faint: #6e737a;
|
||
--border: #dfe2e5;
|
||
--border-strong: #8d9092;
|
||
--accent: #cb7f14;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #f2e8da;
|
||
--accent-soft-fg: #945d0f;
|
||
--danger: #b45555;
|
||
--danger-soft: rgba(180, 85, 85, 0.15);
|
||
--warn: #af5d23;
|
||
--warn-soft: rgba(175, 93, 35, 0.15);
|
||
--success: #5e7d00;
|
||
--success-soft: rgba(94, 125, 0, 0.15);
|
||
--link: #1979aa;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f3f4f5;
|
||
--selected-bg: #f2e8da;
|
||
--focus-ring: 0 0 0 3px rgba(203, 127, 20, 0.4);
|
||
--star: #be8500;
|
||
--q1: #3a7a90;
|
||
--q2: #5e7d00;
|
||
--q3: #8664a7;
|
||
--scrollbar: rgba(105, 115, 129, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* ayu (dark) lifted for contrast: muted #5a6378 -> #747c8e (3.16 -> 4.55); faint #555c6a -> #777d88 (2.83 -> 4.60); border-strong #34373e -> #5f6167 (1.60 -> 3.07) */
|
||
|
||
:root[data-theme="dark"][data-palette="ayu"] {
|
||
--bg: #0d1017;
|
||
--bg-elev: #10141c;
|
||
--bg-sunken: #070a0f;
|
||
--bg-hover: rgba(191, 189, 182, 0.06);
|
||
--bg-active: rgba(191, 189, 182, 0.11);
|
||
--fg: #bfbdb6;
|
||
--fg-muted: #747c8e;
|
||
--fg-faint: #777d88;
|
||
--border: #1b1f29;
|
||
--border-strong: #5f6167;
|
||
--accent: #e6b450;
|
||
--accent-fg: #0d1017;
|
||
--accent-soft: rgba(230, 180, 80, 0.16);
|
||
--accent-soft-fg: #e6b450;
|
||
--danger: #f07178;
|
||
--danger-soft: rgba(240, 113, 120, 0.15);
|
||
--warn: #ff8f40;
|
||
--warn-soft: rgba(255, 143, 64, 0.15);
|
||
--success: #aad94c;
|
||
--success-soft: rgba(170, 217, 76, 0.15);
|
||
--link: #59c2ff;
|
||
--unread-bg: #10141c;
|
||
--read-bg: #070a0f;
|
||
--selected-bg: rgba(230, 180, 80, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(230, 180, 80, 0.4);
|
||
--star: #ffb454;
|
||
--q1: #39bae6;
|
||
--q2: #aad94c;
|
||
--q3: #d2a6ff;
|
||
--scrollbar: rgba(116, 124, 142, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* kanagawa (light) lifted for contrast: fg #545464 -> #434350 (5.41 -> 7.09); muted #716e61 -> #636155 (3.73 -> 4.54); faint #8a8670 -> #636051 (2.67 -> 4.61); link #4d699b -> #47618f (4.02 -> 4.53); danger #c84053 -> #ac3747 (3.55 -> 4.51); warn #cc6d00 -> #934e00 (2.66 -> 4.59); success #6f894e -> #53673b (2.85 -> 4.54); border-strong #bfb997 -> #807c65 (1.44 -> 3.07); q1 #4d699b -> #47618f (4.02 -> 4.53); q2 #6f894e -> #53673b (2.85 -> 4.54); q3 #b35b79 -> #914a62 (3.26 -> 4.55) */
|
||
|
||
:root[data-palette="kanagawa"] {
|
||
--bg: #e5ddb0;
|
||
--bg-elev: #f2ecbc;
|
||
--bg-sunken: #dcd5ac;
|
||
--bg-hover: rgba(67, 67, 80, 0.06);
|
||
--bg-active: rgba(67, 67, 80, 0.11);
|
||
--fg: #434350;
|
||
--fg-muted: #636155;
|
||
--fg-faint: #636051;
|
||
--border: #d5cea3;
|
||
--border-strong: #807c65;
|
||
--accent: #624c83;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #d3c9aa;
|
||
--accent-soft-fg: #604a80;
|
||
--danger: #ac3747;
|
||
--danger-soft: rgba(172, 55, 71, 0.15);
|
||
--warn: #934e00;
|
||
--warn-soft: rgba(147, 78, 0, 0.15);
|
||
--success: #53673b;
|
||
--success-soft: rgba(83, 103, 59, 0.15);
|
||
--link: #47618f;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #e0d8ad;
|
||
--selected-bg: #d3c9aa;
|
||
--focus-ring: 0 0 0 3px rgba(98, 76, 131, 0.4);
|
||
--star: #77713f;
|
||
--q1: #47618f;
|
||
--q2: #53673b;
|
||
--q3: #914a62;
|
||
--scrollbar: rgba(99, 97, 85, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* kanagawa (dark) lifted for contrast: muted #727169 -> #898881 (3.33 -> 4.59); faint #696866 -> #888886 (2.94 -> 4.60); danger #e82424 -> #ed5050 (3.66 -> 4.56); border-strong #4f4e57 -> #696970 (1.99 -> 3.00) */
|
||
|
||
:root[data-theme="dark"][data-palette="kanagawa"] {
|
||
--bg: #1f1f28;
|
||
--bg-elev: #2a2a37;
|
||
--bg-sunken: #16161d;
|
||
--bg-hover: rgba(220, 215, 186, 0.06);
|
||
--bg-active: rgba(220, 215, 186, 0.11);
|
||
--fg: #dcd7ba;
|
||
--fg-muted: #898881;
|
||
--fg-faint: #888886;
|
||
--border: #363646;
|
||
--border-strong: #696970;
|
||
--accent: #7e9cd8;
|
||
--accent-fg: #1f1f28;
|
||
--accent-soft: rgba(126, 156, 216, 0.16);
|
||
--accent-soft-fg: #7e9cd8;
|
||
--danger: #ed5050;
|
||
--danger-soft: rgba(237, 80, 80, 0.15);
|
||
--warn: #ff9e3b;
|
||
--warn-soft: rgba(255, 158, 59, 0.15);
|
||
--success: #98bb6c;
|
||
--success-soft: rgba(152, 187, 108, 0.15);
|
||
--link: #7fb4ca;
|
||
--unread-bg: #2a2a37;
|
||
--read-bg: #16161d;
|
||
--selected-bg: rgba(126, 156, 216, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(126, 156, 216, 0.4);
|
||
--star: #e6c384;
|
||
--q1: #7fb4ca;
|
||
--q2: #98bb6c;
|
||
--q3: #d27e99;
|
||
--scrollbar: rgba(137, 136, 129, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* everforest (light) lifted for contrast: fg #5c6a72 -> #444e54 (4.66 -> 7.11); muted #939f91 -> #646c63 (2.30 -> 4.53); faint #8e9285 -> #686b61 (2.65 -> 4.53); link #3a94c5 -> #2c7096 (2.81 -> 4.53); danger #f85552 -> #b83f3d (2.73 -> 4.59); warn #f57d26 -> #a45419 (2.23 -> 4.53); success #8da101 -> #616f01 (2.42 -> 4.63); accent #8da101 -> #7d8f01 (2.42 -> 3.02); star #dfa000 -> #b07e00 (1.91 -> 3.00); border-strong #abb1a1 -> #84887c (1.84 -> 3.02); q1 #3a94c5 -> #2c7096 (2.81 -> 4.53); q2 #8da101 -> #616f01 (2.42 -> 4.63); q3 #df69ba -> #9e4b84 (2.55 -> 4.61) */
|
||
|
||
:root[data-palette="everforest"] {
|
||
--bg: #efebd4;
|
||
--bg-elev: #fdf6e3;
|
||
--bg-sunken: #e6e2cc;
|
||
--bg-hover: rgba(68, 78, 84, 0.06);
|
||
--bg-active: rgba(68, 78, 84, 0.11);
|
||
--fg: #444e54;
|
||
--fg-muted: #646c63;
|
||
--fg-faint: #686b61;
|
||
--border: #bdc3af;
|
||
--border-strong: #84887c;
|
||
--accent: #7d8f01;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #dfdeb6;
|
||
--accent-soft-fg: #5a6701;
|
||
--danger: #b83f3d;
|
||
--danger-soft: rgba(184, 63, 61, 0.15);
|
||
--warn: #a45419;
|
||
--warn-soft: rgba(164, 84, 25, 0.15);
|
||
--success: #616f01;
|
||
--success-soft: rgba(97, 111, 1, 0.15);
|
||
--link: #2c7096;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #eae6d0;
|
||
--selected-bg: #dfdeb6;
|
||
--focus-ring: 0 0 0 3px rgba(125, 143, 1, 0.4);
|
||
--star: #b07e00;
|
||
--q1: #2c7096;
|
||
--q2: #616f01;
|
||
--q3: #9e4b84;
|
||
--scrollbar: rgba(100, 108, 99, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* everforest (dark) lifted for contrast: muted #859289 -> #949f97 (3.84 -> 4.55); faint #757f7b -> #969e9b (3.02 -> 4.55); border-strong #5c6364 -> #787e7e (2.03 -> 3.02) */
|
||
|
||
:root[data-theme="dark"][data-palette="everforest"] {
|
||
--bg: #2d353b;
|
||
--bg-elev: #343f44;
|
||
--bg-sunken: #232a2e;
|
||
--bg-hover: rgba(211, 198, 170, 0.06);
|
||
--bg-active: rgba(211, 198, 170, 0.11);
|
||
--fg: #d3c6aa;
|
||
--fg-muted: #949f97;
|
||
--fg-faint: #969e9b;
|
||
--border: #475258;
|
||
--border-strong: #787e7e;
|
||
--accent: #a7c080;
|
||
--accent-fg: #2d353b;
|
||
--accent-soft: rgba(167, 192, 128, 0.16);
|
||
--accent-soft-fg: #a7c080;
|
||
--danger: #e67e80;
|
||
--danger-soft: rgba(230, 126, 128, 0.15);
|
||
--warn: #e69875;
|
||
--warn-soft: rgba(230, 152, 117, 0.15);
|
||
--success: #a7c080;
|
||
--success-soft: rgba(167, 192, 128, 0.15);
|
||
--link: #7fbbb3;
|
||
--unread-bg: #343f44;
|
||
--read-bg: #232a2e;
|
||
--selected-bg: rgba(167, 192, 128, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(167, 192, 128, 0.4);
|
||
--star: #dbbc7f;
|
||
--q1: #7fbbb3;
|
||
--q2: #a7c080;
|
||
--q3: #d699b6;
|
||
--scrollbar: rgba(148, 159, 151, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* primer (light) lifted for contrast: faint #889098 -> #6b7278 (3.04 -> 4.58); star #bf8700 -> #bd8600 (2.95 -> 3.00); border-strong #b7bfc5 -> #898f94 (1.75 -> 3.07) */
|
||
|
||
:root[data-palette="primer"] {
|
||
--bg: #f6f8fa;
|
||
--bg-elev: #ffffff;
|
||
--bg-sunken: #eff2f5;
|
||
--bg-hover: rgba(37, 41, 46, 0.06);
|
||
--bg-active: rgba(37, 41, 46, 0.11);
|
||
--fg: #25292e;
|
||
--fg-muted: #59636e;
|
||
--fg-faint: #6b7278;
|
||
--border: #d1d9e0;
|
||
--border-strong: #898f94;
|
||
--accent: #0969da;
|
||
--accent-fg: #ffffff;
|
||
--accent-soft: #d5e4f6;
|
||
--accent-soft-fg: #0861c9;
|
||
--danger: #cf222e;
|
||
--danger-soft: rgba(207, 34, 46, 0.15);
|
||
--warn: #9a6700;
|
||
--warn-soft: rgba(154, 103, 0, 0.15);
|
||
--success: #1a7f37;
|
||
--success-soft: rgba(26, 127, 55, 0.15);
|
||
--link: #0550ae;
|
||
--unread-bg: #ffffff;
|
||
--read-bg: #f0f2f4;
|
||
--selected-bg: #d5e4f6;
|
||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.4);
|
||
--star: #bd8600;
|
||
--q1: #0550ae;
|
||
--q2: #116329;
|
||
--q3: #8250df;
|
||
--scrollbar: rgba(89, 99, 110, 0.35);
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* primer (dark) lifted for contrast: faint #697078 -> #767d84 (3.78 -> 4.54); border-strong #585f67 -> #5a6169 (2.93 -> 3.02) */
|
||
|
||
:root[data-theme="dark"][data-palette="primer"] {
|
||
--bg: #0d1117;
|
||
--bg-elev: #151b23;
|
||
--bg-sunken: #010409;
|
||
--bg-hover: rgba(240, 246, 252, 0.06);
|
||
--bg-active: rgba(240, 246, 252, 0.11);
|
||
--fg: #f0f6fc;
|
||
--fg-muted: #9198a1;
|
||
--fg-faint: #767d84;
|
||
--border: #3d444d;
|
||
--border-strong: #5a6169;
|
||
--accent: #58a6ff;
|
||
--accent-fg: #0d1117;
|
||
--accent-soft: rgba(88, 166, 255, 0.16);
|
||
--accent-soft-fg: #58a6ff;
|
||
--danger: #ff7b72;
|
||
--danger-soft: rgba(255, 123, 114, 0.15);
|
||
--warn: #e3b341;
|
||
--warn-soft: rgba(227, 179, 65, 0.15);
|
||
--success: #3fb950;
|
||
--success-soft: rgba(63, 185, 80, 0.15);
|
||
--link: #79c0ff;
|
||
--unread-bg: #151b23;
|
||
--read-bg: #010409;
|
||
--selected-bg: rgba(88, 166, 255, 0.18);
|
||
--focus-ring: 0 0 0 3px rgba(88, 166, 255, 0.4);
|
||
--star: #d29922;
|
||
--q1: #79c0ff;
|
||
--q2: #56d364;
|
||
--q3: #d2a8ff;
|
||
--scrollbar: rgba(145, 152, 161, 0.35);
|
||
color-scheme: dark;
|
||
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
|
||
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||
--shadow-3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
|
||
}
|
||
|
||
/* === generated palettes: end === */
|
||
|
||
/* Accent variants */
|
||
:root[data-accent="blue"] { --accent: #2563eb; --accent-soft: #dbeafe; --accent-soft-fg: #1e3a8a; --selected-bg: #dbeafe; --focus-ring: 0 0 0 3px rgba(37,99,235,.35); --link:#1d4ed8; }
|
||
:root[data-accent="purple"] { --accent: #7c3aed; --accent-soft: #ede9fe; --accent-soft-fg: #4c1d95; --selected-bg: #ede9fe; --focus-ring: 0 0 0 3px rgba(124,58,237,.35); --link:#6d28d9; }
|
||
:root[data-accent="rose"] { --accent: #e11d48; --accent-soft: #ffe4e6; --accent-soft-fg: #881337; --selected-bg: #ffe4e6; --focus-ring: 0 0 0 3px rgba(225,29,72,.35); --link:#be123c; }
|
||
:root[data-accent="orange"] { --accent: #ea580c; --accent-soft: #ffedd5; --accent-soft-fg: #7c2d12; --selected-bg: #ffedd5; --focus-ring: 0 0 0 3px rgba(234,88,12,.35); --link:#c2410c; }
|
||
:root[data-accent="green"] { --accent: #16a34a; --accent-soft: #dcfce7; --accent-soft-fg: #14532d; --selected-bg: #dcfce7; --focus-ring: 0 0 0 3px rgba(22,163,74,.35); --link:#15803d; }
|
||
:root[data-theme="dark"][data-accent="blue"] { --accent: #60a5fa; --accent-fg:#0b1a33; --accent-soft: rgba(96,165,250,.18); --accent-soft-fg:#bfdbfe; --selected-bg: rgba(96,165,250,.2); --link:#93c5fd; }
|
||
:root[data-theme="dark"][data-accent="purple"] { --accent: #a78bfa; --accent-fg:#1e1040; --accent-soft: rgba(167,139,250,.18); --accent-soft-fg:#ddd6fe; --selected-bg: rgba(167,139,250,.2); --link:#c4b5fd; }
|
||
:root[data-theme="dark"][data-accent="rose"] { --accent: #fb7185; --accent-fg:#3b0716; --accent-soft: rgba(251,113,133,.18); --accent-soft-fg:#fecdd3; --selected-bg: rgba(251,113,133,.2); --link:#fda4af; }
|
||
:root[data-theme="dark"][data-accent="orange"] { --accent: #fb923c; --accent-fg:#3b1605; --accent-soft: rgba(251,146,60,.18); --accent-soft-fg:#fed7aa; --selected-bg: rgba(251,146,60,.2); --link:#fdba74; }
|
||
:root[data-theme="dark"][data-accent="green"] { --accent: #4ade80; --accent-fg:#052e16; --accent-soft: rgba(74,222,128,.18); --accent-soft-fg:#bbf7d0; --selected-bg: rgba(74,222,128,.2); --link:#86efac; }
|
||
|
||
:root[data-density="comfortable"] { --row-h: 52px; }
|
||
:root[data-density="cozy"] { --row-h: 44px; }
|
||
:root[data-density="compact"] { --row-h: 36px; }
|
||
:root[data-fontsize="small"] { --fs: 13px; }
|
||
:root[data-fontsize="large"] { --fs: 15.5px; }
|
||
|
||
/* Reset ------------------------------------------------------------------- */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html, body, #root { height: 100%; }
|
||
html { -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-sans);
|
||
font-size: var(--fs);
|
||
line-height: 1.45;
|
||
color: var(--fg);
|
||
background: var(--bg);
|
||
-webkit-font-smoothing: antialiased;
|
||
overscroll-behavior: none;
|
||
}
|
||
button, input, select, textarea { font: inherit; color: inherit; }
|
||
button { cursor: pointer; background: none; border: 0; padding: 0; }
|
||
a { color: var(--link); }
|
||
img { max-width: 100%; }
|
||
::selection { background: var(--accent-soft); }
|
||
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
|
||
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }
|
||
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
|
||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||
.muted { color: var(--fg-muted); }
|
||
.faint { color: var(--fg-faint); }
|
||
.small { font-size: 0.875em; }
|
||
.mono { font-family: var(--font-mono); }
|
||
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.row { display: flex; align-items: center; gap: 8px; }
|
||
.col { display: flex; flex-direction: column; }
|
||
.grow { flex: 1 1 auto; min-width: 0; }
|
||
.spacer { flex: 1; }
|
||
.hidden { display: none !important; }
|
||
.wrap { flex-wrap: wrap; }
|
||
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
|
||
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
|
||
.p-16 { padding: 16px; }
|
||
.center { display:flex; align-items:center; justify-content:center; }
|
||
.nowrap { white-space: nowrap; }
|
||
|
||
/* Buttons ---------------------------------------------------------------- */
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||
height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg);
|
||
font-weight: 500; white-space: nowrap; user-select: none; transition: background .12s var(--ease), border-color .12s, box-shadow .12s, transform .05s;
|
||
}
|
||
.btn:hover { background: var(--bg-hover); }
|
||
.btn:active { transform: translateY(1px); }
|
||
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
|
||
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
|
||
.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }
|
||
.btn-danger { background: var(--danger); border-color: transparent; color: #fff; }
|
||
.btn-danger:hover { filter: brightness(1.06); background: var(--danger); }
|
||
.btn-ghost { border-color: transparent; background: transparent; }
|
||
.btn-ghost:hover { background: var(--bg-hover); }
|
||
.btn-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-soft-fg); }
|
||
.btn-sm { height: 30px; padding: 0 10px; font-size: .9em; }
|
||
.btn-lg { height: 44px; padding: 0 20px; font-size: 1.05em; border-radius: var(--radius); }
|
||
.btn-pill { border-radius: 999px; }
|
||
.btn-block { width: 100%; }
|
||
.icon-btn {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 36px; height: 36px; border-radius: 50%; color: var(--fg-muted); flex: 0 0 auto;
|
||
transition: background .12s var(--ease), color .12s;
|
||
}
|
||
.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
|
||
.icon-btn.active { color: var(--accent); background: var(--accent-soft); }
|
||
.icon-btn.sm { width: 30px; height: 30px; }
|
||
.icon-btn.xs { width: 26px; height: 26px; }
|
||
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }
|
||
|
||
/* Inputs ----------------------------------------------------------------- */
|
||
.input, .select, .textarea {
|
||
width: 100%; height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg);
|
||
transition: border-color .12s, box-shadow .12s;
|
||
}
|
||
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
|
||
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
|
||
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
|
||
.input.sm { height: 32px; padding: 0 10px; }
|
||
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
|
||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||
.field > label, .label { font-size: .85em; font-weight: 600; color: var(--fg-muted); letter-spacing: .01em; }
|
||
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
|
||
.hint { font-size: .85em; color: var(--fg-faint); }
|
||
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; }
|
||
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
|
||
.switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); transition: background .15s; flex: 0 0 auto; }
|
||
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
|
||
.switch[aria-checked="true"] { background: var(--accent); }
|
||
.switch[aria-checked="true"]::after { transform: translateX(18px); }
|
||
/* A switch that depends on another one above it. Without this it reads as an
|
||
ordinary "off", and clicking it does nothing with no explanation. */
|
||
.switch:disabled { opacity: .45; cursor: not-allowed; }
|
||
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
||
.switch-row:last-child { border-bottom: 0; }
|
||
.switch-row .switch-text { display: flex; flex-direction: column; gap: 2px; }
|
||
.switch-row .switch-text .hint { margin: 0; }
|
||
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bg-sunken); border: 1px solid var(--border); font-size: .85em; max-width: 100%; }
|
||
.chip .chip-x { display: inline-flex; border-radius: 50%; padding: 2px; color: var(--fg-muted); }
|
||
.chip .chip-x:hover { background: var(--bg-active); color: var(--fg); }
|
||
.chip.invalid { border-color: var(--danger); color: var(--danger); }
|
||
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-fg); }
|
||
.badge.muted { background: var(--bg-active); color: var(--fg-muted); }
|
||
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #fff; }
|
||
.kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--bg-sunken); font-family: var(--font-mono); font-size: 11.5px; text-align: center; }
|
||
|
||
/* Avatar ----------------------------------------------------------------- */
|
||
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 13px; flex: 0 0 auto; overflow: hidden; user-select: none; }
|
||
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
|
||
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
|
||
.avatar.xl { width: 88px; height: 88px; font-size: 30px; }
|
||
|
||
/* Menus / popovers ------------------------------------------------------- */
|
||
.popover { position: fixed; z-index: 1000; min-width: 180px; max-width: min(420px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; animation: pop .12s var(--ease); }
|
||
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
|
||
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); text-align: left; color: var(--fg); white-space: nowrap; }
|
||
.menu-item:hover, .menu-item.active { background: var(--bg-hover); }
|
||
.menu-item:disabled { opacity: .5; cursor: default; }
|
||
/* A menu entry that is a link still looks like a menu entry. The global rule
|
||
for `a` would otherwise colour and underline the one item that leaves the
|
||
app, which reads as a mistake rather than a distinction. */
|
||
a.menu-item { text-decoration: none; color: var(--fg); cursor: pointer; }
|
||
a.menu-item:hover { color: var(--fg); }
|
||
.menu-item.danger { color: var(--danger); }
|
||
.menu-item .menu-kbd { margin-left: auto; color: var(--fg-faint); font-size: .85em; }
|
||
.menu-item svg { color: var(--fg-muted); flex: 0 0 auto; }
|
||
.menu-item.danger svg { color: var(--danger); }
|
||
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
|
||
.menu-title { padding: 6px 10px 4px; font-size: .78em; font-weight: 700; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .05em; }
|
||
.menu-search { padding: 4px 4px 6px; }
|
||
.tooltip { position: fixed; z-index: 2000; background: #1f2937; color: #fff; padding: 5px 8px; border-radius: 6px; font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-2); animation: pop .1s var(--ease); }
|
||
:root[data-theme="dark"] .tooltip { background: #e5e9f0; color: #0b1220; }
|
||
|
||
/* Dialogs ---------------------------------------------------------------- */
|
||
/*
|
||
The stacking order everything below is a point on, low to high:
|
||
|
||
700 mobile tab bar, FAB
|
||
940 drawer backdrop
|
||
950 mobile navigation drawer
|
||
955 composer dock
|
||
960 dialog backdrop
|
||
1000 popover
|
||
2000 tooltip
|
||
3000 toast
|
||
5000 drag ghost
|
||
|
||
The drawer is where a phone reaches everything, so it is also where a phone
|
||
starts a folder, an event, a contact and a message -- and each of those
|
||
answers with a dialog or a full-screen composer that the drawer then covered,
|
||
because both were stacked below it. A modal has to outrank the navigation
|
||
that opened it, or the drawer sits on top of the thing it just asked for and
|
||
the only way out is a press on the dimmed strip beside it.
|
||
|
||
Above the composer, not level with it: a dialog raised from inside a composer
|
||
-- the discard guard, the attachment picker -- has to clear the composer too.
|
||
*/
|
||
.dialog-backdrop { position: fixed; inset: 0; z-index: 960; background: rgba(2, 6, 23, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s var(--ease); backdrop-filter: blur(2px); }
|
||
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
|
||
.dialog { background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: rise .18s var(--ease); border: 1px solid var(--border); }
|
||
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
|
||
.dialog.lg { max-width: 760px; }
|
||
.dialog.xl { max-width: 980px; }
|
||
.dialog.sm { max-width: 400px; }
|
||
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 8px; }
|
||
.dialog-head h2 { margin: 0; font-size: 1.15em; font-weight: 650; flex: 1; }
|
||
.dialog-body { padding: 8px 20px 16px; overflow: auto; }
|
||
.dialog-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
|
||
.dialog-foot .left { margin-right: auto; }
|
||
|
||
/* Two mutually exclusive views of the same thing, sized to sit in a dialog
|
||
footer beside the ordinary buttons (see ui/filepreview.tsx). */
|
||
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
|
||
.segmented button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: .9em; color: var(--fg-muted); background: none; }
|
||
.segmented button + button { border-left: 1px solid var(--border); }
|
||
.segmented button:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.segmented button.active { background: var(--accent-soft); color: var(--accent-soft-fg); font-weight: 600; }
|
||
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||
.segmented.left { margin-right: auto; }
|
||
.dialog-foot .hint.left { margin-right: auto; }
|
||
.dialog-foot textarea.code, .dialog-body > textarea.code { font-family: var(--font-mono); }
|
||
|
||
/* Rendered Markdown in the file viewer. Deliberately plain: this is somebody's
|
||
notes, not a web page, and the point is to read it. */
|
||
.md-body { max-height: 65vh; overflow: auto; padding: 4px 2px; overflow-wrap: anywhere; }
|
||
.md-body > :first-child { margin-top: 0; }
|
||
.md-body > :last-child { margin-bottom: 0; }
|
||
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { margin: 1.2em 0 .5em; line-height: 1.25; font-weight: 650; }
|
||
.md-body h1 { font-size: 1.5em; }
|
||
.md-body h2 { font-size: 1.28em; }
|
||
.md-body h3 { font-size: 1.12em; }
|
||
.md-body h4 { font-size: 1em; }
|
||
.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body table { margin: 0 0 .8em; }
|
||
.md-body ul, .md-body ol { padding-left: 1.6em; }
|
||
.md-body li { margin: .2em 0; }
|
||
.md-body a { color: var(--link); }
|
||
.md-body code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-sunken); border-radius: 4px; padding: .1em .35em; }
|
||
.md-body pre { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; }
|
||
.md-body pre code { background: none; padding: 0; }
|
||
.md-body blockquote { margin-left: 0; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--fg-muted); }
|
||
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }
|
||
.md-body table { border-collapse: collapse; }
|
||
.md-body th, .md-body td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
|
||
.md-body th { background: var(--bg-sunken); }
|
||
/* An image is shown as its link, never fetched -- see lib/markdown.ts. */
|
||
.md-body .md-img::before { content: "🖼 "; }
|
||
.md-body .md-img { color: var(--link); text-decoration: underline dotted; text-underline-offset: 2px; }
|
||
/* "This occurrence or the whole series" — one button per answer, stacked, so
|
||
the destructive one is read rather than landed on by muscle memory. */
|
||
.dialog-choices { display: flex; flex-direction: column; gap: 8px; }
|
||
.dialog-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; height: auto; }
|
||
.dialog-choice small { font-weight: 400; opacity: 0.75; }
|
||
/* Destructive, the way .menu-item.danger is: a red label on the ordinary
|
||
surface. A filled red button in a list of answers is the loudest thing in the
|
||
dialog, which is wrong when it is the answer that loses your work. */
|
||
.dialog-choice.danger { color: var(--danger); }
|
||
|
||
/* Toasts ----------------------------------------------------------------- */
|
||
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; padding: 0 12px; width: 100%; max-width: 520px; }
|
||
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #1f2937; color: #fff; padding: 10px 10px 10px 16px; border-radius: var(--radius); box-shadow: var(--shadow-2); min-width: 260px; max-width: 100%; position: relative; overflow: hidden; animation: rise .2s var(--ease); }
|
||
:root[data-theme="dark"] .toast { background: #e5e9f0; color: #0b1220; }
|
||
.toast-error { background: #991b1b; color: #fff; }
|
||
:root[data-theme="dark"] .toast-error { background: #fecaca; color: #450a0a; }
|
||
.toast-success { background: #14532d; color: #fff; }
|
||
:root[data-theme="dark"] .toast-success { background: #bbf7d0; color: #052e16; }
|
||
.toast-msg { flex: 1; }
|
||
.toast-action { color: #5eead4; font-weight: 700; padding: 6px 8px; border-radius: 6px; }
|
||
.toast-action:hover { background: rgba(255,255,255,.12); }
|
||
:root[data-theme="dark"] .toast-action { color: #0f766e; }
|
||
.toast-close { color: inherit; opacity: .7; display: inline-flex; padding: 4px; border-radius: 50%; }
|
||
.toast-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
|
||
.toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: #5eead4; width: 100%; transform-origin: left; animation: shrink linear forwards; }
|
||
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
|
||
|
||
/* Spinner / skeleton ----------------------------------------------------- */
|
||
.spinner { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex: 0 0 auto; }
|
||
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.skeleton { background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-hover) 37%, var(--bg-sunken) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
|
||
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
|
||
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; color: var(--fg-muted); text-align: center; }
|
||
.empty svg { color: var(--fg-faint); }
|
||
.empty h3 { margin: 8px 0 0; font-weight: 600; color: var(--fg); }
|
||
.empty p { margin: 0; max-width: 360px; }
|
||
.error-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
|
||
.info-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
.warn-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); }
|
||
|
||
/* ==========================================================================
|
||
App shell
|
||
========================================================================== */
|
||
/*
|
||
* The column is stated, and stated as `minmax(0, 1fr)`.
|
||
*
|
||
* A grid with only rows named gets an implicit `auto` column, which sizes to
|
||
* its widest child's min-content -- and the top bar's min-content is the
|
||
* search field plus the account buttons, about 470px. On a desktop nobody sees
|
||
* it; on a 390px phone the whole app was 84px wider than the screen, so every
|
||
* message row ran off the right edge with its date beyond the glass. `1fr`
|
||
* alone would not have fixed it: that is `minmax(auto, 1fr)`, and the `auto`
|
||
* floor is the same min-content. The zero floor is the part that lets the top
|
||
* bar shrink instead of setting the width for everything below it.
|
||
*/
|
||
.app { height: 100%; display: grid; grid-template-rows: var(--topbar-h) 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
|
||
.topbar { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bg); position: relative; z-index: 50; }
|
||
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2em; letter-spacing: -.01em; color: var(--fg); text-decoration: none; padding-right: 8px; min-width: 0; }
|
||
.topbar .brand img { width: 34px; height: 34px; object-fit: contain; }
|
||
.topbar .brand .brand-name { color: #14b8a6; }
|
||
.topbar .brand .brand-name span { color: var(--fg-muted); font-weight: 500; }
|
||
/* `min-width: 0`, or the flex default of `auto` holds the search field at its
|
||
own min-content and the account buttons beside it are pushed off a phone. */
|
||
.searchbar { flex: 1 1 auto; min-width: 0; max-width: 720px; margin: 0 auto; position: relative; }
|
||
.searchbar .search-input { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--bg-sunken); border: 1px solid transparent; transition: background .12s, box-shadow .12s, border-color .12s; }
|
||
.searchbar .search-input:focus-within { background: var(--bg-elev); box-shadow: var(--shadow-1); border-color: var(--border); }
|
||
.searchbar input { flex: 1; border: 0; background: transparent; outline: none; min-width: 0; height: 100%; }
|
||
.searchbar input::placeholder { color: var(--fg-faint); }
|
||
.search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 16px; z-index: 60; animation: pop .12s var(--ease); }
|
||
.search-panel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
|
||
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; z-index: 60; }
|
||
.topbar-actions { display: flex; align-items: center; gap: 4px; }
|
||
/* Live-updates indicator. Three states, and a raised bead rather than a flat
|
||
speck: at 8px flat it was invisible against either theme. The gloss is a
|
||
highlight over a solid colour rather than a colour-mix, so it needs no
|
||
per-theme variant -- the same bead reads on light and dark alike. */
|
||
.push-status { display: inline-flex; align-items: center; padding: 0 4px; }
|
||
.push-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background:
|
||
radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 46%),
|
||
var(--dot);
|
||
box-shadow:
|
||
0 0 0 3px var(--dot-halo),
|
||
0 1px 2px rgba(0, 0, 0, .45),
|
||
inset 0 -1px 2px rgba(0, 0, 0, .3);
|
||
}
|
||
.push-dot.connected { --dot: #16a34a; --dot-halo: rgba(22, 163, 74, .25); }
|
||
.push-dot.connecting { --dot: #eab308; --dot-halo: rgba(234, 179, 8, .25); animation: push-pulse 1.6s ease-in-out infinite; }
|
||
.push-dot.disconnected { --dot: #dc2626; --dot-halo: rgba(220, 38, 38, .25); }
|
||
@keyframes push-pulse { 50% { opacity: .45; } }
|
||
@media (prefers-reduced-motion: reduce) { .push-dot.connecting { animation: none; } }
|
||
|
||
.app-body { position: relative; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 0; transition: grid-template-columns .2s var(--ease); }
|
||
.app-body.collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
|
||
/* A drag follows the pointer; the ease is for the collapse toggle, and applied
|
||
to every frame of a drag it leaves the edge trailing behind the hand. */
|
||
.app-body.resizing, .app-body.resizing > .sidebar-splitter { transition: none; }
|
||
/* The sidebar edge (#345). Laid over the seam rather than given a grid column:
|
||
the sidebar and the content meet at the content's own border, and a 6px
|
||
bar of border colour between them would draw a line the design never had.
|
||
Out of the flow, it shows only on hover and focus, like the list splitter. */
|
||
.app-body > .sidebar-splitter { position: absolute; top: 0; bottom: 0; left: calc(var(--sidebar-w) - 3px); background: transparent; transition: left .2s var(--ease); }
|
||
.app-body > .sidebar-splitter:hover, .app-body > .sidebar-splitter:focus-visible { background: var(--accent); }
|
||
.sidebar { display: flex; flex-direction: column; min-height: 0; padding: 4px 8px 8px 8px; gap: 2px; overflow: hidden; }
|
||
.sidebar-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding-bottom: 8px; }
|
||
.compose-btn { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 18px; margin: 6px 4px 12px; border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-1); font-weight: 600; font-size: 1em; color: var(--fg); transition: box-shadow .15s, transform .05s, background .12s; white-space: nowrap; }
|
||
.compose-btn:hover { box-shadow: var(--shadow-2); background: var(--bg-elev); }
|
||
.compose-btn svg { color: var(--accent); }
|
||
.collapsed .compose-btn { width: 52px; padding: 0; justify-content: center; margin-left: auto; margin-right: auto; }
|
||
.collapsed .compose-btn span { display: none; }
|
||
.nav-section { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; font-size: .75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
|
||
.nav-section .icon-btn { width: 24px; height: 24px; }
|
||
.collapsed .nav-section { display: none; }
|
||
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 0 999px 999px 0; margin-right: 8px; color: var(--fg); text-decoration: none; white-space: nowrap; transition: background .12s; user-select: none; font-weight: 450; }
|
||
.nav-item:hover { background: var(--bg-hover); }
|
||
.nav-item.unread .nav-label, .nav-item.unread .nav-count { font-weight: 700; color: var(--fg); }
|
||
.nav-item.active { background: var(--accent-soft); color: var(--accent-soft-fg); font-weight: 650; }
|
||
.nav-item.active.unread .nav-label, .nav-item.active.unread .nav-count { color: inherit; }
|
||
.nav-item.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
|
||
.nav-item.folder-row.dragging { opacity: .45; }
|
||
/* A folder colour tints its icon; the label keeps the sidebar's contrast. */
|
||
.folder-row .folder-icon { display: inline-flex; align-items: center; }
|
||
/* .nav-item svg sets colour on the svg itself, so inheriting from the span is
|
||
not enough -- the icon has to be targeted directly to win the cascade.
|
||
The fill overrides lucide's own fill="none": a CSS rule beats a presentation
|
||
attribute, and a solid folder reads at a glance where an outline does not. */
|
||
.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--bg); fill: var(--folder-color); }
|
||
/* The Folders heading doubles as the way back to the top level while dragging. */
|
||
.nav-section.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); color: var(--accent-soft-fg); }
|
||
.nav-item svg { flex: 0 0 auto; color: var(--fg-muted); }
|
||
.nav-item.active svg { color: inherit; }
|
||
.nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
||
.nav-item .nav-count { font-size: .8em; font-weight: 700; color: var(--fg-muted); }
|
||
.nav-item.active .nav-count { color: inherit; }
|
||
.nav-item .nav-more { opacity: 0; width: 24px; height: 24px; margin-right: -6px; }
|
||
.nav-item:hover .nav-more, .nav-item:focus-within .nav-more { opacity: 1; }
|
||
.nav-item .nav-twisty { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-faint); border-radius: 4px; }
|
||
.nav-item .nav-twisty:hover { background: var(--bg-active); }
|
||
/* Folder rows keep the expand chevron in a gutter to the LEFT of the icon, so a
|
||
folder with subfolders and one without still line up on their icon. */
|
||
.nav-item.folder-row { --folder-indent: 0px; position: relative; padding-left: calc(30px + var(--folder-indent)); }
|
||
.nav-item.folder-row.depth-1 { --folder-indent: 16px; }
|
||
.nav-item.folder-row.depth-2 { --folder-indent: 32px; }
|
||
.nav-item.folder-row.depth-3 { --folder-indent: 48px; }
|
||
.nav-item.folder-row.depth-4 { --folder-indent: 64px; }
|
||
.nav-item.folder-row .nav-twisty { position: absolute; left: calc(8px + var(--folder-indent)); top: 50%; transform: translateY(-50%); margin: 0; }
|
||
/* Labels sit in the same column: a 20px slot matching the folder icons. */
|
||
/* ---- Drill-down (phones; see mail/MailboxTree.tsx) ---- */
|
||
/*
|
||
* No indent to pay for, so the name gets the width the tree was spending on
|
||
* depth. The twisty's 30px gutter goes with it -- nothing is ever drawn in it
|
||
* here, whether or not the folder has children.
|
||
*
|
||
* Scoped to the list rather than to the rows that offer a drill, which is the
|
||
* distinction the first cut got wrong: only folders WITH children carried the
|
||
* class, so they sat 18px left of every folder without any and the column of
|
||
* icons came apart. Whether a folder has children is not a reason to hang it
|
||
* somewhere else.
|
||
*/
|
||
.folder-drill .nav-item.folder-row { padding-left: 12px; }
|
||
.nav-item.folder-row .drill-into { width: 44px; height: 100%; border-radius: 0; margin-right: -12px; color: var(--fg-faint); }
|
||
.nav-item.folder-row .drill-into:hover { background: var(--bg-hover); color: var(--fg); }
|
||
/* The row it belongs to is a link and paints its own active state; a second
|
||
filled rectangle inside it reads as a separate selected thing. */
|
||
.nav-item.folder-row.active .drill-into { color: inherit; }
|
||
.drill-back { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--fg-muted); padding-left: 12px; }
|
||
.drill-back:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.drill-back svg { flex: 0 0 auto; }
|
||
.nav-item.folder-row .nav-label-color { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; }
|
||
.nav-item.folder-row .nav-label-color::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--label-color, var(--accent)); }
|
||
.collapsed .nav-item { justify-content: center; padding: 0; margin: 0 auto; width: 44px; border-radius: 999px; }
|
||
.collapsed .nav-item .nav-label, .collapsed .nav-item .nav-count, .collapsed .nav-item .nav-more, .collapsed .nav-item .nav-twisty { display: none; }
|
||
.collapsed .nav-item.depth-1, .collapsed .nav-item.depth-2, .collapsed .nav-item.depth-3 { display: none; }
|
||
.collapsed .nav-item .nav-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
|
||
.nav-label-color { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
|
||
/* Outlook-style module bar at the bottom of the sidebar */
|
||
.module-bar { display: flex; align-items: stretch; justify-content: space-around; gap: 2px; padding: 6px 4px 4px; border-top: 1px solid var(--border); flex: 0 0 auto; }
|
||
.module-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 0; padding: 6px 2px; border-radius: var(--radius-sm); color: var(--fg-muted); text-decoration: none; font-size: 11px; font-weight: 500; transition: background .12s, color .12s; }
|
||
.module-link:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.module-link.active { color: var(--accent-soft-fg); background: var(--accent-soft); }
|
||
.module-link svg { flex: 0 0 auto; }
|
||
.module-link .module-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
||
.collapsed .module-bar { flex-direction: column; gap: 4px; }
|
||
.collapsed .module-link .module-label { display: none; }
|
||
.collapsed .module-link { width: 44px; height: 44px; margin: 0 auto; padding: 0; border-radius: 999px; }
|
||
.quota { padding: 10px 12px; font-size: .8em; color: var(--fg-muted); }
|
||
.quota-bar { height: 4px; background: var(--bg-active); border-radius: 4px; overflow: hidden; margin-top: 6px; }
|
||
.quota-bar > span { display: block; height: 100%; background: var(--accent); }
|
||
.quota-bar > span.warn { background: var(--warn); }
|
||
.quota-bar > span.danger { background: var(--danger); }
|
||
.collapsed .quota { display: none; }
|
||
.main { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg-elev); border-radius: var(--radius-lg) 0 0 0; border: 1px solid var(--border); border-right: 0; border-bottom: 0; overflow: hidden; }
|
||
|
||
/* Mobile drawer */
|
||
.drawer-backdrop { display: none; }
|
||
.mobile-tabbar { display: none; }
|
||
.fab { display: none; }
|
||
|
||
/* ==========================================================================
|
||
Mail
|
||
========================================================================== */
|
||
.mail-layout { display: grid; grid-template-columns: minmax(340px, var(--list-w)) 1fr; height: 100%; min-height: 0; flex: 1; }
|
||
.mail-layout.pane-off { grid-template-columns: 1fr; }
|
||
.mail-layout.pane-off.reading { grid-template-columns: 1fr; }
|
||
.mail-layout .mail-list-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); }
|
||
.mail-layout.pane-bottom .mail-list-pane { border-right: 0; border-bottom: 1px solid var(--border); }
|
||
.mail-layout.pane-off .mail-list-pane { border-right: 0; }
|
||
.mail-layout .mail-reading-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg-elev); }
|
||
.list-toolbar { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
||
.list-toolbar .tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
|
||
.list-toolbar .tb-title { font-weight: 650; font-size: 1.02em; margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.list-toolbar .tb-count { color: var(--fg-muted); font-size: .85em; white-space: nowrap; }
|
||
.select-all { width: 18px; height: 18px; accent-color: var(--accent); margin: 0 6px 0 0; cursor: pointer; }
|
||
.mail-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; outline: none; }
|
||
.mail-list-inner { position: relative; width: 100%; }
|
||
.msg-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; height: var(--row-h); padding: 0 12px 0 8px; border-bottom: 1px solid var(--border); background: var(--read-bg); cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow .1s; }
|
||
.msg-row.unread { background: var(--unread-bg); }
|
||
.msg-row.unread .msg-from, .msg-row.unread .msg-subject { font-weight: 700; color: var(--fg); }
|
||
.msg-row:hover { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1); z-index: 2; }
|
||
.msg-row.selected { background: var(--selected-bg); }
|
||
.msg-row.focused { box-shadow: inset 3px 0 0 var(--accent); }
|
||
.msg-row.open { background: var(--selected-bg); }
|
||
.msg-row.dragging { opacity: .5; }
|
||
.msg-row .msg-check { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; opacity: 0; transition: opacity .1s; cursor: pointer; }
|
||
.msg-row:hover .msg-check, .msg-row.selected .msg-check, .mail-list.has-selection .msg-check { opacity: 1; }
|
||
.msg-row .msg-star { color: var(--fg-faint); flex: 0 0 auto; display: inline-flex; padding: 4px; border-radius: 50%; }
|
||
.msg-row .msg-star:hover { color: var(--star); background: var(--bg-hover); }
|
||
.msg-row .msg-star.on { color: var(--star); }
|
||
.msg-row .msg-from { width: 180px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); display: flex; align-items: center; gap: 6px; }
|
||
.msg-row .msg-from .thread-count { color: var(--fg-muted); font-weight: 400; font-size: .9em; }
|
||
.msg-row .msg-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
|
||
.msg-row .msg-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 40%; max-width: 100%; color: var(--fg); }
|
||
.msg-row .msg-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-muted); flex: 1 1 0; min-width: 0; }
|
||
.msg-row .msg-preview::before { content: " – "; }
|
||
.msg-row .msg-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--fg-muted); font-size: .85em; white-space: nowrap; }
|
||
.msg-row.unread .msg-meta .msg-date { color: var(--fg); font-weight: 700; }
|
||
.msg-row .msg-actions { display: none; align-items: center; gap: 0; margin-left: 4px; }
|
||
.msg-row:hover .msg-actions { display: flex; }
|
||
.msg-row:hover .msg-meta .msg-date { display: none; }
|
||
.msg-row .msg-labels { display: inline-flex; gap: 4px; flex: 0 0 auto; }
|
||
.msg-row .msg-labels .tag { height: 18px; font-size: 10.5px; padding: 0 6px; }
|
||
.msg-row .avatar { width: 32px; height: 32px; font-size: 12px; }
|
||
.mail-list.compact .msg-row .avatar { display: none; }
|
||
.msg-row .msg-attach { color: var(--fg-faint); }
|
||
.msg-row .msg-answered { color: var(--fg-faint); }
|
||
.msg-row .msg-important { color: var(--warn); }
|
||
.list-footer { padding: 12px; text-align: center; color: var(--fg-muted); font-size: .9em; }
|
||
.list-hint { padding: 8px 12px; font-size: .85em; color: var(--fg-muted); background: var(--bg-sunken); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
|
||
.list-hint button { color: var(--link); font-weight: 600; white-space: nowrap; }
|
||
.drag-ghost { position: fixed; top: -1000px; left: -1000px; padding: 8px 12px; background: var(--accent); color: var(--accent-fg); border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-2); pointer-events: none; z-index: 5000; }
|
||
|
||
/* Splitter between list and reading pane */
|
||
.splitter { position: relative; background: var(--border); flex: 0 0 auto; z-index: 3; touch-action: none; }
|
||
.splitter.vertical { width: 6px; cursor: col-resize; }
|
||
.splitter.horizontal { height: 6px; cursor: row-resize; }
|
||
.splitter:hover, .splitter:focus-visible { background: var(--accent); box-shadow: none; }
|
||
.splitter .splitter-grip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 4px; background: var(--fg-faint); opacity: 0; transition: opacity .15s; }
|
||
.splitter.vertical .splitter-grip { width: 3px; height: 36px; }
|
||
.splitter.horizontal .splitter-grip { height: 3px; width: 36px; }
|
||
.splitter:hover .splitter-grip { opacity: .8; }
|
||
.mail-layout.pane-right { grid-template-columns: var(--list-size, 520px) auto 1fr; }
|
||
.mail-layout.pane-bottom { grid-template-columns: 1fr; grid-template-rows: var(--list-size, 340px) auto 1fr; }
|
||
|
||
/* Two-line rows (narrow lists / mobile) */
|
||
.mail-list.two-line .msg-row { height: calc(var(--row-h) * 1.5); align-items: flex-start; padding-top: 8px; }
|
||
.mail-list.two-line .msg-row .msg-from { width: auto; flex: 1; }
|
||
.mail-list.two-line .msg-row .msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||
.mail-list.two-line .msg-row .msg-line1 { display: flex; align-items: center; gap: 8px; }
|
||
.mail-list.two-line .msg-row .msg-main { display: flex; gap: 6px; }
|
||
.mail-list.two-line .msg-row .msg-subject { flex: 0 1 auto; }
|
||
.mail-list.two-line .msg-row .msg-preview { flex: 1; }
|
||
.mail-list.two-line .msg-row .msg-meta { margin-left: auto; }
|
||
.mail-list.two-line .msg-row:hover .msg-meta .msg-date { display: inline; }
|
||
.mail-list.two-line .msg-row:hover .msg-actions { display: none; }
|
||
|
||
/* Reading pane / thread view */
|
||
.thread-view { display: flex; flex-direction: column; min-height: 0; height: 100%; }
|
||
.thread-toolbar { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 8px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
||
.thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 80px; }
|
||
.thread-subject { padding: 20px 24px 8px; display: flex; align-items: flex-start; gap: 12px; }
|
||
.thread-subject h1 { margin: 0; font-size: 1.35em; font-weight: 600; line-height: 1.3; flex: 1; overflow-wrap: anywhere; }
|
||
.thread-subject .labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
|
||
.message { margin: 0 16px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); transition: box-shadow .12s; }
|
||
.message.collapsed { cursor: pointer; }
|
||
.message.collapsed:hover { box-shadow: var(--shadow-1); }
|
||
.message.unread-msg { border-left: 3px solid var(--accent); }
|
||
.message-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
|
||
.message-head .who { flex: 1; min-width: 0; }
|
||
.message-head .who .from { font-weight: 650; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||
.message-head .who .from .email { color: var(--fg-muted); font-weight: 400; font-size: .9em; }
|
||
.message-head .who .to { color: var(--fg-muted); font-size: .88em; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
|
||
.message-head .who .to button { color: var(--fg-muted); display: inline-flex; align-items: center; }
|
||
.message-head .who .snippet { color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.message-head .meta { display: flex; align-items: center; gap: 2px; color: var(--fg-muted); font-size: .85em; white-space: nowrap; flex: 0 0 auto; }
|
||
.message-head .meta .date { margin-right: 6px; }
|
||
.message-details { margin: 0 16px 8px; padding: 10px 12px; background: var(--bg-sunken); border-radius: var(--radius-sm); font-size: .88em; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
|
||
.message-details dt { color: var(--fg-muted); }
|
||
.message-details dd { margin: 0; overflow-wrap: anywhere; }
|
||
/*
|
||
* Layout containment here is a security control, not a layout tweak.
|
||
*
|
||
* Message bodies render in a shadow root, which scopes selectors but not
|
||
* layout: a `position:fixed` rule in mail CSS is still positioned against the
|
||
* viewport, so a sender could paint over the whole application. Containment
|
||
* inside the shadow root cannot stop it — mail CSS lives in the same tree and
|
||
* simply overrides it, and `:host` reaches the host element too (an
|
||
* `!important` there even beats an `!important` from this file, because
|
||
* importance reverses tree order). An ancestor of the host is the one thing
|
||
* mail CSS has no selector for. `layout` rather than `paint`: it makes this a
|
||
* containing block for fixed descendants without clipping tall messages.
|
||
*/
|
||
.message-body { padding: 4px 16px 16px; contain: layout; }
|
||
.message-body .body-host { display: block; }
|
||
.remote-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); font-size: .9em; }
|
||
.remote-banner button { color: inherit; font-weight: 700; text-decoration: underline; }
|
||
.scheduled-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; background: var(--accent-soft); color: var(--accent-soft-fg); border-radius: var(--radius-sm); font-size: .9em; }
|
||
.scheduled-banner button { color: inherit; font-weight: 700; text-decoration: underline; }
|
||
.receipt-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); font-size: .9em; }
|
||
.receipt-banner button { color: inherit; font-weight: 700; text-decoration: underline; }
|
||
.quote-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0; padding: 2px 10px; border-radius: 999px; background: var(--bg-sunken); color: var(--fg-muted); font-size: 12px; border: 1px solid var(--border); }
|
||
.quote-toggle:hover { background: var(--bg-active); }
|
||
.attachments { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 16px 16px; }
|
||
.attachment { display: flex; align-items: center; gap: 10px; width: 240px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); text-decoration: none; color: inherit; position: relative; transition: box-shadow .12s; }
|
||
.attachment:hover { box-shadow: var(--shadow-1); }
|
||
.attachment .att-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-soft-fg); flex: 0 0 auto; overflow: hidden; }
|
||
.attachment .att-icon img { width: 100%; height: 100%; object-fit: cover; }
|
||
.attachment .att-text { flex: 1; min-width: 0; }
|
||
/* Both are spans, and `overflow`/`text-overflow` do nothing on an inline
|
||
element -- so the name never truncated and the size ran on after it on the
|
||
same line. Only long names showed it, which is every .eml named from a
|
||
subject. */
|
||
.attachment .att-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92em; }
|
||
.attachment .att-size { display: block; color: var(--fg-muted); font-size: .8em; }
|
||
.attachment .att-actions { display: none; gap: 0; }
|
||
.attachment:hover .att-actions { display: flex; }
|
||
.attachment:hover .att-size { display: none; }
|
||
.attachment .att-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 0 0 0 6px; }
|
||
.attachment.error { border-color: var(--danger); }
|
||
.thread-actions { display: flex; gap: 8px; padding: 8px 16px 16px; flex-wrap: wrap; }
|
||
.invite-card { margin: 0 16px 12px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-sunken); }
|
||
.invite-card h4 { margin: 0 0 4px; }
|
||
.invite-card .rsvp { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
||
.vcard-card { margin: 0 16px 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-sunken); display: flex; align-items: center; gap: 12px; }
|
||
.unsubscribe-row { margin: 0 16px 8px; font-size: .88em; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.reply-box { margin: 8px 16px 24px; }
|
||
/* Wraps, because it does not fit. Three labelled buttons and an overflow need
|
||
about 390px of it, which a 430px phone has and a 360px one does not -- and it
|
||
was already over the line on the smaller ones before the overflow was added. */
|
||
.reply-box .reply-prompt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-muted); }
|
||
.reply-box .reply-prompt button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg); font-weight: 500; }
|
||
.reply-box .reply-prompt button:hover { background: var(--bg-hover); }
|
||
.no-thread { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--fg-muted); }
|
||
.no-thread img { width: 140px; opacity: .6; filter: grayscale(.3); }
|
||
.thread-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; color: var(--fg-muted); font-size: .85em; }
|
||
.print-only { display: none; }
|
||
|
||
/* Labels (keywords) */
|
||
.label-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
|
||
/* ==========================================================================
|
||
Composer
|
||
========================================================================== */
|
||
/* Above the mobile drawer, below a dialog -- see the stack by `.dialog-backdrop`. */
|
||
.composer-dock { position: fixed; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 12px; z-index: 955; pointer-events: none; }
|
||
.composer { pointer-events: auto; width: 580px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--bg-elev); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-3); border: 1px solid var(--border); border-bottom: 0; overflow: hidden; animation: rise .2s var(--ease); }
|
||
.composer.minimized { height: 44px; width: 280px; }
|
||
/* Full screen is still a child of the dock, so without a layer of its own the
|
||
positioned parts of any composer after it in the DOM (its recipients row,
|
||
its editor) would paint straight over it. The others are hidden while one
|
||
is full screen: they cannot be reached anyway, and the strip left under the
|
||
24px inset would otherwise show their footers. */
|
||
.composer.maximized { position: fixed; inset: 24px; z-index: 1; width: auto; height: auto; max-width: none; max-height: none; border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); }
|
||
.composer-dock.has-maximized > .composer:not(.maximized) { display: none; }
|
||
.composer-head { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px 0 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--border); flex: 0 0 auto; cursor: default; }
|
||
.composer-head .title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.composer-head .status { color: var(--fg-faint); font-size: .8em; margin-right: 6px; white-space: nowrap; }
|
||
.composer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||
.composer-fields { flex: 0 0 auto; padding: 0 12px; }
|
||
.composer-field { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--border); padding: 4px 0; }
|
||
.composer-field > label { color: var(--fg-muted); width: 42px; flex: 0 0 auto; font-size: .92em; }
|
||
.composer-field .field-extra { display: flex; gap: 4px; color: var(--fg-muted); font-size: .85em; }
|
||
.composer-field .field-extra button { color: var(--fg-muted); padding: 2px 6px; border-radius: 4px; }
|
||
.composer-field .field-extra button:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.composer-field input.plain { flex: 1; border: 0; background: transparent; outline: none; min-width: 80px; height: 30px; }
|
||
.composer-field .from-select { flex: 1; border: 0; background: transparent; color: var(--fg); padding: 0; height: 30px; cursor: pointer; }
|
||
|
||
/*
|
||
* A native <select>'s dropdown is painted by the browser from the element's own
|
||
* colours, not the page's. `.from-select` is deliberately transparent so it
|
||
* sits flush in the composer's From line -- which left its popup with no
|
||
* background of its own, so the browser drew a light one while the text kept
|
||
* the app's light foreground: light on light, unreadable in any dark theme.
|
||
*
|
||
* Styling `option` fixes the popup without giving the closed control a box.
|
||
* Scoped to every select rather than this one, because nothing else in the app
|
||
* styled options either -- the next transparent select would have arrived with
|
||
* the same bug.
|
||
*/
|
||
select option,
|
||
select optgroup { background-color: var(--bg-elev); color: var(--fg); }
|
||
.recipients { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; position: relative; }
|
||
.recipients .chip { height: 24px; }
|
||
.recipients input { flex: 1; min-width: 120px; border: 0; background: transparent; outline: none; height: 28px; }
|
||
.composer-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
|
||
.editor-area { flex: 1; min-height: 120px; overflow-y: auto; padding: 12px 16px; outline: none; line-height: 1.5; font-size: 14px; font-family: var(--font-sans); }
|
||
.editor-area:empty::before, .editor-area[data-empty="true"]::before { content: attr(data-placeholder); color: var(--fg-faint); pointer-events: none; position: absolute; }
|
||
.editor-area blockquote { margin: 0 0 0 .8ex; border-left: 2px solid var(--border-strong); padding-left: 1ex; color: var(--fg-muted); }
|
||
.editor-area img { max-width: 100%; height: auto; }
|
||
.editor-area a { color: var(--link); }
|
||
.editor-area .ihm-signature { color: var(--fg-muted); }
|
||
.editor-area pre { font-family: var(--font-mono); background: var(--bg-sunken); padding: 8px; border-radius: 6px; overflow: auto; }
|
||
.editor-textarea { flex: 1; border: 0; resize: none; outline: none; padding: 12px 16px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; background: transparent; }
|
||
.editor-toolbar { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; padding: 4px 8px; border-top: 1px solid var(--border); flex: 0 0 auto; }
|
||
.editor-toolbar .icon-btn { width: 30px; height: 30px; border-radius: 6px; }
|
||
.editor-toolbar .tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
|
||
.editor-toolbar select { height: 28px; border: 0; background: transparent; color: var(--fg-muted); font-size: .85em; max-width: 110px; }
|
||
.composer-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 0; max-height: 140px; overflow-y: auto; }
|
||
.composer-attachments .attachment { width: 200px; padding: 6px 8px; }
|
||
.composer-foot { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border); flex: 0 0 auto; }
|
||
.composer-foot .send-group { display: flex; }
|
||
.composer-foot .send-group .btn:first-child { border-radius: 999px 0 0 999px; padding-left: 20px; }
|
||
.composer-foot .send-group .btn:last-child { border-radius: 0 999px 999px 0; padding: 0 8px; border-left: 1px solid rgba(255,255,255,.3); }
|
||
.composer-foot .more-actions { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
|
||
.composer.dropping .composer-body { outline: 3px dashed var(--accent); outline-offset: -8px; }
|
||
.suggest-list { position: absolute; top: 100%; left: 0; min-width: 300px; max-width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); z-index: 20; padding: 4px; max-height: 260px; overflow: auto; }
|
||
.suggest-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
|
||
.suggest-item.active, .suggest-item:hover { background: var(--bg-hover); }
|
||
.suggest-item .s-name { font-weight: 550; }
|
||
.suggest-item .s-email { color: var(--fg-muted); font-size: .85em; }
|
||
.suggest-item .s-src { margin-left: auto; font-size: .72em; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .05em; }
|
||
.emoji-grid { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; padding: 4px; }
|
||
.emoji-grid button { font-size: 20px; height: 32px; border-radius: 6px; }
|
||
.emoji-grid button:hover { background: var(--bg-hover); }
|
||
.link-popup { display: flex; gap: 6px; padding: 8px; }
|
||
.color-grid { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; padding: 6px; }
|
||
.color-grid button { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }
|
||
|
||
/* ==========================================================================
|
||
Settings
|
||
========================================================================== */
|
||
.settings-layout { display: grid; grid-template-columns: 240px 1fr; height: 100%; min-height: 0; flex: 1; }
|
||
.settings-nav { border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; }
|
||
.settings-nav .nav-item { margin-right: 0; border-radius: var(--radius-sm); }
|
||
.settings-content { --pad-b: 64px; overflow-y: auto; padding: 24px 32px var(--pad-b); max-width: 860px; }
|
||
.settings-content h1 { margin: 0 0 4px; font-size: 1.5em; font-weight: 650; }
|
||
.settings-content h2 { margin: 28px 0 12px; font-size: 1.05em; font-weight: 650; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
||
.settings-content .lead { color: var(--fg-muted); margin: 0 0 20px; }
|
||
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); padding: 14px 16px; margin-bottom: 12px; }
|
||
.card.clickable { cursor: pointer; transition: box-shadow .12s; }
|
||
.card.clickable:hover { box-shadow: var(--shadow-1); }
|
||
.card-head { display: flex; align-items: center; gap: 10px; }
|
||
.card-head h3 { margin: 0; font-size: 1em; font-weight: 650; flex: 1; }
|
||
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
|
||
.theme-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 8px; cursor: pointer; text-align: center; font-size: .9em; }
|
||
.theme-card.active { border-color: var(--accent); }
|
||
.theme-card .preview { height: 56px; border-radius: 6px; margin-bottom: 6px; border: 1px solid var(--border); }
|
||
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
|
||
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
|
||
.swatch.active { border-color: var(--fg); }
|
||
.rule-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: var(--bg-elev); }
|
||
.rule-card.disabled { opacity: .6; }
|
||
.rule-card.dragging { opacity: .5; }
|
||
/* The line shows which side of this card the dragged rule would land on. */
|
||
.rule-card.drop-above { box-shadow: inset 0 3px 0 0 var(--accent); }
|
||
.rule-card.drop-below { box-shadow: inset 0 -3px 0 0 var(--accent); }
|
||
.rule-card .drag-handle { display: flex; align-items: center; padding: 2px; margin-left: -4px; color: var(--fg-faint); cursor: grab; touch-action: none; }
|
||
.rule-card .drag-handle:active { cursor: grabbing; }
|
||
|
||
/* The bar that says whether there is unsaved work, kept where it can be read.
|
||
Unpinned it sat after the rules, which on a full list means off the bottom of
|
||
the window: the one indicator that anything was pending was the one thing you
|
||
had to scroll to find (issue #175).
|
||
|
||
The offset is what pins it flush. A sticky `bottom: 0` stops at the scroll
|
||
container's padding box, which leaves the pane's bottom padding as a strip
|
||
below the bar for rules to scroll through; sticking to minus that padding
|
||
closes it, on the narrow layout's larger padding as well. */
|
||
.save-bar { position: sticky; bottom: calc(var(--pad-b, 0px) * -1); z-index: 2; margin-top: 12px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); }
|
||
.save-bar .unsaved { color: var(--warn); font-weight: 600; font-size: .9em; }
|
||
.rule-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
|
||
.rule-row.actions { grid-template-columns: 1fr 2fr auto; }
|
||
/* A header typed by hand needs a box of its own, alongside the comparator. */
|
||
.rule-row.named-header { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
|
||
.code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: pre; overflow: auto; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; min-height: 240px; width: 100%; resize: vertical; tab-size: 2; }
|
||
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px 32px; }
|
||
.shortcut-grid h3 { margin: 0 0 6px; font-size: .9em; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); }
|
||
.shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; gap: 12px; }
|
||
.shortcut-row .keys { display: flex; gap: 4px; }
|
||
.sessions-table { width: 100%; border-collapse: collapse; font-size: .92em; }
|
||
.sessions-table th, .sessions-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
|
||
.sessions-table th { color: var(--fg-muted); font-weight: 600; font-size: .85em; }
|
||
|
||
/* ==========================================================================
|
||
Administration
|
||
Settings' layout, with a table for the list and a panel beside it for the
|
||
one that is open. The panel is positioned against the layout rather than the
|
||
scrolling content, so it stays put while the list scrolls under it.
|
||
========================================================================== */
|
||
/* One column: the section list is in the folder pane (AdminNav), so the
|
||
table gets the width a second column would take. The height and scrolling
|
||
are what .settings-layout gave it. */
|
||
.admin-layout { position: relative; height: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; }
|
||
.admin-content { max-width: 1120px; flex: 1; min-height: 0; }
|
||
.admin-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
|
||
.admin-head .grow { min-width: 220px; }
|
||
.admin-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
|
||
.admin-search { position: relative; flex: 1; max-width: 360px; }
|
||
.admin-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
|
||
.admin-search .input { width: 100%; padding-left: 34px; }
|
||
.admin-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
|
||
.admin-table { width: 100%; border-collapse: collapse; font-size: .93em; }
|
||
.admin-table th { text-align: left; padding: 9px 12px; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); background: var(--bg-sunken); border-bottom: 1px solid var(--border); white-space: nowrap; }
|
||
.admin-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
||
.admin-table tbody tr:last-child td { border-bottom: 0; }
|
||
.admin-table tbody tr { cursor: pointer; }
|
||
.admin-table tbody tr:hover { background: var(--bg-hover); }
|
||
.admin-table tbody tr.selected { background: var(--bg-active); }
|
||
.admin-table tbody tr:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
|
||
.admin-who { display: flex; align-items: center; gap: 10px; min-width: 200px; }
|
||
.admin-who-name { font-weight: 550; display: flex; align-items: center; gap: 6px; }
|
||
.admin-groups { display: block; max-width: 180px; }
|
||
.admin-role { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .85em; font-weight: 550; white-space: nowrap; background: var(--bg-sunken); color: var(--fg-muted); }
|
||
.admin-role.admin { background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
.admin-role.custom { background: transparent; border: 1px solid var(--border-strong); }
|
||
.admin-meter { min-width: 120px; }
|
||
.admin-meter .quota-bar { margin: 0 0 4px; }
|
||
.admin-pager { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; }
|
||
.admin-pager .hint { margin-right: 8px; font-variant-numeric: tabular-nums; }
|
||
.admin-count { margin-top: 8px; }
|
||
.admin-notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--fg-muted); font-size: .92em; margin: 8px 0; }
|
||
.admin-notice svg { flex: none; margin-top: 2px; }
|
||
.admin-notice.warn { background: var(--warn-soft); color: var(--fg); }
|
||
.admin-notice.warn svg { color: var(--warn); }
|
||
.admin-notice.error { background: var(--danger-soft); color: var(--fg); }
|
||
.admin-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); z-index: 20; display: flex; flex-direction: column; background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: var(--shadow-3); animation: admin-sheet-in .18s var(--ease); }
|
||
@keyframes admin-sheet-in { from { transform: translateX(24px); opacity: 0; } }
|
||
.admin-sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--border); }
|
||
.admin-sheet-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.1em; font-weight: 650; }
|
||
.admin-sheet-body { flex: 1; overflow-y: auto; padding: 4px 20px 24px; }
|
||
.admin-sheet-body h3 { margin: 22px 0 10px; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
|
||
.admin-sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
|
||
.admin-address .input:first-child { flex: 0 1 160px; min-width: 0; }
|
||
.admin-address select.input { flex: 1; min-width: 0; }
|
||
.admin-wide { width: 100%; }
|
||
.admin-narrow { max-width: 140px; }
|
||
.admin-danger { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius); padding: 12px 14px; }
|
||
.admin-danger p { margin: 0 0 10px; color: var(--fg-muted); font-size: .92em; }
|
||
.admin-danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
|
||
.admin-danger-btn:hover:not(:disabled) { background: var(--danger-soft); }
|
||
.admin-dns { border: 1px solid var(--border); border-radius: var(--radius); }
|
||
.admin-dns-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--border); }
|
||
.admin-dns-row:last-child { border-bottom: 0; }
|
||
.admin-dns-type { flex: 0 0 48px; font-family: var(--font-mono); font-size: .78em; font-weight: 700; color: var(--accent-soft-fg); padding-top: 2px; }
|
||
.admin-dns-name { font-size: .88em; font-weight: 550; word-break: break-all; }
|
||
.admin-dns-value { display: block; font-family: var(--font-mono); font-size: .8em; color: var(--fg-muted); word-break: break-all; margin-top: 2px; max-height: 4.8em; overflow: hidden; }
|
||
.admin-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin: 0; font-size: .92em; }
|
||
.admin-kv dt { color: var(--fg-muted); }
|
||
.admin-kv dd { margin: 0; }
|
||
@media (prefers-reduced-motion: reduce) { .admin-sheet { animation: none; } }
|
||
|
||
/* ==========================================================================
|
||
Contacts
|
||
========================================================================== */
|
||
.contacts-layout { display: grid; grid-template-columns: 220px minmax(280px, 360px) 1fr; height: 100%; min-height: 0; flex: 1; }
|
||
.contacts-books { border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; overflow-x: hidden; }
|
||
.contacts-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
|
||
.contacts-list .list-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
|
||
.contacts-scroll { flex: 1; overflow-y: auto; }
|
||
.contact-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
|
||
.contact-row:hover { background: var(--bg-hover); }
|
||
.contact-row.active { background: var(--selected-bg); }
|
||
.contact-row .c-name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.contact-row .c-email { color: var(--fg-muted); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.contact-row.picked { background: var(--selected-bg); }
|
||
/* Out of the way until wanted, and never on a touchscreen, where there is no
|
||
hover to reveal it -- the same rule the message list's checkbox follows. */
|
||
.contact-check { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; opacity: 0; transition: opacity .1s; cursor: pointer; }
|
||
.contact-row:hover .contact-check, .contact-row.picked .contact-check, .contacts-scroll.has-selection .contact-check { opacity: 1; }
|
||
.contacts-selbar .contact-check { opacity: 1; }
|
||
.contacts-selbar { gap: 12px; padding-left: 14px; }
|
||
.contact-letter { position: sticky; top: 0; background: var(--bg-sunken); padding: 4px 14px; font-size: .78em; font-weight: 700; color: var(--fg-muted); letter-spacing: .05em; z-index: 1; }
|
||
.contact-detail { overflow-y: auto; padding: 28px 32px 64px; }
|
||
.contact-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
|
||
.contact-hero h1 { margin: 0; font-size: 1.6em; font-weight: 650; }
|
||
.contact-hero .sub { color: var(--fg-muted); }
|
||
.contact-section { margin-bottom: 20px; }
|
||
.contact-section h3 { margin: 0 0 8px; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
|
||
.contact-kv { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
|
||
.contact-kv .k { width: 90px; color: var(--fg-muted); font-size: .9em; flex: 0 0 auto; padding-top: 2px; }
|
||
.contact-kv .v { flex: 1; overflow-wrap: anywhere; }
|
||
.contact-form .multi { display: flex; flex-direction: column; gap: 8px; }
|
||
.contact-form .multi-row { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: center; }
|
||
.contact-form .multi-row.address { grid-template-columns: 1fr auto; }
|
||
.contact-form .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
|
||
/* ==========================================================================
|
||
Calendar
|
||
========================================================================== */
|
||
.cal-layout { display: grid; grid-template-columns: 240px 1fr; height: 100%; min-height: 0; }
|
||
.cal-side { border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
|
||
.cal-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; height: 100%; }
|
||
.cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
||
.cal-toolbar h2 { margin: 0 8px; font-size: 1.2em; font-weight: 650; min-width: 0; white-space: nowrap; }
|
||
.view-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
|
||
.view-switch button { padding: 0 12px; height: 34px; font-weight: 500; color: var(--fg-muted); }
|
||
.view-switch button.active { background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
.view-switch button:not(:last-child) { border-right: 1px solid var(--border-strong); }
|
||
.mini-cal { font-size: .85em; }
|
||
.mini-cal .mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 650; }
|
||
.mini-cal .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
|
||
.mini-cal .mc-dow { color: var(--fg-faint); font-size: .85em; padding: 2px 0; }
|
||
.mini-cal .mc-day { height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||
.mini-cal .mc-day:hover { background: var(--bg-hover); }
|
||
.mini-cal .mc-day.other { color: var(--fg-faint); }
|
||
.mini-cal .mc-day.today { font-weight: 700; color: var(--accent); }
|
||
.mini-cal .mc-day.selected { background: var(--accent); color: var(--accent-fg); }
|
||
.mini-cal .mc-day.has-events::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); position: relative; top: 9px; left: -1px; }
|
||
.cal-list-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
|
||
.cal-list-item:hover { background: var(--bg-hover); }
|
||
.cal-list-item .cal-color { width: 14px; height: 14px; border-radius: 4px; border: 2px solid transparent; flex: 0 0 auto; }
|
||
.cal-list-item.hidden-cal .cal-color { background: transparent !important; }
|
||
.cal-list-item .cal-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.cal-list-item .nav-more { opacity: 0; }
|
||
.cal-list-item:hover .nav-more { opacity: 1; }
|
||
.month-grid { flex: 1; display: grid; grid-template-rows: auto repeat(6, 1fr); min-height: 0; }
|
||
.month-grid .dow-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
|
||
.month-grid .dow-row div { padding: 6px; text-align: center; font-size: .8em; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
|
||
.month-grid .week-row { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 0; border-bottom: 1px solid var(--border); }
|
||
.month-cell { border-right: 1px solid var(--border); padding: 4px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; cursor: pointer; position: relative; }
|
||
.month-cell:last-child { border-right: 0; }
|
||
.month-cell.other { background: var(--bg-sunken); color: var(--fg-faint); }
|
||
.month-cell:hover { background: var(--bg-hover); }
|
||
.month-cell .day-num { min-width: 26px; height: 26px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .9em; font-weight: 500; align-self: flex-start; white-space: nowrap; }
|
||
.month-cell.today .day-num { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
|
||
.month-cell .more { font-size: .78em; color: var(--fg-muted); padding-left: 4px; font-weight: 600; }
|
||
.ev-chip { display: flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: .8em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #fff; font-weight: 500; flex: 0 0 auto; border: 1px solid transparent; }
|
||
.ev-chip.timed { background: transparent !important; color: var(--fg); border-color: transparent !important; }
|
||
.ev-chip.timed .ev-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
||
.ev-chip.timed .ev-time { color: var(--fg-muted); }
|
||
.ev-chip:hover { filter: brightness(.95); }
|
||
.ev-chip.timed:hover { background: var(--bg-hover) !important; }
|
||
.ev-chip.declined { text-decoration: line-through; opacity: .6; }
|
||
.ev-chip.tentative { border-style: dashed; opacity: .85; }
|
||
.ev-chip.cancelled { text-decoration: line-through; opacity: .5; }
|
||
.week-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||
.week-head { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), 1fr); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
||
.week-head .wh-day { padding: 8px 4px 4px; text-align: center; border-left: 1px solid var(--border); cursor: pointer; }
|
||
.week-head .wh-day .dow { font-size: .75em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
|
||
.week-head .wh-day .dnum { font-size: 1.4em; font-weight: 500; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
|
||
.week-head .wh-day.today .dnum { background: var(--accent); color: var(--accent-fg); }
|
||
.week-allday { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), 1fr); border-bottom: 1px solid var(--border); min-height: 28px; flex: 0 0 auto; }
|
||
.week-allday .ad-cell { border-left: 1px solid var(--border); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||
.week-allday .ad-label { font-size: .7em; color: var(--fg-faint); text-align: right; padding: 4px 6px; }
|
||
.week-scroll { flex: 1; overflow-y: auto; position: relative; }
|
||
.week-body { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), 1fr); position: relative; height: calc(24 * var(--hour-h, 48px)); }
|
||
.week-body .time-col { position: relative; }
|
||
.week-body .time-col .hour-label { position: absolute; right: 6px; transform: translateY(-50%); font-size: .72em; color: var(--fg-faint); }
|
||
.week-body .day-col { position: relative; border-left: 1px solid var(--border); cursor: pointer; }
|
||
.week-body .day-col.today { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
|
||
.week-body .hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
|
||
.week-body .half-line { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); pointer-events: none; }
|
||
.week-body .now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; }
|
||
.week-body .now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
|
||
.week-body .work-hours { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--bg-elev) 60%, transparent); pointer-events: none; }
|
||
.ev-block { position: absolute; border-radius: 6px; padding: 3px 6px; font-size: .8em; color: #fff; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,.4); line-height: 1.3; z-index: 2; transition: box-shadow .1s; }
|
||
.ev-block:hover { box-shadow: var(--shadow-2); z-index: 3; }
|
||
.ev-block .ev-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.ev-block .ev-time { opacity: .9; font-size: .92em; }
|
||
.ev-block.declined { opacity: .5; text-decoration: line-through; }
|
||
.ev-block.tentative { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px); }
|
||
.ev-block.draft-new { opacity: .7; border: 2px dashed #fff; }
|
||
.agenda { overflow-y: auto; padding: 12px 16px 64px; }
|
||
.agenda-day { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
|
||
.agenda-day .ad-date { font-weight: 600; }
|
||
.agenda-day .ad-date.today { color: var(--accent); }
|
||
.agenda-day .ad-date small { display: block; color: var(--fg-muted); font-weight: 400; }
|
||
.agenda-ev { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
|
||
.agenda-ev:hover { background: var(--bg-hover); }
|
||
.agenda-ev .ev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
|
||
.agenda-ev .ev-when { width: 140px; color: var(--fg-muted); font-size: .9em; flex: 0 0 auto; }
|
||
.event-popover { width: 360px; max-width: calc(100vw - 24px); padding: 14px 16px; }
|
||
.event-popover h3 { margin: 0 0 6px; font-size: 1.15em; font-weight: 650; padding-left: 16px; position: relative; }
|
||
.event-popover h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: var(--ev-color, var(--accent)); }
|
||
.event-popover .ev-line { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-muted); font-size: .92em; margin: 6px 0; }
|
||
.event-popover .ev-line svg { flex: 0 0 auto; margin-top: 2px; }
|
||
.participant-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .92em; }
|
||
.participant-row .p-status { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
|
||
.p-status.accepted { background: var(--success); } .p-status.declined { background: var(--danger); } .p-status.tentative { background: var(--warn); } .p-status.needs-action { background: var(--fg-faint); }
|
||
.event-form .time-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
|
||
.event-form .alerts-list { display: flex; flex-direction: column; gap: 6px; }
|
||
.event-form .alerts-list .row { gap: 6px; }
|
||
.freebusy { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
|
||
.freebusy .fb-row { display: flex; align-items: center; gap: 8px; font-size: .85em; }
|
||
.freebusy .fb-bar { flex: 1; height: 14px; background: var(--bg-sunken); border-radius: 4px; position: relative; overflow: hidden; }
|
||
.freebusy .fb-busy { position: absolute; top: 0; bottom: 0; background: var(--danger); opacity: .65; }
|
||
.freebusy .fb-window { position: absolute; top: 0; bottom: 0; border: 2px solid var(--accent); border-radius: 3px; }
|
||
/* The hour and day marks, and the labels above them. Without these the bar says
|
||
only "somewhere in here", and which hours it covered was a guess (issue #172). */
|
||
.freebusy .fb-axis-row { height: 14px; }
|
||
.freebusy .fb-axis { flex: 1; position: relative; height: 100%; }
|
||
.freebusy .fb-axis-label { position: absolute; top: 0; font-size: .78em; color: var(--fg-muted); transform: translateX(-50%); white-space: nowrap; }
|
||
/* Midnight and the far edge sit on the ends, where half of each would be cut off. */
|
||
.freebusy .fb-axis-label[style*="left: 0%"] { transform: none; }
|
||
.freebusy .fb-axis-label.end { left: auto; right: 0; transform: none; }
|
||
.freebusy .fb-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
|
||
.freebusy .fb-tick.major { background: var(--fg-faint); }
|
||
.freebusy .fb-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: .85em; }
|
||
.freebusy .fb-range { font-weight: 600; }
|
||
.freebusy .fb-self { font-weight: 600; }
|
||
/* A bar is somewhere to put the event, not only something to read. */
|
||
.freebusy .fb-bar { cursor: crosshair; }
|
||
.freebusy .fb-guide { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--fg); opacity: .55; pointer-events: none; }
|
||
/*
|
||
* "We cannot say", which is not the same as "free" and must not look like it.
|
||
* Somebody outside this server has no free/busy to read, and an empty bar in a
|
||
* grid reads as an empty diary -- the one reading that is certainly wrong.
|
||
*/
|
||
.freebusy .fb-bar.no-data {
|
||
background-image: repeating-linear-gradient(135deg, var(--bg-sunken), var(--bg-sunken) 4px, var(--border) 4px, var(--border) 8px);
|
||
cursor: crosshair;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Files
|
||
========================================================================== */
|
||
.files-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1; }
|
||
.files-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
|
||
.breadcrumb { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
|
||
.breadcrumb button { padding: 4px 8px; border-radius: 6px; color: var(--fg-muted); font-weight: 500; white-space: nowrap; }
|
||
.breadcrumb button:hover { background: var(--bg-hover); color: var(--fg); }
|
||
.breadcrumb button.current { color: var(--fg); font-weight: 650; }
|
||
.files-table { width: 100%; border-collapse: collapse; }
|
||
.files-table th { text-align: left; padding: 8px 12px; font-size: .8em; color: var(--fg-muted); font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-elev); z-index: 1; }
|
||
.files-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
|
||
.files-table tr { cursor: pointer; }
|
||
.files-table tbody tr:hover { background: var(--bg-hover); }
|
||
.files-table tr.selected { background: var(--selected-bg); }
|
||
.files-table .f-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
|
||
.files-table .f-name svg { color: var(--fg-muted); }
|
||
.files-scroll { flex: 1; overflow: auto; }
|
||
.files-layout.dropping .files-scroll { outline: 3px dashed var(--accent); outline-offset: -10px; }
|
||
|
||
/* ==========================================================================
|
||
Login
|
||
========================================================================== */
|
||
.login-page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at 110% 110%, var(--accent-soft), transparent 60%), var(--bg); }
|
||
.login-card { width: 100%; max-width: 400px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 32px 28px 24px; animation: rise .25s var(--ease); }
|
||
.login-card .logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
|
||
.login-card .logo img { width: 120px; height: auto; }
|
||
/* The logo is the mark alone, so the name is set here rather than baked in. */
|
||
.login-card h1 { margin: 0; font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; color: #14b8a6; }
|
||
.login-card .sub { color: var(--fg-muted); font-size: .92em; margin: 0; }
|
||
.login-card .tagline { color: var(--fg-muted); font-size: 1em; margin: 4px 0 0; text-align: center; }
|
||
.login-card .foot a { color: var(--fg-muted); text-decoration: underline; }
|
||
.login-card .foot { margin-top: 20px; font-size: .8em; color: var(--fg-faint); text-align: center; }
|
||
.login-card .pw-wrap { position: relative; }
|
||
.login-card .pw-wrap .icon-btn { position: absolute; right: 2px; top: 1px; }
|
||
|
||
/* The translate boundary is a wrapper with no appearance of its own; it must
|
||
not interrupt the flex/grid chain the panes inside it rely on. */
|
||
.translate-boundary { display: contents; }
|
||
|
||
/* ==========================================================================
|
||
Touch gestures (see lib/touch.ts)
|
||
========================================================================== */
|
||
|
||
/*
|
||
* `pan-y` is what makes a swipe possible without costing a scroll: the browser
|
||
* keeps the vertical drag for itself, at its own frame rate, and only sends us
|
||
* the horizontal movement it now knows it will not use. Without it every
|
||
* pointermove would arrive after the scroll had already started, and the list
|
||
* would stutter on the way past.
|
||
*/
|
||
/*
|
||
* `pinch-zoom` is listed alongside `pan-y` rather than left implied: naming any
|
||
* value at all drops every gesture not named, so a bare `pan-y` also told the
|
||
* browser not to zoom here. Pinch worked on an open message and died on the
|
||
* list, which read as the zoom being broken at random. The swipe is unaffected
|
||
* -- horizontal is still not in the list, so it still arrives here.
|
||
*/
|
||
.msg-row { touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; }
|
||
.msg-row.swiping { z-index: 4; box-shadow: var(--shadow-2); }
|
||
/* The row being dragged is the one thing on screen that must not lag. */
|
||
.msg-row.swiping, .mail-list-pull { will-change: transform; }
|
||
/* Stop a pull at the top of the list from dragging the page behind it. */
|
||
.mail-list { overscroll-behavior-y: contain; }
|
||
|
||
/* The strip a swiped row slides off to reveal, painted into the row's slot. */
|
||
.msg-swipe { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: center; padding: 0 22px; color: #fff; border-bottom: 1px solid var(--border); }
|
||
.msg-swipe.from-left { justify-content: flex-start; }
|
||
.msg-swipe.from-right { justify-content: flex-end; }
|
||
.msg-swipe.danger { background: var(--danger); }
|
||
.msg-swipe.warn { background: var(--warn); }
|
||
.msg-swipe.accent { background: var(--accent); color: var(--accent-fg); }
|
||
.msg-swipe.neutral { background: var(--fg-muted); }
|
||
/*
|
||
* Dim until the swipe is far enough to fire, then full strength and a little
|
||
* larger. It is the same promise the haptic tap makes, for anyone whose phone
|
||
* has no motor or has it switched off.
|
||
*/
|
||
.msg-swipe-act { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; opacity: .72; transform: scale(.94); transition: opacity .12s var(--ease), transform .12s var(--ease); }
|
||
.msg-swipe.armed .msg-swipe-act { opacity: 1; transform: none; }
|
||
|
||
/* Pull to refresh: a zero-height sticky perch for the dial, so an unpulled
|
||
list gives up no space to it. */
|
||
.ptr { position: sticky; top: 0; left: 0; height: 0; z-index: 5; pointer-events: none; }
|
||
.ptr-dial { position: absolute; left: 50%; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-2); color: var(--fg-muted); }
|
||
.ptr-dial.armed { color: var(--accent); border-color: var(--accent); }
|
||
|
||
/*
|
||
* A tap that leaves a grey rectangle behind reads as a rendering glitch rather
|
||
* than as feedback, and every surface here has a :active or a ripple of its own.
|
||
*/
|
||
@media (hover: none) {
|
||
* { -webkit-tap-highlight-color: transparent; }
|
||
.msg-row:active { background: var(--bg-hover); }
|
||
.nav-item, .module-link, .mobile-tabbar a { -webkit-touch-callout: none; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Responsive
|
||
========================================================================== */
|
||
@media (max-width: 1100px) {
|
||
:root { --list-w: 44%; }
|
||
.msg-row .msg-from { width: 140px; }
|
||
.contacts-layout { grid-template-columns: 200px 300px 1fr; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
.mail-layout:not(.pane-off):not(.pane-bottom) { grid-template-columns: 1fr !important; }
|
||
.mail-layout.pane-bottom { grid-template-rows: 1fr !important; }
|
||
.mail-layout.pane-bottom .mail-reading-pane { display: none; }
|
||
.mail-layout.pane-bottom.reading .mail-list-pane { display: none; }
|
||
.mail-layout.pane-bottom.reading .mail-reading-pane { display: flex; }
|
||
.mail-layout .splitter { display: none; }
|
||
.mail-layout:not(.pane-bottom) .mail-reading-pane { display: none; }
|
||
.mail-layout.reading .mail-list-pane { display: none; }
|
||
.mail-layout.reading .mail-reading-pane { display: flex; }
|
||
.settings-layout { grid-template-columns: 1fr; }
|
||
.settings-nav { display: none; }
|
||
.settings-layout.section .settings-nav { display: none; }
|
||
.settings-layout.root .settings-nav { display: block; border-right: 0; }
|
||
.settings-layout.root .settings-content { display: none; }
|
||
.settings-content { --pad-b: 80px; padding: 16px 16px var(--pad-b); }
|
||
.admin-table .hide-mobile { display: none; }
|
||
.admin-sheet { width: 100%; border-left: 0; box-shadow: none; }
|
||
.contacts-layout { grid-template-columns: 1fr; }
|
||
.contacts-books { display: none; }
|
||
.contacts-layout.detail .contacts-list { display: none; }
|
||
.contacts-layout:not(.detail) .contact-detail { display: none; }
|
||
.cal-layout { grid-template-columns: 1fr; }
|
||
.cal-side { display: none; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
:root { --topbar-h: 52px; }
|
||
.app-body, .app-body.collapsed { grid-template-columns: minmax(0, 1fr); }
|
||
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); background: var(--bg-elev); z-index: 950; transform: translateX(-105%); transition: transform .22s var(--ease); box-shadow: var(--shadow-3); padding-top: 12px; }
|
||
.sidebar.open { transform: none; }
|
||
.collapsed .sidebar .nav-item, .collapsed .sidebar .compose-btn { all: revert; }
|
||
.collapsed .module-bar { flex-direction: row; }
|
||
.collapsed .module-link { width: auto; height: auto; padding: 6px 2px; border-radius: var(--radius-sm); }
|
||
.collapsed .module-link .module-label { display: block; }
|
||
.drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 940; background: rgba(2,6,23,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
|
||
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
|
||
.main { border-radius: 0; border: 0; }
|
||
/*
|
||
index.html asks for `viewport-fit=cover`, which is what lets the app paint
|
||
under a notch and behind the home indicator — and what makes it this
|
||
stylesheet's job to keep anything readable out from under them. The insets
|
||
are zero everywhere else, so these need no media query of their own.
|
||
*/
|
||
.topbar { padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); gap: 4px; }
|
||
.topbar .brand .brand-name { display: none; }
|
||
.searchbar .search-input { height: 40px; }
|
||
.topbar-actions .hide-mobile { display: none; }
|
||
.msg-row { padding-right: 8px; }
|
||
.mail-list { padding-bottom: 72px; }
|
||
/*
|
||
`dvh`, not `vh`. On a phone browser `100vh` is the tall layout viewport that
|
||
ignores the address bar, so a full-screen composer put its Send button
|
||
behind the toolbar until the page was scrolled — which a fixed element
|
||
cannot be. In an installed PWA there is no bar and the two agree.
|
||
*/
|
||
.composer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; position: fixed; inset: 0; }
|
||
.composer.minimized { height: calc(44px + env(safe-area-inset-bottom)); width: 100vw; top: auto; bottom: 0; }
|
||
.composer-dock { right: 0; }
|
||
.dialog { max-height: calc(100dvh - 16px); }
|
||
.fab { display: flex; position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(78px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 18px; background: var(--accent); color: var(--accent-fg); align-items: center; justify-content: center; box-shadow: var(--shadow-2); z-index: 700; }
|
||
/* The bar grows by the home indicator rather than hiding behind it, and
|
||
`.main` below reserves exactly that much. */
|
||
.mobile-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); background: var(--bg-elev); border-top: 1px solid var(--border); z-index: 700; padding-bottom: env(safe-area-inset-bottom); }
|
||
.mobile-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--fg-muted); text-decoration: none; font-size: 11px; }
|
||
.mobile-tabbar a.active { color: var(--accent); }
|
||
.main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
|
||
.sidebar { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
|
||
/* Lines the close up with the hamburger underneath it: same height as the
|
||
top bar, same 12px in from the edge, so the second press lands where the
|
||
first one did. The negative margin cancels the drawer's own padding-top,
|
||
which would otherwise push it a row lower than the thing it replaces. */
|
||
.drawer-head { display: flex; align-items: center; height: var(--topbar-h); margin-top: -12px; padding-left: max(6px, env(safe-area-inset-left)); }
|
||
.thread-subject { padding: 14px 16px 8px; }
|
||
.message { margin: 0 8px 8px; }
|
||
.message-head { padding: 10px 12px; }
|
||
.message-body { padding: 4px 12px 12px; }
|
||
.thread-toolbar .hide-mobile { display: none; }
|
||
.list-toolbar .hide-mobile { display: none; }
|
||
.week-head .wh-day .dnum { width: 32px; height: 32px; font-size: 1.1em; }
|
||
.cal-toolbar h2 { font-size: 1em; }
|
||
.contact-detail { padding: 16px 16px 80px; }
|
||
.files-table .hide-mobile { display: none; }
|
||
.event-popover { width: calc(100vw - 24px); }
|
||
}
|
||
/*
|
||
* Touch targets.
|
||
*
|
||
* `pointer: coarse` rather than a width, for the reason ui/misc.tsx gives about
|
||
* useIsTouch: width decides the layout, the pointer decides what has to be
|
||
* aimed at. A tablet in landscape is a wide screen with fat targets.
|
||
*
|
||
* Everything here was under the 44px a fingertip actually covers -- the top bar
|
||
* icons at 36px (the search filter at 30), the folder twisty at 18, the row ⋮
|
||
* at 24. Growing the boxes would reflow a top bar that has no room to give, so
|
||
* each control keeps the size it draws at and gains a transparent hit area
|
||
* centred on it. Rows grow for real, because a 44px hit area inside a 36px row
|
||
* would reach into the rows above and below and steal their taps.
|
||
*/
|
||
@media (pointer: coarse) {
|
||
.icon-btn, .nav-twisty { position: relative; }
|
||
/* `.drill-into` already draws at 44px and is excluded: expanding a control
|
||
that is big enough only lets it reach into its neighbour. */
|
||
.icon-btn:not(.drill-into)::after, .nav-twisty[role="button"]::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: max(100%, 44px);
|
||
height: max(100%, 44px);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
/*
|
||
* The ⋮ is the exception, and narrower on purpose. It sits immediately left
|
||
* of the drill chevron, and at a full 44px wide the two hit areas overlapped
|
||
* by 4px -- so the right edge of "folder options" silently drilled instead.
|
||
* The row is 44px tall here, so it still gets the full height, which is the
|
||
* axis a thumb actually misses on.
|
||
*/
|
||
.nav-item .nav-more::after { width: max(100%, 36px); }
|
||
.sidebar .nav-item, .cal-list-item { height: 44px; }
|
||
/* The hamburger is the one control in the corner a thumb is worst at, so it
|
||
gets real distance from the bezel rather than just a wider hit area. */
|
||
/* Both, together: the close in the drawer stands exactly on the hamburger it
|
||
covers, and it only does that if the two are moved by the same rule. */
|
||
.topbar, .drawer-head { padding-left: max(12px, env(safe-area-inset-left)); }
|
||
}
|
||
@media (hover: none) {
|
||
.msg-row .msg-check { opacity: 1; }
|
||
.contact-row .contact-check { opacity: 1; }
|
||
.msg-row .msg-actions { display: none !important; }
|
||
.msg-row:hover .msg-meta .msg-date { display: inline; }
|
||
.nav-item .nav-more, .cal-list-item .nav-more { opacity: 1; }
|
||
}
|
||
/*
|
||
* Print.
|
||
*
|
||
* Paper has no theme. Whatever palette is on screen, the tokens are pinned to
|
||
* a light, unpainted set here -- backgrounds white rather than the light
|
||
* theme's greys, since a printer would otherwise lay ink over the whole sheet.
|
||
* Doing it on the tokens rather than per rule is what reaches the message
|
||
* body: it renders in a shadow root this stylesheet cannot select into, and
|
||
* follows the app theme through inherited custom properties (see
|
||
* EMAIL_BASE_CSS in lib/html.ts). Mail that brings colours of its own is left
|
||
* alone -- it is not themed in the first place.
|
||
*
|
||
* `!important` rather than a longer selector: the dark palettes sit on
|
||
* :root[data-theme] and :root[data-palette][data-accent], and out-specifying
|
||
* every one of them is a chain that the next palette breaks.
|
||
*/
|
||
@media print {
|
||
:root {
|
||
--bg: #fff !important;
|
||
--bg-elev: #fff !important;
|
||
--bg-sunken: #fff !important;
|
||
--bg-hover: transparent !important;
|
||
--bg-active: transparent !important;
|
||
--unread-bg: #fff !important;
|
||
--read-bg: #fff !important;
|
||
--selected-bg: transparent !important;
|
||
--fg: #000 !important;
|
||
--fg-muted: #3a3a3a !important;
|
||
--fg-faint: #5a5a5a !important;
|
||
--border: #ccc !important;
|
||
--border-strong: #999 !important;
|
||
--accent: #0f766e !important;
|
||
--accent-fg: #fff !important;
|
||
--accent-soft: transparent !important;
|
||
--accent-soft-fg: #0b5750 !important;
|
||
--danger: #b91c1c !important;
|
||
--danger-soft: transparent !important;
|
||
--warn: #92400e !important;
|
||
--warn-soft: transparent !important;
|
||
--success: #15803d !important;
|
||
--success-soft: transparent !important;
|
||
--link: #0e7490 !important;
|
||
--star: #444 !important;
|
||
--q1: #1d4ed8 !important;
|
||
--q2: #15803d !important;
|
||
--q3: #7e22ce !important;
|
||
--shadow-1: none !important;
|
||
--shadow-2: none !important;
|
||
--shadow-3: none !important;
|
||
color-scheme: light !important;
|
||
}
|
||
.topbar, .sidebar, .mail-list-pane, .splitter, .thread-toolbar, .composer-dock, .toast-host, .mobile-tabbar, .fab, .reply-box, .thread-actions, .quote-toggle { display: none !important; }
|
||
.message-head .meta .icon-btn, .message-head .who .to button { display: none !important; }
|
||
.app, .app-body, .main, .mail-layout, .mail-reading-pane, .thread-view, .thread-scroll { display: block !important; height: auto !important; overflow: visible !important; grid-template-columns: 1fr !important; border: 0 !important; }
|
||
/*
|
||
* `break-inside: avoid` on the whole card is what put the first message on
|
||
* page two: a message longer than a sheet cannot honour it, and Chrome
|
||
* answers by moving the card to a fresh page and breaking it there anyway --
|
||
* leaving page one holding nothing but the subject. Only the header is
|
||
* indivisible now, and it is kept with the body that follows it.
|
||
*/
|
||
.message { break-inside: auto; border: 1px solid var(--border); }
|
||
.message-head { break-inside: avoid; break-after: avoid; }
|
||
/*
|
||
* "Print" in a message's own menu marks that card and prints it alone;
|
||
* "Print conversation" in the thread toolbar sets no mark and prints them
|
||
* all. The subject heading stays either way -- a printed
|
||
* message with no subject on it is a page nobody can file -- but the
|
||
* "3 messages" count beside it goes, since only one of them is on the page.
|
||
*/
|
||
.printing-one .message:not(.print-target) { display: none !important; }
|
||
.printing-one .thread-subject > .muted { display: none !important; }
|
||
/*
|
||
* Printing from the file viewer. The dialog is the document: the mail or the
|
||
* file listing behind it is not what was asked for, and the chrome of the
|
||
* dialog itself -- title bar, Print and Download buttons -- is not part of
|
||
* the file. A PDF never comes through here; it prints itself from its own
|
||
* iframe (see ui/filepreview.tsx).
|
||
*/
|
||
/* The dialog is portalled to <body>, so the whole app goes -- hiding `.app`
|
||
alone left `#root` holding its `height: 100%` and printing a blank first
|
||
page, the same way `break-inside` did on a message. */
|
||
.printing-preview #root { display: none !important; }
|
||
.printing-preview body { height: auto !important; }
|
||
.printing-preview .dialog-backdrop { position: static !important; display: block !important; padding: 0 !important; background: none !important; backdrop-filter: none !important; animation: none !important; }
|
||
.printing-preview .dialog { max-width: none !important; max-height: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; background: none !important; }
|
||
.printing-preview .dialog-head, .printing-preview .dialog-foot { display: none !important; }
|
||
.printing-preview .dialog-body { padding: 0 !important; overflow: visible !important; }
|
||
.printing-preview .dialog-body .code { max-height: none !important; overflow: visible !important; border: 0 !important; padding: 0 !important; }
|
||
.printing-preview .dialog-body .md-body { max-height: none !important; overflow: visible !important; }
|
||
.printing-preview .md-body pre { overflow: visible !important; white-space: pre-wrap !important; }
|
||
.printing-preview .dialog-body img { max-height: none !important; }
|
||
.print-only { display: block; }
|
||
body { background: #fff; color: #000; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
||
}
|
||
|
||
/* Addresses in a message carry a right-click menu (see mail/AddressMenu.tsx). */
|
||
.addr { cursor: context-menu; }
|
||
.message-details .addr:hover, .message-head .from .addr:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
|
||
|
||
/* ---- Date & time fields (custom pickers; see ui/datefield.tsx) ---- */
|
||
.dp-field { position: relative; display: inline-flex; align-items: center; width: 100%; }
|
||
.dp-field .input { width: 100%; padding-right: 30px; }
|
||
.dp-open { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; border-radius: var(--radius-sm); }
|
||
button.dp-open:hover { background: var(--bg-hover); color: var(--fg); }
|
||
button.dp-open:disabled { cursor: default; opacity: .5; }
|
||
.dp-field.w-auto { width: auto; }
|
||
.dp-field.w-auto .input { width: 10em; }
|
||
.dp-datetime { display: flex; gap: 6px; align-items: center; }
|
||
.dp-datetime .dp-field { flex: 1 1 auto; }
|
||
.dp-datetime .dp-time-field { flex: 0 0 8.5em; }
|
||
.dp-pop { padding: 10px; }
|
||
.dp-pop-wide { display: flex; }
|
||
.dp-split { display: flex; gap: 10px; align-items: stretch; }
|
||
.dp-cal { width: 15.5em; }
|
||
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 650; }
|
||
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
|
||
.dp-dow { color: var(--fg-faint); font-size: .8em; padding-bottom: 2px; }
|
||
.dp-day { height: 28px; border: 0; background: none; color: inherit; font: inherit; font-size: .9em; border-radius: 50%; cursor: pointer; }
|
||
.dp-day:hover { background: var(--bg-hover); }
|
||
.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||
.dp-day.other { color: var(--fg-faint); }
|
||
.dp-day.today { font-weight: 700; color: var(--accent); }
|
||
.dp-day.selected { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
|
||
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; }
|
||
.dp-times { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; max-height: 17em; min-width: 7.5em; border-left: 1px solid var(--border); padding-left: 8px; }
|
||
.dp-time { border: 0; background: none; color: inherit; font: inherit; font-size: .9em; text-align: left; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
|
||
.dp-time:hover { background: var(--bg-hover); }
|
||
.dp-time.selected { background: var(--accent); color: var(--accent-fg); }
|
||
@media (max-width: 480px) {
|
||
/* The spacer would take the whole of the first line and push the overflow
|
||
onto a line of its own; packed together they wrap as a group instead. */
|
||
.reply-box .reply-prompt .spacer { display: none; }
|
||
.dp-datetime { flex-wrap: wrap; }
|
||
.dp-datetime .dp-time-field { flex: 1 1 100%; }
|
||
.dp-split { flex-direction: column; }
|
||
.dp-times { flex-direction: row; overflow-x: auto; max-height: none; border-left: 0; border-top: 1px solid var(--border); padding: 6px 0 0; }
|
||
}
|
||
|
||
/* Files: the sidebar tree reuses .nav-item, so only the parts the mail tree has
|
||
no equivalent for are here. A row in the list is a drop target the same way a
|
||
folder in the tree is, and says so the same way. */
|
||
/* Shown only when more than one row is selected: with a single row the row
|
||
menu already says everything this would. */
|
||
.selection-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 12px 4px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
.selection-bar .grow { font-weight: 600; }
|
||
.files-table tbody tr.drop-target > td { background: var(--accent-soft); }
|
||
.files-table tbody tr.drop-target > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
|
||
.files-table tbody tr[draggable="true"] { cursor: grab; }
|
||
.files-table tbody tr[draggable="true"]:active { cursor: grabbing; }
|
||
.sidebar .nav-item[draggable="true"] { cursor: pointer; }
|
||
.f-name .faint { flex: none; }
|
||
|
||
/* The "Shared with me" header carries a refresh control, so it is a row rather
|
||
than the plain label the other sections use. */
|
||
.sidebar .nav-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.spin { animation: spin 1s linear infinite; }
|
||
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
|
||
|
||
/* The composer's To label doubles as the way into the address books. */
|
||
/* A button that reads as part of a sentence.
|
||
Unscoped: it was written for the composer's To/Cc labels and scoped to them,
|
||
which left every other caller -- the trusted-domain list in Privacy, and the
|
||
"Show original" link in the headers dialog -- rendering as default button
|
||
chrome in the middle of a line. `font` and `color` inherit, so it takes the
|
||
voice of whatever sentence it sits in. */
|
||
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
|
||
.link-btn:hover { color: var(--accent); }
|
||
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
|
||
|
||
/* The spam filter's own working, in the message details. */
|
||
.spam-summary { display: flex; flex-direction: column; gap: 6px; }
|
||
/* Capped, so a rule with no note does not fling its score to the far side of a
|
||
wide reading pane. */
|
||
.spam-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 30rem; }
|
||
.spam-rules li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; }
|
||
.spam-weight { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--fg-muted); }
|
||
.spam-weight.bad { color: var(--danger); }
|
||
.spam-weight.good { color: var(--success); }
|
||
|
||
/* The placeholder reference under a template's body. */
|
||
.placeholder-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
|
||
.placeholder-row { display: contents; }
|
||
.placeholder-list code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; padding: .1em .4em; white-space: nowrap; }
|
||
|
||
/* The senders whose remote images load without asking, in Privacy & safety. */
|
||
.trusted-senders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
|
||
|
||
/* The banner naming a sender from outside the organisation. */
|
||
.remote-banner.external-banner { background: var(--warn-soft); border-color: var(--warn); }
|
||
/*
|
||
* The signature banner's colour is the claim it is making, so the quiet tones
|
||
* are deliberate. "Signed by somebody new" is grey, because an unknown
|
||
* certificate that verifies against itself has established nothing worth a
|
||
* green tick; green is kept for the one case that earned it, a signer matching
|
||
* what was pinned the first time. Red is for a signer that changed.
|
||
*/
|
||
.remote-banner.signature-banner { align-items: flex-start; }
|
||
.remote-banner.signature-banner.good { background: var(--success-soft); color: var(--success); }
|
||
.remote-banner.signature-banner.warn { background: var(--warn-soft); color: var(--warn); }
|
||
.remote-banner.signature-banner.danger { background: var(--danger-soft); color: var(--danger); }
|
||
.remote-banner.signature-banner.quiet { background: var(--bg-sunken); color: var(--fg-muted); }
|
||
.remote-banner.signature-banner .sessions-table td { padding: 2px 8px 2px 0; }
|
||
.remote-banner.signature-banner .hint { opacity: .8; }
|
||
|
||
/* The line offering the whole folder once the page is selected. */
|
||
.list-hint.select-all-hint { background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
/* Light / dark, beside the palette cards. */
|
||
.mode-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
|
||
.mode-switch button { padding: 6px 14px; background: none; border: 0; color: var(--fg-muted); cursor: pointer; font: inherit; }
|
||
.mode-switch button.active { background: var(--accent-soft); color: var(--accent-soft-fg); }
|
||
.mode-switch button:disabled { opacity: .45; cursor: not-allowed; }
|
||
|
||
/* Dragging an event to another time or day. */
|
||
.ev-block.draggable, .ev-chip.draggable { cursor: grab; touch-action: none; }
|
||
.ev-block.dragging, .ev-chip.dragging { cursor: grabbing; opacity: .75; box-shadow: var(--shadow-2); z-index: 5; }
|
||
.ev-block { position: absolute; }
|
||
.ev-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
|
||
.ev-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; opacity: 0; }
|
||
.ev-block:hover .ev-resize::after { opacity: .5; }
|