dotfiles/.config/waybar/style.css

/*
 * written by fennek182
 * version 1
 * last change: Fr 2025-11-11
*/

* {
    font-family:
        Symbols Nerd Font,
        Roboto;
    font-size: 16px;
    font-weight: 600;
}

window#waybar {
    background-color: rgba(30, 30, 46, 0.8); /* windowed */
    border-radius: 0px;
    border-bottom: 1px solid rgba(90, 104, 125, 0.4);
    color: #cdd6f4;
    transition-property: background-color;
    transition-duration: 0.3s;
}

window#waybar.hidden {
    opacity: 0.2;
}

button.active {
    color: #ff80d5; /* pink */
    border-radius: 0;
}

button:hover {
    background-color: rgba(10, 80, 100, 0.95);
    box-shadow: inset 0 -1px transparent; /* Use box-shadow instead of border so the text isn't offset */
    border: 1px solid rgba(90, 104, 125, 0.3);
    border-radius: 3px;
    transition-property: background-color;
    transition-duration: 0.3s; /* animation *1/ */
}

button.active:hover {
    background-color: rgba(80, 50, 100, 0.95);
    box-shadow: inset 0 -1px #ff80d5;
    border-radius: 3px;
}

#window {
    color: #ff80d5; /* pink */
    margin-left: 8px;
    margin-right: 8px;
    transition-property: background-color;
    transition-duration: 0.3s;
}

#window:hover {
    background-color: rgba(90, 60, 110, 0.97);
    border: 1px solid rgba(90, 104, 125, 0.8);
    padding: 0 4px;
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.3s;
    margin: 2px 0;
}

#window#waybar.hidden {
    opacity: 0.2;
}

#workspaces {
    transition-property: background-color;
    transition-duration: 0.5s;
}

#workspaces:hover {
    /* background-color: rgba(0, 70, 100, 0.33); */
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.5s;
}

#workspaces button:hover {
    border: 1px solid rgba(90, 104, 125, 0.8);
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.5s;
}

#workspaces button {
    /*color: #78dcff;*/
    border-radius: 5px;
    padding: 0 8px;
    margin: 2px 3px;
    transition-property: background-color;
    transition-duration: 0.5s;
}

#workspaces button.active,
#wlr-taskbar button.active {
    color: #ff80d5; /* pink */
    background-color: rgba(80, 50, 100, 0.6);
    border: 1px solid rgba(90, 104, 125, 0.5);
    transition-property: background-color;
    transition-duration: 0.3s;
}

#workspaces button:hover {
    background-color: rgba(90, 60, 110, 0.97);
    border: 1px solid rgba(90, 104, 125, 0.6);
}

#workspaces button.active:hover {
    background-color: rgba(90, 60, 110, 0.97);
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.5s;
    border: 1px solid rgba(90, 104, 125, 0.6);
}

#workspaces button.urgent {
    background-color: #eb4d4b;
}

#window,
#custom-cast,
#custom-cpu-info,
#custom-gpu-info,
#custom-kraken,
#custom-memory-info,
#custom-start_button,
#custom-start_button,
#custom-usage-toggle,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-battery_g502,
#custom-bluetooth,
#custom-mount,
#custom-sync,
#custom-server,
#custom-kde-connect,
#custom-media,
#custom-brightness,
#custom-wlsunset,
#idle_inhibitor,
#custom-battery-suffix,
#clock.date,
#clock.clock,
#custom-dunst,
#tray,
#wlr-taskbar,
#mode,
#scratchpad,
#mpris,
#mpd {
    border-radius: 5px;
    padding: 0 5px;
    margin: 0;
    min-width: 18px;
    transition-property: background-color;
    transition-duration: 0.3s;
}

#clock.date:hover,
#clock.clock:hover,
#custom-battery_g502:hover,
#custom-dunst:hover,
#custom-cpu-info:hover,
#custom-usage-toggle:hover,
#custom-kraken:hover,
#custom-memory-info:hover,
#custom-gpu-info:hover,
#backlight:hover,
#custom-brightness:hover,
#custom-bluetooth:hover,
#custom-wlsunset:hover,
#idle_inhibitor:hover,
#battery:hover,
#custom-battery-suffix:hover,
#pulseaudio:hover,
#wireplumber:hover,
#custom-bluetooth:hover,
#network:hover,
#custom-kde-connect:hover,
#custom-cast:hover,
#custom-server:hover,
#custom-mount:hover,
#custom-sync:hover,
#mpris:hover {
    background-color: rgba(10, 80, 100, 0.95);
    border: 1px solid rgba(90, 104, 125, 0.8);
    padding: 0 4px;
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: 0.3s;
    margin: 2px 0;
}

#tray {
    padding: 4px;
    color: #78dcff;
    border-radius: 5px;
    padding: 0 5px;
    margin: 2px 1px;
}

#tray:hover {
    border: 1px solid rgba(90, 104, 125, 0.8);
    border-radius: 5px;
    padding: 0px 4px;
    background-color: rgba(10, 80, 100, 0.95);
    transition-property: background-color;
    transition-duration: 0.3s;
}

#wlr-taskbar {
    background-color: #303030;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

#taskbar button {
    border-radius: 5px;
    padding-left: 10px; /* was 5px until Wed 2026-05-06 */
    padding-right: 10px; /* was 5px until Wed 2026-05-06 */
    margin: 2px;
    /* margin-left: 1px; */
    /* margin-right: 1px; */
    transition-property: background-color;
    transition-duration: 300ms;
}

