fix waybar-wallust colors not applying

battery not charging waybar animation changes to reduce cpu usage as per wiki

config/hypr/scripts/Refresh.sh

@@ -27,7 +27,7 @@ ags -q
 
 sleep 1
 #Restart waybar
-waybar &
+waybar && killall -SIGUSR2 waybar # added since wallust sometimes not applying
 
 # relaunch swaync
 sleep 0.5
@@ -43,4 +43,5 @@ if file_exists "${UserScripts}/RainbowBorders.sh"; then
 fi
 
 
+
 exit 0

config/waybar/style/[Black & White] Monochrome.css

@@ -183,8 +183,8 @@ tooltip label{
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Catppuccin] Frappe.css

@@ -157,11 +157,11 @@ window#waybar.empty #window {
 #battery.critical:not(.charging) {
   	background-color: @red;
   	color: @theme_text_color;
-  	animation-name: blink;
-  	animation-duration: 0.5s;
-  	animation-timing-function: linear;
-  	animation-iteration-count: infinite;
-  	animation-direction: alternate;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
   	box-shadow: inset 0 -3px transparent;
 }
 

config/waybar/style/[Catppuccin] Latte.css

@@ -157,11 +157,11 @@ window#waybar.empty #window {
 #battery.critical:not(.charging) {
   	background-color: @red;
   	color: @theme_text_color;
-  	animation-name: blink;
-  	animation-duration: 0.5s;
-  	animation-timing-function: linear;
-  	animation-iteration-count: infinite;
-  	animation-direction: alternate;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
   	box-shadow: inset 0 -3px transparent;
 }
 

config/waybar/style/[Catppuccin] Mocha.css

@@ -176,11 +176,11 @@ window#waybar.empty #window {
 #battery.critical:not(.charging) {
   background-color: @red;
   color: @theme_text_color;
-  animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
   box-shadow: inset 0 -3px transparent;
 }
 

config/waybar/style/[Colored] Chroma Glow.css

@@ -182,12 +182,12 @@ tooltip label{
 }
 
 #battery.critical:not(.charging) {
-    color: #f53c3c;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+	color: #f53c3c;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 label:focus {

config/waybar/style/[Colored] Translucent.css

@@ -192,11 +192,11 @@ tooltip {
 
 #battery.critical:not(.charging) {
     color: @critical;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 label:focus {

config/waybar/style/[Colorful] Aurora Blossom.css

@@ -175,8 +175,8 @@ tooltip label{
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Colorful] Aurora.css

@@ -182,8 +182,8 @@ tooltip label{
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Colorful] Oglo Chicklets.css

@@ -181,6 +181,11 @@ button.active {
     background-color: #ee606a;
     color: #2d353b;
     border-bottom: 8px solid #ca4853;
+    animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 label:focus {

config/waybar/style/[Colorful] Rainbow Spectrum.css

@@ -154,8 +154,8 @@ tooltip label{
 	background-color: #f38ba8;
 	color: #f38ba8;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Dark] Golden Noir.css

@@ -183,12 +183,12 @@ tooltip {
 }
 
 #battery.critical:not(.charging) {
-    color: #f53c3c;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+	color: #f53c3c;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 #pulseaudio-slider slider {

config/waybar/style/[Dark] Half-Moon.css

@@ -287,8 +287,8 @@ color: #F3F4F5;
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Dark] Latte-Wallust combined.css

@@ -222,15 +222,6 @@ tooltip {
     transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
 }
 
-#battery.critical:not(.charging) {
-    color: #f53c3c;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
 #pulseaudio-slider slider {
     min-width: 0px;
     min-height: 0px;
@@ -302,14 +293,17 @@ tooltip {
 #temperature.critical {
     background-color: @red;
 }
+
 #battery.critical:not(.charging) {
-    color: #f53c3c;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}#pulseaudio-slider slider {
+	color: #f53c3c;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+}
+
+#pulseaudio-slider slider {
 	min-width: 0px;
 	min-height: 0px;
 	opacity: 0;

config/waybar/style/[Dark] Purpl.css

@@ -198,8 +198,8 @@ tooltip {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Dark] Wallust Obsidian Edge.css

@@ -188,12 +188,12 @@ tooltip label {
 }
 
 #battery.critical:not(.charging) {
-    color: #f53c3c;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+	color: #f53c3c;
+	animation-name: blink;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 #pulseaudio-slider slider {
 	min-width: 0px;

config/waybar/style/[Extra] Crimson.css

@@ -180,8 +180,8 @@ tooltip {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Extra] EverForest.css

@@ -177,8 +177,8 @@ window#waybar.empty #window {
   background-color: @red;
   color: @fg;
   animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
+  animation-duration: 3.0s;
+  animation-timing-function: steps(12);
   animation-iteration-count: infinite;
   animation-direction: alternate;
 }

config/waybar/style/[Extra] Mauve.css

@@ -197,8 +197,8 @@ tooltip {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Extra] Rose Pine.css

@@ -177,6 +177,23 @@ tooltip {
 	color: #39FF14;
 }
 
+@keyframes blink {
+  to {
+    color: @main-bg;
+  }
+}
+
+#battery.critical:not(.charging) {
+  background-color: red;
+  color: white;
+  animation-name: blink;
+  animation-duration: 3.0s;
+  animation-timing-function: steps(12);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  box-shadow: inset 0 -3px transparent;
+}
+
 #backlight {
 	padding-right: 2px;
 }

config/waybar/style/[Extra] Simple Pink.css

@@ -207,8 +207,8 @@ tooltip {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Light] Monochrome Contrast.css

@@ -187,8 +187,8 @@ tooltip label{
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Light] Obsidian Glow.css

@@ -173,8 +173,8 @@ tooltip label {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }

config/waybar/style/[Rainbow] RGB Bordered.css

@@ -173,8 +173,8 @@ window#waybar.empty #window {
   background-color: @red;
   color: @theme_text_color;
   animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
+  animation-duration: 3.0s;
+  animation-timing-function: steps(12);
   animation-iteration-count: infinite;
   animation-direction: alternate;
   box-shadow: inset 0 -3px transparent;

config/waybar/style/[Retro] Simple Style.css

@@ -109,6 +109,23 @@ window#waybar {
   border-bottom: 3px solid yellow;
 }
 
+@keyframes blink {
+  to {
+    color: @background;
+  }
+}
+
+#battery.critical:not(.charging) {
+  background-color: @red;
+  color: white;
+  animation-name: blink;
+  animation-duration: 3.0s;
+  animation-timing-function: steps(12);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  box-shadow: inset 0 -3px transparent;
+}
+
 /*-----Indicators----*/
 #custom-hypridle.notactive,
 #idle_inhibitor.activated {

config/waybar/style/[Transparent] Crystal Clear.css

@@ -157,8 +157,8 @@ window#waybar.empty #window {
 #battery.critical:not(.charging) {
 	color: #f53c3c;
 	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
+	animation-duration: 3.0s;
+	animation-timing-function: steps(12);
 	animation-iteration-count: infinite;
 	animation-direction: alternate;
 }