Waybar Style

These are the cosmetic CSS files for my Waybar configuration. Please, if you appreciate my work, consider making a donation.

Sway Waybar Style

This is the Sway Waybar style. Load this document into Emacs, and turn on Rainbow mode for extra fun! Now these Org documents serve yet another purpose. The colors for each of the four CSS files match the rices for Sway, River, LabWC, and Hyprland.

All

Notice the space before the asterisk. 

 * {
    font-family:"VictorMono Nerd Font";
    font-size:24px;
    /* background:rgba(0, 0, 0, 0); */
    color:#fedd83;
}

window {
    background:none;
}

tooltip {
    border:none;
    border-radius:0;
    outline:none;
    color:#fedd83;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    margin-bottom:1px;
    padding:0;
}

Window

#window {
    color:#fedd83;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    padding-left:5px;
}

MPD

#mpd {
    color:#fedd83;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#fe0219;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    transition:all 0.2s ease 0s;
}

#cpu:hover, #wireplumber.muted:hover, #pulseaudio.muted:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:2px 2px rgba(60, 60, 60, 0.6);
}

#cpu {
    margin-left:3px;
    margin-right:0px;
    padding-left:13px;
    padding-right:10px;
    border-radius:40px 0px 0px 40px;
}

#cpu, #wireplumber.muted {
    margin-left:0;
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#f4df23;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:2px;
    margin-right:0;
    padding-left:10px;
    padding-right:11px;
    border-radius:40px 0px 0px 40px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#disk {
    transition:all 0.2s ease 0s;
}
#disk:hover, #pulseaudio:hover, #pulseaudio.bluetooth:hover {
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.4));
    color:#efefef;
    text-shadow:2px 2px rgba(80, 80, 80, 0.6);
}

#pulseaudio {
    border-radius:40px 40px 40px 40px;
    padding-left:11px;
    padding-right:12px;
    margin-right:4px;
    margin-left:1px;
    box-shadow:3px 3px rgba(228, 207, 19, 0.4);
    transition:all 0.2s ease 0s;
}
#pulseaudio:hover, #pulseaudio.bluetooth:hover {
    box-shadow:3px 3px rgba(80, 80, 80, 0.6);
}

#pulseaudio.muted {
    margin-left:2px;
    margin-right:4px;
    box-shadow:3px 3px rgba(238, 0, 10, 0.4);
    padding-left:12px;
    padding-right:12px;
}

Privacy

#privacy-item {
    padding-left:4px;
    padding-right:4px;
    background:none;
    color:#fe0219;
}

#privacy-item label {
    color:#fe0219;
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#a9df11;
    background:linear-gradient(0deg, rgba(153, 208, 2, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    transition:all 0.2s ease 0s;
}

#memory:hover, #backlight:hover, #wireplumber:hover {
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.4));
    color:#efefef;
    text-shadow:2px 2px rgba(50, 50, 50, 0.6);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(0deg, rgba(60, 60, 30, 0.5), rgba(0, 0, 0, 0.5));
    padding-left:16px;
    padding-right:18px;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#dfdfdf;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    box-shadow:3px 2px rgba(0, 0, 0, 0.5);
    outline:0;
}

#workspaces button * {
    background:none;
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(0deg, rgba(154, 208, 2, 0.5), rgba(0, 0, 0, 0.5));
    text-shadow:inherit;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:3px 3px rgba(154, 208, 2, 0.6);
    box-shadow:3px 2px rgba(154, 208, 2, 0.5);
}

#workspaces button:hover label {
    color:#a9df11;
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied {
    background:linear-gradient(0deg, rgba(238, 1, 10, 0.5), rgba(0, 0, 0, 0.5));
    color:#efefef;
    box-shadow:3px 2px rgba(238, 0, 10, 0.5);
}
#workspaces button.focused label {
    color:#fe0219;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover {
    text-shadow:3px 3px rgba(238, 0, 10, 0.6);
}

#tags button.occupied {
    background:linear-gradient(180deg, rgba(239, 175, 96, 0.5), rgba(0, 0, 0, 0.5));
    color:#fff293;
}

