Change Waybar css

Author: c4software

archlinux/install/hyprland/config/waybar/style.css

@@ -1,40 +1,33 @@
+@define-color base-bg @background;
+@define-color accent @foreground;
 @import "../theme/waybar.css";
 
+@define-color hover-bg alpha(@background, 0.7);
+@define-color warning #e5c07b;
+@define-color critical #e06c75;
+@define-color inactive #6a7a71;
+
 * {
-  /* background-color: @background; */
   color: @foreground;
-
   border: none;
   border-radius: 0;
-  min-height: 0;
   font-family: 'CaskaydiaMono Nerd Font';
-  font-weight: bold;
   font-size: 12px;
+  font-weight: bold;
+  min-height: 0;
 }
 
 window#waybar {
   background: transparent;
   margin-top: 10px;
 }
 
-window#waybar.empty #window {
-  background: transparent;
-  padding: 0;
-  margin-left: 0;
-}
-
-mpris#waybar.empty #mpris {
-  background: transparent;
-  padding: 0;
-  margin-right: 0;
-}
-
-.modules-left {
-  margin-left: 8px;
-}
-
+.modules-left,
 .modules-right {
+  margin-left: 8px;
+  /* Original margin + 2px */
   margin-right: 8px;
+  /* Original margin + 2px */
 }
 
 #workspaces button {
@@ -48,55 +41,162 @@ mpris#waybar.empty #mpris {
   opacity: 0.5;
 }
 
-#custom-weather,
-#memory,
-#custom-update,
+/* --- General Module Styles --- */
 #backlight,
 #window,
 #mpris,
-#tray,
 #cpu,
-#battery,
-#network,
+#memory,
+#temperature,
+#custom-update,
+#tray,
 #bluetooth,
+#network,
 #pulseaudio,
-#clock,
+#battery,
 #custom-omarchy,
-#workspaces,
-#tray-expander {
+#clock {
   background-color: @background;
   color: @foreground;
-  border-radius: 10px;
   padding: 0 10px;
-  margin: 5px 2;
+  margin: 5px 0;
+  transition: background-color 0.3s ease;
 }
 
-#network.icon {
-  padding-right: 14px;
+#cpu:hover,
+#memory:hover,
+#temperature:hover,
+#custom-update:hover,
+#bluetooth:hover,
+#network:hover,
+#pulseaudio:hover,
+#battery:hover,
+#custom-omarchy:hover {
+  background-color: @hover-bg;
 }
 
-#memory,
-#custom-weather {
-  margin-right: -10px;
+/* --- Specific Module Styles & Overrides --- */
+#window {
+  margin: 5px 0;
+  padding: 0 10px;
+  border-radius: 16px;
+  margin-left: 5px;
 }
 
-#pulseaudio {
-  padding-right: 15px;
+#mpris {
+  margin: 5px 0;
+  padding: 0 10px;
+  border-radius: 16px;
+  margin-right: 5px;
 }
 
-#custom-omarchy {
-  padding-left: 10px;
+window#waybar.empty #window {
+  background: transparent;
+  padding: 0;
+  margin-left: 0;
+}
+
+mpris#waybar.empty #mpris {
+  background: transparent;
+  padding: 0;
+  margin-right: 0;
 }
 
 #custom-update {
-  padding-left: 7px;
+  border-radius: 16px;
+  margin-left: 10px;
+  padding-right: 12px;
 }
 
-#custom-expand-icon {
-  margin-right: -4px;
+#tray-expander {
+  background: @background;
+  margin: 5px 0;
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+  padding-left: 10px;
 }
 
-tooltip {
+#battery {
+  margin: 5px 0;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  padding-left: 10px;
+}
+
+#tray {
+  padding-left: 10px;
+}
+
+#custom-omarchy {
+  border-radius: 16px;
+  margin-right: 5px;
+}
+
+#clock {
+  border-radius: 16px;
+  padding-right: 10px;
+}
+
+#workspaces {
+  background-color: @background;
+  color: @foreground;
+  margin: 5px 0;
+  transition: background-color 0.3s ease;
+  border-radius: 16px;
+  padding: 0 3px;
+}
+
+#workspaces button {
+  background: transparent;
+  padding: 0 6px;
   border-radius: 10px;
-  padding: 2px;
+}
+
+#workspaces button:hover {
+  background-color: alpha(#B9F6CA, 0.1);
+}
+
+/* --- Module States --- */
+#network.disconnected,
+#bluetooth.disabled,
+#pulseaudio.muted {
+  color: @critical;
+}
+
+#battery.warning:not(.charging) {
+  color: @warning;
+}
+
+#battery.charging,
+#battery.plugged {
+  color: @accent;
+}
+
+@keyframes blink {
+  to {
+    background-color: @critical;
+    color: @base-bg;
+  }
+}
+
+#battery.critical:not(.charging) {
+  background-color: @critical;
+  color: @base-bg;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+/* --- Tooltip --- */
+tooltip {
+  background-color: @background;
+  border-radius: 16px;
+  padding: 8px 12px;
+  opacity: 0.9;
+}
+
+tooltip label {
+  color: @foreground;
 }