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.css233
1 files changed, 217 insertions, 16 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..464b759 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +1,76 @@
1main { 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 overflow: auto; 2@import "tailwindcss";
3 overflow-x: hidden;
4 position: relative;
5 3
6 width: calc(100% - 380px); 4@theme {
7 height: 100vh; 5 --color-rosewater: #f2d5cf;
8 left: 350px; 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;
9 31
10 padding-right: 30px; 32 --color-primary: var(--color-mauve);
11 33 --color-secondary: var(--color-blue);
12 font-size: 40px; 34 --color-accent: var(--color-peach);
13 font-family: BarlowSemiCondensed-Regular; 35 --color-background: var(--color-base);
14 color: #cdcfdf; 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);
15 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';
16} 50}
17 51
52
18a { 53a {
19 color: inherit; 54 color: inherit;
20 width: fit-content;
21} 55}
22 56
23body { 57body {
24 overflow: hidden; 58 overflow: hidden;
25 background-color: #141520; 59 background-color: var(--color-crust);
26 margin: 0; 60 margin: 0;
27} 61}
28 62
29.loader { 63.loader {
30 animation: loader 1.2s ease infinite; 64 animation: loader 1.2s ease infinite;
31 background-size: 400% 300%; 65 background-size: 400% 300%;
32 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); 66 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; 67 user-select: none;
34} 68}
35 69
36.loader-text { 70.loader-text {
37 animation: loader 1.2s ease infinite; 71 animation: loader 1.2s ease infinite;
38 background-size: 400% 300%; 72 background-size: 400% 300%;
39 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); 73 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; 74 user-select: none;
41 color: #00000000; 75 color: #00000000;
42 border-radius: 1000px; 76 border-radius: 1000px;
@@ -76,6 +110,173 @@ body {
76 } 110 }
77} 111}
78 112
113/* Custom Tailwind utilities for Catppuccin Frappe theme */
114@layer utilities {
115 .bg-primary {
116 background-color: var(--color-primary);
117 }
118
119 .bg-secondary {
120 background-color: var(--color-secondary);
121 }
122
123 .bg-accent {
124 background-color: var(--color-accent);
125 }
126
127 .bg-background {
128 background-color: var(--color-background);
129 }
130
131 .bg-surface {
132 background-color: var(--color-surface);
133 }
134
135 .bg-muted {
136 background-color: var(--color-muted);
137 }
138
139 .text-primary {
140 color: var(--color-primary);
141 }
142
143 .text-secondary {
144 color: var(--color-secondary);
145 }
146
147 .text-accent {
148 color: var(--color-accent);
149 }
150
151 .text-foreground {
152 color: var(--color-foreground);
153 }
154
155 .text-muted {
156 color: var(--color-muted);
157 }
158
159 .border-primary {
160 border-color: var(--color-primary);
161 }
162
163 .border-secondary {
164 border-color: var(--color-secondary);
165 }
166
167 .border-muted {
168 border-color: var(--color-border);
169 }
170
171 .hover\:bg-primary:hover {
172 background-color: var(--color-primary);
173 }
174
175 .hover\:bg-secondary:hover {
176 background-color: var(--color-secondary);
177 }
178
179 .hover\:bg-surface:hover {
180 background-color: var(--color-surface);
181 }
182
183 .hover\:text-primary:hover {
184 color: var(--color-primary);
185 }
186
187 .focus\:ring-primary:focus {
188 --tw-ring-color: var(--color-primary);
189 }
190
191 .triangle {
192 width: 0;
193 height: 0;
194 border-left: 5px solid transparent;
195 border-right: 5px solid transparent;
196 border-bottom: 8px solid var(--color-foreground);
197 display: inline-block;
198 }
199
200 .sidebar-button-selected {
201 background-color: var(--color-primary) !important;
202 color: var(--color-background) !important;
203 }
204
205 .sidebar-button-deselected {
206 background-color: var(--color-surface) !important;
207 color: var(--color-foreground) !important;
208 }
209
210 .profileboard-record {
211 background-color: var(--color-surface);
212 border: 1px solid var(--color-border);
213 border-radius: 0.5rem;
214 padding: 0.75rem;
215 margin-bottom: 0.5rem;
216 transition: all 0.2s ease;
217 }
218
219 .profileboard-record:hover {
220 background-color: var(--color-surface1);
221 }
222
223 .difficulty-rating {
224 width: 20px;
225 height: 20px;
226 background-color: var(--color-muted);
227 border-radius: 50%;
228 margin: 0 2px;
229 display: inline-block;
230 }
231
232 .nav-button {
233 background-color: var(--color-surface);
234 color: var(--color-foreground);
235 border: 1px solid var(--color-border);
236 border-radius: 0.5rem;
237 padding: 0.5rem 1rem;
238 transition: all 0.2s ease;
239 display: inline-flex;
240 align-items: center;
241 gap: 0.5rem;
242 text-decoration: none;
243 }
244
245 .nav-button:hover {
246 background-color: var(--color-surface1);
247 }
248
249 .record {
250 background-color: var(--color-surface);
251 border: 1px solid var(--color-border);
252 border-radius: 0.5rem;
253 padding: 0.5rem;
254 margin: 0.25rem;
255 cursor: pointer;
256 transition: all 0.2s ease;
257 }
258
259 .record:hover {
260 background-color: var(--color-surface1);
261 }
262
263 .portal-count {
264 font-size: 3rem;
265 font-weight: bold;
266 color: var(--color-primary);
267 }
268
269 .titles {
270 background-color: var(--color-accent);
271 color: var(--color-background);
272 padding: 0.25rem 0.5rem;
273 border-radius: 1rem;
274 font-size: 0.875rem;
275 margin-right: 0.5rem;
276 display: inline-block;
277 }
278}
279
79@font-face { 280@font-face {
80 font-family: 'BarlowCondensed-Bold'; 281 font-family: 'BarlowCondensed-Bold';
81 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype'); 282 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 21:34:01 +0000