Add better hover color for sort-scheme

1 files changed, 22 insertions, 6 deletions

diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index c4034ad..82db502 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -21,16 +21,20 @@
 [theme="dark"] {
     color-scheme: dark;
     --background-color: #000715;
-    --secondary-color: #444444;
-    --tertiary-color: #3a3a3a;
-    --foreground-color: #ffffff;
-    --highlight-color: #6091e8;
-    --dark-highlight-clor: #002846;
-    --hover-color: #394559;
+    --secondary-color: #444444; /* color of cards and buttons*/
+    --tertiary-color: #3a3a3a; /* color of dark cards */
+    --foreground-color: #ffffff; /* used on text */
+    --highlight-color: #6091e8; /* accent color */
+    --dark-highlight-clor: #002846; /* not used currently */
+    --hover-color: #394559; /* hover color for cards and buttons*/
     --opacity-cr: 0;
     --opacity-jf: 1;
 }
 
+:root {
+    --background-hover: color-mix(in oklch, var(--background-color) 60%,  var(--hover-color) 40%);
+}
+
 html, body {
     margin: 0;
     height: 100%;
@@ -60,6 +64,10 @@ input, textarea, select {
     &.sort-scheme {
         background-color: transparent;
         border-color: var(--secondary-color);
+
+        &:hover {
+            background-color: var(--background-hover);
+        }
     }
 }
 
@@ -82,6 +90,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
 
     &.sort-scheme {
         background-color: transparent;
+
+        &:hover {
+            background-color: var(--background-hover);
+        }
     }
 }
 
@@ -94,6 +106,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
     font-weight: 700;
     background-color: transparent;
     text-shadow: var(--highlight-color) 0 0 50px;
+
+    &:hover {
+        background-color: var(--background-hover) !important;
+    }
 }
 
 .icon {