docs: draw three panel-redesign directions on the key screens

Stage 1 of the panel redesign: Overview, an outbound domain and sign-in,
each drawn on a ready-made library instead of hand-tuned CSS — A Pico
("Blank"), B Tabler ("Console"), C Bulma ("Counter") — plus a cover sheet
comparing size, JavaScript, CSP fit and the amount of own CSS.

All three share the new information architecture: navigation grouped by
mail direction (Overview, Outbound, Inbound, Server) with a symmetric Log
and Queue on both sides, one block per DNS record, applications as a
table, rarely changed domain settings behind one click.

Mockups only; internal/web is untouched. Pico and Tabler embed data: SVGs
and would need img-src 'self' data: in the CSP; Bulma does not.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
mix
2026-09-21 14:05:13 +03:00
co-authored by Claude Fable 5.1
parent af9867bc2f
commit 2b69605cf9
16 changed files with 1663 additions and 0 deletions
+164
View File
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example.org · Outbound domains · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<header class="sp-bar">
<div class="sp-wrap">
<nav>
<ul>
<li><a class="sp-brand" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a></li>
</ul>
<ul class="sp-sections">
<li><a href="status.html">Overview</a></li>
<li><a href="domain.html" aria-current="true">Outbound</a></li>
<li><a href="#">Inbound</a></li>
<li><a href="#">Server</a></li>
</ul>
<ul class="sp-user">
<li>
<details class="dropdown">
<summary>admin</summary>
<ul dir="rtl">
<li><a href="#">Account</a></li>
<li><a href="#">Help</a></li>
<li><a href="login.html">Sign out</a></li>
</ul>
</details>
</li>
</ul>
</nav>
</div>
</header>
<div class="sp-pages">
<div class="sp-wrap">
<a href="#" aria-current="true">Domains</a>
<a href="#">Log</a>
<a href="#">Queue</a>
<a href="#">DMARC reports</a>
</div>
</div>
<main class="sp-wrap">
<div class="sp-head">
<div>
<p class="sp-kicker"><a href="#">Outbound domains</a> /</p>
<h1>example.org</h1>
</div>
<small>1 284 messages in 30 days · peak 96 msg/h · average 1.8 msg/h</small>
</div>
<section class="sp-sheet">
<header><span class="sp-no">01</span><h2>Connection</h2><small>The same for every domain</small></header>
<div class="sp-body sp-cols">
<dl class="sp-kv">
<dt>Server</dt>
<dd><span class="sp-value">mail.example.org</span><button type="button" class="outline sp-copy">Copy</button></dd>
</dl>
<dl class="sp-kv">
<dt>Ports</dt>
<dd><span class="sp-value">465 — SSL/TLS (implicit)<br>587 — STARTTLS (submission)</span></dd>
</dl>
</div>
</section>
<section class="sp-sheet">
<header>
<span class="sp-no">02</span><h2>DNS records</h2>
<small>Checked 3 min ago</small>
<form method="post" action="#"><button type="submit" class="outline secondary sp-btn-sm">Re-check</button></form>
</header>
<div class="sp-record">
<div class="sp-record-head"><h3>DKIM</h3><span class="sp-tag ok">published</span><small>Not a secret · selector <code>sp2026</code></small></div>
<dl class="sp-kv">
<dt>Host</dt><dd><span class="sp-value">sp2026._domainkey.example.org</span><button type="button" class="outline sp-copy">Copy</button></dd>
<dt>Type</dt><dd><span class="sp-value plain">TXT</span></dd>
<dt>Value</dt><dd><span class="sp-value">v=DKIM1; k=rsa; p=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx3kqV0mJd8e2f1Yb7Qw5uT9sLr4nHc6pZaXo1vKe0yWm2gBt8RjN5dCq3hUf7lPs9aEi4oMz6xTb1kGv0nYw…IDAQAB</span><button type="button" class="outline sp-copy">Copy</button></dd>
</dl>
</div>
<div class="sp-record">
<div class="sp-record-head"><h3>SPF</h3><span class="sp-tag fail">mismatch</span><small>Merge into the existing record — never publish a second one</small></div>
<dl class="sp-kv">
<dt>Host</dt><dd><span class="sp-value">example.org</span><button type="button" class="outline sp-copy">Copy</button></dd>
<dt>Type</dt><dd><span class="sp-value plain">TXT</span></dd>
<dt>Value</dt><dd><span class="sp-value">v=spf1 ip4:203.0.113.25 ~all</span><button type="button" class="outline sp-copy">Copy</button></dd>
<dt>In DNS now</dt><dd><span class="sp-value">v=spf1 include:_spf.google.com ~all</span></dd>
</dl>
<p class="sp-note fail">The published record does not authorize 203.0.113.25. Add <code>ip4:203.0.113.25</code> before <code>~all</code>.</p>
</div>
<div class="sp-record">
<div class="sp-record-head"><h3>DMARC</h3><span class="sp-tag ok">published</span><small>Report address from <a href="#">Settings</a></small></div>
<dl class="sp-kv">
<dt>Host</dt><dd><span class="sp-value">_dmarc.example.org</span><button type="button" class="outline sp-copy">Copy</button></dd>
<dt>Type</dt><dd><span class="sp-value plain">TXT</span></dd>
<dt>Value</dt><dd><span class="sp-value">v=DMARC1; p=none; rua=mailto:dmarc@mail.example.org</span><button type="button" class="outline sp-copy">Copy</button></dd>
</dl>
<p class="sp-note"><code>p=none</code> does not affect delivery. Tighten to <code>quarantine</code>, then <code>reject</code>, once the <a href="#">reports</a> look clean.</p>
</div>
</section>
<section class="sp-sheet">
<header>
<span class="sp-no">03</span><h2>Applications</h2>
<small>SASL logins that may send as this domain</small>
<a href="#" role="button" class="sp-btn-sm">Add application</a>
</header>
<table class="sp-apps">
<thead><tr><th>Login</th><th>May send as</th><th>30 days</th><th>Limits</th><th></th></tr></thead>
<tbody>
<tr>
<td class="sp-login">prod-server</td>
<td>*@example.org</td>
<td>1 102 msg · peak 96/h</td>
<td><span class="sp-tag ok">200 / h</span></td>
<td><a class="sp-link-btn" href="#">Edit</a><a class="sp-link-btn" href="#">New password</a><a class="sp-link-btn danger" href="#">Delete</a></td>
</tr>
<tr>
<td class="sp-login">alerts</td>
<td>alerts@example.org, noc@example.org</td>
<td>182 msg · peak 14/h</td>
<td><span class="sp-tag">domain</span> <span class="sp-tag ok">2 IPs</span></td>
<td><a class="sp-link-btn" href="#">Edit</a><a class="sp-link-btn" href="#">New password</a><a class="sp-link-btn danger" href="#">Delete</a></td>
</tr>
</tbody>
</table>
</section>
<section class="sp-sheet sp-ledger">
<header><span class="sp-no">04</span><h2>Domain settings</h2><small>Rarely changed</small></header>
<details>
<summary><strong>DMARC reports</strong><span class="sp-muted">Same as Settings — dmarc@mail.example.org</span><span class="sp-tag">default</span></summary>
<div class="sp-detail"><p class="sp-muted">The form opens here.</p></div>
</details>
<details>
<summary><strong>Rate limit</strong><span class="sp-muted">Auto ×3 — 288 messages / hour, recalculated yesterday</span><span class="sp-tag ok">active</span></summary>
<div class="sp-detail"><p class="sp-muted">The form opens here.</p></div>
</details>
<details>
<summary><strong>Export</strong><span class="sp-muted">DKIM key and applications as one file, optionally encrypted</span><span></span></summary>
<div class="sp-detail"><p class="sp-muted">The form opens here.</p></div>
</details>
<details>
<summary><strong>Delete domain</strong><span class="sp-muted">Removes the DKIM key and both applications</span><span></span></summary>
<div class="sp-detail"><p class="sp-muted">The confirmation opens here.</p></div>
</details>
</section>
<footer class="sp-foot">
SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty
</footer>
</main>
</body>
</html>
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="sp-signin">
<div class="sp-signin-card">
<img src="../../selfpost-stamp.svg" alt="SelfPost">
<section class="sp-sheet">
<header><span class="sp-no">→</span><h2>Sign in</h2></header>
<div class="sp-body">
<form method="post" action="status.html">
<label for="username">Username</label>
<input id="username" name="username" autocomplete="username" required>
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required>
<button type="submit">Sign in</button>
</form>
</div>
</section>
<p class="sp-tagline">YOUR SMTP. YOUR RULES.</p>
</div>
</div>
<footer class="sp-wrap sp-foot">
© 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty
</footer>
</body>
</html>
+136
View File
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<header class="sp-bar">
<div class="sp-wrap">
<nav>
<ul>
<li><a class="sp-brand" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a></li>
</ul>
<ul class="sp-sections">
<li><a href="status.html" aria-current="page">Overview</a></li>
<li><a href="domain.html">Outbound</a></li>
<li><a href="#">Inbound</a></li>
<li><a href="#">Server</a></li>
</ul>
<ul class="sp-user">
<li>
<details class="dropdown">
<summary>admin</summary>
<ul dir="rtl">
<li><a href="#">Account</a></li>
<li><a href="#">Help</a></li>
<li><a href="login.html">Sign out</a></li>
</ul>
</details>
</li>
</ul>
</nav>
</div>
</header>
<main class="sp-wrap">
<div class="sp-head">
<div>
<p class="sp-kicker">mail.example.org</p>
<h1>Overview</h1>
</div>
<small>Updated 14:02:31 UTC · refreshes every 10 s</small>
</div>
<section class="sp-sheet sp-verdict">
<div class="sp-postmark warn"><span>SELFPOST</span><b>WARN</b><span>1 OF 6 CHECKS</span></div>
<div>
<h2>Mail is flowing. One thing needs attention.</h2>
<p>The TLS certificate expires in 12 days and has not renewed yet. Everything else is healthy.</p>
</div>
</section>
<section class="sp-sheet sp-ledger">
<header><span class="sp-no">01</span><h2>Checks</h2><small>Open a row for its detail</small></header>
<details>
<summary><strong>Processes</strong><span class="sp-muted">5 of 5 running</span><span class="sp-tag ok">ok</span></summary>
<div class="sp-detail">
<table>
<thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>postfix</td><td><span class="sp-tag ok">running</span></td><td class="sp-muted">pid 41, uptime 18 days</td></tr>
<tr><td>opendkim</td><td><span class="sp-tag ok">running</span></td><td class="sp-muted">pid 39, uptime 18 days</td></tr>
</tbody>
</table>
</div>
</details>
<details open>
<summary><strong>TLS certificate</strong><span class="sp-muted">Expires in 12 days — renewal has not run</span><span class="sp-tag warn">warn</span></summary>
<div class="sp-detail">
<dl class="sp-kv">
<dt>Expires</dt><dd><span class="sp-value">2026-10-03 09:14 UTC</span></dd>
<dt>Names</dt><dd><span class="sp-value">mail.example.org</span></dd>
</dl>
<p class="sp-note">Renewal normally runs 30 days before expiry. Check that port 80 is reachable and look for <code>acme</code> lines in the <a href="#">system log</a>.</p>
</div>
</details>
<details>
<summary><strong>Machine</strong><span class="sp-muted">CPU 12 % · memory 41 % · ↓ 18 kB/s ↑ 44 kB/s</span><span class="sp-tag ok">ok</span></summary>
<div class="sp-detail">
<table>
<thead><tr><th>Resource</th><th>Usage</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>CPU</td><td><meter value="12" min="0" max="100" low="70" high="90" optimum="10"></meter>12 %</td><td class="sp-muted">2 cores, load 0.21</td></tr>
<tr><td>Memory</td><td><meter value="41" min="0" max="100" low="70" high="90" optimum="10"></meter>41 %</td><td class="sp-muted">812 MB of 1.9 GB</td></tr>
<tr><td>Network</td><td>↓ 18 kB/s · ↑ 44 kB/s</td><td class="sp-muted">eth0: 2.1 GB in, 6.4 GB out</td></tr>
</tbody>
</table>
</div>
</details>
<details>
<summary><strong>Queues</strong><span class="sp-muted">Outbound empty · inbound empty</span><span class="sp-tag ok">ok</span></summary>
<div class="sp-detail"><p>No messages are waiting. Open the <a href="#">outbound queue</a> or the <a href="#">inbound queue</a>.</p></div>
</details>
<details>
<summary><strong>Milter sockets</strong><span class="sp-muted">2 of 2 answering</span><span class="sp-tag ok">ok</span></summary>
<div class="sp-detail">
<table>
<thead><tr><th>Milter</th><th>State</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>opendkim</td><td><span class="sp-tag ok">ok</span></td><td class="sp-muted">inet:127.0.0.1:8891</td></tr>
<tr><td>journal-milter</td><td><span class="sp-tag ok">ok</span></td><td class="sp-muted">unix:/run/selfpost/journal.sock</td></tr>
</tbody>
</table>
</div>
</details>
<details>
<summary><strong>Hostname and reverse DNS</strong><span class="sp-muted">mail.example.org ⇄ 203.0.113.25</span><span class="sp-tag ok">ok</span></summary>
<div class="sp-detail">
<dl class="sp-kv">
<dt>Hostname</dt><dd><span class="sp-value">mail.example.org</span></dd>
<dt>Lookup</dt><dd><span class="sp-value">mail.example.org → 203.0.113.25<br>203.0.113.25 → mail.example.org</span></dd>
</dl>
<form method="post" action="#"><button type="submit" class="outline secondary sp-btn-sm">Re-check DNS</button></form>
</div>
</details>
</section>
<footer class="sp-foot">
SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty
</footer>
</main>
</body>
</html>
+206
View File
@@ -0,0 +1,206 @@
/* Direction A — "Blank" (the postal form). Pico CSS v2 carries every generic
control (type, buttons, inputs, tables, details, dropdown); this file maps
the brand onto Pico's variables and adds only what is SelfPost's own:
the two-row header, the sheet, numbered form sections, the postmark and
the DNS record block. */
/* :root[...] rather than [data-theme=light] alone: Pico declares its light
palette on :root:not([data-theme=dark]), which a bare attribute selector
loses to. */
:root[data-theme=light] {
--pico-font-family-sans-serif: var(--sp-sans);
--pico-font-family-monospace: var(--sp-mono);
--pico-font-family: var(--sp-sans);
--pico-border-radius: 2px;
--pico-spacing: .9rem;
--pico-typography-spacing-vertical: .9rem;
--pico-form-element-spacing-vertical: .5rem;
--pico-form-element-spacing-horizontal: .75rem;
--pico-background-color: var(--sp-paper);
--pico-color: var(--sp-ink);
--pico-muted-color: var(--sp-muted);
--pico-muted-border-color: var(--sp-rule);
--pico-h1-color: var(--sp-ink); --pico-h2-color: var(--sp-ink);
--pico-h3-color: var(--sp-ink); --pico-h4-color: var(--sp-ink);
--pico-primary: var(--sp-brick);
--pico-primary-background: var(--sp-brick);
--pico-primary-border: var(--sp-brick);
--pico-primary-underline: rgb(122 59 46 / .35);
--pico-primary-hover: var(--sp-brick-dark);
--pico-primary-hover-background: var(--sp-brick-dark);
--pico-primary-hover-border: var(--sp-brick-dark);
--pico-primary-hover-underline: var(--sp-brick-dark);
--pico-primary-focus: rgb(122 59 46 / .25);
--pico-primary-inverse: #fff;
--pico-secondary: var(--sp-ink-2);
--pico-secondary-background: var(--sp-ink-2);
--pico-secondary-border: var(--sp-ink-2);
--pico-secondary-hover: var(--sp-ink);
--pico-secondary-hover-background: var(--sp-ink);
--pico-secondary-hover-border: var(--sp-ink);
--pico-secondary-focus: rgb(18 22 28 / .2);
--pico-secondary-inverse: #fff;
--pico-form-element-background-color: #fff;
--pico-form-element-border-color: var(--sp-rule-strong);
--pico-form-element-active-border-color: var(--sp-brick);
--pico-form-element-focus-color: rgb(122 59 46 / .25);
--pico-table-border-color: var(--sp-rule);
--pico-code-background-color: var(--sp-well);
--pico-code-color: var(--sp-ink);
--pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: var(--sp-rule);
--pico-dropdown-hover-background-color: var(--sp-brick-tint);
}
/* Pico grows the root font with the viewport (up to 131%). An ops panel wants
one size everywhere. */
:root { font-size: 15px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
h1 { font-size: 1.7rem; font-weight: 600; margin: 0; }
small, .sp-muted { color: var(--sp-muted); }
code, .sp-mono { font-family: var(--sp-mono); font-size: .88em; }
/* ---- header: sections on the first row, the section's pages on the second */
.sp-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.sp-bar { background: var(--sp-sheet); border-bottom: 1px solid var(--sp-rule); }
.sp-bar nav { align-items: center; }
.sp-bar nav li { padding-block: .45rem; }
.sp-brand img { height: 46px; width: auto; display: block; }
.sp-sections a {
font-family: var(--sp-mono); font-size: .8rem; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
color: var(--sp-muted); padding: .5rem .8rem; margin: 0; border-radius: 0;
}
.sp-sections a:hover { color: var(--sp-ink); }
.sp-sections a[aria-current] { color: var(--sp-brick); box-shadow: inset 0 -3px 0 var(--sp-brick); }
.sp-user summary { font-size: .9rem; }
.sp-pages { background: var(--sp-paper); border-bottom: 1px solid var(--sp-rule); }
.sp-pages .sp-wrap { display: flex; gap: 1.6rem; }
.sp-pages a { color: var(--sp-muted); text-decoration: none; padding: .6rem 0; font-size: .95rem; }
.sp-pages a:hover { color: var(--sp-ink); }
.sp-pages a[aria-current] { color: var(--sp-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sp-ink); }
/* ---- the sheet: one column, one width, every page */
main.sp-wrap { flex: 1; padding-block: 1.8rem 2.5rem; }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.sp-head .sp-kicker { font-family: var(--sp-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); margin: 0 0 .15rem; }
.sp-head .sp-kicker a { color: inherit; }
.sp-head-actions { display: flex; gap: .5rem; align-items: center; }
.sp-head-actions > * { margin: 0; }
.sp-sheet { background: var(--sp-sheet); border: 1px solid var(--sp-rule); margin-bottom: 1.4rem; }
.sp-sheet > header {
display: flex; align-items: baseline; gap: .8rem; padding: .7rem 1.2rem;
border-bottom: 1px solid var(--sp-rule);
}
.sp-sheet > header .sp-no { font-family: var(--sp-mono); font-size: .75rem; color: var(--sp-brick); font-weight: 600; }
.sp-sheet > header h2 {
font-family: var(--sp-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; margin: 0; flex: 1;
}
.sp-sheet > header small { font-size: .85rem; }
.sp-sheet > .sp-body { padding: 1.1rem 1.2rem; }
.sp-sheet > .sp-body > :last-child { margin-bottom: 0; }
.sp-foot { color: var(--sp-muted); font-size: .8rem; border-top: 1px solid var(--sp-rule); padding-block: 1rem; }
.sp-foot a { color: inherit; }
/* ---- status tag and the postmark */
.sp-tag {
display: inline-block; font-family: var(--sp-mono); font-size: .72rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; padding: .1rem .5rem;
border: 1px solid var(--sp-idle-rule); background: var(--sp-idle-bg); color: var(--sp-idle);
border-radius: 2px; white-space: nowrap; text-decoration: none;
}
.sp-tag.ok { color: var(--sp-ok); background: var(--sp-ok-bg); border-color: var(--sp-ok-rule); }
.sp-tag.warn { color: var(--sp-warn); background: var(--sp-warn-bg); border-color: var(--sp-warn-rule); }
.sp-tag.fail { color: var(--sp-fail); background: var(--sp-fail-bg); border-color: var(--sp-fail-rule); }
.sp-verdict { display: flex; align-items: center; gap: 1.5rem; padding: 1.3rem 1.4rem; }
.sp-verdict h2 { margin: 0 0 .2rem; font-size: 1.35rem; font-weight: 600; }
.sp-verdict p { margin: 0; color: var(--sp-muted); }
.sp-postmark {
flex: none; width: 5.6rem; height: 5.6rem; border-radius: 50%;
border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px;
display: grid; place-content: center; text-align: center; transform: rotate(-9deg);
font-family: var(--sp-mono); font-weight: 600; letter-spacing: .08em; line-height: 1.15;
color: var(--sp-ok);
}
.sp-postmark.warn { color: var(--sp-warn); }
.sp-postmark.fail { color: var(--sp-fail); }
.sp-postmark b { font-size: 1.25rem; display: block; }
.sp-postmark span { font-size: .55rem; display: block; }
/* ---- ledger: one row per check, the row opens into its detail */
.sp-ledger details { margin: 0; padding: 0; border-bottom: 1px solid var(--sp-rule); }
.sp-ledger details:last-child { border-bottom: 0; }
.sp-ledger summary {
display: grid; grid-template-columns: 13rem 1fr auto 1.2rem; gap: 1rem; align-items: center;
padding: .75rem 1.2rem; margin: 0; color: var(--sp-ink);
}
.sp-ledger summary::after { grid-column: 4; margin: 0; float: none; }
.sp-ledger summary:hover { background: var(--sp-paper); }
.sp-ledger summary strong { font-weight: 600; }
.sp-ledger summary span.sp-muted { font-size: .93rem; }
.sp-ledger .sp-detail { padding: .2rem 1.2rem 1.1rem 15.2rem; }
.sp-ledger .sp-detail table { margin: 0; font-size: .93rem; }
.sp-ledger .sp-detail > :last-child { margin-bottom: 0; }
.sp-ledger meter { width: 9rem; height: .7rem; vertical-align: middle; margin-right: .5rem; }
/* ---- label / value / copy: the DNS record block and connection settings */
.sp-record { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--sp-rule); }
.sp-record:last-child { border-bottom: 0; }
.sp-record-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.sp-record-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sp-record-head small { margin-left: auto; }
.sp-kv { display: grid; grid-template-columns: 6.5rem 1fr; gap: .45rem 1rem; align-items: start; margin: 0; }
.sp-kv dt {
font-family: var(--sp-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--sp-muted); padding-top: .5rem; margin: 0;
}
.sp-kv dd { margin: 0; display: flex; gap: .4rem; align-items: stretch; min-width: 0; }
.sp-value {
flex: 1; min-width: 0; font-family: var(--sp-mono); font-size: .86rem; line-height: 1.5;
background: var(--sp-well); border: 1px solid var(--sp-rule); padding: .4rem .65rem;
overflow-wrap: anywhere; border-radius: 2px;
}
.sp-value.plain { background: none; border-color: transparent; padding-left: 0; font-family: var(--sp-sans); font-size: .95rem; }
.sp-copy {
flex: none; align-self: flex-start; height: 2.15rem; margin: 0; padding: 0 .7rem; font-size: .8rem;
--pico-background-color: #fff; --pico-border-color: var(--sp-rule-strong); --pico-color: var(--sp-ink-2);
}
.sp-copy:hover { --pico-background-color: var(--sp-paper); --pico-border-color: var(--sp-ink-2); --pico-color: var(--sp-ink); }
.sp-note { margin: .7rem 0 0 7.5rem; font-size: .9rem; color: var(--sp-muted); }
.sp-note.fail { color: var(--sp-fail); }
.sp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 2.4rem; }
/* ---- applications */
.sp-apps { margin: 0; font-size: .95rem; }
.sp-apps td, .sp-apps th { padding-inline: 1.2rem .4rem; vertical-align: middle; }
.sp-apps th { font-family: var(--sp-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); font-weight: 400; }
.sp-apps td:last-child { text-align: right; padding-right: 1.2rem; white-space: nowrap; }
.sp-apps .sp-login { font-family: var(--sp-mono); font-weight: 600; }
.sp-link-btn { font-size: .9rem; margin-left: .9rem; }
.sp-link-btn.danger { color: var(--sp-fail); --pico-underline: rgb(180 35 24 / .35); text-decoration-color: rgb(180 35 24 / .35); }
.sp-btn-sm { padding: .35rem .8rem; font-size: .9rem; margin: 0; width: auto; }
/* ---- sign-in */
.sp-signin { flex: 1; display: grid; place-content: center; padding: 2rem 1.5rem; }
.sp-signin-card { width: 23rem; max-width: 100%; }
.sp-signin-card img { display: block; width: 15rem; height: auto; margin: 0 auto 1.6rem; }
.sp-signin-card .sp-body { padding: 1.4rem 1.4rem 1.2rem; }
.sp-signin-card button { margin-bottom: 0; }
.sp-tagline { text-align: center; font-family: var(--sp-mono); font-size: .75rem; letter-spacing: .16em; color: var(--sp-muted); margin-top: 1.2rem; }
@media (max-width: 48rem) {
.sp-ledger summary { grid-template-columns: 1fr auto 1.2rem; }
.sp-ledger summary span.sp-muted { grid-column: 1 / -1; grid-row: 2; }
.sp-ledger summary::after { grid-column: 3; }
.sp-ledger .sp-detail { padding-left: 1.2rem; }
.sp-kv { grid-template-columns: 1fr; gap: .15rem; }
.sp-kv dt { padding-top: .5rem; }
.sp-note { margin-left: 0; }
.sp-pages .sp-wrap { overflow-x: auto; white-space: nowrap; }
}
+212
View File
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example.org · Outbound domains · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.1/dist/css/tabler.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="page">
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a>
<div class="navbar-collapse collapse show">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="status.html"><span class="nav-link-icon"><i class="ti ti-activity-heartbeat"></i></span><span class="nav-link-title">Overview</span></a></li>
<li class="sp-nav-label">Outbound</li>
<li class="nav-item active"><a class="nav-link" href="domain.html"><span class="nav-link-icon"><i class="ti ti-world-upload"></i></span><span class="nav-link-title">Domains</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-list-details"></i></span><span class="nav-link-title">Log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-stack-2"></i></span><span class="nav-link-title">Queue</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-report-analytics"></i></span><span class="nav-link-title">DMARC reports</span></a></li>
<li class="sp-nav-label">Inbound</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-world-download"></i></span><span class="nav-link-title">Domains</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-list-details"></i></span><span class="nav-link-title">Log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-stack-2"></i></span><span class="nav-link-title">Queue</span></a></li>
<li class="sp-nav-label">Server</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-file-text"></i></span><span class="nav-link-title">System log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-archive"></i></span><span class="nav-link-title">Backup</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-users"></i></span><span class="nav-link-title">Users</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-settings"></i></span><span class="nav-link-title">Settings</span></a></li>
</ul>
<ul class="navbar-nav sp-nav-foot">
<li class="sp-nav-user">Signed in as admin</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-user-circle"></i></span><span class="nav-link-title">Account</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-help"></i></span><span class="nav-link-title">Help</span></a></li>
<li class="nav-item"><a class="nav-link" href="login.html"><span class="nav-link-icon"><i class="ti ti-logout"></i></span><span class="nav-link-title">Sign out</span></a></li>
</ul>
</div>
</div>
</aside>
<div class="page-wrapper">
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<div class="page-pretitle"><a href="#" class="text-reset">Outbound domains</a> /</div>
<h2 class="page-title">example.org <span class="badge bg-red-lt ms-2">DNS: 1 mismatch</span></h2>
</div>
<div class="col-auto">
<div class="btn-list">
<form method="post" action="#"><button type="submit" class="btn"><i class="ti ti-refresh me-1"></i>Re-check DNS</button></form>
<a href="#" class="btn btn-primary"><i class="ti ti-plus me-1"></i>Add application</a>
</div>
</div>
</div>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="row row-cards">
<div class="col-lg-8">
<div class="card">
<div class="card-header"><h3 class="card-title">DNS records</h3><div class="card-actions text-secondary small">Checked 3 min ago</div></div>
<div class="card-body sp-record">
<div class="d-flex align-items-center mb-3">
<h4 class="m-0 me-2">DKIM</h4><span class="badge bg-green-lt">published</span>
<span class="ms-auto text-secondary small">Not a secret · selector <code>sp2026</code></span>
</div>
<div class="row g-3">
<div class="col-md-9">
<label class="form-label">Host / name</label>
<div class="input-group"><input class="form-control" readonly value="sp2026._domainkey.example.org"><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
<div class="col-md-3">
<label class="form-label">Type</label>
<input class="form-control" readonly value="TXT">
</div>
<div class="col-12">
<label class="form-label">Value to publish</label>
<div class="input-group"><textarea class="form-control" rows="3" readonly>v=DKIM1; k=rsa; p=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx3kqV0mJd8e2f1Yb7Qw5uT9sLr4nHc6pZaXo1vKe0yWm2gBt8RjN5dCq3hUf7lPs9aEi4oMz6xTb1kGv0nYw…IDAQAB</textarea><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
</div>
</div>
<div class="card-body sp-record">
<div class="d-flex align-items-center mb-3">
<h4 class="m-0 me-2">SPF</h4><span class="badge bg-red-lt">mismatch</span>
<span class="ms-auto text-secondary small">Merge into the existing record — never publish a second one</span>
</div>
<div class="row g-3">
<div class="col-md-9">
<label class="form-label">Host / name</label>
<div class="input-group"><input class="form-control" readonly value="example.org"><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
<div class="col-md-3">
<label class="form-label">Type</label>
<input class="form-control" readonly value="TXT">
</div>
<div class="col-12">
<label class="form-label">Value to publish</label>
<div class="input-group"><input class="form-control" readonly value="v=spf1 ip4:203.0.113.25 ~all"><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
<div class="col-12">
<label class="form-label">In DNS now</label>
<input class="form-control" readonly value="v=spf1 include:_spf.google.com ~all">
<div class="text-danger small mt-2">The published record does not authorize 203.0.113.25. Add <code>ip4:203.0.113.25</code> before <code>~all</code>.</div>
</div>
</div>
</div>
<div class="card-body sp-record">
<div class="d-flex align-items-center mb-3">
<h4 class="m-0 me-2">DMARC</h4><span class="badge bg-green-lt">published</span>
<span class="ms-auto text-secondary small">Report address from <a href="#">Settings</a></span>
</div>
<div class="row g-3">
<div class="col-md-9">
<label class="form-label">Host / name</label>
<div class="input-group"><input class="form-control" readonly value="_dmarc.example.org"><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
<div class="col-md-3">
<label class="form-label">Type</label>
<input class="form-control" readonly value="TXT">
</div>
<div class="col-12">
<label class="form-label">Value to publish</label>
<div class="input-group"><input class="form-control" readonly value="v=DMARC1; p=none; rua=mailto:dmarc@mail.example.org"><button class="btn" type="button"><i class="ti ti-copy me-1"></i>Copy</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-3">
<div class="card-header"><h3 class="card-title">Connection</h3></div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item"><div class="datagrid-title">Server</div><div class="datagrid-content font-monospace">mail.example.org</div></div>
<div class="datagrid-item"><div class="datagrid-title">Ports</div><div class="datagrid-content font-monospace">465 SSL/TLS<br>587 STARTTLS</div></div>
</div>
<p class="text-secondary small mt-3 mb-0">The same for every domain. Authenticate with an application login.</p>
</div>
</div>
<div class="card mb-3">
<div class="card-header"><h3 class="card-title">Sent, 30 days</h3></div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item"><div class="datagrid-title">Messages</div><div class="datagrid-content h2 m-0">1 284</div></div>
<div class="datagrid-item"><div class="datagrid-title">Peak</div><div class="datagrid-content h2 m-0">96 <span class="text-secondary fs-5">/h</span></div></div>
<div class="datagrid-item"><div class="datagrid-title">Average</div><div class="datagrid-content h2 m-0">1.8 <span class="text-secondary fs-5">/h</span></div></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><h3 class="card-title">Domain settings</h3></div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><div><div>DMARC reports</div><div class="text-secondary small">Same as Settings</div></div><i class="ti ti-chevron-right ms-auto text-secondary"></i></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><div><div>Rate limit <span class="badge bg-green-lt ms-1">active</span></div><div class="text-secondary small">Auto ×3 — 288 messages / hour</div></div><i class="ti ti-chevron-right ms-auto text-secondary"></i></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"><div><div>Export</div><div class="text-secondary small">Key and applications as one file</div></div><i class="ti ti-chevron-right ms-auto text-secondary"></i></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-danger"><div>Delete domain</div><i class="ti ti-chevron-right ms-auto"></i></a>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header"><h3 class="card-title">Applications</h3><div class="card-actions text-secondary small">SASL logins that may send as this domain</div></div>
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead><tr><th>Login</th><th>May send as</th><th>30 days</th><th>Limits</th><th class="w-1"></th></tr></thead>
<tbody>
<tr>
<td class="font-monospace fw-semibold">prod-server</td><td>*@example.org</td><td class="text-secondary">1 102 msg · peak 96/h</td>
<td><span class="badge bg-green-lt">200 / h</span></td>
<td><div class="btn-list flex-nowrap"><a href="#" class="btn btn-sm">Edit</a><a href="#" class="btn btn-sm">New password</a><a href="#" class="btn btn-sm btn-ghost-danger">Delete</a></div></td>
</tr>
<tr>
<td class="font-monospace fw-semibold">alerts</td><td>alerts@example.org, noc@example.org</td><td class="text-secondary">182 msg · peak 14/h</td>
<td><span class="badge bg-secondary-lt">domain</span> <span class="badge bg-green-lt">2 IPs</span></td>
<td><div class="btn-list flex-nowrap"><a href="#" class="btn btn-sm">Edit</a><a href="#" class="btn btn-sm">New password</a><a href="#" class="btn btn-sm btn-ghost-danger">Delete</a></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container-xl sp-foot">SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</div>
</footer>
</div>
</div>
</body>
</html>
+36
View File
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.1/dist/css/tabler.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body class="d-flex flex-column">
<div class="page page-center">
<div class="container container-tight py-4">
<div class="text-center mb-4"><img class="sp-signin-mark" src="../../selfpost-stamp.svg" alt="SelfPost"></div>
<div class="card card-md">
<div class="card-body">
<h2 class="h2 text-center mb-4">Sign in</h2>
<form method="post" action="status.html">
<div class="mb-3">
<label class="form-label" for="username">Username</label>
<input class="form-control" id="username" name="username" autocomplete="username" required>
</div>
<div class="mb-2">
<label class="form-label" for="password">Password</label>
<input class="form-control" id="password" name="password" type="password" autocomplete="current-password" required>
</div>
<div class="form-footer"><button type="submit" class="btn btn-primary w-100">Sign in</button></div>
</form>
</div>
</div>
<div class="text-center sp-tagline mt-4">YOUR SMTP. YOUR RULES.</div>
<div class="text-center sp-foot mt-3">© 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</div>
</div>
</div>
</body>
</html>
+168
View File
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.1/dist/css/tabler.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="page">
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a>
<div class="navbar-collapse collapse show">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="status.html"><span class="nav-link-icon"><i class="ti ti-activity-heartbeat"></i></span><span class="nav-link-title">Overview</span></a></li>
<li class="sp-nav-label">Outbound</li>
<li class="nav-item"><a class="nav-link" href="domain.html"><span class="nav-link-icon"><i class="ti ti-world-upload"></i></span><span class="nav-link-title">Domains</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-list-details"></i></span><span class="nav-link-title">Log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-stack-2"></i></span><span class="nav-link-title">Queue</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-report-analytics"></i></span><span class="nav-link-title">DMARC reports</span></a></li>
<li class="sp-nav-label">Inbound</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-world-download"></i></span><span class="nav-link-title">Domains</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-list-details"></i></span><span class="nav-link-title">Log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-stack-2"></i></span><span class="nav-link-title">Queue</span></a></li>
<li class="sp-nav-label">Server</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-file-text"></i></span><span class="nav-link-title">System log</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-archive"></i></span><span class="nav-link-title">Backup</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-users"></i></span><span class="nav-link-title">Users</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-settings"></i></span><span class="nav-link-title">Settings</span></a></li>
</ul>
<ul class="navbar-nav sp-nav-foot">
<li class="sp-nav-user">Signed in as admin</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-user-circle"></i></span><span class="nav-link-title">Account</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="nav-link-icon"><i class="ti ti-help"></i></span><span class="nav-link-title">Help</span></a></li>
<li class="nav-item"><a class="nav-link" href="login.html"><span class="nav-link-icon"><i class="ti ti-logout"></i></span><span class="nav-link-title">Sign out</span></a></li>
</ul>
</div>
</div>
</aside>
<div class="page-wrapper">
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<div class="page-pretitle">mail.example.org</div>
<h2 class="page-title">Overview</h2>
</div>
<div class="col-auto text-secondary small">Updated 14:02:31 UTC · refreshes every 10 s</div>
</div>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="alert alert-warning bg-white" role="alert">
<div class="d-flex">
<div><i class="ti ti-alert-triangle alert-icon"></i></div>
<div>
<h4 class="alert-title">Mail is flowing. One thing needs attention.</h4>
<div class="text-secondary">The TLS certificate expires in 12 days and has not renewed yet.</div>
</div>
</div>
</div>
<div class="row row-cards mb-3">
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-cpu sp-tile-icon"></i><div><div class="fw-semibold">Machine</div><div class="text-secondary small">CPU 12 % · mem 41 %</div></div><span class="status status-green"><span class="status-dot"></span>OK</span></div></div></div>
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-server-cog sp-tile-icon"></i><div><div class="fw-semibold">Processes</div><div class="text-secondary small">5 of 5 running</div></div><span class="status status-green"><span class="status-dot"></span>OK</span></div></div></div>
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-stack-2 sp-tile-icon"></i><div><div class="fw-semibold">Queues</div><div class="text-secondary small">Both empty</div></div><span class="status status-green"><span class="status-dot"></span>OK</span></div></div></div>
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-certificate sp-tile-icon"></i><div><div class="fw-semibold">TLS certificate</div><div class="text-secondary small">Expires in 12 days</div></div><span class="status status-yellow"><span class="status-dot"></span>Warn</span></div></div></div>
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-plug-connected sp-tile-icon"></i><div><div class="fw-semibold">Milter sockets</div><div class="text-secondary small">2 of 2 answering</div></div><span class="status status-green"><span class="status-dot"></span>OK</span></div></div></div>
<div class="col-sm-6 col-lg-4"><div class="card card-sm sp-tile"><div class="card-body"><i class="ti ti-arrows-exchange sp-tile-icon"></i><div><div class="fw-semibold">Reverse DNS</div><div class="text-secondary small">Forward = reverse</div></div><span class="status status-green"><span class="status-dot"></span>OK</span></div></div></div>
</div>
<div class="row row-deck row-cards">
<div class="col-lg-6">
<div class="card">
<div class="card-header"><h3 class="card-title">Machine</h3><div class="card-actions"><span class="badge bg-green-lt">ok</span></div></div>
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead><tr><th>Resource</th><th>Usage</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>CPU</td><td><progress class="sp-bar" value="12" max="100"></progress>12 %</td><td class="text-secondary">2 cores, load 0.21</td></tr>
<tr><td>Memory</td><td><progress class="sp-bar" value="41" max="100"></progress>41 %</td><td class="text-secondary">812 MB of 1.9 GB</td></tr>
<tr><td>Network</td><td>↓ 18 kB/s · ↑ 44 kB/s</td><td class="text-secondary">eth0: 2.1 GB in, 6.4 GB out</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header"><h3 class="card-title">Processes</h3><div class="card-actions"><span class="badge bg-green-lt">ok</span></div></div>
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>postfix</td><td><span class="badge bg-green-lt">running</span></td><td class="text-secondary">pid 41, uptime 18 days</td></tr>
<tr><td>opendkim</td><td><span class="badge bg-green-lt">running</span></td><td class="text-secondary">pid 39, uptime 18 days</td></tr>
<tr><td>journal-milter</td><td><span class="badge bg-green-lt">running</span></td><td class="text-secondary">pid 40, uptime 18 days</td></tr>
<tr><td>panel</td><td><span class="badge bg-green-lt">running</span></td><td class="text-secondary">pid 44, uptime 18 days</td></tr>
<tr><td>dmarc-ingest</td><td><span class="badge bg-green-lt">running</span></td><td class="text-secondary">pid 47, uptime 18 days</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header"><h3 class="card-title">TLS certificate</h3><div class="card-actions"><span class="badge bg-yellow-lt">warn</span></div></div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item"><div class="datagrid-title">Expires</div><div class="datagrid-content font-monospace">2026-10-03 09:14 UTC</div></div>
<div class="datagrid-item"><div class="datagrid-title">Names</div><div class="datagrid-content font-monospace">mail.example.org</div></div>
</div>
<p class="text-secondary mt-3 mb-0">Renewal normally runs 30 days before expiry. Check port 80 and the <a href="#">system log</a>.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header"><h3 class="card-title">Milter sockets</h3><div class="card-actions"><span class="badge bg-green-lt">ok</span></div></div>
<table class="table table-vcenter card-table">
<thead><tr><th>Milter</th><th>State</th></tr></thead>
<tbody>
<tr><td>opendkim<div class="text-secondary small font-monospace">inet:127.0.0.1:8891</div></td><td><span class="badge bg-green-lt">ok</span></td></tr>
<tr><td>journal-milter<div class="text-secondary small font-monospace">unix:/run/selfpost/journal.sock</div></td><td><span class="badge bg-green-lt">ok</span></td></tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header"><h3 class="card-title">Hostname and reverse DNS</h3><div class="card-actions"><span class="badge bg-green-lt">ok</span></div></div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item"><div class="datagrid-title">Hostname</div><div class="datagrid-content font-monospace">mail.example.org</div></div>
<div class="datagrid-item"><div class="datagrid-title">Lookup</div><div class="datagrid-content font-monospace">→ 203.0.113.25<br>← mail.example.org</div></div>
</div>
</div>
<div class="card-footer"><form method="post" action="#"><button type="submit" class="btn btn-sm"><i class="ti ti-refresh me-1"></i>Re-check DNS</button></form></div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container-xl sp-foot">SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</div>
</footer>
</div>
</div>
</body>
</html>
+80
View File
@@ -0,0 +1,80 @@
/* Direction B — "Console". Tabler (Bootstrap 5 admin kit) carries the shell,
cards, tables, badges, input groups and the sign-in page as shipped; this
file only re-points Tabler's variables at the brand and adds the two things
Tabler has no word for: a sidebar group label and the DNS record block. */
:root, [data-bs-theme=light] {
--tblr-font-sans-serif: var(--sp-sans);
--tblr-font-monospace: var(--sp-mono);
--tblr-body-bg: var(--sp-paper);
--tblr-body-color: var(--sp-ink);
--tblr-secondary: var(--sp-muted);
--tblr-border-color: var(--sp-rule);
--tblr-border-radius: 3px;
--tblr-border-radius-lg: 4px;
--tblr-primary: #7a3b2e;
--tblr-primary-rgb: 122, 59, 46;
--tblr-link-color: #7a3b2e;
--tblr-link-color-rgb: 122, 59, 46;
--tblr-link-hover-color: #632f25;
--tblr-link-hover-color-rgb: 99, 47, 37;
--tblr-green: #2c6b43; --tblr-green-rgb: 44, 107, 67;
--tblr-yellow: #b5700f; --tblr-yellow-rgb: 181, 112, 15;
--tblr-red: #b42318; --tblr-red-rgb: 180, 35, 24;
--tblr-success: #2c6b43; --tblr-success-rgb: 44, 107, 67;
--tblr-warning: #b5700f; --tblr-warning-rgb: 181, 112, 15;
--tblr-danger: #b42318; --tblr-danger-rgb: 180, 35, 24;
}
body { font-feature-settings: normal; }
.btn-primary { --tblr-btn-hover-bg: #632f25; --tblr-btn-active-bg: #632f25; }
code, .font-monospace { font-family: var(--sp-mono); }
/* ---- sidebar: ink, with the stamp on its own paper */
.navbar-vertical {
--tblr-navbar-bg: var(--sp-ink); background: var(--sp-ink);
--tblr-navbar-color: #aab2bd; --tblr-navbar-hover-color: #fff; --tblr-navbar-active-color: #fff;
--tblr-navbar-border-color: transparent;
}
.navbar-vertical .navbar-brand { padding: 1.1rem 0 .9rem; justify-content: flex-start; }
.navbar-vertical .navbar-brand img { height: 52px; width: auto; }
.navbar-vertical .nav-link { padding-block: .42rem; }
.navbar-vertical .nav-link-icon { font-size: 1.15rem; }
.navbar-vertical .nav-item.active > .nav-link {
background: rgb(255 255 255 / .07); box-shadow: inset 3px 0 0 #c4705e; color: #fff;
}
.sp-nav-label {
font-family: var(--sp-mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: #6f7a88; padding: 1.1rem 1.5rem .3rem;
}
.sp-nav-foot { margin-top: auto; padding-bottom: .8rem; border-top: 1px solid rgb(255 255 255 / .08); padding-top: .6rem; }
.sp-nav-user { color: #6f7a88; font-size: .8rem; padding: .3rem 1.5rem; }
/* ---- page */
.page-pretitle { font-family: var(--sp-mono); letter-spacing: .1em; }
.card-title { font-weight: 600; }
.table thead th { font-family: var(--sp-mono); letter-spacing: .08em; }
.sp-tile .card-body { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }
.sp-tile .sp-tile-icon { font-size: 1.5rem; color: var(--sp-muted); }
.sp-tile .fw-semibold { line-height: 1.2; }
.sp-tile .status { margin-left: auto; }
progress.sp-bar {
appearance: none; -webkit-appearance: none; width: 8rem; height: .4rem; border: 0;
border-radius: 1rem; overflow: hidden; vertical-align: middle; margin-right: .6rem; background: var(--sp-well);
}
progress.sp-bar::-webkit-progress-bar { background: var(--sp-well); }
progress.sp-bar::-webkit-progress-value { background: var(--tblr-green); }
progress.sp-bar::-moz-progress-bar { background: var(--tblr-green); }
/* ---- the DNS record block: Tabler's read-only input group, plus a status */
.sp-record + .sp-record { border-top: 1px solid var(--sp-rule); }
.sp-record .form-control[readonly], .sp-record textarea[readonly] {
font-family: var(--sp-mono); font-size: .8rem; background: var(--sp-well);
}
.sp-record textarea { resize: none; }
.sp-record .form-label { font-size: .75rem; color: var(--sp-muted); margin-bottom: .25rem; }
.sp-foot { color: var(--sp-muted); font-size: .8rem; }
.sp-signin-mark { width: 15rem; height: auto; }
.sp-tagline { font-family: var(--sp-mono); font-size: .72rem; letter-spacing: .16em; color: var(--sp-muted); }
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example.org · Outbound domains · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<nav class="navbar is-primary" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item" href="status.html">Overview</a>
<div class="navbar-item has-dropdown is-hoverable sp-current">
<a class="navbar-link" href="domain.html">Outbound</a>
<div class="navbar-dropdown">
<a class="navbar-item is-active" href="domain.html">Domains</a>
<a class="navbar-item" href="#">Log</a>
<a class="navbar-item" href="#">Queue</a>
<a class="navbar-item" href="#">DMARC reports</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Inbound</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">Domains</a>
<a class="navbar-item" href="#">Log</a>
<a class="navbar-item" href="#">Queue</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Server</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">System log</a>
<a class="navbar-item" href="#">Backup</a>
<a class="navbar-item" href="#">Users</a>
<a class="navbar-item" href="#">Settings</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">admin</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="#">Account</a>
<a class="navbar-item" href="#">Help</a>
<hr class="navbar-divider">
<a class="navbar-item" href="login.html">Sign out</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<main>
<div class="container sp-page">
<div class="level mb-5">
<div class="level-left">
<div>
<p class="sp-kicker"><a href="status.html">Outbound domains</a> /</p>
<h1 class="title is-3 mb-0">example.org</h1>
</div>
</div>
<div class="level-right">
<div class="buttons">
<form method="post" action="#"><button type="submit" class="button">Re-check DNS</button></form>
<a class="button is-primary" href="#">Add application</a>
</div>
</div>
</div>
<div class="columns">
<div class="column is-3">
<aside class="menu sp-side">
<p class="menu-label">This domain</p>
<ul class="menu-list">
<li><a class="is-active" href="#dns">DNS records <span class="tag is-danger is-light">1</span></a></li>
<li><a href="#apps">Applications <span class="tag is-light">2</span></a></li>
<li><a href="#connection">Connection</a></li>
</ul>
<p class="menu-label">Rarely changed</p>
<ul class="menu-list">
<li><a href="#">DMARC reports</a></li>
<li><a href="#">Rate limit <span class="tag is-success is-light">active</span></a></li>
<li><a href="#">Export</a></li>
<li><a class="has-text-danger" href="#">Delete domain</a></li>
</ul>
</aside>
</div>
<div class="column is-9">
<div class="box" id="dns">
<div class="sp-box-head"><h2>DNS records</h2><div class="sp-end">Checked 3 min ago</div></div>
<div class="sp-record">
<div class="sp-record-head"><h3>DKIM</h3><span class="tag is-success is-light">published</span><small>Not a secret · selector <code>sp2026</code></small></div>
<div class="sp-row">
<div class="field">
<label class="label">Host / name</label>
<div class="field has-addons"><div class="control is-expanded"><input class="input" readonly value="sp2026._domainkey.example.org"></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
<div class="field"><label class="label">Type</label><div class="control"><input class="input" readonly value="TXT"></div></div>
</div>
<div class="field">
<label class="label">Value to publish</label>
<div class="field has-addons"><div class="control is-expanded"><textarea class="textarea" rows="3" readonly>v=DKIM1; k=rsa; p=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx3kqV0mJd8e2f1Yb7Qw5uT9sLr4nHc6pZaXo1vKe0yWm2gBt8RjN5dCq3hUf7lPs9aEi4oMz6xTb1kGv0nYw…IDAQAB</textarea></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
</div>
<div class="sp-record">
<div class="sp-record-head"><h3>SPF</h3><span class="tag is-danger is-light">mismatch</span><small>Merge into the existing record — never publish a second one</small></div>
<div class="sp-row">
<div class="field">
<label class="label">Host / name</label>
<div class="field has-addons"><div class="control is-expanded"><input class="input" readonly value="example.org"></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
<div class="field"><label class="label">Type</label><div class="control"><input class="input" readonly value="TXT"></div></div>
</div>
<div class="field">
<label class="label">Value to publish</label>
<div class="field has-addons"><div class="control is-expanded"><input class="input" readonly value="v=spf1 ip4:203.0.113.25 ~all"></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
<div class="field">
<label class="label">In DNS now</label>
<div class="control"><input class="input" readonly value="v=spf1 include:_spf.google.com ~all"></div>
<p class="help is-danger">The published record does not authorize 203.0.113.25. Add <code>ip4:203.0.113.25</code> before <code>~all</code>.</p>
</div>
</div>
<div class="sp-record">
<div class="sp-record-head"><h3>DMARC</h3><span class="tag is-success is-light">published</span><small>Report address from <a href="#">Settings</a></small></div>
<div class="sp-row">
<div class="field">
<label class="label">Host / name</label>
<div class="field has-addons"><div class="control is-expanded"><input class="input" readonly value="_dmarc.example.org"></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
<div class="field"><label class="label">Type</label><div class="control"><input class="input" readonly value="TXT"></div></div>
</div>
<div class="field">
<label class="label">Value to publish</label>
<div class="field has-addons"><div class="control is-expanded"><input class="input" readonly value="v=DMARC1; p=none; rua=mailto:dmarc@mail.example.org"></div><div class="control"><button type="button" class="button">Copy</button></div></div>
</div>
</div>
</div>
<div class="box" id="apps">
<div class="sp-box-head"><h2>Applications</h2><div class="sp-end">SASL logins that may send as this domain</div></div>
<table class="table is-fullwidth is-hoverable">
<thead><tr><th>Login</th><th>May send as</th><th>30 days</th><th>Limits</th><th></th></tr></thead>
<tbody>
<tr>
<td class="sp-mono"><strong>prod-server</strong></td><td>*@example.org</td><td class="sp-muted">1 102 msg · peak 96/h</td>
<td><span class="tag is-success is-light">200 / h</span></td>
<td><div class="buttons are-small is-right is-flex-wrap-nowrap"><a class="button" href="#">Edit</a><a class="button" href="#">New password</a><a class="button is-danger is-light" href="#">Delete</a></div></td>
</tr>
<tr>
<td class="sp-mono"><strong>alerts</strong></td><td>alerts@example.org, noc@example.org</td><td class="sp-muted">182 msg · peak 14/h</td>
<td><span class="tag is-light">domain</span> <span class="tag is-success is-light">2 IPs</span></td>
<td><div class="buttons are-small is-right is-flex-wrap-nowrap"><a class="button" href="#">Edit</a><a class="button" href="#">New password</a><a class="button is-danger is-light" href="#">Delete</a></div></td>
</tr>
</tbody>
</table>
</div>
<div class="columns">
<div class="column">
<div class="box" id="connection">
<div class="sp-box-head"><h2>Connection</h2><div class="sp-end">Same for every domain</div></div>
<p class="sp-mono">mail.example.org</p>
<p class="sp-mono sp-muted">465 SSL/TLS · 587 STARTTLS</p>
</div>
</div>
<div class="column">
<div class="box">
<div class="sp-box-head"><h2>Sent, 30 days</h2></div>
<div class="sp-stats">
<div><b>1 284</b><span class="sp-muted">messages</span></div>
<div><b>96</b><span class="sp-muted">peak / h</span></div>
<div><b>1.8</b><span class="sp-muted">average / h</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="sp-foot">SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</footer>
</div>
</main>
</body>
</html>
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="columns is-gapless sp-signin">
<div class="column is-half sp-signin-brand">
<div>
<img src="../../selfpost-stamp.svg" alt="SelfPost">
<p>YOUR SMTP. YOUR RULES.</p>
</div>
</div>
<div class="column is-half sp-signin-form">
<form method="post" action="status.html">
<h1 class="title is-3">Sign in</h1>
<div class="field">
<label class="label" for="username">Username</label>
<div class="control"><input class="input" id="username" name="username" autocomplete="username" required></div>
</div>
<div class="field">
<label class="label" for="password">Password</label>
<div class="control"><input class="input" id="password" name="password" type="password" autocomplete="current-password" required></div>
</div>
<div class="field mt-5"><button type="submit" class="button is-primary is-fullwidth">Sign in</button></div>
</form>
<p class="sp-foot">© 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</p>
</div>
</div>
</body>
</html>
+117
View File
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview · SelfPost</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="../shared/brand.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<nav class="navbar is-primary" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="status.html"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item is-active" href="status.html">Overview</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="domain.html">Outbound</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="domain.html">Domains</a>
<a class="navbar-item" href="#">Log</a>
<a class="navbar-item" href="#">Queue</a>
<a class="navbar-item" href="#">DMARC reports</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Inbound</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">Domains</a>
<a class="navbar-item" href="#">Log</a>
<a class="navbar-item" href="#">Queue</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Server</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">System log</a>
<a class="navbar-item" href="#">Backup</a>
<a class="navbar-item" href="#">Users</a>
<a class="navbar-item" href="#">Settings</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">admin</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="#">Account</a>
<a class="navbar-item" href="#">Help</a>
<hr class="navbar-divider">
<a class="navbar-item" href="login.html">Sign out</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<main>
<div class="container sp-page">
<div class="level mb-5">
<div class="level-left">
<div>
<p class="sp-kicker">mail.example.org</p>
<h1 class="title is-3 mb-0">Overview</h1>
</div>
</div>
<div class="level-right sp-muted is-size-7">Updated 14:02:31 UTC · refreshes every 10 s</div>
</div>
<div class="box sp-health">
<a href="#"><div class="sp-h-name">Machine</div><div class="sp-h-value">12 % CPU</div><div class="sp-h-sub">41 % memory</div></a>
<a href="#"><div class="sp-h-name">Processes</div><div class="sp-h-value">5 of 5</div><div class="sp-h-sub">running</div></a>
<a href="#"><div class="sp-h-name">Queues</div><div class="sp-h-value">Empty</div><div class="sp-h-sub">outbound and inbound</div></a>
<a href="#" class="warn"><div class="sp-h-name">TLS certificate</div><div class="sp-h-value">12 days</div><div class="sp-h-sub">renewal has not run</div></a>
<a href="#"><div class="sp-h-name">Milter sockets</div><div class="sp-h-value">2 of 2</div><div class="sp-h-sub">answering</div></a>
<a href="#"><div class="sp-h-name">Reverse DNS</div><div class="sp-h-value">Match</div><div class="sp-h-sub">203.0.113.25</div></a>
</div>
<div class="columns">
<div class="column is-7">
<div class="box">
<div class="sp-box-head"><h2>Outbound domains</h2><div class="sp-end"><a class="button is-small is-primary" href="#">Add domain</a></div></div>
<table class="table is-fullwidth is-hoverable">
<thead><tr><th>Domain</th><th>DNS</th><th>Apps</th><th>30 days</th></tr></thead>
<tbody>
<tr><td><a href="domain.html"><strong>example.org</strong></a></td><td><span class="tag is-success is-light">DKIM</span> <span class="tag is-danger is-light">SPF</span> <span class="tag is-success is-light">DMARC</span></td><td>2</td><td class="sp-muted">1 284 msg</td></tr>
<tr><td><a href="#"><strong>shop.example.org</strong></a></td><td><span class="tag is-success is-light">DKIM</span> <span class="tag is-success is-light">SPF</span> <span class="tag is-success is-light">DMARC</span></td><td>1</td><td class="sp-muted">18 920 msg</td></tr>
<tr><td><a href="#"><strong>notify.acme.io</strong></a></td><td><span class="tag is-success is-light">DKIM</span> <span class="tag is-success is-light">SPF</span> <span class="tag is-warning is-light">DMARC</span></td><td>3</td><td class="sp-muted">402 msg</td></tr>
</tbody>
</table>
</div>
</div>
<div class="column is-5">
<div class="box">
<div class="sp-box-head"><h2>Inbound domains</h2><div class="sp-end"><a class="button is-small" href="#">Add domain</a></div></div>
<table class="table is-fullwidth is-hoverable">
<thead><tr><th>Domain</th><th>MX</th><th>Upstream</th></tr></thead>
<tbody>
<tr><td><a href="#"><strong>lists.example.org</strong></a></td><td><span class="tag is-success is-light">MX</span></td><td class="sp-muted sp-mono is-size-7">mx.internal:25</td></tr>
<tr><td><a href="#"><strong>acme.io</strong></a></td><td><span class="tag is-success is-light">MX</span></td><td class="sp-muted sp-mono is-size-7">10.0.4.12:2525</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="sp-foot">SelfPost 1.8.0 · © 2026 Mix · <a href="#">License (AGPL-3.0)</a> · <a href="#">Source</a> · No warranty</footer>
</div>
</main>
</body>
</html>
+98
View File
@@ -0,0 +1,98 @@
/* Direction C — "Counter". Bulma v1 (pure CSS, no JavaScript, no data: URIs)
carries the navbar with hover dropdowns, columns, boxes, tables, tags,
the side menu and input-with-addon fields. This file points Bulma's HSL
variables at the brand and adds the health strip and the record block. */
:root {
--bulma-family-primary: var(--sp-sans);
--bulma-family-secondary: var(--sp-sans);
--bulma-family-code: var(--sp-mono);
--bulma-primary-h: 10deg; --bulma-primary-s: 45%; --bulma-primary-l: 33%;
--bulma-link-h: 10deg; --bulma-link-s: 45%; --bulma-link-l: 33%;
--bulma-success-h: 138deg; --bulma-success-s: 42%; --bulma-success-l: 30%;
--bulma-warning-h: 36deg; --bulma-warning-s: 85%; --bulma-warning-l: 55%;
--bulma-danger-h: 4deg; --bulma-danger-s: 76%; --bulma-danger-l: 40%;
--bulma-radius: 6px; --bulma-radius-large: 10px;
--bulma-body-size: 15px;
/* Bulma derives link text and the on-primary colour from lightness steps;
at the brick's 33 % both land off-brand, so they are pinned. */
--bulma-link-text: var(--sp-brick);
--bulma-link-text-hover: var(--sp-brick-dark);
}
.button.is-primary, .button.is-primary:hover { color: #fff; }
a strong { color: inherit; }
html { background: var(--sp-paper); }
body { background: var(--sp-paper); color: var(--sp-ink); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; padding: .1em .35em; font-size: .85em; }
/* ---- navbar: brick, the stamp on it, hover dropdowns */
.navbar.is-primary { --bulma-navbar-height: 4rem; }
.navbar-brand img { max-height: 3rem; height: 3rem; }
.navbar.is-primary .navbar-item, .navbar.is-primary .navbar-link { color: var(--sp-on-brick); font-weight: 500; }
.navbar.is-primary .navbar-link::after { border-color: var(--sp-on-brick); }
.navbar.is-primary .navbar-start > .navbar-item.is-active,
.navbar.is-primary .navbar-start > .has-dropdown.sp-current > .navbar-link { box-shadow: inset 0 -3px 0 var(--sp-on-brick); }
.navbar-dropdown { border-top: 0; box-shadow: 0 8px 24px rgb(18 22 28 / .14); }
.navbar.is-primary .navbar-dropdown .navbar-item { color: var(--sp-ink); font-weight: 400; }
.navbar.is-primary .navbar-dropdown .navbar-item.is-active { color: var(--sp-brick); font-weight: 600; background: var(--sp-brick-tint); }
/* ---- page */
.sp-page { padding-block: 2rem 2.5rem; }
.sp-kicker { font-family: var(--sp-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); }
.sp-kicker a { color: inherit; }
.title { color: var(--sp-ink); font-weight: 600; }
.box { box-shadow: none; border: 1px solid var(--sp-rule); }
.box > .sp-box-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.box > .sp-box-head h2 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.box > .sp-box-head .sp-end { margin-left: auto; color: var(--sp-muted); font-size: .85rem; display: flex; gap: .6rem; align-items: center; }
.table { background: transparent; }
.table thead th { font-family: var(--sp-mono); font-size: .7rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); }
.table td { vertical-align: middle; }
.tag { font-family: var(--sp-mono); font-weight: 600; letter-spacing: .04em; }
.sp-muted { color: var(--sp-muted); }
.sp-mono { font-family: var(--sp-mono); }
/* ---- health strip */
.sp-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.sp-health > a {
display: block; padding: 1rem 1.2rem; color: var(--sp-ink); border-right: 1px solid var(--sp-rule);
box-shadow: inset 0 3px 0 var(--sp-ok);
}
.sp-health > a:last-child { border-right: 0; }
.sp-health > a:hover { background: var(--sp-paper); }
.sp-health > a.warn { box-shadow: inset 0 3px 0 #d9962b; background: var(--sp-warn-bg); }
.sp-health > a.fail { box-shadow: inset 0 3px 0 var(--sp-fail); background: var(--sp-fail-bg); }
.sp-health .sp-h-name { font-family: var(--sp-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); }
.sp-health .sp-h-value { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.sp-health .sp-h-sub { font-size: .8rem; color: var(--sp-muted); }
/* ---- domain page */
.sp-side { position: sticky; top: 1.5rem; }
.menu-label { font-family: var(--sp-mono); letter-spacing: .1em; }
.menu-list a { display: flex; align-items: center; gap: .5rem; }
.menu-list a .tag { margin-left: auto; }
.sp-record + .sp-record { border-top: 1px solid var(--sp-rule); margin-top: 1.25rem; padding-top: 1.25rem; }
.sp-record-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.sp-record-head h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.sp-record-head small { margin-left: auto; color: var(--sp-muted); }
.sp-record .label { font-size: .75rem; font-weight: 400; color: var(--sp-muted); margin-bottom: .25rem; }
.sp-record .input[readonly], .sp-record .textarea[readonly] {
font-family: var(--sp-mono); font-size: .82rem; background: var(--sp-well); box-shadow: none;
}
.sp-record .textarea { resize: none; min-height: 0; }
.sp-record .field:not(:last-child) { margin-bottom: .6rem; }
.sp-row { display: grid; grid-template-columns: 1fr 7rem; gap: .75rem; }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sp-stats b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
/* ---- sign-in */
.sp-signin { min-height: 100vh; margin: 0; }
.sp-signin-brand { background: var(--sp-brick); display: grid; place-content: center; text-align: center; padding: 3rem; }
.sp-signin-brand img { width: 20rem; max-width: 100%; height: auto; }
.sp-signin-brand p { font-family: var(--sp-mono); letter-spacing: .18em; font-size: .8rem; color: var(--sp-on-brick); margin-top: 1.6rem; }
.sp-signin-form { display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
.sp-signin-form form { width: 21rem; max-width: 100%; margin-inline: auto; }
.sp-foot { color: var(--sp-muted); font-size: .8rem; padding-block: 1.2rem; }
.sp-foot a { color: inherit; text-decoration: underline; }
.sp-signin-form .sp-foot { text-align: center; margin-top: 2.5rem; }
+22
View File
@@ -0,0 +1,22 @@
/* Cover sheet for the three directions. No library on purpose: it must not
look like any one of them. */
body { margin: 0; background: var(--sp-paper); color: var(--sp-ink); font: 16px/1.55 var(--sp-sans); }
main { max-width: 68rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
h1 { font-size: 2rem; font-weight: 600; margin: .2rem 0 1rem; text-wrap: balance; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.4rem; font-weight: 600; margin: .1rem 0 .6rem; }
.kicker { font-family: var(--sp-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-brick); margin: 0; }
.lead { max-width: 46rem; color: var(--sp-ink-2); }
ul { padding-left: 1.2rem; max-width: 52rem; }
li { margin-bottom: .5rem; }
a { color: var(--sp-brick); }
code { font-family: var(--sp-mono); font-size: .85em; background: var(--sp-well); padding: .1em .35em; border-radius: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }
.cards section { background: var(--sp-sheet); border: 1px solid var(--sp-rule); border-top: 3px solid var(--sp-brick); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.cards p { margin: 0 0 1rem; }
.links { margin-top: auto !important; margin-bottom: 0 !important; display: flex; gap: 1.1rem; font-weight: 600; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--sp-sheet); border: 1px solid var(--sp-rule); font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .9rem; border-bottom: 1px solid var(--sp-rule); }
thead th { font-family: var(--sp-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); font-weight: 400; }
tbody th { font-weight: 600; white-space: nowrap; }
+89
View File
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panel redesign · three directions</title>
<link rel="stylesheet" href="shared/brand.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<p class="kicker">SelfPost · panel redesign · stage 1</p>
<h1>Three directions, three key screens</h1>
<p class="lead">Overview, an outbound domain and sign-in, drawn three ways. Pick one (or a mix);
the remaining screens are then drawn in that direction only. Serve this folder from the repository
root — the pages load the panel's own fonts and mark by relative path.</p>
<h2>Shared by all three</h2>
<ul>
<li><strong>Navigation by mail direction.</strong> Overview · <em>Outbound</em> (Domains, Log, Queue, DMARC reports) ·
<em>Inbound</em> (Domains, Log, Queue) · <em>Server</em> (System log, Backup, Users, Settings). Account, Help and
Sign out live with the user name. Eleven flat entries become four groups.</li>
<li><strong>One block per DNS record.</strong> Today "DNS status" and "records to publish" show every host twice.
Here a record is one block: its status, what to publish, and — only on a mismatch — what DNS holds now.</li>
<li><strong>The domain page stops being nine cards.</strong> DNS and applications are the page; limits, report address,
export and delete are "rarely changed" and sit behind one click.</li>
<li><strong>Applications are a table</strong>; editing one is its own form page instead of a three-column panel inside a list row.</li>
<li>Brand carriers stay: the stamp, brick, IBM Plex. No inline <code>style</code> or script in any mockup.</li>
</ul>
<h2>The directions</h2>
<div class="cards">
<section>
<p class="kicker">A · Pico CSS 2.1</p>
<h3>Blank</h3>
<p>The panel as a postal form: one centred sheet, numbered sections, mono field labels, a postmark for the
verdict. Overview is a ledger — one row per check, the row opens into its detail. Sections on the first
header row, the section's pages on the second.</p>
<p class="links"><a href="a/status.html">Overview</a><a href="a/domain.html">Domain</a><a href="a/login.html">Sign in</a></p>
</section>
<section>
<p class="kicker">B · Tabler 1.5 (Bootstrap 5)</p>
<h3>Console</h3>
<p>The classic admin kit: ink sidebar with every page one click away, status tiles, cards and tables in a
12-column grid, read-only input groups with Copy. Almost nothing is ours; it also looks the most like
every other admin panel.</p>
<p class="links"><a href="b/status.html">Overview</a><a href="b/domain.html">Domain</a><a href="b/login.html">Sign in</a></p>
</section>
<section>
<p class="kicker">C · Bulma 1.0</p>
<h3>Counter</h3>
<p>Brick top bar with CSS-only hover menus. Overview is the whole service on one screen: a health strip over
the outbound and inbound domain lists. The domain page gets a sticky side menu. Softer, rounder, the
boldest use of the brand colour.</p>
<p class="links"><a href="c/status.html">Overview</a><a href="c/domain.html">Domain</a><a href="c/login.html">Sign in</a></p>
</section>
</div>
<h2>What each one costs</h2>
<div class="scroll">
<table>
<thead><tr><th></th><th>A · Pico</th><th>B · Tabler</th><th>C · Bulma</th></tr></thead>
<tbody>
<tr><th>Licence</th><td>MIT</td><td>MIT</td><td>MIT</td></tr>
<tr><th>Vendored CSS (minified)</th><td>83 KB</td><td>694 KB</td><td>678 KB</td></tr>
<tr><th>JavaScript</th><td>none</td><td>none for these screens; Bootstrap bundle only if dropdowns / modals are wanted</td><td>none</td></tr>
<tr><th>Build step</th><td>none</td><td>none</td><td>none (a Sass build could trim it; not needed)</td></tr>
<tr><th>CSP <code>default-src 'self'</code></th>
<td>needs <code>img-src 'self' data:</code> — 14 <code>data:</code> SVGs (select chevron, checkbox tick)</td>
<td>needs <code>img-src 'self' data:</code> — 28 <code>data:</code> SVGs</td>
<td>works as is — no <code>data:</code> URIs</td></tr>
<tr><th>Our own CSS in the mockup</th><td>≈ 200 lines</td><td>≈ 80 lines</td><td>≈ 100 lines</td></tr>
<tr><th>Markup style</th><td>semantic HTML, few classes — closest to today's templates</td><td>class-heavy Bootstrap markup</td><td>class-based, moderate</td></tr>
<tr><th>Own components</th><td>sheet, ledger row, postmark, record block</td><td>sidebar group label, record block</td><td>health strip, record block</td></tr>
<tr><th>Recognisable</th><td>most</td><td>least</td><td>middle</td></tr>
</tbody>
</table>
</div>
<h2>Open points</h2>
<ul>
<li>Icons in B come from Tabler Icons (MIT) through its webfont for the mockup; the panel would vendor only the used glyphs as an SVG sprite.</li>
<li><em>Inbound log</em> rides on the agreed <code>inbound-antispam-panel</code> journal; <em>Inbound queue</em> is a new filter over the one Postfix queue and needs its own roadmap row.</li>
<li>Dark scheme and the narrow-screen shell are not drawn at this stage; all three libraries ship both.</li>
<li>The earlier <a href="../panel-ui/index.html">panel-ui</a> experiment and <a href="../../plans/panel-redesign.md">panel-redesign.md</a> are superseded by whichever direction is accepted.</li>
</ul>
</main>
</body>
</html>
@@ -0,0 +1,48 @@
/* Brand layer shared by the three redesign directions: the panel's own fonts
and the palette of the mark (docs/assets/selfpost-proof.html). Each
direction maps these tokens onto its library's variables in its own
theme.css — nothing here knows about Pico, Tabler or Bulma.
Mockup note: no inline style="" and no inline <script> anywhere in this
folder, so every screen is drawable under the panel's CSP as it stands. */
@font-face {
font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
font-display: swap;
src: url("../../../../internal/web/view/static/ibm-plex-sans.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
font-display: swap;
src: url("../../../../internal/web/view/static/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
font-display: swap;
src: url("../../../../internal/web/view/static/ibm-plex-mono-600.woff2") format("woff2");
}
:root {
--sp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--sp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--sp-paper: #f4f2ed; /* page */
--sp-stamp-paper: #f3ede1; /* the mark's own paper */
--sp-sheet: #fff;
--sp-ink: #12161c;
--sp-ink-2: #2a313b;
--sp-muted: #6b7684;
--sp-rule: #dedcd7;
--sp-rule-strong: #cbc8c1;
--sp-well: #efede9; /* code / read-only values */
--sp-brick: #7a3b2e;
--sp-brick-dark: #632f25;
--sp-brick-tint: #ede4de;
--sp-on-brick: #f6ede2;
--sp-ok: #2c6b43; --sp-ok-bg: #edf6ef; --sp-ok-rule: #c2e0cc;
--sp-warn: #8a5510; --sp-warn-bg: #fbf2e2; --sp-warn-rule: #ebd5a6;
--sp-fail: #b42318; --sp-fail-bg: #fbedea; --sp-fail-rule: #efccc4;
--sp-idle: #6b7684; --sp-idle-bg: #efede9; --sp-idle-rule: #dedcd7;
}