nix-config/users/tacocat/wayland/waybar/style.css

/* Keyframes */

@keyframes blink-critical {
	to {
		/*color: @white;*/
		background-color: @critical;
	}
}


/* Styles */

/* Colors (gruvbox) */
/* @define-color black	#282828; */
@define-color black	#393552;
/* @define-color red	#cc241d; */
@define-color red	#EB6F92;
@define-color green	#98971a;
@define-color yellow	#d79921;
/* @define-color blue	#458588; */
@define-color blue	#9CCFD8;
/* @define-color purple	#b16286; */
@define-color purple #C4A7E7;
@define-color aqua	#689d6a;
@define-color gray	#a89984;
@define-color brgray	#928374;
@define-color bfred	#fb4934;
@define-color brred	#EA9A97;
@define-color brgreen	#b8bb26;
/* @define-color bryellow	#fabd2f; */
@define-color bryellow	#F6C177;
/* @define-color brblue	#83a598; */
@define-color brblue	#85ACB0;
@define-color brpurple	#d3869b;
@define-color braqua	#8ec07c;
@define-color white	#ebdbb2;
/* @define-color bg2	#504945; */
@define-color bg2	#6E6A86;

@define-color warning 	@bfred;
@define-color critical	@bfred;
@define-color mode	@black;
@define-color unfocused	@bg2;
@define-color focused	@red;
@define-color inactive	@blue;
@define-color sound	@purple;
@define-color network	@blue;
@define-color memory	@brred;
@define-color cpu	@brblue;
@define-color temp	@bryellow;
@define-color layout	@bryellow;
@define-color battery	@braqua;
@define-color date	@black;
@define-color time	@white;

/* Reset all styles */
* {
	border: none;
	border-radius: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	text-shadow: none;
	icon-shadow: none;
}

/* The whole bar */
#waybar {
	background: rgba(40, 40, 40, 0.8784313725); /* #282828e0 */
	color: @white;
	font-family: JetBrains Mono;
	font-size: 10pt;
	/*font-weight: bold;*/
}

/* Each module */
#mode,
#battery,
#clock,
#cpu,
#language,
#memory,
#mode,
#network,
#pulseaudio,
#temperature,
#tray,
#backlight,
#idle_inhibitor,
#disk,
#user,
#mpris {
	padding-left: 8pt;
	padding-right: 8pt;
}

/* Each critical module */
#memory.critical,
#cpu.critical,
#temperature.critical,
#battery.critical.discharging {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: blink-critical;
	animation-duration: 1s;
}

/* Each warning */
#network.disconnected,
#memory.warning,
#cpu.warning,
#temperature.warning,
#battery.warning.discharging {
	color: @warning;
}

/* And now modules themselves in their respective order */

/* Current sway mode (resize etc) */
#mode {
	color: @white;
	background: @mode;
}

/* Workspaces stuff */
#workspaces button {
	/*font-weight: bold;*/
	padding-left: 4pt;
	padding-right: 4pt;
	color: @white;
	background: @unfocused;
}

/* Inactive (on unfocused output) */
#workspaces button.visible {
	color: @white;
	background: @inactive;
}

/* Active (on focused output) */
#workspaces button.focused {
	color: @black;
	background: @focused;
}

/* Contains an urgent window */
#workspaces button.urgent {
	color: @black;
	background: @warning;
}

/* Style when cursor is on the button */
#workspaces button:hover {
	background: @black;
	color: @white;
}

#tags button {
	/*font-weight: bold;*/
	padding-left: 4pt;
	padding-right: 4pt;
	color: @white;
	background: @unfocused;
}

#tags button.occupied {
	color: @black;
	background: @inactive;
}

#tags button.focused {
	color: @black;
	background: @focused;
}

#tags button.urgent {
	color: @black;
	background: @warning;
}

#window {
	margin-right: 35pt;
	margin-left: 35pt;
}

#pulseaudio {
	background: @sound;
	color: @black;
  font-family: FiraMono Nerd Font;
}

#network {
	background: @network;
	color: @black;
}

#memory {
	background: @memory;
	color: @black;
}

#cpu {
	background: @cpu;
	color: @black;
}

#temperature {
	background: @temp;
	color: @black;
}

#language {
	background: @layout;
	color: @black;
}

#battery {
	background: @battery;
	color: @black;
}

#tray {
	background: @date;
}

#clock.date {
	background: @date;
	color: @white;
}

#clock.time {
	background: @time;
	color: @black;
}

#custom-arrow1 {
	font-size: 11pt;
	color: @time;
	background: @date;
}

#custom-arrow2 {
	font-size: 11pt;
	color: @date;
	background: @battery;
}

#custom-arrow3 {
	font-size: 11pt;
	color: @layout;
	background: @battery;
}

#custom-arrow4 {
	font-size: 11pt;
	color: @battery;
	background: @temp;
}

#custom-arrow5 {
	font-size: 11pt;
	color: @temp;
	background: @cpu;
}

#custom-arrow6 {
	font-size: 11pt;
	color: @cpu;
	background: @memory;
}

#custom-arrow7 {
	font-size: 11pt;
	color: @memory;
	background: @network;
}

#custom-arrow8 {
	font-size: 11pt;
	color: @network;
	background: @sound;
}

#custom-arrow9 {
	font-size: 11pt;
	color: @sound;
	background: transparent;
}

#custom-arrow10 {
	font-size: 11pt;
	color: @unfocused;
	background: transparent;
}