dotfiles/waybar/style.css

* {
  font-family: "JetBrainsMono Nerd Font";
  font-weight: bold;
  font-size: 16px;
  min-height: 0;
  padding: 0;
  border: none;
  margin: 0;
}

@import "theme.css";

/* === Main Background === */

window#waybar {
  background: @main-bg;
}

/* === Drop Shadow === */

window#waybar > box {
  background-color: transparent;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 1);
  margin: 2px;
}

/* === Tooltip === */

tooltip {
  background: @main-bg;
  border: solid;
  border-width: 1.5px;
  border-radius: 8px;
  border-color: @main-br;
}
tooltip label {
  color: @main-fg;
  font-weight: normal;
  margin: -1.5px 3px;
}

/* === Workspace Buttons === */

#workspaces button {
  color: @module-fg;
  border-radius: 8px;
  box-shadow: none;
  margin: 2px 0;
  padding: 0 2px;
  transition: none;
}
#workspaces button:hover {
  color: @hover-fg;
  background: @hover-bg;
  text-shadow: none;
  box-shadow: none;
}
#workspaces button.active {
  color: @active-fg;
  background: @active-bg;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 2px;
  padding: 0 6px;
}

/* === General === */

#custom-ws,
#workspaces,
#window,
#custom-cpuinfo,
#memory,
#cpu,
#idle_inhibitor,
#clock,
#custom-wifi,
#bluetooth,
#custom-update,
#custom-media,
#pulseaudio,
#backlight,
#battery,
#custom-power {
  opacity: 1;
  color: @module-fg;
  padding: 0 4px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

#custom-left1,
#custom-left2,
#custom-left3,
#custom-left4,
#custom-left5,
#custom-left6,
#custom-left7,
#custom-left8 {
  font-size: 22.68px;
  margin-bottom: 0;
  text-shadow: -2px 0 2px rgba(0, 0, 0, 0.5);
}

#custom-right1,
#custom-right2,
#custom-right3,
#custom-right4,
#custom-right5 {
  font-size: 22.68px;
  margin-bottom: 0;
  padding-right: 3px;
  text-shadow: 2px 0 2px rgba(0, 0, 0, 0.5);
}

/* === Modules === */

/* == Window Icon == */

#custom-ws {
  background: @main-bg;
}

/* == Workspaces == */

#custom-left1 {
  color: @workspaces;
  background: @main-bg;
  font-size: 22.68px;
  margin-bottom: 0;
  padding-left: 2px;
}
#workspaces {
  background: @workspaces;
}
#custom-right1 {
  color: @workspaces;
  background: @main-bg;
  font-size: 22.68px;
  text-shadow: 3px 0 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 0;
}

/* == Temperature == */

#custom-paddc {
  padding-right: 22px;
}
#custom-left2 {
  color: @cpuinfo;
  background: @main-bg;
  padding-left: 3px;
}
#custom-cpuinfo {
  background: @cpuinfo;
  padding-left: 1px;
  padding-right: 0;
}

/* == Memory == */

#custom-left3 {
  color: @memory;
  background: @cpuinfo;
  padding-left: 3px;
}
#memory {
  background: @memory;
  padding-left: 1px;
  padding-right: 0;
}
#memory.warning {
  color: @warning;
}
#memory.critical {
  color: @critical;
}

/* == CPU == */

#custom-left4 {
  color: @cpu;
  background: @memory;
  padding-left: 3px;
}
#cpu {
  background: @cpu;
}
#custom-leftin1 {
  color: @cpu;
  font-size: 23.5px;
  margin-bottom: -1px;
}

/* == Distro Icon == */

#custom-left5 {
  color: @distro-bg;
  background: @main-bg;
  font-size: 22.68px;
  text-shadow: -2px 0 2px rgba(0, 0, 0, 0.6);
  margin-bottom: 0px;
  padding-left: 3px;
}
#custom-distro {
  color: @distro-fg;
  background: @distro-bg;
  font-size: 14.6px;
  margin: 0 -1px -2px 0;
  padding: 0 0 0 3px;
  text-shadow: 0 0 1.5px rgba(0, 0, 0, 1);
}
#custom-right2 {
  color: @distro-bg;
  background: @main-bg;
  font-size: 22.68px;
  margin-bottom: 0px;
}

/* == Time == */

#custom-rightin1 {
  color: @time;
  font-size: 23.5px;
  margin-bottom: -1px;
}
#idle_inhibitor {
  background: @time;
  margin-right: -2px;
  padding: 0 0 0 7px;
}
#idle_inhibitor:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}
#clock.time {
  background: @time;
  padding: 0 3px 0 0;
}
#custom-right3 {
  color: @time;
  background: @date;
}

/* == Date == */

#clock.date {
  background: @date;
}
#clock.date:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}
#custom-right4 {
  color: @date;
  background: @tray;
}

/* == Tray == */

#custom-wifi {
  padding-left: 5px;
  padding-right: 8px;
  background: @tray;
}
#custom-wifi:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}

#bluetooth {
  padding-right: 5px;
  background: @tray;
}
#bluetooth:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}

#custom-update {
  padding-right: 8px;
  background: @tray;
}
#custom-update:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}
#custom-right5 {
  color: @tray;
  background: @main-bg;
}

/* == Media Info == */

#custom-media {
  font-weight: normal;
  background-color: @main-bg;
  padding-right: 8px;
  padding-left: 8px;
}
#custom-media:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}

/* == Output Device == */

#custom-left6 {
  color: @pulseaudio;
  background: @main-bg;
  padding-left: 3px;
}
#pulseaudio {
  background: @pulseaudio;
}
#pulseaudio:hover {
  color: @hover-fg;
  text-shadow: none;
  box-shadow: none;
}

/* == Brightness == */

#custom-left7 {
  color: @backlight;
  background: @pulseaudio;
  padding-left: 2px;
}
#backlight {
  background: @backlight;
}

/* == Battery == */

#custom-left8 {
  color: @battery;
  background: @backlight;
  padding-left: 2px;
}
#battery {
  color: @module-fg;
  background: @battery;
}
#battery.warning {
  color: @warning;
}
#battery.critical {
  color: @critical;
}
#battery.charging {
  color: @charging;
}

/* == Power Button == */

#custom-leftin2 {
  color: @battery;
  background: @main-bg;
  font-size: 23.5px;
  margin-bottom: -1px;
}
#custom-power {
  color: @main-bg;
  background: @power;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  padding: 0 6px 0 9px;
}
#custom-power:hover {
  color: @hover-fg;
  background: @hover-bg;
  text-shadow: none;
  box-shadow: none;
}

@import "animation.css";