waybar/style.css

@import "../../.cache/wal/colors.css";
@import "mocha.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: @color7;
  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;
}