External/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: restore custom dropdown chevron for timezone selector in dark mode (#1368)

Browse Source 
Fixes #1359

The timezone selector in the Routines form was showing repeated dropdown
icons and poor text readability in dark mode because:

1.  set  to remove the native
   chevron, but didn't restore a custom one via background-image
2. Missing  caused text to overlap with any chevron
3. No dark-mode-specific chevron color was defined

This commit adds the custom dropdown chevron styling (matching the global
select behavior) with proper padding and dark-mode color variants, ensuring:
- Single, correctly-positioned chevron icon
- Sufficient padding to prevent text overlap
- Proper contrast in both light and dark themes
- Consistent visual behavior with other form controls
This commit is contained in:
Nicholas-Xiong
2026-05-12 14:29:01 +08:00
committed by GitHub
parent fb47d0ae51
commit c0b679ecbc
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/index.css
+21
View File
@@ -17069,6 +17069,27 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
font-family: inherit;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* Restore custom dropdown chevron for select elements in routines form.
The appearance:none above removes the native chevron, so we paint our own
via background-image (matching the global select styling). */
.routines-field select {
padding-right: 32px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2374716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px 12px;
}
[data-theme='dark'] .routines-field select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .routines-field select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9690' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E");
}
}
.routines-field input:focus,
.routines-field textarea:focus,
.routines-field select:focus,