From 965636b9be907b2fcd6f378d0f13c507081a7d2c Mon Sep 17 00:00:00 2001
From: Jacob Kofron <gnomical@users.noreply.github.com>
Date: Mon, 5 Dec 2022 23:02:57 -0500
Subject: [PATCH] updating dropdown styles so that menu is legible when placed
 above page body content

---
 package.json              |  2 +-
 src/fallbacks.module.scss | 31 ++++++++++++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f2db963..45be6af 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "description": "Lightweight and customizable theme handler for Solid JS",
   "author": "Jacob Kofron",
   "license": "MIT",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "homepage": "https://github.com/gnomical/solid-theme-provider#readme",
   "repository": {
     "type": "git",
diff --git a/src/fallbacks.module.scss b/src/fallbacks.module.scss
index 5539cbc..7d3c88a 100644
--- a/src/fallbacks.module.scss
+++ b/src/fallbacks.module.scss
@@ -62,16 +62,31 @@
   .dropdown {
     position: absolute;
     top: calc(100% + 0.25em);
-    left: 0;
+    left: -.25em;
     font-size: 0.9em;
     text-align: left;
-    background: var(--stp-foreground-alpha_quarternary);
+    background: var(--stp-background-alpha_secondary);
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
     border-radius: var(--stp-button_radius);
-    padding: 0.25em;
+    padding: 0.5em;
+
+    &::before {
+      content: "";
+      background: var(--stp-foreground-alpha_quarternary);
+      border-radius: var(--stp-button_radius);
+      position: absolute;
+      pointer-events: none;
+      top: 0.25em;
+      left: 0.25em;
+      width: calc(100% - 0.5em);
+      height: calc(100% - 0.5em);
+    }
 
     > div {
       cursor: pointer;
       white-space: nowrap;
+      position: relative;
       &:first-child {
         margin-top: 0;
       }
@@ -81,21 +96,15 @@
       .icon {
         font-size: 0.9em;
         svg {
-          fill: var(--stp-foreground-alpha_secondary);
+          fill: var(--stp-foreground);
         }
       }
       .text {
         padding-left: 0.5em;
-        color: var(--stp-foreground-alpha_secondary);
+        color: var(--stp-foreground);
       }
       &.active {
         background: var(--stp-background);
-        .text {
-          color: var(--stp-foreground);
-        }
-        .icon svg {
-          fill: var(--stp-foreground);
-        }
       }
       &:hover:not(.active) {
         background: var(--stp-foreground-alpha_secondary);