diff options
author | Yigit Sever | 2024-08-30 11:06:35 +0200 |
---|---|---|
committer | Yigit Sever | 2024-08-30 11:06:35 +0200 |
commit | a5c23dbc5f6ef2902fb115bbbc5ea5c46ede43c4 (patch) | |
tree | 8298bf1d46c47f67e68d6bcac541db704049712d /.config/waybar/style.css | |
parent | c2c54ed574d00d96a772e096abdfa2da3b60fdd6 (diff) | |
download | dotfiles-a5c23dbc5f6ef2902fb115bbbc5ea5c46ede43c4.tar.gz dotfiles-a5c23dbc5f6ef2902fb115bbbc5ea5c46ede43c4.tar.bz2 dotfiles-a5c23dbc5f6ef2902fb115bbbc5ea5c46ede43c4.zip |
waybar: start tracking
Diffstat (limited to '.config/waybar/style.css')
-rw-r--r-- | .config/waybar/style.css | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..7db875f --- /dev/null +++ b/.config/waybar/style.css | |||
@@ -0,0 +1,293 @@ | |||
1 | @import "latte.css"; | ||
2 | |||
3 | * { | ||
4 | border: none; | ||
5 | border-radius: 0; | ||
6 | font-family: FontAwesome, scientifica; | ||
7 | font-size: 14px; | ||
8 | min-height: 0; | ||
9 | box-shadow: none; | ||
10 | text-shadow: none; | ||
11 | transition-duration: 0s; | ||
12 | color: @text; | ||
13 | } | ||
14 | |||
15 | window#waybar { | ||
16 | background-color: @base; | ||
17 | } | ||
18 | |||
19 | window#waybar.hidden { | ||
20 | opacity: 0.2; | ||
21 | } | ||
22 | |||
23 | button { | ||
24 | /* Use box-shadow instead of border so the text isn't offset */ | ||
25 | box-shadow: inset 0 -3px transparent; | ||
26 | /* Avoid rounded borders under each button name */ | ||
27 | border: none; | ||
28 | border-radius: 0; | ||
29 | } | ||
30 | |||
31 | /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ | ||
32 | button:hover { | ||
33 | background: inherit; | ||
34 | box-shadow: inset 0 -3px @overlay0; | ||
35 | } | ||
36 | |||
37 | #workspaces button { | ||
38 | padding: 0 5px; | ||
39 | background-color: transparent; | ||
40 | } | ||
41 | |||
42 | #workspaces button:hover { | ||
43 | background: rgba(0, 0, 0, 0.2); | ||
44 | } | ||
45 | |||
46 | #workspaces button.focused { | ||
47 | background-color: @blue; | ||
48 | box-shadow: inset 0 -3px #ffffff; | ||
49 | } | ||
50 | |||
51 | #workspaces button.urgent { | ||
52 | background-color: #d20f39; | ||
53 | } | ||
54 | |||
55 | #workspaces button.active { | ||
56 | background-color: #a6e3a1; | ||
57 | } | ||
58 | |||
59 | #mode { | ||
60 | background-color: #64727D; | ||
61 | box-shadow: inset 0 -3px #ffffff; | ||
62 | } | ||
63 | |||
64 | #clock, | ||
65 | #battery, | ||
66 | #cpu, | ||
67 | #memory, | ||
68 | #disk, | ||
69 | #temperature, | ||
70 | #backlight, | ||
71 | #network, | ||
72 | #pulseaudio, | ||
73 | #wireplumber, | ||
74 | #custom-media, | ||
75 | #tray, | ||
76 | #mode, | ||
77 | #idle_inhibitor, | ||
78 | #scratchpad, | ||
79 | #mpris, | ||
80 | #mpd { | ||
81 | padding: 0 10px; | ||
82 | } | ||
83 | |||
84 | #window, | ||
85 | #workspaces { | ||
86 | margin: 0 4px; | ||
87 | } | ||
88 | |||
89 | /* If workspaces is the leftmost module, omit left margin */ | ||
90 | .modules-left > widget:first-child > #workspaces { | ||
91 | margin-left: 0; | ||
92 | } | ||
93 | |||
94 | /* If workspaces is the rightmost module, omit right margin */ | ||
95 | .modules-right > widget:last-child > #workspaces { | ||
96 | margin-right: 0; | ||
97 | } | ||
98 | |||
99 | tooltip * { | ||
100 | background: transparent; | ||
101 | } | ||
102 | |||
103 | tooltip.background { | ||
104 | background: @crust; | ||
105 | |||
106 | } | ||
107 | |||
108 | #battery { | ||
109 | background-color: #ffffff; | ||
110 | } | ||
111 | |||
112 | #battery.charging, #battery.plugged { | ||
113 | background-color: #26A65B; | ||
114 | } | ||
115 | |||
116 | @keyframes blink { | ||
117 | to { | ||
118 | background-color: #ffffff; | ||
119 | color: #000000; | ||
120 | } | ||
121 | } | ||
122 | |||
123 | /* Using steps() instead of linear as a timing function to limit cpu usage */ | ||
124 | #battery.critical:not(.charging) { | ||
125 | background-color: #f53c3c; | ||
126 | color: #ffffff; | ||
127 | animation-name: blink; | ||
128 | animation-duration: 0.5s; | ||
129 | animation-timing-function: steps(12); | ||
130 | animation-iteration-count: infinite; | ||
131 | animation-direction: alternate; | ||
132 | } | ||
133 | |||
134 | label:focus { | ||
135 | background-color: #000000; | ||
136 | } | ||
137 | |||
138 | #cpu { | ||
139 | background-color: #2ecc71; | ||
140 | } | ||
141 | |||
142 | #memory { | ||
143 | background-color: #9b59b6; | ||
144 | } | ||
145 | |||
146 | #disk { | ||
147 | background-color: #964B00; | ||
148 | } | ||
149 | |||
150 | #backlight { | ||
151 | background-color: #90b1b1; | ||
152 | } | ||
153 | |||
154 | #network { | ||
155 | background-color: #2980b9; | ||
156 | } | ||
157 | |||
158 | #network.disconnected { | ||
159 | background-color: #f53c3c; | ||
160 | } | ||
161 | |||
162 | #pulseaudio { | ||
163 | background-color: #f1c40f; | ||
164 | } | ||
165 | |||
166 | #pulseaudio.muted { | ||
167 | background-color: #90b1b1; | ||
168 | } | ||
169 | |||
170 | #wireplumber { | ||
171 | background-color: #fff0f5; | ||
172 | } | ||
173 | |||
174 | #wireplumber.muted { | ||
175 | background-color: #f53c3c; | ||
176 | } | ||
177 | |||
178 | #custom-media { | ||
179 | background-color: #66cc99; | ||
180 | min-width: 100px; | ||
181 | } | ||
182 | |||
183 | #custom-media.custom-spotify { | ||
184 | background-color: #66cc99; | ||
185 | } | ||
186 | |||
187 | #custom-media.custom-vlc { | ||
188 | background-color: #ffa000; | ||
189 | } | ||
190 | |||
191 | #temperature { | ||
192 | background-color: #f0932b; | ||
193 | } | ||
194 | |||
195 | #temperature.critical { | ||
196 | background-color: #eb4d4b; | ||
197 | } | ||
198 | |||
199 | #tray { | ||
200 | background-color: @sapphire; | ||
201 | } | ||
202 | |||
203 | #tray > .passive { | ||
204 | -gtk-icon-effect: dim; | ||
205 | } | ||
206 | |||
207 | #tray > .needs-attention { | ||
208 | -gtk-icon-effect: highlight; | ||
209 | background-color: @red; | ||
210 | } | ||
211 | |||
212 | #tray menu { | ||
213 | background-color: @mantle; | ||
214 | color: @text; | ||
215 | } | ||
216 | |||
217 | #idle_inhibitor { | ||
218 | background-color: #2d3436; | ||
219 | } | ||
220 | |||
221 | #idle_inhibitor.activated { | ||
222 | background-color: #ecf0f1; | ||
223 | } | ||
224 | |||
225 | #mpd { | ||
226 | background-color: #66cc99; | ||
227 | } | ||
228 | |||
229 | #mpd.disconnected { | ||
230 | background-color: #f53c3c; | ||
231 | } | ||
232 | |||
233 | #mpd.stopped { | ||
234 | background-color: #90b1b1; | ||
235 | } | ||
236 | |||
237 | #mpd.paused { | ||
238 | background-color: #51a37a; | ||
239 | } | ||
240 | |||
241 | #language { | ||
242 | background: #00b093; | ||
243 | padding: 0 5px; | ||
244 | margin: 0 5px; | ||
245 | min-width: 16px; | ||
246 | } | ||
247 | |||
248 | #keyboard-state { | ||
249 | background: #97e1ad; | ||
250 | padding: 0 0px; | ||
251 | margin: 0 5px; | ||
252 | min-width: 16px; | ||
253 | } | ||
254 | |||
255 | #keyboard-state > label { | ||
256 | padding: 0 5px; | ||
257 | } | ||
258 | |||
259 | #keyboard-state > label.locked { | ||
260 | background: rgba(0, 0, 0, 0.2); | ||
261 | } | ||
262 | |||
263 | #scratchpad { | ||
264 | background: rgba(0, 0, 0, 0.2); | ||
265 | } | ||
266 | |||
267 | #scratchpad.empty { | ||
268 | background-color: transparent; | ||
269 | } | ||
270 | |||
271 | #privacy { | ||
272 | padding: 0; | ||
273 | } | ||
274 | |||
275 | #privacy-item { | ||
276 | padding: 0 5px; | ||
277 | } | ||
278 | |||
279 | #privacy-item.screenshare { | ||
280 | background-color: #cf5700; | ||
281 | } | ||
282 | |||
283 | #privacy-item.audio-in { | ||
284 | background-color: #1ca000; | ||
285 | } | ||
286 | |||
287 | #privacy-item.audio-out { | ||
288 | background-color: #0069d4; | ||
289 | } | ||
290 | |||
291 | #mpris { | ||
292 | background-color: #74c7ec; | ||
293 | } | ||