flake/users/guanranwang/home-manager/common/dotfiles/config/waybar/style.css

/*
 * Waybar styles config
 * ~/.config/waybar/style.css
 * based on https://gitlab.com/fazzi/dotfiles
 * made for `waybar-hyprland`
 * remember to download `JetBrainsMono Nerd Font` font,
 * `sudo pacman -S ttf-jetbrains-mono-nerd` on Arch Linux
 *
 * yes i have no knowledge about css
 * why am i commenting everything
 *
 * this config works in a terrible way, please do not edit
 */

* {
  font: bold 14px "JetBrainsMono Nerd Font Propo"; /* font weight, font size and font. propo nerd font for centered icons, symbols nerd font does not work great on bold text */
  /*color: #c0caf5;*/ /* text color */

  /* Tokyo Night color scheme */
}

window#waybar {
  background: transparent; /* main window transparent background */
}

tooltip {
  background: #1a1b26; /* tooltip background */
  color: #c0caf5; /* tooltip text color */
  border: 2px solid #c0caf5; /* tooltip border size and color */
  border-radius: 5px; /* tooltip rounded corners */
}

/* *****************************
 * modules (pills) section start
 * *****************************/
#custom-launcher,
#gamemode,
#window,
#workspaces,
#tray,
#pulseaudio,
#battery,
#clock,
#cava {
  text-shadow: 1px 1px 2px black; /* text shadow, offset-x | offset-y | blur-radius | color */
  background: #1a1b26; /* background color */
  color: #c0caf5; /* text color */
  margin: 10px 4px 4px 4px; /* empty spaces around */
  padding: 4px 10px; /* extend pill size, vertical then horizontal */
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4); /* pill background shadows */
  border-radius: 5px; /* rounded corners */
}

/* extend empty space on both side of the bar,
 * value from ~/.config/hypr/hyprland.conf
 * gaps_out (8px) + border size (2px) = 10px */

#custom-launcher {
  margin-left: 10px;
}

#clock {
  margin-right: 10px;
}


#workspaces {
  padding: 0px; /* remove padding around workspace module */
}

#workspaces button {
  text-shadow: 1px 1px 2px black; /* text shadow, offset-x | offset-y | blur-radius | color */
  color: #c0caf5; /* #workspace != workspace button */

  padding: 0px 4px; /* fit with pill padding, 0px for not haveing duped vertical padding, 4px to make a square (4px value from module padding: ...#clock {padding >>4px<< 10px}) */
  border: 2px solid #1a1b26; /* required by active workspace top color, or the bar will jitter */

  transition-property: background-color, min-width; /* smooth transition for workspace module */
  transition-duration: .15s;
}

#workspaces button.active {
  text-shadow: none; /* text shadow, offset-x | offset-y | blur-radius | color */
  color: #c0caf5; /* #workspace != workspace button */

  /* active workspace */
  background: linear-gradient(
    70deg,
    rgb(192, 202, 245),
    rgb(192, 202, 245),
    rgb(192, 202, 245),
    rgb(192, 202, 245),
    rgb(229, 234, 255),
    rgb(192, 202, 245),
    rgb(192, 202, 245),
    rgb(192, 202, 245),
    rgb(192, 202, 245)
  );
  background-size: 300% 100%;
  background-position: 0% 0%;
  animation: colored-gradient 2s linear infinite;

  color: #1a1b26; /* icon(text) color */
  min-width: 36px;
}

#workspaces button.active:hover {
  background: #9fa7cc; /* hovered workspace color */
}

#workspaces button:hover {
  background: #11111b; /* hovered workspace color */
}

/* ***************************
 * modules (pills) section end
 * ***************************/

/*

Does not seem to do anything, I'm not really sure...
UPDATE: it does do stuff on sway, will investigate

#workspaces button.visible {
}

#workspaces button.urgent {
}

#workspaces button.persistent{
}

#workspaces button.hidden {
}

*/

@keyframes colored-gradient {
  from {background-position: 0% 0%;}
  to   {background-position: 100% 0%;}
}