your personal website on atproto - mirror
blento.app
flo-bit.dev
1@import 'tailwindcss';
2
3@plugin '@tailwindcss/forms';
4@plugin '@tailwindcss/typography';
5
6@source '../node_modules/@foxui';
7
8@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
9@custom-variant accent (&:where(.accent, .accent *));
10
11.body::-webkit-scrollbar-track {
12 background-color: transparent;
13}
14
15@supports (scrollbar-width: auto) {
16 body {
17 scrollbar-color: var(--color-base-400) transparent;
18 scrollbar-width: thin;
19 }
20
21 .dark body {
22 scrollbar-color: var(--color-base-800) transparent;
23 }
24}
25
26@supports not (scrollbar-width: auto) {
27 body::-webkit-scrollbar {
28 width: 14px;
29 height: 14px;
30 }
31}
32
33body::-webkit-scrollbar-thumb {
34 background-color: var(--color-base-400);
35 border-radius: 20px;
36 border: 4px solid transparent;
37 background-clip: content-box;
38}
39
40body::-webkit-scrollbar-thumb:hover {
41 background-color: var(--color-base-500);
42}
43
44.dark body::-webkit-scrollbar-thumb {
45 background-color: var(--color-base-800);
46}
47
48.dark body::-webkit-scrollbar-thumb:hover {
49 background-color: var(--color-base-700);
50}
51
52
53@theme inline {
54 --color-base-50: var(--base-50);
55 --color-base-100: var(--base-100);
56 --color-base-200: var(--base-200);
57 --color-base-300: var(--base-300);
58 --color-base-400: var(--base-400);
59 --color-base-500: var(--base-500);
60 --color-base-600: var(--base-600);
61 --color-base-700: var(--base-700);
62 --color-base-800: var(--base-800);
63 --color-base-900: var(--base-900);
64 --color-base-950: var(--base-950);
65
66 --color-accent-50: var(--accent-50);
67 --color-accent-100: var(--accent-100);
68 --color-accent-200: var(--accent-200);
69 --color-accent-300: var(--accent-300);
70 --color-accent-400: var(--accent-400);
71 --color-accent-500: var(--accent-500);
72 --color-accent-600: var(--accent-600);
73 --color-accent-700: var(--accent-700);
74 --color-accent-800: var(--accent-800);
75 --color-accent-900: var(--accent-900);
76 --color-accent-950: var(--accent-950);
77}
78
79@layer base {
80 :root {
81 --accent-50: var(--color-pink-50);
82 --accent-100: var(--color-pink-100);
83 --accent-200: var(--color-pink-200);
84 --accent-300: var(--color-pink-300);
85 --accent-400: var(--color-pink-400);
86 --accent-500: var(--color-pink-500);
87 --accent-600: var(--color-pink-600);
88 --accent-700: var(--color-pink-700);
89 --accent-800: var(--color-pink-800);
90 --accent-900: var(--color-pink-900);
91 --accent-950: var(--color-pink-950);
92
93 --base-50: var(--color-neutral-50);
94 --base-100: var(--color-neutral-100);
95 --base-200: var(--color-neutral-200);
96 --base-300: var(--color-neutral-300);
97 --base-400: var(--color-neutral-400);
98 --base-500: var(--color-neutral-500);
99 --base-600: var(--color-neutral-600);
100 --base-700: var(--color-neutral-700);
101 --base-800: var(--color-neutral-800);
102 --base-900: var(--color-neutral-900);
103 --base-950: var(--color-neutral-950);
104 }
105
106 .red {
107 --accent-50: var(--color-red-50);
108 --accent-100: var(--color-red-100);
109 --accent-200: var(--color-red-200);
110 --accent-300: var(--color-red-300);
111 --accent-400: var(--color-red-400);
112 --accent-500: var(--color-red-500);
113 --accent-600: var(--color-red-600);
114 --accent-700: var(--color-red-700);
115 --accent-800: var(--color-red-800);
116 --accent-900: var(--color-red-900);
117 --accent-950: var(--color-red-950);
118 }
119
120 .orange {
121 --accent-50: var(--color-orange-50);
122 --accent-100: var(--color-orange-100);
123 --accent-200: var(--color-orange-200);
124 --accent-300: var(--color-orange-300);
125 --accent-400: var(--color-orange-400);
126 --accent-500: var(--color-orange-500);
127 --accent-600: var(--color-orange-600);
128 --accent-700: var(--color-orange-700);
129 --accent-800: var(--color-orange-800);
130 --accent-900: var(--color-orange-900);
131 --accent-950: var(--color-orange-950);
132 }
133
134 .amber {
135 --accent-50: var(--color-amber-50);
136 --accent-100: var(--color-amber-100);
137 --accent-200: var(--color-amber-200);
138 --accent-300: var(--color-amber-300);
139 --accent-400: var(--color-amber-400);
140 --accent-500: var(--color-amber-500);
141 --accent-600: var(--color-amber-600);
142 --accent-700: var(--color-amber-700);
143 --accent-800: var(--color-amber-800);
144 --accent-900: var(--color-amber-900);
145 --accent-950: var(--color-amber-950);
146 }
147
148 .yellow {
149 --accent-50: var(--color-yellow-50);
150 --accent-100: var(--color-yellow-100);
151 --accent-200: var(--color-yellow-200);
152 --accent-300: var(--color-yellow-300);
153 --accent-400: var(--color-yellow-400);
154 --accent-500: var(--color-yellow-500);
155 --accent-600: var(--color-yellow-600);
156 --accent-700: var(--color-yellow-700);
157 --accent-800: var(--color-yellow-800);
158 --accent-900: var(--color-yellow-900);
159 --accent-950: var(--color-yellow-950);
160 }
161
162 .lime {
163 --accent-50: var(--color-lime-50);
164 --accent-100: var(--color-lime-100);
165 --accent-200: var(--color-lime-200);
166 --accent-300: var(--color-lime-300);
167 --accent-400: var(--color-lime-400);
168 --accent-500: var(--color-lime-500);
169 --accent-600: var(--color-lime-600);
170 --accent-700: var(--color-lime-700);
171 --accent-800: var(--color-lime-800);
172 --accent-900: var(--color-lime-900);
173 --accent-950: var(--color-lime-950);
174 }
175
176 .green {
177 --accent-50: var(--color-green-50);
178 --accent-100: var(--color-green-100);
179 --accent-200: var(--color-green-200);
180 --accent-300: var(--color-green-300);
181 --accent-400: var(--color-green-400);
182 --accent-500: var(--color-green-500);
183 --accent-600: var(--color-green-600);
184 --accent-700: var(--color-green-700);
185 --accent-800: var(--color-green-800);
186 --accent-900: var(--color-green-900);
187 --accent-950: var(--color-green-950);
188 }
189
190 .emerald {
191 --accent-50: var(--color-emerald-50);
192 --accent-100: var(--color-emerald-100);
193 --accent-200: var(--color-emerald-200);
194 --accent-300: var(--color-emerald-300);
195 --accent-400: var(--color-emerald-400);
196 --accent-500: var(--color-emerald-500);
197 --accent-600: var(--color-emerald-600);
198 --accent-700: var(--color-emerald-700);
199 --accent-800: var(--color-emerald-800);
200 --accent-900: var(--color-emerald-900);
201 --accent-950: var(--color-emerald-950);
202 }
203
204 .teal {
205 --accent-50: var(--color-teal-50);
206 --accent-100: var(--color-teal-100);
207 --accent-200: var(--color-teal-200);
208 --accent-300: var(--color-teal-300);
209 --accent-400: var(--color-teal-400);
210 --accent-500: var(--color-teal-500);
211 --accent-600: var(--color-teal-600);
212 --accent-700: var(--color-teal-700);
213 --accent-800: var(--color-teal-800);
214 --accent-900: var(--color-teal-900);
215 --accent-950: var(--color-teal-950);
216 }
217
218 .cyan {
219 --accent-50: var(--color-cyan-50);
220 --accent-100: var(--color-cyan-100);
221 --accent-200: var(--color-cyan-200);
222 --accent-300: var(--color-cyan-300);
223 --accent-400: var(--color-cyan-400);
224 --accent-500: var(--color-cyan-500);
225 --accent-600: var(--color-cyan-600);
226 --accent-700: var(--color-cyan-700);
227 --accent-800: var(--color-cyan-800);
228 --accent-900: var(--color-cyan-900);
229 --accent-950: var(--color-cyan-950);
230 }
231
232 .sky {
233 --accent-50: var(--color-sky-50);
234 --accent-100: var(--color-sky-100);
235 --accent-200: var(--color-sky-200);
236 --accent-300: var(--color-sky-300);
237 --accent-400: var(--color-sky-400);
238 --accent-500: var(--color-sky-500);
239 --accent-600: var(--color-sky-600);
240 --accent-700: var(--color-sky-700);
241 --accent-800: var(--color-sky-800);
242 --accent-900: var(--color-sky-900);
243 --accent-950: var(--color-sky-950);
244 }
245 .blue {
246 --accent-50: var(--color-blue-50);
247 --accent-100: var(--color-blue-100);
248 --accent-200: var(--color-blue-200);
249 --accent-300: var(--color-blue-300);
250 --accent-400: var(--color-blue-400);
251 --accent-500: var(--color-blue-500);
252 --accent-600: var(--color-blue-600);
253 --accent-700: var(--color-blue-700);
254 --accent-800: var(--color-blue-800);
255 --accent-900: var(--color-blue-900);
256 --accent-950: var(--color-blue-950);
257 }
258
259 .indigo {
260 --accent-50: var(--color-indigo-50);
261 --accent-100: var(--color-indigo-100);
262 --accent-200: var(--color-indigo-200);
263 --accent-300: var(--color-indigo-300);
264 --accent-400: var(--color-indigo-400);
265 --accent-500: var(--color-indigo-500);
266 --accent-600: var(--color-indigo-600);
267 --accent-700: var(--color-indigo-700);
268 --accent-800: var(--color-indigo-800);
269 --accent-900: var(--color-indigo-900);
270 --accent-950: var(--color-indigo-950);
271 }
272
273 .violet {
274 --accent-50: var(--color-violet-50);
275 --accent-100: var(--color-violet-100);
276 --accent-200: var(--color-violet-200);
277 --accent-300: var(--color-violet-300);
278 --accent-400: var(--color-violet-400);
279 --accent-500: var(--color-violet-500);
280 --accent-600: var(--color-violet-600);
281 --accent-700: var(--color-violet-700);
282 --accent-800: var(--color-violet-800);
283 --accent-900: var(--color-violet-900);
284 --accent-950: var(--color-violet-950);
285 }
286
287 .purple {
288 --accent-50: var(--color-purple-50);
289 --accent-100: var(--color-purple-100);
290 --accent-200: var(--color-purple-200);
291 --accent-300: var(--color-purple-300);
292 --accent-400: var(--color-purple-400);
293 --accent-500: var(--color-purple-500);
294 --accent-600: var(--color-purple-600);
295 --accent-700: var(--color-purple-700);
296 --accent-800: var(--color-purple-800);
297 --accent-900: var(--color-purple-900);
298 --accent-950: var(--color-purple-950);
299 }
300
301 .fuchsia {
302 --accent-50: var(--color-fuchsia-50);
303 --accent-100: var(--color-fuchsia-100);
304 --accent-200: var(--color-fuchsia-200);
305 --accent-300: var(--color-fuchsia-300);
306 --accent-400: var(--color-fuchsia-400);
307 --accent-500: var(--color-fuchsia-500);
308 --accent-600: var(--color-fuchsia-600);
309 --accent-700: var(--color-fuchsia-700);
310 --accent-800: var(--color-fuchsia-800);
311 --accent-900: var(--color-fuchsia-900);
312 --accent-950: var(--color-fuchsia-950);
313 }
314
315 .pink {
316 --accent-50: var(--color-pink-50);
317 --accent-100: var(--color-pink-100);
318 --accent-200: var(--color-pink-200);
319 --accent-300: var(--color-pink-300);
320 --accent-400: var(--color-pink-400);
321 --accent-500: var(--color-pink-500);
322 --accent-600: var(--color-pink-600);
323 --accent-700: var(--color-pink-700);
324 --accent-800: var(--color-pink-800);
325 --accent-900: var(--color-pink-900);
326 --accent-950: var(--color-pink-950);
327 }
328
329 .rose {
330 --accent-50: var(--color-rose-50);
331 --accent-100: var(--color-rose-100);
332 --accent-200: var(--color-rose-200);
333 --accent-300: var(--color-rose-300);
334 --accent-400: var(--color-rose-400);
335 --accent-500: var(--color-rose-500);
336 --accent-600: var(--color-rose-600);
337 --accent-700: var(--color-rose-700);
338 --accent-800: var(--color-rose-800);
339 --accent-900: var(--color-rose-900);
340 --accent-950: var(--color-rose-950);
341 }
342
343 .gray {
344 --base-50: var(--color-gray-50);
345 --base-100: var(--color-gray-100);
346 --base-200: var(--color-gray-200);
347 --base-300: var(--color-gray-300);
348 --base-400: var(--color-gray-400);
349 --base-500: var(--color-gray-500);
350 --base-600: var(--color-gray-600);
351 --base-700: var(--color-gray-700);
352 --base-800: var(--color-gray-800);
353 --base-900: var(--color-gray-900);
354 --base-950: var(--color-gray-950);
355 }
356
357 .zinc {
358 --base-50: var(--color-zinc-50);
359 --base-100: var(--color-zinc-100);
360 --base-200: var(--color-zinc-200);
361 --base-300: var(--color-zinc-300);
362 --base-400: var(--color-zinc-400);
363 --base-500: var(--color-zinc-500);
364 --base-600: var(--color-zinc-600);
365 --base-700: var(--color-zinc-700);
366 --base-800: var(--color-zinc-800);
367 --base-900: var(--color-zinc-900);
368 --base-950: var(--color-zinc-950);
369 }
370
371 .neutral {
372 --base-50: var(--color-neutral-50);
373 --base-100: var(--color-neutral-100);
374 --base-200: var(--color-neutral-200);
375 --base-300: var(--color-neutral-300);
376 --base-400: var(--color-neutral-400);
377 --base-500: var(--color-neutral-500);
378 --base-600: var(--color-neutral-600);
379 --base-700: var(--color-neutral-700);
380 --base-800: var(--color-neutral-800);
381 --base-900: var(--color-neutral-900);
382 --base-950: var(--color-neutral-950);
383 }
384
385 .stone {
386 --base-50: var(--color-stone-50);
387 --base-100: var(--color-stone-100);
388 --base-200: var(--color-stone-200);
389 --base-300: var(--color-stone-300);
390 --base-400: var(--color-stone-400);
391 --base-500: var(--color-stone-500);
392 --base-600: var(--color-stone-600);
393 --base-700: var(--color-stone-700);
394 --base-800: var(--color-stone-800);
395 --base-900: var(--color-stone-900);
396 --base-950: var(--color-stone-950);
397 }
398
399 .slate {
400 --base-50: var(--color-slate-50);
401 --base-100: var(--color-slate-100);
402 --base-200: var(--color-slate-200);
403 --base-300: var(--color-slate-300);
404 --base-400: var(--color-slate-400);
405 --base-500: var(--color-slate-500);
406 --base-600: var(--color-slate-600);
407 --base-700: var(--color-slate-700);
408 --base-800: var(--color-slate-800);
409 --base-900: var(--color-slate-900);
410 --base-950: var(--color-slate-950);
411 }
412}