From eb71c4b2fae4ff6e3adc5cde884e5980a57798c4 Mon Sep 17 00:00:00 2001
From: Henro Veijer <info@data-pro.nu>
Date: Fri, 27 Feb 2026 16:29:34 +0100
Subject: [PATCH] rewrote all the css

---
 .../assets/conf/desktop/waybar/style.css      | 111 +++++++++++-------
 1 file changed, 67 insertions(+), 44 deletions(-)

diff --git a/henrovnix_ok/assets/conf/desktop/waybar/style.css b/henrovnix_ok/assets/conf/desktop/waybar/style.css
index 04c31b335..f2424ab5a 100644
--- a/henrovnix_ok/assets/conf/desktop/waybar/style.css
+++ b/henrovnix_ok/assets/conf/desktop/waybar/style.css
@@ -1,14 +1,17 @@
 /* --- Hyprland palette --- */
-@define-color base     rgba(30, 30, 46, 1.0);
-@define-color inactive rgba(89, 89, 89, 0.667);
-@define-color blue     rgba(51, 204, 255, 0.933);
-@define-color green    rgba(0, 255, 153, 0.933);
-@define-color text     rgba(255, 255, 255, 1.0);
-@define-color surface1 rgba(255, 255, 255, 0.08);
-@define-color subtext1 rgba(255, 255, 255, 0.35);
-@define-color red      rgba(255, 0, 0, 0.90);
-@define-color yellow   rgba(249, 226, 175, 1.0);
-@define-color overlay1 rgba(255, 255, 255, 0.55);
+@define-color base        rgba(30, 30, 46, 1.0);
+@define-color inactive    rgba(89, 89, 89, 0.667);
+@define-color blue        rgba(51, 204, 255, 0.933);
+@define-color green       rgba(0, 255, 153, 0.933);
+
+@define-color text        rgba(255, 255, 255, 1.0);
+@define-color surface1    rgba(255, 255, 255, 0.08);
+@define-color subtext1    rgba(255, 255, 255, 0.35);
+@define-color red         rgba(255, 0, 0, 0.90);
+@define-color yellow      rgba(249, 226, 175, 1.0);
+@define-color overlay1    rgba(255, 255, 255, 0.55);
+
+/* Active “fill” shared by active workspace + overflow */
 @define-color active_fill rgba(255, 255, 255, 0.05);
 
 * {
@@ -25,70 +28,88 @@
 window#waybar {
     background-color: @base;
     color: @text;
+
+    /* Helps prevent right-edge clipping of last module */
+    padding-right: 6px;
+    padding-left: 6px;
 }
 
-/* --- Workspaces --- */
+/* =========================================================
+ * Workspaces (reduced height)
+ * ========================================================= */
 #workspaces button {
+    /* Reduce height: keep vertical padding at 0 */
     padding: 0px 4px;
+
+    /* Your fixed width */
     min-width: 80px;
-    margin: 1px 4px;
+
+    /* Reduce height further: smaller vertical margin */
+    margin: 0px 4px;
+
     background-color: transparent;
     color: @text;
+
+    /* Keep border thin to reduce vertical footprint */
     border: 1px solid @inactive;
-    border-radius: 15px;
+
+    /* Smaller radius reduces “cut off” risk at top/bottom */
+    border-radius: 10px;
+
     box-shadow: none;
 }
 
+/* Hover: keep it subtle to avoid clipping */
 #workspaces button:hover {
     background-color: rgba(255, 255, 255, 0.1);
-    /* box-shadow: 0 0 2px rgba(51, 204, 255, 0.18); */
 }
 
-#workspaces button.active {
+/* =========================================================
+ * Active style (and overflow style) — identical visuals
+ *
+ * NOTE: Big glows get clipped by the bar height.
+ * We keep the “gradient vibe” but reduce the blur radius.
+ * ========================================================= */
+#workspaces button.active,
+#custom-hyprscroll_overflow.overflow {
     font-weight: bold;
 
-    /* EXACT match: border color == background color */
+    padding: 0px 4px;
+    min-width: 80px;
+    margin: 0px 4px;
+
+    color: @text;
+
     background-color: @active_fill;
     border: 1px solid @active_fill;
+    border-radius: 10px;
 
-    /* Gradient vibe without breaking radius */
+    /* Reduced glow to minimize top/bottom clipping */
     box-shadow:
         0 0 0 1px rgba(51, 204, 255, 0.55),
         0 0 0 2px rgba(0, 255, 153, 0.4),
-        0 0 10px rgba(51, 204, 255, 0.18),
-        0 0 10px rgba(0, 255, 153, 0.14);
-}
-
-#workspaces button.active:hover {
-    box-shadow:
-        0 0 0 1px rgba(51, 204, 255, 0.65),
-        0 0 0 2px rgba(0, 255, 153, 0.48),
-        0 0 12px rgba(51, 204, 255, 0.22),
-        0 0 12px rgba(0, 255, 153, 0.18);
-}
-
-/* --- Hyprscroll overflow indicator --- */
-#custom-hyprscroll_overflow.overflow {
-    padding: 0px 4px;
-    min-width: 80px;
-    margin: 1px 4px;
-    border: 1px solid @active_fill;
-    border-radius: 15px;
-    font-weight: bold;
-    color: @text;
-    background-color: @active_fill;
+        0 0 4px rgba(51, 204, 255, 0.18),
+        0 0 4px rgba(0, 255, 153, 0.14);
 }
 
+#workspaces button.active:hover,
 #custom-hyprscroll_overflow.overflow:hover {
-    padding-right: 10px;
+    /* Keep hover glow but still small */
     box-shadow:
         0 0 0 1px rgba(51, 204, 255, 0.65),
         0 0 0 2px rgba(0, 255, 153, 0.48),
-        0 0 12px rgba(51, 204, 255, 0.22),
-        0 0 12px rgba(0, 255, 153, 0.18);
+        0 0 6px rgba(51, 204, 255, 0.22),
+        0 0 6px rgba(0, 255, 153, 0.18);
 }
 
-/* --- Notifications icon --- */
+/* Overflow: add permanent right padding (don’t do it only on hover, it clips) */
+#custom-hyprscroll_overflow.overflow {
+    padding-right: 10px;
+}
+
+/* =========================================================
+ * Notifications
+ * ========================================================= */
 #custom-notifications {
     margin: 0 4px;
     padding: 0 4px;
@@ -102,7 +123,9 @@ window#waybar {
     color: @yellow;
 }
 
-/* --- Modules spacing --- */
+/* =========================================================
+ * Other modules spacing
+ * ========================================================= */
 #clock,
 #idle_inhibitor,
 #battery,