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