1{{- if eq .theme_variant "dark" -}}
  2@import "macchiato.css";
  3{{- else }}
  4@import "latte.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    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
 15    color: @text;
 16    transition-property: background-color;
 17    transition-duration: .5s;
 18}
 19
 20window#waybar.hidden {
 21    opacity: 0.2;
 22}
 23
 24/*
 25window#waybar.empty {
 26    background-color: transparent;
 27}
 28window#waybar.solo {
 29    background-color: #FFFFFF;
 30}
 31*/
 32
 33window#waybar.termite {
 34    background-color: #3F3F3F;
 35}
 36
 37window#waybar.chromium {
 38    background-color: #000000;
 39    border: none;
 40}
 41
 42button {
 43    /* Use box-shadow instead of border so the text isn't offset */
 44    box-shadow: inset 0 -3px transparent;
 45    /* Avoid rounded borders under each button name */
 46    border: none;
 47    border-radius: 0;
 48}
 49
 50/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 51button:hover {
 52    background: inherit;
 53    box-shadow: inset 0 -3px #ffffff;
 54}
 55
 56#workspaces button {
 57    padding: 0 5px;
 58    background-color: transparent;
 59    color: #ffffff;
 60}
 61
 62#workspaces button:hover {
 63    background: rgba(0, 0, 0, 0.2);
 64}
 65
 66#workspaces button.active {
 67    background-color: #64727D;
 68    box-shadow: inset 0 -3px #ffffff;
 69}
 70
 71#workspaces button.urgent {
 72    background-color: #eb4d4b;
 73}
 74
 75#mode {
 76    background-color: #64727D;
 77    border-bottom: 3px solid #ffffff;
 78}
 79
 80#clock,
 81#battery,
 82#cpu,
 83#memory,
 84#disk,
 85#temperature,
 86#backlight,
 87#network,
 88#pulseaudio,
 89#wireplumber,
 90#custom-media,
 91#tray,
 92#mode,
 93#idle_inhibitor,
 94#scratchpad,
 95#mpd {
 96    padding: 0 10px;
 97    color: #ffffff;
 98}
 99
100#window,
101#workspaces {
102    margin: 0 4px;
103}
104
105/* If workspaces is the leftmost module, omit left margin */
106.modules-left > widget:first-child > #workspaces {
107    margin-left: 0;
108}
109
110/* If workspaces is the rightmost module, omit right margin */
111.modules-right > widget:last-child > #workspaces {
112    margin-right: 0;
113}
114
115#clock {
116    background-color: #64727D;
117}
118
119#battery {
120    background-color: #ffffff;
121    color: #000000;
122}
123
124#battery.charging, #battery.plugged {
125    color: #ffffff;
126    background-color: #26A65B;
127}
128
129@keyframes blink {
130    to {
131        background-color: #ffffff;
132        color: #000000;
133    }
134}
135
136#battery.critical:not(.charging) {
137    background-color: #f53c3c;
138    color: #ffffff;
139    animation-name: blink;
140    animation-duration: 0.5s;
141    animation-timing-function: linear;
142    animation-iteration-count: infinite;
143    animation-direction: alternate;
144}
145
146label:focus {
147    background-color: #000000;
148}
149
150#cpu {
151    background-color: #2ecc71;
152    color: #000000;
153}
154
155#memory {
156    background-color: #9b59b6;
157}
158
159#disk {
160    background-color: #964B00;
161}
162
163#backlight {
164    background-color: #90b1b1;
165}
166
167#network {
168    background-color: #2980b9;
169}
170
171#network.disconnected {
172    background-color: #f53c3c;
173}
174
175#pulseaudio {
176    background-color: #f1c40f;
177    color: #000000;
178}
179
180#pulseaudio.muted {
181    background-color: #90b1b1;
182    color: #2a5c45;
183}
184
185#wireplumber {
186    background-color: #fff0f5;
187    color: #000000;
188}
189
190#wireplumber.muted {
191    background-color: #f53c3c;
192}
193
194#custom-media {
195    background-color: #66cc99;
196    color: #2a5c45;
197    min-width: 100px;
198}
199
200#custom-media.custom-spotify {
201    background-color: #66cc99;
202}
203
204#custom-media.custom-vlc {
205    background-color: #ffa000;
206}
207
208#temperature {
209    background-color: #f0932b;
210}
211
212#temperature.critical {
213    background-color: #eb4d4b;
214}
215
216#tray {
217    background-color: #2980b9;
218}
219
220#tray > .passive {
221    -gtk-icon-effect: dim;
222}
223
224#tray > .needs-attention {
225    -gtk-icon-effect: highlight;
226    background-color: #eb4d4b;
227}
228
229#idle_inhibitor {
230    background-color: #2d3436;
231}
232
233#idle_inhibitor.activated {
234    background-color: #ecf0f1;
235    color: #2d3436;
236}
237
238#mpd {
239    background-color: #66cc99;
240    color: #2a5c45;
241}
242
243#mpd.disconnected {
244    background-color: #f53c3c;
245}
246
247#mpd.stopped {
248    background-color: #90b1b1;
249}
250
251#mpd.paused {
252    background-color: #51a37a;
253}
254
255#language {
256    background: #00b093;
257    color: #740864;
258    padding: 0 5px;
259    margin: 0 5px;
260    min-width: 16px;
261}
262
263#keyboard-state {
264    background: #97e1ad;
265    color: #000000;
266    padding: 0 0px;
267    margin: 0 5px;
268    min-width: 16px;
269}
270
271#keyboard-state > label {
272    padding: 0 5px;
273}
274
275#keyboard-state > label.locked {
276    background: rgba(0, 0, 0, 0.2);
277}
278
279#scratchpad {
280    background: rgba(0, 0, 0, 0.2);
281}
282
283#scratchpad.empty {
284	background-color: transparent;
285}