dotfiles/CONFIG/waybar/style.css

/* -----------------------------------------------------------------------------
 * Keyframes & Colors
 * -------------------------------------------------------------------------- */
@define-color highlight #00E5FF;
@define-color base1     #0A0A0A;
@define-color text      #FFFFFF;
@define-color urgent    #FF0033;
@define-color dim       #333333;

@keyframes blink-warning {
  70% {
    color: @text;
  }
  to {
    color: @text;
    background-color: orange;
  }
}

@keyframes blink-critical {
  70% {
    color: @text;
  }
  to {
    color: @text;
    background-color: @urgent;
  }
}

/* -----------------------------------------------------------------------------
 * Base styles
 * -------------------------------------------------------------------------- */
* {
  border: none;
  border-radius: 0;
  min-height: 0;
  margin: 1px;
  padding: 0;
}

#waybar {
  background: transparent;
  color: @text;
  background-color: @base1;
  font-family: JetBrainsMono;
  font-size: 13px;
  border-bottom: 2px solid @dim;
}

/* Every modules */
#mode,
#network,
#custom-keyboard-layout,
#idle_inhibitor,
#cpu,
#memory,
#backlight,
#pulseaudio,
#battery,
#clock,
#tray {
  padding: 0.5rem 0.6rem;
  margin: 1px 0px;
}

/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */
#workspaces button {
  border-radius: 0px;
  color: @text;
  padding: 1px 6px;
  margin-right: 2px;
  margin-left: 2px;
  border-bottom: 2px solid transparent;
}

#workspaces button.focused {
  border-bottom: 2px solid @highlight;
  color: @highlight;
}

#workspaces button.urgent {
  border-color: @urgent;
  color: @urgent;
}

#mode {
  background: @highlight;
  color: #000000;
  font-weight: bold;
  margin-left: 5px;
  padding: 7px;
}

#window {
  font-weight: bold;
}

#network.disconnected {
  color: orange;
}

#cpu.warning {
  color: orange;
}

#cpu.critical {
  color: red;
}

#memory {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#memory.warning {
  color: orange;
}

#memory.critical {
  color: red;
  animation-name: blink-critical;
  animation-duration: 2s;
  padding-left: 5px;
  padding-right: 5px;
}

#backlight.icon {
}

#pulseaudio {
}

#pulseaudio.muted {
  color: @highlight;
}

#battery {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery.warning {
  color: orange;
}

#battery.critical {
  color: red;
}

#battery.warning.discharging {
  animation-name: blink-warning;
  animation-duration: 3s;
}

#battery.critical.discharging {
  animation-name: blink-critical;
  animation-duration: 2s;
}

#custom-power {
  margin-left: 15px;
  margin-right: 15px;
  font-size: 15px;
}