dotfiles/deprecated/hypr/waybar/style.css

@import "mocha.css";
* {
  font-family: JetBrainsMono Nerd Font, Symbols Nerd Font, Iosevka Medium,
    monospace;
  font-size: 16px;
  border: none;
  min-height: 0;
  border-radius: 8px;
}

window#waybar {
  transition-property: background-color;
  transition-duration: 0.5s;
  /* background: none; */
  padding: 0;
  /* margin: 2px 4px 0 4px; */
  /* border: 2px solid @overlay0; */
  padding: 0px 5px;
  border-radius: 8px;
  background: @theme_base_color;
}

window#waybar.hidden {
  opacity: 0.5;
}

#waybar.empty #window {
  background: none;
}

.modules-left,
.modules-center,
.modules-right {
  /* background: @theme_base_color; */
  /* border: 3px solid @overlay0; */
  /* padding: 0px 5px; */
  /* border-radius: 6px; */
}

.modules-center {
  /* border: 3px solid @lavender; */
  margin: 0px 5px;
}

#idle_inhibitor,
#backlight,
#battery,
#clock,
#cpu,
#disk,
#mode,
#memory,
#tray,
#pulseaudio,
#custom-menu,
#custom-power,
#custom-weather,
#custom-updater,
#custom-vpn_check,
#custom-uptime,
#custom-cputemp,
#custom-waybar-mpris,
#window,
#network {
  padding: 0px 4px;
}

#idle_inhibitor {
  color: @blue;
  margin-right: 2px;
}

#backlight {
  color: @blue;
}

#battery {
  color: @green;
}

@keyframes blink {
  to {
    color: @surface0;
  }
}

#battery.critical:not(.charging) {
  background-color: @red;
  color: @theme_text_color;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#clock {
  color: @yellow;
  margin-right: 4px;
}

#cpu {
  color: @green;
}

#memory {
  color: @sky;
}

#disk {
  color: @sapphire;
}

#tray > .passive {
  -gtk-icon-effect: dim;
}
#tray > .needs-attention {
  -gtk-icon-effect: highlight;
}

#workspaces button.active {
  color: @peach;
  border-radius: 8px;
}

#custom-menu {
  color: @rosewater;
}

#custom-power {
  color: @red;
  margin-right: 3px;
}

#custom-updater {
  color: @red;
}

#custom-uptime {
  color: @blue;
}

#custom-weather {
  color: @lavender;
}

#custom-vpn_check {
  color: @sky;
}
#custom-cputemp {
  color: @teal;
}

#pulseaudio {
  color: @sapphire;
}

#pulseaudio.bluetooth {
  color: @pink;
}
#pulseaudio.muted {
  color: @red;
}

#window {
  color: @mauve;
}

#custom-waybar-mpris {
  color: @lavender;
}

#network {
  color: @teal;
}
#network.disconnected,
#network.disabled {
  background-color: @surface0;
  color: @text;
}