1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
/* What is different about each module.
*
* The icons for the workspaces, the clock pair, the launcher and the language
* live here rather than in the config, because waybar's format-icons takes
* text and not paths. @ICONS@ is substituted by install.sh with the icon
* theme's absolute path, so the theme can move without editing this file.
*/
/* ------------------------------------------------------------------ *
* Launcher: the one always-coloured pill, and the desktop's identity. *
* ------------------------------------------------------------------ */
/* The mark itself is the image module's own content, so this only draws the
* pill it sits in. The horizontal padding is wider than the vertical so the
* pill reads as a capsule like its neighbours rather than a circle: an image
* module sizes to its icon, where the others size to their text. */
#image.launcher {
background: @accent;
padding: 2px 14px;
min-width: 20px;
}
/* This pill deliberately has NO hover background.
*
* The mark is a rendered image inside the module, not a CSS background, so
* CSS cannot recolour it for a hover state. It is filled with @main-bg to
* contrast against the accent pill, which means any hover that sets the
* background to @main-bg paints the mark in its own colour and the pill goes
* blank. That shipped twice: first filled with @accent on an @accent pill,
* then hovering to @main-bg with an @main-bg mark.
*
* Changing the background here at all requires a colour that contrasts with
* BOTH @accent and @main-bg, which the palette does not owe us. So the pill
* holds its colour and the cursor alone signals it is clickable. */
/* ---------------------------------------------- *
* Clock: the only text, each with a leading icon. *
* ---------------------------------------------- */
#clock.date,
#clock.time {
background-repeat: no-repeat;
background-position: 10px center;
background-size: 16px 16px;
padding-left: 32px;
}
#clock.date {
background-image: url("@ICONS@/mimetypes/22/x-office-calendar.svg");
}
#clock.time {
background-image: url("@ICONS@/categories/22/clock.svg");
}
/* ------------------------------------------------------------- *
* Workspaces: eight themed icons, one per button, set by CSS. *
* *
* The module's labels are empty (see the module config), so each *
* button is an icon-sized box and nothing else. *
* ------------------------------------------------------------- */
#workspaces button {
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
min-width: 26px;
min-height: 26px;
margin: 0 1px;
border-radius: 10px;
/* Dim by default; the active workspace is the one at full strength. */
opacity: 0.45;
transition: opacity 0.3s ease, background-color 0.3s ease;
}
#workspaces button:hover {
background-color: @hover-bg;
opacity: 0.8;
}
#workspaces button.active,
#workspaces button.focused {
background-color: @hover-bg;
opacity: 1;
}
#workspaces button.urgent {
background-color: @critical;
opacity: 1;
}
/* The eight. Generic names, so the bar does not lie when the application on a
* workspace changes. */
#workspaces button:nth-child(1) { background-image: url("@ICONS@/categories/22/web-browser.svg"); }
#workspaces button:nth-child(2) { background-image: url("@ICONS@/categories/22/utilities-terminal.svg"); }
#workspaces button:nth-child(3) { background-image: url("@ICONS@/categories/22/text-editor.svg"); }
#workspaces button:nth-child(4) { background-image: url("@ICONS@/devices/22/network-server.svg"); }
#workspaces button:nth-child(5) { background-image: url("@ICONS@/actions/22/document-edit.svg"); }
#workspaces button:nth-child(6) { background-image: url("@ICONS@/categories/22/applications-graphics.svg"); }
#workspaces button:nth-child(7) { background-image: url("@ICONS@/categories/22/internet-chat.svg"); }
#workspaces button:nth-child(8) { background-image: url("@ICONS@/devices/22/input-gaming.svg"); }
/* ------------------------------------------------ *
* Language: a flag, shipped by this repo. *
* *
* An image module, not hyprland/language: that one *
* has no per-language CSS class, so the flag could *
* not be selected. wb-lang picks the file instead. *
* ------------------------------------------------ */
#image.lang {
padding: 2px 10px;
min-width: 22px;
}
/* ------------------------------------------------------ *
* Mail: envelope icon, unread count as text. *
* *
* The count is content rather than decoration, so it stays *
* text like the clock. The state comes from the watcher's *
* class: nothing unread is dim, a dead watcher is loud. *
* ------------------------------------------------------ */
#custom-mail {
background-image: url("@ICONS@/actions/22/mail-unread.svg");
background-repeat: no-repeat;
background-position: 10px center;
background-size: 16px 16px;
padding-left: 32px;
min-height: 16px;
}
#custom-mail.empty {
color: @main-fg;
opacity: 0.45;
}
#custom-mail.unread {
color: @main-fg;
}
#custom-mail.error {
color: @critical;
}
/* ------------------------------------------- *
* Dots: coloured by their scripts, not by CSS. *
* ------------------------------------------- */
/* The privacy pill only exists while something is capturing: an empty label
* would otherwise leave a bare capsule sitting on the bar. */
#custom-privacy_dots {
padding: 2px 10px;
}
#custom-privacy_dots.mic-off.cam-off.loc-off.scr-off {
padding: 0;
margin: 0;
opacity: 0;
}
#custom-vmdot {
padding: 2px 10px;
}
/* ---------------------------------------- *
* Volume: a drawer, the microphone hidden. *
* ---------------------------------------- */
#volume {
padding: 2px 8px;
}
#volume image {
padding: 0 4px;
}
/* --------------------------------------------------------- *
* Taskbar: application icons, with the idea2 underline. *
* --------------------------------------------------------- */
#taskbar button {
background: transparent;
padding: 0 8px;
margin: 0 1px;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.3s ease-out, background-color 0.3s ease;
}
#taskbar button:hover {
background: @hover-bg;
border-bottom-color: @accent;
}
#taskbar button.active {
border-bottom-color: @accent;
}
/* --------------------------- *
* Tray and presentation mode. *
* --------------------------- */
#tray {
padding: 2px 10px;
}
#tray menu {
background: @main-bg;
color: @main-fg;
border: 1px solid @outline;
border-radius: 8px;
}
/* Presentation mode. statusctl emits the state as a class and an empty text,
* so the icon is chosen here rather than by a format string.
*
* `down` is not `off`: the state file is missing, so the mode cannot be read
* at all. It draws a warning rather than the off icon, because a watcher that
* has died should not look like a mode that is simply not on. */
#custom-presentation {
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
padding: 2px 10px;
min-width: 22px;
min-height: 18px;
}
#custom-presentation.deactivated {
background-image: url("@ICONS@/categories/22/preferences-desktop-screensaver.svg");
}
#custom-presentation.activated {
background-image: url("@ICONS@/mimetypes/22/x-office-presentation.svg");
}
#custom-presentation.down {
background-image: url("@ICONS@/status/22/dialog-warning.svg");
}
|