#taskbar button:hover {
    border: 1px solid rgba(90, 104, 125, 0.4);
    background-color: rgba(0, 178, 255, 0.3);
    transition-property: background-color;
    transition-duration: 300ms;
}

#taskbar button.active {
    border: 1px solid rgba(90, 104, 125, 0.4);
    background-color: rgba(10, 70, 90, 0.6);
}

#taskbar button.active:hover {
    /*background-color: rgba(10, 80, 100, 1);*/
    background-color: rgba(20, 80, 100, 0.95);
    box-shadow: inset 0 -1px #78dcff;
}

#mpris {
    color: #78dcff;
}
#mpris:hover {
    background-color: rgba(10, 80, 100, 0.95);
}

#custom-usage-toggle:hover {
    background-color: rgba(60, 50, 100, 0.95);
}

#custom-start_button {
    padding: 0px 16px;
    background-image: url("/home/tobias/.config/waybar/img/start.png");
    margin: 0 5px;
    margin-top: 4px;
    transition-property: background-color;
    transition-duration: 0.35s;
}

#custom-start_button:hover {
    margin: 2px 4px;
    /* margin-right: 6px; */
    border: 1px solid rgba(90, 104, 125, 0.2);
    border-radius: 5px;
    background-color: rgba(0, 178, 255, 0.5);
    transition-property: background-color;
    transition-duration: 0.35s;
}

#custom-separator {
    color: #cdd6f4;
    margin: 0;
    padding: 0;
}

#workspaces {
    padding: 0;
    margin: 0;
}

#workspaces:hover,
#workspaces button:hover,
#taskbar button:hover {
    transition-property: background-color;
    transition-duration: 300ms;
}

#custom-cpu-info {
    color: #ff8ca1;
}
#custom-cpu-info:hover {
    background-color: rgba(90, 50, 60, 0.95);
    border: 1px solid rgba(90, 104, 125, 0.6);
}

#custom-kraken {
    color: #ffaf8a;
}

#custom-memory-info {
    color: #ffe769;
}

#custom-memory-info:hover,
#custom-usage-toggle:hover {
    background-color: rgba(120, 80, 60, 0.95);
}

#clock.date:hover,
#clock.clock:hover {
    background-color: rgba(60, 50, 100, 0.95);
}

/* ===== BLUE - SERVICE /SYSTEM CONTROL ===== */
#custom-bluetooth,
#custom-mount,
#custom-kde-connect,
#custom-cast,
#custom-sync,
#custom-server,
#custom-dunst,
#network {
    color: #78dcff; /* blue */
}

#pulseaudio:hover,
#custom-bluetooth:hover,
#custom-mount:hover,
#custom-kde-connect:hover,
#custom-sync:hover,
#custom-server:hover,
#custom-dunst:hover,
#network:hover {
    background-color: rgba(10, 70, 90, 0.95);
}

/* ===== GREEN - SERVICE / SYSTEM CONTROL ===== */
#battery:hover,
#pulseaudio:hover {
    background-color: rgba(10, 90, 70, 0.95); /* green */
}

#backlight,
#custom-brightness,
#idle_inhibitor,
#custom-wlsunset,
#wireplumber {
    color: #8df1a9; /*  green */
}

#backlight:hover,
#custom-brightness:hover,
#custom-wlsunset:hover,
#idle_inhibitor:hover,
#wireplumber:hover {
    background-color: rgba(10, 90, 70, 0.95); /* green */
}

/* ===== YELLOW - SERVICE / SYSTEM CONTROL ===== */
#custom-gpu-info {
    color: #ffe769; /* # yellow */
}

#custom-gpu-info:hover {
    background-color: rgba(81, 95, 60, 0.95); /* yellow */
}
/* ==========================================-------------- */

#custom-battery-suffix {
    padding-left: 1px;
    background-color: #ff80d5;
}

#custom-battery-suffix:hover {
    padding-left: 0px;
}

#custom-separator {
    color: #cdd6f4;
    margin-right: 2px;
}

#custom-cpu-info {
    color: #ff8ca1;
}

#custom-memory-info,
#custom-usage-toggle {
    color: #ffaf8a;
}

span {
    color: red;
    font-size: 20px;
}

#clock.date {
    color: #b6b2ff;
    margin-right: 0px;
}

#clock.clock {
    color: #b6b2ff;
    margin-left: 0px;
    padding-left: 2px;
    margin-right: 5px;
}

#clock.clock:hover {
    margin-left: 0px;
    padding-left: 1px;
    margin-right: 5px;
}

#battery,
#custom-battery-suffix,
#pulseaudio {
    color: #8df1a9;
}

#battery.charging,
#battery.plugged {
    color: #8df1a9;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

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

label:focus {
    background-color: #000000;
}

#wireplumber.muted {
    background-color: #f53c3c;
}

#temperature {
    background-color: #f0932b;
}

#temperature.critical {
    background-color: #eb4d4b;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}
#mode {
    background-color: #64727d;
    border-bottom: 2px solid #5599ff;
}

#language {
    background: #00b093;
    color: #740864;
    padding: 0 5px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state {
    background: #97e1ad;
    color: #000000;
    padding: 0 0px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state > label {
    padding: 0 5px;
}

#keyboard-state > label.locked {
    background: rgba(0, 0, 0, 0.2);
}