Aliging css a bit more

henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css

@@ -1,39 +1,15 @@
-/* SwayNotificationCenter (swaync) – aligned to Waybar palette
- * Put in: ~/.config/swaync/style.css
- *
- * swaync is GTK-based and supports loading a custom CSS file. :contentReference[oaicite:1]{index=1}
- */
-
 /* Match Waybar palette exactly */
 @define-color base     rgba(30, 30, 46, 1.0);
-@define-color inactive rgba(89, 89, 89, 0.667);
+@define-color text     rgba(255, 255, 255, 1.0);
 @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);
 
-/* Use the SAME "base" look as Waybar, but slightly transparent if you want glass */
+/* Opaque so it visually matches Waybar */
-@define-color panel_rgba rgba(30, 30, 46, 0.92); /* set to 1.0 if you want fully identical */
+@define-color panel_rgba rgba(30, 30, 46, 1.0);
-@define-color card_rgba  rgba(30, 30, 46, 0.92); /* FIXED: removed extra ')' */
+@define-color card_rgba  rgba(30, 30, 46, 1.0);
-
-/* Kill list selection glow */
-list,
-listview,
-row,
-listview row,
-listview row:selected,
-listview row:hover,
-listview row:focus,
-listview row:active {
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    outline: none;
-}
 
 * {
     color: @text;
@@ -44,83 +20,37 @@ listview row:active {
     font-size: 13px;
 }
 
-.notification-row {
+/* Notification popup */
-    margin: 0;
-    padding: 0;
-}
-
 window#notification-window {
-    background: transparent;
+    background-color: @base;
 }
 
-/* Control center panel — match Waybar base */
+/* Control center */
 .control-center {
     background-color: @panel_rgba;
-    border-radius: 10px; /* matches your Waybar rounded vibe */
+    border-radius: 10px;
     padding: 12px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
 }
 
-/* Widget headers — use Waybar surface1 */
+/* Widget headers */
 .widget-title {
-    margin: 0 0 10px 0;
+    margin-bottom: 10px;
     padding: 6px 10px;
     border-radius: 10px;
     background-color: @surface1;
     border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.widget-title > label {
+/* Cards */
-    font-size: 14px;
-    font-weight: 700;
-}
-
-.widget-title button {
-    border-radius: 10px;
-    padding: 6px 10px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: none;
-}
-
-.widget-title button:hover {
-    background-color: rgba(255, 255, 255, 0.14);
-}
-
-.widget-dnd {
-    margin: 0 0 12px 0;
-    padding: 10px 12px;
-    border-radius: 10px;
-    background-color: @surface1;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.widget-dnd .switch {
-    border-radius: 999px;
-}
-
-.widget-notifications {
-    margin: 0;
-    padding: 0;
-}
-
-/* Notification cards */
-.notification-background {
-    margin: 10px 0;
-    padding: 0;
-    background: transparent;
-}
-
 .notification-background .notification {
     background-color: @card_rgba;
     border-radius: 10px;
-    padding: 12px 12px;
+    padding: 12px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
 }
 
-/* Left accent (same blue/green/red) */
+/* Accent by urgency */
 .notification.critical {
     border-left: 4px solid @red;
 }
@@ -146,13 +76,11 @@ window#notification-window {
     color: @text;
     font-weight: 800;
     font-size: 14px;
-    margin-top: 2px;
 }
 
 .notification .body {
     color: @subtext1;
     margin-top: 6px;
-    line-height: 1.25;
 }
 
 /* Buttons */
@@ -160,28 +88,8 @@ window#notification-window {
     border-radius: 10px;
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: none;
-    padding: 6px 10px;
 }
 
 .notification button:hover {
     background-color: rgba(255, 255, 255, 0.14);
 }
-
-.notification .close-button {
-    border-radius: 10px;
-    background-color: rgba(255, 0, 0, 0.12);
-    border: 1px solid rgba(255, 0, 0, 0.18);
-}
-
-.notification .close-button:hover {
-    background-color: rgba(255, 0, 0, 0.2);
-}
-
-.control-center .placeholder {
-    color: @subtext1;
-}
-
-separator {
-    background: rgba(255, 255, 255, 0.08);
-}

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

@@ -1,18 +1,15 @@
-/* --- Hyprland palette (ported) --- */
+/* --- Hyprland palette --- */
-@define-color base     rgba(30, 30, 46, 1.0); /* 1e1e2e */
+@define-color base     rgba(30, 30, 46, 1.0);
-@define-color inactive rgba(89, 89, 89, 0.667); /* 595959aa */
+@define-color inactive rgba(89, 89, 89, 0.667);
-@define-color blue     rgba(51, 204, 255, 0.933); /* 33ccffee */
+@define-color blue     rgba(51, 204, 255, 0.933);
-@define-color green    rgba(0, 255, 153, 0.933); /* 00ff99ee */
+@define-color green    rgba(0, 255, 153, 0.933);
 
-/* 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);
+@define-color overlay1 rgba(255, 255, 255, 0.55);
 
 * {
     font-family:
@@ -28,15 +25,13 @@
 window#waybar {
     background-color: @base;
     color: @text;
-    border-bottom: 0px solid rgba(0, 0, 0, 0);
-    transition-property: background-color;
-    transition-duration: 0.5s;
 }
 
-/* Workspaces */
+/* --- Workspaces --- */
 #workspaces button {
     padding: 0px 6px;
-    min-width: 0px; /* prevents modules-right clipping */
+    min-width: 80px;
+    max-width: 80px;
     background-color: transparent;
     color: @text;
     border: 1px solid @inactive;
@@ -45,17 +40,18 @@ window#waybar {
 
 #workspaces button:hover {
     background-color: @surface1;
-    color: @text;
 }
 
-/* GTK-safe "active" styling (no gradients that break Waybar CSS parsing) */
+/* Active workspace with GTK-safe gradient */
 #workspaces button.active {
     font-weight: bold;
-    background-color: rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
-    border: 1px solid @blue;
+    border: 2px solid transparent;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-image: linear-gradient(45deg, @blue, @green) 1;
 }
 
-/* Notifications module */
+/* --- Notifications icon --- */
 #custom-notifications {
     margin: 0 4px;
     padding: 0 4px;
@@ -69,7 +65,7 @@ window#waybar {
     color: @yellow;
 }
 
-/* Standard modules */
+/* --- Modules spacing --- */
 #clock,
 #idle_inhibitor,
 #battery,
@@ -99,32 +95,23 @@ window#waybar {
 
 #battery.warning:not(.charging) {
     color: white;
-    animation-name: blink;
+    animation: blink 0.5s linear infinite alternate;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
 }
 
-#window,
+#network.disconnected,
-#workspaces {
-    margin: 0 4px;
-}
-
-#network.disconnected {
-    background-color: @red;
-}
 #temperature.critical {
     background-color: @red;
 }
 
-/* Your overflow indicator, GTK-safe */
+/* --- Hyprscroll overflow indicator --- */
 #custom-hyprscroll_overflow.overflow {
     padding: 0px 6px;
-    min-width: 0px;
+    min-width: 80px;
+    max-width: 80px;
     color: @text;
     border-radius: 10px;
     font-weight: bold;
-    background-color: rgba(255, 255, 255, 0.08);
+    border: 2px solid transparent;
-    border: 1px solid @green;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-image: linear-gradient(45deg, @blue, @green) 1;
 }