neodotfiles/.config/waybar/style.css

/* Styles */

/* Colors (gruvbox) */
@define-color black     #1d2021;
@define-color red       #cc241d;
@define-color green     #98971a;
@define-color yellow    #d79921;
@define-color orange    #fe8019;
@define-color blue      #458588;
@define-color purple    #b16286;
@define-color aqua      #689d6a;
@define-color gray      #a89984;
/* Brighter variants */
@define-color brgray    #928374;
@define-color brred     #fb4934;
@define-color brgreen   #b8bb26;
@define-color bryellow  #fabd2f;
@define-color brblue    #83a598;
@define-color brpurple  #d3869b;
@define-color braqua    #8ec07c;
@define-color white     #ebdbb2;
@define-color bg2       #504945;
/* Darker variants */
@define-color drred     #9d0006;
@define-color drgreen   #79740e;
@define-color drpurple  #8f3f71;
@define-color drorange  #af3a03;
@define-color drgray    #3c3836;
@define-color drblue    #076678;
@define-color draqua    #427b58;
@define-color dryellow  #b57614;

/* Color definitions for modules */
@define-color critical              @brred;
@define-color unfocused             @braqua;
@define-color focused               @brred;
@define-color inactive              @drgray;
@define-color idle                  @drgreen;
@define-color backlight             @dryellow;
@define-color pulseaudio            @drblue;
@define-color powerprofile          @drgreen;
@define-color network               @drred;
@define-color language              @drpurple;
@define-color battery               @drgreen;
@define-color clock                 @draqua;
@define-color wbackground           rgba(29, 32, 33, 0.95);

/* Keyframes */
@keyframes blink {
    to {
        color: @critical;
    }
}

/* Reset all styles */
* {
	border: none;
	border-radius: 0;
	min-height: 0;
	padding: 0;
	box-shadow: none;
	text-shadow: none;
}

button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
}

/* The whole bar */
window#waybar {
    background-color: @wbackground;
    font-family: Symbols Nerd Font Mono, Mononoki Nerd Font;
    font-size: 16px;
}

/* Workspaces */

#workspaces button {
    border-top: 2px solid @inactive;
    padding: 0 8px;
    color: @white;
}

#workspaces button.active {
    background-color: @inactive;
    border-top: 2px solid @focused;
    color: @focused;
    transition-property: color;
    transition-duration: .5s;
}

#workspaces button:hover {
    color: @unfocused;
    transition-property: color;
    transition-duration: .5s;
}

#workspaces button.urgent {
    background-color: @inactive;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

/* All modules */
#clock,
#power-profiles-daemon,
#battery,
#backlight,
#network,
#pulseaudio,
#idle_inhibitor,
#language {
    padding-right: 1px;
    padding-left: 4px;
}

/* Individual modules */

#battery, #battery.charging, #battery.plugged {
    background-color: @battery;
}

#battery.critical:not(.charging) {
    color: @white;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

label:focus {
    background-color: @white;
}

#backlight {
    background-color: @backlight;
}

#network, #network.disconnected {
    background-color: @network;
}

#pulseaudio, #pulseaudio.muted {
    background-color: @pulseaudio;
}

#language {
    background-color: @language;
}

#power-profiles-daemon {
    background-color: @powerprofile;
}

#clock {
    background-color: @clock;
    padding-right: 10px;
}

#idle_inhibitor {
    background-color: @battery;
}

/* All Modeline arrows */
#custom-arrow1,
#custom-arrow2,
#custom-arrow3,
#custom-arrow4,
#custom-arrow5,
#custom-arrow6 {
	font-size: 20pt;
}

/* Individual Modeline arrows */

#custom-arrow1 {
	background: transparent;
	color: @language;
}

#custom-arrow2 {
	background: @language;
	color: @pulseaudio;
}

#custom-arrow3 {
	background: @pulseaudio;
	color: @backlight;
}

#custom-arrow4 {
	background: @backlight;
	color: @battery;
}

#custom-arrow5 {
	background: @battery;
	color: @network;
}

#custom-arrow6 {
	background: @network;
	color: @clock;
}