waybar/muted_style.css

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

/* Main color palette - slightly more vibrant versions:
 * Base Gray: #9B9B9B (brightened for better readability)
 * Workspace Active: #E4C493 (brighter warm gold)
 * CPU: #C48988 (brightened rose)
 * Memory: #8AA8C0 (brightened steel blue)
 * Network: #92AB8D (brightened sage)
 * Battery: #A6998B (brightened taupe)
 * Disk: #B3A89A (warm neutral)
 */

@keyframes urgent-workspace {
    from { color: #8B8B8B; }
    75% { color: #B47978; }
    to { color: #8B8B8B; }
}

tooltip {
    border: solid 2px #9B9B9B;
    background: rgba(35, 35, 35, 0.95);
    color: #E4C493;
}

window#waybar {
    border: solid 2px rgba(139, 139, 139, 0.2);
    border-radius: 6px;
    background: rgba(35, 35, 35, 0.9);
    transition: 600ms;
}

window#waybar.empty {
    margin-top: 4px;
    border: solid 2px rgba(139, 139, 139, 0.2);
    background: rgba(40, 40, 40, 0.75);
}

window#waybar.fullscreen {
    background: rgba(40, 40, 40, 0.9);
    margin: 0;
    border: solid 3px rgba(180, 121, 120, 0.8);
    border-radius: 8px 8px 4px 4px;
    transition: 300ms;
}

#workspaces button {
    border-top: solid 1px #8B8B8B;
    border-right: solid 1px #8B8B8B;
    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(155, 155, 155, 0.08);
    color: #9B9B9B;
}

#workspaces button:hover {
    margin-top: 2px;
    background: rgba(212, 180, 131, 0.1);
    border-top: solid 2px #D4B483;
    border-right: solid 2px #D4B483;
    color: #D4B483;
}

#workspaces button.active {
    color: #E4C493;
    background: rgba(228, 196, 147, 0.18);
    padding: 0 8px;
    margin-top: 0;
    border-top: solid 2px currentcolor;
    border-right: solid 2px currentcolor;
    border-radius: 8px 4px 2px 0;
}

#workspaces button.urgent {
    color: #B47978;
    border-color: #B47978;
    background: rgba(180, 121, 120, 0.1);
    animation: urgent-workspace ease-out 4s infinite;
}

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

#memory {
    color: #8AA8C0;
}

#cpu {
    color: #C48988;
}

#battery {
    color: #A6998B;
}

#network {
    color: #92AB8D;
}

#clock {
    color: #E4C493;
}

#pulseaudio {
    color: #9B9B9B;
}

#disk {
    color: #B3A89A;
}

#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.12);
    transition: all 200ms ease;
}

#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(139, 139, 139, 0.05);
    color: #96897B;
    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;
    background: rgba(139, 139, 139, 0.1);
    color: #B47978;
    transition: 130ms;
    margin: 0;
}

#window {
    padding: 0 8px;
    margin: 4px;
    color: #B3A89A;
    font-weight: 500;
    background: rgba(179, 168, 154, 0.08);
    border-radius: 4px;
    border-bottom: solid 2px transparent;
    transition: all 300ms ease;
}

#window:hover {
    /* border-bottom: solid 2px #B3A89A; */
    background: rgba(179, 168, 154, 0.12);
}