neodotfiles/.config/waybar/style.css

/* Styles */

/* Colors (catppuccin-mocha) */
@define-color white     #cdd6f4;
@define-color black     #1e1e2e;
@define-color red       #e78284;
@define-color green     #a6d189;
@define-color yellow    #e5c890;
@define-color orange    #ef9f76;
@define-color blue      #8caaee;
@define-color purple    #ca9ee6;
@define-color aqua      #81c8be;
@define-color gray      #313244;
/* Brigher variants */
@define-color brred     #f38ba8;
@define-color brgreen   #a6e3a1;
@define-color brpurple  #cba6f7;
@define-color brorange  #fab387;
@define-color brgray    #45475a;
@define-color brblue    #89b4fa;
@define-color braqua    #94e2d5;
@define-color bryellow  #f9e2af;

/* Color definitions for modules */
@define-color critical              @brred;
@define-color unfocused             @braqua;
@define-color focused               @brblue;
@define-color inactive              @gray;
@define-color idle                  @green;
@define-color backlight             @yellow;
@define-color pulseaudio            @blue;
@define-color powerprofile          @green;
@define-color network               @red;
@define-color language              @purple;
@define-color battery               @green;
@define-color clock                 @aqua;
@define-color wbackground           rgba(30, 30, 46, 0.90);

/* 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: 14px;
}

/* 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;
}

#window {
    color: @white;
    border-radius: 30px;
    background-color: @brgray;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

window#waybar.empty #window {
    background-color: @wbackground;
}

/* All modules */
#clock,
#power-profiles-daemon,
#battery,
#backlight,
#network,
#pulseaudio,
#idle_inhibitor,
#language {
    color: @brgray;
    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: 25pt;
}

/* 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;
}