style.css

* {
    /* border: 1px solid transparent; */
    min-height: 0;
    font-family: "Symbols Nerd Font Mono","JetBrainsMono NF","FontAwesome"; /* FontAwesome is a fallback font */
    font-size: 20px;
    font-weight: 500;
    border-radius: 10px;
}
#window {
    /* margin: 2px 2px; */
    /* padding-left: 1px; */
    /* padding-right: 1px; */
    border-radius: 1px;
    /* border-bottom: 2px solid transparent; */
    /* border-right: 2px solid @bg; */
    background-color: #1a1b2f;
}

window#waybar {
    transition-property: background-color;
    transition-duration: 0.8s;
    /* ugly blackish bar */
    /* background-color: #181825; */
    /* completely transparent bar */ 
    background-color: transparent;
}

window#waybar.hidden {
    opacity: 0.5; /* does nothing */
}

/* Workspaces */
@keyframes button_activate {
    from { opacity: .3 }
    to { opacity: .8; }
}

#workspaces button:hover {
  border: #c678dd;
}
#workspaces {
    margin: 5px 5px 2px 5px;
    border-radius: 7px;
    padding: 1px;
    background-color: #1a1b2f;
    color: transparent;
}

#workspaces button {
    margin: 5px 2px 5px 2px;
    border-radius: 5px;
    padding-left: 1px;
    padding-right: 1px;
    background-color: transparent;
    color: #769ff0;
}

#workspaces button.active {
    background-color:#c678dd;
    color: #292f4f;
}

#workspaces button.urgent {
    color: #F38BA8;
}

#clock,
#pulseaudio,
#custom-power,
#custom-logo,
#memory,
#tray,
#battery,
#backlight,
#custom-updates,
/* #window, */
#cpu {
    min-height: 0;
    border: 10px solid #6a5ff1;
    border-width: 3px;
    padding: 0px 12px;
    margin: 4px 3px;
     background-color: #1a1b2f;
    /* border-image: linear-gradient(15deg, #769ff0, transparent 90%); */
    /*  MAKES ALL BAR MODULES TRANSPARENT */
    /* background-color: transparent; */
}
#custom-logo {
    padding: 0px 18px; /* the rest of the options remain the same, only this value is reassigned */
}
#window {
    padding-left: 10px;
    padding-right: 100px;
}

#custom-sep {
    padding: 0px;
    color: #585b70;
}

#cpu {
    /* color: #94e2d5; */
    color: #97c277;
}

#memory {
    color: #cba6f7;
}

#clock {
    /* color: #89b4fa; */
    color: #2bbaf5;
}

#clock.date {
    color: #74c7ec;
}

#window {
    color: #a6e3a1;
}

#pulseaudio {
    /* color: #b4befe; */
    color: #e4bf7a;
}

#custom-logo {
    /* color: #89b4fa; */
    color: #2bbaf5;
}

#backlight {
    color: #c678dd;
}
#battery {
    color: #e06c75;
}
#custom-updates {
    color: #d19a66;
    /* color: #5c64f1; */
}
#custom-power {
    color: #f38ba8;
    margin-right: 6px;
    padding-right: 9px;
    font-size: 14px;
}

#pulseaudio.muted {
    /* color: #a6adc8; */
    color: #e4bf7a;
}

@keyframes blink {
    to {
	background-color: #f38ba8;
	color: #181825;
    }
}

tooltip {
    border-radius: 8px;
}