dotfiles/.config/waybar/style.css

@import url("file:///home/viyurz/.config/gtk-3.0/colors.css");

* {
    font-family: 'JetBrainsMono NF';
    font-size: 13px;
}

#waybar {
    background-image: linear-gradient(160deg, @background1, @background2), linear-gradient(160deg, @accent1, @accent2);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.modules-left, .modules-center, .modules-right {
	margin-bottom: 2px;
	color: @foreground;
}

#workspaces button {
    box-shadow: none;
    border: none;
	border-radius: 0;
}

#workspaces button:hover {
    background-color: @hovered;
}

#workspaces button.active {
    background-color: @selected;
}

#workspaces button.urgent {
    background-color: @urgent;
}

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

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: @urgent;
}

#button,
#tray,
#custom-pkg-update-count,
#network,
#bluetooth,
#pulseaudio,
#custom-dnd-toggle,
#custom-media,
#window,
#backlight,
#battery,
#custom-gpu-temp,
#custom-gpu-usage,
#memory,
#custom-cpu-temp,
#cpu,
#clock { 
	padding: 2px 6px;
}

/*
.modules-left {
	color: @accent1;
}

 .modules-right {
	color: @accent2;
}
*/

#pulseaudio,
#custom-dnd-toggle.dnd-disabled,
#backlight,
#custom-gpu-temp,
#custom-gpu-usage,
#custom-cpu-temp,
#cpu {
 	color: @accent1;
}

#custom-pkg-update-count,
#network,
#bluetooth,
#mpris,
#battery,
#memory,
#clock {
    color: @accent2;
}

#custom-pkg-update-count.no-update,
#pulseaudio.output.muted,
#pulseaudio.input.source-muted,
#custom-dnd-toggle.dnd-enabled {
	color: @disabled;
}

#network.disabled, #network.disconnected,
#bluetooth.disabled, #bluetooth.off {
	color: @disabled2;
}

#custom-pkg-update-count.error {
	color: @bad;
}

#battery.charging {
    background-color: alpha(@good, 0.33);
}

#battery.30:not(.charging),
#custom-gpu-temp.high,
#custom-cpu-temp.high {
  background-color: alpha(@bad, 0.33);
}

#battery.20:not(.charging),
#battery.10:not(.charging),
#custom-gpu-temp.alert,
#custom-cpu-temp.alert {
  background-color: alpha(@bad, 0.5);
  animation-name: blink;
  animation-duration: 1.5s;
  animation-timing-function: steps(2, start);
  animation-iteration-count: infinite;
}

@keyframes blink {
    to {
		background-color: transparent;
    }
}