improve accent button dropdown styling and layout

Author: LinuxJava7

src/components/Navigation/AccentButton.astro

@@ -65,11 +65,11 @@
     border-radius: 100px;
 
     #accent-options {
-      right: 10px;
-      border-radius: 1rem;
+      right: 0.9rem;
+      border-radius: 1.1rem;
       margin: 0.5rem 0rem;
-      padding: 1rem;
-      background-color: oklch(from var(--accent-color) 0.95 0.03 h / 90%);
+      padding: 0.5rem;
+      background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
@@ -88,16 +88,12 @@
       z-index: 2;
 
       backdrop-filter: blur(2px);
-      font-size: 0.8rem;
+      font-size: 1rem;
 
       display: flex;
       flex-direction: column;
 
-      gap: 0.5rem;
-
-      > div {
-        padding: 0.25rem 1.25rem;
-      }
+      gap: 0.2rem;
     }
 
     #accent-options.hide {
@@ -136,19 +132,19 @@
       }
     }
     #accent-options div {
-      padding: 0.4rem 0.6rem;
+      padding: 0.3rem 0.9rem;
       cursor: pointer;
-      border-radius: 100px;
+      border-radius: 0.6rem;
     }
 
     #accent-options div:hover {
-      background-color: oklch(0 0 0 / 0.07);
+      background-color: oklch(0 0 0 / 0.08);
       @media (prefers-color-scheme: dark) {
         background-color: oklch(1 0 0 / 0.06);
       }
     }
     #accent-options div.selected {
-      background-color: oklch(0 0 0 / 0.05);
+      background-color: oklch(0 0 0 / 0.04);
       color: var(--accent-color);
       @media (prefers-color-scheme: dark) {
         background-color: oklch(1 0 0 / 0.04);
@@ -170,8 +166,8 @@
 
   <div id="accent-options" class="options hide">
     <div data-value="system" style="color: oklch(from AccentColor 0.7 0.1 h">
-      System
+      system
     </div>
-    <div data-value="default" style="color: oklch(0.7 0.1 300)">Default</div>
+    <div data-value="default" style="color: oklch(0.7 0.1 300)">default</div>
   </div>
 </div>