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