.dotfiles/waybar/style.css

@import "gruvbox.css";
/*
 * Available colours
 * black
 * white
 * fg
 * fghi
 * bg
 * bghi
 * grey00 = bghi
 * grey01 = bg
 * grey02
 * grey03
 * grey04
 * grey05
 * grey06
 * grey07
 * grey08
 * grey09
 * grey10 = fg
 * grey11 = fghi
 * red
 * green
 * yellow
 * blue
 * purple
 * orange
 * aqua
 * redhi
 * greenhi
 * yellowhi
 * bluehi
 * purple hi
 * aquahi
 * orangehi
 * alert = orange
 * warning = orangehi
 */

/* Global/Multi */

* {
    font-family: "Anonymous Pro", "Font Awesome 5 Brands", "Font Awesome 5 Free", Monospace;
    font-size: 20px;
    min-height: 0;
}

window#waybar.window {
    font-size: 20px;
}

window#waybar {
    margin: -5px;
    border-radius: 30px;
    border: solid 2px @fg;
    font-size: 20px;
    background-color: @bg;
    animation-name: fadeIn;
    animation-duration: 1s;
    color: @fg;
}

#window, #workspaces, #mode, #mpd, #network, #cpu, #memory, #custom-disk, #temperature, #backlight, #custom-battery, #pulseaudio, #custom-clock, #tray, #custom-todo, #custom-osk, #idle_inhibitor, #custom-power, #custom-weather {
    color: @grey06;
    padding: 0 3px;
    margin: 0px;
}

/* Tray */

#tray, #custom-todo, #custom-osk, #custom-pkg, #custom-bar, #custom-gammastep, #idle_inhibitor, #custom-clock, #custom-power {
    color: @bluehi;
}

#mode, #mpd, #network, #cpu, #memory, #custom-disk, #temperature, #backlight, #custom-battery, #custom-clock, #tray, #custom-todo, #custom-osk, #idle_inhibitor {
    border-top: solid 2px @fg;
    border-bottom: solid 2px @fg;
}

#window {
    padding: 5px;
}

/* Workspaces */

#workspaces {
    color: @fg;
    padding: 0px 0px;
    margin: 0px;
    margin-left: 15px;
    border-radius: 0px;
}

#workspaces button.visible {
    background-color: @grey06;
}

#workspaces button.focused {
    background-color: @fg;
    color: @grey06;
}

#workspaces button.urgent {
    background-color: @redhi;
    color: @white;
}

/* Mode */

#mode {
    background-color: @grey06;
    color: @bg;
}

/* Window title */

#window {
    color: @fg;
}

/* MPD */

#mpd {
    color: @bg;
}

/* Networks */

#network {
    color: @blue;
    font-size: 24px;
    margin-right: -4px;
}

#network.wireguard {
    padding: 0px;
    margin-right: 4px;
}

#network.disconnected {
    color: @red;
}

#network.wifi {
}

/* CPU */

#cpu {
    color: @fg;
    color: @greenhi;
}

/* Memory */

#memory {
    color: @fg;
    color: @purplehi;
}

/* Disk */

#custom-disk {
    color: @fg;
    color: @purple;
}

/* Temperature */

#temperature {
    color: @fg;
    color: @yellowhi;
}

#temperature.critical {
    color: @redhi;
}

/* Backlight */

#backlight {
    color: @fg;
    color: @greenhi;
}

/* Battery */

#custom-battery {
    color: @green;
}

#custom-battery.charging {
    color: @green;
}

#custom-battery.discharging {
    color: @yellow;
}

#custom-battery.low {
    color: @orange;
}

#custom-battery.critical {
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: @redhi;
}

/* Pulseaudio */

#pulseaudio {
    color: @bluehi;
}

#pulseaudio.muted {
    color: @grey06;
}

/* Tray */

#tray {
        margin-right: 3px;
}

/* Todo-txt */

#custom-todo {
    font-size: 40px;
    margin-top: -13px;
    margin-bottom: -9px;
    margin-left: -8px;
    margin-right: -6px;
}

/* On-Screen Keyboard */

#custom-osk {
    font-size: 40px;
    margin-top: -13px;
    margin-bottom: -15px;
}

#custom-osk.activated {
    /* background-color: @fg; */
    color: @white;
}

/* Package upgrades */

#custom-pkg {
    margin-bottom: -3px;
}

#custom-pkg.updateable {
        color: @orange;
}

/* Bar locker */

#custom-bar {
    padding: 3px;
    margin-top: -10px;
}

/* Gammastep */

#custom-gammastep {
    margin-top: -5px;
}

#custom-gammastep.enabled {
        color: #fefefe;
}

/* Idle Inhibitor */

#idle_inhibitor.activated {
    /* background-color: @fg; */
    color: @white;
}

/* Clock */

#custom-clock {
    color: @fg;
}

/* Power button */

#custom-power {
    margin-right: 8px;
    margin-top: 8px;
    color: @red;
}