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

ux(admin): solid-fill Overview buttons for legibility on nebula

Browse Source 
The translucent tinted buttons washed out against nebula's glassy aurora
background. Switch .admin-action-btn to a solid fill with white text (the bg can
no longer bleed through) and deepen the --page-* hues enough for white-text
contrast. Hover uses brightness() so it's theme-agnostic.

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:59:15 +01:00
parent 8e9a084389
commit bd0256715c
1 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,10 @@
/* 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;
--page-updates: #3f74d6; --page-updates-rgb: 63, 116, 214;
--page-backups: #12936b; --page-backups-rgb: 18, 147, 107;
--page-ssh: #7150c8; --page-ssh-rgb: 113, 80, 200;
--page-system: #c2671d; --page-system-rgb: 194, 103, 29;
}
.admin-page {
@ -132,24 +132,22 @@
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 {
/* Solid fill (not a translucent tint) so the glassy aurora bg can't bleed
through and wash it out on nebula; white text reads on every hue. */
color: #fff;
background: var(--page, var(--accent));
border-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.18);
transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.admin-action-btn.is-primary:hover {
box-shadow: 0 6px 18px rgba(var(--page-rgb, var(--accent-rgb)), 0.40);
.admin-action-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(var(--page-rgb, var(--accent-rgb)), 0.35);
}
.admin-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; filter: none; }
/* Primary action (e.g. Update now): same hue, a touch more emphasis. */
.admin-action-btn.is-primary {
box-shadow: 0 4px 14px rgba(var(--page-rgb, var(--accent-rgb)), 0.32);
}
/* ============================================================