tvl-depot/users/tazjin/dotfiles/waybar/style.css

* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: FontAwesome, MS Sans Serif;
    font-size: 14px;
}

window#waybar {
    background-color: #c0c0c0;
    border-top: 0.1875em solid #dfdfdf;
    color: #000000;
    transition-property: background-color;
    transition-duration: .5s;
}

window#waybar.hidden {
    opacity: 0.2;
}

window#waybar.termite {
    background-color: #3F3F3F;
}

window#waybar.chromium {
    background-color: #000000;
    border: none;
}

button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -0.1875em transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
    box-shadow: inset 0 -0.1875em #ffffff;
}

#mode {
    background-color: #64727D;
    box-shadow: inset 0 -0.1875em #ffffff;
}

#clock,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#scratchpad,
#power-profiles-daemon,
#mpd {
    padding: 0 0.3125em;
    padding-top: 0em;
    padding-bottom: 0em;
    /* color: #ffffff; */
}

#window,
#workspaces {
    margin: 0 0.25em;
}

/* faithful-ish recreation of the old Windows start button ... */
#custom-start {
    /* general positioning to keep the spacing approximately correct */
    color: @button_text_color;
    font-weight: bold;
    margin: 0.2em;
    margin-top: 0.35em;
    padding: 0.2em;
    padding-left: 1.25em;

    /* raised button look, as per the Chicago95 GTK button style */
    border: 0.1em solid;
    border-radius: 0em;
    color: @button_text_color;
    outline-color: @outline_color;
    border-top-color: @border_bright;
    border-right-color: @border_dark;
    border-left-color: @border_bright;
    border-bottom-color: @border_dark;
    background-color: @button_bg_color;
    box-shadow: inset -0.1em -0.1em @border_shade, inset 0.1em 0.1em @border_light;

    /* the actual image! */
    background-image: url("${CHICAGO95}/share/icons/Chicago95/categories/scalable/xfdesktop-menu.svg");
    background-position: 0.15em center;
    background-repeat: no-repeat;
    background-size: 1.4em;
}

.modules-right {
    margin: 0.2em;
    margin-top: 0.35em;
}

#clock {
    border-top: 0.1em solid gray;
    border-left: 0.1em solid gray;
    border-right: 0.1em solid white;
    border-bottom: 0.1em solid white;
}

/* base setup for classes that have a Chicago95 icon as the display */
#battery, #pulseaudio, #backlight {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    min-width: 24px;
    color: transparent; /* because the tooltips are still desirable */
}

#backlight {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/xfpm-brightness-lcd.png");
    font-size: 0px;
}

/* battery levels matching Chicago95 icons */

#battery.charging.critical {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000-charging.png");
}

#battery.charging.warning {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020-charging.png");
}

#battery.charging.low {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040-charging.png");
}

#battery.charging.medium {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060-charging.png");
}

#battery.charging.good {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080-charging.png");
}

#battery.charging.full {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100-charging.png");
}

#battery.critical {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000.png");
}

#battery.warning {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020.png");
}

#battery.low {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040.png");
}

#battery.medium {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060.png");
}

#battery.good {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080.png");
}

#battery.full {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100.png");
}

/* volume levels matching Chicago95 icons */

#pulseaudio.muted {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-muted.png");
}

#pulseaudio.low {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-low.png");
}

#pulseaudio.medium {
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-medium.png");
}

#pulseaudio { /* default, if no lower volume state is set */
    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-high.png");
}

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

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

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #e35f5f;
}

#idle_inhibitor {
    background-color: #2d3436;
}

#idle_inhibitor.activated {
    background-color: #ecf0f1;
    color: #2d3436;
}

#taskbar {
    color: @button_text_color;
    margin: 0.2em;
    margin-top: 0.35em;
}

#taskbar button {
    padding: 0.2em;
    margin-right: 0.3em;
    border: 0.1em solid;
    border-radius: 0em;
    color: @button_text_color;
    outline-color: @outline_color;
    border-top-color: @border_bright;
    border-right-color: @border_dark;
    border-left-color: @border_bright;
    border-bottom-color: @border_dark;
    background-color: @button_bg_color;
    box-shadow: inset -0.1em -0.1em @border_shade, inset 0.1em 0.1em @border_light;
}

#taskbar button.active {
    border-top-color: @border_dark;
    border-right-color: @border_bright;
    border-left-color: @border_dark;
    border-bottom-color: @border_bright;
    box-shadow: inset 1px 1px @border_shade;
}