waybar/style.css

@import "mocha.css";
@import "pywal.css";

* {
  padding: 0px;
  margin: 0px;
  font-family: "Rubik", "JetBrains Mono Nerd Font";
  font-size: 12px;
  font-weight: bold;
}

/* ------ Set a Uniform Border Radius ------ */
.modules-left,
.modules-center,
.modules-right,
#cpu,
#memory,
#temperature,
#pulseaudio,
#backlight,
#custom-spotify,
#custom-icon,
#custom-updates,
#network,
#battery,
#tray,
#idle_inhibitor,
#custom-power,
#custom-notification {
  border-radius: 6px;
}

/* ------ Modules Left ------ */
.modules-left {
  background-color: @base;
  padding-right: 5px;
  padding-left: 5px;
}

/* ------ Modules Center ------ */
.modules-center {
  background-color: @base;
  padding-right: 5px;
  padding-left: 5px;
}

/* ------ Modules Right ------ */
.modules-right {
  background-color: @base;
  padding-right: 5px;
  padding-left: 5px;
}

/* ------ Cpu Usage, Temperature, and Memory ------ */
#cpu,
#temperature,
#memory {
  background-color: @surface0;
  padding: 4px 4px;
  margin: 4px 4px;
  font-size: 12px;
}

#cpu {
  color: @peach;
}

#memory {
  color: @mauve;
}

#temperature {
  color: @maroon;
}

/* ------ Window Title ------ */
#window {
  color: @color7;
  padding-right: 4px;
}

window#waybar {
  background-color: rgba(0, 0, 0, 0);
  /* border-bottom: 0px solid #ffffff; */
  /* color: #FFFFFF; */
  background: transparent;
  transition-property: background-color;
  transition-duration: .5s;
}

/* -----------------------------------------------------
* Workspaces 
* ----------------------------------------------------- */

#workspaces button.empty {
  color: @color2;
  font-family: JetBrainsMono Nerd Font;
}

#workspaces {
  margin: 0px 1px 0px 1px;
  padding: 0px 1px;
  font-family: JetBrainsMono Nerd Font;
}

#workspaces button {
  padding: 0px 2px;
  margin: 4px 2px;
  color: @color2;
  font-family: JetBrainsMono Nerd Font;
}

#workspaces button:hover {
  opacity: 0.5;
  color: @color3;
}

/* ------ Pulseaudio ------ */
#pulseaudio {
  color: @peach;
  background-color: @surface0;
  padding: 2px 5px;
  margin: 4px 2px;
}

/* ------ Backlight ------ */
#backlight {
  color: @sky;
  background-color: @surface0;
  padding: 2px 5px;
  margin: 4px 2px;
}

/* ------ Network ------ */
#network {
  color: @mauve;
  background-color: @surface0;
  padding: 2px 5px;
  margin: 4px 2px;
}

/* ------ Battery ------ */
#battery {
  color: @maroon;
  background-color: @surface0;
  padding: 2px 5px;
  margin: 4px 2px;
}

/* ------ Clock ------ */
#clock {
  padding-left: 10px;
  color: @color7;
  font-weight: bold;
  font-size: 13px;
}

/* ------ System Tray ------ */
#tray {
  background-color: @surface0;
  padding: 2px 5px;
  margin: 4px 2px;
}

/* ------ Custom Modules ------ */
#custom-icon {
  font-size: 18px;
  color: @color2;
  padding-right: 5px;
}

#custom-separator-arrow {
  font-size: 14px;
  color: @text;
}

#custom-separator-dot {
  font-size: 15px;
  color: @text;
}

#custom-spotify {
  color: @mauve;
  background-color: @surface0;
  padding: 2px 9px;
  margin: 4px 2px;
}

#custom-power {
  color: @red;
  background-color: @surface0;
  padding: 2px 9px;
  margin: 4px 2px;
  font-size: 15px;
}

#idle_inhibitor {
  color: @green;
  background-color: @surface0;
  padding: 2px 9px;
  margin: 4px 2px;
  font-size: 15px;
}

#custom-updates {
  padding: 2px 8px;
  margin: 4px 4px;
  background-color: @surface0;
}

#custom-updates.green {
  color: @text;
}

#custom-updates.yellow {
  color: @peach;
}

#custom-updates.red {
  color: @red;
}

#custom-notification {
  color: @teal;
  background-color: @surface0;
  padding: 2px 9px;
  margin: 4px 2px;
  font-size: 15px;
}

tooltip {
  background: @base;
  border: 1px solid @blue;
}