(Snow)flakes for fluffy winters.
feat(home-manager/nixcord): update touchy (#31)
* feat(home-manager/nixcord): update touchy classes
Updates Touchy classes using https://syndishanx.github.io/Website/Update_Classes.html
* fix(home-manager/nixcord): fix enabled themes syntax
authored by
WalkQuackBack
and committed by
GitHub
c91fb7cf
3f2f510c
+51
-51
+1
-1
modules/home-manager/nixcord/default.nix
+1
-1
modules/home-manager/nixcord/default.nix
+50
-50
modules/home-manager/nixcord/touchy.css
+50
-50
modules/home-manager/nixcord/touchy.css
···
25
25
26
26
/* Increase touch targets */
27
27
:root {
28
-
.aa8da23faa27393c-side .aa8da23faa27393c-item {
28
+
.side_aa8da2 .item_aa8da2 {
29
29
line-height: 30px;
30
30
margin-block: 0;
31
31
border-radius: 8px;
32
32
}
33
33
34
34
/* Remove gaps between DM list items */
35
-
.a244c3c87d2b1e13-container {
35
+
.container_a244c3 {
36
36
padding: 0;
37
37
}
38
38
/* Remove gaps between server list items */
39
-
._2ea32c412048f708-wrapper {
39
+
.wrapper__2ea32 {
40
40
padding: 0;
41
41
}
42
42
43
43
/* Increase touch target for DM list items */
44
-
._20a53846fe2e8513-layout {
44
+
.layout__20a53 {
45
45
height: 52px;
46
46
}
47
47
/* Increase touch target for server list items */
48
-
._2ea32c412048f708-link {
48
+
.link__2ea32 {
49
49
padding: 5px 10px;
50
50
}
51
51
52
52
/* Increase touch target for toolbar actions */
53
-
._9293f6b2fc12398a-iconWrapper,
53
+
.iconWrapper__9293f,
54
54
/* Increase touch target for activities button */
55
-
.e6e74fd4d1221f53-button,
55
+
.button_e6e74f,
56
56
/* Increase touch target for chatbox toolbar actions */
57
-
._740174f3d6a2c8fe-button {
57
+
.button__74017 {
58
58
width: var(--min-target-size);
59
59
height: var(--min-target-size);
60
60
}
61
61
/* Increase icon size for chatbox toolbar actions */
62
-
._740174f3d6a2c8fe-button [class^='buttonWrapper'],
62
+
.button__74017 [class^='buttonWrapper'],
63
63
[class^='emojiButton'] > div {
64
64
/* 22px icons */
65
65
scale: 1.1;
66
66
}
67
67
/* Increase touch target for attach button */
68
-
._740174f3d6a2c8fe-attachButton {
68
+
.attachButton__74017 {
69
69
margin-right: var(--space-4);
70
70
}
71
-
._0923f156a0410684-attachWrapper {
71
+
.attachWrapper__0923f {
72
72
padding-inline: var(--space-4) var(--space-6);
73
73
padding-block: 2px;
74
74
}
75
-
._0923f156a0410684-attachButtonInner {
75
+
.attachButtonInner__0923f {
76
76
box-sizing: border-box;
77
77
height: var(--min-target-size);
78
78
padding: 12px;
···
80
80
}
81
81
/* Increase touch target for send button */
82
82
/* Make send button primary whe activatable */
83
-
.aa63abf63dbd9cce-button {
83
+
.button_aa63ab {
84
84
min-height: var(--min-target-size);
85
85
min-width: var(--min-target-size);
86
86
padding: 4px;
···
94
94
}
95
95
}
96
96
97
-
&:not(._24af7f4d0326ba4f-noHover):hover {
97
+
&:not(.noHover__24af7):hover {
98
98
background-color: var(--control-background-primary-hover);
99
99
border-color: var(--control-border-primary-hover);
100
-
.aa63abf63dbd9cce-activeButtonChild {
100
+
.activeButtonChild_aa63ab {
101
101
color: var(--control-text-primary-hover);
102
102
}
103
103
}
104
104
105
-
.aa63abf63dbd9cce-activeButtonChild {
105
+
.activeButtonChild_aa63ab {
106
106
color: var(--control-text-primary-default);
107
107
}
108
108
}
109
109
110
110
/* Context Menu reduce padding */
111
-
.c1e9c47c23f12ca3-scroller {
111
+
.scroller_c1e9c4 {
112
112
padding: 4px;
113
113
padding-right: 4px !important;
114
114
overflow-y: auto !important;
115
115
border-radius: 0;
116
116
}
117
117
/* Context menu touch target */
118
-
.c1e9c47c23f12ca3-labelContainer {
118
+
.labelContainer_c1e9c4 {
119
119
padding: 7px 8px;
120
120
}
121
121
/* Context menu item */
122
-
.c1e9c47c23f12ca3-item {
122
+
.item_c1e9c4 {
123
123
font-weight: 400;
124
124
}
125
125
/* Context menu divider decrease margin */
126
-
.c1e9c47c23f12ca3-separator {
126
+
.separator_c1e9c4 {
127
127
margin: 4px 6px;
128
128
}
129
129
}
···
133
133
[class^='button'],
134
134
[class^='buttonChild'],
135
135
[class^='emojiButton'],
136
-
.aa63abf63dbd9cce-buttonChild,
137
-
._24af7f4d0326ba4f-button:not(._24af7f4d0326ba4f-noHover) {
136
+
.buttonChild_aa63ab,
137
+
.button__24af7:not(.noHover__24af7) {
138
138
transition: opacity 50ms ease-in !important;
139
139
}
140
140
141
141
/* Expand search bar on hover */
142
-
.c322aadb96ff59c9-searchBar {
142
+
.searchBar_c322aa {
143
143
background: var(--background-gradient-lowest, var(--background-base-lowest));
144
144
border-color: var(--border-normal);
145
145
transition: width var(--spatial-expressive-default-duration) var(--spatial-expressive-default-timing);
···
168
168
}
169
169
170
170
/* Sidebar view */
171
-
.aa8da23faa27393c-side .aa8da23faa27393c-item {
171
+
.side_aa8da2 .item_aa8da2 {
172
172
border-radius: 18px;
173
173
margin-bottom: 2px;
174
174
padding-bottom: 6px;
···
178
178
/* Gaps */
179
179
180
180
/* Main sidebar */
181
-
._5e434347c823b592-sidebarListRounded {
181
+
.sidebarListRounded__5e434 {
182
182
border-top-left-radius: var(--radius-lg);
183
183
border-top-right-radius: var(--radius-md);
184
184
margin-inline-end: var(--panel-gap);
···
186
186
& > nav,
187
187
& > nav > div:first-child,
188
188
/* Private channels scroller */
189
-
._99e7cad8d4c55236-scroller {
189
+
.scroller__99e7c {
190
190
background: var(--background-gradient-high,var(--background-base-lower));
191
191
}
192
192
}
193
193
194
194
/* Centre panel */
195
195
/* DM/Server chaT */
196
-
.f75fb00fb7356cbe-chat,
196
+
.chat_f75fb0,
197
197
/* Friends outer container */
198
-
._133bf5eea8e33a34-container,
198
+
.container__133bf,
199
199
/* Friends inner container */
200
-
._9293f6b2fc12398a-container,
200
+
.container__9293f,
201
201
/* Nitro page */
202
-
._0920e02cc8fc7b7b-homeWrapper,
202
+
.homeWrapper__0920e,
203
203
/* Nitro page outer wrapper */
204
-
.f07d62e29a48ceee-applicationStore {
204
+
.applicationStore_f07d62 {
205
205
border-top-left-radius: var(--radius-md);
206
206
}
207
207
208
208
/* Mobile style self panel */
209
-
._5e434347c823b592-panels {
209
+
.panels__5e434 {
210
210
background: var(--background-gradient-low,var(--background-base-low));
211
211
border-top: 1px solid var(--border-faint);
212
212
border-radius: 0;
···
214
214
left: 0;
215
215
width: calc(100% - var(--panel-gap));
216
216
}
217
-
._37e49614b9f110a9-container {
217
+
.container__37e49 {
218
218
padding: var(--space-6);
219
219
}
220
220
221
221
/* Top toolbar */
222
-
._9293f6b2fc12398a-toolbar,
222
+
.toolbar__9293f,
223
223
/* Message bar toolbar */
224
-
._740174f3d6a2c8fe-buttons {
224
+
.buttons__74017 {
225
225
gap: 0;
226
226
}
227
227
228
-
._5e434347c823b592-sidebarResizeHandle {
228
+
.sidebarResizeHandle__5e434 {
229
229
--custom-overdrag: 2;
230
230
}
231
231
232
-
.b8880176888cc928-inTextChannel .b8880176888cc928-text {
232
+
.inTextChannel_b88801 .text_b88801 {
233
233
margin-left: var(--space-8);
234
234
}
235
235
236
236
/* Message hover effect */
237
-
._5126c0cd07f243a0-message._5126c0cd07f243a0-selected,
238
-
._5126c0cd07f243a0-message:hover {
237
+
.message__5126c.selected__5126c,
238
+
.message__5126c:hover {
239
239
background: var(--background-message-hover);
240
240
}
241
241
242
242
/* Round chat box more */
243
-
._740174f3d6a2c8fe-channelTextArea,
244
-
._740174f3d6a2c8fe-scrollableContainer {
243
+
.channelTextArea__74017,
244
+
.scrollableContainer__74017 {
245
245
border-radius: calc(var(--custom-channel-textarea-text-area-height)/2);
246
246
}
247
247
/* Chatbox shadow */
248
-
._740174f3d6a2c8fe-channelTextArea {
248
+
.channelTextArea__74017 {
249
249
box-shadow: var(--shadow-low);
250
250
&:hover {
251
251
box-shadow: var(--shadow-low-hover);
252
252
}
253
253
}
254
254
/* Symetrical scroll area chatbox */
255
-
._740174f3d6a2c8fe-scrollableContainer {
255
+
.scrollableContainer__74017 {
256
256
scrollbar-gutter: stable both-edges;
257
257
/* Make chatbox buttons rounded */
258
258
[class^='button'],
···
260
260
border-radius: 22px;
261
261
}
262
262
/* Fix double state layer */
263
-
._0923f156a0410684-attachButton:hover {
263
+
.attachButton__0923f:hover {
264
264
background-color: transparent;
265
265
}
266
266
}
267
-
._740174f3d6a2c8fe-sansAttachButton {
267
+
.sansAttachButton__74017 {
268
268
padding-left: 3px;
269
269
}
270
270
271
271
/* Top bar compression (see also --custom-app-top-bar-height) */
272
-
.c38106a3f0c3ca76-bar {
272
+
.bar_c38106 {
273
273
padding: 0 var(--space-4);
274
274
}
275
-
.c38106a3f0c3ca76-title {
275
+
.title_c38106 {
276
276
visibility: hidden;
277
277
}
278
-
.c38106a3f0c3ca76-leading,
279
-
.c38106a3f0c3ca76-trailing {
278
+
.leading_c38106,
279
+
.trailing_c38106 {
280
280
gap: 0;
281
281
transform-origin: right;
282
282
[class^='clickable_'],
283
-
._9293f6b2fc12398a-iconWrapper {
283
+
.iconWrapper__9293f {
284
284
--custom-horizontal-padding: 0;
285
285
width: var(--custom-app-top-bar-height);
286
286
height: var(--custom-app-top-bar-height);