Waybar style.css (fixed: no linear-gradient(...) padding-box that breaks

GTK CSS, and defines the missing colors  referenced)

SwayNC style.css (uses the same @define-color values and the same @base
background; also fixes  card_rgba typo)

Note: Blur is not a CSS thing here — SwayNC is GTK-based, so
backdrop-filter is not reliably supported. Do blur via Hyprland
layerrule. SwayNC is explicitly a GTK notification center.

henrovnix_ok/assets/conf/desktop/waybar/style.css

@@ -1,15 +1,19 @@
 /* --- Hyprland palette (ported) --- */
-@define-color base     rgba(30, 30, 46, 1.0); /* 1e1e2eff */
+@define-color base     rgba(30, 30, 46, 1.0); /* 1e1e2e */
 @define-color inactive rgba(89, 89, 89, 0.667); /* 595959aa */
 @define-color blue     rgba(51, 204, 255, 0.933); /* 33ccffee */
 @define-color green    rgba(0, 255, 153, 0.933); /* 00ff99ee */
 
-/* extra colors you referenced but didn’t define */
+/* extras (make sure all referenced colors exist) */
 @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);
 
+/* you referenced these but didn't define them */
+@define-color overlay1 rgba(255, 255, 255, 0.55);
+@define-color yellow   rgba(249, 226, 175, 1.0);
+
 * {
     font-family:
         Aporetic Sans Mono,
@@ -24,20 +28,34 @@
 window#waybar {
     background-color: @base;
     color: @text;
-    transition-property: background-color;
     border-bottom: 0px solid rgba(0, 0, 0, 0);
+    transition-property: background-color;
     transition-duration: 0.5s;
 }
 
+/* Workspaces */
 #workspaces button {
-    padding: 0px 1px;
-    min-width: 80px;
+    padding: 0px 6px;
+    min-width: 0px; /* prevents modules-right clipping */
     background-color: transparent;
     color: @text;
     border: 1px solid @inactive;
     border-radius: 10px;
 }
 
+#workspaces button:hover {
+    background-color: @surface1;
+    color: @text;
+}
+
+/* GTK-safe "active" styling (no gradients that break Waybar CSS parsing) */
+#workspaces button.active {
+    font-weight: bold;
+    background-color: rgba(255, 255, 255, 0.12);
+    border: 1px solid @blue;
+}
+
+/* Notifications module */
 #custom-notifications {
     margin: 0 4px;
     padding: 0 4px;
@@ -47,29 +65,11 @@ window#waybar {
 #custom-notifications.empty {
     color: @overlay1;
 }
-
 #custom-notifications.unread {
     color: @yellow;
 }
 
-#workspaces button:hover {
-    background-color: @surface1;
-    color: @text;
-}
-
-#workspaces button.active {
-    padding: 0px 1px;
-    min-width: 80px;
-    color: @text;
-    border-radius: 10px;
-    font-weight: bold;
-    border: 1px solid transparent;
-    background:
-        linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15))
-            padding-box,
-        linear-gradient(45deg, @blue, @green) border-box;
-}
-
+/* Standard modules */
 #clock,
 #idle_inhibitor,
 #battery,
@@ -86,7 +86,6 @@ window#waybar {
 #idle_inhibitor.activated {
     background-color: @green;
 }
-
 #battery.charging {
     color: @green;
 }
@@ -112,31 +111,20 @@ window#waybar {
     margin: 0 4px;
 }
 
-.modules-left > widget:first-child > #workspaces {
-    margin-left: 0;
-}
-
-.modules-right > widget:last-child > #workspaces {
-    margin-right: 0;
-}
-
 #network.disconnected {
     background-color: @red;
 }
-
 #temperature.critical {
     background-color: @red;
 }
 
+/* Your overflow indicator, GTK-safe */
 #custom-hyprscroll_overflow.overflow {
-    padding: 0px 1px;
-    min-width: 80px;
+    padding: 0px 6px;
+    min-width: 0px;
     color: @text;
     border-radius: 10px;
     font-weight: bold;
-    border: 1px solid transparent;
-    background:
-        linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))
-            padding-box,
-        linear-gradient(45deg, @blue, @green) border-box;
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid @green;
 }