dotfiles/.config/waybar/style.css

/*
use gtk theme variables to define color variables
ex. `@define-color variable_name color_code;`
use as `@variable_name`
shade, mix, and alpha modifiers are available
*/

@define-color primary_bg_color #041e23;
@define-color primary_fg_color #ecf0c1;
@define-color accent_color_1 #06afc7; /* used for tooltip border and active states */
@define-color accent_color_2 #5cab96; /* used for battery charging background */
@define-color accent_color_3 #e3cd7b; /* used for battery low background */
@define-color accent_color_4 #684c31; /* used for batter low foreground */

* {
  border: none;
  border-radius: 0;
  font-family: Roboto, "Symbols NFM";
  font-size: 14px;
  min-height: 25px;
}

window#waybar {
  background-color: @primary_bg_color;
  color: @primary_fg_color;
}

#window {
  padding: 0 10px;
}

tooltip
{
  background: rgba(4, 30, 35, 0.85);
  border: 2px solid @accent_color_1;
  border-radius: 10px;
}

tooltip label
{
  color: white;
}

#workspaces button
{
  padding: 0 5px;
  background: transparent;
  color: @primary_fg_color;
}

#workspaces button.focused
{
  border-bottom: 3px solid @primary_fg_color;
}

#custom-bg
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

#custom-pacman
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

#scratchpad
{
  color: @primary_bg_color;
  background-color: @primary_fg_color;
  padding: 0 10px;
}

#custom-notification
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

#mode, #clock, #battery
{
  padding: 0px 10px;
}

#pulseaudio
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

#battery
{
  background-color: @primary_fg_color;
  color: @primary_bg_color;
  font-weight: bold;
}

#battery.charging
{
  background-color: @accent_color_2;
  color: @primary_fg_color;
}

#battery.warning:not(.charging)
{
  background-color: @accent_color_3;
  color: @accent_color_4;
}

#idle_inhibitor
{
  padding: 0 10px;
}

#network
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

#idle_inhibitor.activated
{
  color: @accent_color_1;
}

#backlight
{
  padding: 0 10px;
  border-right: 1px solid @primary_fg_color;
}

@keyframes blink-update
{
  to
  {
    background-color: dodgerblue;
  }
}

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

#custom-pacman.pending-updates
{
  animation-name: blink-update;
  animation-duration: 3s;
}