dotfiles/.config/waybar/style.css

@import "colors.css";
@define-color active @accentColor;

* {
  font-size: 16px;
  font-family: "JetBrainsMono Nerd Font,JetBrainsMono NF";
  min-width: 8px;
  min-height: 0px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0px;

}

window#waybar {
  transition-property: background-color;
  transition-duration: 0.5s;
  border-radius: 4px;
  border: 1px solid alpha(@active, 0.2);
  background: @background;
  background: alpha(@background, 0.7);
  color: lighter(@active);
}

menu,
tooltip {
  border-radius: 2px;
  padding: 2px;
  border: 1px solid @active;
  background: @background;

  color: lighter(@active);
}

menu label,
tooltip label {
  font-size: 14px;
  color: lighter(@active);
}

#submap,
#tray>.needs-attention {
  animation-name: blink-active;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.modules-right {
  margin: 0px 6px 4px 6px;
  border-radius: 4px;
  background: alpha(@background, 0);
  color: lighter(@active);
}

.modules-left {
  transition-property: background-color;
  transition-duration: 0.5s;
  margin: 6px 5px 6px 5px; /* Testing with 5 pixels on left/right */
  border-radius: 4px;
  background: alpha(@background, 0.5);
  color: lighter(@active);
  border: 1px solid alpha(@active, 0.1);
}

#gcpu,
#custom-github,
#memory,
#disk,
#together,
#submap,
#custom-weather,
#custom-recorder,
#connection,
#cnoti,
#brightness,
#power,
#custom-updates,
#tray,
/*#audio,*/ /* Duplicate with #sound */
#sound,
#privacy { /*Controls all the right modules for some reason*/
  border-radius: 0.15em; 
  margin: 2px 1px 3px 1px;
  background: alpha(darker(@active), 0.25);
  border: 1px solid alpha(darker(@active), 0.1);
}

/* Override specific parameters*/

#brightness,
#sound {
    padding: 1px 0px;
}

#custom-notifications {
  padding-left: 4px;
}

#custom-hotspot,
#custom-github,
#custom-notifications {
  font-size: 14px;
}

#custom-hotspot {
  padding-right: 2px;
}

#custom-vpn,
#custom-hotspot {
  background: alpha(darker(@active), 0.3);
}

#privacy-item {
  padding: 6px 0px 6px 6px;
}

#gcpu {
  padding: 8px 0px 8px 0px;
}

#custom-cpu-icon {
  font-size: 25px;
}

#custom-cputemp,
#disk,
#memory,
#cpu {
  font-size: 14px;
  font-weight: bold;
}

#custom-github {
  padding-top: 2px;
  padding-right: 4px;
}

#custom-dmark {
  color: alpha(@foreground, 0.3);
}

#submap {
  margin-bottom: 0px;
}

#workspaces {
  margin: 0px 2px;
  padding: 2px 0px;
  border-radius: 8px;
}

#workspaces button {
  transition-property: background-color;
  transition-duration: 0.1s;
  color: @foreground;
  background: transparent;
  border-radius: 4px;
  color: alpha(@foreground, 0.3);
  padding: 2px 0px;
}

#workspaces button.urgent {
  font-weight: bold;
  color: @foreground;
}

#workspaces button.active {
  padding: 2px 0px;
  background: alpha(@active, 0.4);
  color: lighter(@active);
  border-radius: 2px;
}

#network.wifi {
  padding-right: 5px;
  margin: 2px 0px;
}

#network.disconnected {
  padding-right: 5px;
  margin: 2px 0px;
}

#network.ethernet {
  padding-right: 3px;
  margin: 2px 0px;
}

#submap {
  min-width: 0px;
  margin: 4px 6px 4px 6px;
}

#custom-weather,
#tray {
  padding: 4px 0px 4px 0px;
}

#bluetooth {
  padding-top: 2px;
}

#battery {
  border-radius: 8px;
  padding: 4px 0px;
  margin: 4px 2px 4px 2px;
}

#battery.discharging.warning {
  animation-name: blink-yellow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery.discharging.critical {
  animation-name: blink-red;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#clock {
  font-weight: bold;
  padding: 4px 2px 2px 2px;
}

#pulseaudio.mic {
  border-radius: 4px;
  color: lighter(@active); 
  padding-left: 2px;
}

#backlight-slider slider,
#pulseaudio-slider slider {
  background-color: transparent;
  box-shadow: none;
}

#backlight-slider trough,
#pulseaudio-slider trough {
  margin-top: 4px;
  min-width: 6px;
  min-height: 60px;
  border-radius: 8px;
  background-color: alpha(@background, 0.6);
}

#backlight-slider highlight,
#pulseaudio-slider highlight {
  border-radius: 8px;
  background-color: lighter(@active);
}

#bluetooth.discoverable,
#bluetooth.discovering,
#bluetooth.pairable {
  border-radius: 8px;
  animation-name: blink-active;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink-active {
  to {
    background-color: @active;
    color: @foreground;
  }
}

@keyframes blink-red {
  to {
    background-color: #c64d4f;
    color: @foreground;
  }
}

@keyframes blink-yellow {
  to {
    background-color: #cf9022;
    color: @foreground;
  }
}