zero/home-environments/radio/files/.config/waybar/style.css

/* Colors (anemofilia) */
@define-color black  #1A1A1A;
@define-color blue   #8581E0;
@define-color gray   #313131;
@define-color white  #DDDDDD;

@define-color mode        @black;
@define-color normal-bg   @black;
@define-color normal-fg   @white;
@define-color focused-bg  @gray;
@define-color focused-fg  @blue;
@define-color sound       @gray;
@define-color network     @black;
@define-color memory      @gray;
@define-color cpu         @black;
@define-color temp        @gray;
@define-color layout      @black;
@define-color battery     @gray;
@define-color date        @black;
@define-color time        @black;

* {
  border: none;
  border-radius: 0;
  font-family: Meslo LG M DZ, JuliaMono, Noto;
  font-size: 12px;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  text-shadow: none;
  icon-shadow: none;
}

window#waybar {
  background: @normal-bg;
  color: @white;
}

tooltip {
  background: rgba(43, 48, 59, 0.8);
  border: 1px solid rgba(100, 114, 125, 0.8);
}

tooltip label {
  color: white;
}

#tags button {
  color: @gray;
  background: transparent;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  min-height: 0;
  min-width: 0;
}

#tags button:not(.focused):not(.occupied) {
  border-top: 2px solid transparent;
  color: @normal-fg;
  background: @normal-bg;
}

#tags button:not(.occupied).focused {
  border-top: 2px solid transparent;
  color: @focused-fg;
  background: @focused-bg;
}

#tags button:not(.focused).occupied {
  border-top: 2px solid @normal-fg;
  color: @normal-fg;
  background: @normal-bg;
}

#tags button.occupied.focused {
  border-top: 2px solid @focused-fg;
  color: @focused-fg;
  background: @focused-bg;
}

#tags button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
  background: @black;
  color: @white;
}

#window {
  margin-left: 3px;
  margin-right: 3px;
  background: @normal-bg;
  color: @focused-fg;
}

#pulseaudio,#pulseaudio,#network,#cpu,#memory,#backlight,#battery,#clock, #custom-arrow1, #custom-arrow2 {
  padding-left: 5px;
}

#pulseaudio {
  background: @focused-bg;
}

#pulseaudio.muted {
  background: @focused-bg;
}

#pulseaudio {
  background: @focused-bg;
}

#pulseaudio.muted {
  background: @focused-bg;
}

#network.wifi {
  background: @focused-bg;
}

#network.disconnected {
  background: @focused-bg;
}

#cpu {
  background: @focused-bg;
}

#temperature {
  background: @normal-bg;
}

#memory {
  background: @normal-bg;
}

#battery.full {
  background: @normal-bg;
}

#battery.good {
  background: @normal-bg;
}

#battery.critical {
  background: @normal-bg;
}

#clock {
  background: @focused-bg;
}

#tray {
  background: @normal-bg;
}

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

#battery.warning:not(.charging) {
  background: #f53c3c;
  color: white;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

tooltip {
  font-family: Meslo LG M DZ, JuliaMono, Noto;
  font-size: 11px;
  background-color: @black;
  text-shadow: none;
}

tooltip * {
  font-family: Meslo LG M DZ, JuliaMono, Noto;
  font-size: 11px;
  background-color: @black;
  text-shadow: none;
}

#custom-arrow1 {
  font-size: 13pt;
  color: @focused-bg;
  background: @normal-bg;
}

#custom-arrow2 {
  font-size: 13pt;
  color: @normal-bg;
  background: @focused-bg;
}

/* #taskbar */
#taskbar button {
  color: @normal-fg;
  background: @normal-bg;
}
#taskbar button.active {
  color: @focused-fg;
  background: @normal-bg;
}
/* #taskbar button.minimized
#taskbar button.maximized
#taskbar button.fullscreen
#taskbar.empty */

#custom-net-up-icon {
  background: @focused-bg;
  background-image: url("/home/radio/.config/awesome/icons/net_up.png");
}
#custom-net-down-icon {
  background: @focused-bg;
  background-image: url("/home/radio/.config/awesome/icons/net_down.png");
}
#custom-mem-icon {
  background: @normal-bg;
  background-color: @normal-bg;
  background-image: url("/home/radio/.config/awesome/icons/mem.png");
}
#custom-bat-icon {
  background: @normal-bg;
  background-color: @normal-bg;
  background-image: url("/home/radio/.config/awesome/icons/battery_100.png");
}
#custom-cpu-icon {
  background: @focused-bg;
  background-image: url("/home/radio/.config/awesome/icons/cpu.png");
}
#custom-temp-icon {
  background: @normal-bg;
  background-image: url("/home/radio/.config/awesome/icons/temp.png");
}
#custom-pulseaudio-icon {
  background: @focused-bg;
  background-image: url("/home/radio/.config/awesome/icons/vol_low.png");
}