A very performant and light (2mb in memory) link shortener and tracker. Written in Rust and React and uses Postgres/SQLite.
nekomimi.pet
1@import "tailwindcss";
2
3@variant dark (&:where(.dark, .dark *));
4
5@plugin "tailwindcss-animate";
6
7@theme inline {
8 --color-background: var(--background);
9 --color-foreground: var(--foreground);
10 --color-card: var(--card);
11 --color-card-foreground: var(--card-foreground);
12 --color-popover: var(--popover);
13 --color-popover-foreground: var(--popover-foreground);
14 --color-primary: var(--primary);
15 --color-primary-foreground: var(--primary-foreground);
16 --color-secondary: var(--secondary);
17 --color-secondary-foreground: var(--secondary-foreground);
18 --color-muted: var(--muted);
19 --color-muted-foreground: var(--muted-foreground);
20 --color-accent: var(--accent);
21 --color-accent-foreground: var(--accent-foreground);
22 --color-destructive: var(--destructive);
23 --color-destructive-foreground: var(--destructive-foreground);
24 --color-border: var(--border);
25 --color-input: var(--input);
26 --color-ring: var(--ring);
27 --color-chart-1: var(--chart-1);
28 --color-chart-2: var(--chart-2);
29 --color-chart-3: var(--chart-3);
30 --color-chart-4: var(--chart-4);
31 --color-chart-5: var(--chart-5);
32 --radius-lg: var(--radius);
33 --radius-md: calc(var(--radius) - 2px);
34 --radius-sm: calc(var(--radius) - 4px);
35}
36
37/* Default theme */
38:root {
39 --background: var(--color-white);
40 --foreground: var(--color-slate-900);
41 --card: var(--color-white);
42 --card-foreground: var(--color-slate-900);
43 --popover: var(--color-white);
44 --popover-foreground: var(--color-slate-900);
45 --primary: var(--color-slate-900);
46 --primary-foreground: var(--color-slate-50);
47 --secondary: var(--color-slate-100);
48 --secondary-foreground: var(--color-slate-900);
49 --muted: var(--color-slate-100);
50 --muted-foreground: var(--color-slate-500);
51 --accent: var(--color-slate-100);
52 --accent-foreground: var(--color-slate-900);
53 --destructive: var(--color-rose-500);
54 --destructive-foreground: var(--color-slate-50);
55 --border: var(--color-slate-200);
56 --input: var(--color-slate-200);
57 --ring: var(--color-slate-400);
58 --chart-1: hsl(12 76% 61%);
59 --chart-2: hsl(173 58% 39%);
60 --chart-3: hsl(197 37% 24%);
61 --chart-4: hsl(43 74% 66%);
62 --chart-5: hsl(27 87% 67%);
63 --radius: 0.5rem;
64}
65
66.dark {
67 --background: var(--color-zinc-950);
68 --foreground: var(--color-zinc-50);
69 --card: var(--color-zinc-950);
70 --card-foreground: var(--color-zinc-50);
71 --popover: var(--color-zinc-950);
72 --popover-foreground: var(--color-zinc-50);
73 --primary: var(--color-zinc-50);
74 --primary-foreground: var(--color-zinc-900);
75 --secondary: var(--color-zinc-800);
76 --secondary-foreground: var(--color-zinc-50);
77 --muted: var(--color-zinc-800);
78 --muted-foreground: var(--color-zinc-400);
79 --accent: var(--color-zinc-800);
80 --accent-foreground: var(--color-zinc-50);
81 --destructive: var(--color-rose-700);
82 --destructive-foreground: var(--color-zinc-50);
83 --border: var(--color-zinc-800);
84 --input: var(--color-zinc-800);
85 --ring: var(--color-zinc-300);
86 --chart-1: hsl(220 70% 50%);
87 --chart-2: hsl(160 60% 45%);
88 --chart-3: hsl(30 80% 55%);
89 --chart-4: hsl(280 65% 60%);
90 --chart-5: hsl(340 75% 55%);
91}
92
93[data-theme="example"] {
94 --background: var(--color-blue-50);
95 --foreground: var(--color-gray-900);
96 --card: var(--color-blue-100);
97 --card-foreground: var(--color-gray-800);
98 --popover: var(--color-blue-50);
99 --popover-foreground: var(--color-gray-800);
100 --primary: var(--color-blue-100);
101 --primary-foreground: var(--color-gray-900);
102 --secondary: var(--color-blue-400);
103 --secondary-foreground: var(--color-gray-800);
104 --muted: var(--color-emerald-100);
105 --muted-foreground: var(--color-gray-600);
106 --accent: var(--color-emerald-200);
107 --accent-foreground: var(--color-gray-800);
108 --destructive: var(--color-red-700);
109 --destructive-foreground: var(--color-gray-200);
110 --border: var(--color-blue-600);
111 --input: var(--color-blue-800);
112 --ring: var(--color-blue-100);
113 --radius: 0.3rem;
114}
115
116.dark [data-theme="example"],
117.dark[data-theme="example"] {
118 --background: var(--color-gray-900);
119 --foreground: var(--color-gray-200);
120 --card: var(--color-gray-900);
121 --card-foreground: var(--color-gray-200);
122 --popover: var(--color-gray-950);
123 --popover-foreground: var(--color-gray-200);
124 --primary: var(--color-blue-500);
125 --primary-foreground: var(--color-blue-50);
126 --secondary: var(--color-blue-800);
127 --secondary-foreground: var(--color-blue-50);
128 --muted: var(--color-emerald-900);
129 --muted-foreground: var(--color-gray-500);
130 --accent: var(--color-emerald-900);
131 --accent-foreground: var(--color-gray-200);
132 --destructive: var(--color-red-700);
133 --destructive-foreground: var(--color-gray-200);
134 --border: var(--color-blue-800);
135 --input: var(--color-blue-800);
136 --ring: var(--color-blue-100);
137 --radius: 0.3rem;
138}
139
140html,
141body {
142 background-color: var(--background);
143 color: var(--foreground);
144}
145
146body * {
147 border-color: var(--border);
148}
149
150/* Animation utilities */
151@keyframes enter {
152 from {
153 opacity: var(--tw-enter-opacity, 1);
154 transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
155 }
156}
157
158@keyframes exit {
159 to {
160 opacity: var(--tw-exit-opacity, 1);
161 transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
162 }
163}