From 52d13cbdc21296f311dafece96898151fed9f77a Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 18 Mar 2026 11:47:46 +1100
Subject: [PATCH] fix: dropdowns on windows hopefully

---
 src/css/injected.scss                  | 37 +++++++++++----
 src/interface/components/Select.svelte | 63 ++++++++++++++++++++------
 2 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/css/injected.scss b/src/css/injected.scss
index bd47edc2..8bbf6eef 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -61,7 +61,26 @@ body {
 }
 
 select {
-  border-radius: 8px !important;
+  border-radius: 16px !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;
+  color: var(--text-primary) !important;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease !important;
+}
+
+select:hover {
+  background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%) !important;
+  border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 92%, transparent) !important;
+}
+
+select:focus {
+  outline: none !important;
+  background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%) !important;
+  border-color: color-mix(in srgb, var(--text-primary) 18%, var(--theme-offset-bg, var(--background-secondary)) 82%) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
 }
 
 select:not([multiple]):not([size]),
@@ -69,11 +88,11 @@ 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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999'%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;
-  padding-right: 2.4rem !important;
+  padding-right: 2.6rem !important;
   color-scheme: light;
 }
 
@@ -82,19 +101,19 @@ select::-ms-expand {
 }
 
 select option {
-  background-color: #ffffff !important;
-  color: #111827 !important;
+  background: var(--background-primary) !important;
+  color: var(--text-primary) !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;
+  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;
 }
 
 .dark select option {
-  background-color: #1f2937 !important;
-  color: #ffffff !important;
+  background: var(--background-primary) !important;
+  color: var(--text-primary) !important;
 }
 #container {
   background: var(--auto-background) !important;
diff --git a/src/interface/components/Select.svelte b/src/interface/components/Select.svelte
index 0286555b..a782b5db 100644
--- a/src/interface/components/Select.svelte
+++ b/src/interface/components/Select.svelte
@@ -8,12 +8,12 @@
   let select: HTMLSelectElement;
 </script>
 
-<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">
+<div class="select-wrapper relative w-full overflow-hidden rounded-2xl border shadow-2xl">
   <select
     bind:this={select}
     value={state}
     onchange={() => onChange(select.value)}
-    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"
+    class="select-input w-full appearance-none border-none bg-transparent px-4 py-2.5 pr-10 text-[0.875rem] font-medium transition-colors"
   >
     {#each options as option}
       <option value={option.value}>
@@ -21,7 +21,7 @@
       </option>
     {/each}
   </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">
+  <span class="select-icon pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" 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>
@@ -29,21 +29,54 @@
 </div>
 
 <style>
-  select {
+  .select-wrapper {
+    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
+    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 72%, transparent);
+    border-radius: 18px;
+    color: var(--text-primary);
+    transition:
+      background-color 180ms ease,
+      border-color 180ms ease,
+      box-shadow 180ms ease,
+      transform 180ms ease;
+  }
+
+  .select-wrapper:hover {
+    background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%);
+    border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 88%, transparent);
+  }
+
+  .select-wrapper:focus-within {
+    background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%);
+    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-offset-bg, var(--background-secondary)) 78%);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
+  }
+
+  .select-input {
+    color: var(--text-primary);
+    outline: none;
+    text-overflow: ellipsis;
+  }
+
+  .select-input:hover,
+  .select-input:focus {
+    background: transparent;
+  }
+
+  .select-input option {
+    background: var(--background-primary);
+    color: var(--text-primary);
+  }
+
+  .select-icon {
+    color: color-mix(in srgb, var(--text-primary) 60%, transparent);
+  }
+
+  .select-input {
     color-scheme: light;
   }
 
-  :global(.dark) select {
+  :global(.dark) .select-input {
     color-scheme: dark;
   }
-
-  select option {
-    background-color: #ffffff;
-    color: #111827;
-  }
-
-  :global(.dark) select option {
-    background-color: #1f2937;
-    color: #ffffff;
-  }
 </style>