Cava

#cava {
    background:linear-gradient(0deg, rgba(238, 1, 10, 0.5), rgba(0, 0, 0, 0.3));
    color:#fe0219;
    padding-left:4px;
    padding-right:2px;
    text-shadow:3px 3px rgba(0, 0, 0, 0.4);
}

Keyboard State

#keyboard-state {
    padding-left:8px;
    padding-right:5px;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.5));
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(228, 207, 19, 0.4);
    margin-right:4px;
    margin-left:0px;
    transition:all 0.2s ease 0s;
}

#keyboard-state label {
    color:#f4df23;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#keyboard-state:hover {
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.5));
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(150, 150, 150, 0.4);
}

#keyboard-state:hover label {
    color:#efefef;
    text-shadow:2px 2px rgba(60, 60, 60, 0.5);
}

#keyboard-state label.locked {
    color:#ffffff;
    text-shadow:2px 2px rgba(238, 0, 10, 0.5);
}

#image {
    background:none;
    border:none;
    color:black;
    box-shadow:2px 2px rgba(0, 0, 0, 0.3);
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#6264fe;
    background:linear-gradient(0deg, rgba(118, 112, 229, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    transition:all 0.2s ease 0s;
}

#battery:hover, #idle_inhibitor:hover, #pulseaudio.bluetooth:hover, #temperature:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:2px 2px rgba(60, 60, 60, 0.6);
}

#pulseaudio.bluetooth, #temperature {
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
}

#pulseaudio.bluetooth {
    border-radius:40px 40px 40px 40px;
    margin-left:1px;
    margin-right:3px;
    padding-left:11px;
    padding-right:13px;
    box-shadow:3px 2px rgba(118, 112, 229, 0.5);
}

#pulseaudio:hover {
    box-shadow:3px 2px rgba(150, 150, 150, 0.5);
}

#battery {
    border-radius:0px 40px 40px 0px;
    padding-left:10px;
    padding-right:12px;
    margin-left:0;
    margin-right:3px;
    box-shadow:3px 2px rgba(118, 112, 229, 0.4);
}

#battery.warning {
    color:#f4df23;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:3px;
    box-shadow:3px 2px rgba(224, 202, 16, 0.5);
}

#battery.critical {
    color:#fe0219;
    border-radius:0px 40px 40px 0px;
    font-weight:bold;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0px;
    margin-right:4px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

#idle_inhibitor {
    border-radius:40px 0px 0px 40px;
    padding-left:11px;
    padding-right:10px;
    margin-left:2px;
    margin-right:0;
}

Bluetooth

#bluetooth {
    transition:all 0.2s ease 0s;
}

#bluetooth.on, #bluetooth.off {
    color:#fe0219;
    background:linear-gradient(0deg, rgba(238, 0, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(283, 0, 10, 0.4);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#a9df11;
    background:linear-gradient(0deg, rgba(153, 207, 1, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(153, 207, 1, 0.5);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#5254fe;
    background:linear-gradient(0deg, rgba(108, 102, 218, 0.5), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(108, 102, 218, 0.4);
}

#bluetooth.discovering {
    color:#f4df23;
    background:linear-gradient(0deg, rgba(228, 207, 19, 0.5), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(228, 207, 19, 0.4);
}

#bluetooth.discovering:hover, #bluetooth.connected:hover, #bluetooth.discoverable:hover, #bluetooth.pairable:hover, #bluetooth.off:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(100, 100, 100, 0.5);
}

Clock/Network

#custom-clock, #network {
    color:#ff4de7;
    background:linear-gradient(0deg, rgba(175, 56, 219, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:4px;
    padding-left:12px;
    padding-right:10px;
    border-radius:0px 40px 40px 0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    box-shadow:3px 2px rgba(175, 56, 219, 0.4);
    transition:all 0.2s ease 0s;
}

#custom-clock:hover, #network:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.4));
    text-shadow:2px 2px rgba(60, 60, 60, 0.6);
    box-shadow:3px 2px rgba(150, 150, 150, 0.4);
}

Wayfire Waybar Style

All

 * {
    font-family:"VictorMono Nerd Font";
    font-size:24px;
    background:transparent;
    color:#efefef;
}

tooltip {
    border:none;
    outline:none;
    background:none;
    border-radius:0px;
    font-size:19px;
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#f63117;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.7), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    border-radius:40px 0px 0px 40px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#pulseaudio.muted {
    margin-left:2px;
    padding-left:10px;
    padding-right:10px;
}

Memory/Backlight

#memory, #backlight {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#19ccee;
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#pulseaudio.bluetooth {
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
}

#battery, #temperature {
    border-radius:0px 40px 40px 0px;
    padding-left:10px;
    padding-right:12px;
    margin-left:0;
    margin-right:2px;
    box-shadow:3px 3px rgba(40, 137, 186, 0.5);
}

#battery.warning {
    color:#fef47f;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:1px;
    margin-right:3px;
    box-shadow:3px 3px rgba(254, 175, 2, 0.5);
}

