refactor: waybar css

waybar/style.css

@@ -20,6 +20,7 @@
     font-size: 15px;
 }
 
+/* Window */
 window#waybar {
     background-color: transparent;
     color: @text-primary;
@@ -40,38 +41,33 @@ window#waybar.chromium {
     border: none;
 }
 
-/* Common module styling */
+/* Common module styling - applied to most modules */
-#mpd {
+#mpd,
+#custom-pomodoro,
+#custom-goal,
+#custom-submap,
+#cpu,
+#memory,
+#memory.swap,
+#disk,
+#clock,
+#battery,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
     border: 1px solid @border-color;
     border-top: none;
     padding: 0 10px;
-}
+    color: @text-primary;
-
+    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
-.modules-left {
-    border-left: none;
-    border-radius: 0 0 10px 0;
-}
-
-.modules-right {
-    border-right: none;
-    border-radius: 0 0 0 10px;
-}
-
-/* MPD player states */
-#mpd {
-  transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out, border-color 2s ease-out;
-  border-radius: 0 0 10px 10px;
-}
-
-#mpd.playing {
-    color: @accent-alt;
-}
-
-#mpd.stopped {
-  border-color: transparent;
-  background: transparent;
-  color: transparent;
 }
 
 /* Workspaces */
@@ -88,6 +84,9 @@ window#waybar.chromium {
     padding: 0 5px;
     background-color: transparent;
     color: @text-primary;
+    border: none;
+    border-radius: 0;
+    box-shadow: inset 0 -3px transparent;
 }
 
 #workspaces button.empty {
@@ -96,6 +95,7 @@ window#waybar.chromium {
 
 #workspaces button:hover {
     background: rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 -3px @text-primary;
 }
 
 #workspaces button.active.hosting-monitor {
@@ -110,74 +110,66 @@ window#waybar.chromium {
     font-weight: 700;
     background-color: @attention;
     box-shadow: inset 0 -13px @attention;
-    transition: color 0.5s ease-out, box-shadow 0.5s ease-out, background 0.5s ease-out;
+    transition: color 0.5s, box-shadow 0.5s, background 0.5s;
 }
 
-#cpu, #memory, #memory.swap {
+/* Side Module Groups */
-  background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+.modules-left {
+    border-left: none;
+    border-radius: 0 0 10px 0;
+}
+
+.modules-right {
+    border-right: none;
+    border-radius: 0 0 0 10px;
+}
+
+/* System Modules - specific border adjustments */
+#cpu,
+#memory,
+#memory.swap {
     margin: 0;
 }
 
 #cpu {
     margin-left: 20px;
-  border: 1px solid @border-color;
-  border-top: none;
     border-right: none;
     border-radius: 0 0 0 10px;
 }
 
 #memory {
-  border: 1px solid @border-color;
     border-left: none;
-  border-top: none;
     border-right: none;
 }
 
 #memory.swap {
-  border: 1px solid @border-color;
     border-left: none;
-  border-top: none;
     border-radius: 0 0 10px 0;
 }
 
-#custom-pomodoro, #custom-goal {
+/* Custom Modules */
+#custom-pomodoro,
+#custom-goal {
     color: @warning-alt;
-    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
-    border: 1px solid @border-color;
-    border-top: none;
     margin: 0 20px;
-    padding: 0 10px;
-    transition: color 2s ease-out, box-shadow 2s ease-out, background 2s ease-out;
 }
 
 #custom-pomodoro {
     border-radius: 0 0 10px 10px;
-    /* margin-right: 0; */
+}
-    /* border-right: none; */
+
+#custom-goal {
+    margin: 0;
+    border-left: none;
+    border-radius: 0 0 10px 0;
 }
 
 #custom-submap {
     color: @accent-color;
-    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
-    border: 1px solid @border-color;
-    border-top: none;
     border-radius: 0 0 10px 10px;
-    padding: 0 10px;
-    transition: color 2s ease-out, box-shadow 2s ease-out, background 2s ease-out;
-}
-
-#custom-pomodoro {
-    border-radius: 0 0 10px 10px;
-    /* margin-right: 0; */
-    /* border-right: none; */
-}
-
-#custom-goal {
-    border-radius: 0 0 10px 0;
-    margin: 0;
-    border-left: none;
 }
 
+/* Pomodoro States */
 #custom-pomodoro.break {
     color: @success;
     box-shadow: inset 0 -3px @success;
