vorcigernix.tngl.sh
Open Source Team Metrics based on PRs
1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5
6@theme inline {
7 --color-background: var(--background);
8 --color-foreground: var(--foreground);
9 --color-card: var(--card);
10 --color-card-foreground: var(--card-foreground);
11 --color-popover: var(--popover);
12 --color-popover-foreground: var(--popover-foreground);
13 --color-primary: var(--primary);
14 --color-primary-foreground: var(--primary-foreground);
15 --color-secondary: var(--secondary);
16 --color-secondary-foreground: var(--secondary-foreground);
17 --color-muted: var(--muted);
18 --color-muted-foreground: var(--muted-foreground);
19 --color-accent: var(--accent);
20 --color-accent-foreground: var(--accent-foreground);
21 --color-destructive: var(--destructive);
22 --color-border: var(--border);
23 --color-input: var(--input);
24 --color-ring: var(--ring);
25 --color-chart-1: var(--chart-1);
26 --color-chart-2: var(--chart-2);
27 --color-chart-3: var(--chart-3);
28 --color-chart-4: var(--chart-4);
29 --color-chart-5: var(--chart-5);
30 --color-sidebar: var(--sidebar);
31 --color-sidebar-foreground: var(--sidebar-foreground);
32 --color-sidebar-primary: var(--sidebar-primary);
33 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
34 --color-sidebar-accent: var(--sidebar-accent);
35 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
36 --color-sidebar-border: var(--sidebar-border);
37 --color-sidebar-ring: var(--sidebar-ring);
38
39 --font-sans: var(--font-sans);
40 --font-mono: var(--font-mono);
41 --font-serif: var(--font-serif);
42
43 --radius-sm: calc(var(--radius) - 4px);
44 --radius-md: calc(var(--radius) - 2px);
45 --radius-lg: var(--radius);
46 --radius-xl: calc(var(--radius) + 4px);
47
48 --shadow-2xs: var(--shadow-2xs);
49 --shadow-xs: var(--shadow-xs);
50 --shadow-sm: var(--shadow-sm);
51 --shadow: var(--shadow);
52 --shadow-md: var(--shadow-md);
53 --shadow-lg: var(--shadow-lg);
54 --shadow-xl: var(--shadow-xl);
55 --shadow-2xl: var(--shadow-2xl);
56}
57
58:root {
59 --background: oklch(0.97 0.01 316.68);
60 --foreground: oklch(0.37 0.03 259.73);
61 --card: oklch(1.00 0 0);
62 --card-foreground: oklch(0.37 0.03 259.73);
63 --popover: oklch(1.00 0 0);
64 --popover-foreground: oklch(0.37 0.03 259.73);
65 --primary: oklch(0.71 0.16 293.40);
66 --primary-foreground: oklch(1.00 0 0);
67 --secondary: oklch(0.91 0.05 306.07);
68 --secondary-foreground: oklch(0.45 0.03 257.68);
69 --muted: oklch(0.95 0.03 307.19);
70 --muted-foreground: oklch(0.55 0.02 264.41);
71 --accent: oklch(0.94 0.03 322.47);
72 --accent-foreground: oklch(0.37 0.03 259.73);
73 --destructive: oklch(0.81 0.10 19.47);
74 --border: oklch(0.91 0.05 306.07);
75 --input: oklch(0.91 0.05 306.07);
76 --ring: oklch(0.71 0.16 293.40);
77 --chart-1: oklch(0.63 0.22 258.89);
78 --chart-2: oklch(0.67 0.19 26.11);
79 --chart-3: oklch(0.71 0.16 293.40);
80 --chart-4: oklch(0.70 0.18 162.48);
81 --chart-5: oklch(0.43 0.21 292.63);
82 --sidebar: oklch(0.91 0.05 306.07);
83 --sidebar-foreground: oklch(0.37 0.03 259.73);
84 --sidebar-primary: oklch(0.71 0.16 293.40);
85 --sidebar-primary-foreground: oklch(1.00 0 0);
86 --sidebar-accent: oklch(0.94 0.03 322.47);
87 --sidebar-accent-foreground: oklch(0.37 0.03 259.73);
88 --sidebar-border: oklch(0.91 0.05 306.07);
89 --sidebar-ring: oklch(0.71 0.16 293.40);
90
91 /* Custom neutral card colors to reduce purple overuse */
92 --card-neutral: oklch(0.98 0.01 0);
93 --card-neutral-foreground: oklch(0.37 0.03 259.73);
94 --card-subtle: oklch(0.96 0.02 0);
95 --card-accent: oklch(0.94 0.02 0);
96
97 /* Brand-tinted background veils (light) */
98 --bg-accent-1: oklch(0.71 0.16 293.40 / 0.06);
99 --bg-accent-2: oklch(0.71 0.16 293.40 / 0.04);
100
101 --font-sans: Open Sans, sans-serif;
102 --font-serif: Source Serif 4, serif;
103 --font-mono: IBM Plex Mono, monospace;
104
105 --radius: 1.5rem;
106
107 --shadow-2xs: 0px 8px 16px -4px oklch(0.00 0 0 / 0.04);
108 --shadow-xs: 0px 8px 16px -4px oklch(0.00 0 0 / 0.04);
109 --shadow-sm: 0px 8px 16px -4px oklch(0.00 0 0 / 0.08), 0px 1px 2px -5px oklch(0.00 0 0 / 0.08);
110 --shadow: 0px 8px 16px -4px oklch(0.00 0 0 / 0.08), 0px 1px 2px -5px oklch(0.00 0 0 / 0.08);
111 --shadow-md: 0px 8px 16px -4px oklch(0.00 0 0 / 0.08), 0px 2px 4px -5px oklch(0.00 0 0 / 0.08);
112 --shadow-lg: 0px 8px 16px -4px oklch(0.00 0 0 / 0.08), 0px 4px 6px -5px oklch(0.00 0 0 / 0.08);
113 --shadow-xl: 0px 8px 16px -4px oklch(0.00 0 0 / 0.08), 0px 8px 10px -5px oklch(0.00 0 0 / 0.08);
114 --shadow-2xl: 0px 8px 16px -4px oklch(0.00 0 0 / 0.20);
115
116}
117
118.dark {
119 /* Softer dark neutrals to avoid harsh black and blue undertones */
120 --background: oklch(0.21 0.01 260);
121 --foreground: oklch(0.92 0.02 260);
122 --card: oklch(0.24 0.01 260);
123 --card-foreground: oklch(0.92 0.02 260);
124 --popover: oklch(0.24 0.01 260);
125 --popover-foreground: oklch(0.92 0.02 260);
126 --primary: oklch(0.79 0.12 295.97);
127 --primary-foreground: oklch(0.15 0.01 295.97);
128 --secondary: oklch(0.34 0.04 309.13);
129 --secondary-foreground: oklch(0.87 0.01 261.81);
130 --muted: oklch(0.26 0.01 260);
131 --muted-foreground: oklch(0.72 0.02 260);
132 --accent: oklch(0.30 0.01 260);
133 --accent-foreground: oklch(0.90 0.02 260);
134 --destructive: oklch(0.81 0.10 19.47);
135 --border: oklch(0.32 0.01 260);
136 --input: oklch(0.32 0.01 260);
137 --ring: oklch(0.79 0.12 295.97);
138 --chart-1: oklch(0.75 0.15 258.89);
139 --chart-2: oklch(0.69 0.17 26.11);
140 --chart-3: oklch(0.79 0.12 295.97);
141 --chart-4: oklch(0.72 0.16 162.48);
142 --chart-5: oklch(0.49 0.24 292.70);
143 --sidebar: oklch(0.31 0.03 295.97);
144 --sidebar-foreground: oklch(0.93 0.03 273.66);
145 --sidebar-primary: oklch(0.79 0.12 295.97);
146 --sidebar-primary-foreground: oklch(0.22 0.01 52.96);
147 --sidebar-accent: oklch(0.39 0.05 304.68);
148 --sidebar-accent-foreground: oklch(0.87 0.01 261.81);
149 --sidebar-border: oklch(0.34 0.04 309.13);
150 --sidebar-ring: oklch(0.79 0.12 295.97);
151
152 /* Custom neutral card colors to reduce purple overuse */
153 --card-neutral: oklch(0.22 0.02 0);
154 --card-neutral-foreground: oklch(0.93 0.03 273.66);
155 --card-subtle: oklch(0.18 0.01 0);
156 --card-accent: oklch(0.26 0.02 0);
157
158 /* Brand-tinted background veils (dark) */
159 --bg-accent-1: oklch(0.79 0.12 295.97 / 0.09);
160 --bg-accent-2: oklch(0.79 0.12 295.97 / 0.06);
161
162 --shadow-2xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
163 --shadow-xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
164 --shadow-sm: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10);
165 --shadow: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10);
166 --shadow-md: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 2px 4px -1px oklch(0.00 0 0 / 0.10);
167 --shadow-lg: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 4px 6px -1px oklch(0.00 0 0 / 0.10);
168 --shadow-xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 8px 10px -1px oklch(0.00 0 0 / 0.10);
169 --shadow-2xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.25);
170}
171
172
173
174@media (prefers-color-scheme: dark) {
175 :root {
176 color-scheme: dark;
177 }
178}
179
180@media (prefers-color-scheme: light) {
181 :root {
182 color-scheme: light;
183 }
184}
185
186@layer base {
187 html {
188 background-color: var(--sidebar);
189 }
190 * {
191 @apply border-border outline-ring/50;
192 }
193 body {
194 @apply bg-background text-foreground;
195 background-image: radial-gradient(80rem 40rem at 50% -10%, var(--bg-accent-1), transparent),
196 radial-gradient(80rem 40rem at 50% 110%, var(--bg-accent-2), transparent);
197 background-attachment: fixed;
198 }
199}
200
201/* Custom styles for the prcat logo */
202.logo-text {
203 font-family: var(--font-logo);
204 font-weight: 400;
205 letter-spacing: -0.02em;
206}
207
208/* Background gradients */
209.bg-gradient-radial {
210 background-image: radial-gradient(var(--tw-gradient-stops));
211}
212
213/* 3D transformation utilities for screenshots */
214@layer utilities {
215 .perspective-1000 {
216 perspective: 1000px;
217 }
218
219 .perspective-1500 {
220 perspective: 1500px;
221 }
222
223 .rotate-x-5 {
224 transform: rotateX(5deg);
225 }
226
227 .rotate-x-8 {
228 transform: rotateX(8deg);
229 }
230
231 .rotate-x-12 {
232 transform: rotateX(12deg);
233 }
234
235 .rotate-x-n5 {
236 transform: rotateX(-5deg);
237 }
238
239 .rotate-x-n10 {
240 transform: rotateX(-10deg);
241 }
242
243 .rotate-y-12 {
244 transform: rotateY(12deg);
245 }
246
247 .rotate-y-15 {
248 transform: rotateY(15deg);
249 }
250
251 .rotate-y-n8 {
252 transform: rotateY(-8deg);
253 }
254
255 .rotate-y-n10 {
256 transform: rotateY(-10deg);
257 }
258
259 .transform-style-3d {
260 transform-style: preserve-3d;
261 }
262
263 .delay-150 {
264 transition-delay: var(--delay-150);
265 }
266
267 .delay-300 {
268 transition-delay: var(--delay-300);
269 }
270
271 .delay-450 {
272 transition-delay: var(--delay-450);
273 }
274}
275
276/* Floating animations for screenshots */
277@keyframes float-1 {
278 0%, 100% {
279 transform: rotateX(-10deg) rotateY(15deg) translateZ(0);
280 }
281 50% {
282 transform: rotateX(-8deg) rotateY(16deg) translateZ(10px);
283 }
284}
285
286@keyframes float-2 {
287 0%, 100% {
288 transform: rotateX(5deg) rotateY(-10deg) translateZ(0);
289 }
290 50% {
291 transform: rotateX(6deg) rotateY(-11deg) translateZ(8px);
292 }
293}
294
295@keyframes float-3 {
296 0%, 100% {
297 transform: rotateX(8deg) rotateY(12deg) translateZ(0);
298 }
299 50% {
300 transform: rotateX(9deg) rotateY(13deg) translateZ(5px);
301 }
302}
303
304@keyframes float-4 {
305 0%, 100% {
306 transform: rotateX(-5deg) rotateY(-8deg) translateZ(0);
307 }
308 50% {
309 transform: rotateX(-4deg) rotateY(-7deg) translateZ(12px);
310 }
311}
312
313.animate-float-1 {
314 animation: float-1 7s ease-in-out infinite;
315}
316
317.animate-float-2 {
318 animation: float-2 8s ease-in-out infinite;
319}
320
321.animate-float-3 {
322 animation: float-3 9s ease-in-out infinite;
323}
324
325.animate-float-4 {
326 animation: float-4 10s ease-in-out infinite;
327}