dotfiles/.config/waybar/style.css

/*
use gtk theme variables to define color variables
ex. `@define-color variable_name color_code;`
use as `@variable_name`
shade, mix, and alpha modifiers are available
*/

@define-color foreground #c8d3f5;
@define-color background #222436;
@define-color selection-foreground #c8d3f5;
@define-color selection-background #2d3f76;
@define-color urls #4fd6be;

@define-color regular0 #1b1d2b;
@define-color regular1 #ff757f;
@define-color regular2 #c3e88d;
@define-color regular3 #ffc777;
@define-color regular4 #82aaff;
@define-color regular5 #c099ff;
@define-color regular6 #86e1fc;
@define-color regular7 #828bb8;

@define-color bright0 #444a73;
@define-color bright1 #ff757f;
@define-color bright2 #c3e88d;
@define-color bright3 #ffc777;
@define-color bright4 #82aaff;
@define-color bright5 #c099ff;
@define-color bright6 #86e1fc;
@define-color bright7 #c8d3f5;

@define-color 16 #ff966c;
@define-color 17 #c53b53;

* {
  border: none;
  border-radius: 0;
  font-family: Roboto, "Symbols NFM";
  font-size: 14px;
  min-height: 25px;
}

window#waybar {
  background-color: transparent;
  color: @foreground;
  margin: 5px;
}

tooltip {
  border-radius: 15px;
  background-color: @bright0;
  color: @bright7;
  border: 1px solid @selection-foreground;
}

#custom-logo {
  padding: 0 10px;
}

.modules-right {
  border-radius: 15px 0 0 15px;
  background: @selection-background;
}

.modules-center {
  border-radius: 15px;
  background: @selection-background;
}

.modules-left {
  border-radius: 0 15px 15px 0;
  background: @selection-background;
}

#workspaces,
#window,
#custom-logo,
#disk,
#memory,
#cpu,
#temperature,
#clock,
#tray,
#custom-notification,
#custom-updates,
#backlight,
#bluetooth,
#pulseaudio,
#network,
#idle_inhibitor,
#battery {
  padding: 0 15px;
  border-radius: 15px;
}

#custom-logo {
  color: @urls;
}

#clock {
  background-color: @foreground;
  color: @background;
}

#window {
  background-color: @foreground;
  color: @background;
}

#workspaces button:hover {
  color: @urls;
  background: none;
  border: none;
}

#workspaces button.visible {
  color: @16;
}

#temperature.critical,
#pulseaudio.muted,
#idle_inhibitor.activated,
#workspaces button.urgent {
  color: @17;
}

#battery {
  background-color: @foreground;
  color: @background;
  border-radius: 15px 0 0 15px;
}

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

#battery.warning:not(.charging) {
  background-color: @16;
}

#battery.critical:not(.charging) {
  background-color: @17;
}

#tray {
  background-color: @foreground;
}

#custom-updates.has-updates {
  color: @16;
}