refactor: ♻️ Move custom styling for select box to improve appearance in Safari to the CSS file

Author: OidaTiftla

src/index.html

@@ -106,7 +106,7 @@ <h1 class="text-3xl font-bold text-cyan-400 mb-2">Calendar Proxy</h1>
               <div class="flex flex-col sm:flex-row gap-2">
                 <select
                   id="uaPreset"
-                  class="flex-1 rounded-lg border-0 bg-slate-800 px-4 py-3 text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyan-500 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\"%3E%3Cpath stroke=\"%236b7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 8l4 4 4-4\"/%3E%3C/svg%3E')] bg-[length:1.5em_1.5em] bg-[right_0.5rem_center] bg-no-repeat pr-10"
+                  class="flex-1 rounded-lg border-0 bg-slate-800 px-4 py-3 text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyan-500 select-styled"
                 >
                   <option value="">Server default</option>
                   <option

src/input.css

@@ -1 +1,11 @@
 @import "tailwindcss";
+
+/* Safari select box styling fix */
+.select-styled {
+  appearance: none;
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"%3E%3Cpath stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/%3E%3C/svg%3E');
+  background-size: 1.5em 1.5em;
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  padding-right: 2.5rem;
+}