From db4ef19698cfbf42b59f154485d19be71f54cda2 Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 20 Aug 2026 03:21:49 +0100 Subject: [PATCH] fix(webui): make the backups filter placeholder readable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The snapshot filter's placeholder had no rule at all, so it fell through to the browser default — a grey chosen for light backgrounds, rendering near-invisible against a dark panel. "Filter by app, host, or backup id" is the one hint telling you what the box accepts, so losing it costs the control its explanation. Written against --text-rgb rather than a fixed grey so it follows the theme: white at 60% on nebula and dark-blue, dark at 60% on light, where a hardcoded #ccc would have been unreadable the other way round. Firefox dims placeholders on top of the colour, so opacity is pinned to 1 and the alpha above owns the result. Slightly brighter than the task filter's 0.4, and in line with the shared .form-control rule's effective value, because this string is instruction rather than decoration. Co-Authored-By: Claude Opus 5 --- .../frontend/components/backup/core/css/backup.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/containers/libreportal/frontend/components/backup/core/css/backup.css b/containers/libreportal/frontend/components/backup/core/css/backup.css index fc895c1..1fd5dfa 100755 --- a/containers/libreportal/frontend/components/backup/core/css/backup.css +++ b/containers/libreportal/frontend/components/backup/core/css/backup.css @@ -641,6 +641,19 @@ min-width: 0; } +/* The placeholder had no rule at all, so it fell through to the browser + default — which on a dark theme renders near-invisible grey against the + panel, and "Filter by app, host, or backup id" is the one hint telling you + what the box accepts. Written against --text-rgb rather than a fixed grey so + it follows the theme: white at 60% on nebula/dark-blue, dark at 60% on light, + where a hardcoded #ccc would be unreadable the other way round. Slightly + brighter than the task filter's 0.4 because this string is instruction, not + decoration. */ +.backup-filter-input::placeholder { + color: rgba(var(--text-rgb), 0.6); + opacity: 1; /* Firefox dims placeholders by default; the alpha above owns it */ +} + .backup-filter-input:focus, .backup-filter-select:focus { outline: none;