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

This commit is contained in:
2025-09-28 00:29:08 +03:00
parent e2428035ca
commit 35010095bf
2 changed files with 43 additions and 37 deletions

View File

@@ -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;
animation-name: blink-warning;
animation-duration: 5.0s;
animation-timing-function: steps(128);
animation-iteration-count: infinite;
animation-direction: alternate;
color: #FFAA00;
border-bottom: 3 solid #FFAA00;
/* animation: blink-warning 2s infinite; */
/* */
/* animation-name: blink-warning; */
/* animation-duration: 5.0s; */
/* animation-timing-function: steps(128);*/
/* animation-iteration-count: infinite; */
/* animation-direction: alternate; */
}
#battery.critical:not(.charging) {
background-color: transparent;
animation: blink-danger 1s infinite;
animation-name: blink-danger;
animation-duration: 0.5s;
animation-timing-function: steps(64);
animation-iteration-count: infinite;
animation-direction: alternate;
color: #FF0000;
border-bottom: 3 solid #FF0000;
/*background-color: transparent;*/
/*animation: blink-danger 1s infinite;*/
/**/
/*animation-name: blink-danger;*/
/*animation-duration: 0.5s;*/
/*animation-timing-function: steps(64);*/
/*animation-iteration-count: infinite;*/
/*animation-direction: alternate; */
}
#battery.plugged:not(.charging) {