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