From e1906611d933d83e5cab121480f05621c2b386f5 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Sat, 3 Oct 2026 22:56:14 +0200 Subject: [PATCH] fix: hide dropdown arrow on multi-selects in dark mode The dark-mode arrow swap outranked select[multiple], so the arrow repeated behind every option in listbox selects (e.g. query columns). Wrap the mode selectors in :where() to keep base select specificity. Co-Authored-By: Claude Opus 5.5 --- tonalmine/stylesheets/components.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css index d92318f..dba3648 100644 --- a/tonalmine/stylesheets/components.css +++ b/tonalmine/stylesheets/components.css @@ -85,9 +85,10 @@ select { padding-inline-end: 32px; } [dir="rtl"] select { background-position: 6px 50%; } -/* The chevron is an image, so it cannot use color roles: one file per mode */ -:root[data-mode="dark"] select { background-image: url(../images/arrow-drop-down-dark.svg); } -@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) select { background-image: url(../images/arrow-drop-down-dark.svg); } } +/* The chevron is an image, so it cannot use color roles: one file per mode. + :where() keeps the swap at select's specificity so select[multiple] below still drops it */ +:where(:root[data-mode="dark"]) select { background-image: url(../images/arrow-drop-down-dark.svg); } +@media (prefers-color-scheme: dark) { :where(:root:not([data-mode="light"])) select { background-image: url(../images/arrow-drop-down-dark.svg); } } /* Autocomplete fields (parent task, watchers): M3 leading search icon, same per-mode files */ input.autocomplete { background: transparent url(../images/search.svg) no-repeat 12px 50% / 20px;