waybar/style.css

* {
    font-size: 1rem;
    font-family: Rubik, iMWritingMono Nerd Font;
}

@keyframes urgent-workspace {
    from {
        color: white;
    }

    75% {
        color: red;
    }

    to {
        color: white;
    }
}

@keyframes border-expand {
    0% {
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        border-bottom: solid 2px currentcolor;

        border-radius: 100px;
    }

    33% {
        border-top: transparent;
        border-left: solid 2px currentcolor;
        border-right: solid 2px currentcolor;
        border-bottom: solid 2px currentcolor;

        border-radius: 66px;
    }

    66% {
        border-top: solid 2px currentcolor;
        border-left: solid 2px currentcolor;
        border-right: solid 2px currentcolor;
        border-bottom: transparent;

        border-radius: 33px;
    }

    to {
        border-top: solid 2px currentcolor;

        border-radius: 0;
    }
}

tooltip {
    border: solid 2px currentcolor;

    background: black;

    color: white;
}

#p-info,
#weather,
#info {
    border-top: solid 1px currentcolor;

    transition: 650ms;
}

#p-info:hover,
#weather:hover,
#info:hover {
    border-bottom: solid 2px currentcolor;
    border-top: solid 0px transparent;

    transition: 350ms;
}

#window {
    padding: 2px;

    color: #fdf6e3;

    font-weight: 600;

    transition: 300ms;
}

window#waybar {
    border: solid 2px rgba(160, 160, 160, 0.329);

    border-radius: 6px;

    background: transparent;

    transition: 600ms;
}

window#waybar.empty {
    margin-top: 4px;

    border: solid 2px rgba(136, 136, 136, 0.8);
}

window#waybar.fullscreen {
    background: rgba(55, 55, 55, 0.6);

    margin: 0;

    border: solid 3px rgba(145, 11, 53, 0.8);
    border-radius: 8px 8px 4px 4px;

    transition: 300ms;
}

#workspaces button {
    border-top: solid 1px currentcolor;
    border-right: solid 1px currentcolor;
    border-bottom: solid 1px transparent;

    margin-top: 5px;
    margin-left: 0px;

    padding: 0;
    padding-right: 4px;

    transition: 200ms;
    border-radius: 2px 2px 2 0;
}

#workspaces button:hover {
    margin-top: 3px;

    transition: 200ms;
}

#workspaces button.empty {}

#workspaces button.active {
    color: rgba(255, 238, 0, 0.9);

    padding: 0 8px;

    margin-top: 0;
    margin-right: 2px;
    margin-left: 1px;

    border-top: solid 2px currentcolor;
    border-right: solid 2px currentcolor;

    border-radius: 8px 4px 2px 0;
}

#workspaces button.urgent {
    color: red;

    animation: urgent-workspace ease-out 4s infinite;
}

#pulseaudio {
    color: #cbb643;
}

#p-info,
#info,
#memory {
    color: #9649cd;
}

#cpu {
    color: #a70a3c;
}

#battery {
    color: #1ea54c;
}

#network {
    color: #1E90FF;
}

#disk {
    color: #c6673e;
}

#custom-power {
    border-radius: 0 8px 0 0;
}

#custom-weather,
#custom-reboot,
#custom-quit,
#custom-lock,
#custom-powerm,
#custom-power {
    padding: 0.2rem 1rem;

    margin: 0 1px;

    font-weight: 600;

    border-top: solid 1px currentcolor;

    transition: 350ms;
}

#custom-reboot:hover,
#custom-quit:hover,
#custom-powerm:hover,
#custom-lock:hover,
#custom-power:hover {
    border-top: solid 2px red;

    transition: 250ms;

    margin: 0;
    /* border-radius: 2rem; */

    font-size: 1.5rem;
}

#pulseaudio,
#memory,
#cpu,
#battery,
#disk,
#clock,
#network,
#not-power,
#tray {
    padding: 6px;

    margin: 0px 4px 0;

    font-weight: 600;

    border-top: solid 2px transparent;

    transition: 550ms;
}

#pulseaudio:hover,
#memory:hover,
#cpu:hover,
#battery:hover,
#disk:hover,
#clock:hover,
#network:hover {
    border-top: solid 2px currentcolor;

    transition: 250ms;
}