Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(admin): give each Overview area a signature colour

Browse Source 
Introduces per-area identity hues as reusable tokens (--page-updates/backups/
ssh/system + -rgb companions) and a generic .admin-action-btn that takes its
colour from --page set on the card. The Overview buttons now read in their
area's hue — Updates blue, Backups emerald, SSH violet, System amber — with the
icon following via currentColor; "Update now" is the filled (primary) variant.

The tokens are the foundation to extend each area's identity (page headers,
accents) going forward, not just these buttons.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 23:46:39 +01:00
parent 05e65bf4b6
commit 3fd4c84707
2 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
containers/libreportal/frontend/css/admin.css
View File

@ -1,6 +1,16 @@
/* Admin area — Overview board + shared admin-page chrome. Visually aligned
with the backup dashboard (tile/card style) and the config page header. */
:root {
/* Per-area identity hues. Each admin area owns one colour, reused going
forward (Overview action buttons today; page headers/accents next).
The *-rgb companions feed rgba() tints. */
--page-updates: #4f8cff; --page-updates-rgb: 79, 140, 255;
--page-backups: #1fb88a; --page-backups-rgb: 31, 184, 138;
--page-ssh: #9b7bf0; --page-ssh-rgb: 155, 123, 240;
--page-system: #f0883e; --page-system-rgb: 240, 136, 62;
}
.admin-page {
padding: 4px 2px 40px;
}
@ -110,6 +120,38 @@
color: rgba(var(--text-rgb), 0.55);
}
/* Per-page identity button. The card sets --page / --page-rgb inline; the
button (and its icon, via currentColor) takes the area's hue. Reusable on any
admin surface going forward — set the two vars and use .admin-action-btn. */
.admin-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
color: var(--page, var(--accent));
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.14);
border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.35);
transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.admin-action-btn:hover {
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.22);
transform: translateY(-1px);
}
.admin-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
/* Primary action (e.g. Update now): filled with the area's hue. */
.admin-action-btn.is-primary {
color: #fff;
background: var(--page, var(--accent));
border-color: transparent;
}
.admin-action-btn.is-primary:hover {
box-shadow: 0 6px 18px rgba(var(--page-rgb, var(--accent-rgb)), 0.40);
}
/* ============================================================
Admin → System (in-depth statistics page)
============================================================ */

11
containers/libreportal/frontend/js/components/admin/admin-overview.js
View File

@ -170,9 +170,10 @@ class AdminOverview {
if (vDisp) updBody += this.integrityLine(vDisp);
// Update now takes priority when one's available; otherwise offer Verify now.
const updPage = 'style="--page:var(--page-updates);--page-rgb:var(--page-updates-rgb)"';
const updActions = (updAvail && upd.can_update)
? `<button type="button" class="backup-primary-btn" data-admin-update>${this.icon('update')}Update now</button>`
: `<button type="button" class="backup-secondary-btn" data-admin-verify>${this.icon('verify')}Verify now</button>`;
? `<button type="button" class="admin-action-btn is-primary" ${updPage} data-admin-update>${this.icon('update')}Update now</button>`
: `<button type="button" class="admin-action-btn" ${updPage} data-admin-verify>${this.icon('verify')}Verify now</button>`;
const updCard = this.card(
'Updates',
@ -194,7 +195,7 @@ class AdminOverview {
this.line('Apps protected', `${protectedApps} / ${apps.length}`)
+ this.line('Locations', String(locs.length))
+ this.line('Stored', this.bytes(totalSize)),
`<button type="button" class="backup-secondary-btn" data-admin-go="backup">${this.icon('backup')}Manage backups →</button>`
`<button type="button" class="admin-action-btn" style="--page:var(--page-backups);--page-rgb:var(--page-backups-rgb)" data-admin-go="backup">${this.icon('backup')}Manage backups →</button>`
);
// SSH & Security
@ -209,7 +210,7 @@ class AdminOverview {
this.line('Password login', pwOn ? 'On' : 'Key-only')
+ this.line('Authorized keys', String(keyCount))
+ this.line('Login user', s.user || '—'),
`<button type="button" class="backup-secondary-btn" data-admin-go="ssh">${this.icon('ssh')}Manage SSH access →</button>`
`<button type="button" class="admin-action-btn" style="--page:var(--page-ssh);--page-rgb:var(--page-ssh-rgb)" data-admin-go="ssh">${this.icon('ssh')}Manage SSH access →</button>`
);
// System health
@ -226,7 +227,7 @@ class AdminOverview {
? `${this.gb(mem.used)} / ${this.gb(mem.total)} (${Math.round(mem.percent) || 0}%)`
: (mem.text || '—'))
+ this.line('Uptime', this.shortUptime(info.uptime)),
`<button type="button" class="backup-secondary-btn" data-admin-go="system">${this.icon('system')}View system stats →</button>`
`<button type="button" class="admin-action-btn" style="--page:var(--page-system);--page-rgb:var(--page-system-rgb)" data-admin-go="system">${this.icon('system')}View system stats →</button>`
);
root.innerHTML = `