From f4c24340b7f19fab626cc2ba56e28068da45f12a Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 25 Jun 2026 21:07:07 +0100 Subject: [PATCH] fix(webui): lighten faint empty-state messages on dark panels 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 Signed-off-by: librelad --- .../libreportal/frontend/components/admin/core/css/admin.css | 2 +- .../frontend/components/apps/overview/css/overview.css | 2 +- .../libreportal/frontend/components/updater/css/updater.css | 2 +- containers/libreportal/frontend/core/overlays/css/modal.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css index 0c53599..d981645 100644 --- a/containers/libreportal/frontend/components/admin/core/css/admin.css +++ b/containers/libreportal/frontend/components/admin/core/css/admin.css @@ -658,7 +658,7 @@ table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); } font-size: 0.92rem; 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 `[hidden] { display: none }` — without this the JS `el.hidden = true` can't hide these overlays and they stack on top of a populated graph. */ diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css index bdec130..2c4dbeb 100644 --- a/containers/libreportal/frontend/components/apps/overview/css/overview.css +++ b/containers/libreportal/frontend/components/apps/overview/css/overview.css @@ -218,7 +218,7 @@ } .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-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 -------------------------------- */ /* The Backups tab mounts the real BackupPage, which supplies its own header, and diff --git a/containers/libreportal/frontend/components/updater/css/updater.css b/containers/libreportal/frontend/components/updater/css/updater.css index 10328d3..71bfb36 100644 --- a/containers/libreportal/frontend/components/updater/css/updater.css +++ b/containers/libreportal/frontend/components/updater/css/updater.css @@ -106,7 +106,7 @@ /* ---- Hints / empty states ---- */ .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); } -.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) { .updater-row { grid-template-columns: 1fr; gap: 6px; } diff --git a/containers/libreportal/frontend/core/overlays/css/modal.css b/containers/libreportal/frontend/core/overlays/css/modal.css index 4f73c3d..71909c4 100755 --- a/containers/libreportal/frontend/core/overlays/css/modal.css +++ b/containers/libreportal/frontend/core/overlays/css/modal.css @@ -528,7 +528,7 @@ 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. */ .eo-modal-body :where(input, textarea, select) { max-width: 100%; box-sizing: border-box; }