Waybar Style

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

Table of Contents   toc

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:23px;
    background:transparent;
    color:#fedd83;
}

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);
}

#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:10px;
    border-radius:40px 0px 0px 40px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

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

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));
}

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);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(0deg, rgba(120, 120, 120, 0.5), rgba(0, 0, 0, 0.4));
    padding-left:17px;
    padding-right:17px;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#dfdfdf;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
    box-shadow:2px 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.4));
    text-shadow:inherit;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    text-shadow:3px 3px rgba(154, 208, 2, 0.6);
    box-shadow:2px 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.4));
    color:#efefef;
    box-shadow:2px 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.4));
    color:#fff293;
}

Keyboard State

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

#keyboard-state label {
    color:#f4df23;
    text-shadow:2px 2px rgba(0, 0, 0, 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);
}

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

#battery {
    border-radius:0px 40px 40px 0px;
    padding-left:10px;
    padding-right:12px;
    margin-left:0;
    margin-right:2px;
    box-shadow:3px 3px 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 3px 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:3px;
    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:#fe0219;
    background:linear-gradient(0deg, rgba(238, 0, 10, 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.7);
}

#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:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#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:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#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:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

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 3px rgba(175, 56, 219, 0.4);
}

River Waybar Style

All

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#fdeadb;
}

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

Title

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

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 {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(196, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    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:#f28735;
    background:linear-gradient(180deg, rgba(226, 119, 53, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:2px;
    margin-right:0;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#backlight {
    border-radius:0px 40px 40px 0px;
    margin-right:2px;
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    padding-left:16px;
    padding-right:17px;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fc3c35;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
    box-shadow:inherit;
    text-shadow:inherit;
    margin-left:1px;
    margin-right:1px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(247, 78, 139, 0.5);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(21, 176, 130, 0.7);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(112, 202, 68, 0.6), rgba(0, 0, 0, 0.1));
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}

Clock

#custom-clock {
    color:#d8a89a;
    background:linear-gradient(180deg, rgba(200, 152, 138, 0.7), rgba(0, 0, 0, 0.1));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:2px;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Network

#network {
   color:#f74e8b;
   background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:2px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Bluetooth

#bluetooth.off {
    padding-left:9px;
    padding-right:9px;
    margin-left:0;
    margin-right:0;
}

#bluetooth.on {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(186, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    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:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    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:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    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:#f9c65b;
    background:linear-gradient(0deg, rgba(233, 182, 75, 0.6), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Wayfire Waybar Style

All

 * {
    font-family:"SpaceMono Nerd Font";
    font-size:21px;
    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:"SpaceMono Nerd Font";
    font-size:21px;
    background:transparent;
    color:#fdeadb;
}

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

Title

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

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 {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(196, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    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:#f28735;
    background:linear-gradient(180deg, rgba(226, 119, 53, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:2px;
    margin-right:0;
    border-radius:40px 0px 0px 40px;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Memory/Backlight

#memory, #backlight, #wireplumber {
    color:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:10px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#backlight {
    border-radius:0px 40px 40px 0px;
    margin-right:2px;
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    padding-left:17px;
    padding-right:17px;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#fc3c35;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
    box-shadow:2px 2px rgba(0, 0, 0, 0.5);
    outline:0;
}

#workspaces button * {
    outline:0;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
    text-shadow:inherit;
    margin-left:1px;
    margin-right:2px;
    border-radius:40px 40px 40px 40px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(247, 78, 139, 0.5);
    box-shadow:2px 2px rgba(247, 78, 139, 0.4);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    box-shadow:2px 2px rgba(21, 176, 130, 0.5);
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(21, 176, 130, 0.7);
}

#tags button.occupied {
    background:linear-gradient(0deg, rgba(112, 202, 68, 0.6), rgba(0, 0, 0, 0.1));
}

Battery

#battery, #idle_inhibitor, #pulseaudio.bluetooth, #temperature {
    color:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#idle_inhibitor, #pulseaudio.bluetooth {
    border-radius:40px 0px 0px 40px;
    margin-left:2px;
}

Clock

#custom-clock {
    color:#d8a89a;
    background:linear-gradient(180deg, rgba(200, 152, 138, 0.7), rgba(0, 0, 0, 0.1));
    border-radius:0px 40px 40px 0px;
    margin-left:0;
    margin-right:2px;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Network

#network {
   color:#f74e8b;
   background:linear-gradient(180deg, rgba(231, 61, 123, 0.7), rgba(0, 0, 0, 0.1));
   border-radius:0px 40px 40px 0px;
   margin-left:0;
   margin-right:2px;
   padding-left:11px;
   padding-right:11px;
   text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Bluetooth

#bluetooth.on, #bluetooth.off, #bluetooth.disabled {
    color:#d0484e;
    background:linear-gradient(180deg, rgba(186, 60, 72, 0.7), rgba(0, 0, 0, 0.1));
    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:#25c192;
    background:linear-gradient(180deg, rgba(21, 176, 130, 0.7), rgba(0, 0, 0, 0.1));
    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:#3996c0;
    background:linear-gradient(180deg, rgba(57, 150, 192, 0.7), rgba(0, 0, 0, 0.1));
    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:#f9c65b;
    background:linear-gradient(180deg, rgba(233, 182, 75, 0.6), rgba(0, 0, 0, 0.1));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Author: Tanner Babcock

Created: 2024-06-05 Wed 19:09