@@ -189,54 +181,81 @@ window#waybar.chromium {
 }
 
 #custom-pomodoro.break + #custom-goal,
-#custom-pomodoro.pause + #custom-goal
+#custom-pomodoro.pause + #custom-goal {
-{
     color: inherit;
     box-shadow: inherit;
 }
 
-#cpu, #memory, #disk {
+/* System Info Modules */
-    padding: 0 10px;
+#cpu,
+#memory,
+#memory.swap,
+#disk {
     color: @info;
-    transition: color 2s ease-out, box-shadow 2s ease-out, background 2s ease-out;
 }
 
-/* Module base styling */
+/* Standard Modules - border adjustments */
-#clock, #battery, #temperature, #backlight,
+#clock,
-#network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
+#battery,
-#idle_inhibitor, #scratchpad {
+#temperature,
-    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+#backlight,
-    border: 1px solid @border-color;
+#network,
-    border-top: none;
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad {
     border-left: none;
     border-right: none;
-    padding: 0 10px;
-    color: @text-primary;
-    transition: color 2s ease-out, box-shadow 2s ease-out, background 2s ease-out;
 }
 
 #pulseaudio {
     border-left: 1px solid @border-color;
+    border-right: none;
     border-radius: 0 0 0 10px;
     margin-left: 20px;
 }
 
-/* Hover effects */
+/* MPD specific styles */
-#clock:hover, #battery:hover, #disk:hover,
+#mpd {
-#temperature:hover, #backlight:hover, #network:hover, #pulseaudio:hover,
+    border-radius: 0 0 10px 10px;
-#wireplumber:hover, #custom-media:hover, #mode:hover, #idle_inhibitor:hover,
+    transition: color 2s, border-color 2s, background 2s;
-#scratchpad:hover, #power-profiles-daemon:hover {
-    color: @accent-color;
-    transition: color 0.5s ease-out, box-shadow 0.5s ease-out, background 0.5s ease-out;
 }
 
-#mpd.playing:hover, #mpd.paused:hover {
+#mpd.playing {
-    color: @accent-color;
+    color: @accent-alt;
-    animation: hover 0.2s 1;
 }
 
-/* Battery states */
+#mpd.stopped {
-#battery.charging, #battery.plugged {
+    border-color: transparent;
+    background: transparent;
+    color: transparent;
+}
+
+/* Hover Effects */
+#mpd.playing:hover,
+#mpd.paused:hover,
+#clock:hover,
+#battery:hover,
+#disk:hover,
+#temperature:hover,
+#backlight:hover,
+#network:hover,
+#pulseaudio:hover,
+#wireplumber:hover,
+#custom-media:hover,
+#mode:hover,
+#idle_inhibitor:hover,
+#scratchpad:hover,
+#power-profiles-daemon:hover {
+    color: @accent-color;
+    transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+/* Battery States */
+#battery.charging,
+#battery.plugged {
     color: @success-alt;
     box-shadow: inset 0 -3px @success-alt;
 }
@@ -251,19 +270,20 @@ window#waybar.chromium {
     border-bottom: 3px solid @danger;
 }
 
-/* Power profiles */
+/* Power Profiles */
 #power-profiles-daemon {
     color: @text-primary;
     font-size: 17px;
     padding: 0 7px 0 12px;
 }
 
-/* Temperature warning */
+/* Warning States */
-#temperature.critical {
+#temperature.critical,
+#idle_inhibitor.activated {
     animation: blink-warning 2s infinite;
 }
 
-/* Tray notifications */
+/* Tray */
 #tray > .needs-attention {
     -gtk-icon-effect: highlight;
     animation: blink-attention 2s infinite;
@@ -275,8 +295,9 @@ window#waybar.chromium {
     100% { color: @accent-color; }
 }
 
-/* Layout utilities */
+/* Layout Utilities */
-#window, #workspaces {
+#window,
+#workspaces {
     margin: 0 0px;
 }
 
@@ -288,21 +309,6 @@ window#waybar.chromium {
     margin-right: 0;
 }
 
-button {
-    box-shadow: inset 0 -3px transparent;
-    border: none;
-    border-radius: 0;
-}
-
-button:hover {
-    background: inherit;
-    box-shadow: inset 0 -3px @text-primary;
-}
-
 #mode {
     box-shadow: inset 0 -3px @text-primary;
 }
-
-#idle_inhibitor.activated {
-    animation: blink-warning 2s infinite;
-}