aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/App.css
diff options
context:
space:
mode:
authorWolfboy248 <georgejvindkarlsen@gmail.com>2025-08-19 13:23:56 +0200
committerWolfboy248 <georgejvindkarlsen@gmail.com>2025-08-19 13:23:56 +0200
commit97be0afd140c7c9e1fd03ba5ab4e486d90907129 (patch)
treeab9dcf8ebab077b5fc7ab149c6ce8c13c21caaab /frontend/src/App.css
parentorganised pages, started work on theme (diff)
downloadlphub-97be0afd140c7c9e1fd03ba5ab4e486d90907129.tar.gz
lphub-97be0afd140c7c9e1fd03ba5ab4e486d90907129.tar.bz2
lphub-97be0afd140c7c9e1fd03ba5ab4e486d90907129.zip
organised pages, started work on theme
Diffstat (limited to 'frontend/src/App.css')
-rw-r--r--frontend/src/App.css366
1 files changed, 109 insertions, 257 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 464b759..a39dcf1 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,298 +1,150 @@
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'); 1@layer theme, base, components, utilities;
2
2@import "tailwindcss"; 3@import "tailwindcss";
3 4
4@theme { 5@theme {
5 --color-rosewater: #f2d5cf; 6 --color-main: #141520;
6 --color-flamingo: #eebebe; 7 --color-panel: #202232;
7 --color-pink: #f4b8e4; 8 --color-block: #2b2e46;
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 9
32 --color-primary: var(--color-mauve); 10 --color-white: #cdcfdf;
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 11
46 --font-barlow-condensed-regular: 'BarlowCondensed-Regular'; 12 --font-barlow-condensed-regular: BarlowCondensed-Regular;
47 --font-barlow-condensed-bold: 'BarlowCondensed-Bold'; 13 --font-barlow-condensed-bold: BarlowCondensed-Bold;
48 --font-barlow-semicondensed-regular: 'BarlowSemiCondensed-Regular'; 14 --font-barlow-semicondensed-regular: BarlowSemiCondensed-Regular;
49 --font-barlow-semicondensed-semibold: 'BarlowSemiCondensed-SemiBold'; 15 --font-barlow-semicondensed-semibold: BarlowSemiCondensed-SemiBold;
50} 16}
51 17
18@layer utilities {}
52 19
53a { 20a {
54 color: inherit; 21 color: inherit;
22}
23
24h1,
25h2,
26h3,
27h4,
28h5,
29h6 {
30 font-family: var(--font-barlow-condensed-bold);
31}
32
33h1 {
34 font-size: 48px;
35}
36
37h2 {
38 font-size: 32px;
39}
40
41h2 {
42 font-size: 24px;
43}
44
45h3 {
46 font-size: 20px;
47}
48
49h4 {
50 font-size: 18px;
51}
52
53h5 {
54 font-size: 16px;
55}
56
57h6 {
58 font-size: 14px;
59}
60
61p {
62 font-size: 16px;
55} 63}
56 64
57body { 65body {
58 overflow: hidden; 66 overflow: hidden;
59 background-color: var(--color-crust); 67 background-color: var(--color-main);
60 margin: 0; 68 color: var(--color-white);
69 font-family: var(--font-barlow-semicondensed-regular);
70 margin: 0;
71}
72
73main {
74 overflow-y: auto;
75}
76
77main>div {
78 width: 100%;
61} 79}
62 80
63.loader { 81.loader {
64 animation: loader 1.2s ease infinite; 82 animation: loader 1.2s ease infinite;
65 background-size: 400% 300%; 83 background-size: 400% 300%;
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%); 84 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%);
67 user-select: none; 85 user-select: none;
68} 86}
69 87
70.loader-text { 88.loader-text {
71 animation: loader 1.2s ease infinite; 89 animation: loader 1.2s ease infinite;
72 background-size: 400% 300%; 90 background-size: 400% 300%;
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%); 91 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%);
74 user-select: none; 92 user-select: none;
75 color: #00000000; 93 color: #00000000;
76 border-radius: 1000px; 94 border-radius: 1000px;
77} 95}
78 96
79@keyframes loader { 97@keyframes loader {
80 0% { 98 0% {
81 background-position: 100% 20%; 99 background-position: 100% 20%;
82 } 100 }
83 101
84 50% { 102 50% {
85 background-position: 0% 50%; 103 background-position: 0% 50%;
86 } 104 }
87 105
88 100% { 106 100% {
89 background-position: 0% 50%; 107 background-position: 0% 50%;
90 } 108 }
91} 109}
92 110
93.loader { 111.loader {
94 width: 48px; 112 width: 48px;
95 height: 48px; 113 height: 48px;
96 border: 5px solid #FFF; 114 border: 5px solid #FFF;
97 border-bottom-color: transparent; 115 border-bottom-color: transparent;
98 border-radius: 50%; 116 border-radius: 50%;
99 display: inline-block; 117 display: inline-block;
100 box-sizing: border-box; 118 box-sizing: border-box;
101 animation: rotation 1s linear infinite; 119 animation: rotation 1s linear infinite;
102 } 120}
103 121
104@keyframes rotation { 122@keyframes rotation {
105 0% { 123 0% {
106 transform: rotate(0deg); 124 transform: rotate(0deg);
107 } 125 }
108 100% {
109 transform: rotate(360deg);
110 }
111}
112 126
113/* Custom Tailwind utilities for Catppuccin Frappe theme */ 127 100% {
114@layer utilities { 128 transform: rotate(360deg);
115 .bg-primary { 129 }
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} 130}
279 131
280@font-face { 132@font-face {
281 font-family: 'BarlowCondensed-Bold'; 133 font-family: 'BarlowCondensed-Bold';
282 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype'); 134 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
283} 135}
284 136
285@font-face { 137@font-face {
286 font-family: 'BarlowCondensed-Regular'; 138 font-family: 'BarlowCondensed-Regular';
287 src: local('BarlowCondensed-Regular'), url(./fonts/BarlowCondensed-Regular.ttf) format('truetype'); 139 src: local('BarlowCondensed-Regular'), url(./fonts/BarlowCondensed-Regular.ttf) format('truetype');
288} 140}
289 141
290@font-face { 142@font-face {
291 font-family: 'BarlowSemiCondensed-Regular'; 143 font-family: 'BarlowSemiCondensed-Regular';
292 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-Regular.ttf) format('truetype'); 144 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-Regular.ttf) format('truetype');
293} 145}
294 146
295@font-face { 147@font-face {
296 font-family: 'BarlowSemiCondensed-SemiBold'; 148 font-family: 'BarlowSemiCondensed-SemiBold';
297 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype'); 149 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');
298} 150} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 19:09:12 +0000