dotfiles/.config/waybar/style/Catppuccin-Macchiato Custom.css

@define-color rosewater #f4dbd6;
@define-color flamingo #f0c6c6;
@define-color pink #f5bde6;
@define-color mauve #c6a0f6;
@define-color red #ed8796;
@define-color maroon #ee99a0;
@define-color peach #f5a97f;
@define-color yellow #eed49f;
@define-color green #a6da95;
@define-color teal #8bd5ca;
@define-color sky #91d7e3;
@define-color sapphire #7dc4e4;
@define-color blue #8aadf4;
@define-color lavender #b7bdf8;
@define-color text #cad3f5;
/* @define-color text @yellow; */
@define-color subtext1 #b8c0e0;
@define-color subtext0 #a5adcb;
@define-color overlay2 #939ab7;
@define-color overlay1 #8087a2;
@define-color overlay0 #6e738d;
@define-color surface2 #5b6078;
@define-color surface1 #494d64;
@define-color surface0 #363a4f;
@define-color catbase #24273a;
@define-color mantle #1e2030;
@define-color crust #181926;

* {
	font-family: "SauceCodePro NFM";
	font-weight: bold;
	border: none;
	border-radius: 0;
}

window#waybar {
	background: rgba(0, 0, 0, 0);
}

#window {
	color: @text;
	background: @catbase;
	border-radius: 15px;
/* 	margin-left: 10px; */
/* 	margin-right: 60px; */
}






window#waybar.empty  #window{
	border: 0px;
	margin: 0Px;
	padding: 0px;
	background-color: transparent;
}



tooltip {
	background: @catbase;
	border-radius: 15px;
	border-width: 2px;
	border-style: solid;
	border-color: @subtext0;
}

#workspaces {
	background: @catbase;
}

#workspaces button {
/* 	padding: 5px; */
    color: @text;
    border-radius: 15px;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces button.active {
	color: @peach;
	background-color:  @text;
/*     padding-left: 8px; */
/*     padding-right: 8px; */
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces,
#cpu,
#temperature,
#memory,
#custom-cava_mviz,
#custom-menu,
#idle_inhibitor,
#clock,
#custom-lock,
#custom-keybinds,
#custom-network_speed,
#custom-swaync,
#tray,
#swaync,
#mpris,
#bluetooth,
#battery,
#backlight,
#pulseaudio,
#custom-keyboard_state,
#custom-keyboard,
#custom-power {
background-color: @catbase;
border-radius: 15px;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}



#cpu{
	color: @peach;
}
#temperature{
	color: @red;
}
#memory{
	color: @lavender;
}
#custom-cava_mviz{
	color: @rosewater;
}


#custom-menu{
	color: @peach;
}

#idle_inhibitor{
	color: @sapphire;
}

#clock{
	color: @mauve;
}

#custom-lock{
	color: @sky;
}

#custom-keybinds{
	color: @maroon;
}

#custom-network_speed {
	color: @teal;
}

#battery {
	color: @green;
}

#pulseaudio {
	color: @yellow;
}

#custom-keyboard_state {
	color: @lavender;
}

#custom-keyboard {
	color: @pink;
}

#custom-power {
	color: @flamingo;
}







#workspaces button:hover {
/* 	color: @peach; */
	background-color: @subtext1;
/*     padding-left: 2px; */
/*     padding-right: 2px; */
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#taskbar button.active {
	background-color: @text;
/*    padding-left: 12px;
    padding-right: 12px;*/
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#taskbar button:hover {
    background-color: @subtext1;
/*    padding-left: 3px;
    padding-right: 3px;*/
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#pulseaudio-slider slider {
	min-width: 0px;
	min-height: 0px;
	opacity: 0;
	background-image: none;
	border: none;
	box-shadow: none;
}

#pulseaudio-slider trough {
	min-width: 80px;
	min-height: 5px;
	border-radius: 5px;
}

#pulseaudio-slider highlight {
	min-height: 10px;
	border-radius: 5px;
}

#backlight-slider slider {
	min-width: 0px;
	min-height: 0px;
	opacity: 0;
	background-image: none;
	border: none;
	box-shadow: none;
}

#backlight-slider trough {
	min-width: 80px;
	min-height: 10px;
	border-radius: 5px;
}

#backlight-slider highlight {
	min-width: 10px;
	border-radius: 5px;
}