further configure hyprland

roles/hyprland/files/wofi/style.css

@@ -1,26 +1,35 @@
+* {
+  /* smoother corners everywhere */
+  border-radius: 12px;
+  font-weight: 450;
+}
+
+/* Window container */
 window {
   margin: 0px;
-  border: 1px solid #61AFEF;      /* One Dark blue */
-  background-color: #282C34;      /* One Dark background */
+  padding: 6px;
+  border: 1px solid rgba(127, 90, 240, 0.35); /* accent tint */
+  background-color: rgba(12, 14, 20, 0.55);   /* translucent */
+  color: #E6E7EB;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  backg
 }
 
+/* Input field */
 #input {
-  margin: 5px;
-  border: none;
-  color: #ABB2BF;                 /* One Dark fg */
-  background-color: #3E4451;      /* One Dark gutter/bg */
+  margin: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgba(127, 90, 240, 0.25);
+  background-color: rgba(34, 38, 48, 0.70);
+  color: #E6E7EB;
+  outline: none;
 }
 
-#inner-box {
-  margin: 5px;
+/* Lists/boxes */
+#outer-box, #inner-box {
+  margin: 6px;
   border: none;
-  background-color: #282C34;      /* match window bg */
-}
-
-#outer-box {
-  margin: 5px;
-  border: none;
-  background-color: #282C34;      /* match window bg */
+  background-color: rgba(24, 28, 36, 0.60);
 }
 
 #scroll {
@@ -28,25 +37,55 @@ window {
   border: none;
 }
 
-#text {
-  margin: 5px;
-  margin-left: 10px;
-  border: none;
-  color: #ABB2BF;                 /* One Dark fg */
+/* Entry text */
+#text, #entry > * {
+  margin: 6px 10px;
+  color: #E6E7EB;
 }
 
-#entry.activatable #text {
-  color: #282C34;                 /* invert to bg for activation */
+/* Rows (entries) */
+#entry {
+  margin: 4px 6px;
+  padding: 8px 6px;
+  border: 1px solid transparent;
+  background-color: transparent;
+  transition: background-color 120ms ease, border-color 120ms ease;
 }
 
-#entry > * {
-  color: #ABB2BF;                 /* One Dark fg */
+/* Hover — soft highlight */
+#entry:hover {
+  background-color: rgba(127, 90, 240, 0.10);
+  border-color: rgba(127, 90, 240, 0.25);
 }
 
+/* Selected row — stronger surface and bold text */
 #entry:selected {
-  background-color: #3E4451;      /* selected background */
+  background-color: rgba(127, 90, 240, 0.18);
+  border-color: rgba(127, 90, 240, 0.40);
 }
 
 #entry:selected #text {
-  font-weight: bold;
+  font-weight: 600;
+}
+
+/* Activatable (e.g., currently typed match) — invert text for contrast */
+#entry.activatable #text {
+  color: rgba(12, 14, 20, 0.92);
+}
+
+/* Muted secondary text, if present */
+#entry .secondary, #entry .desc {
+  color: #AAB0BC;
+}
+
+/* Optional: focus ring for keyboard nav */
+#entry:focus {
+  border-color: rgba(127, 90, 240, 0.55);
+  background-color: rgba(127, 90, 240, 0.12);
+}
+
+/* Optional: thin separators using subtle overlay lines */
+separator, .separator {
+  background-color: rgba(255, 255, 255, 0.06);
+  min-height: 1px;
 }