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
|
/* 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;
}
/* The accent pill inverts on hover rather than lightening: it is already the
* brightest thing on the bar. */
#image.launcher:hover {
background-color: @main-bg;
}
/* ---------------------------------------------- *
* 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;
}
/* ------------------------------------------- *
* 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;
}
#image.idle {
padding: 2px 10px;
min-width: 22px;
}
|
