aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/App.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/App.css')
-rw-r--r--frontend/src/App.css229
1 files changed, 223 insertions, 6 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..a4c058b 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,54 @@
1@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2@import "tailwindcss";
3
4@theme {
5 --color-rosewater: #f2d5cf;
6 --color-flamingo: #eebebe;
7 --color-pink: #f4b8e4;
8 --color-mauve: #ca9ee6;
9 --color-red: #e78284;
10 --color-maroon: #ea999c;
11 --color-peach: #ef9f76;
12 --color-yellow: #e5c890;
13 --color-green: #a6d189;
14 --color-teal: #81c8be;
15 --color-sky: #99d1db;
16 --color-sapphire: #85c1dc;
17 --color-blue: #8caaee;
18 --color-lavender: #babbf1;
19 --color-text: #c6d0f5;
20 --color-subtext1: #b5bfe2;
21 --color-subtext0: #a5adce;
22 --color-overlay2: #949cbb;
23 --color-overlay1: #838ba7;
24 --color-overlay0: #737994;
25 --color-surface2: #626880;
26 --color-surface1: #51576d;
27 --color-surface0: #414559;
28 --color-base: #303446;
29 --color-mantle: #292c3c;
30 --color-crust: #232634;
31
32 --color-primary: var(--color-mauve);
33 --color-secondary: var(--color-blue);
34 --color-accent: var(--color-peach);
35 --color-background: var(--color-base);
36 --color-surface: var(--color-surface0);
37 --color-muted: var(--color-overlay0);
38 --color-border: var(--color-surface2);
39 --color-input: var(--color-surface1);
40 --color-foreground: var(--color-text);
41 --color-success: var(--color-green);
42 --color-warning: var(--color-yellow);
43 --color-error: var(--color-red);
44 --color-info: var(--color-blue);
45
46 --font-barlow-condensed-regular: 'BarlowCondensed-Regular';
47 --font-barlow-condensed-bold: 'BarlowCondensed-Bold';
48 --font-barlow-semicondensed-regular: 'BarlowSemiCondensed-Regular';
49 --font-barlow-semicondensed-semibold: 'BarlowSemiCondensed-SemiBold';
50}
51
1main { 52main {
2 overflow: auto; 53 overflow: auto;
3 overflow-x: hidden; 54 overflow-x: hidden;
@@ -10,33 +61,32 @@ main {
10 padding-right: 30px; 61 padding-right: 30px;
11 62
12 font-size: 40px; 63 font-size: 40px;
13 font-family: BarlowSemiCondensed-Regular; 64 font-family: var(--font-barlow-semicondensed-regular);
14 color: #cdcfdf; 65 color: var(--color-text);
15 66
16} 67}
17 68
18a { 69a {
19 color: inherit; 70 color: inherit;
20 width: fit-content;
21} 71}
22 72
23body { 73body {
24 overflow: hidden; 74 overflow: hidden;
25 background-color: #141520; 75 background-color: var(--color-crust);
26 margin: 0; 76 margin: 0;
27} 77}
28 78
29.loader { 79.loader {
30 animation: loader 1.2s ease infinite; 80 animation: loader 1.2s ease infinite;
31 background-size: 400% 300%; 81 background-size: 400% 300%;
32 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); 82 background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
33 user-select: none; 83 user-select: none;
34} 84}
35 85
36.loader-text { 86.loader-text {
37 animation: loader 1.2s ease infinite; 87 animation: loader 1.2s ease infinite;
38 background-size: 400% 300%; 88 background-size: 400% 300%;
39 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); 89 background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
40 user-select: none; 90 user-select: none;
41 color: #00000000; 91 color: #00000000;
42 border-radius: 1000px; 92 border-radius: 1000px;
@@ -76,6 +126,173 @@ body {
76 } 126 }
77} 127}
78 128
129/* Custom Tailwind utilities for Catppuccin Frappe theme */
130@layer utilities {
131 .bg-primary {
132 background-color: var(--color-primary);
133 }
134
135 .bg-secondary {
136 background-color: var(--color-secondary);
137 }
138
139 .bg-accent {
140 background-color: var(--color-accent);
141 }
142
143 .bg-background {
144 background-color: var(--color-background);
145 }
146
147 .bg-surface {
148 background-color: var(--color-surface);
149 }
150
151 .bg-muted {
152 background-color: var(--color-muted);
153 }
154
155 .text-primary {
156 color: var(--color-primary);
157 }
158
159 .text-secondary {
160 color: var(--color-secondary);
161 }
162
163 .text-accent {
164 color: var(--color-accent);
165 }
166
167 .text-foreground {
168 color: var(--color-foreground);
169 }
170
171 .text-muted {
172 color: var(--color-muted);
173 }
174
175 .border-primary {
176 border-color: var(--color-primary);
177 }
178
179 .border-secondary {
180 border-color: var(--color-secondary);
181 }
182
183 .border-muted {
184 border-color: var(--color-border);
185 }
186
187 .hover\:bg-primary:hover {
188 background-color: var(--color-primary);
189 }
190
191 .hover\:bg-secondary:hover {
192 background-color: var(--color-secondary);
193 }
194
195 .hover\:bg-surface:hover {
196 background-color: var(--color-surface);
197 }
198
199 .hover\:text-primary:hover {
200 color: var(--color-primary);
201 }
202
203 .focus\:ring-primary:focus {
204 --tw-ring-color: var(--color-primary);
205 }
206
207 .triangle {
208 width: 0;
209 height: 0;
210 border-left: 5px solid transparent;
211 border-right: 5px solid transparent;
212 border-bottom: 8px solid var(--color-foreground);
213 display: inline-block;
214 }
215
216 .sidebar-button-selected {
217 background-color: var(--color-primary) !important;
218 color: var(--color-background) !important;
219 }
220
221 .sidebar-button-deselected {
222 background-color: var(--color-surface) !important;
223 color: var(--color-foreground) !important;
224 }
225
226 .profileboard-record {
227 background-color: var(--color-surface);
228 border: 1px solid var(--color-border);
229 border-radius: 0.5rem;
230 padding: 0.75rem;
231 margin-bottom: 0.5rem;
232 transition: all 0.2s ease;
233 }
234
235 .profileboard-record:hover {
236 background-color: var(--color-surface1);
237 }
238
239 .difficulty-rating {
240 width: 20px;
241 height: 20px;
242 background-color: var(--color-muted);
243 border-radius: 50%;
244 margin: 0 2px;
245 display: inline-block;
246 }
247
248 .nav-button {
249 background-color: var(--color-surface);
250 color: var(--color-foreground);
251 border: 1px solid var(--color-border);
252 border-radius: 0.5rem;
253 padding: 0.5rem 1rem;
254 transition: all 0.2s ease;
255 display: inline-flex;
256 align-items: center;
257 gap: 0.5rem;
258 text-decoration: none;
259 }
260
261 .nav-button:hover {
262 background-color: var(--color-surface1);
263 }
264
265 .record {
266 background-color: var(--color-surface);
267 border: 1px solid var(--color-border);
268 border-radius: 0.5rem;
269 padding: 0.5rem;
270 margin: 0.25rem;
271 cursor: pointer;
272 transition: all 0.2s ease;
273 }
274
275 .record:hover {
276 background-color: var(--color-surface1);
277 }
278
279 .portal-count {
280 font-size: 3rem;
281 font-weight: bold;
282 color: var(--color-primary);
283 }
284
285 .titles {
286 background-color: var(--color-accent);
287 color: var(--color-background);
288 padding: 0.25rem 0.5rem;
289 border-radius: 1rem;
290 font-size: 0.875rem;
291 margin-right: 0.5rem;
292 display: inline-block;
293 }
294}
295
79@font-face { 296@font-face {
80 font-family: 'BarlowCondensed-Bold'; 297 font-family: 'BarlowCondensed-Bold';
81 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype'); 298 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 19:22:23 +0000