#battery.critical {
    color:#f63117;
    font-weight:bold;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:2px;
    margin-right:4px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

#idle_inhibitor {
    border-radius:40px 0px 0px 40px;
    padding-left:11px;
    padding-right:10px;
    margin-left:2px;
    margin-right:0;
}

Bluetooth

#bluetooth.on, #bluetooth.off {
    color:#f63117;
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#19ccee;
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.discovering {
    color:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Taskbar

#taskbar button {
    background:linear-gradient(180deg, rgba(206, 40, 40, 0.8), rgba(0, 0, 0, 0.5));
    padding-left:12px;
    padding-right:11px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#f63117;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(206, 40, 40, 0.5);
    margin-left:4px;
    margin-right:4px;
}
#taskbar button:hover {
    padding-left:12px;
    padding-right:11px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fef47f;
    background:linear-gradient(180deg, rgba(255, 176, 2, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(255, 176, 2, 0.5);
    box-shadow:2px 2px rgba(255, 176, 2, 0.5);
}
#taskbar button.maximized {
    color:#1cd98b;
    background:linear-gradient(180deg, rgba(12, 201, 123, 0.8), rgba(0, 0, 0, 0.5));
    box-shadow:2px 2px rgba(12, 201, 123, 0.5);
}
#taskbar button.minimized {
    color:#9b9b9b;
    background:linear-gradient(180deg, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.5));
    box-shadow:2px 2px rgba(70, 70, 70, 0.5);
}
#taskbar button.active {
    color:#19ccee;
    box-shadow:2px 2px rgba(40, 137, 186, 0.5);
    background:linear-gradient(180deg, rgba(40, 137, 186, 0.8), rgba(0, 0, 0, 0.5));
}
#taskbar button.maximized:hover {
    color:#e36ab1;
    background:linear-gradient(180deg, rgba(196, 105, 166, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(196, 105, 166, 0.6);
    box-shadow:2px 2px rgba(196, 107, 169, 0.5);
}
#taskbar button.active:hover, #taskbar button.minimized:hover {
    color:#9aadf9;
    background:linear-gradient(180deg, rgba(144, 129, 246, 0.8), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(144, 129, 246, 0.6);
    box-shadow:2px 2px rgba(144, 129, 246, 0.5);
}

Clock/Network

#custom-clock, #clock, #network {
    color:#9aadf9;
    background:linear-gradient(180deg, rgba(144, 129, 246, 0.7), rgba(0, 0, 0, 0.4));
    margin-left:0;
    margin-right:2px;
    padding-left:11px;
    padding-right:13px;
    border-radius:0px 40px 40px 0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(144, 129, 246, 0.5);
}

Privacy

#privacy-item {
    padding-left:4px;
    padding-right:4px;
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.3));
}

MPD

#mpd {
    color:#ffffff;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Wireplumber

#wireplumber {
    border-radius:0px 0px 0px 0px;
    color:#e96ab1;
    background:linear-gradient(180deg, rgba(196, 105, 166, 0.8), rgba(0, 0, 0, 0.5));
    padding-left:12px;
    padding-right:11px;
    margin-left:0px;
    margin-right:0px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#wireplumber.muted {
    padding-left:12px;
    padding-right:11px;
}

