refactor: removed waybar animations and replaced them with transitions, text color and underline to reduce cpu usage and annoyance

waybar/config.jsonc

@@ -16,6 +16,7 @@
     "modules-right": [
         "pulseaudio",
         "network",
+        "cpu",
         "memory",
         "battery",
         "tray",
@@ -59,7 +60,7 @@
             "7": "七",
             "8": "八",
             "9": "九",
-            "10": "零",
+            "10": "ロ",
             "11": "一",
             "12": "十",
             "default": "",
@@ -140,12 +141,12 @@
         }
     },
     "cpu": {
-        "format": "{usage}% ",
+        "format": "{usage} 󰒔",
         "tooltip": false,
         "interval": 3
     },
     "memory": {
-        "format": "{}% 󱤓",
+        "format": "{} 󰐤",
         "interval": 3
     },
     "temperature": {
@@ -158,7 +159,7 @@
     },
     "backlight": {
         // "device": "acpi_video1",
-        "format": "{percent}% {icon}",
+        "format": "{percent} {icon}",
         "format-icons": ["", "", "", "", "", "", "", "", ""]
     },
     "battery": {
@@ -167,14 +168,14 @@
             "warning": 30,
             "critical": 18
         },
-        "format": "{capacity}% {icon}",
+        "format": "{capacity} {icon}",
-        "format-full": "{capacity}% {icon}",
+        "format-full": "{capacity} {icon}",
-        "format-charging": "{capacity}% ",
+        "format-charging": "{capacity} ",
-        "format-plugged": "{capacity}% ",
+        "format-plugged": "{capacity} ",
         "format-alt": "{time} {icon}",
         // "format-good": "", // An empty format will hide the module
-        // "format-full": "",
+        "format-full": "",
-        "format-icons": ["", "", "", "", ""]
+        "format-icons": ["", "", "", "", ""]
     },
     "battery#bat2": {
         "bat": "BAT2"
@@ -192,18 +193,18 @@
     },
     "network": {
         // "interface": "wlp2*", // (Optional) To force the use of this interface
-        "format-wifi": "{signalStrength}% ",
+        "format-wifi": "{signalStrength} 直",
         "format-ethernet": "{ipaddr}/{cidr} ",
         "tooltip-format": "{essid} {ifname} via {gwaddr} ",
         "format-linked": "{ifname} (No IP) ",
-        "format-disconnected": "Disconnected ⚠",
+        "format-disconnected": "睊",
         "on-click": "hyprctl dispatch exec, [float; move center] kitty -e nmtui"
     },
     "pulseaudio": {
         // "scroll-step": 1, // %, can be a float
-        "format": "{format_source} {volume}% {icon}",
+        "format": "{format_source}{volume} {icon}",
-        "format-bluetooth": "{format_source} {volume}% {icon}",
+        "format-bluetooth": "{format_source}{volume} 󰂰",
-        "format-bluetooth-muted": "{format_source}  {icon}",
+        "format-bluetooth-muted": "{format_source} 󰂲",
         "format-muted": "{format_source} 󰖁",
         "format-source": "",
         "format-source-muted": "   ",

waybar/style.css

@@ -38,16 +38,15 @@ window#waybar {
 #mpd.stopped {
   border: none;
   border-radius: 0 0 10px 10px;
-  transition-property: background-color;
-  transition-duration: 2s;
 }
 
 #mpd.playing, #mpd.paused {
   border-radius: 0 0 10px 10px;
-  transition-property: background-color;
-  transition-duration: 2s;
 }
 
+#mpd.playing {
+  color: #f97385;
+}
 
 window#waybar.hidden {
     opacity: 0.2;
@@ -101,7 +100,7 @@ button:hover {
 
 #workspaces button.active.hosting-monitor {
     background-color: rgba(0,0,0,0.32);
-    box-shadow: inset 0 -3px #E96375;
+    box-shadow: inset 0 -3px #e96375;
     color: #E96375;
 
     color: #E96375;
@@ -156,6 +155,7 @@ button:hover {
 #mpd {
     padding: 0 10px;
     color: #ffffff;
+    transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
 }
 
 @keyframes hover {
@@ -218,29 +218,34 @@ button:hover {
 }
 
 #battery.charging, #battery.plugged {
-    color: #ffffff;
+    color: #AAFFAA;
+    border-bottom: 3 solid #AAFFAA;
 }
 
 /* Using steps() instead of linear as a timing function to limit cpu usage */
 #battery.warning:not(.charging) {
-  animation: blink-warning 2s infinite;
+    color: #FFAA00;
-  
+    border-bottom: 3 solid #FFAA00;
-  animation-name: blink-warning;
+    /* animation: blink-warning 2s infinite; */
-  animation-duration: 5.0s;
+    /*                                       */
-  animation-timing-function: steps(128);
+    /* animation-name: blink-warning;        */
-  animation-iteration-count: infinite;
+    /* animation-duration: 5.0s;             */
-  animation-direction: alternate; 
+    /* animation-timing-function: steps(128);*/
+    /* animation-iteration-count: infinite;  */
+    /* animation-direction: alternate;       */
 }
 
 #battery.critical:not(.charging) {
-    background-color: transparent;
+    color: #FF0000;
-    animation: blink-danger 1s infinite;
+    border-bottom: 3 solid #FF0000;
-    
+    /*background-color: transparent;*/
-    animation-name: blink-danger;
+    /*animation: blink-danger 1s infinite;*/
-    animation-duration: 0.5s;
+    /**/
-    animation-timing-function: steps(64);
+    /*animation-name: blink-danger;*/
-    animation-iteration-count: infinite;
+    /*animation-duration: 0.5s;*/
-    animation-direction: alternate; 
+    /*animation-timing-function: steps(64);*/
+    /*animation-iteration-count: infinite;*/
+    /*animation-direction: alternate; */
 }
 
 #battery.plugged:not(.charging) {