master
1* {
2 /* `otf-font-awesome` is required to be installed for icons */
3 font-family: BerkeleyMono, FontAwesome, Roboto, Helvetica, Arial, sans-serif;
4 font-size: 10px;
5}
6
7window#waybar {
8 background-color: #000000;
9 border-bottom: 0px;
10 color: #ffffff;
11 transition-property: background-color;
12 transition-duration: .5s;
13}
14
15window#waybar.hidden {
16 opacity: 0.2;
17}
18
19/*
20window#waybar.empty {
21 background-color: transparent;
22}
23window#waybar.solo {
24 background-color: #FFFFFF;
25}
26*/
27
28window#waybar.termite {
29 background-color: #3F3F3F;
30}
31
32window#waybar.chromium {
33 background-color: #000000;
34 border: none;
35}
36
37button {
38 /* Use box-shadow instead of border so the text isn't offset */
39 box-shadow: inset 0 -3px transparent;
40 /* Avoid rounded borders under each button name */
41 border: none;
42 border-radius: 0;
43}
44
45/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
46button:hover {
47 background: inherit;
48 box-shadow: inset 0 -3px #ffffff;
49}
50
51/* you can set a style on hover for any module like this */
52#pulseaudio:hover {
53 background-color: #a37800;
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.focused {
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 box-shadow: inset 0 -3px #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#power-profiles-daemon,
96#mpd {
97 padding: 0 10px;
98 color: #ffffff;
99}
100
101#window,
102#workspaces {
103 margin: 0 4px;
104}
105
106/* If workspaces is the leftmost module, omit left margin */
107.modules-left > widget:first-child > #workspaces {
108 margin-left: 0;
109}
110
111/* If workspaces is the rightmost module, omit right margin */
112.modules-right > widget:last-child > #workspaces {
113 margin-right: 0;
114}
115
116#clock {
117 background-color: #000000;
118 color: #ffffff;
119}
120
121#battery {
122 background-color: #ffffff;
123 color: #000000;
124}
125
126#battery.charging, #battery.plugged {
127 background-color: #000000;
128 color: #ffffff;
129}
130
131@keyframes blink {
132 to {
133 background-color: #ffffff;
134 color: #000000;
135 }
136}
137
138/* Using steps() instead of linear as a timing function to limit cpu usage */
139#battery.critical:not(.charging) {
140 background-color: #f53c3c;
141 color: #ffffff;
142 animation-name: blink;
143 animation-duration: 0.5s;
144 animation-timing-function: steps(12);
145 animation-iteration-count: infinite;
146 animation-direction: alternate;
147}
148
149#power-profiles-daemon {
150 padding-right: 15px;
151}
152
153#power-profiles-daemon.performance {
154 background-color: #f53c3c;
155 color: #ffffff;
156}
157
158#power-profiles-daemon.balanced {
159 background-color: #2980b9;
160 color: #ffffff;
161}
162
163#power-profiles-daemon.power-saver {
164 background-color: #2ecc71;
165 color: #000000;
166}
167
168label:focus {
169 background-color: #000000;
170}
171
172#cpu {
173 background-color: #000000;
174 color: #ffffff;
175}
176
177#memory {
178 background-color: #000000;
179 color: #ffffff;
180}
181
182#disk {
183 background-color: #964B00;
184}
185
186#backlight {
187 background-color: #000000;
188 color: #ffffff;
189}
190
191#network {
192 background-color: #000000;
193 color: #ffffff;
194}
195
196#network.disconnected {
197 background-color: #f53c3c;
198}
199
200#pulseaudio {
201 background-color: #000000;
202 color: #ffffff;
203}
204
205#pulseaudio.muted {
206 background-color: #90b1b1;
207 color: #2a5c45;
208}
209
210#wireplumber {
211 background-color: #fff0f5;
212 color: #000000;
213}
214
215#wireplumber.muted {
216 background-color: #f53c3c;
217}
218
219#custom-media {
220 background-color: #66cc99;
221 color: #2a5c45;
222 min-width: 100px;
223}
224
225#custom-media.custom-spotify {
226 background-color: #66cc99;
227}
228
229#custom-media.custom-vlc {
230 background-color: #ffa000;
231}
232
233#temperature {
234 background-color: #000000;
235 color: #ffffff;
236}
237
238#temperature.critical {
239 background-color: #eb4d4b;
240}
241
242#tray {
243 background-color: #2980b9;
244}
245
246#tray > .passive {
247 -gtk-icon-effect: dim;
248}
249
250#tray > .needs-attention {
251 -gtk-icon-effect: highlight;
252 background-color: #eb4d4b;
253}
254
255#idle_inhibitor {
256 background-color: #000000;
257 color: #ffffff;
258}
259
260#idle_inhibitor.activated {
261 background-color: #ecf0f1;
262 color: #2d3436;
263}
264
265#mpd {
266 background-color: #66cc99;
267 color: #2a5c45;
268}
269
270#mpd.disconnected {
271 background-color: #f53c3c;
272}
273
274#mpd.stopped {
275 background-color: #90b1b1;
276}
277
278#mpd.paused {
279 background-color: #51a37a;
280}
281
282#language {
283 background: #00b093;
284 color: #740864;
285 padding: 0 5px;
286 margin: 0 5px;
287 min-width: 16px;
288}
289
290#keyboard-state {
291 background: #97e1ad;
292 color: #000000;
293 padding: 0 0px;
294 margin: 0 5px;
295 min-width: 16px;
296}
297
298#keyboard-state > label {
299 padding: 0 5px;
300}
301
302#keyboard-state > label.locked {
303 background: rgba(0, 0, 0, 0.2);
304}
305
306#scratchpad {
307 background: rgba(0, 0, 0, 0.2);
308}
309
310#scratchpad.empty {
311 background-color: transparent;
312}
313
314#privacy {
315 padding: 0;
316}
317
318#privacy-item {
319 padding: 0 5px;
320 color: white;
321}
322
323#privacy-item.screenshare {
324 background-color: #cf5700;
325}
326
327#privacy-item.audio-in {
328 background-color: #1ca000;
329}
330
331#privacy-item.audio-out {
332 background-color: #0069d4;
333}
334