nixos-configuration/homeConfigurations/muede/waybar.css

/* #region stylix overrides*/
.modules-left #workspaces button,
.modules-left #workspaces button.focused,
.modules-left #workspaces button.active,
.modules-center #workspaces button,
.modules-center #workspaces button.focused,
.modules-center #workspaces button.active,
.modules-right #workspaces button,
.modules-right #workspaces button.focused,
.modules-right #workspaces button.active {
  border-bottom: unset;
}
/* #endregion */

* {
  font-family: monospace;
  font-size: 13px;
}

window#waybar {
  transition-property: background-color;
  transition-duration: 0.5s;
  /* Gradient border spanning the entire waybar window */
  border-bottom: 3px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(135deg, @base00, @base01),
    linear-gradient(135deg, @base0C, @base09);
}

/* Common pill styling for all widgets */
#clock,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#mode,
#scratchpad,
#mpd,
#custom-weather,
#battery,
#power-profiles-daemon,
#idle_inhibitor,
#custom-swaync,
#bluetooth,
#mpris,
#upower,
#workspaces,
#window,
#tray,
#custom-wlogout,
#privacy-item {
  margin: 0px 4px 6px;
  padding: 0px 8px;
  background: linear-gradient(135deg, @base02, @base01);
  border-radius: 15px;
  border: 2px solid;
  transition: all 0.3s ease;
}

/* special treatment for weird sized widgets */
#custom-wlogout,
#power-profiles-daemon,
#idle_inhibitor {
  padding: 0px 10px 0px 8px;
}

#workspaces {
    padding-left: 0;
    padding-right: 0;
}

/* Individual widget colors */
#workspaces,
#window,
#tray {
  border-color: @base0D;
}

#workspaces button {
  padding: 0 6px;
  background-color: transparent;
  color: @base05;
  border-radius: 15px;
  border: none;
  transition: all 0.3s ease;
}

#workspaces button:hover {
  background: @base03;
}

#workspaces button.focused,
#workspaces button.active {
  background-color: @base03;
  color: @base07;
}

#workspaces button.urgent {
  background-color: @base08;
  color: @base00;
}

#clock {
  color: @base07;
  border-color: @base0D;
}

#cpu {
  color: @base09;
  border-color: @base09;
}

#memory {
  color: @base0E;
  border-color: @base0E;
}

#disk {
  color: @base0D;
  border-color: @base0D;
}

#temperature {
  color: @base08;
  border-color: @base08;
}

#backlight {
  color: @base0A;
  border-color: @base0A;
}

#network {
  color: @base0B;
  border-color: @base0B;
}

#pulseaudio,
#wireplumber {
  color: @base0D;
  border-color: @base0D;
}

#custom-media {
  color: @base0E;
  border-color: @base0E;
}

#mode {
  color: @base05;
  border-color: @base03;
  box-shadow: inset 0 -3px @base05;
}

#mpd {
  color: @base0E;
  border-color: @base0E;
}

#custom-weather {
  color: @base0B;
  border-color: @base0B;
}

#battery,
#power-profiles-daemon,
#idle_inhibitor {
  color: @base05;
  border-color: @base03;
}

#custom-swaync {
  color: @base0E;
  border-color: @base0E;
}

#bluetooth {
  color: @base0D;
  border-color: @base0D;
}

#mpris {
  color: @base0E;
  border-color: @base0E;
}

#upower {
  color: @base0B;
  border-color: @base0B;
}

/* 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;
}

/* Battery states with colored glows */
#battery.charging {
  box-shadow: 0 0 6px rgba(168, 201, 255, 0.6);
  border-color: @base0B;
  color: @base0B;
}

#battery.warning:not(.charging) {
  box-shadow: 0 0 6px rgba(209, 98, 164, 0.6);
  border-color: @base0A;
  color: @base0A;
}

@keyframes blink {
  to {
    background-color: #ffffff;
    color: #000000;
  }
}

#battery.critical:not(.charging) {
  box-shadow: 0 0 6px rgba(243, 139, 168, 0.8);
  border-color: @base08;
  color: @base08;
  animation-name: blink;
  animation-duration: 0.5s;
  /* Using steps() instead of linear as a timing function to limit cpu usage */
  animation-timing-function: steps(12);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Bluetooth connected state */
#bluetooth.connected {
  box-shadow: 0 0 6px rgba(137, 180, 250, 0.5);
}

/* Power profiles with state-appropriate glows */
#power-profiles-daemon.performance {
  box-shadow: 0 0 6px rgba(243, 139, 168, 0.6);
  border-color: @base08;
  color: @base08;
}

#power-profiles-daemon.balanced {
  box-shadow: 0 0 6px rgba(137, 180, 250, 0.6);
  border-color: @base0D;
  color: @base0D;
}

#power-profiles-daemon.power-saver {
  box-shadow: 0 0 6px rgba(168, 201, 255, 0.6);
  border-color: @base0B;
  color: @base0B;
}

/* Idle inhibitor with state glow */
#idle_inhibitor.activated {
  box-shadow: 0 0 6px rgba(137, 180, 250, 0.6);
  border-color: @base0D;
  color: @base0D;
}

/* MPD states with glows */
#mpd.playing {
  box-shadow: 0 0 6px rgba(168, 201, 255, 0.5);
  border-color: @base0B;
  color: @base0B;
}

#mpd.paused {
  box-shadow: 0 0 6px rgba(203, 166, 247, 0.5);
  border-color: @base0E;
  color: @base0E;
}

#mpd.disconnected,
#mpd.stopped {
  color: @base04;
}

#tray > .passive {
  -gtk-icon-effect: dim;
}

#tray > .needs-attention {
  -gtk-icon-effect: highlight;
  box-shadow: 0 0 6px rgba(243, 139, 168, 0.8);
  border-color: @base08;
}

#privacy {
  padding: 0;
}

#privacy-item.screenshare {
  box-shadow: 0 0 6px rgba(209, 98, 164, 0.6);
  border-color: @base0A;
  color: @base0A;
}

#privacy-item.audio-in {
  box-shadow: 0 0 6px rgba(168, 201, 255, 0.6);
  border-color: @base0B;
  color: @base0B;
}

#privacy-item.audio-out {
  box-shadow: 0 0 6px rgba(137, 180, 250, 0.6);
  border-color: @base0D;
  color: @base0D;
}

/* Custom wlogout button */
#custom-wlogout {
  color: @base08;
  border-color: @base08;
}

#custom-wlogout:hover {
  box-shadow: 0 0 6px rgba(243, 139, 168, 0.5);
}