My personal dotfiles
feat: made swaync more in line with hypr
+66
-50
+66
-50
swaync/.config/swaync/style.css
+66
-50
swaync/.config/swaync/style.css
···
1
+
@define-color background-color rgba(46, 52, 64, 0.7);
2
+
@define-color surface-color rgb(59, 66, 82);
3
+
@define-color highlight-color rgb(67, 76, 94);
4
+
5
+
@define-color primary-color rgb(136, 192, 208);
6
+
7
+
@define-color primary-text rgb(236, 239, 244);
8
+
@define-color secondary-text rgb(229, 233, 240);
9
+
1
10
@define-color cc-bg rgba(46, 46, 46, 0.7);
2
11
@define-color noti-border-color rgba(255, 255, 255, 0.15);
3
12
@define-color noti-bg rgba(48, 48, 48, 0.8);
···
17
26
}
18
27
19
28
.notification-row:focus, .notification-row:hover {
20
-
background: @noti-bg-focus;
29
+
background: @highlight-color;
21
30
}
22
31
23
32
.notification-row .notification-background {
···
26
35
27
36
.notification-row .notification-background .close-button {
28
37
/* The notification Close Button */
29
-
background: @noti-close-bg;
30
-
color: @text-color;
38
+
background: @highlight-color;
39
+
color: @secondary-text;
31
40
text-shadow: none;
32
41
padding: 0;
33
42
border-radius: 100%;
···
48
57
49
58
.notification-row .notification-background .notification {
50
59
/* The actual notification */
51
-
border-radius: 12px;
52
-
border: 1px solid @noti-border-color;
60
+
border-radius: 1rem;
61
+
border: 2px solid @primary-color;
53
62
padding: 0;
54
63
transition: background 0.15s ease-in-out;
55
-
background: @noti-bg;
64
+
background: @surface-color;
56
65
}
57
66
58
67
.notification-row .notification-background .notification.low {
···
73
82
box-shadow: none;
74
83
background: transparent;
75
84
border: none;
76
-
color: @text-color;
85
+
color: @text-primary;
77
86
transition: background 0.15s ease-in-out;
78
87
}
79
88
80
89
.notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover {
81
90
-gtk-icon-effect: none;
82
-
background: @noti-bg-hover;
91
+
background: @highlight-color;
83
92
}
84
93
85
94
.notification-row .notification-background .notification .notification-default-action {
···
119
128
font-size: 16px;
120
129
font-weight: bold;
121
130
background: transparent;
122
-
color: @text-color;
131
+
color: @text-primary;
123
132
text-shadow: none;
124
133
}
125
134
···
128
137
font-size: 16px;
129
138
font-weight: bold;
130
139
background: transparent;
131
-
color: @text-color;
140
+
color: @text-primary;
132
141
text-shadow: none;
133
142
margin-right: 30px;
134
143
}
···
138
147
font-size: 15px;
139
148
font-weight: normal;
140
149
background: transparent;
141
-
color: @text-color;
150
+
color: @text-primary;
142
151
text-shadow: none;
143
152
}
144
153
···
162
171
163
172
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry {
164
173
background: @noti-bg-darker;
165
-
color: @text-color;
166
-
caret-color: @text-color;
167
-
border: 1px solid @noti-border-color;
174
+
color: @text-primary;
175
+
caret-color: @text-secondary;
176
+
border: 2px solid @primary-color;
168
177
border-radius: 12px;
169
178
}
170
179
171
180
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
172
181
margin-left: 4px;
173
-
background: @noti-bg;
174
-
border: 1px solid @noti-border-color;
182
+
background: @background-color;
183
+
border: 2px solid @primary-color;
175
184
border-radius: 12px;
176
-
color: @text-color;
185
+
color: @text-primary;
177
186
}
178
187
179
188
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
180
189
background: initial;
181
190
color: @text-color-disabled;
182
-
border: 1px solid @noti-border-color;
191
+
border: 2px solid @primary-color;
183
192
border-color: transparent;
184
193
}
185
194
186
195
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
187
-
background: @noti-bg-hover;
196
+
background: @background-color;
188
197
}
189
198
190
199
.notification-row .notification-background .notification .notification-action {
191
200
/* The alternative actions below the default action */
192
-
border-top: 1px solid @noti-border-color;
201
+
border-top: 2px solid @primary-color;
193
202
border-radius: 0px;
194
-
border-right: 1px solid @noti-border-color;
203
+
border-right: 2px solid @primary-color;
195
204
}
196
205
197
206
.notification-row .notification-background .notification .notification-action:first-child {
···
222
231
223
232
.notification-group .notification-group-buttons, .notification-group .notification-group-headers {
224
233
margin: 0 16px;
225
-
color: @text-color;
234
+
color: @text-primary;
226
235
}
227
236
228
237
.notification-group .notification-group-headers {
···
230
239
}
231
240
232
241
.notification-group .notification-group-headers .notification-group-icon {
233
-
color: @text-color;
242
+
color: @text-primary;
234
243
}
235
244
236
245
.notification-group .notification-group-headers .notification-group-header {
237
-
color: @text-color;
246
+
color: @text-primary;
238
247
}
239
248
240
249
.notification-group .notification-group-buttons {
···
242
251
}
243
252
244
253
.notification-group.collapsed .notification-row .notification {
245
-
background-color: @noti-bg-opaque;
254
+
background-color: @surface-color;
246
255
}
247
256
248
257
.notification-group.collapsed .notification-row:not(:last-child) {
···
256
265
}
257
266
258
267
.notification-group.collapsed:hover .notification-row:not(:only-child) .notification {
259
-
background-color: @noti-bg-hover-opaque;
268
+
background-color: @highlight-color;
260
269
}
261
270
262
271
.control-center {
263
272
/* The Control Center which contains the old notifications + widgets */
264
-
background: @cc-bg;
265
-
color: @text-color;
273
+
background: @background-color;
274
+
color: @text-primary;
266
275
border-radius: 12px;
267
276
}
268
277
···
287
296
288
297
.control-center .control-center-list .notification .notification-default-action:hover,
289
298
.control-center .control-center-list .notification .notification-action:hover {
290
-
background-color: @noti-bg-hover;
299
+
background-color: @highlight-color;
291
300
}
292
301
293
302
.blank-window {
···
306
315
/*** Widgets ***/
307
316
/* Title widget */
308
317
.widget-title {
309
-
color: @text-color;
310
-
margin: 8px;
318
+
color: @text-primary;
319
+
margin: 1.5rem;
311
320
font-size: 1.5rem;
312
321
}
313
322
314
323
.widget-title > button {
315
324
font-size: initial;
316
-
color: @text-color;
325
+
color: @text-primary;
317
326
text-shadow: none;
318
-
background: @noti-bg;
319
-
border: 1px solid @noti-border-color;
327
+
background: @surface-color;
328
+
border: none;
320
329
box-shadow: none;
321
-
border-radius: 12px;
330
+
border-radius: 0.5rem;
322
331
}
323
332
324
333
.widget-title > button:hover {
325
-
background: @noti-bg-hover;
334
+
background: @highlight-color;
326
335
}
327
336
328
337
/* DND widget */
329
338
.widget-dnd {
330
-
color: @text-color;
339
+
color: @text-primary;
331
340
margin: 8px;
332
341
font-size: 1.1rem;
333
342
}
···
335
344
.widget-dnd > switch {
336
345
font-size: initial;
337
346
border-radius: 12px;
338
-
background: @noti-bg;
339
-
border: 1px solid @noti-border-color;
347
+
background: @surface-color;
348
+
border: 2px solid @primary-color;
340
349
box-shadow: none;
341
350
}
342
351
343
352
.widget-dnd > switch:checked {
344
-
background: @bg-selected;
353
+
background: @primary-color;
345
354
}
346
355
347
356
.widget-dnd > switch slider {
348
-
background: @noti-bg-hover;
357
+
background: @highlight-color;
349
358
border-radius: 12px;
350
359
}
351
360
···
363
372
padding: 8px;
364
373
margin: 8px;
365
374
border-radius: 12px;
366
-
background-color: @noti-bg;
375
+
background-color: transparent;
376
+
367
377
}
368
378
369
379
.widget-buttons-grid > flowbox > flowboxchild > button {
370
-
background: @noti-bg;
371
-
border-radius: 12px;
380
+
background: @surface-color;
381
+
border: none;
382
+
padding: 1rem 4.5rem;
383
+
border-radius: 1rem;
384
+
}
385
+
386
+
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
387
+
background: @primary-color;
372
388
}
373
389
374
390
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
···
389
405
390
406
/* Volume widget */
391
407
.widget-volume {
392
-
background-color: @noti-bg;
408
+
background-color: @surface-color;
393
409
padding: 8px;
394
410
margin: 8px;
395
411
border-radius: 12px;
···
409
425
410
426
/* Backlight widget */
411
427
.widget-backlight {
412
-
background-color: @noti-bg;
428
+
background-color: @surface-color;
413
429
padding: 8px;
414
430
margin: 8px;
415
431
border-radius: 12px;
···
423
439
424
440
.widget-inhibitors > button {
425
441
font-size: initial;
426
-
color: @text-color;
442
+
color: @text-primary;
427
443
text-shadow: none;
428
-
background: @noti-bg;
429
-
border: 1px solid @noti-border-color;
444
+
background: @surface-color;
445
+
border: 2px solid @primary-color;
430
446
box-shadow: none;
431
447
border-radius: 12px;
432
448
}
433
449
434
450
.widget-inhibitors > button:hover {
435
-
background: @noti-bg-hover;
451
+
background: @highlight-color;
436
452
}