BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve dropdown styling on windows

Browse Source
This commit is contained in:
SethBurkart123
2026-03-18 11:35:23 +11:00
parent bcc7d58ddd
commit e11e402c80
3 changed files with 74 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/injected.scss
+28 -4
View File
@@ -60,18 +60,42 @@ body {
font-family: Rubik, sans-serif !important; font-family: Rubik, sans-serif !important;
} }
select {
border-radius: 8px !important;
}
select:not([multiple]):not([size]),
select[size="1"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%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-position: right 0.8rem center !important;
background-repeat: no-repeat !important;
background-size: 1rem !important;
padding-right: 2.4rem !important;
color-scheme: light;
}
select::-ms-expand {
display: none;
}
select option { select option {
background-color: #ffffff !important; background-color: #ffffff !important;
color: #111827 !important; color: #111827 !important;
} }
.dark select:not([multiple]):not([size]),
.dark select[size="1"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%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;
}
.dark select option { .dark select option {
background-color: #1f2937 !important; background-color: #1f2937 !important;
color: #ffffff !important; color: #ffffff !important;
} }
select {
border-radius: 8px !important;
}
#container { #container {
background: var(--auto-background) !important; background: var(--auto-background) !important;
} }
src/interface/components/Select.svelte
+21 -12
View File
@@ -8,12 +8,12 @@
let select: HTMLSelectElement; let select: HTMLSelectElement;
</script> </script>
<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip"> <div class="relative border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
<select <select
bind:this={select} bind:this={select}
value={state} value={state}
onchange={() => onChange(select.value)} onchange={() => onChange(select.value)}
class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors" class="px-4 py-2 pr-10 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
> >
{#each options as option} {#each options as option}
<option value={option.value}> <option value={option.value}>
@@ -21,20 +21,29 @@
</option> </option>
{/each} {/each}
</select> </select>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-black/45 dark:text-white/60" aria-hidden="true">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
<path 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"></path>
</svg>
</span>
</div> </div>
<style> <style>
/* Make native dropdown list readable on Windows */ select {
select option { color-scheme: light;
background-color: #ffffff;
color: #111827; /* zinc-900 */
}
:global(.dark) select option {
background-color: #1f2937; /* zinc-800 */
color: #ffffff;
} }
:global(.dark) div::after { :global(.dark) select {
color: rgba(255, 255, 255, 0.6); color-scheme: dark;
}
select option {
background-color: #ffffff;
color: #111827;
}
:global(.dark) select option {
background-color: #1f2937;
color: #ffffff;
} }
</style> </style>
src/plugins/built-in/assessmentsOverview/styles.css
+25 -3
View File
@@ -34,19 +34,38 @@
} }
.filter-select { .filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #ffffff !important; background: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%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-position: right 0.9rem center !important;
background-repeat: no-repeat !important;
background-size: 1rem !important;
border: 2px solid #e2e8f0; border: 2px solid #e2e8f0;
border-radius: 8px; border-radius: 10px;
color: #1a1a1a; color: #1a1a1a;
padding: 0.75rem 1rem; color-scheme: light;
padding: 0.75rem 2.5rem 0.75rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
font-family: Rubik, sans-serif;
line-height: 1.2;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: 180px; min-width: 180px;
} }
.filter-select::-ms-expand {
display: none;
}
.filter-select option {
background: #ffffff;
color: #1a1a1a;
}
.filter-select:focus { .filter-select:focus {
outline: none; outline: none;
border-color: #d41e3a; border-color: #d41e3a;
@@ -61,8 +80,10 @@
/* Dark mode dropdowns */ /* Dark mode dropdowns */
.dark .filter-select { .dark .filter-select {
background: var(--background-primary) !important; background: var(--background-primary) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%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;
border-color: var(--background-secondary); border-color: var(--background-secondary);
color: var(--text-primary); color: var(--text-primary);
color-scheme: dark;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
@@ -73,7 +94,8 @@
.dark .filter-select:hover { .dark .filter-select:hover {
border-color: var(--background-secondary); border-color: var(--background-secondary);
background: var(--background-secondary); background: var(--background-secondary) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%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;
} }
.dark .filter-select option { .dark .filter-select option {