Keyboard State

#keyboard-state {
    padding-left:8px;
    background:linear-gradient(180deg, rgba(225, 198, 84, 0.7), rgba(0, 0, 0, 0.4));
    border-radius:0px 40px 40px 0px;
    box-shadow:2px 2px rgba(225, 198, 84, 0.4);
    margin-right:2px;
}

#keyboard-state label {
    color:#f1d664;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#keyboard-state label.locked {
    color:#ffffff;
    text-shadow:2px 2px rgba(255, 0, 0, 0.5);
}

#image {
    background:none;
    border:none;
    color:black;
    box-shadow:2px 2px rgba(0, 0, 0, 0.3);
}

Hyprland Waybar Style

All

 * {
    font-family:"VictorMono Nerd Font";
    font-size:24px;
    color:#fdeadb;
}

window {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0));
    border-radius:0px 0px 0px 0px;
    margin-top:1px;
}

tooltip {
    border:none;
    outline:0;
    border-radius:0;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    box-shadow:none;
    margin-bottom:1px;
    padding:0;
}

Title

#title, #window {
    padding-left:5px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    margin-top:2px;
}

MPD

#mpd, #bluetooth.off {
    padding-right:6px;
    color:#fdeadb;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#e6727a;
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#cpu:hover {
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    color:#efefef;
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#cpu {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
    margin-right:0px;
    padding-left:12px;
    transition:all 0.2s ease 0s;
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#ffee60;
    background:linear-gradient(0deg, rgba(233, 212, 167, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:1px;
    margin-right:0px;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    transition:all 0.2s ease 0s;
}

#pulseaudio:hover, #pulseaudio.bluetooth:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

#disk:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#pulseaudio {
    border-radius:40px 40px 40px 40px;
    margin-right:2px;
    margin-left:1px;
    padding-left:11px;
    padding-right:11px;
    box-shadow:3px 2px rgba(233, 212, 167, 0.5);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#c3eb59;
    background:linear-gradient(0deg, rgba(201, 223, 146, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    transition:all 0.2s ease 0s;
}
#backlight {
    border-radius:0px 40px 40px 0px;
    margin-right:2px;
    box-shadow:3px 2px rgba(201, 223, 146, 0.5);
}
#backlight:hover {
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

#memory:hover, #wireplumber:hover, #backlight:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    padding-left:16px;
    padding-right:18px;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(0, 0, 0, 0.5);
    outline:0;
    transition:all 0.2s ease 0s;
}

#workspaces button * {
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.6), rgba(0, 0, 0, 0.5));
    text-shadow:inherit;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(238, 75, 80, 0.5);
    box-shadow:3px 2px rgba(238, 75, 80, 0.4);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(0deg, rgba(201, 223, 146, 0.6), rgba(0, 0, 0, 0.2));
    box-shadow:3px 2px rgba(201, 223, 146, 0.5);
}

#workspaces button.focused label, #workspaces button.active label {
    color:#c3eb59;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(201, 223, 146, 0.5);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(201, 223, 146, 0.6), rgba(0, 0, 0, 0.2));
}

Battery

#battery, #idle_inhibitor {
    transition:all 0.2s ease 0s;
}

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#44bdda;
    background:linear-gradient(0deg, rgba(77, 119, 213, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#battery:hover, #idle_inhibitor:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}
#temperature {
    margin-right:3px;
    margin-left:0;
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 3px rgba(77, 119, 213, 0.5);
    transition:all 0.2s ease 0s;
}

#temperature:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 3px rgba(60, 60, 60, 0.5);
}

#pulseaudio.bluetooth {
    border-radius:40px 40px 40px 40px;
    margin-right:2px;
    box-shadow:3px 2px rgba(77, 119, 213, 0.5);
}

#battery.warning {
    color:#ffee60;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(0deg, rgba(233, 212, 167, 0.5), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:3px;
    box-shadow:3px 3px rgba(233, 212, 167, 0.5);
}

