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 three CSS files match the rices for Sway, River, and LabWC.

All

Notice the space before the asterisk. 

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

Window

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

MPD

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

CPU

#cpu {
    color:#fc3c35;
    background:linear-gradient(180deg, rgba(208, 56, 68, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Pulseaudio/Disk

#pulseaudio, #disk {
    color:#dedc91;
    background:linear-gradient(180deg, rgba(222, 220, 145, 0.7), 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.6);
}

Memory/Backlight

#memory, #backlight {
    color:#40a789;
    background:linear-gradient(180deg, rgba(58, 161, 131, 0.7), 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.6);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(120, 120, 120, 0.7), rgba(0, 0, 0, 0.5));
    padding-left:17px;
    padding-right:17px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#dfdfdf;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

#workspaces button * {
    background:none;
}

#workspaces button:hover, #tags button:hover {
    background:linear-gradient(180deg, rgba(171, 43, 27, 0.7), rgba(0, 0, 0, 0.5));
    box-shadow:inherit;
    text-shadow:inherit;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#b93b2b;
    text-shadow:3px 3px rgba(171, 43, 27, 0.6);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied {
    background:linear-gradient(180deg, rgba(97, 185, 167, 0.7), rgba(0, 0, 0, 0.5));
    color:#81d8c6;
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover {
    text-shadow:3px 3px rgba(107, 195, 177, 0.6);
}

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

Battery

#battery {
    color:#61b8a6;
    background:linear-gradient(180deg, rgba(107, 194, 176, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:12px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

Clock/Network

#custom-clock, #network {
    color:#c26cd5;
    background:linear-gradient(180deg, rgba(176, 105, 152, 0.7), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:10px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.6);
}

River Waybar Style

All

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

Title

#title, #window {
    color:#efefef;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

MPD

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

CPU

#cpu {
    color:#e93479;
    background:linear-gradient(180deg, rgba(215, 36, 99, 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:#f9c65b;
    background:linear-gradient(180deg, rgba(233, 182, 75, 0.6), 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);
}

Memory/Backlight

#memory, #backlight {
    color:#81db54;
    background:linear-gradient(180deg, rgba(112, 202, 68, 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);
}

Workspaces

#workspaces button, #tags button {
    background:linear-gradient(180deg, rgba(65, 88, 221, 0.7), rgba(0, 0, 0, 0.3));
    padding-left:16px;
    padding-right:16px;
    border-radius:0px 0px 0px 0px;
    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(112, 202, 68, 0.7), rgba(0, 0, 0, 0.3));
    box-shadow:inherit;
    text-shadow:inherit;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#bcbcbc;
    text-shadow:3px 3px rgba(112, 202, 68, 0.5);
}

#workspaces button.focused, #tags button.focused, #tags button.focused.occupied, #workspaces button.active {
    background:linear-gradient(180deg, rgba(215, 36, 99, 0.7), rgba(0, 0, 0, 0.3));
}

#workspaces button.focused:hover, #tags button.focused:hover, #tags button.focused.occupied:hover, #workspaces button.active:hover {
    text-shadow:3px 3px rgba(215, 36, 99, 0.7);
}

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

Battery

#battery, #idle_inhibitor {
    color:#587aff;
    background:linear-gradient(180deg, rgba(65, 88, 221, 0.7), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Clock/Network

#custom-clock, #network {
    color:#d48eb6;
    background:linear-gradient(180deg, rgba(140, 121, 224, 0.7), rgba(0, 0, 0, 0.3));
    margin-left:0;
    margin-right:0;
    padding-left:13px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

LabWC Waybar Style

All

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

CPU

#cpu {
    color:#dd6359;
    background:linear-gradient(180deg, rgba(205, 83, 73, 0.9), 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:#efef20;
    background:linear-gradient(180deg, rgba(223, 221, 16, 0.9), 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);
}

Memory/Backlight

#memory, #backlight {
    color:#00dd30;
    background:linear-gradient(180deg, rgba(0, 204, 32, 0.9), 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 {
    color:#39a5eb;
    background:linear-gradient(180deg, rgba(41, 149, 219, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:11px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

Taskbar

#taskbar button {
    background:linear-gradient(180deg, rgba(183, 97, 120, 0.9), rgba(0, 0, 0, 0.5));
    padding-left:10px;
    padding-right:9px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#c77188;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}
#taskbar button:hover {
    padding-left:10px;
    padding-right:9px;
    border-radius:0px 0px 0px 0px;
    border:0px solid transparent;
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
    text-shadow:2px 2px rgba(0, 0, 20, 0.7);
}
#taskbar button.maximized {
    color:#00dd30;
    background:linear-gradient(180deg, rgba(0, 204, 32, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.minimized {
    color:#efef20;
    background:linear-gradient(180deg, rgba(223, 221, 16, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.active {
    color:#c98e86;
    background:linear-gradient(180deg, rgba(189, 127, 116, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.maximized:hover {
    color:#c77188;
    background:linear-gradient(180deg, rgba(184, 97, 120, 0.9), rgba(0, 0, 0, 0.5));
}
#taskbar button.active:hover, #taskbar button.minimized:hover {
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
}

Clock/Network

#custom-clock, #clock, #network {
    color:#58a4a1;
    background:linear-gradient(180deg, rgba(72, 147, 144, 0.9), rgba(0, 0, 0, 0.5));
    margin-left:0;
    margin-right:0;
    padding-left:11px;
    padding-right:9px;
    text-shadow:2px 2px rgba(0, 0, 0, 0.7);
}

MPD

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

Author: Tanner Babcock

Created: 2023-03-04 Sat 20:12