feat: colored cpu/mem stats and moved to right, added a new goal widget on the left

waybar/config.jsonc

@@ -9,14 +9,15 @@
     // Choose the order of the modules
     "modules-left": [
         "hyprland/workspaces",
-        "cpu",
-        "memory",
-        "memory#swap"
+        "custom/goal"
     ],
     "modules-center": [
         "mpd"
     ],
     "modules-right": [
+        "cpu",
+        "memory",
+        "memory#swap",
         "pulseaudio",
         "battery",
         "network",
@@ -107,7 +108,7 @@
         },
         "tooltip-format": "MPD (connected)",
         "tooltip-format-disconnected": "MPD (disconnected)",
-        "format-stopped": "",
+        "format-stopped": " Stopping player...",
         "on-click": "mpc toggle --password kapuchinamusica"
     },
     "idle_inhibitor": {
@@ -142,7 +143,7 @@
         }
     },
     "cpu": {
-        "format": "󰓅 {load:2.0f}%",
+        "format": "󰓅 {usage}%",
         "tooltip": false,
         "interval": 3,
         "format-icons": [
@@ -158,7 +159,7 @@
     },
     "memory#swap": {
         "format": "󰋊 {swapPercentage}%",
-        "interval": 3,
+        "interval": 10,
         "format-icons": [
           "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
         ]
@@ -182,13 +183,13 @@
             "warning": 30,
             "critical": 18
         },
-        "format": "{capacity}% {icon}",
-        "format-full": "{capacity}% {icon}",
-        "format-charging": "{capacity}% {icon}󱐋",
-        "format-plugged": "{capacity}% {icon}",
+        "format": "{icon} {capacity}%",
+        "format-full": "{icon} {capacity}%",
+        "format-charging": "{icon}󱐋 {capacity}%",
+        "format-plugged": "{icon} {capacity}%",
         "format-alt": "{time} {icon}",
         // "format-good": "", // An empty format will hide the module
-        "format-full": "󰋑",
+        "format-full": "󱈏",
         "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""],
         "tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}"
     },
@@ -243,6 +244,11 @@
         "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
         // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
     },
+    "custom/goal": {
+        "exec": "cat $HOME/.config/waybar/goal.txt",
+        "format": "󱓧 {}",
+        "interval": 60
+    },
     "custom/power": {
         "format" : "⏻ ",
 		"tooltip": false,

waybar/goal.txt

@@ -0,0 +1 @@
+Dopamine detox!!!

waybar/style.css

@@ -7,8 +7,10 @@
 @define-color accent-color #E96375;
 @define-color accent-alt #faa7b3;
 @define-color warning #FFAA00;
+@define-color warning-alt #FFDDAA;
 @define-color danger #FF0000;
 @define-color success #AAFFAA;
+@define-color success-alt #CCEEFF;
 
 * {
     font-family: "Iosevka Nerd Font";
@@ -36,10 +38,11 @@ window#waybar.chromium {
 }
 
 /* Common module styling */
-.modules-right, #mpd.playing, #mpd.paused {
+#mpd {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
     border: 3px solid @border-color;
     border-top: none;
+    padding: 0 10px;
 }
 
 .modules-left {
@@ -53,19 +56,21 @@ window#waybar.chromium {
 }
 
 /* MPD player states */
-#mpd.stopped {
-    border: none;
-    border-radius: 0 0 10px 10px;
-}
-
-#mpd.playing, #mpd.paused {
-    border-radius: 0 0 10px 10px;
+#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 */
 #workspaces {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
@@ -129,15 +134,42 @@ window#waybar.chromium {
   border-radius: 0 0 10px 0;
 }
 
+#custom-goal {
+    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+    border: 3px solid @border-color;
+    border-top: none;
+    border-radius: 0 0 10px 10px;
+    padding: 0 10px;
+    margin: 0 20px;
+    color: @warning-alt
+}
+
+#cpu, #memory, #disk {
+    padding: 0 10px;
+    color: @success-alt;
+    transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
+}
+
 /* Module base styling */
-#clock, #battery, #cpu, #memory, #disk, #temperature, #backlight,
+#clock, #battery, #temperature, #backlight,
 #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
-#idle_inhibitor, #scratchpad, #mpd {
+#idle_inhibitor, #scratchpad {
+    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+    border: 3px solid @border-color;
+    border-top: none;
+    border-left: none;
+    border-right: none;
     padding: 0 10px;
     color: @text-primary;
     transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
 }
 
+#pulseaudio {
+  border-left: 3px solid @border-color;
+  border-radius: 0 0 0 10px;
+  margin-left: 20px;
+}
+
 /* Hover effects */
 #clock:hover, #battery:hover, #disk:hover,
 #temperature:hover, #backlight:hover, #network:hover, #pulseaudio:hover,
@@ -148,7 +180,7 @@ window#waybar.chromium {
     transition: color 0.5s ease-out, border-bottom 0.5s ease-out, background 0.5s ease-out;
 }
 
-#mpd:hover {
+#mpd.playing:hover, #mpd.paused:hover {
     color: @accent-color;
     animation: hover 0.2s 1;
 }
@@ -195,7 +227,7 @@ window#waybar.chromium {
 
 /* Layout utilities */
 #window, #workspaces {
-    margin: 0 4px;
+    margin: 0 0px;
 }
 
 .modules-left > widget:first-child > #workspaces {