gui.do
Sifa professional network frontend (Next.js, React, TailwindCSS)
sifa.id/
1@import 'tailwindcss';
2@import 'tw-animate-css';
3@import 'shadcn/tailwind.css';
4@plugin '@tailwindcss/typography';
5
6@custom-variant dark (&:is(.dark *));
7@custom-variant pointer-coarse (@media (pointer: coarse));
8@custom-variant pointer-fine (@media (pointer: fine));
9
10@theme inline {
11 --color-background: var(--background);
12 --color-foreground: var(--foreground);
13 --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14 --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
15 --color-sidebar-ring: var(--sidebar-ring);
16 --color-sidebar-border: var(--sidebar-border);
17 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
18 --color-sidebar-accent: var(--sidebar-accent);
19 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
20 --color-sidebar-primary: var(--sidebar-primary);
21 --color-sidebar-foreground: var(--sidebar-foreground);
22 --color-sidebar: var(--sidebar);
23 --color-chart-5: var(--chart-5);
24 --color-chart-4: var(--chart-4);
25 --color-chart-3: var(--chart-3);
26 --color-chart-2: var(--chart-2);
27 --color-chart-1: var(--chart-1);
28 --color-ring: var(--ring);
29 --color-input: var(--input);
30 --color-border: var(--border);
31 --color-destructive: var(--destructive);
32 --color-warning-bg: var(--warning-bg);
33 --color-warning-text: var(--warning-text);
34 --color-warning-border: var(--warning-border);
35 --color-accent-foreground: var(--accent-foreground);
36 --color-accent: var(--accent);
37 --color-muted-foreground: var(--muted-foreground);
38 --color-muted: var(--muted);
39 --color-secondary-foreground: var(--secondary-foreground);
40 --color-secondary: var(--secondary);
41 --color-primary-foreground: var(--primary-foreground);
42 --color-primary: var(--primary);
43 --color-popover-foreground: var(--popover-foreground);
44 --color-popover: var(--popover);
45 --color-card-foreground: var(--card-foreground);
46 --color-card: var(--card);
47 --radius-sm: calc(var(--radius) * 0.6);
48 --radius-md: calc(var(--radius) * 0.8);
49 --radius-lg: var(--radius);
50 --radius-xl: calc(var(--radius) * 1.4);
51 --radius-2xl: calc(var(--radius) * 1.8);
52 --radius-3xl: calc(var(--radius) * 2.2);
53 --radius-4xl: calc(var(--radius) * 2.6);
54}
55
56:root {
57 --background: oklch(1 0 0);
58 --foreground: oklch(0.145 0 0);
59 --card: oklch(1 0 0);
60 --card-foreground: oklch(0.145 0 0);
61 --popover: oklch(1 0 0);
62 --popover-foreground: oklch(0.145 0 0);
63 --primary: oklch(0.205 0 0);
64 --primary-foreground: oklch(0.985 0 0);
65 --secondary: oklch(0.97 0 0);
66 --secondary-foreground: oklch(0.205 0 0);
67 --muted: oklch(0.97 0 0);
68 --muted-foreground: oklch(0.521 0 0);
69 --accent: oklch(0.97 0 0);
70 --accent-foreground: oklch(0.205 0 0);
71 --destructive: oklch(0.58 0.22 27);
72 --border: oklch(0.922 0 0);
73 --input: oklch(0.922 0 0);
74 --ring: oklch(0.708 0 0);
75 --chart-1: oklch(0.809 0.105 251.813);
76 --chart-2: oklch(0.623 0.214 259.815);
77 --chart-3: oklch(0.546 0.245 262.881);
78 --chart-4: oklch(0.488 0.243 264.376);
79 --chart-5: oklch(0.424 0.199 265.638);
80 --radius: 0.625rem;
81 --sidebar: oklch(0.985 0 0);
82 --sidebar-foreground: oklch(0.145 0 0);
83 --sidebar-primary: oklch(0.205 0 0);
84 --sidebar-primary-foreground: oklch(0.985 0 0);
85 --sidebar-accent: oklch(0.97 0 0);
86 --sidebar-accent-foreground: oklch(0.205 0 0);
87 --sidebar-border: oklch(0.922 0 0);
88 --sidebar-ring: oklch(0.708 0 0);
89
90 /* ATproto app colors — stripe (saturated accent), badge-bg, badge-text */
91 --app-bluesky-stripe: oklch(0.55 0.17 230);
92 --app-bluesky-badge-bg: oklch(0.93 0.03 230);
93 --app-bluesky-badge-text: oklch(0.35 0.1 230);
94
95 --app-tangled-stripe: oklch(0.55 0.15 160);
96 --app-tangled-badge-bg: oklch(0.93 0.03 160);
97 --app-tangled-badge-text: oklch(0.35 0.1 160);
98
99 --app-smokesignal-stripe: oklch(0.58 0.18 50);
100 --app-smokesignal-badge-bg: oklch(0.93 0.03 50);
101 --app-smokesignal-badge-text: oklch(0.38 0.12 50);
102
103 --app-flashes-stripe: oklch(0.55 0.2 350);
104 --app-flashes-badge-bg: oklch(0.93 0.03 350);
105 --app-flashes-badge-text: oklch(0.38 0.12 350);
106
107 --app-whitewind-stripe: oklch(0.45 0.02 260);
108 --app-whitewind-badge-bg: oklch(0.93 0.01 260);
109 --app-whitewind-badge-text: oklch(0.35 0.03 260);
110
111 --app-frontpage-stripe: oklch(0.5 0.22 290);
112 --app-frontpage-badge-bg: oklch(0.93 0.04 290);
113 --app-frontpage-badge-text: oklch(0.38 0.14 290);
114
115 --app-picosky-stripe: oklch(0.55 0.2 350);
116 --app-picosky-badge-bg: oklch(0.93 0.03 350);
117 --app-picosky-badge-text: oklch(0.38 0.12 350);
118
119 --app-linkat-stripe: oklch(0.55 0.15 160);
120 --app-linkat-badge-bg: oklch(0.93 0.03 160);
121 --app-linkat-badge-text: oklch(0.35 0.1 160);
122
123 --app-pastesphere-stripe: oklch(0.58 0.16 75);
124 --app-pastesphere-badge-bg: oklch(0.93 0.03 75);
125 --app-pastesphere-badge-text: oklch(0.38 0.1 75);
126
127 --app-kipclip-stripe: oklch(0.55 0.12 180);
128 --app-kipclip-badge-bg: oklch(0.93 0.03 180);
129 --app-kipclip-badge-text: oklch(0.35 0.1 180);
130
131 --app-standard-stripe: oklch(0.5 0.08 270);
132 --app-standard-badge-bg: oklch(0.93 0.02 270);
133 --app-standard-badge-text: oklch(0.35 0.06 270);
134
135 --app-keytrace-stripe: oklch(0.52 0.14 140);
136 --app-keytrace-badge-bg: oklch(0.93 0.03 140);
137 --app-keytrace-badge-text: oklch(0.35 0.1 140);
138
139 --app-aetheros-stripe: oklch(0.5 0.15 300);
140 --app-aetheros-badge-bg: oklch(0.93 0.03 300);
141 --app-aetheros-badge-text: oklch(0.35 0.1 300);
142
143 --app-roomy-stripe: oklch(0.55 0.14 30);
144 --app-roomy-badge-bg: oklch(0.93 0.03 30);
145 --app-roomy-badge-text: oklch(0.35 0.1 30);
146
147 --app-popfeed-stripe: oklch(0.55 0.2 10);
148 --app-popfeed-badge-bg: oklch(0.93 0.04 10);
149 --app-popfeed-badge-text: oklch(0.38 0.12 10);
150
151 --app-streamplace-stripe: oklch(0.55 0.18 350);
152 --app-streamplace-badge-bg: oklch(0.93 0.04 350);
153 --app-streamplace-badge-text: oklch(0.38 0.12 350);
154
155 --app-semble-stripe: oklch(0.52 0.14 200);
156 --app-semble-badge-bg: oklch(0.93 0.03 200);
157 --app-semble-badge-text: oklch(0.35 0.1 200);
158
159 --app-fallback-stripe: oklch(0.5 0.01 260);
160 --app-fallback-badge-bg: oklch(0.93 0.01 260);
161 --app-fallback-badge-text: oklch(0.35 0.02 260);
162
163 /* Alpha warning banner */
164 --warning-bg: oklch(0.94 0.04 27);
165 --warning-text: oklch(0.35 0.12 27);
166 --warning-border: oklch(0.88 0.06 27);
167
168 /* Heatmap */
169 --heatmap-empty: oklch(0.95 0 0);
170 --heatmap-border: oklch(0.9 0 0);
171 --heatmap-label: oklch(0.55 0 0);
172 --app-linkat-heatmap: oklch(0.55 0.15 145);
173 --app-picosky-heatmap: oklch(0.55 0.2 335);
174}
175
176.dark {
177 --background: oklch(0.145 0 0);
178 --foreground: oklch(0.985 0 0);
179 --card: oklch(0.205 0 0);
180 --card-foreground: oklch(0.985 0 0);
181 --popover: oklch(0.205 0 0);
182 --popover-foreground: oklch(0.985 0 0);
183 --primary: oklch(0.87 0 0);
184 --primary-foreground: oklch(0.205 0 0);
185 --secondary: oklch(0.269 0 0);
186 --secondary-foreground: oklch(0.985 0 0);
187 --muted: oklch(0.269 0 0);
188 --muted-foreground: oklch(0.708 0 0);
189 --accent: oklch(0.371 0 0);
190 --accent-foreground: oklch(0.985 0 0);
191 --destructive: oklch(0.704 0.191 22.216);
192 --border: oklch(1 0 0 / 10%);
193 --input: oklch(1 0 0 / 15%);
194 --ring: oklch(0.556 0 0);
195 --chart-1: oklch(0.809 0.105 251.813);
196 --chart-2: oklch(0.623 0.214 259.815);
197 --chart-3: oklch(0.546 0.245 262.881);
198 --chart-4: oklch(0.488 0.243 264.376);
199 --chart-5: oklch(0.424 0.199 265.638);
200 --sidebar: oklch(0.205 0 0);
201 --sidebar-foreground: oklch(0.985 0 0);
202 --sidebar-primary: oklch(0.488 0.243 264.376);
203 --sidebar-primary-foreground: oklch(0.985 0 0);
204 --sidebar-accent: oklch(0.269 0 0);
205 --sidebar-accent-foreground: oklch(0.985 0 0);
206 --sidebar-border: oklch(1 0 0 / 10%);
207 --sidebar-ring: oklch(0.556 0 0);
208
209 /* ATproto app colors — dark mode */
210 --app-bluesky-stripe: oklch(0.6 0.17 230);
211 --app-bluesky-badge-bg: oklch(0.25 0.06 230 / 40%);
212 --app-bluesky-badge-text: oklch(0.78 0.1 230);
213
214 --app-tangled-stripe: oklch(0.6 0.15 160);
215 --app-tangled-badge-bg: oklch(0.25 0.06 160 / 40%);
216 --app-tangled-badge-text: oklch(0.78 0.1 160);
217
218 --app-smokesignal-stripe: oklch(0.63 0.18 50);
219 --app-smokesignal-badge-bg: oklch(0.25 0.06 50 / 40%);
220 --app-smokesignal-badge-text: oklch(0.78 0.1 50);
221
222 --app-flashes-stripe: oklch(0.6 0.2 350);
223 --app-flashes-badge-bg: oklch(0.25 0.06 350 / 40%);
224 --app-flashes-badge-text: oklch(0.78 0.1 350);
225
226 --app-whitewind-stripe: oklch(0.5 0.02 260);
227 --app-whitewind-badge-bg: oklch(0.25 0.02 260 / 40%);
228 --app-whitewind-badge-text: oklch(0.75 0.03 260);
229
230 --app-frontpage-stripe: oklch(0.55 0.22 290);
231 --app-frontpage-badge-bg: oklch(0.25 0.07 290 / 40%);
232 --app-frontpage-badge-text: oklch(0.78 0.12 290);
233
234 --app-picosky-stripe: oklch(0.6 0.2 350);
235 --app-picosky-badge-bg: oklch(0.25 0.06 350 / 40%);
236 --app-picosky-badge-text: oklch(0.78 0.1 350);
237
238 --app-linkat-stripe: oklch(0.6 0.15 160);
239 --app-linkat-badge-bg: oklch(0.25 0.06 160 / 40%);
240 --app-linkat-badge-text: oklch(0.78 0.1 160);
241
242 --app-pastesphere-stripe: oklch(0.63 0.16 75);
243 --app-pastesphere-badge-bg: oklch(0.25 0.05 75 / 40%);
244 --app-pastesphere-badge-text: oklch(0.78 0.1 75);
245
246 --app-kipclip-stripe: oklch(0.6 0.12 180);
247 --app-kipclip-badge-bg: oklch(0.25 0.06 180 / 40%);
248 --app-kipclip-badge-text: oklch(0.78 0.1 180);
249
250 --app-standard-stripe: oklch(0.55 0.08 270);
251 --app-standard-badge-bg: oklch(0.25 0.04 270 / 40%);
252 --app-standard-badge-text: oklch(0.78 0.06 270);
253
254 --app-keytrace-stripe: oklch(0.57 0.14 140);
255 --app-keytrace-badge-bg: oklch(0.25 0.06 140 / 40%);
256 --app-keytrace-badge-text: oklch(0.78 0.1 140);
257
258 --app-aetheros-stripe: oklch(0.55 0.15 300);
259 --app-aetheros-badge-bg: oklch(0.25 0.06 300 / 40%);
260 --app-aetheros-badge-text: oklch(0.78 0.1 300);
261
262 --app-roomy-stripe: oklch(0.6 0.14 30);
263 --app-roomy-badge-bg: oklch(0.25 0.05 30 / 40%);
264 --app-roomy-badge-text: oklch(0.78 0.1 30);
265
266 --app-popfeed-stripe: oklch(0.6 0.2 10);
267 --app-popfeed-badge-bg: oklch(0.25 0.06 10 / 40%);
268 --app-popfeed-badge-text: oklch(0.78 0.12 10);
269
270 --app-streamplace-stripe: oklch(0.6 0.18 350);
271 --app-streamplace-badge-bg: oklch(0.25 0.06 350 / 40%);
272 --app-streamplace-badge-text: oklch(0.78 0.12 350);
273
274 --app-semble-stripe: oklch(0.57 0.14 200);
275 --app-semble-badge-bg: oklch(0.25 0.06 200 / 40%);
276 --app-semble-badge-text: oklch(0.78 0.1 200);
277
278 --app-fallback-stripe: oklch(0.55 0.01 260);
279 --app-fallback-badge-bg: oklch(0.25 0.01 260 / 40%);
280 --app-fallback-badge-text: oklch(0.75 0.02 260);
281
282 /* Alpha warning banner */
283 --warning-bg: oklch(0.25 0.06 27);
284 --warning-text: oklch(0.85 0.08 27);
285 --warning-border: oklch(0.35 0.08 27);
286
287 /* Heatmap */
288 --heatmap-empty: oklch(0.2 0 0);
289 --heatmap-border: oklch(0.25 0 0);
290 --heatmap-label: oklch(0.55 0 0);
291 --app-linkat-heatmap: oklch(0.6 0.15 145);
292 --app-picosky-heatmap: oklch(0.6 0.2 335);
293}
294
295@layer base {
296 * {
297 @apply border-border outline-ring/50;
298 }
299 body {
300 @apply bg-background text-foreground;
301 }
302 html {
303 @apply font-sans;
304 }
305}
306
307@keyframes marquee {
308 0% {
309 transform: translateX(0);
310 }
311 100% {
312 transform: translateX(-50%);
313 }
314}
315
316.animate-marquee {
317 animation: marquee 30s linear infinite;
318}
319
320@keyframes scale-in {
321 from {
322 transform: scale(0.5);
323 opacity: 0;
324 }
325 to {
326 transform: scale(1);
327 opacity: 1;
328 }
329}
330
331.animate-scale-in {
332 animation: scale-in 300ms ease-out;
333}