mine-hyprdots/.config/waybar/style.css

* {
    border: none;
    border-radius: 8px;
    font-family: "JetbrainsMono Nerd Font Mono";
    font-size: 16px;
}

window#waybar {
    background: transparent;
}

window#waybar.hidden {
    opacity: 0.2;
}

#custom-launcher {
    font-size: 24px;
    margin-right: 8px;
    padding: 0px 16px;
    transition: none;
    color: #89DCEB;  /* Sapphire */
    background: #1e1e2e;  /* Base */
}

button:hover {
    box-shadow: inherit;
    text-shadow: inherit;
    background: inherit;
}

#workspaces {
    padding: 0px 8px;
    margin-right: 8px;
    background: #1e1e2e;  /* Base */
}

#workspaces button {
    padding: 0px;
    color: #cba6f7;  /* Green */
}

#workspaces button:hover {
    color: #f38ba8;  /* Red */
}

#cpu {
    border-radius: 8px 0px 0px 8px;
    padding: 0px 16px;
    color: #cdd6f4;  /* Text */
    background: #1e1e2e;  /* Base */
}

#memory {
    border-radius: 0px 8px 8px 0px;
    padding: 0px 16px;
    padding-left: 0px;
    margin-right: 8px;
    color: #cdd6f4;  /* Text */
    background: #1e1e2e;  /* Base */
}

#custom-update {
    font-family: "Font Awesome 5 Free";
    padding: 0px 16px;
    padding-right: 22px;
    margin-right: 8px;
    color: #b4befe;  /* Lavender */
    background: #1e1e2e;  /* Base */
}

#keyboard-state {
    font-family: "Font Awesome 5 Free";
    padding: 0px 16px;
    margin-right: 8px;
    color: #f38ba8;  /* Flamingo */
    background: #1e1e2e;  /* Base */
}

#clock {
    padding: 0px 16px;
    margin-right: 8px;
    color: #eff1f5;  /* Text */
    background: #1e1e2e;  /* Base */
}

#custom-weather {
    padding: 0px 16px;
    color: #eff1f5;  /* Text */
    background: #1e1e2e;  /* Base */
}

#custom-wallpaper {
    font-family: "Font Awesome 5 Free";
    padding: 0px 16px;
    margin-right: 8px;
    color: #d5c4a1;  /* Mauve */
    background: #1e1e2e;  /* Base */
}

#temperature {
    padding: 0px 16px;
    margin-right: 8px;
    color: #89b4fa;  /* Blue */
    background: #1e1e2e;  /* Base */
}

#temperature.gpu {
    border-radius: 0px 8px 8px 0px;
    padding: 0px 16px;
    padding-left: 0px;
    margin-right: 8px;
    color: #89b4fa;  /* Blue */
    background: #1e1e2e;  /* Base */
}

#temperature.critical, #temperature.gpu.critical {
    color: #d20f39;  /* Red */
}

#pulseaudio {
    border-radius: 8px 0px 0px 8px;
    padding: 0px 16px;
    color: #f5e0dc;  /* Rosewater */
    background: #1e1e2e;  /* Base */
}

#pulseaudio.muted {
    padding: 0px 16px;
    padding-right: 8px;
}

#backlight {    
    border-radius: 0px 8px 8px 0px;
    padding: 0px 16px;
    padding-left: 2px;
    margin-right: 8px;
    color: #f5e0dc;  /* Rosewater */
    background: #1e1e2e;  /* Base */
}

#network {
    font-family: "Font Awesome 5 Free";
    border-radius: 8px 0px 0px 8px;
    padding: 0px 16px;
    color: #f9e2af;  /* Yellow */
    background: #1e1e2e;  /* Base */
}

#bluetooth {
    font-family: "Font Awesome 5 Free";
    border-radius: 0px 8px 8px 0px;
    padding: 0px 16px;
    padding-left: 0px;
    margin-right: 8px;
    color: #f9e2af;  /* Yellow */
    background: #1e1e2e;  /* Base */
}    

#battery {
    padding: 0px 16px;
    padding-right: 24px;
    margin-right: 8px;
    color: #fab387;  /* Peach */
    background: #1e1e2e;  /* Base */
}

#battery.charging {
    padding: 0px 16px;
    color: #eff1f5;  /* Text */
    background: #40a02b;  /* Green */
}

#battery.good:not(.charging) {
    color: #fab387;  /* Peach */
    background: #1e1e2e;  /* Base */
}

#battery.warning:not(.charging) {
    color: #eff1f5;  /* Text */
    background: #df8e1d;  /* Yellow */
}

#battery.low:not(.charging) {
    color: #eff1f5;  /* Text */
    background: #d20f39;  /* Red */
}

#battery.critical:not(.charging) {
    color: #eff1f5;  /* Text */
    background: #d20f39;  /* Red */
    animation-name: blink;
    animation-duration: 0.75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blink {
    to {
        color: #d20f39;  /* Red */
        background: #eff1f5;  /* Text */
    }
}

#custom-powerctl {
    font-family: "Font Awesome 5 Free";
    padding: 0px 16px;
    padding-right: 20px;
    color: #40a02b;  /* Green */
    background: #1e1e2e;  /* Base */
}