mix
f47cf39802
test / test (push) Waiting to run
Split the hash-sheet prototype into one HTML file per screen, composed from stack, pair, measure, and fill. system.html is the grammar; shell.js is shared chrome. The running panel is unchanged. Co-Authored-By: Cursor <cursoragent@cursor.com>
712 lines
32 KiB
CSS
712 lines
32 KiB
CSS
/* SelfPost panel UI mockups. Tokens match internal/web/view/static/panel.css.
|
|
This file is a design artifact, not the panel stylesheet. */
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@200;300;400;500;600;700&display=swap");
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
--font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--bg: #f4f2ed; --fg: #12161c;
|
|
--muted: #6b7684;
|
|
--card-bg: #fff;
|
|
--border: #dedcd7;
|
|
--control-border: #cbc8c1;
|
|
--input-bg: #fff;
|
|
--code-bg: #efede9;
|
|
--surface-bg: #eae7e0; --surface-bg-hover: #e0dcd3; --surface-open-bg: #d8d3c8;
|
|
--nav-active-bg: #ede4de;
|
|
--accent-fill: #7a3b2e; --accent-fill-hover: #632f25; --accent-text: #7a3b2e;
|
|
--on-accent: #fff;
|
|
--flash-bg: #edf6ef; --flash-border: #c2e0cc; --flash-fg: #2c6b43;
|
|
--credential-bg: #fcf6e4; --credential-border: #e0c874;
|
|
--danger-fill: #b42318; --danger-fill-hover: #912018;
|
|
--danger-bg: #fbedea; --danger-border: #efccc4; --danger-fg: #b42318; --danger-bg-hover: #f7dfda;
|
|
--st-ok-bg: #edf6ef; --st-ok-fg: #2c6b43; --st-ok-border: #c2e0cc;
|
|
--st-warn-bg: #fbf2e2; --st-warn-fg: #8a5510; --st-warn-border: #ebd5a6;
|
|
--st-error-bg: #fbedea; --st-error-fg: #b42318; --st-error-border: #efccc4;
|
|
--st-unknown-bg: #efede9; --st-unknown-fg: #6b7684; --st-unknown-border: #dedcd7;
|
|
--nav-w: 14rem;
|
|
--ops-max: 90rem;
|
|
--form-max: 42rem;
|
|
--auth-max: 24rem;
|
|
--gallery-h: 3.1rem;
|
|
}
|
|
|
|
.dark-tokens {
|
|
--bg: #16181b; --fg: #e9e6e0;
|
|
--muted: #9aa1a9;
|
|
--card-bg: #1d2024;
|
|
--border: #2c2f34;
|
|
--control-border: #3a3e44;
|
|
--input-bg: #14161a;
|
|
--code-bg: #14161a;
|
|
--surface-bg: #23262b; --surface-bg-hover: #2c3036; --surface-open-bg: #343941;
|
|
--nav-active-bg: #2a1f1b;
|
|
--accent-fill: #8e4535; --accent-fill-hover: #a0503e; --accent-text: #ce7b66;
|
|
--flash-bg: #132318; --flash-border: #22452f; --flash-fg: #7fcb9b;
|
|
--credential-bg: #26210d; --credential-border: #5e5013;
|
|
--danger-fill: #9b2c22; --danger-fill-hover: #b0342a;
|
|
--danger-bg: #2a1412; --danger-border: #5e2721; --danger-fg: #eb9b92; --danger-bg-hover: #381a17;
|
|
--st-ok-bg: #132318; --st-ok-fg: #7fcb9b; --st-ok-border: #22452f;
|
|
--st-warn-bg: #2a2109; --st-warn-fg: #e5be72; --st-warn-border: #5e4b12;
|
|
--st-error-bg: #2a1412; --st-error-fg: #eb9b92; --st-error-border: #5e2721;
|
|
--st-unknown-bg: #23262b; --st-unknown-fg: #9aa1a9; --st-unknown-border: #2c2f34;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { color-scheme: dark; }
|
|
html:not(.force-light) { }
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scrollbar-gutter: stable; }
|
|
body {
|
|
font: 400 15px/1.5 var(--font-sans);
|
|
margin: 0; background: var(--bg); color: var(--fg);
|
|
}
|
|
|
|
.ctrl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
|
|
|
/* —— Gallery chrome (index + prototype toolbar) —— */
|
|
.gallery {
|
|
position: sticky; top: 0; z-index: 40;
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem;
|
|
min-height: var(--gallery-h);
|
|
padding: 0.45rem 1rem;
|
|
background: var(--surface-bg);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.82rem;
|
|
}
|
|
.gallery a { color: var(--accent-text); }
|
|
.gallery .brand-mini {
|
|
font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
|
|
letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
|
|
text-decoration: none;
|
|
}
|
|
.gallery .seg {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.35rem;
|
|
}
|
|
.gallery .seg > span { color: var(--muted); margin-right: 0.15rem; }
|
|
.gallery .seg label {
|
|
margin: 0; font-weight: 500; cursor: pointer;
|
|
padding: 0.2rem 0.55rem; border: 1px solid var(--control-border);
|
|
border-radius: 5px; background: var(--card-bg); color: var(--fg);
|
|
}
|
|
#role-global:checked ~ .gallery label[for="role-global"],
|
|
#role-domain:checked ~ .gallery label[for="role-domain"],
|
|
#vp-desktop:checked ~ .gallery label[for="vp-desktop"],
|
|
#vp-phone:checked ~ .gallery label[for="vp-phone"],
|
|
#theme-light:checked ~ .gallery label[for="theme-light"],
|
|
#theme-dark:checked ~ .gallery label[for="theme-dark"] {
|
|
background: var(--nav-active-bg); color: var(--accent-text);
|
|
border-color: var(--accent-fill); font-weight: 600;
|
|
}
|
|
.gallery .check-lab {
|
|
display: flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 500; cursor: pointer;
|
|
}
|
|
.gallery .check-lab input { width: auto; margin: 0; }
|
|
.tag {
|
|
display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
|
|
font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
|
|
padding: 0.12rem 0.4rem; border-radius: 4px;
|
|
background: var(--surface-bg); color: var(--muted); border: 1px solid var(--border);
|
|
}
|
|
.tag.future { color: var(--st-warn-fg); border-color: var(--st-warn-border); background: var(--st-warn-bg); }
|
|
|
|
body:has(#theme-dark:checked) { background: #16181b; color: #e9e6e0; }
|
|
|
|
#theme-dark:checked ~ .gallery,
|
|
#theme-dark:checked ~ .app,
|
|
#theme-dark:checked ~ .help-drawer {
|
|
--bg: #16181b; --fg: #e9e6e0;
|
|
--muted: #9aa1a9;
|
|
--card-bg: #1d2024;
|
|
--border: #2c2f34;
|
|
--control-border: #3a3e44;
|
|
--input-bg: #14161a;
|
|
--code-bg: #14161a;
|
|
--surface-bg: #23262b; --surface-bg-hover: #2c3036; --surface-open-bg: #343941;
|
|
--nav-active-bg: #2a1f1b;
|
|
--accent-fill: #8e4535; --accent-fill-hover: #a0503e; --accent-text: #ce7b66;
|
|
--flash-bg: #132318; --flash-border: #22452f; --flash-fg: #7fcb9b;
|
|
--credential-bg: #26210d; --credential-border: #5e5013;
|
|
--danger-fill: #9b2c22; --danger-fill-hover: #b0342a;
|
|
--danger-bg: #2a1412; --danger-border: #5e2721; --danger-fg: #eb9b92; --danger-bg-hover: #381a17;
|
|
--st-ok-bg: #132318; --st-ok-fg: #7fcb9b; --st-ok-border: #22452f;
|
|
--st-warn-bg: #2a2109; --st-warn-fg: #e5be72; --st-warn-border: #5e4b12;
|
|
--st-error-bg: #2a1412; --st-error-fg: #eb9b92; --st-error-border: #5e2721;
|
|
--st-unknown-bg: #23262b; --st-unknown-fg: #9aa1a9; --st-unknown-border: #2c2f34;
|
|
background: var(--bg); color: var(--fg);
|
|
}
|
|
|
|
/* —— Prototype shell: nav docked left, content uses remaining width —— */
|
|
.app {
|
|
display: flex; align-items: flex-start; min-height: calc(100vh - var(--gallery-h));
|
|
background: var(--bg);
|
|
}
|
|
.stage { flex: 1 1 auto; min-width: 0; }
|
|
.nav {
|
|
position: sticky; top: var(--gallery-h); align-self: stretch;
|
|
flex: none; width: var(--nav-w);
|
|
display: flex; flex-direction: column; gap: 0.75rem;
|
|
padding: 1.1rem 0.85rem 1.4rem;
|
|
border-right: 1px solid var(--border);
|
|
background: var(--bg);
|
|
max-height: calc(100vh - var(--gallery-h)); overflow-y: auto;
|
|
}
|
|
.nav .links, .nav .session { display: flex; flex-direction: column; gap: 0.1rem; }
|
|
.nav .session { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border); }
|
|
.nav .session .muted { padding: 0 0.6rem; font-size: 0.85rem; overflow-wrap: anywhere; }
|
|
.nav .session-user { display: flex; align-items: center; gap: 0.5rem; }
|
|
.nav .brand { padding: 0; display: block; }
|
|
.nav .brand img { display: block; width: 100%; height: auto; }
|
|
.nav a, .nav [aria-current], .nav .current {
|
|
display: flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.35rem 0.6rem; border-radius: 5px; text-decoration: none;
|
|
color: var(--fg);
|
|
}
|
|
.nav a:hover { background: var(--surface-bg); }
|
|
.nav [aria-current], .nav .current {
|
|
font-weight: 600; color: var(--accent-text); background: var(--nav-active-bg);
|
|
box-shadow: inset 2px 0 0 var(--accent-fill);
|
|
}
|
|
body.page-status .n-status,
|
|
body.page-domains .n-domains,
|
|
body.page-domain .n-domains,
|
|
body.page-domain-delete .n-domains,
|
|
body.page-deliveries .n-deliveries,
|
|
body.page-delivery .n-deliveries,
|
|
body.page-mail-queue .n-queue,
|
|
body.page-system-log .n-log,
|
|
body.page-inbound .n-inbound,
|
|
body.page-inbound-domain .n-inbound,
|
|
body.page-inbound-backup .n-inbound,
|
|
body.page-inbound-delete .n-inbound,
|
|
body.page-dmarc .n-dmarc,
|
|
body.page-backup .n-backup,
|
|
body.page-users .n-users,
|
|
body.page-user-form .n-users,
|
|
body.page-user-delete .n-users,
|
|
body.page-help .n-help,
|
|
body.page-settings .n-settings {
|
|
font-weight: 600; color: var(--accent-text); background: var(--nav-active-bg);
|
|
box-shadow: inset 2px 0 0 var(--accent-fill);
|
|
}
|
|
.nav .icon { width: 1rem; height: 1rem; flex: none; }
|
|
.nav button, .nav .btn-ghost {
|
|
display: flex; align-items: center; gap: 0.5rem;
|
|
margin: 0; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.95rem; font-weight: 400;
|
|
color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border);
|
|
border-radius: 5px; cursor: pointer; text-decoration: none; width: 100%;
|
|
}
|
|
.nav button:hover, .nav .btn-ghost:hover { background: var(--danger-bg-hover); }
|
|
|
|
.phone-bar { display: none; }
|
|
.phone-bar .icon { width: 1.1rem; height: 1.1rem; }
|
|
.mono { font-family: var(--font-mono); }
|
|
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
|
|
|
#feat-inbound:checked ~ .gallery label[for="feat-inbound"] {
|
|
background: var(--nav-active-bg); color: var(--accent-text);
|
|
border-color: var(--accent-fill);
|
|
}
|
|
.gallery label[for="feat-inbound"] {
|
|
margin: 0; font-weight: 500; cursor: pointer;
|
|
padding: 0.2rem 0.55rem; border: 1px solid var(--control-border);
|
|
border-radius: 5px; background: var(--card-bg); color: var(--fg);
|
|
}
|
|
#role-domain:checked ~ .gallery .g-only { display: none; }
|
|
|
|
main {
|
|
flex: 1 1 auto; min-width: 0; width: 100%;
|
|
padding: 1.5rem 1.5rem 2.5rem;
|
|
}
|
|
main.auth {
|
|
max-width: none; display: flex; flex-direction: column; align-items: center;
|
|
padding-top: 3rem;
|
|
}
|
|
main.auth > * { width: 100%; max-width: var(--auth-max); margin-left: auto; margin-right: auto; }
|
|
main.stack > .page-head,
|
|
main.stack > h1 { margin-bottom: 0; }
|
|
main.stack > .back { margin: 0; }
|
|
main.stack > .route { margin-top: 0; margin-bottom: 0; }
|
|
main.stack > p.muted { margin-top: 0; margin-bottom: 0; }
|
|
main.stack > .toolbar { margin-bottom: 0; max-width: var(--ops-max); }
|
|
|
|
body.page-login .nav,
|
|
body.page-setup .nav,
|
|
body.page-login .phone-bar,
|
|
body.page-setup .phone-bar { display: none !important; }
|
|
body.page-login .app,
|
|
body.page-setup .app { display: block; }
|
|
|
|
#role-domain:checked ~ .app .g-only { display: none !important; }
|
|
#role-domain:checked ~ .app .pair:has(> .g-only) {
|
|
display: block;
|
|
max-width: var(--form-max);
|
|
}
|
|
#feat-inbound:not(:checked) ~ .app .in-only { display: none !important; }
|
|
#feat-inbound:checked ~ .app .in-off { display: none !important; }
|
|
|
|
h1 { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 1rem; }
|
|
h1.subject { overflow-wrap: anywhere; }
|
|
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.4rem; }
|
|
.mark { display: block; width: 100%; max-width: 24rem; height: auto; margin-bottom: 1.4rem; }
|
|
.card {
|
|
background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
|
|
padding: 1.25rem 1.4rem; margin: 0;
|
|
}
|
|
.card.narrow { max-width: var(--auth-max); }
|
|
.card + .card { margin-top: 1rem; }
|
|
.card.credential { border-color: var(--credential-border); background: var(--credential-bg); }
|
|
.muted { color: var(--muted); }
|
|
.error { color: var(--danger-fg); margin: 0.6rem 0 0; font-weight: 600; }
|
|
a { color: var(--accent-text); }
|
|
.back { display: block; margin: -0.4rem 0 1rem; }
|
|
.flash {
|
|
background: var(--flash-bg); border: 1px solid var(--flash-border); color: var(--flash-fg);
|
|
padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem;
|
|
}
|
|
.flash.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
|
|
.version { margin-top: 1.6rem; text-align: right; font-size: 0.8rem; color: var(--muted); }
|
|
.version a { color: inherit; }
|
|
|
|
label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
|
|
label.check {
|
|
display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0 0; font-weight: 600; cursor: pointer;
|
|
}
|
|
label.check input { width: auto; margin: 0; padding: 0; border: 0; background: none; }
|
|
input, select, textarea {
|
|
width: 100%; padding: 0.55rem 0.7rem; font-family: inherit; font-size: 1rem;
|
|
border: 1px solid var(--control-border); border-radius: 5px; background: var(--input-bg); color: inherit;
|
|
}
|
|
textarea { resize: vertical; }
|
|
fieldset {
|
|
margin: 0.9rem 0 0; padding: 0.55rem 0.85rem 0.85rem;
|
|
border: 1px solid var(--control-border); border-radius: 5px;
|
|
}
|
|
fieldset legend { padding: 0 0.25rem; font-weight: 600; }
|
|
fieldset > .muted { margin: 0.15rem 0 0.35rem; font-size: 0.85rem; font-weight: 400; }
|
|
|
|
button, a.btn, a.danger {
|
|
display: inline-block; margin-top: 1.1rem; padding: 0.6rem 1.1rem;
|
|
font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
|
|
color: var(--on-accent); background: var(--accent-fill); border: 0; border-radius: 5px; cursor: pointer;
|
|
}
|
|
button:hover, a.btn:hover { background: var(--accent-fill-hover); }
|
|
button.danger, a.danger { background: var(--danger-fill); color: var(--on-accent); }
|
|
button.danger:hover, a.danger:hover { background: var(--danger-fill-hover); }
|
|
form.inline { display: inline; margin: 0; }
|
|
.form-actions {
|
|
display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
|
|
margin-top: 1.1rem;
|
|
}
|
|
.form-actions > button, .form-actions > a.btn, .form-actions > a.danger { margin-top: 0; }
|
|
|
|
.st {
|
|
display: inline-block; padding: 0.14rem 0.45rem 0.28rem; border-radius: 4px;
|
|
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; line-height: 1;
|
|
letter-spacing: 0.02em; vertical-align: middle; border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
.st-ok { background: var(--st-ok-bg); color: var(--st-ok-fg); border-color: var(--st-ok-border); }
|
|
.st-warn { background: var(--st-warn-bg); color: var(--st-warn-fg); border-color: var(--st-warn-border); }
|
|
.st-error { background: var(--st-error-bg); color: var(--st-error-fg); border-color: var(--st-error-border); }
|
|
.st-unknown { background: var(--st-unknown-bg); color: var(--st-unknown-fg); border-color: var(--st-unknown-border); }
|
|
a.st, a.st:hover { color: inherit; text-decoration: none; }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td {
|
|
text-align: left; padding: 0.5rem 0.45rem; border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
th {
|
|
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
|
|
text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
|
|
}
|
|
td.actions { text-align: right; }
|
|
.metric { white-space: nowrap; }
|
|
.card:has(table) { overflow-x: auto; }
|
|
td.subject span {
|
|
display: block; max-width: 22rem;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
|
|
.code {
|
|
display: block; white-space: pre; overflow-x: auto; overflow-wrap: normal;
|
|
word-break: normal; font-family: var(--font-mono);
|
|
font-size: 0.85rem; background: var(--code-bg); border: 1px solid var(--border);
|
|
border-radius: 5px; padding: 0.7rem 0.8rem; margin: 0.3rem 0 0;
|
|
}
|
|
.code-row { display: flex; align-items: flex-start; gap: 0.5rem; }
|
|
.code-row .code { flex: 1; min-width: 0; margin-top: 0; padding-top: 0.45rem; padding-bottom: 0.45rem; }
|
|
.input-row { display: flex; align-items: stretch; gap: 0.5rem; }
|
|
.input-row input { flex: 1; min-width: 0; }
|
|
.input-row button { margin-top: 0; flex: none; white-space: nowrap; }
|
|
|
|
.split {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
|
|
gap: 1rem; margin-top: 1rem;
|
|
}
|
|
h1 + .split, h1 + form > .split { margin-top: 0; }
|
|
.split > .card { min-width: 0; }
|
|
.split > .card + .card { margin-top: 0; }
|
|
.split + .card, .card + .split, form:has(.split) + .card { margin-top: 1rem; }
|
|
#settings form { width: 100%; max-width: none; }
|
|
#settings .split,
|
|
#backup > .split {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
}
|
|
|
|
.check-cols {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
|
gap: 1rem 1.2rem; margin-top: 1rem;
|
|
}
|
|
.check-col { min-width: 0; }
|
|
.check-col-title { margin: 0.85rem 0 0.35rem; font-size: 1.05rem; font-weight: 600; }
|
|
.field-pair {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
|
|
gap: 0 1rem; margin-top: 0.45rem;
|
|
}
|
|
.field-pair > div { min-width: 0; }
|
|
.field-pair label { margin-top: 0.45rem; }
|
|
/* Host / name beside Type — size the type column to that token rather than
|
|
giving it half the row. Vertical padding matches .code-row .code so Type is
|
|
the same height as Host when Copy sits beside it. */
|
|
.field-pair.host-type {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
.field-pair.host-type .code {
|
|
padding-top: 0.45rem; padding-bottom: 0.45rem;
|
|
}
|
|
.field-type { width: max-content; }
|
|
.field-type .code {
|
|
width: fit-content; min-width: 2.75rem; text-align: center; box-sizing: border-box;
|
|
}
|
|
|
|
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
|
|
.fact { min-width: 0; padding: 0.5rem 0.7rem; border-radius: 6px; background: var(--surface-bg); }
|
|
.fact-label {
|
|
display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
|
|
text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
|
|
}
|
|
.fact-value { display: block; margin-top: 0.1rem; white-space: nowrap; overflow-x: auto; }
|
|
.fact-value.mono { font-family: var(--font-mono); font-size: 0.85rem; }
|
|
|
|
.timeline {
|
|
list-style: none; display: flex; flex-direction: column; gap: 1.1rem;
|
|
margin: 1rem 0 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--border);
|
|
}
|
|
.event { position: relative; min-width: 0; }
|
|
.event::before {
|
|
content: ""; position: absolute; left: -1.85rem; top: 0.3rem;
|
|
width: 0.65rem; height: 0.65rem; border-radius: 50%;
|
|
background: var(--card-bg); border: 2px solid var(--control-border);
|
|
}
|
|
.event.lvl-ok::before { border-color: var(--st-ok-fg); background: var(--st-ok-bg); }
|
|
.event.lvl-warn::before { border-color: var(--st-warn-fg); background: var(--st-warn-bg); }
|
|
.event.lvl-error::before { border-color: var(--st-error-fg); background: var(--st-error-bg); }
|
|
.event.pending { opacity: 0.7; }
|
|
.event.pending::before { border-style: dashed; }
|
|
.event-time { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
|
|
.event-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.15rem 0 0; font-weight: 600; }
|
|
.event-detail { margin: 0.2rem 0 0; font-size: 0.9rem; }
|
|
|
|
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: -0.5rem; margin-bottom: 1rem; }
|
|
.route .addr { font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; overflow-x: auto; max-width: 100%; }
|
|
.route .arrow { color: var(--muted); }
|
|
|
|
table.log { margin-top: 1rem; }
|
|
table.log th:first-child, table.log td.time { width: 1%; }
|
|
table.log td.log-text {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem; white-space: pre;
|
|
}
|
|
|
|
button.copy, .actions button, .actions > label.toggle, .actions a.danger {
|
|
margin: 0; padding: 0.45rem 0.7rem; font-size: 0.8rem; font-weight: 600;
|
|
border-radius: 5px; white-space: nowrap;
|
|
background: var(--surface-bg); color: var(--accent-text); border: 1px solid var(--control-border);
|
|
}
|
|
button.copy:hover, .actions button:hover, .actions > label.toggle:hover { background: var(--surface-bg-hover); }
|
|
.actions button.danger, .actions a.danger { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
|
|
.actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
|
|
|
|
.apps { list-style: none; margin: 1rem 0 0; padding: 0; }
|
|
.app-item { padding: 0.9rem 0; border-top: 1px solid var(--border); }
|
|
.app-item:last-child { padding-bottom: 0; }
|
|
.app-login { margin: 0; font-family: var(--font-mono); font-weight: 600; }
|
|
.app-addr { margin: 0.15rem 0 0; white-space: nowrap; overflow-x: auto; }
|
|
.app-item .actions { margin-top: 0.7rem; }
|
|
.app-item .actions > .panel-toggle {
|
|
position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
|
|
}
|
|
.app-item .actions > .panel { display: none; flex: 1 0 100%; }
|
|
.app-item .actions > .t-edit:checked ~ .panel-edit { display: block; }
|
|
.app-item .actions > .t-edit:checked ~ .for-edit { background: var(--surface-open-bg); }
|
|
.app-item .actions > .panel button { margin-top: 0.9rem; }
|
|
|
|
.encrypt { margin-top: 1.2rem; }
|
|
.encrypt-fields {
|
|
display: none; margin-top: 0.8rem; margin-left: 1.6rem; padding-left: 0.9rem;
|
|
border-left: 2px solid var(--border);
|
|
}
|
|
.encrypt:has(input[type="checkbox"]:checked) .encrypt-fields { display: block; }
|
|
.encrypt-fields label { margin-top: 0.7rem; }
|
|
|
|
.rcpt-list, .rcpt-any { display: none; }
|
|
.rcpt-mode:has(option[value="list"]:checked) .rcpt-list { display: block; }
|
|
.rcpt-mode:has(option[value="any"]:checked) .rcpt-any { display: block; }
|
|
|
|
.toolbar {
|
|
display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end;
|
|
padding: 0.85rem 1rem; margin-bottom: 1rem;
|
|
background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
|
|
}
|
|
.toolbar .field { flex: 1 1 10rem; min-width: 8rem; }
|
|
.toolbar label { margin-top: 0; font-size: 0.8rem; }
|
|
.toolbar button { margin-top: 0; }
|
|
|
|
/* Status: hero + dense grid */
|
|
.status-hero {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.2rem;
|
|
padding: 1rem 1.25rem; margin-bottom: 1rem;
|
|
background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
|
|
}
|
|
.status-hero.attn,
|
|
.card.attn { border-color: var(--st-warn-border); }
|
|
.status-hero h1 { margin: 0; }
|
|
.status-hero .lead { margin: 0; color: var(--fg); }
|
|
.status-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.status-grid .card { margin: 0; }
|
|
.status-grid .card.attn { border-color: var(--st-warn-border); }
|
|
.metric-row {
|
|
display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
|
|
padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem;
|
|
}
|
|
.metric-row:last-child { border-bottom: 0; }
|
|
.metric-row .k { font-weight: 600; }
|
|
.metric-row .v { font-family: var(--font-mono); font-size: 0.85rem; }
|
|
meter { width: 5rem; height: 0.7rem; vertical-align: middle; margin-right: 0.4rem; }
|
|
.card-head {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem;
|
|
}
|
|
.card-head h2 { margin: 0; }
|
|
.help-link {
|
|
flex: none; width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center;
|
|
border-radius: 50%; border: 1px solid var(--control-border); color: var(--muted);
|
|
text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
|
|
background: var(--surface-bg); cursor: pointer; margin: 0;
|
|
}
|
|
.help-link:hover { color: var(--accent-text); border-color: var(--accent-fill); }
|
|
|
|
.page-head {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.page-head h1 { margin: 0; }
|
|
|
|
/* Compact retry policy */
|
|
.retry-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
|
|
|
|
.phone-list { display: none; list-style: none; margin: 0; padding: 0; }
|
|
.phone-list li { border-bottom: 1px solid var(--border); }
|
|
.phone-list a {
|
|
display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.7rem;
|
|
padding: 0.75rem 0.1rem; text-decoration: none; color: var(--fg);
|
|
}
|
|
.phone-list .when { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
|
|
.phone-list .meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; overflow-x: auto; }
|
|
.phone-list .subj { grid-column: 1 / -1; margin: 0; }
|
|
|
|
/* Help drawer — CSS checkbox, no script required */
|
|
.help-drawer {
|
|
display: none; position: fixed; top: var(--gallery-h); right: 0; bottom: 0;
|
|
width: min(26rem, 100vw); z-index: 30;
|
|
background: var(--card-bg); border-left: 1px solid var(--border);
|
|
padding: 1.25rem 1.35rem 2rem; overflow-y: auto;
|
|
}
|
|
html:has(input[name="help"]:checked):not(:has(#help-off:checked)) .help-drawer,
|
|
html:has(input[name="help"]:checked):not(:has(#help-off:checked)) .help-scrim { display: block; }
|
|
.help-pane { display: none; }
|
|
html:has(#help-index:checked) .help-pane-index,
|
|
html:has(#help-status:checked) .help-pane-status,
|
|
html:has(#help-password:checked) .help-pane-password,
|
|
html:has(#help-dns:checked) .help-pane-dns,
|
|
html:has(#help-records:checked) .help-pane-records,
|
|
html:has(#help-dmarc:checked) .help-pane-dmarc,
|
|
html:has(#help-connection:checked) .help-pane-connection,
|
|
html:has(#help-apps:checked) .help-pane-apps,
|
|
html:has(#help-domain-settings:checked) .help-pane-domain-settings,
|
|
html:has(#help-export:checked) .help-pane-export { display: block; }
|
|
.help-scrim {
|
|
display: none; position: fixed; inset: var(--gallery-h) 0 0 0; z-index: 25;
|
|
background: rgba(18, 22, 28, 0.28);
|
|
}
|
|
.help-drawer h2 { margin-top: 1.2rem; }
|
|
.help-drawer h2:first-of-type,
|
|
.help-pane h2 { margin-top: 0; }
|
|
.help-drawer .toc { list-style: none; margin: 0.7rem 0 0; padding: 0; }
|
|
.help-drawer .toc li { margin: 0.35rem 0 0; }
|
|
.help-drawer .toc label {
|
|
margin: 0; font-weight: 600; color: var(--accent-text); cursor: pointer;
|
|
}
|
|
.help-drawer .more { margin-top: 1.2rem; font-size: 0.85rem; }
|
|
.help-drawer .more label {
|
|
display: inline; margin: 0; font-weight: 600; color: var(--accent-text); cursor: pointer;
|
|
}
|
|
.help-close {
|
|
position: absolute; top: 0.8rem; right: 0.8rem; margin: 0; padding: 0.35rem 0.6rem;
|
|
font-size: 0.8rem; font-weight: 600; background: var(--surface-bg); color: var(--fg);
|
|
border: 1px solid var(--control-border); border-radius: 5px; cursor: pointer;
|
|
}
|
|
|
|
/* Phone preview (gallery toggle) and real narrow windows */
|
|
.nav-burger { display: none; }
|
|
|
|
#vp-phone:checked ~ .app {
|
|
position: relative;
|
|
width: 390px; margin: 0.75rem auto 2rem; min-height: 760px;
|
|
border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
|
|
max-height: none;
|
|
}
|
|
#vp-phone:checked ~ .app .nav {
|
|
position: absolute; top: 0; left: 0; bottom: 0;
|
|
height: auto; max-height: none;
|
|
width: min(16rem, 82%); z-index: 20;
|
|
transform: translateX(-110%);
|
|
border-right: 1px solid var(--border); background: var(--card-bg);
|
|
}
|
|
#nav-open:checked ~ .app .nav { transform: translateX(0); }
|
|
#vp-phone:checked ~ .app .phone-bar {
|
|
display: flex; align-items: center; gap: 0.55rem;
|
|
margin: 0; padding: 0.65rem 0.85rem;
|
|
border-bottom: 1px solid var(--border); background: var(--card-bg);
|
|
}
|
|
#vp-phone:checked ~ .app .nav-burger {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 2.1rem; height: 2.1rem; margin: 0; padding: 0;
|
|
border: 1px solid var(--control-border); border-radius: 5px;
|
|
background: var(--surface-bg); cursor: pointer;
|
|
}
|
|
#vp-phone:checked ~ .app .phone-mark { width: 1.7rem; height: 1.7rem; }
|
|
#vp-phone:checked ~ .app .phone-bar .grow { flex: 1; font-weight: 600; }
|
|
#vp-phone:checked ~ .app main { padding: 1.5rem 0.9rem 2rem; }
|
|
#vp-phone:checked ~ .app .desk-only { display: none !important; }
|
|
#vp-phone:checked ~ .app .phone-only { display: block; }
|
|
#vp-phone:checked ~ .app .phone-list { display: block; }
|
|
#vp-phone:checked ~ .app .status-grid { display: flex; flex-direction: column; }
|
|
#vp-phone:checked ~ .app .status-grid .attn { order: -1; }
|
|
#vp-phone:checked ~ .app .pair { grid-template-columns: 1fr; }
|
|
#vp-phone:checked ~ .app .split,
|
|
#vp-phone:checked ~ .app .check-cols,
|
|
#vp-phone:checked ~ .app .field-pair:not(.host-type),
|
|
#vp-phone:checked ~ .app .facts,
|
|
#vp-phone:checked ~ .app .retry-facts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
#vp-phone:checked ~ .app td.subject span { max-width: none; }
|
|
#vp-phone:checked ~ .help-drawer { width: 100vw; }
|
|
|
|
.phone-only { display: none; }
|
|
|
|
@media (max-width: 52rem) {
|
|
.app { min-height: calc(100vh - var(--gallery-h)); }
|
|
.nav {
|
|
position: fixed; top: var(--gallery-h); left: 0; bottom: 0;
|
|
z-index: 20; width: min(16rem, 84vw); max-height: none;
|
|
transform: translateX(-110%);
|
|
border-right: 1px solid var(--border); background: var(--card-bg);
|
|
}
|
|
#nav-open:checked ~ .app .nav { transform: translateX(0); }
|
|
.phone-bar {
|
|
display: flex; align-items: center; gap: 0.55rem;
|
|
margin: 0; padding: 0.65rem 0.85rem;
|
|
border-bottom: 1px solid var(--border); background: var(--card-bg);
|
|
}
|
|
.nav-burger {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 2.1rem; height: 2.1rem; margin: 0; padding: 0;
|
|
border: 1px solid var(--control-border); border-radius: 5px;
|
|
background: var(--surface-bg); cursor: pointer;
|
|
}
|
|
.phone-mark { width: 1.7rem; height: 1.7rem; }
|
|
.phone-bar .grow { flex: 1; font-weight: 600; }
|
|
main { padding: 1.5rem 0.9rem 2rem; }
|
|
.desk-only { display: none !important; }
|
|
.phone-only, .phone-list { display: block; }
|
|
.status-grid { display: flex; flex-direction: column; }
|
|
.status-grid .attn { order: -1; }
|
|
.split, .pair, #settings .split, #backup > .split,
|
|
.check-cols, .field-pair:not(.host-type), .facts, .retry-facts { grid-template-columns: 1fr; }
|
|
.help-drawer { width: 100vw; }
|
|
}
|
|
|
|
/* Index page */
|
|
.wrap { max-width: 58rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
|
|
.wrap > header { border-bottom: 2px solid var(--accent-fill); padding-bottom: 1.5rem; margin-bottom: 0.5rem; }
|
|
.eyebrow {
|
|
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
|
|
text-transform: uppercase; color: var(--accent-text); margin: 0 0 0.7rem;
|
|
}
|
|
.wrap h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 200; }
|
|
.wrap h1 b { font-weight: 600; }
|
|
.wrap > header p { margin: 0; max-width: 62ch; color: var(--muted); }
|
|
.wrap section { border-bottom: 1px solid var(--border); padding: 2.2rem 0; }
|
|
.wrap h2 {
|
|
font-size: 0.8rem; font-weight: 500; margin: 0 0 1.1rem;
|
|
letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); color: var(--muted);
|
|
}
|
|
.wrap h3 { font-size: 1.05rem; font-weight: 600; margin: 1.2rem 0 0.4rem; }
|
|
.note {
|
|
background: #f1eae4; border-left: 2px solid var(--accent-fill);
|
|
padding: 0.9rem 1rem; font-size: 0.92rem; line-height: 1.6; max-width: 64ch; margin-top: 1rem;
|
|
}
|
|
#theme-dark:checked ~ .doc .note { background: #2a1f1b; }
|
|
.compare {
|
|
display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 0.8rem;
|
|
}
|
|
.compare .row {
|
|
font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
|
|
}
|
|
.bar {
|
|
display: flex; height: 2.1rem; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--card-bg);
|
|
}
|
|
.bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.7rem; }
|
|
.bar .navc { width: 14%; background: var(--surface-bg); color: var(--fg); border-right: 1px solid var(--border); }
|
|
.bar .col { background: var(--nav-active-bg); color: var(--accent-text); }
|
|
.bar .empty { flex: 1; background: var(--code-bg); color: var(--muted); }
|
|
.bar .fill { flex: 1; background: var(--st-ok-bg); color: var(--st-ok-fg); }
|
|
.ia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
|
@media (max-width: 40rem) { .ia { grid-template-columns: 1fr; } }
|
|
.ia ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
|
|
.ia li { margin: 0.2rem 0; }
|
|
.screen-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.4rem 1.5rem; }
|
|
.screen-index a { display: block; padding: 0.25rem 0; }
|
|
.icons-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: end; margin-top: 0.8rem; }
|
|
.icon-card {
|
|
background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
|
|
padding: 1rem 1.1rem 0.85rem; text-align: center; min-width: 7.5rem;
|
|
}
|
|
.icon-card svg { width: 1.5rem; height: 1.5rem; display: block; margin: 0 auto 0.45rem; }
|
|
.icon-card span { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
|
|
.mark-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: end; }
|
|
.mark-row figure { margin: 0; }
|
|
.mark-row figcaption { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-top: 0.4rem; }
|
|
|
|
.cta {
|
|
display: inline-block; margin-top: 1rem; padding: 0.65rem 1.2rem;
|
|
background: var(--accent-fill); color: var(--on-accent); text-decoration: none;
|
|
font-weight: 600; border-radius: 5px;
|
|
}
|
|
.cta:hover { background: var(--accent-fill-hover); color: var(--on-accent); }
|
|
.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
|
|
.cta.quiet {
|
|
background: var(--surface-bg); color: var(--accent-text); border: 1px solid var(--control-border);
|
|
}
|
|
.cta.quiet:hover { background: var(--surface-bg-hover); color: var(--accent-text); }
|