Change Waybar css

Author: c4software

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

@@ -1,33 +1,24 @@
-@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;
-  font-family: 'CaskaydiaMono Nerd Font';
-  font-size: 12px;
-  font-weight: bold;
+  border-radius: 10px;
+  padding: 2px 2px;
   min-height: 0;
+  font-family: CaskaydiaMono Nerd Font;
+  font-weight: bold;
+  font-size: 14px;
 }
 
-window#waybar {
-  background: transparent;
-  margin-top: 10px;
+.modules-left {
+  margin-left: 8px;
 }
 
-.modules-left,
 .modules-right {
-  margin-left: 8px;
-  /* Original margin + 2px */
   margin-right: 8px;
-  /* Original margin + 2px */
 }
 
 #workspaces button {
@@ -41,162 +32,39 @@ window#waybar {
   opacity: 0.5;
 }
 
-/* --- General Module Styles --- */
+#custom-weather,
+#memory,
+#custom-update,
 #backlight,
 #window,
 #mpris,
-#cpu,
-#memory,
-#temperature,
-#custom-update,
 #tray,
-#bluetooth,
+#cpu,
+#battery,
 #network,
+#bluetooth,
 #pulseaudio,
-#battery,
+#clock,
 #custom-omarchy,
-#clock {
-  background-color: @background;
-  color: @foreground;
-  padding: 0 10px;
-  margin: 5px 0;
-  transition: background-color 0.3s ease;
-}
-
-#cpu:hover,
-#memory:hover,
-#temperature:hover,
-#custom-update:hover,
-#bluetooth:hover,
-#network:hover,
-#pulseaudio:hover,
-#battery:hover,
-#custom-omarchy:hover {
-  background-color: @hover-bg;
-}
-
-/* --- Specific Module Styles & Overrides --- */
-#window {
-  margin: 5px 0;
-  padding: 0 10px;
-  border-radius: 16px;
-  margin-left: 5px;
-}
-
-#mpris {
-  margin: 5px 0;
-  padding: 0 10px;
-  border-radius: 16px;
-  margin-right: 5px;
-}
-
-window#waybar.empty #window {
-  background: transparent;
-  padding: 0;
-  margin-left: 0;
-}
-
-mpris#waybar.empty #mpris {
-  background: transparent;
-  padding: 0;
-  margin-right: 0;
-}
-
-#custom-update {
-  border-radius: 16px;
-  margin-left: 10px;
-  padding-right: 12px;
-}
-
+#workspaces,
 #tray-expander {
-  background: @background;
-  margin: 5px 0;
-  border-top-left-radius: 16px;
-  border-bottom-left-radius: 16px;
-  padding-left: 10px;
+  min-width: 12px;
+  margin: 0 7.5px;
 }
 
-#battery {
-  margin: 5px 0;
-  border-top-right-radius: 16px;
-  border-bottom-right-radius: 16px;
-  padding-left: 10px;
+#custom-expand-icon {
+  margin-right: -4px;
+  padding: 1px;
 }
 
-#tray {
-  padding-left: 10px;
+tooltip {
+  padding: 2px;
 }
 
-#custom-omarchy {
-  border-radius: 16px;
-  margin-right: 5px;
+#custom-update {
+  font-size: 10px;
 }
 
 #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;
-}
-
-#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;
+  margin-left: 8.75px;
 }