isuggest.selfce.st
Catppuccin userstyle for tangled.sh
feat(tangled): sitewide inputs, top bar profile logout, activity statuses, chroma syntax highlighting styles
+69
catppuccin.user.less
+69
catppuccin.user.less
···
90
90
color: @overlay2;
91
91
}
92
92
93
+
/* sitewide inputs */
94
+
input, textarea {
95
+
background-color: @base;
96
+
}
97
+
98
+
93
99
/* top bar +new icon */
94
100
.btn-create::before {
95
101
background-color: @accent;
···
102
108
.btn-create {
103
109
color: @crust;
104
110
}
111
+
112
+
/* top bar logout */
113
+
.text-red-400.dark\:text-red-400 {
114
+
color: @red;
115
+
&:hover {
116
+
color: lighten(@red, 5%);
117
+
}
118
+
}
119
+
105
120
106
121
/* footer segment headers */
107
122
.text-gray-900.dark\:text-gray-200 {
···
158
173
.bg-green-600.dark\:bg-green-700.text-white {
159
174
background-color: @green;
160
175
color: @crust;
176
+
}
177
+
.text-green-600.dark\:text-green-500 {
178
+
color: @green;
161
179
}
162
180
/* merged PRs */
163
181
.bg-purple-600.dark\:bg-purple-700.text-white {
164
182
background-color: @mauve;
165
183
color: @crust;
166
184
}
185
+
.text-purple-600.dark\:text-purple-500 {
186
+
color: @mauve;
187
+
}
167
188
/* closed PRs */
168
189
.bg-gray-800.dark\:bg-gray-700 {
169
190
background-color: @mantle;
···
174
195
color: @overlay1;
175
196
}
176
197
198
+
/* chroma syntax highlighting overrides */
199
+
/* the good news is that tangled by default already uses catppuccin macchiato so we can just edit those styles a little */
200
+
.chroma {
201
+
color: @text;
202
+
}
203
+
span.kd, span.kt {
204
+
color: @red;
205
+
}
206
+
span.o {
207
+
color: @sky;
208
+
}
209
+
span.k {
210
+
color: @mauve;
211
+
}
212
+
span.nf {
213
+
color: @blue;
214
+
}
215
+
span.s1 {
216
+
color: @green;
217
+
}
218
+
span.kc {
219
+
color: @peach;
220
+
}
221
+
222
+
/* email verification statuses */
223
+
/* verified */
224
+
span.bg-green-100.text-green-800.dark\:bg-green-900.dark\:text-green-200 {
225
+
background-color: @green;
226
+
color: @crust;
227
+
}
228
+
/* primary */
229
+
span.bg-blue-100.text-blue-800.dark\:bg-blue-900.dark\:text-blue-200 {
230
+
background-color: @blue;
231
+
color: @crust;
232
+
}
233
+
/* unverified */
234
+
span.bg-yellow-100.text-yellow-800.dark\:bg-yellow-900.dark\:text-yellow-200 {
235
+
background-color: @yellow;
236
+
color: @crust;
237
+
}
238
+
239
+
/* settings delete button */
240
+
button.text-red-500.dark\:text-red-400 {
241
+
color: @red;
242
+
&:hover {
243
+
color: lighten(@red, 5%);
244
+
}
245
+
}
177
246
178
247
179
248
}