diff --git a/README.md b/README.md index 3d03f1a..ff36bc0 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ with this machine's shell settings — the same keys as the checked-in | `adminPin` | The admin PIN, as a scrypt hash. **Set it in the admin page's Admin PIN section**, not by hand — 6 digits, and only the hash is stored. Absent means admin is open to anyone on the network. | | `adminPasscode` | An older free-text passcode. Still honoured, so an existing install keeps working; new installs should use `adminPin`. | | `forge` | Where updates and module installs are fetched from. Absent or `"github"` uses GitHub; a Gitea or Forgejo base URL such as `"http://10.3.8.90:3000"` uses a server of your own. Set it per machine in the data directory, alongside `repo`. | -| `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember` or `daylight`. The admin page's **Theme** section writes this one — see [Themes](#themes). | +| `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember`, `daylight`, `midnight`, `moss`, `plum`, `sepia`, `blackout`, `paper` or `iron`. The admin page's **Theme** section writes this one — see [Themes](#themes). | **Locked out?** Delete `adminPin` from the data directory's `proddash.json` and restart, or start the server with `PRODDASH_PASSCODE` set — that passcode @@ -140,12 +140,26 @@ ignored from then on. The whole dashboard — every tile, on every browser — draws with one palette, chosen in the admin page's **Theme** section and switched live: pick a swatch -and open dashboards change without a reload. Five presets ship: **Booth** -(the default dark, mint accent), **Harbor** (deep navy, cyan), **Graphite** -(neutral charcoal, electric blue), **Ember** (warm broadcast black, orange) -and **Daylight**, a light palette for a front-of-house desk in daytime. Each -keeps the status colours apart — the accent is never near the danger red or -the warning amber — and muted text readable in a dark booth. The choice is +and open dashboards change without a reload. The section starts folded — +a building picks its palette once — and holds twelve presets: + +| | | +|---|---| +| **Booth** | the default dark, mint accent | +| **Harbor** | deep navy, cyan | +| **Graphite** | neutral charcoal, electric blue | +| **Ember** | warm broadcast black, orange | +| **Daylight** | a cool light palette, for a front-of-house desk in daytime | +| **Midnight** | indigo night, violet | +| **Moss** | forest floor, lime | +| **Plum** | aubergine, purple | +| **Sepia** | warm brown room, cool teal — Ember's arrangement reversed | +| **Blackout** | true black, cyan, for a dark room where any glow carries | +| **Paper** | the warm light one, indigo accent | +| **Iron** | no colour of its own: a near-white accent, so the only hues on screen are a module's own and the red and amber that mean something | + +Each keeps the status colours apart — the accent is never near the danger red +or the warning amber — and muted text readable in a dark booth. The choice is stored as `theme` in the data directory's `proddash.json` (table above), so it holds across restarts and updates; a browser remembers the last theme it saw and applies it before the server answers, so nothing flashes. Modules diff --git a/public/admin/admin.css b/public/admin/admin.css index 7eec5df..52180f5 100644 --- a/public/admin/admin.css +++ b/public/admin/admin.css @@ -451,6 +451,36 @@ a.btn { text-decoration: none; } /* one swatch per preset: a miniature dashboard (page, a tile on it, the accent as a status dot) and the name; the current one wears the accent */ +/* ── a collapsible admin section ───────────────────────────────────── + The pattern for any section of this page that folds. The markup is a +
holding the section's contents, headed by a + : the title keeps the same + type as every other section heading — a would otherwise come + out at the normal weight — and the caret follows the words, so a folded + section still reads as a heading first. The whole row is the hit target. */ +details.admin-fold > summary.admin-fold-title { + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + gap: 8px; + font-weight: 700; /* matches h1.admin-h1; summary defaults to normal */ + user-select: none; +} +details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; } +/* after the title, not before it — the heading reads first, the caret says + there is more behind it */ +details.admin-fold > summary.admin-fold-title::after { + content: ""; + width: 0; height: 0; + border-left: 6px solid var(--muted); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + transition: transform 0.15s; +} +details.admin-fold[open] > summary.admin-fold-title::after { transform: rotate(90deg); } +details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); } + .theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); diff --git a/public/admin/index.html b/public/admin/index.html index a327283..df0e1d4 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -41,9 +41,11 @@