nixos/nate/dotfiles/waybar/style.css

/* =============================================================================
 *
 * Waybar configuration
 *
 * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
 *
 * =========================================================================== */

@define-color rosewater #f4dbd6;
@define-color flamingo #f0c6c6;
@define-color pink #f5bde6;
@define-color mauve #c6a0f6;
@define-color red #ed8796;
@define-color maroon #ee99a0;
@define-color peach #f5a97f;
@define-color yellow #eed49f;
@define-color green #a6da95;
@define-color teal #8bd5ca;
@define-color sky #91d7e3;
@define-color sapphire #7dc4e4;
@define-color blue #8aadf4;
@define-color lavender #b7bdf8;
@define-color text #cad3f5;
@define-color subtext1 #b8c0e0;
@define-color subtext0 #a5adcb;
@define-color overlay2 #939ab7;
@define-color overlay1 #8087a2;
@define-color overlay0 #6e738d;
@define-color surface2 #5b6078;
@define-color surface1 #494d64;
@define-color surface0 #363a4f;
@define-color base #24273a;
@define-color mantle #1e2030;
@define-color crust #181926;


/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */
@keyframes blink-warning {
  70% {
    color: @overlay0;
  }

  to {
    color: @overlay0;
    background-color: @crust;
  }
}

@keyframes blink-critical {
  70% {
    color: @overlay2;
  }

  to {
    color: @overlay2;
    background-color: @base;
  }
}


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

/* The whole bar */
#waybar {
  background: transparent;
  background-color: transparent;
  font-family: Overpass Nerd Font;
  font-size: 20px;
  color: @text;
}

#taskbar {
  background: transparent;
}

#taskbar button {
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 3px;
  margin-right: 3px;
  color: transparent;
  border-bottom: 2px solid;
}

#taskbar button.active {
  color: @lavender;
}

.modules-left,
.modules-right,
.modules-center {
  /* margin: 8px 8px 1px 8px; */
  background: transparent;
  /* color: @; */
  background-color: @base;
  border-radius: 25px;
  padding: 0px 10px 0px 10px;
  border-style: solid;
  border-width: 3px;
  border-color: @surface0;
}

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

/* -----------------------------------------------------------------------------
 * Modules styles
 * -------------------------------------------------------------------------- */

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

#battery.warning {
  color: @flamingo;
}

#battery.critical {
  color: @red;
}

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

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

#cpu.warning {
  color: @flamingo;
}

#cpu.critical {
  color: @red;
}

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

#memory.warning {
  color: @flamingo;
}

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

#mode {
  background: @overlay0;
  border-bottom: 3px transparent;
  color: @text;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 20px;
}

#network.disconnected {
  color: @flamingo;
}

#pulseaudio {
  padding-top: 6px;
}

#pulseaudio.muted {
  color: @sky;
}

#temperature.critical {
  color: @red;
}

#window {
  font-weight: bold;
}

#workspaces {
  font-size: 13px;
}

#workspaces button {
  border-bottom: 3px solid transparent;
  margin-bottom: 0px;
  padding: 0px;
}

#custom-launcher {
  color: @lavenderblush;
}

/* @define-color rosewater #f4dbd6; */
/* @define-color flamingo #f0c6c6; */
/* @define-color pink #f5bde6; */
/* @define-color mauve #c6a0f6; */
/* @define-color red #ed8796; */
/* @define-color maroon #ee99a0; */
/* @define-color peach #f5a97f; */
/* @define-color yellow #eed49f; */
/* @define-color green #a6da95; */
/* @define-color teal #8bd5ca; */
/* @define-color sky #91d7e3; */
/* @define-color sapphire #7dc4e4; */
/* @define-color blue #8aadf4; */
/* @define-color lavender #b7bdf8; */


#custom-signal {
  color: @lavender;
  padding: 0px 5px 0px 5px;
}

#custom-steam {
  color: @teal;
  padding: 0px 5px 0px 5px;
}

#custom-spotify {
  color: @green;
  padding: 0px 5px 0px 5px;
}

#custom-firefox {
  color: @yellow;
  padding: 0px 5px 0px 5px;
}

#custom-slack {
  color: @peach;
  padding: 0px 5px 0px 5px;
}

#custom-files {
  color: @pink;
  padding: 0px 5px 0px 5px;
}

#custom-pomo {
  color: @red;
  padding: 0px 5px 0px 5px;
}

#wiggle {
  animation-name: blink-warning;
}


#workspaces button.focused {
  border-bottom: 3px solid @green;
  margin-bottom: 1px;
  padding-left: 0;
}

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

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

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

#backlight.icon {
  padding-right: 1px;
  font-size: 13px;
}