Summary
Opening a dropdown styled with form-input turned its list nearly white on the dark theme. A focused .form-input gets a see-through background (rgba(0, 0, 0, 0.3)), which suits text fields; opening a <select> focuses it, and the browser draws the open list with the field's background, so a 30 % black over the browser's default white came out almost white. A focused select now keeps the opaque #1a1a1a its options already use.
Changes
Fixed
select.form-input:focuskeeps an opaque#1a1a1abackground (styles/views/addnew-consolidated.css), so the open list stays dark.
Dropdowns fixed
Every dropdown styled with form-input:
| Screen | Dropdown | Code |
|---|---|---|
| Add New, advanced search | Language | views/content/AddNewView.vue
|
| Add New, advanced search | Region | views/content/AddNewView.vue
|
| Add to Library dialog (from a search result) | Region | components/domain/audiobook/AddLibraryModal.vue
|
| Advanced Search dialog | Language | components/domain/search/AdvancedSearchModal.vue
|
| Library Import, Find Match | Region | components/domain/audiobook/LibraryImportSearchModal.vue
|
| Settings, Root folder dialog | Case sensitivity | components/settings/RootFolderFormModal.vue
|
Dropdowns with their own styles (Library Import's root folder and sort dropdowns, for example) already had an opaque background and never turned white; they are unchanged.
Testing
Tested by hand on an instance running the latest canary tag plus this change: the lists of the dropdowns above stay dark when opened. Before the change, the same lists turned white on that instance and on one running canary. CSS only: no unit test covers it; Prettier is clean.
Captures
Before
<img width="3556" height="1559" alt="image" src="https://github.com/user-attachments/assets/e2309e25-5ee7-4b85-acc5-f27c408f9d8e" />
After
<img widt...
Automated Canary build