#battery.critical {
    color:#e6727a;
    border-radius:0px 40px 40px 0px;
    font-weight:bold;
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0px;
    margin-right:3px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

Cava

#cava {
    color:#ffee60;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 0px 0px 0px;
    padding-left:4px;
    padding-right:4px;
    margin-left:0;
    margin-right:0;
    text-shadow:2px 2px rgba(233, 212, 167, 0.4);
}

#cava:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

Network

#network, #custom-clock {
   color:#d170cb;
   background:linear-gradient(0deg, rgba(196, 139, 155, 0.5), rgba(0, 0, 0, 0.2));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:3px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.5);
   box-shadow:3px 2px rgba(196, 139, 155, 0.5);
   transition:all 0.2s ease 0s;
}

#network:hover, #custom-clock:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

Bluetooth

#bluetooth {
    transition:all 0.2s ease 0s;
}
#bluetooth.on, #bluetooth.off, #bluetooth.disabled {
    color:#e6727a;
    background:linear-gradient(0deg, rgba(238, 75, 80, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(238, 75, 80, 0.5);
    margin-left:0;
    margin-right:4px;
    padding-left:10px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#b3da49;
    background:linear-gradient(0deg, rgba(154, 176, 99, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:10px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(154, 176, 99, 0.5);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#54cdea;
    background:linear-gradient(0deg, rgba(77, 119, 213, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(77, 119, 213, 0.5);
}

#bluetooth.discovering {
    color:#ffee60;
    background:linear-gradient(0deg, rgba(233, 212, 167, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(233, 212, 167, 0.5);
}

#bluetooth.discovering:hover, #bluetooth.connected:hover, #bluetooth.discoverable:hover, #bluetooth.pairable:hover, #bluetooth.off:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

Niri Waybar Style

All

 * {
    font-family:"VictorMono Nerd Font";
    font-size:24px;
    background:transparent;
    color:#efefef;
}

window {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0));
    border-radius:0px 0px 0px 0px;
    margin-top:1px;
}

Title

#title, #window {
    padding-left:4px;
    color:#ffffff;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    margin-top:2px;
}

MPD

#mpd, #bluetooth.off {
    padding-right:6px;
    color:#ffffff;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

CPU

#cpu, #wireplumber.muted, #pulseaudio.muted, #privacy {
    color:#ff2800;
    background:linear-gradient(0deg, rgba(234, 84, 10, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}

#cpu:hover {
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    color:#efefef;
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#cpu {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
    margin-right:0px;
    padding-left:12px;
    transition:all 0.2s ease 0s;
}

Pulseaudio

#pulseaudio, #disk {
    color:#fdcb46;
    background:linear-gradient(0deg, rgba(227, 175, 103, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:1px;
    margin-right:0px;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    transition:all 0.2s ease 0s;
}

#pulseaudio:hover, #pulseaudio.bluetooth:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

#disk:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#pulseaudio {
    border-radius:40px 40px 40px 40px;
    margin-right:2px;
    margin-left:1px;
    padding-left:11px;
    padding-right:11px;
    box-shadow:3px 2px rgba(227, 175, 103, 0.5);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    padding-left:16px;
    padding-right:18px;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(0, 0, 0, 0.5);
    outline:0;
    transition:all 0.2s ease 0s;
}

#workspaces button * {
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(0deg, rgba(234, 84, 10, 0.6), rgba(0, 0, 0, 0.5));
    text-shadow:inherit;
    margin-left:2px;
    margin-right:3px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(234, 84, 10, 0.5);
    box-shadow:3px 2px rgba(234, 84, 10, 0.4);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(0deg, rgba(145, 208, 129, 0.6), rgba(0, 0, 0, 0.2));
    box-shadow:3px 2px rgba(145, 208, 129, 0.5);
}

#workspaces button.focused label, #workspaces button.active label {
    color:#93eab9;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(145, 208, 129, 0.5);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(145, 208, 129, 0.6), rgba(0, 0, 0, 0.2));
}

Battery

#battery, #idle_inhibitor {
    transition:all 0.2s ease 0s;
}

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#54cdea;
    background:linear-gradient(0deg, rgba(93, 135, 229, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#battery:hover, #idle_inhibitor:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}
#temperature {
    margin-right:3px;
    margin-left:0;
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 3px rgba(93, 135, 229, 0.5);
    transition:all 0.2s ease 0s;
}

#temperature:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 3px rgba(60, 60, 60, 0.5);
}

