dotfiles-laptop/config/waybar/style.css

* {
    /* `otf-font-awesome` is required to be installed for icons */
/*    font-family: Input Mono Light, Input Mono, FontAwesome, SymbolsNerdFont, Roboto, Helvetica, Arial, sans-serif; */
    font-family: JetBrainsMono Nerd Font, FontAwesome, SymbolsNerdFont;
    font-size: 12px;
    min-height: 0;
}

window#waybar {
    background: transparent;
    color: #aeafb2;
    transition-property: background-color;
    transition-duration: .5s;
}

window#waybar.hidden {
    opacity: 0.2;
}

window#waybar.termite {
    background-color: #3F3F3F;
}

window#waybar.chromium {
    background-color: #000000;
    border: none;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */

#clock,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#network,
#pulseaudio,
#wireplumber,
#bluetooth,
#tray,
#idle_inhibitor,
#mpris,
#keyboard-state,
#battery,
#custom-notification,
#custom-storage,
#custom-power
{
    padding: 0 7px;
    opacity: 0.75;
}

#battery,
#cpu,
#memory,
#disk,
#temperature,
#network,
#pulseaudio,
#wireplumber,
#bluetooth,
#mpris,
#idle_inhibitor
{
    border: 0;
    border-radius: 0px;
}

#workspaces {
    background: rgba(49, 60, 84, 0.75);
    border-radius: 0px;
    border: 0;
    margin: 0;
    padding: 0 7px 0 0;
    }

#workspaces button {
    color: #aeafb2;
    padding: 2px 4px 0px 5px;
    margin: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0px;
}

#workspaces button:hover, #workspaces button.active:hover {
    color: #fff;
    background: #647aab;
    box-shadow: inherit;
    text-shadow: inherit;
    border: 0;
    border-radius: 0px;
}

#workspaces button.visible {
    border: 0;
    border-radius: 0px;
    background-image: -gtk-gradient (linear,
                                   0.5 0, 0.5 1,
                                   color-stop(0.2, #313c54),
				   color-stop(1, #556892)
				   );

}

#workspaces button.active {
    color: #fff000;
    border: 0;
    border-radius: 0px;
    background-image: -gtk-gradient (linear,
                                   0.5 0, 0.5 1,
                                   color-stop(0.2, #313c54),
				   color-stop(1, #556892)
				   );

}

#workspaces button.urgent {
    color: #fff;
    border: 0;
    border-radius: 0px;
    background-image: -gtk-gradient (linear,
                                   0.5 0, 0.5 1,
                                   color-stop(0.2, #313c54),
				   color-stop(1, #eb4d4b)
				   );
}

#window {
    padding: 0px 7px 0 7px;
    opacity: 1;
    color: #dcdcde;
    text-shadow: 1px 1px 2px #111;
}

#idle_inhibitor {
    color: #aeafb2;
}

#idle_inhibitor.activated {
    color: #fff;
}

#clock,
#custom-power,
#custom-notification,
#idle_inhibitor,
#tray {
    background-color: #111;
}

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

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

#cpu 
{
    background-color: #313c54;
}

#memory {
    background-color: #455c8f;
}

#temperature {
    background-color: #17243b;
}

#temperature.critical {
    color: #cf4beb;
}

#disk,
#custom-storage
{
    background-color: #38588f;
}

#network {
    color: #dcdcde;
    background-color: #37373f;
}

#bluetooth.disabled,
#pulseaudio.muted,
#wireplumber.muted,
#battery.critical,
#network.disconnected {
    color: #f53c3c;
}

#bluetooth.off {
	color: #909091;
}

#bluetooth,
#pulseaudio,
#battery,
#wireplumber 
{
    background-color: #112254;
}

#battery
{
	color: #fff;
}

#battery.good
{
        color: #aeafb2;
}

#battery.warning
{
        color: #fff000;

}

/* arrows */

#custom-arrow0,
#custom-arrow1,
#custom-arrow2,
#custom-arrow3,
#custom-arrow4,
#custom-arrow5,
#custom-arrow6,
#custom-arrow7,
#custom-arrow8
{
	margin: -2px 0 0 0;
	padding: 0 0 0 0;
	opacity: 0.75;
	font-size: 16px;
}

#custom-arrow0 {
	color: #111;
	background-color: transparent;
}

#custom-arrow1 {
	color: #313c54;
	background-color: #111;
}

#custom-arrow2 {
	color: #455c8f;
	background-color: #313c54;
}

#custom-arrow3 {
	color: #17243b;
	background-color: #455c8f;
}

#custom-arrow4 {
	color: #38588f;
	background-color: #17243b;
}

#custom-arrow5 {
	color: #37373f;
	background-color: #38588f;
}

#custom-arrow6 {
	color: #112254;
	background-color: #37373f;
}

#custom-arrow7 {
	color: #111;
	background-color: #112254;
}

#custom-arrow8 {
	color: #313c54;
	background-color: transparent;
}

/* unused */
/*
#language {
    background: #00b093;
    color: #740864;
    padding: 0 5px;
    margin: 0 5px;
    min-width: 16px;
}

#mpris {
    background:#989898;
}

#keyboard-state {
    background: #455c8f;
    color: #aeafb2;
    padding: 0;
    margin: 0 0 0 5px;
    min-width: 16px;
    border-top: 1px solid rgba(25, 25, 25, 0.5);
    border-bottom: 1px solid rgba(25, 25, 25, 0.5);
    border-left: 1px solid rgba(25, 25, 25, 0.5);
    border: 0;
    border-radius: 20px 0 0 20px;
}


#keyboard-state > label {
    padding: 0 5px;
}

#keyboard-state > label.locked {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}
*/