chore: cleaned up and organized waybar css

waybar/style.css

@@ -1,27 +1,44 @@
+/* GTK Color Definitions */
+@define-color bg-primary rgba(23, 28, 39, 0.8);
+@define-color bg-secondary rgba(23, 28, 39, 0.7);
+@define-color border-color rgba(90, 104, 115, 0.8);
+@define-color text-primary #ffffff;
+@define-color text-secondary #888888;
+@define-color accent-color #E96375;
+@define-color accent-alt #f97385;
+@define-color warning #FFAA00;
+@define-color danger #FF0000;
+@define-color success #AAFFAA;
+
 * {
-    /* `otf-font-awesome` is required to be installed for icons */
     font-family: "Iosevka Nerd Font";
     font-size: 15px;
 }
 
 window#waybar {
-    /*
-    background-color: rgba(23, 28, 39, 0.8);
-    border-bottom: 3px solid rgba(90, 104, 115, 0.5);
-    */
     background-color: transparent;
-    color: #ffffff;
+    color: @text-primary;
     transition-property: background-color;
-    transition-duration: .5s;
+    transition-duration: 0.5s;
 }
 
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+window#waybar.termite {
+    background-color: #3F3F3F;
+}
+
+window#waybar.chromium {
+    background-color: #000000;
+    border: none;
+}
+
+/* Common module styling */
 .modules-left, .modules-right, #mpd.playing, #mpd.paused {
-    background: linear-gradient(
+    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
-        to bottom, 
+    border: 3px solid @border-color;
-        rgba(23, 28, 39, 0.8),
-        rgba(23, 28, 39, 0.7)
-);
-    border: 3px solid rgba(90, 104, 115, 0.8);
     border-top: none;
 }
 
@@ -35,6 +52,7 @@ window#waybar {
     border-radius: 0 0 0 10px;
 }
 
+/* MPD player states */
 #mpd.stopped {
     border: none;
     border-radius: 0 0 10px 10px;
@@ -45,53 +63,18 @@ window#waybar {
 }
 
 #mpd.playing {
-  color: #f97385;
+    color: @accent-alt;
-}
-
-window#waybar.hidden {
-    opacity: 0.2;
-}
-
-/*
-window#waybar.empty {
-    background-color: transparent;
-}
-window#waybar.solo {
-    background-color: #FFFFFF;
-}
-*/
-
-window#waybar.termite {
-    background-color: #3F3F3F;
-}
-
-window#waybar.chromium {
-    background-color: #000000;
-    border: none;
-}
-
-button {
-    /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
-    /* Avoid rounded borders under each button name */
-    border: none;
-    border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-    background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
 }
 
+/* Workspaces */
 #workspaces button {
     padding: 0 5px;
     background-color: transparent;
-    color: #ffffff;
+    color: @text-primary;
 }
 
 #workspaces button.empty {
-    color: #888888;
+    color: @text-secondary;
 }
 
 #workspaces button:hover {
@@ -100,382 +83,107 @@ 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 @accent-color;
-    color: #E96375;
+    color: @accent-color;
-
-    color: #E96375;
-    background: rgba(0, 0, 0, 0.2);
     animation: hover 0.8s 1;
-
-    
 }
 
 #workspaces button.urgent {
     animation: blink-attention 2s infinite;
-    
-    animation-name: blink-attention;
-    animation-duration: 1s;
-    animation-timing-function: steps(64);
-    animation-iteration-count: infinite;
-    animation-direction: alternate; ;
 }
 
-#mode {
+/* Module base styling */
-    box-shadow: inset 0 -3px #ffffff;
+#clock, #battery, #cpu, #memory, #disk, #temperature, #backlight,
-}
+#network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
-
+#idle_inhibitor, #scratchpad, #mpd {
-#idle_inhibitor.activated {
-    /*background-color: #ecf0f1;
-    color: #2d3436;*/
-    background-color: transparent;
-    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; 
-}
-
-#clock,
-#battery,
-#cpu,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#wireplumber,
-#custom-media,
-#tray,
-#mode,
-#idle_inhibitor,
-#scratchpad,
-#mpd {
     padding: 0 10px;
-    color: #ffffff;
+    color: @text-primary;
     transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
 }
 
-@keyframes hover {
+/* Hover effects */
-    0% {
+#clock:hover, #battery:hover, #cpu:hover, #memory:hover, #disk:hover,
-        color: #ffffff;
+#temperature:hover, #backlight:hover, #network:hover, #pulseaudio:hover,
-    }
+#wireplumber:hover, #custom-media:hover, #mode:hover, #idle_inhibitor:hover,
-    100% {
+#scratchpad:hover, #power-profiles-daemon:hover {
-        color: #E96375;
+    color: @accent-color;
-    }
-}
-
-
-#clock:hover,
-#battery:hover,
-#cpu:hover,
-#memory:hover,
-#disk:hover,
-#temperature:hover,
-#backlight:hover,
-#network:hover,
-#pulseaudio:hover,
-#wireplumber:hover,
-#custom-media:hover,
-#mode:hover,
-#idle_inhibitor:hover,
-#scratchpad:hover,
-#power-profiles-daemon:hover 
-{
-    color: #E96375;
     background: rgba(0, 0, 0, 0.2);
     animation: hover 0.2s 1;
 }
 
-#mpd:hover
+#mpd:hover {
-{
+    color: @accent-color;
-    color: #E96375;
     animation: hover 0.2s 1;
 }
 
