This repository has no description
1/* src/components/Navbar/Navbar.css */
2
3/* Common Navbar Styles */
4.navbar {
5 width: 100%;
6 background-color: var(--navbar-bg);
7 transition: background-color 0.3s ease, border-color 0.3s ease;
8 border-bottom: 5px solid var(--card-border);
9}
10
11.cred {
12 color: #3B9AF8;
13}
14
15.period {
16 color: black;
17}
18
19.blue {
20 color: #004F84;
21}
22
23.dark-mode .cred {
24 color: #c7c7c7;
25}
26
27.dark-mode .period {
28 color: #fff;
29}
30
31.dark-mode .blue {
32 color: #3B9AF8;
33}
34
35.navbar-container {
36 max-width: 1000px;
37 margin: 0 auto; /* Center the content */
38 padding: 0 20px; /* Horizontal padding */
39 display: flex;
40 align-items: center;
41 justify-content: space-between; /* Distribute space between left and right sections */
42 height: 84px;
43 box-sizing: border-box;
44}
45
46/* Left Section: Logo and Links */
47.navbar-left {
48 display: flex;
49 align-items: center;
50}
51
52.navbar-logo a {
53 font-size: 1.5rem;
54 font-weight: bold;
55 color: #3B9AF8; /* Blue color for the logo */
56 text-decoration: none;
57 transition: color 0.3s ease;
58}
59
60.navbar-links {
61 font-weight: bold;
62 margin-top: 2px;
63}
64
65.navbar-links ul {
66 list-style: none;
67 display: flex;
68 margin: 0;
69 padding: 0;
70 margin-left: 20px; /* Spacing between logo and links */
71}
72
73.navbar-links ul li {
74 margin-left: 20px; /* Spacing between links */
75}
76
77.navbar-links ul li a {
78 text-decoration: none;
79 color: #004f84; /* Dark blue color for links */
80 font-size: 1rem;
81 transition: color 0.3s ease;
82}
83
84.navbar-links ul li {
85 margin-left: 20px; /* Consistent spacing between all links */
86 position: relative;
87 display: flex;
88 align-items: center;
89}
90
91.navbar-links ul li a:hover {
92 color: #3B9AF8; /* Change color on hover */
93}
94
95/* Add rule for dark mode nav links */
96.dark-mode .navbar-links ul li a {
97 color: #3b9af8;
98}
99
100/* Right Section: Actions */
101.navbar-actions {
102 display: flex;
103 align-items: center;
104 gap: 0.3em;
105}
106
107/* Theme toggle and icon styles */
108.theme-toggle-button {
109 background: none;
110 border: none;
111 cursor: pointer;
112 display: inline-flex;
113 scale: 1.3;
114 align-items: center;
115 justify-content: center;
116 padding: 0.5rem;
117 color: #004f84;
118 transition: color 0.2s ease;
119 font-size: 1.6em;
120}
121
122.theme-toggle-button:hover {
123 color: var(--primary-color);
124 background: none;
125}
126
127.dark-mode .theme-toggle-button {
128 color: #ffffff;
129}
130
131.theme-toggle-button svg {
132 margin-right: 5px; /* Space between icon and text */
133}
134
135/* Icon styles */
136.nav-icon {
137 display: inline-flex;
138 align-items: center;
139 justify-content: center;
140 padding: 0.5rem;
141 color: #004f84;
142 transition: color 0.2s ease;
143 scale: 1.3;
144}
145
146.dark-mode .nav-icon {
147 color: #ffffff;
148}
149
150.nav-icon:hover {
151 color: var(--primary-color);
152}
153
154.nav-icon-discord {
155 display: inline-flex;
156 align-items: center;
157 justify-content: center;
158 padding: 0.5rem;
159 color: #004f84;
160 transition: color 0.2s ease;
161 scale: 1.3;
162}
163
164.dark-mode .nav-icon-discord {
165 color: #ffffff;
166}
167
168.nav-icon-discord:hover {
169 color: var(--primary-color);
170}
171
172.icon {
173 width: 1.25rem;
174 height: 1.25rem;
175}
176
177/* Button styles */
178/* Removed .auth-button.login-button styles */
179
180/* Removed .logout-button styles */
181
182/* Removed .disabled-button styles */
183
184/* Removed .dark-mode .auth-button styles */
185
186/* Removed .dark-mode .login-button styles */
187
188/* Removed .dark-mode .logout-button styles */
189
190.navbar-logo {
191 display: flex;
192 align-content: center;
193 justify-content: center;
194 gap: 4px;
195 margin-top: 3.5px;
196}
197
198.beta-badge {
199 align-content: center;
200 background: gray;
201 border-radius: 4px;
202 padding: 3px 5px;
203 color: white;
204 text-transform: uppercase;
205 font-size: 0.6em;
206 font-weight: 600;
207 margin-bottom: 5.3px;
208 margin-left: 4.9px;
209}
210
211.navbar-auth-button {
212 display: none;
213}
214
215.navbar-support-button-container {
216 font-size: 0.9em;
217 margin-left: 10.2px;
218}
219
220/* ---------------------------------- */
221/* Dropdown Menu Styles */
222/* ---------------------------------- */
223.dropdown-container {
224 position: relative;
225}
226
227.dropdown-trigger {
228 position: relative;
229 display: inline-flex;
230 align-items: center;
231 white-space: nowrap;
232 padding-right: 1.2em; /* Add padding to accommodate the triangle */
233}
234
235.dropdown-trigger::after {
236 content: '▼';
237 font-size: 0.6em;
238 display: inline-block;
239 margin-left: 0.4em;
240 position: absolute;
241 right: 0;
242 top: 50%;
243 transform: translateY(-50%);
244 transition: transform 0.2s ease;
245}
246
247
248.dropdown-container:hover .dropdown-trigger::after {
249 transform: translateY(-50%) rotate(180deg);
250}
251
252.dropdown-menu {
253 position: absolute;
254 top: 100%;
255 left: 0;
256 background-color: var(--navbar-bg);
257 border: 1px solid var(--card-border);
258 border-radius: 4px;
259 min-width: 180px;
260 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
261 z-index: 1000;
262 padding: 8px 0;
263 margin-top: 8px;
264 opacity: 0;
265 visibility: hidden;
266 transform: translateY(-10px);
267 transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
268 display: flex;
269 flex-direction: column; /* Ensure items are in a column */
270}
271
272.dropdown-container:hover .dropdown-menu {
273 opacity: 1;
274 visibility: visible;
275 transform: translateY(0);
276}
277
278.dropdown-menu li {
279 margin: 0 !important;
280 padding: 0;
281 display: block; /* Force items to be blocks in a column */
282 width: 100%;
283}
284
285.dropdown-menu li a {
286 display: block;
287 padding: 8px 16px;
288 color: var(--text);
289 text-decoration: none;
290 transition: background-color 0.2s ease;
291 white-space: nowrap;
292 width: 100%;
293 box-sizing: border-box;
294 text-align: left; /* Align text to the left */
295}
296
297.dropdown-menu {
298 padding-top: 10px !important;
299 padding-bottom: 10px !important;
300}
301
302.nav-icon-discord {
303 align-items: center;
304 color: #004f84;
305 display: inline-flex;
306 justify-content: center;
307 padding: .5rem;
308 scale: 1.7;
309 padding-right: 10px;
310 transition: color .2s ease;
311}
312
313/* Adjust hover state for dropdown items */
314.dropdown-menu li a:hover {
315 background-color: rgba(59, 154, 248, 0.1);
316 color: #3B9AF8;
317 width: 100%;
318}
319
320/* Ensure that non-dropdown links don't get affected by these changes */
321.navbar-links ul li a:not(.dropdown-trigger) {
322 display: inline-block;
323}
324
325/* Extra rule to ensure dropdown container doesn't affect layout */
326.dropdown-container {
327 position: relative;
328}
329
330/* Dark mode adjustments for dropdown */
331.dark-mode .dropdown-menu {
332 background-color: var(--navbar-bg);
333 border-color: var(--card-border);
334 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
335}
336
337/* Add rule for base color of dropdown links in dark mode */
338.dark-mode .dropdown-menu li a {
339 color: #e0e0e0; /* Light grey for readability */
340}
341
342.dark-mode .dropdown-menu li a:hover {
343 background-color: rgba(59, 154, 248, 0.2);
344 /* Update hover color to match main links */
345 color: #3b9af8;
346}
347
348/* ---------------------------------- */
349/* Responsive Design Styles */
350/* ---------------------------------- */
351@media (max-width: 940px) {
352 /* Navbar container adjustments */
353 .navbar-container {
354 flex-direction: column;
355 align-items: center;
356 height: auto;
357 justify-content: center;
358 row-gap: 23px;
359 margin-top: 27px;
360 margin-bottom: 27px;
361 box-sizing: border-box;
362 max-width: 1200px;
363 padding: 0 20px;
364 }
365
366 /* Logo adjustments */
367 .navbar-logo {
368 text-align: center;
369 }
370
371 .navbar-logo a {
372 font-size: 2.5em;
373 }
374
375 .beta-badge {
376 font-size: 0.75em;
377 font-weight: 600;
378 margin: 11px;
379 padding: 4px 7px;
380 margin-right: 0px;
381 }
382
383 /* Left section adjustments */
384 .navbar-left {
385 align-items: center;
386 display: block;
387 }
388
389 /* Links adjustments */
390 .navbar-links {
391 font-weight: 700;
392 margin-top: 15px;
393 text-align: center;
394 width: 100%;
395 }
396
397 .navbar-links ul {
398 display: flex;
399 justify-content: center;
400 flex-wrap: wrap;
401 padding: 0;
402 list-style: none;
403 margin: 0px;
404 }
405
406 .navbar-links ul li {
407 margin: 0 10px;
408 position: relative;
409 }
410
411 /* Actions adjustments */
412 .navbar-actions {
413 align-items: center;
414 display: flex;
415 gap: 5px;
416 justify-content: center;
417 }
418
419 .navbar-support-button-container {
420 margin-left: 0px;
421 }
422
423 /* Dropdown adjustments for mobile */
424 .dropdown-menu {
425 position: absolute;
426 top: 100%;
427 left: 50%;
428 transform: translateX(-50%);
429 display: none;
430 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
431 min-width: 180px;
432 width: auto;
433 margin-top: 8px;
434 margin-bottom: 8px;
435 padding: 8px 0;
436 background-color: var(--navbar-bg);
437 border: 1px solid var(--card-border);
438 border-radius: 4px;
439 z-index: 1000;
440 max-width: 90vw; /* Prevent extending beyond viewport */
441 }
442
443 /* Prevent dropdowns from going off-screen */
444 .navbar-links ul li:last-child .dropdown-menu {
445 left: auto;
446 right: 0;
447 transform: none;
448 }
449
450 .navbar-links ul li:first-child .dropdown-menu {
451 left: 0;
452 right: auto;
453 transform: none;
454 }
455
456 .dropdown-container:hover .dropdown-menu,
457 .dropdown-container.active .dropdown-menu {
458 display: block;
459 opacity: 1;
460 visibility: visible;
461 }
462
463 /* Force menu items to be in a column */
464 .dropdown-menu li {
465 display: block;
466 width: 100%;
467 text-align: center;
468 margin: 0 !important;
469 }
470
471 .dropdown-menu li a {
472 padding: 8px 16px;
473 text-align: center;
474 display: block;
475 white-space: nowrap;
476 }
477
478 .dropdown-trigger {
479 display: inline-block;
480 white-space: nowrap;
481 }
482
483 .dropdown-trigger::after {
484 display: inline-block;
485 margin-left: 5px;
486 position: static;
487 transform: none;
488 vertical-align: middle;
489 }
490
491 .dropdown-container:hover .dropdown-trigger::after,
492 .dropdown-container.active .dropdown-trigger::after {
493 transform: rotate(180deg);
494 }
495
496 /* Prevent layout shifting */
497 .dropdown-container {
498 margin-bottom: 4px;
499 min-height: 32px;
500 }
501}
502
503@media (max-width: 940px) {
504 .dropdown-trigger {
505 padding-right: 0em;
506 }
507
508 .dropdown-trigger::after {
509 right: 0;
510 }
511
512 /* Ensure all links in mobile have consistent appearance */
513 .navbar-links ul li a {
514 text-align: center;
515 display: inline-flex;
516 align-items: center;
517 justify-content: center;
518 }
519}
520
521/* Smaller screen refinements */
522@media (max-width: 450px) {
523 .navbar-links {
524 max-width: 300px;
525 line-height: 1.8em;
526 }
527}
528
529@media (max-width: 370px) {
530 .navbar-support-button {
531 max-width: 135.5px;
532 font-size: 0.8em;
533 margin-left: 0px;
534 }
535
536 .navbar-links {
537 font-weight: 700;
538 text-align: center;
539 max-width: 205.5px;
540 margin: auto;
541 margin-top: 15px;
542 line-height: 1.5em;
543 }
544
545 /* Dropdown positioning for very small screens */
546 .dropdown-menu {
547 position: fixed;
548 left: 50% !important;
549 transform: translateX(-50%) !important;
550 width: 90vw;
551 max-width: 90vw;
552 }
553}
554
555/* Auth buttons */
556.navbar-auth-container {
557 margin-right: 0.5rem;
558}
559
560/* Removed .login-button styles */
561
562/* Removed .user-profile-button styles */
563
564/* Removed .logout-button styles */