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

fix(webui): lighten faint empty-state messages on dark panels

Browse Source 
Empty-state 'no data yet' messages rendered at rgba(text, 0.55) (and one at
text-muted), which is hard to read on the dark recessed panels. Switch them to
the theme's --text-secondary muted token so they stay de-emphasized but legible.

Covers .updater-empty, .updater-detail-empty, .sys-detail-empty, .eo-modal-empty.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-25 21:07:07 +01:00
parent 209ced11be
commit f4c24340b7
4 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
containers/libreportal/frontend/components/admin/core/css/admin.css
View File

@ -658,7 +658,7 @@ table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); }
font-size: 0.92rem; font-size: 0.92rem;
pointer-events: none; pointer-events: none;
} }
.sys-detail-empty { color: rgba(var(--text-rgb), 0.55); } .sys-detail-empty { color: var(--text-secondary); }
/* The `display: flex` above is an author rule, so it beats the UA /* The `display: flex` above is an author rule, so it beats the UA
`[hidden] { display: none }` — without this the JS `el.hidden = true` can't `[hidden] { display: none }` — without this the JS `el.hidden = true` can't
hide these overlays and they stack on top of a populated graph. */ hide these overlays and they stack on top of a populated graph. */

2
containers/libreportal/frontend/components/apps/overview/css/overview.css
View File

@ -218,7 +218,7 @@
} }
.updater-detail-row .updater-btn { margin-left: auto; } .updater-detail-row .updater-btn { margin-left: auto; }
.updater-detail-meta { color: var(--text-muted, rgba(255, 255, 255, .6)); font-size: .85rem; } .updater-detail-meta { color: var(--text-muted, rgba(255, 255, 255, .6)); font-size: .85rem; }
.updater-detail-empty { color: var(--text-muted, rgba(255, 255, 255, .6)); margin: 0; } .updater-detail-empty { color: var(--text-secondary); margin: 0; }
/* ---- Backups tab: embedded backup center -------------------------------- */ /* ---- Backups tab: embedded backup center -------------------------------- */
/* The Backups tab mounts the real BackupPage, which supplies its own header, and /* The Backups tab mounts the real BackupPage, which supplies its own header, and

2
containers/libreportal/frontend/components/updater/css/updater.css
View File

@ -106,7 +106,7 @@
/* ---- Hints / empty states ---- */ /* ---- Hints / empty states ---- */
.updater-hint { padding: 12px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 0.84rem; .updater-hint { padding: 12px 15px; border-radius: 11px; margin-bottom: 14px; font-size: 0.84rem;
background: rgba(var(--page-rgb, var(--accent-rgb)), 0.08); border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.2); color: rgba(var(--text-rgb), 0.75); } background: rgba(var(--page-rgb, var(--accent-rgb)), 0.08); border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.2); color: rgba(var(--text-rgb), 0.75); }
.updater-empty { padding: 40px 20px; text-align: center; color: rgba(var(--text-rgb), 0.55); display: flex; flex-direction: column; gap: 14px; align-items: center; } .updater-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; gap: 14px; align-items: center; }
@media (max-width: 600px) { @media (max-width: 600px) {
.updater-row { grid-template-columns: 1fr; gap: 6px; } .updater-row { grid-template-columns: 1fr; gap: 6px; }

2
containers/libreportal/frontend/core/overlays/css/modal.css
View File

@ -528,7 +528,7 @@
background: rgba(var(--status-success-rgb), 0.10); background: rgba(var(--status-success-rgb), 0.10);
} }
.eo-modal-empty { text-align: center; color: rgba(var(--text-rgb), 0.55); font-size: 13px; padding: 12px 0; } .eo-modal-empty { text-align: center; color: var(--text-secondary); font-size: 13px; padding: 12px 0; }
/* Body content shouldn't push the modal wider than its container. */ /* Body content shouldn't push the modal wider than its container. */
.eo-modal-body :where(input, textarea, select) { max-width: 100%; box-sizing: border-box; } .eo-modal-body :where(input, textarea, select) { max-width: 100%; box-sizing: border-box; }