noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide dropdown arrow on multi-selects in dark mode

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-03 22:56:14 +02:00
co-authored by Claude Opus 5.5
parent 06cd1db99c
commit e1906611d9
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/components.css
+4 -3
View File
@@ -85,9 +85,10 @@ select {
padding-inline-end: 32px; padding-inline-end: 32px;
} }
[dir="rtl"] select { background-position: 6px 50%; } [dir="rtl"] select { background-position: 6px 50%; }
/* The chevron is an image, so it cannot use color roles: one file per mode */ /* 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); } :where() keeps the swap at select's specificity so select[multiple] below still drops it */
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) select { background-image: url(../images/arrow-drop-down-dark.svg); } } :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 */ /* Autocomplete fields (parent task, watchers): M3 leading search icon, same per-mode files */
input.autocomplete { input.autocomplete {
background: transparent url(../images/search.svg) no-repeat 12px 50% / 20px; background: transparent url(../images/search.svg) no-repeat 12px 50% / 20px;