BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-08-28 09:11:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve select dropdown contrast

Browse Source
This commit is contained in:
StroepWafel
2026-06-22 15:49:21 +09:30
parent ecc89e864c
commit e3ec6c80d0
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/injected.scss
+11 -7
View File
@@ -66,6 +66,10 @@ select {
border: 1px solid color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 78%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 78%, transparent) !important;
background: color-mix(in srgb, var(--background-primary) 90%, transparent) !important; background: color-mix(in srgb, var(--background-primary) 90%, transparent) !important;
color: var(--text-primary) !important; color: var(--text-primary) !important;
padding: 0.5rem 1rem !important;
min-height: 2.5rem !important;
font-size: 0.875rem !important;
line-height: 1.25 !important;
transition: transition:
background-color 180ms ease, background-color 180ms ease,
border-color 180ms ease, border-color 180ms ease,
@@ -94,6 +98,10 @@ select[size="1"] {
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 1rem !important; background-size: 1rem !important;
padding-right: 2.6rem !important; padding-right: 2.6rem !important;
}
html:not(.dark) select:not([multiple]):not([size]),
html:not(.dark) select[size="1"] {
color-scheme: light; color-scheme: light;
} }
@@ -101,9 +109,10 @@ select::-ms-expand {
display: none; display: none;
} }
/* OS option panels on Windows/Edge are often light even in dark mode */
select option { select option {
background: var(--background-primary) !important; background-color: #ffffff !important;
color: var(--text-primary) !important; color: #18181b !important;
} }
.dark select:not([multiple]):not([size]), .dark select:not([multiple]):not([size]),
@@ -111,11 +120,6 @@ select option {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c9c9c9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c9c9c9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
color-scheme: dark; color-scheme: dark;
} }
.dark select option {
background: var(--background-primary) !important;
color: var(--text-primary) !important;
}
#container { #container {
background: var(--auto-background) !important; background: var(--auto-background) !important;
} }
src/interface/components/Select.svelte
+6 -5
View File
@@ -63,11 +63,6 @@
background: transparent; background: transparent;
} }
.select-input option {
background: var(--background-primary);
color: var(--text-primary);
}
.select-icon { .select-icon {
color: color-mix(in srgb, var(--text-primary) 60%, transparent); color: color-mix(in srgb, var(--text-primary) 60%, transparent);
} }
@@ -79,4 +74,10 @@
:global(.dark) .select-input { :global(.dark) .select-input {
color-scheme: dark; color-scheme: dark;
} }
/* Native option lists on Windows/Edge often stay light regardless of color-scheme */
.select-input option {
background-color: #ffffff;
color: #18181b;
}
</style> </style>