/*
* Mailfilter 设计系统 —— 页面唯一的样式入口（由 pages/app/ui/shell.tsx 引用）。
*
* 层级从低到高：tokens < base < components < shell
* - base 只碰 html / body、焦点框、[hidden] 这类全局约定；不写 a、button、input 的外观——那是组件的事。
* - 新规则一律用 ui- 前缀的类名。颜色、阴影只能引用 tokens 层里的变量，不写字面量
* （test/ui-system.test.ts 会检查）。
* - 深色跟随系统， 可强制深/浅（偏好存在 localStorage mf-theme）。
*/
@layer tokens, base, components, shell;
/* ───────────────────────────── tokens ───────────────────────────── */
@layer tokens {
/* 默认色系（墨石）。其他色系在本层末尾，按 覆盖颜色 token；
[data-palette] 也可以加在任意元素上，让那一块按指定色系渲染（/ui-kit 的色系预览） */
:root,
[data-palette="graphite"] {
color-scheme: light;
/* 面与线：中性灰白，不带色相 */
--color-ground: #f4f4f5;
--color-surface: #ffffff;
--color-surface-2: #efeff1;
--color-surface-3: #e4e4e7;
--color-hover: #f6f6f7;
--color-line: #dfdfe3;
--color-line-strong: #c8c8ce;
/* 文字：墨黑三级 + 占位 */
--color-ink: #141416;
--color-ink-2: #3b3b41;
--color-muted: #65656d;
--color-faint: #8f8f97;
/* 主按钮与强调色都是墨色：验证码、选中与等待态靠浅灰底和字重区分，界面里只有状态色是彩色 */
--color-primary: #141416;
--color-primary-hover: #2c2c31;
--color-primary-ink: #ffffff;
--color-accent: #1f1f24;
--color-accent-hover: #000000;
--color-accent-ink: #ffffff;
--color-accent-soft: #ececef;
--color-accent-line: #c3c3ca;
/* 状态色：与强调色分开，不当装饰用 */
--color-ok: #2b7a45;
--color-ok-soft: #e3f3e8;
--color-warn: #8f5e0e;
--color-warn-soft: #faefd8;
--color-danger: #b0401b;
--color-danger-hover: #963515;
--color-danger-ink: #ffffff;
--color-danger-soft: #fbe6de;
--color-info: #3e54b5;
--color-info-soft: #e6eafa;
/* 邮件正文的底色：HTML 邮件按白底设计，深色模式下也保持白纸 */
--color-paper: #ffffff;
--color-overlay: rgba(20, 20, 22, 0.42);
--shadow-pop: 0 1px 2px rgba(20, 20, 22, 0.06), 0 12px 32px -8px rgba(20, 20, 22, 0.2);
--shadow-dialog: 0 2px 6px rgba(20, 20, 22, 0.08), 0 28px 64px -12px rgba(20, 20, 22, 0.32);
/* 字体：只用系统字体，页面不向第三方发任何请求 */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Noto Sans SC", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* 字号 6 级（另有键帽与验证码两个专用尺寸） */
--text-2xs: 11px;
--text-xs: 12px;
--text-sm: 13px;
--text-md: 14px;
--text-lg: 16px;
--text-xl: 20px;
--text-2xl: 28px;
--text-code: 32px;
--leading-tight: 1.3;
--leading-normal: 1.55;
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 600;
/* 间距 4px 基准 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* 圆角 3 级 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 999px;
--control-sm: 28px;
--control-md: 34px;
--control-lg: 40px;
--rail-width: 232px;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--z-rail: 40;
--z-menu: 50;
--z-toast: 600;
--z-skip: 1000;
}
/* 触屏：控件至少 36px 高，主要控件 40px 以上（手指比光标粗）。
[data-palette] 元素会重新声明基础 token，这里一并覆盖 */
@media (pointer: coarse) {
:root,
[data-palette] {
--control-sm: 36px;
--control-md: 40px;
--control-lg: 44px;
}
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]),
:root:not([data-theme="light"]) [data-palette="graphite"] {
color-scheme: dark;
--color-ground: #0c0c0e;
--color-surface: #161618;
--color-surface-2: #111113;
--color-surface-3: #212124;
--color-hover: #1b1b1e;
--color-line: #27272b;
--color-line-strong: #3a3a40;
--color-ink: #ececef;
--color-ink-2: #c2c2c8;
--color-muted: #919199;
--color-faint: #6c6c74;
--color-primary: #ececef;
--color-primary-hover: #ffffff;
--color-primary-ink: #0c0c0e;
--color-accent: #ececef;
--color-accent-hover: #ffffff;
--color-accent-ink: #111113;
--color-accent-soft: #27272b;
--color-accent-line: #46464d;
--color-ok: #6cc58e;
--color-ok-soft: #12281a;
--color-warn: #e2a94f;
--color-warn-soft: #2c2210;
--color-danger: #ee8b66;
--color-danger-hover: #f4a383;
--color-danger-ink: #1f0a03;
--color-danger-soft: #33180e;
--color-info: #9ba9f2;
--color-info-soft: #1b2142;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
:root[data-theme="dark"],
:root[data-theme="dark"] [data-palette="graphite"] {
color-scheme: dark;
--color-ground: #0c0c0e;
--color-surface: #161618;
--color-surface-2: #111113;
--color-surface-3: #212124;
--color-hover: #1b1b1e;
--color-line: #27272b;
--color-line-strong: #3a3a40;
--color-ink: #ececef;
--color-ink-2: #c2c2c8;
--color-muted: #919199;
--color-faint: #6c6c74;
--color-primary: #ececef;
--color-primary-hover: #ffffff;
--color-primary-ink: #0c0c0e;
--color-accent: #ececef;
--color-accent-hover: #ffffff;
--color-accent-ink: #111113;
--color-accent-soft: #27272b;
--color-accent-line: #46464d;
--color-ok: #6cc58e;
--color-ok-soft: #12281a;
--color-warn: #e2a94f;
--color-warn-soft: #2c2210;
--color-danger: #ee8b66;
--color-danger-hover: #f4a383;
--color-danger-ink: #1f0a03;
--color-danger-soft: #33180e;
--color-info: #9ba9f2;
--color-info-soft: #1b2142;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
/* 青瓷：冷灰白底，青绿只点在验证码、选中和等待上 */
[data-palette="teal"] {
--color-ground: #f3f6f5;
--color-surface: #ffffff;
--color-surface-2: #eef2f1;
--color-surface-3: #e4eae8;
--color-hover: #f5f8f7;
--color-line: #dce3e1;
--color-line-strong: #c4cfcc;
--color-ink: #131918;
--color-ink-2: #3a4644;
--color-muted: #63706c;
--color-faint: #8c9794;
--color-primary: #131918;
--color-primary-hover: #2b3432;
--color-primary-ink: #ffffff;
--color-accent: #1a7670;
--color-accent-hover: #15615c;
--color-accent-ink: #ffffff;
--color-accent-soft: #e1f2ef;
--color-accent-line: #a8d7d0;
--color-overlay: rgba(19, 25, 24, 0.42);
--shadow-pop: 0 1px 2px rgba(19, 25, 24, 0.06), 0 12px 32px -8px rgba(19, 25, 24, 0.2);
--shadow-dialog: 0 2px 6px rgba(19, 25, 24, 0.08), 0 28px 64px -12px rgba(19, 25, 24, 0.32);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"])[data-palette="teal"],
:root:not([data-theme="light"]) [data-palette="teal"] {
--color-ground: #0c1110;
--color-surface: #131918;
--color-surface-2: #0f1514;
--color-surface-3: #1d2524;
--color-hover: #182020;
--color-line: #242e2c;
--color-line-strong: #34403d;
--color-ink: #e5ebe9;
--color-ink-2: #bac5c2;
--color-muted: #8a9793;
--color-faint: #66726f;
--color-primary: #e5ebe9;
--color-primary-hover: #ffffff;
--color-primary-ink: #0c1110;
--color-accent: #4fc0b5;
--color-accent-hover: #6acdc3;
--color-accent-ink: #04201d;
--color-accent-soft: #11302d;
--color-accent-line: #1f4f4a;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
:root[data-theme="dark"][data-palette="teal"],
:root[data-theme="dark"] [data-palette="teal"] {
--color-ground: #0c1110;
--color-surface: #131918;
--color-surface-2: #0f1514;
--color-surface-3: #1d2524;
--color-hover: #182020;
--color-line: #242e2c;
--color-line-strong: #34403d;
--color-ink: #e5ebe9;
--color-ink-2: #bac5c2;
--color-muted: #8a9793;
--color-faint: #66726f;
--color-primary: #e5ebe9;
--color-primary-hover: #ffffff;
--color-primary-ink: #0c1110;
--color-accent: #4fc0b5;
--color-accent-hover: #6acdc3;
--color-accent-ink: #04201d;
--color-accent-soft: #11302d;
--color-accent-line: #1f4f4a;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
/* 海蓝：冷灰蓝底，强调色是沉稳的钴蓝；提示色改成紫，免得和强调色撞 */
[data-palette="ocean"] {
--color-ground: #f2f5f9;
--color-surface: #ffffff;
--color-surface-2: #ecf0f6;
--color-surface-3: #e1e7f0;
--color-hover: #f5f7fb;
--color-line: #d9e0ea;
--color-line-strong: #c1cbd9;
--color-ink: #111827;
--color-ink-2: #374254;
--color-muted: #5d687b;
--color-faint: #8791a2;
--color-primary: #111827;
--color-primary-hover: #273043;
--color-primary-ink: #ffffff;
--color-accent: #2457c5;
--color-accent-hover: #1d48a6;
--color-accent-ink: #ffffff;
--color-accent-soft: #e5edfc;
--color-accent-line: #adc3ef;
--color-info: #6a44bf;
--color-info-soft: #efe9fb;
--color-overlay: rgba(17, 24, 39, 0.42);
--shadow-pop: 0 1px 2px rgba(17, 24, 39, 0.06), 0 12px 32px -8px rgba(17, 24, 39, 0.2);
--shadow-dialog: 0 2px 6px rgba(17, 24, 39, 0.08), 0 28px 64px -12px rgba(17, 24, 39, 0.32);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"])[data-palette="ocean"],
:root:not([data-theme="light"]) [data-palette="ocean"] {
--color-ground: #0a0e16;
--color-surface: #111724;
--color-surface-2: #0d121c;
--color-surface-3: #1b2332;
--color-hover: #161d2b;
--color-line: #222b3b;
--color-line-strong: #323e55;
--color-ink: #e3e8f1;
--color-ink-2: #b6bfcf;
--color-muted: #8691a5;
--color-faint: #636e85;
--color-primary: #e3e8f1;
--color-primary-hover: #ffffff;
--color-primary-ink: #0a0e16;
--color-accent: #7ca8ff;
--color-accent-hover: #99bcff;
--color-accent-ink: #06142e;
--color-accent-soft: #13223e;
--color-accent-line: #253f6c;
--color-info: #b9a5f5;
--color-info-soft: #221a3e;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
:root[data-theme="dark"][data-palette="ocean"],
:root[data-theme="dark"] [data-palette="ocean"] {
--color-ground: #0a0e16;
--color-surface: #111724;
--color-surface-2: #0d121c;
--color-surface-3: #1b2332;
--color-hover: #161d2b;
--color-line: #222b3b;
--color-line-strong: #323e55;
--color-ink: #e3e8f1;
--color-ink-2: #b6bfcf;
--color-muted: #8691a5;
--color-faint: #636e85;
--color-primary: #e3e8f1;
--color-primary-hover: #ffffff;
--color-primary-ink: #0a0e16;
--color-accent: #7ca8ff;
--color-accent-hover: #99bcff;
--color-accent-ink: #06142e;
--color-accent-soft: #13223e;
--color-accent-line: #253f6c;
--color-info: #b9a5f5;
--color-info-soft: #221a3e;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
/* 紫藤：带一点紫的冷灰，强调色是蓝紫；提示色改成蓝 */
[data-palette="violet"] {
--color-ground: #f5f4f9;
--color-surface: #ffffff;
--color-surface-2: #efedf5;
--color-surface-3: #e5e2ee;
--color-hover: #f7f6fb;
--color-line: #dfdbe8;
--color-line-strong: #c7c1d6;
--color-ink: #17141f;
--color-ink-2: #3d3849;
--color-muted: #655f73;
--color-faint: #918a9e;
--color-primary: #17141f;
--color-primary-hover: #2e2939;
--color-primary-ink: #ffffff;
--color-accent: #6242c8;
--color-accent-hover: #5235ab;
--color-accent-ink: #ffffff;
--color-accent-soft: #efeafd;
--color-accent-line: #c6b8f2;
--color-info: #2a62b5;
--color-info-soft: #e5eefa;
--color-overlay: rgba(23, 20, 31, 0.42);
--shadow-pop: 0 1px 2px rgba(23, 20, 31, 0.06), 0 12px 32px -8px rgba(23, 20, 31, 0.2);
--shadow-dialog: 0 2px 6px rgba(23, 20, 31, 0.08), 0 28px 64px -12px rgba(23, 20, 31, 0.32);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"])[data-palette="violet"],
:root:not([data-theme="light"]) [data-palette="violet"] {
--color-ground: #0e0c14;
--color-surface: #17141f;
--color-surface-2: #12101a;
--color-surface-3: #221e2d;
--color-hover: #1c1926;
--color-line: #2a2536;
--color-line-strong: #3b3549;
--color-ink: #ebe8f2;
--color-ink-2: #c1bccd;
--color-muted: #948ea2;
--color-faint: #6e687c;
--color-primary: #ebe8f2;
--color-primary-hover: #ffffff;
--color-primary-ink: #0e0c14;
--color-accent: #ae98ff;
--color-accent-hover: #c3b2ff;
--color-accent-ink: #160a3a;
--color-accent-soft: #231a40;
--color-accent-line: #3e306f;
--color-info: #8fb6f2;
--color-info-soft: #152338;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
:root[data-theme="dark"][data-palette="violet"],
:root[data-theme="dark"] [data-palette="violet"] {
--color-ground: #0e0c14;
--color-surface: #17141f;
--color-surface-2: #12101a;
--color-surface-3: #221e2d;
--color-hover: #1c1926;
--color-line: #2a2536;
--color-line-strong: #3b3549;
--color-ink: #ebe8f2;
--color-ink-2: #c1bccd;
--color-muted: #948ea2;
--color-faint: #6e687c;
--color-primary: #ebe8f2;
--color-primary-hover: #ffffff;
--color-primary-ink: #0e0c14;
--color-accent: #ae98ff;
--color-accent-hover: #c3b2ff;
--color-accent-ink: #160a3a;
--color-accent-soft: #231a40;
--color-accent-line: #3e306f;
--color-info: #8fb6f2;
--color-info-soft: #152338;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
/* 橘光：暖灰底配橙色强调；危险色改成玫红、警告改成赭黄，免得和橙色混淆 */
[data-palette="ember"] {
--color-ground: #f6f4f1;
--color-surface: #ffffff;
--color-surface-2: #f1eeea;
--color-surface-3: #e7e2dc;
--color-hover: #f8f6f3;
--color-line: #e2ddd6;
--color-line-strong: #cbc3b9;
--color-ink: #1c1814;
--color-ink-2: #433b34;
--color-muted: #6c645b;
--color-faint: #978e84;
--color-primary: #1c1814;
--color-primary-hover: #352e28;
--color-primary-ink: #ffffff;
--color-accent: #b4470d;
--color-accent-hover: #963a0a;
--color-accent-ink: #ffffff;
--color-accent-soft: #fcece0;
--color-accent-line: #f0c2a0;
--color-warn: #7a6300;
--color-warn-soft: #f6efcf;
--color-danger: #b3263f;
--color-danger-hover: #961d33;
--color-danger-ink: #ffffff;
--color-danger-soft: #fbe4e8;
--color-overlay: rgba(28, 24, 20, 0.42);
--shadow-pop: 0 1px 2px rgba(28, 24, 20, 0.06), 0 12px 32px -8px rgba(28, 24, 20, 0.2);
--shadow-dialog: 0 2px 6px rgba(28, 24, 20, 0.08), 0 28px 64px -12px rgba(28, 24, 20, 0.32);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"])[data-palette="ember"],
:root:not([data-theme="light"]) [data-palette="ember"] {
--color-ground: #100e0c;
--color-surface: #1a1714;
--color-surface-2: #14120f;
--color-surface-3: #26221e;
--color-hover: #201c18;
--color-line: #2d2823;
--color-line-strong: #403931;
--color-ink: #eee9e3;
--color-ink-2: #c9c1b7;
--color-muted: #9b9288;
--color-faint: #746c63;
--color-primary: #eee9e3;
--color-primary-hover: #ffffff;
--color-primary-ink: #100e0c;
--color-accent: #f6a263;
--color-accent-hover: #f9b884;
--color-accent-ink: #2a1002;
--color-accent-soft: #33200f;
--color-accent-line: #5d3715;
--color-warn: #d8c056;
--color-warn-soft: #28220b;
--color-danger: #f0808f;
--color-danger-hover: #f59ba7;
--color-danger-ink: #2a0209;
--color-danger-soft: #36141a;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
:root[data-theme="dark"][data-palette="ember"],
:root[data-theme="dark"] [data-palette="ember"] {
--color-ground: #100e0c;
--color-surface: #1a1714;
--color-surface-2: #14120f;
--color-surface-3: #26221e;
--color-hover: #201c18;
--color-line: #2d2823;
--color-line-strong: #403931;
--color-ink: #eee9e3;
--color-ink-2: #c9c1b7;
--color-muted: #9b9288;
--color-faint: #746c63;
--color-primary: #eee9e3;
--color-primary-hover: #ffffff;
--color-primary-ink: #100e0c;
--color-accent: #f6a263;
--color-accent-hover: #f9b884;
--color-accent-ink: #2a1002;
--color-accent-soft: #33200f;
--color-accent-line: #5d3715;
--color-warn: #d8c056;
--color-warn-soft: #28220b;
--color-danger: #f0808f;
--color-danger-hover: #f59ba7;
--color-danger-ink: #2a0209;
--color-danger-soft: #36141a;
--color-overlay: rgba(0, 0, 0, 0.6);
--shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -10px rgba(0, 0, 0, 0.65);
--shadow-dialog: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 72px -12px rgba(0, 0, 0, 0.75);
}
}
/* ───────────────────────────── base ───────────────────────────── */
@layer base {
html {
background: var(--color-ground);
}
body {
margin: 0;
background: var(--color-ground);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* 去掉移动端双击缩放的点击延迟 */
:where(a, button, input, select, summary, label) {
touch-action: manipulation;
}
/* ui- 组件多数自带 display，hidden 属性必须压过它们 */
[hidden] {
display: none !important;
}
/* 站内跳转的淡入淡出（） */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 160ms;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
}
/* ───────────────────────────── components ───────────────────────────── */
@layer components {
:where([class^="ui-"], [class*=" ui-"]) {
box-sizing: border-box;
}
.ui-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ui-skip {
position: fixed;
top: calc(-1 * var(--space-12));
left: var(--space-4);
z-index: var(--z-skip);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--color-primary-ink);
font-weight: var(--weight-medium);
text-decoration: none;
}
.ui-skip:focus {
top: var(--space-3);
}
:where([class^="ui-"], [class*=" ui-"]):focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.ui-icon {
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
/* 键帽 */
.ui-kbd {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding-inline: var(--space-1);
border: 1px solid var(--color-line);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-muted);
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
line-height: 1;
}
/* 按钮：变体只改几个局部变量 */
.ui-btn {
--btn-bg: var(--color-surface);
--btn-bg-hover: var(--color-hover);
--btn-fg: var(--color-ink);
--btn-line: var(--color-line-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--control-md);
padding-inline: var(--space-3);
border: 1px solid var(--btn-line);
border-radius: var(--radius-md);
background: var(--btn-bg);
color: var(--btn-fg);
font: inherit;
font-size: var(--text-md);
font-weight: var(--weight-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ui-btn:hover {
background: var(--btn-bg-hover);
}
.ui-btn:active {
translate: 0 0.5px;
}
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.ui-btn--primary {
--btn-bg: var(--color-primary);
--btn-bg-hover: var(--color-primary-hover);
--btn-fg: var(--color-primary-ink);
--btn-line: var(--color-primary);
}
.ui-btn--accent {
--btn-bg: var(--color-accent);
--btn-bg-hover: var(--color-accent-hover);
--btn-fg: var(--color-accent-ink);
--btn-line: var(--color-accent);
}
.ui-btn--danger {
--btn-bg: var(--color-danger);
--btn-bg-hover: var(--color-danger-hover);
--btn-fg: var(--color-danger-ink);
--btn-line: var(--color-danger);
}
.ui-btn--ghost {
--btn-bg: transparent;
--btn-bg-hover: var(--color-surface-3);
--btn-fg: var(--color-ink-2);
--btn-line: transparent;
}
.ui-btn--sm {
gap: 6px;
height: var(--control-sm);
padding-inline: var(--space-2);
font-size: var(--text-sm);
}
.ui-btn--lg {
height: var(--control-lg);
padding-inline: var(--space-4);
}
.ui-btn--block {
width: 100%;
}
/* 当前页：和选中的导航项同一套“你在这里”样式，不再是可点的主按钮 */
.ui-btn[aria-current="page"] {
--btn-bg: var(--color-surface);
--btn-bg-hover: var(--color-surface);
--btn-fg: var(--color-ink);
--btn-line: var(--color-line);
cursor: default;
}
.ui-btn[aria-current="page"] .ui-icon {
color: var(--color-accent);
}
.ui-btn__kbd {
margin-left: var(--space-1);
border-color: color-mix(in srgb, currentColor 30%, transparent);
background: transparent;
color: inherit;
opacity: 0.8;
}
.ui-icon-btn {
display: inline-grid;
place-items: center;
flex: none;
width: var(--control-md);
height: var(--control-md);
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-muted);
font: inherit;
cursor: pointer;
transition:
background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ui-icon-btn:hover {
background: var(--color-surface-3);
color: var(--color-ink);
}
.ui-icon-btn--sm {
width: var(--control-sm);
height: var(--control-sm);
}
.ui-icon-btn--outline {
border-color: var(--color-line-strong);
background: var(--color-surface);
}
.ui-icon-btn.is-copied,
.ui-otp.is-copied {
color: var(--color-ok);
}
/* 徽标与标签 */
.ui-badge {
--badge-bg: var(--color-surface-3);
--badge-fg: var(--color-ink-2);
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 20px;
padding-inline: 7px;
border-radius: var(--radius-full);
background: var(--badge-bg);
color: var(--badge-fg);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
}
.ui-badge--accent {
--badge-bg: var(--color-accent-soft);
--badge-fg: var(--color-accent);
}
.ui-badge--ok {
--badge-bg: var(--color-ok-soft);
--badge-fg: var(--color-ok);
}
.ui-badge--warn {
--badge-bg: var(--color-warn-soft);
--badge-fg: var(--color-warn);
}
.ui-badge--danger {
--badge-bg: var(--color-danger-soft);
--badge-fg: var(--color-danger);
}
.ui-badge--info {
--badge-bg: var(--color-info-soft);
--badge-fg: var(--color-info);
}
.ui-tag {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding-inline: var(--space-2);
border: 1px solid var(--color-line);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-ink-2);
font-size: var(--text-xs);
white-space: nowrap;
}
.ui-tag__dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tag-color, var(--color-faint));
}
/* 地址：前缀加粗、域名减弱，一律等宽 */
.ui-address {
display: inline-block;
max-width: 100%;
overflow: hidden;
font-family: var(--font-mono);
font-size: var(--text-sm);
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.ui-address b {
color: var(--color-ink);
font-weight: var(--weight-bold);
}
.ui-address span {
color: var(--color-muted);
}
.ui-address--lg {
font-size: var(--text-lg);
}
.ui-copyable {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-width: 0;
max-width: 100%;
}
/* 验证码：唯一大量使用强调色的地方 */
.ui-otp {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding-inline: 7px;
border: 1px solid var(--color-accent-line);
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
}
.ui-otp:hover {
background: color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-accent-line));
}
.ui-otp .ui-icon {
width: 12px;
height: 12px;
}
/* 验证码卡片：按钮放在验证码右侧，放不下时换到下一行 */
.ui-code-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-4);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-accent-line);
border-radius: var(--radius-lg);
background: var(--color-accent-soft);
}
.ui-code-card__label,
.ui-code-card__source {
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-code-card__value {
display: flex;
gap: 0.45em;
color: var(--color-ink);
font-family: var(--font-mono);
font-size: var(--text-code);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: 0.1em;
line-height: 1.15;
}
.ui-code-card__main {
display: grid;
flex: 1 1 auto;
gap: var(--space-1);
}
.ui-code-card > .ui-btn {
flex: none;
}
.ui-code-card__source {
flex-basis: 100%;
}
/* 表单 */
.ui-field {
display: grid;
align-content: start;
gap: 6px;
min-width: 0;
}
.ui-label {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: 0;
color: var(--color-ink);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.ui-label__opt {
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: var(--weight-regular);
}
.ui-input,
.ui-select,
.ui-textarea {
box-sizing: border-box;
width: 100%;
height: var(--control-md);
margin: 0;
padding: 0 var(--space-3);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: none;
color: var(--color-ink);
font: inherit;
font-size: var(--text-md);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.ui-textarea {
height: auto;
min-height: 88px;
padding-block: var(--space-2);
line-height: var(--leading-normal);
resize: vertical;
}
.ui-input::placeholder,
.ui-textarea::placeholder {
color: var(--color-faint);
}
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.ui-input--mono {
font-family: var(--font-mono);
}
.ui-input--lg {
height: var(--control-lg);
}
.ui-textarea.ui-input--mono {
font-size: var(--text-sm);
word-break: break-all;
}
/* iOS / iPadOS 在字号小于 16px 的输入框聚焦时会整页放大（iPad 宽度超过 600px，要按触屏判断） */
@media (max-width: 600px), (pointer: coarse) {
.ui-input,
.ui-select,
.ui-textarea,
.ui-textarea.ui-input--mono,
.ui-tagpicker__search {
font-size: var(--text-lg);
}
}
.ui-field--error :is(.ui-input, .ui-select, .ui-textarea),
.ui-input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.ui-field--error :is(.ui-input, .ui-select, .ui-textarea):focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
}
/* 提示里常夹着行内代码或链接，保持普通文本流（不用 flex，否则每段文字都会变成独立的列） */
.ui-hint,
.ui-error {
margin: 0;
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-error {
color: var(--color-danger);
}
.ui-error .ui-icon {
width: 14px;
height: 14px;
margin-right: var(--space-1);
vertical-align: -2px;
}
.ui-input-group {
display: flex;
min-width: 0;
}
.ui-input-group > .ui-input {
flex: 1;
min-width: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.ui-input-group__addon {
display: inline-flex;
align-items: center;
padding-inline: var(--space-3);
border: 1px solid var(--color-line-strong);
border-left: 0;
border-start-end-radius: var(--radius-md);
border-end-end-radius: var(--radius-md);
background: var(--color-surface-2);
color: var(--color-muted);
font-family: var(--font-mono);
font-size: var(--text-sm);
white-space: nowrap;
}
.ui-select-wrap {
position: relative;
display: block;
}
.ui-select {
padding-right: var(--space-8);
appearance: none;
cursor: pointer;
}
.ui-select-wrap > .ui-icon {
position: absolute;
top: 50%;
right: var(--space-3);
color: var(--color-muted);
translate: 0 -50%;
pointer-events: none;
}
/* 页面骨架 */
.ui-page {
display: grid;
gap: var(--space-6);
max-width: 1120px;
padding: var(--space-8) var(--space-8) var(--space-12);
}
.ui-page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.ui-page-head__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.ui-title {
margin: 0;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
line-height: var(--leading-tight);
text-wrap: balance;
}
.ui-subtitle {
margin: var(--space-1) 0 0;
color: var(--color-muted);
font-size: var(--text-md);
}
.ui-panel {
min-width: 0;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.ui-panel__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.ui-panel__title {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
}
.ui-panel__desc {
margin: 2px 0 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-panel__body {
padding: var(--space-5);
}
.ui-panel--flush > .ui-panel__body {
padding: 0;
}
/* 邮箱列表行：同一套结构两种排法。默认是卡片（地址 | 时间 / 发件人·主题 | 邮件数 / 标签）；
放进 .ui-list--table 且容器够宽时，按列对齐成表格。第一行 .ui-row__line 用 display: contents 把子项交给网格。 */
.ui-list {
display: grid;
container: mailboxes / inline-size;
}
.ui-row,
.ui-list__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"addr time"
"meta count"
"tags tags";
align-items: center;
gap: 2px var(--space-3);
padding: var(--space-3) var(--space-4);
}
.ui-row {
position: relative;
border-top: 1px solid var(--color-line);
}
.ui-row--select,
.ui-list__head {
grid-template-columns: 16px minmax(0, 1fr) auto;
grid-template-areas:
"check addr time"
". meta count"
". tags tags";
}
.ui-row:first-child {
border-top: 0;
}
.ui-row:hover {
background: var(--color-hover);
}
.ui-row:has(.ui-row__check:checked) {
background: var(--color-accent-soft);
}
.ui-row[data-current="true"] {
background: var(--color-accent-soft);
}
.ui-row[data-current="true"]::before {
content: "";
position: absolute;
top: var(--space-2);
bottom: var(--space-2);
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--color-accent);
}
/* 整行的焦点框画在行上，而不是地址那一小块 */
.ui-row:has(.ui-row__link:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.ui-row__line {
display: contents;
}
.ui-row__check {
grid-area: check;
position: relative;
z-index: 1;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--color-accent);
cursor: pointer;
}
.ui-row__addr {
grid-area: addr;
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.ui-row__link {
min-width: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.ui-row__link:focus-visible {
outline: none;
}
.ui-row__link::after {
content: "";
position: absolute;
inset: 0;
}
.ui-row.is-deleted .ui-address b {
color: var(--color-muted);
}
.ui-row__tags {
grid-area: tags;
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
min-width: 0;
}
.ui-row__count,
.ui-row__time {
justify-self: end;
color: var(--color-muted);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ui-row__count {
grid-area: count;
}
.ui-row__time {
grid-area: time;
}
.ui-list__head > .ui-row__meta {
grid-area: meta;
}
.ui-row > .ui-row__meta {
grid-area: meta;
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-row__subject {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-row__subject b {
color: var(--color-ink-2);
font-weight: var(--weight-medium);
}
.ui-row.is-empty .ui-row__subject {
color: var(--color-faint);
}
/* 表头：窄屏只留全选框；宽屏与行共用同一套列 */
.ui-list__head {
padding-block: var(--space-2);
border-bottom: 1px solid var(--color-line);
background: var(--color-surface-2);
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.ui-list__head > :is(.ui-row__tags, .ui-row__meta, .ui-row__count, .ui-row__time) {
display: none;
}
@container mailboxes (min-width: 760px) {
.ui-list--table .ui-row,
.ui-list--table .ui-list__head {
grid-template-columns: 16px minmax(180px, 1.1fr) minmax(0, 0.9fr) minmax(0, 2fr) 52px 76px;
grid-template-areas: "check addr tags meta count time";
column-gap: var(--space-4);
}
.ui-list--table .ui-row {
min-height: 48px;
padding-block: var(--space-2);
}
.ui-list--table .ui-row__tags {
flex-wrap: nowrap;
overflow: hidden;
}
.ui-list--table .ui-list__head > :is(.ui-row__tags, .ui-row__meta, .ui-row__count, .ui-row__time) {
display: block;
}
}
/* 窄容器（手机）：标签收成色点并进地址行，每行固定两行高，一屏能多看几个邮箱；标签名在抽屉里看 */
@container mailboxes (max-width: 520px) {
.ui-row {
grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
grid-template-areas:
"addr tags time"
"meta meta count";
padding-block: 10px;
}
.ui-row--select {
grid-template-columns: 16px minmax(0, max-content) minmax(0, 1fr) auto;
grid-template-areas:
"check addr tags time"
". meta meta count";
}
.ui-row__tags {
flex-wrap: nowrap;
gap: 3px;
overflow: hidden;
}
.ui-row__tags > .ui-tag {
gap: 0;
height: auto;
padding: 0;
border: 0;
background: none;
font-size: 0;
}
.ui-row__tags > .ui-tag:not(:has(.ui-tag__dot)) {
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-row__tags .ui-tag__dot {
width: 8px;
height: 8px;
}
}
.ui-pulse {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
animation: ui-pulse 1.8s var(--ease-out) infinite;
}
@keyframes ui-pulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent);
}
100% {
box-shadow: 0 0 0 9px transparent;
}
}
/* 反馈 */
.ui-notice {
--notice-fg: var(--color-info);
--notice-bg: var(--color-info-soft);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--notice-bg);
color: var(--color-ink);
font-size: var(--text-sm);
}
.ui-notice > .ui-icon {
margin-top: 2px;
color: var(--notice-fg);
}
.ui-notice p {
margin: 0;
}
.ui-notice__title {
font-weight: var(--weight-bold);
}
.ui-notice--ok {
--notice-fg: var(--color-ok);
--notice-bg: var(--color-ok-soft);
}
.ui-notice--warn {
--notice-fg: var(--color-warn);
--notice-bg: var(--color-warn-soft);
}
.ui-notice--danger {
--notice-fg: var(--color-danger);
--notice-bg: var(--color-danger-soft);
}
.ui-empty {
display: grid;
justify-items: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-6);
color: var(--color-muted);
text-align: center;
}
.ui-empty__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-2);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface-2);
}
.ui-empty__title {
margin: 0;
color: var(--color-ink);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.ui-empty__body {
max-width: 40ch;
margin: 0;
font-size: var(--text-sm);
}
.ui-empty__action {
margin-top: var(--space-3);
}
.ui-skeleton {
display: grid;
gap: var(--space-2);
}
.ui-skeleton > span {
height: 12px;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, var(--color-surface-3), var(--color-surface-2), var(--color-surface-3));
background-size: 200% 100%;
animation: ui-shimmer 1.4s linear infinite;
}
.ui-skeleton > span:nth-child(3n + 2) {
width: 72%;
}
.ui-skeleton > span:nth-child(3n) {
width: 48%;
}
@keyframes ui-shimmer {
to {
background-position: -200% 0;
}
}
.ui-toast-region {
position: fixed;
bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
left: 50%;
z-index: var(--z-toast);
display: grid;
justify-items: center;
gap: var(--space-2);
translate: -50% 0;
pointer-events: none;
}
.ui-toast {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-primary-ink);
box-shadow: var(--shadow-pop);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
pointer-events: auto;
animation: ui-rise var(--duration-base) var(--ease-out);
}
.ui-toast--danger {
background: var(--color-danger);
color: var(--color-danger-ink);
}
/* 模态对话框打开时外层是 inert 的，提示临时挂进对话框里 */
.ui-toast--in-dialog {
position: fixed;
right: 0;
bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
left: 0;
width: max-content;
max-width: calc(100vw - var(--space-8));
margin-inline: auto;
}
.ui-dialog {
box-sizing: border-box;
width: min(480px, calc(100vw - var(--space-8)));
max-height: calc(100dvh - var(--space-12));
padding: 0;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-dialog);
}
.ui-dialog[open] {
display: flex;
flex-direction: column;
animation: ui-rise var(--duration-base) var(--ease-out);
}
.ui-dialog--wide {
width: min(560px, calc(100vw - var(--space-8)));
}
.ui-dialog--confirm {
width: min(400px, calc(100vw - var(--space-8)));
}
.ui-dialog::backdrop {
background: var(--color-overlay);
}
.ui-dialog__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: 0;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.ui-dialog__title {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.ui-dialog__head,
.ui-dialog__foot {
flex: none;
}
.ui-dialog__form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
margin: 0;
}
.ui-dialog__body {
display: grid;
flex: 1 1 auto;
align-content: start;
gap: var(--space-4);
min-height: 0;
padding: var(--space-5);
overflow-y: auto;
}
.ui-dialog__group {
display: grid;
gap: var(--space-4);
}
.ui-dialog__text {
margin: 0;
color: var(--color-ink-2);
font-size: var(--text-sm);
}
.ui-dialog--confirm .ui-dialog__body {
gap: var(--space-2);
padding-top: var(--space-6);
}
.ui-dialog__foot {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-line);
}
.ui-dialog--confirm .ui-dialog__foot {
padding-top: 0;
border-top: 0;
}
@keyframes ui-rise {
from {
opacity: 0;
translate: 0 6px;
}
}
.ui-segmented {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 2px;
padding: 2px;
border-radius: var(--radius-md);
background: var(--color-surface-3);
}
.ui-segmented > :is(button, a) {
display: inline-grid;
place-items: center;
height: 26px;
padding: 0;
border: 0;
border-radius: calc(var(--radius-md) - 2px);
background: transparent;
color: var(--color-muted);
font: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.ui-segmented > :is(button, a):hover {
color: var(--color-ink);
}
/* 内容宽度的分段（文字选项），不像外观切换那样等分铺满 */
@media (pointer: coarse) {
.ui-segmented > :is(button, a) {
height: 32px;
}
}
.ui-segmented--inline {
display: inline-grid;
}
.ui-segmented--inline > :is(button, a) {
padding-inline: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.ui-segmented > :is([aria-checked="true"], [aria-pressed="true"], [aria-current="page"]) {
background: var(--color-surface);
color: var(--color-ink);
box-shadow: 0 0 0 1px var(--color-line);
}
@media (prefers-reduced-motion: reduce) {
.ui-pulse,
.ui-skeleton > span,
.ui-toast,
.ui-dialog[open] {
animation: none;
}
.ui-btn,
.ui-icon-btn,
.ui-otp,
.ui-input,
.ui-select,
.ui-textarea {
transition: none;
}
}
}
/* ───────────────────────────── shell：应用外壳 ───────────────────────────── */
@layer shell {
.ui-app {
display: grid;
grid-template-columns: var(--rail-width) minmax(0, 1fr);
min-height: 100dvh;
}
.ui-rail {
position: sticky;
top: 0;
z-index: var(--z-rail);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-1);
height: 100dvh;
padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
border-right: 1px solid var(--color-line);
background: var(--color-surface-2);
}
.ui-brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
color: var(--color-ink);
font-size: var(--text-md);
font-weight: var(--weight-bold);
letter-spacing: -0.005em;
text-decoration: none;
}
.ui-brand img {
border-radius: 6px;
}
.ui-rail__new {
width: 100%;
margin-block: var(--space-3) var(--space-4);
}
.ui-nav {
display: grid;
gap: 2px;
}
.ui-nav__item {
display: flex;
align-items: center;
gap: var(--space-3);
height: var(--control-md);
padding-inline: var(--space-3);
border-radius: var(--radius-md);
color: var(--color-ink-2);
font-weight: var(--weight-medium);
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ui-nav__item .ui-icon {
color: var(--color-muted);
}
.ui-nav__item:hover {
background: var(--color-surface-3);
color: var(--color-ink);
}
.ui-nav__item[aria-current="page"] {
background: var(--color-surface);
color: var(--color-ink);
box-shadow: 0 0 0 1px var(--color-line);
}
.ui-nav__item[aria-current="page"] .ui-icon {
color: var(--color-accent);
}
.ui-rail__foot {
display: grid;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
}
/* 深浅切换 + 色系菜单 */
.ui-rail__appearance {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.ui-account {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
padding-left: var(--space-1);
}
.ui-avatar {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border: 1px solid var(--color-line);
border-radius: 50%;
background: var(--color-surface);
color: var(--color-ink-2);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
}
.ui-account__name {
flex: 1;
min-width: 0;
overflow: hidden;
font-weight: var(--weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-account__logout {
display: contents;
}
.ui-main {
min-width: 0;
background: var(--color-surface);
}
/* 未登录页 */
.ui-auth {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100dvh;
}
.ui-auth__bar {
display: flex;
align-items: center;
padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-6) var(--space-2);
}
.ui-auth__body {
display: flex;
flex-direction: column;
}
/* 窄屏：导航收成顶部两行——品牌 + 操作 / 横向导航 */
@media (max-width: 900px) {
.ui-app {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
.ui-rail {
position: static;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
height: auto;
padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) 0;
overflow: visible;
border-right: 0;
border-bottom: 1px solid var(--color-line);
}
.ui-brand {
margin-right: auto;
padding-inline: 0;
}
/* 320px 宽时顶栏放不下品牌名，只留图标（名字仍给读屏软件） */
@media (max-width: 359px) {
.ui-rail .ui-brand > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.ui-rail__new {
order: 2;
width: auto;
margin: 0;
}
/* 已经在创建页时，页面标题和提交按钮都叫“创建邮箱”，顶栏不再重复 */
.ui-rail__new[aria-current="page"] {
display: none;
}
.ui-rail__foot {
order: 3;
display: flex;
margin: 0;
padding: 0;
border: 0;
}
.ui-rail__foot .ui-segmented,
.ui-account .ui-avatar,
.ui-account .ui-badge,
.ui-account__name {
display: none;
}
/* 顶栏里色系菜单只留图标 */
.ui-rail__appearance .ui-menu > summary > .ui-btn__label,
.ui-rail__appearance .ui-menu > summary > .ui-icon:last-child {
display: none;
}
.ui-nav {
order: 4;
display: flex;
flex-basis: 100%;
gap: var(--space-4);
margin-inline: calc(-1 * var(--space-4));
padding-inline: var(--space-4);
overflow-x: auto;
scrollbar-width: none;
}
.ui-nav__item {
gap: 6px;
height: 42px;
padding-inline: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
}
.ui-nav__item:hover {
background: none;
}
.ui-nav__item[aria-current="page"] {
border-bottom-color: var(--color-ink);
background: none;
box-shadow: none;
}
.ui-page {
padding: var(--space-5) var(--space-4) var(--space-10);
}
.ui-auth__bar {
padding-inline: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-nav__item {
transition: none;
}
}
}
/* ───────────────────────────── 页面构件 ───────────────────────────── */
@layer components {
.ui-link {
color: var(--color-accent);
font-weight: var(--weight-medium);
text-decoration: underline;
text-decoration-color: var(--color-accent-line);
text-underline-offset: 3px;
}
.ui-link:hover {
color: var(--color-accent-hover);
text-decoration-color: currentColor;
}
.ui-form {
display: grid;
gap: var(--space-5);
}
/* 面包屑 */
.ui-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-crumbs a {
min-width: 0;
color: inherit;
text-decoration: none;
}
.ui-crumbs a:hover {
color: var(--color-ink);
}
.ui-crumbs a:hover .ui-address span {
color: var(--color-ink-2);
}
.ui-crumbs .ui-icon {
width: 14px;
height: 14px;
color: var(--color-faint);
}
/* 键值信息 */
.ui-meta {
display: grid;
gap: var(--space-2);
margin: 0;
font-size: var(--text-sm);
}
.ui-meta__row {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--space-3);
}
.ui-meta dt {
color: var(--color-muted);
}
.ui-meta dd {
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
}
.ui-sender {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
}
.ui-sender b {
color: var(--color-ink);
font-weight: var(--weight-bold);
}
.ui-sender__addr {
color: var(--color-muted);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
/* 阅读邮件 */
.ui-page--reading {
max-width: 960px;
}
.ui-mail-head {
display: grid;
gap: var(--space-4);
}
.ui-title--mail {
font-size: var(--text-xl);
overflow-wrap: anywhere;
}
.ui-mail-body {
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.ui-mail-body__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
border-bottom: 1px solid var(--color-line);
background: var(--color-surface-2);
}
.ui-mail-body__note {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-mail-body__note .ui-icon {
width: 14px;
height: 14px;
color: var(--color-ok);
}
.ui-mail-frame {
display: block;
width: 100%;
height: min(72vh, 880px);
min-height: 420px;
border: 0;
background: var(--color-paper);
}
.ui-mail-text {
margin: 0;
padding: var(--space-5);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-normal);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* 登录 / 注册 */
.ui-auth__main {
display: grid;
flex: 1;
place-items: center;
padding: var(--space-6) var(--space-4) calc(var(--space-12) * 2);
}
.ui-auth-card {
display: grid;
gap: var(--space-6);
width: min(400px, 100%);
padding: var(--space-8);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-pop);
}
.ui-auth-card__head {
display: grid;
gap: var(--space-1);
}
.ui-auth-card__head .ui-subtitle {
margin: 0;
}
.ui-auth-card__alt {
margin: 0;
color: var(--color-muted);
font-size: var(--text-sm);
text-align: center;
}
@media (max-width: 600px) {
.ui-auth__main {
place-items: start center;
padding-top: var(--space-4);
}
.ui-auth-card {
padding: var(--space-6) var(--space-5);
box-shadow: none;
}
.ui-mail-body__note {
display: none;
}
.ui-mail-body__bar {
justify-content: flex-end;
}
}
}
/* ───────────────────────────── 页面构件：工具条、菜单、选择器、文档 ───────────────────────────── */
@layer components {
.ui-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
}
/* 一行摘要数字；换行时不留悬空的分隔符，所以只用间距分开 */
.ui-summary {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-5);
margin: 0;
color: var(--color-muted);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.ui-check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-ink-2);
font-size: var(--text-sm);
cursor: pointer;
user-select: none;
}
.ui-check > input,
.ui-checklist input[type="checkbox"] {
flex: none;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--color-accent);
cursor: pointer;
}
.ui-inline-code {
padding: 1px 5px;
white-space: nowrap;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-ink-2);
font-family: var(--font-mono);
font-size: max(var(--text-2xs), 0.9em);
}
/* 下拉菜单： */
.ui-menu {
position: relative;
display: inline-block;
}
.ui-menu > summary {
list-style: none;
}
.ui-menu > summary::-webkit-details-marker {
display: none;
}
.ui-menu > summary .ui-icon:last-child {
transition: rotate var(--duration-fast) var(--ease-out);
}
.ui-menu[open] > summary {
--btn-bg: var(--color-surface-3);
}
.ui-menu[open] > summary .ui-icon:last-child {
rotate: 180deg;
}
.ui-menu__panel {
position: absolute;
top: calc(100% + var(--space-1));
right: 0;
z-index: var(--z-menu);
display: grid;
min-width: 168px;
padding: var(--space-1);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-pop);
animation: ui-rise var(--duration-fast) var(--ease-out);
}
.ui-menu--up > .ui-menu__panel {
top: auto;
bottom: calc(100% + var(--space-1));
}
.ui-menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
height: 32px;
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-ink);
font: inherit;
font-size: var(--text-sm);
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
/* 色系色块：元素自己挂 data-palette，左上是那个色系的底色、右下是强调色 */
.ui-swatch {
flex: none;
width: 14px;
height: 14px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-surface-3) 50%, var(--color-accent) 50%);
}
.ui-menu__item:hover {
background: var(--color-hover);
}
.ui-menu__item--danger {
color: var(--color-danger);
}
.ui-menu__item--danger:hover {
background: var(--color-danger-soft);
}
/* 面板左对齐、限高滚动、分组线、计数、当前筛选、单选对勾 */
.ui-menu__panel--start {
right: auto;
left: 0;
}
.ui-menu__panel--scroll {
min-width: 232px;
max-height: min(60vh, 440px);
overflow-y: auto;
overscroll-behavior: contain;
}
.ui-menu__sep {
height: 0;
margin: var(--space-1) 0;
border: 0;
border-top: 1px solid var(--color-line);
}
.ui-menu__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-menu__count {
color: var(--color-muted);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
.ui-menu__item[aria-current="true"] {
background: var(--color-accent-soft);
color: var(--color-accent);
font-weight: var(--weight-medium);
}
.ui-menu__item[role="menuitemradio"] > .ui-icon:last-child {
color: var(--color-accent);
visibility: hidden;
}
.ui-menu__item[aria-checked="true"] {
font-weight: var(--weight-medium);
}
.ui-menu__item[aria-checked="true"] > .ui-icon:last-child {
visibility: visible;
}
/* 下拉面板里放一个小表单 */
.ui-menu__form {
display: grid;
gap: var(--space-3);
width: 260px;
padding: var(--space-3);
}
/* 搜索框：左侧放大镜 */
.ui-search {
position: relative;
}
.ui-search__icon {
position: absolute;
top: 50%;
left: 10px;
display: flex;
color: var(--color-faint);
translate: 0 -50%;
pointer-events: none;
}
.ui-search > .ui-input {
padding-left: 34px;
}
/* 右侧快捷键提示：聚焦或有内容时隐藏 */
.ui-search:has(> .ui-search__kbd) > .ui-input {
padding-right: 48px;
}
.ui-search__kbd {
position: absolute;
top: 50%;
right: 10px;
translate: 0 -50%;
pointer-events: none;
}
.ui-search:focus-within .ui-search__kbd,
.ui-search:has(> .ui-input:not(:placeholder-shown)) .ui-search__kbd {
display: none;
}
/* 多选列表：筛选 + 勾选 + 分页加载 */
.ui-picker {
display: grid;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.ui-picker__tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-picker__tools > :first-child {
margin-right: auto;
font-variant-numeric: tabular-nums;
}
.ui-picker__options {
display: grid;
max-height: 224px;
padding: var(--space-1);
overflow-y: auto;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-surface);
overscroll-behavior: contain;
}
.ui-picker__options:empty {
display: none;
}
.ui-picker__options > label {
font-family: var(--font-mono);
}
.ui-picker__options > .ui-hint {
padding: var(--space-2);
}
.ui-picker > .ui-btn {
justify-self: start;
}
/* 可勾选的行（整行都是 label，点哪里都能勾选） */
.ui-checklist {
display: grid;
}
.ui-checklist > label {
display: flex;
color: var(--color-ink);
align-items: center;
gap: var(--space-3);
min-height: 32px;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
overflow-wrap: anywhere;
cursor: pointer;
}
.ui-checklist > label:hover {
background: var(--color-hover);
}
.ui-checklist > label:has(input:checked) {
background: var(--color-accent-soft);
}
.ui-checklist__main {
display: grid;
gap: 2px;
min-width: 0;
}
.ui-checklist__sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
color: var(--color-muted);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
/* 折叠说明 */
.ui-disclosure {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: var(--text-sm);
}
.ui-disclosure > summary {
padding: var(--space-3) var(--space-4);
color: var(--color-ink);
font-weight: var(--weight-medium);
cursor: pointer;
}
.ui-disclosure > summary::marker {
color: var(--color-faint);
}
.ui-disclosure > :not(summary) {
margin: 0;
padding: 0 var(--space-4) var(--space-3);
color: var(--color-ink-2);
}
/* 数据表（密钥、用户）：宽屏是带表头的表格，窄屏（按容器宽度）每行折成卡片，单元格带小标签。列宽由 --table-cols 决定 */
.ui-table {
--table-cols: minmax(0, 1fr);
container-type: inline-size;
}
.ui-table--keys {
--table-cols: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 72px 184px;
}
.ui-table--users {
--table-cols: minmax(0, 1.5fr) 80px 64px minmax(140px, 1fr) 200px;
}
.ui-table__head,
.ui-table__row {
display: grid;
grid-template-columns: var(--table-cols);
align-items: center;
gap: var(--space-4);
padding-inline: var(--space-5);
}
.ui-table__head {
padding-block: var(--space-2);
border-bottom: 1px solid var(--color-line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--color-surface-2);
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.ui-table__head > .ui-table__num {
text-align: right;
}
.ui-table__body > .ui-skeleton {
padding: var(--space-5);
}
.ui-table__row {
padding-block: var(--space-4);
border-top: 1px solid var(--color-line);
font-size: var(--text-sm);
}
.ui-table__row:first-child {
border-top: 0;
}
.ui-table__cell {
display: grid;
justify-items: start;
gap: 2px;
min-width: 0;
}
.ui-table__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-2);
min-width: 0;
}
.ui-table__title strong {
min-width: 0;
color: var(--color-ink);
font-size: var(--text-md);
font-weight: var(--weight-bold);
overflow-wrap: anywhere;
}
.ui-table__sub {
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-table__label {
display: none;
color: var(--color-faint);
font-size: var(--text-xs);
}
.ui-table__num {
justify-items: end;
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.ui-table__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-1);
}
.ui-table__row.is-muted .ui-table__title strong,
.ui-table__row.is-muted .ui-table__cell {
color: var(--color-muted);
}
@container (max-width: 720px) {
.ui-table__head {
display: none;
}
.ui-table__row {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: var(--space-3) var(--space-4);
}
.ui-table__row > :first-child,
.ui-table__actions {
grid-column: 1 / -1;
}
.ui-table__label {
display: block;
}
.ui-table__num {
justify-items: start;
}
.ui-table__actions {
justify-content: flex-start;
}
}
@container (max-width: 440px) {
.ui-table__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-table__row > :nth-child(2) {
grid-column: 1 / -1;
}
}
/* 用户表窄屏：状态徽标挂在名字右侧，邮箱数与额度同一行，额度条占满剩余宽度 */
@container (max-width: 720px) {
.ui-table--users .ui-table__row {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"user user status"
"boxes quota quota"
"actions actions actions";
}
.ui-table--users .ui-table__row > :nth-child(1) {
grid-area: user;
}
.ui-table--users .ui-table__row > :nth-child(2) {
grid-area: status;
align-self: center;
}
.ui-table--users .ui-table__row > :nth-child(2) .ui-table__label {
display: none;
}
.ui-table--users .ui-table__row > :nth-child(3) {
grid-area: boxes;
}
.ui-table--users .ui-table__row > :nth-child(4) {
grid-area: quota;
}
.ui-table--users .ui-table__row > .ui-table__actions {
grid-area: actions;
}
}
/* 文档：真实的先后步骤，编号 + 竖线串起来 */
.ui-steps {
display: grid;
gap: var(--space-8);
margin: 0;
padding: 0;
list-style: none;
}
.ui-step {
position: relative;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: var(--space-4);
}
.ui-step:not(:last-child)::before {
content: "";
position: absolute;
top: 36px;
bottom: calc(-1 * var(--space-8) + var(--space-2));
left: 13.5px;
width: 1px;
background: var(--color-line);
}
.ui-step__num {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 1px solid var(--color-accent-line);
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.ui-step__body {
display: grid;
gap: var(--space-3);
min-width: 0;
padding-top: 3px;
}
.ui-step__title {
margin: 0;
font-size: var(--text-md);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
}
:where(.ui-step__body) > p {
margin: 0;
color: var(--color-ink-2);
}
.ui-prose {
display: grid;
gap: var(--space-3);
color: var(--color-ink-2);
}
.ui-prose > :where(p, ul, ol) {
margin: 0;
}
.ui-prose strong {
color: var(--color-ink);
font-weight: var(--weight-bold);
}
.ui-prose ul,
.ui-prose-list {
display: grid;
gap: var(--space-1);
margin: 0;
padding-left: 1.4em;
color: var(--color-ink-2);
}
.ui-prose li::marker,
.ui-prose-list > li::marker {
color: var(--color-faint);
}
/* 可复制的命令 */
.ui-codeblock {
position: relative;
min-width: 0;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.ui-codeblock__pre {
margin: 0;
padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
overflow-x: auto;
border: 0;
border-radius: 0;
background: transparent;
color: var(--color-ink);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ui-codeblock > .ui-icon-btn {
position: absolute;
top: var(--space-1);
right: var(--space-1);
}
.ui-codeblock > .ui-icon-btn:hover {
background: var(--color-surface);
}
@media (prefers-reduced-motion: reduce) {
.ui-menu__panel {
animation: none;
}
.ui-menu > summary .ui-icon:last-child {
transition: none;
}
}
}
/* ───────────────────────────── 页面构件：标签页、表单尾、创建邮箱 ───────────────────────────── */
@layer components {
/* 功能区内的视图切换：下划线标签 */
.ui-tabs {
display: flex;
gap: var(--space-1);
margin-top: calc(-1 * var(--space-2));
overflow-x: auto;
border-bottom: 1px solid var(--color-line);
scrollbar-width: none;
}
.ui-tabs__item {
display: inline-flex;
flex: none;
align-items: center;
height: 40px;
margin-bottom: -1px;
padding-inline: var(--space-3);
border-bottom: 2px solid transparent;
color: var(--color-muted);
font-weight: var(--weight-medium);
text-decoration: none;
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.ui-tabs__item:hover {
color: var(--color-ink);
}
.ui-tabs__item[aria-current="page"] {
border-bottom-color: var(--color-primary);
color: var(--color-ink);
}
.ui-lead {
margin: 0;
color: var(--color-ink-2);
}
/* 表单最后一行：左边是状态说明，右边是主按钮 */
.ui-form__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
}
.ui-form__foot > .ui-hint,
.ui-form__foot > .ui-error {
margin-right: auto;
}
.ui-form__foot b {
color: var(--color-ink);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
/* 原生文件选择：只改按钮外观 */
.ui-file {
max-width: 100%;
color: var(--color-muted);
font: inherit;
font-size: var(--text-sm);
}
.ui-file::file-selector-button {
height: var(--control-md);
margin-right: var(--space-3);
padding-inline: var(--space-3);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-ink);
font: inherit;
font-size: var(--text-md);
font-weight: var(--weight-medium);
cursor: pointer;
}
.ui-file::file-selector-button:hover {
background: var(--color-hover);
}
/* 创建邮箱：左表单、右列表 */
.ui-create {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
align-items: start;
gap: var(--space-6);
}
.ui-create__main {
display: grid;
gap: var(--space-4);
min-width: 0;
}
.ui-create__aside {
position: sticky;
top: var(--space-6);
min-width: 0;
}
/* 标签行右侧放一个小控件（例如“随机 / 自定义”） */
.ui-field__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: var(--control-sm);
}
/* 地址输入 + 旁边的操作按钮 */
.ui-compose {
display: flex;
gap: var(--space-2);
min-width: 0;
}
.ui-compose > .ui-input-group {
flex: 1;
}
.ui-compose > .ui-icon-btn {
width: var(--control-lg);
height: var(--control-lg);
}
.ui-input-group > .ui-input--lg + .ui-input-group__addon {
font-size: var(--text-md);
}
/* 320px 这种很窄的屏：域名后缀收紧，给前缀多留几个字符 */
@media (max-width: 374px) {
.ui-input-group > .ui-input {
padding-inline: var(--space-2);
}
.ui-input-group__addon,
.ui-input-group > .ui-input--lg + .ui-input-group__addon {
padding-inline: var(--space-2);
font-size: var(--text-xs);
}
}
/* 数字步进 */
.ui-stepper {
display: inline-flex;
width: max-content;
overflow: hidden;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.ui-stepper:focus-within {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.ui-stepper > button {
display: grid;
place-items: center;
width: var(--control-lg);
height: var(--control-lg);
padding: 0;
border: 0;
background: var(--color-surface-2);
color: var(--color-ink-2);
cursor: pointer;
}
.ui-stepper > button:hover {
background: var(--color-surface-3);
}
.ui-stepper > input {
width: 72px;
height: var(--control-lg);
padding: 0;
border: 0;
border-inline: 1px solid var(--color-line);
background: transparent;
color: var(--color-ink);
font: inherit;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
text-align: center;
appearance: textfield;
}
.ui-stepper > input:focus {
outline: none;
}
.ui-stepper > input::-webkit-inner-spin-button,
.ui-stepper > input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
/* 可点选的已有标签 */
.ui-suggest {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: calc(-1 * var(--space-3));
}
.ui-suggest__item {
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: none;
font: inherit;
cursor: pointer;
}
.ui-suggest__item:hover .ui-tag {
border-color: var(--color-line-strong);
color: var(--color-ink);
}
.ui-tag--add {
border-style: dashed;
color: var(--color-muted);
}
.ui-tag--add .ui-icon {
width: 12px;
height: 12px;
}
/* 可选字段：默认收起，只露出一行文字按钮 */
.ui-optional > summary {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-ink-2);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
list-style: none;
cursor: pointer;
}
.ui-optional > summary::-webkit-details-marker {
display: none;
}
.ui-optional > summary:hover {
color: var(--color-ink);
}
.ui-optional[open] > summary {
display: none;
}
/* 创建成功 */
.ui-created {
border-color: var(--color-accent-line);
}
.ui-created > .ui-panel__body {
display: grid;
gap: var(--space-4);
}
.ui-created__head {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ui-created__mark {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-ok-soft);
color: var(--color-ok);
}
.ui-created__mark .ui-icon {
width: 14px;
height: 14px;
}
.ui-created__title {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.ui-created__address {
margin: 0;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.ui-created__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* 等验证码：虚线框占位，验证码到了换成 CodeCard */
.ui-created__status {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
padding: var(--space-3) var(--space-4);
border: 1px dashed var(--color-line-strong);
border-radius: var(--radius-md);
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-created__status a {
color: var(--color-accent);
}
/* 最近创建 */
.ui-recent {
display: grid;
}
.ui-recent__item {
display: grid;
gap: 6px;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
border-top: 1px solid var(--color-line);
}
.ui-recent__item:first-child {
border-top: 0;
}
.ui-recent__line {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.ui-recent__link {
min-width: 0;
margin-right: auto;
color: inherit;
text-decoration: none;
}
.ui-recent__link:hover .ui-address b {
text-decoration: underline;
text-decoration-color: var(--color-line-strong);
text-underline-offset: 3px;
}
.ui-recent__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
min-width: 0;
margin-right: auto;
padding: 2px;
border: 0;
border-radius: var(--radius-sm);
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.ui-recent__tags:hover .ui-tag {
border-color: var(--color-line-strong);
}
.ui-recent__time {
flex: none;
color: var(--color-muted);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
/* 勾选工具条（导入页“我的邮箱”、管理页批次）与“我的邮箱”列表 */
.ui-selbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-line);
background: var(--color-surface-2);
}
.ui-selbar__count {
margin-right: auto;
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-selbar__count b {
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.ui-mybox__list {
max-height: min(62vh, 640px);
padding: var(--space-1) var(--space-2);
overflow-y: auto;
overscroll-behavior: contain;
}
.ui-pager {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
border-top: 1px solid var(--color-line);
color: var(--color-muted);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.ui-pager > span {
margin-right: auto;
}
@media (max-width: 1100px) {
.ui-create {
grid-template-columns: minmax(0, 1fr);
}
.ui-create__aside {
position: static;
}
}
@media (prefers-reduced-motion: reduce) {
.ui-tabs__item {
transition: none;
}
}
}
/* ───────────────────────────── 页面构件：管理 ───────────────────────────── */
@layer components {
/* 概览数字：一条带分隔线的横排，不是四张卡片 */
.ui-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.ui-stat {
display: grid;
gap: 2px;
padding: var(--space-4) var(--space-5);
border-left: 1px solid var(--color-line);
}
.ui-stat:first-child {
border-left: 0;
}
.ui-stat dt {
color: var(--color-muted);
font-size: var(--text-sm);
}
.ui-stat dd {
display: grid;
gap: 2px;
margin: 0;
}
.ui-stat__value {
color: var(--color-ink);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
line-height: var(--leading-tight);
}
.ui-stat__sub {
color: var(--color-muted);
font-size: var(--text-xs);
}
.ui-stat--warn .ui-stat__value {
color: var(--color-warn);
}
@media (max-width: 700px) {
.ui-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-stat:nth-child(3) {
border-left: 0;
}
.ui-stat:nth-child(n + 3) {
border-top: 1px solid var(--color-line);
}
.ui-stat__value {
font-size: var(--text-xl);
}
}
/* 用户行 */
.ui-table__user {
display: flex;
align-items: center;
gap: var(--space-3);
}
.ui-table__name {
color: var(--color-ink);
font-size: var(--text-md);
font-weight: var(--weight-bold);
overflow-wrap: anywhere;
}
/* 用量条 + 数字：数字列定宽右对齐，各行的条才一样长 */
.ui-quota {
display: grid;
grid-template-columns: minmax(48px, 1fr) 9ch;
align-items: center;
gap: var(--space-3);
width: 100%;
}
.ui-quota .ui-meter {
width: 100%;
}
.ui-quota__text {
text-align: right;
white-space: nowrap;
color: var(--color-ink);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.ui-quota__text span {
color: var(--color-muted);
font-weight: var(--weight-regular);
}
/* 用量条：原生