waybar/style.css

* {
    font-size: 0.95rem;
    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; */
    background: rgba(51, 50, 59, 0.736);


    transition: 600ms;
}

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

    border: solid 2px rgba(136, 136, 136, 0.8);
    background: rgba(89, 87, 102, 0.336);
}


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

    margin: 0;

    border: solid 3px rgba(189, 12, 68, 0.85);
    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: 4px;
    margin-left: 1px;
    margin-right: 1px;

    padding: 0 6px;

    transition: all 200ms ease;
    border-radius: 4px 4px 2px 0;
    
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#workspaces button:hover {
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-top: solid 2px currentcolor;
    border-right: solid 2px currentcolor;
    
    transition: all 200ms ease;
}

#workspaces button.empty {
    opacity: 0.7;
}

#workspaces button.active {
    color: rgba(255, 238, 0, 0.9);
    background: rgba(255, 255, 255, 0.08);
    
    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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#workspaces button.urgent {
    color: red;
    border-color: red;
    background: rgba(255, 0, 0, 0.1);
    animation: urgent-workspace ease-out 4s infinite;
}

#pulseaudio {
    color: #cbb643;
}

#p-info,
#info,
#memory,
#cpu,
#battery,
#disk,
#clock,
#network,
#not-power,
#pulseaudio,
#tray {
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    background-color: rgba(47, 44, 63, 0.425);
}

#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 1rem;
    margin: 0 2px;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 100ms ease-in-out;
}

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

    transition: 130ms;

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

    font-size: 1.1rem;
}

#pulseaudio,
#memory,
#cpu,
#battery,
#disk,
#clock,
#network,
#not-power,
#tray {
    padding: 4px 8px;
    margin: 0px 4px 0;
    font-weight: 600;
    border-top: solid 2px transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 300ms ease;
}

#pulseaudio:hover,
#memory:hover,
#cpu:hover,
#battery:hover,
#disk:hover,
#clock:hover,
#network:hover {
    border-top: solid 2px currentcolor;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    /* transform: translateY(-1px); */
    transition: all 200ms ease;
}