1{{- if eq .theme_variant "light" }}
  2@import "latte.css";
  3{{- else if eq .theme_variant "dark" }}
  4@import "macchiato.css";
  5{{- end }}
  6
  7* {
  8  font-family: "JetBrainsMono NF", "Berkely Mono";
  9  font-size: 13px;
 10}
 11
 12window#waybar {
 13  background-color: @base;
 14  color: @text;
 15  transition-property: background-color;
 16  transition-duration: 0.5s;
 17}
 18
 19window#waybar.hidden {
 20  opacity: 0.2;
 21}
 22
 23button {
 24  /* Use box-shadow instead of border so the text isn't offset */
 25  box-shadow: inset 0 -3px transparent;
 26  border-radius: 0;
 27}
 28
 29#workspaces button {
 30  padding: 0 5px;
 31  background-color: @surface0;
 32  margin: 5px 0;
 33  color: @text;
 34}
 35
 36#workspaces button:hover {
 37  background: shade(@base, 0.8);
 38}
 39
 40#workspaces button.active {
 41  background-color: @overlay0;
 42}
 43
 44#workspaces button.urgent {
 45  background-color: @red;
 46  color: @base;
 47}
 48
 49#workspaces button:first-child {
 50  border-radius: 12px 0 0 12px;
 51}
 52
 53#workspaces button:last-child {
 54  border-radius: 0 12px 12px 0;
 55}
 56
 57#clock,
 58#battery,
 59#cpu,
 60#memory,
 61#disk,
 62#temperature,
 63#backlight,
 64#network,
 65#pulseaudio,
 66#wireplumber,
 67#custom-media,
 68#tray,
 69#mode,
 70#idle_inhibitor,
 71#scratchpad,
 72#mpd {
 73  border-radius: 12px;
 74  padding: 3px 13px 3px 8px;
 75  margin: 5px 0;
 76  color: @text;
 77  background-color: @surface0;
 78}
 79
 80#window,
 81#workspaces {
 82  margin: 0 4px;
 83}
 84
 85@keyframes blink {
 86  to {
 87    background-color: @base;
 88  }
 89}
 90
 91#battery.critical:not(.charging) {
 92  background-color: @red;
 93  color: @base;
 94  animation-name: blink;
 95  animation-duration: 0.5s;
 96  animation-timing-function: linear;
 97  animation-iteration-count: infinite;
 98  animation-direction: alternate;
 99}
100
101#network.disconnected {
102  background-color: @red;
103  color: @base;
104}
105
106#temperature.critical {
107  background-color: @red;
108  color: @base;
109}
110
111#tray {
112  padding-right: 9px;
113}
114
115#tray > .passive {
116  -gtk-icon-effect: dim;
117}
118
119#tray > .needs-attention {
120  -gtk-icon-effect: highlight;
121  background-color: @red;
122  color: @base;
123}
124
125#idle_inhibitor.activated {
126  background-color: @pink;
127  color: @base;
128}