style: improve waybar styling - co-author: claude

Author: aster-void

.config/waybar/config.jsonc

@@ -140,19 +140,19 @@
   // },
   "cpu": {
     "format": "{usage: >3}%",
-    "on-click": "alacritty -e btop",
+    "on-click": "alacritty --option font.size=8 -e btop",
     "tooltip-format": "CPU Usage: {usage}%\\nLoad: {load}\\nClick to open btop"
   },
   "memory": {
     "format": "{: >3}%",
-    "on-click": "alacritty -e btop",
+    "on-click": "alacritty --option font.size=8 -e btop",
     "tooltip-format": "Memory Usage: {percentage}%\\nUsed: {used}GiB / {total}GiB\\nAvailable: {avail}GiB\\nClick to open btop"
   },
   "temperature": {
     // "thermal-zone": 2,
     "hwmon-path": "/sys/class/hwmon/hwmon1/temp1_input",
     "critical-threshold": 80,
-    "on-click": "alacritty -e btop",
+    "on-click": "alacritty --option font.size=8 -e btop",
     // "format-critical": "{temperatureC}°C ",
     "format": " {temperatureC}°C"
   },

.config/waybar/style.css

@@ -320,15 +320,8 @@ window#waybar {
  * Hover Effects - Organized by interaction type
  * -------------------------------------------------------------------------- */
 
-/* Passive information elements - subtle hover */
+/* Interactive information elements - subtle hover */
 .passive-hover:hover,
-#clock:hover,
-#clock.date:hover,
-#clock.clock:hover,
-#battery:hover,
-#cpu:hover,
-#memory:hover,
-#temperature:hover,
 #network:hover,
 #pulseaudio:hover,
 #backlight:hover,
@@ -341,14 +334,7 @@ window#waybar {
       alpha(@surface0, 0.92) 100%);
 }
 
-/* Clock specific hover - no margin change to prevent movement */
-#clock.date:hover {
-  margin: 6px 0px 6px 4px;
-}
-
-#clock.clock:hover {
-  margin: 6px 4px 6px 0px;
-}
+/* Clock specific hover - removed for static modules */
 
 /* Interactive elements - more pronounced hover */
 .interactive-hover:hover,
@@ -493,24 +479,44 @@ window#waybar {
   border-left: none;
 }
 
-/* Connectivity group: Network + Audio + Bluetooth (Clickable - bigger) */
-/* Common properties for connectivity group */
+/* Bluetooth - standalone module */
+#bluetooth {
+  background: linear-gradient(135deg,
+      alpha(@surface0, 0.85) 0%,
+      alpha(@surface1, 0.9) 100%);
+  border-radius: 6px;
+  margin: 6px 4px;
+  padding: 4px 8px;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
+  border: 1px solid alpha(@overlay0, 0.25);
+  color: @sapphire;
+  text-shadow: 0 0 10px alpha(@sapphire, 0.8);
+  transition: all 0.3s ease;
+}
+
+/* Connectivity & Control group: Network + Audio + Backlight (Clickable - bigger) */
+/* Common properties for connectivity & control group */
 #network,
 #pulseaudio,
-#bluetooth {
+#backlight {
   background: linear-gradient(135deg,
       alpha(@surface0, 0.85) 0%,
       alpha(@surface1, 0.9) 100%);
   padding: 4px 8px;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
 }
 
-/* Individual positioning and borders */
+/* Individual positioning and borders for connectivity-control group */
 #network {
   border-radius: 6px 0px 0px 6px;
   margin: 6px 0px 6px 4px;
   border: 1px solid alpha(@overlay0, 0.25);
   border-right: none;
+  color: @green;
+  background: linear-gradient(135deg, alpha(@green, 0.2), alpha(@teal, 0.2));
+  border: 1px solid alpha(@green, 0.3);
+  text-shadow: 0 0 10px alpha(@green, 0.8);
+  transition: all 0.3s ease;
 }
 
 #pulseaudio {
@@ -520,29 +526,22 @@ window#waybar {
   border-bottom: 1px solid alpha(@overlay0, 0.25);
   border-left: none;
   border-right: none;
+  color: @flamingo;
+  background: linear-gradient(135deg, alpha(@flamingo, 0.2), alpha(@pink, 0.2));
+  border-top: 1px solid alpha(@flamingo, 0.3);
+  border-bottom: 1px solid alpha(@flamingo, 0.3);
+  text-shadow: 0 0 10px alpha(@flamingo, 0.8);
+  transition: all 0.3s ease;
 }
 
-#bluetooth {
+#backlight {
   border-radius: 0 6px 6px 0;
   margin: 6px 4px 6px 0px;
   border: 1px solid alpha(@overlay0, 0.25);
   border-left: none;
-  color: @sapphire;
-  text-shadow: 0 0 10px alpha(@sapphire, 0.8);
-  transition: all 0.3s ease;
-}
-
-/* Backlight - standalone module */
-#backlight {
-  background: linear-gradient(135deg,
-      alpha(@surface0, 0.85) 0%,
-      alpha(@surface1, 0.9) 100%);
-  border-radius: 6px;
-  margin: 6px 4px;
-  padding: 4px 8px;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
-  border: 1px solid alpha(@overlay0, 0.25);
   color: @yellow;
+  background: linear-gradient(135deg, alpha(@yellow, 0.2), alpha(@peach, 0.2));
+  border: 1px solid alpha(@yellow, 0.3);
   text-shadow: 0 0 10px alpha(@yellow, 0.8);
   transition: all 0.3s ease;
 }
@@ -760,13 +759,6 @@ window#waybar {
 }
 
 /* Network & Audio */
-#network {
-  color: @green;
-  background: linear-gradient(135deg, alpha(@green, 0.2), alpha(@teal, 0.2));
-  border: 1px solid alpha(@green, 0.3);
-  text-shadow: 0 0 10px alpha(@green, 0.8);
-  transition: all 0.3s ease;
-}
 
 #network.disabled,
 #network.disconnected {
@@ -776,13 +768,6 @@ window#waybar {
   animation: blink 1s ease-in-out infinite;
 }
 
-#pulseaudio {
-  color: @flamingo;
-  background: linear-gradient(135deg, alpha(@flamingo, 0.2), alpha(@pink, 0.2));
-  border: 1px solid alpha(@flamingo, 0.3);
-  text-shadow: 0 0 10px alpha(@flamingo, 0.8);
-  transition: all 0.3s ease;
-}
 
 #pulseaudio.muted {
   color: @overlay0;