desktop-config/roles/desktop-environment/files/.config/waybar/style.css

/* Inspired by https://github.com/JaKooLit/Hyprland-Dots/blob/main/config/waybar/style/%5BDark%5D%20Half-Moon.css */

* {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    min-height: 0;  
    /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
    font-size: 97%;
    font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
}


window#waybar {
    background-color: rgba(26,27,38,0);
    border-bottom: 1px solid rgba(26,27,38,0);
    border-radius: 0px;
    color: #E6B673;
}

#waybar.empty, #waybar.tiled, #waybar.floating {
    background-color: transparent;
}

window#waybar.empty,
window#waybar.empty #window {
    background-color: transparent;
}

#taskbar,
#workspaces {
    background: #0F1419;
    margin: 5px;
    padding: 0px 1px;
    border-radius: 15px;
    border: 0px;
    font-style: normal;
    color: #0F1419;
}

#taskbar button,
#workspaces button {
    padding: 0px 5px;
    margin: 4px 3px;
    border-radius: 15px;
    border: 0px;
    color: #0F1419;
    background: linear-gradient(45deg, #95E6CB, #59C2FF, #D2A6FF);
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#taskbar button.active,
#workspaces button.active {
    padding: 0px 5px;
    margin: 4px 3px;
    border-radius: 15px;
    border: 0px;
    color: #0F1419;
    background: linear-gradient(45deg, #59C2FF, #D2A6FF);
    opacity: 1.0;
    min-width: 40px;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces button:hover {
    border-radius: 15px;
    color: #0F1419;
    background: linear-gradient(45deg, #59C2FF, #D2A6FF);
    opacity: 0.8;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

@keyframes gradient_horizontal {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes swiping {
    0% {
        background-position: 0% 200%;
    }
    100% {
        background-position: 200% 200%;
    }
}

tooltip {
    background: #0F1419;
    border: 1px solid #D2A6FF;
    border-radius: 10px;
}

tooltip label {
    color: #F3F4F5;
}

#window {
    color: #E6E1CF;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#temperature,
#memory {
    color: #FF8F40;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#idle_inhibitor,
#clock {
    color: #F3F4F5;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

/*-----Indicators----*/
#idle_inhibitor.activated {
    color: #39FF14;
}

#bluetooth {
    color: blue;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#cpu {
    color: #FF8F40;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#disk {
    color: #B8CC52;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#backlight,
#battery {
    color: #F07178;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#battery.critical:not(.charging) {
    color: #f53c3c;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#mpris {
    color: #F07178;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding-left: 8px;
    padding-right: 2px;
}

#backlight {
    color: white;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#network {
    color: #B8CC52;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#tray {
    color: #E6E1CF;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}

#pulseaudio {
    color: #59C2FF;
    background: #0F1419;
    border-radius: 50px 50px;
    margin: 5px;
    padding: 2px 15px;
}