-#window,
+/* Battery states */
-#workspaces {
+#battery.charging, #battery.plugged {
+    color: @success;
+    border-bottom: 3px solid @success;
+}
+
+#battery.warning:not(.charging) {
+    color: @warning;
+    border-bottom: 3px solid @warning;
+}
+
+#battery.critical:not(.charging) {
+    color: @danger;
+    border-bottom: 3px solid @danger;
+}
+
+/* Power profiles */
+#power-profiles-daemon {
+    color: @text-primary;
+    font-size: 17px;
+    padding: 0 7px 0 12px;
+}
+
+/* Temperature warning */
+#temperature.critical {
+    animation: blink-warning 2s infinite;
+}
+
+/* Tray notifications */
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    animation: blink-attention 2s infinite;
+}
+
+/* Animations */
+@keyframes hover {
+    0% { color: @text-primary; }
+    100% { color: @accent-color; }
+}
+
+/* Layout utilities */
+#window, #workspaces {
     margin: 0 4px;
 }
 
-/* If workspaces is the leftmost module, omit left margin */
 .modules-left > widget:first-child > #workspaces {
     margin-left: 0;
 }
 
-/* If workspaces is the rightmost module, omit right margin */
 .modules-right > widget:last-child > #workspaces {
     margin-right: 0;
 }
 
-#clock {
+button {
+    box-shadow: inset 0 -3px transparent;
+    border: none;
+    border-radius: 0;
 }
 
-#battery {
+button:hover {
-    color: #000000;
+    background: inherit;
+    box-shadow: inset 0 -3px @text-primary;
 }
 
-#battery.charging, #battery.plugged {
+#mode {
-    color: #AAFFAA;
+    box-shadow: inset 0 -3px @text-primary;
-    border-bottom: 3 solid #AAFFAA;
 }
 
-/* Using steps() instead of linear as a timing function to limit cpu usage */
+#idle_inhibitor.activated {
-#battery.warning:not(.charging) {
-    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) {
-    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) { 
-    background-color: transparent;
-    /*
-*   animation: blink-aight 1s infinite;
-    
-    animation-name: blink-aight;
-    animation-duration: 35s;
-    animation-timing-function: steps(128);
-    animation-iteration-count: infinite;
-    animation-direction: alternate; 
-    */
-}
-
-#power-profiles-daemon {
-    color: #ffffff;
-    font-size: 17px;
-    padding-right: 12px;
-    padding-left: 7px;
-    margin-left: 0;
-    margin-right: 0;
-}
-
-#power-profiles-daemon.performance {
-}
-
-#power-profiles-daemon.balanced {
-}
-
-#power-profiles-daemon.power-saver {
-}
-
-label:focus {
-    background-color: #000000;
-}
-
-#cpu {
-    color: #000000;
-}
-
-#memory {
-}
-
-#disk {
-}
-
-#backlight {
-}
-
-#network {
-}
-
-#network.disconnected {
-}
-
-#pulseaudio {
-    color: #000000;
-}
-
-#pulseaudio.muted {
-}
-
-#wireplumber {
-    color: #000000;
-}
-
-#wireplumber.muted {
-}
-
-#custom-media {
-    min-width: 100px;
-}
-
-#custom-media.custom-spotify {
-}
-
-#custom-media.custom-vlc {
-}
-
-#temperature.critical {
     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; 
 }
-
-#tray > .passive {
-    -gtk-icon-effect: dim;
-}
-
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
-    animation: blink-attention 2s infinite;
-    
-    animation-name: blink;
-    animation-duration: 5.0s;
-    animation-timing-function: steps(64);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;  
-}
-
-@keyframes blink-attention {
-    50% {
-        background-color: #FFFF00;
-        color: #2d3436; 
-    }
-    100% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-}
-
-@keyframes blink-warning {
-    0% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-    90% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-    95% {
-        background-color: #FFAA00;
-        color: #2d3436; 
-    }
-    100% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-}
-
-@keyframes blink-danger {
-    50% {
-        background-color: #FF0000;
-        color: #2d3436; 
-    }
-    100% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-}
-
-@keyframes blink-aight {
-    0% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-    95% {
-        background-color: transparent;
-        color: #ffffff;
-    }
-    100% {
-        background-color: #00FF66;
-        color: #2d3436; 
-    }
-}
-
-#mpd.disconnected {
-}
-
-#mpd.stopped {
-}
-
-#mpd.p000000{
-}
-
-#keyboard-state {
-    color: #000000;
-    padding: 0 0px;
-    margin: 0 5px;
-    min-width: 16px;
-}
-
-#language {
-    color: #ffffff;
-    padding: 0 5px;
-    min-width: 16px;
-}
-
-#keyboard-state > label {
-    padding: 0 5px;
-}
-
-#keyboard-state > label.locked {
-}
-
-#scratchpad {
-}
-
-#scratchpad.empty {
-}
-
-#privacy {
-    padding:0000}
-
-#privacy-item {
-    padding: 0 5px;
-    color: white;
-}
-
-#privacy-item.screenshare {
-}
-
-#privacy-item.audio-in {
-}
-
-#privacy-item.audio-out {
-}
-
-#clock,
-#battery,
-#cpu,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#wireplumber,
-#custom-media,
-#mode,
-#idle_inhibitor,
-#scratchpad
-{
-    padding: 0 10px;
-    background-color: transparent;
-    color: #ffffff;
-}
-