#pulseaudio.bluetooth {
    border-radius:40px 40px 40px 40px;
    margin-right:2px;
    box-shadow:3px 2px rgba(93, 135, 229, 0.5);
}

#battery.warning {
    color:#fdcb46;
    border-radius:0px 40px 40px 0px;
    background:linear-gradient(0deg, rgba(227, 175, 103, 0.5), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:3px;
    box-shadow:3px 3px rgba(227, 175, 103, 0.5);
}

#battery.critical {
    color:#ff2800;
    border-radius:0px 40px 40px 0px;
    font-weight:bold;
    background:linear-gradient(0deg, rgba(234, 84, 10, 0.5), rgba(0, 0, 0, 0.4));
    margin-left:0px;
    margin-right:3px;
    box-shadow:3px 3px rgba(255, 255, 255, 0.5);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#93ebb9;
    background:linear-gradient(0deg, rgba(145, 208, 109, 0.5), rgba(0, 0, 0, 0.2));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    transition:all 0.2s ease 0s;
}
#wireplumber {
    border-radius:38px 0px 0px 38px;
    margin-left:2px;
}
#backlight {
    border-radius:0px;
}
#backlight:hover {
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

#memory:hover, #wireplumber:hover, #backlight:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

Cava

#cava {
    color:#fdcb46;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 0px 0px 0px;
    padding-left:4px;
    padding-right:4px;
    margin-left:0;
    margin-right:0;
    text-shadow:2px 2px rgba(227, 175, 103, 0.4);
}

#cava:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
}

Network

#network, #custom-clock {
   color:#f36c97;
   background:linear-gradient(0deg, rgba(229, 111, 149, 0.5), rgba(0, 0, 0, 0.2));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:3px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.5);
   box-shadow:3px 2px rgba(229, 111, 149, 0.5);
   transition:all 0.2s ease 0s;
}

#network:hover, #custom-clock:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

Bluetooth

#bluetooth {
    transition:all 0.2s ease 0s;
}
#bluetooth.on, #bluetooth.off, #bluetooth.disabled {
    color:#ff2800;
    background:linear-gradient(0deg, rgba(234, 84, 10, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    box-shadow:3px 2px rgba(234, 84, 10, 0.5);
    margin-left:0;
    margin-right:4px;
    padding-left:10px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#bluetooth.connected, #bluetooth.connected.pairable {
    color:#93ebb9;
    background:linear-gradient(0deg, rgba(145, 208, 129, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:10px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(145, 208, 129, 0.5);
}

#bluetooth.pairable:not(.connected), #bluetooth.discoverable {
    color:#64cdfa;
    background:linear-gradient(0deg, rgba(93, 135, 229, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(93, 135, 229, 0.4);
}

#bluetooth.discovering {
    color:#fdcb46;
    background:linear-gradient(0deg, rgba(227, 175, 103, 0.5), rgba(0, 0, 0, 0.2));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:4px;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:3px 2px rgba(227, 175, 103, 0.5);
}

#bluetooth.discovering:hover, #bluetooth.connected:hover, #bluetooth.discoverable:hover, #bluetooth.pairable:hover, #bluetooth.off:hover {
    color:#efefef;
    background:linear-gradient(0deg, rgba(150, 150, 150, 0.5), rgba(0, 0, 0, 0.2));
    text-shadow:2px 2px rgba(150, 150, 150, 0.5);
    box-shadow:3px 2px rgba(140, 140, 140, 0.5);
}

#battery {
    border-radius:0px 38px 38px 0px;
    box-shadow:3px 2px rgba(93, 135, 229, 0.4);
}

Author: Tanner Babcock

Created: 2025-06-25 Wed 19:51