aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/css/Sidebar.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/css/Sidebar.css')
-rw-r--r--frontend/src/css/Sidebar.css380
1 files changed, 310 insertions, 70 deletions
diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css
index a91862e..8675dca 100644
--- a/frontend/src/css/Sidebar.css
+++ b/frontend/src/css/Sidebar.css
@@ -2,62 +2,69 @@
2 overflow: hidden; 2 overflow: hidden;
3 position: absolute; 3 position: absolute;
4 background-color: #2b2e46; 4 background-color: #2b2e46;
5 width: 320px; height: 100vh; 5 width: 320px;
6 height: 100vh;
6 min-height: 670px; 7 min-height: 670px;
7 8 transition: transform 0.3s ease;
8} 9}
9 10
10 /* logo */ 11/* logo */
11#logo{ 12#logo {
12 display: grid; 13 display: grid;
13 grid-template-columns: 60px 220px; 14 grid-template-columns: 60px 220px;
14 15
15 16
16 height: 80px; 17 height: 80px;
17 padding: 20px 0 20px 20px; 18 padding: 20px 0 20px 20px;
18 cursor: pointer; 19 cursor: pointer;
19 user-select: none; 20 user-select: none;
20} 21}
21 22
22#logo-text{ 23#logo-text {
23 font-family: BarlowCondensed-Regular; 24 font-family: BarlowCondensed-Regular;
24 font-size: 36px; 25 font-size: 36px;
25 color: #FFF; 26 color: #FFF;
26 line-height: 38px; 27 line-height: 38px;
27} 28}
28#logo-text>span>b{ 29
30#logo-text>span>b {
29 font-family: BarlowCondensed-Bold; 31 font-family: BarlowCondensed-Bold;
30 font-size: 56px; 32 font-size: 56px;
31} 33}
32 34
33 /* Sidelist */ 35/* Sidelist */
34#sidebar-list{ 36#sidebar-list {
35 z-index: 2; 37 z-index: 2;
36 background-color: #2b2e46; 38 background-color: #2b2e46;
37 position: relative; 39 position: relative;
38 height: calc(100vh - 120px); 40 height: calc(100vh - 120px);
39 width: 320px; 41 width: 320px;
40 /* min-height: 670px; */ 42 /* min-height: 670px; */
41 transition: width .3s; 43 transition: width .3s;
42} 44}
43#sidebar-toplist>button:nth-child(1){margin-top: 5px;} 45
44#sidebar-toplist{ 46#sidebar-toplist>button:nth-child(1) {
47 margin-top: 5px;
48}
49
50#sidebar-toplist {
45 display: grid; 51 display: grid;
46 52
47 margin: 0 5px 0 5px; 53 margin: 0 5px 0 5px;
48 justify-items: left; 54 justify-items: left;
49 height: 400px; 55 height: 400px;
50 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto; 56 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
51} 57}
52 58
53#sidebar-bottomlist{ 59#sidebar-bottomlist {
54 display: grid; 60 display: grid;
55 61
56 margin: 0 5px 0 5px; 62 margin: 0 5px 0 5px;
57 justify-items: left; 63 justify-items: left;
58 grid-template-rows: calc(100vh - 720px) 50px 50px 50px; 64 grid-template-rows: calc(100vh - 720px) 50px 50px 50px;
59} 65}
60.sidebar-button>span{ 66
67.sidebar-button>span {
61 font-family: BarlowSemiCondensed-Regular; 68 font-family: BarlowSemiCondensed-Regular;
62 font-size: 18px; 69 font-size: 18px;
63 color: #CDCFDF; 70 color: #CDCFDF;
@@ -65,36 +72,37 @@
65 line-height: 28px; 72 line-height: 28px;
66 transition: opacity .1s; 73 transition: opacity .1s;
67} 74}
68.sidebar-button{ 75
76.sidebar-button {
69 display: grid; 77 display: grid;
70 grid-template-columns: 50px auto; 78 grid-template-columns: 50px auto;
71 place-items: left; 79 place-items: left;
72 text-align: left; 80 text-align: left;
73 81
74 background-color: inherit; 82 background-color: inherit;
75 cursor: pointer; 83 cursor: pointer;
76 border: none; 84 border: none;
77 width: 310px; 85 width: 310px;
78 height: 40px; 86 height: 40px;
79 border-radius: 20px; 87 border-radius: 20px;
80 padding: 0.3em 0 0 11px; 88 padding: 0.4em 0 0 11px;
81 89
82 transition: 90 transition:
83 width .3s, 91 width .3s,
84 background-color .15s, 92 background-color .15s,
85 padding .3s; 93 padding .3s;
86} 94}
87 95
88.sidebar-button .avatar-img { 96.sidebar-button .avatar-img {
89 border-radius: 50px; 97 border-radius: 50px;
90} 98}
91 99
92.logout-button{ 100.logout-button {
93 display: grid; 101 display: grid;
94 grid-template-columns: 50px auto; 102 grid-template-columns: 50px auto;
95 place-items: left; 103 place-items: left;
96 text-align: left; 104 text-align: left;
97 105
98 background-color: inherit; 106 background-color: inherit;
99 cursor: pointer; 107 cursor: pointer;
100 border: none; 108 border: none;
@@ -103,10 +111,10 @@
103 border-radius: 20px; 111 border-radius: 20px;
104 padding: 0.4em 0 0 11px; 112 padding: 0.4em 0 0 11px;
105 113
106 transition: 114 transition:
107 width .3s, 115 width .3s,
108 background-color .15s, 116 background-color .15s,
109 padding .3s; 117 padding .3s;
110} 118}
111 119
112.submit-run-button { 120.submit-run-button {
@@ -114,7 +122,7 @@
114 grid-template-columns: 50px auto; 122 grid-template-columns: 50px auto;
115 place-items: left; 123 place-items: left;
116 text-align: left; 124 text-align: left;
117 125
118 background-color: inherit; 126 background-color: inherit;
119 cursor: pointer; 127 cursor: pointer;
120 border: none; 128 border: none;
@@ -123,10 +131,10 @@
123 border-radius: 20px; 131 border-radius: 20px;
124 padding: 0.4em 0 0 11px; 132 padding: 0.4em 0 0 11px;
125 133
126 transition: 134 transition:
127 width .3s, 135 width .3s,
128 background-color .15s, 136 background-color .15s,
129 padding .3s; 137 padding .3s;
130 background-color: #202232aa; 138 background-color: #202232aa;
131} 139}
132 140
@@ -135,7 +143,7 @@
135} 143}
136 144
137 145
138.submit-run-button>span{ 146.submit-run-button>span {
139 font-family: BarlowSemiCondensed-Regular; 147 font-family: BarlowSemiCondensed-Regular;
140 font-size: 18px; 148 font-size: 18px;
141 color: #CDCFDF; 149 color: #CDCFDF;
@@ -162,19 +170,21 @@ button>img {
162 padding: 5px; 170 padding: 5px;
163} 171}
164 172
165 /* Maplist */ 173/* Search Panel */
166#sidebar>div:nth-child(3){ 174#search-panel {
167 position: relative; 175 position: relative;
168 background-color: #202232; 176 background-color: #202232;
169 color: #424562; 177 color: #424562;
170 z-index: 1; 178 z-index: 1;
171 179
172 left: 52px; 180 left: 52px;
173 top: calc(-100vh + 120px); 181 top: calc(-100vh + 120px);
174 width: 268px; height: calc(100vh - 120px); 182 width: 268px;
183 height: calc(100vh - 120px);
175 min-height: 550px; 184 min-height: 550px;
176} 185}
177input#searchbar[type=text]{ 186
187input#searchbar[type=text] {
178 margin: 10px 0 0 6px; 188 margin: 10px 0 0 6px;
179 padding: 1px 0px 1px 16px; 189 padding: 1px 0px 1px 16px;
180 width: 240px; 190 width: 240px;
@@ -182,33 +192,47 @@ input#searchbar[type=text]{
182 192
183 font-family: BarlowSemiCondensed-Regular; 193 font-family: BarlowSemiCondensed-Regular;
184 font-size: 20px; 194 font-size: 20px;
185 195
186 background-color: #161723; 196 background-color: #161723;
187 color:#CDCFDF; 197 color: #CDCFDF;
188 198
189 border: 0; 199 border: 0;
190 border-radius: 20px; 200 border-radius: 20px;
191 201
192} 202}
193input[type=text]::placeholder{color:#2b2e46} 203
194input[type=text]:focus{outline: inherit;} 204input[type=text]::placeholder {
195a{text-decoration: none;height: 40px;} 205 color: #2b2e46
206}
207
208input[type=text]:focus {
209 outline: inherit;
210}
211
212a {
213 text-decoration: none;
214 height: 40px;
215}
196 216
197 217
198#search-data{ 218#search-data {
199 margin: 8px 0 8px 0; 219 margin: 8px 0 8px 0;
200 overflow-y: auto; 220 overflow-y: auto;
201 max-height: calc(100vh - 172px); 221 max-height: calc(100vh - 172px);
202 scrollbar-width: thin; 222 scrollbar-width: thin;
203} 223}
204#search-data::-webkit-scrollbar{display: none;} 224
205.search-map{ 225#search-data::-webkit-scrollbar {
226 display: none;
227}
228
229.search-map {
206 margin: 10px 6px 0 6px; 230 margin: 10px 6px 0 6px;
207 height: 80px; 231 height: 80px;
208 232
209 border-radius: 20px; 233 border-radius: 20px;
210 text-align: center; 234 text-align: center;
211 235
212 display: grid; 236 display: grid;
213 237
214 border: 0; 238 border: 0;
@@ -217,26 +241,28 @@ a{text-decoration: none;height: 40px;}
217 grid-template-rows: 20% 20% 60%; 241 grid-template-rows: 20% 20% 60%;
218 width: calc(100% - 15px); 242 width: calc(100% - 15px);
219} 243}
220.search-map>span{ 244
245.search-map>span {
221 color: #888; 246 color: #888;
222 font-size: 16px; 247 font-size: 16px;
223 font-family: BarlowSemiCondensed-Regular; 248 font-family: BarlowSemiCondensed-Regular;
224} 249}
225.search-map>span:nth-child(3){ 250
251.search-map>span:nth-child(3) {
226 font-size: 30px; 252 font-size: 30px;
227 color: #CDCFDF; 253 color: #CDCFDF;
228} 254}
229 255
230.search-player{ 256.search-player {
231 overflow: hidden; 257 overflow: hidden;
232 margin: 10px 6px 0 6px; 258 margin: 10px 6px 0 6px;
233 height: 80px; 259 height: 80px;
234 260
235 border-radius: 20px; 261 border-radius: 20px;
236 text-align: center; 262 text-align: center;
237 color: #CDCFDF; 263 color: #CDCFDF;
238 font-family: BarlowSemiCondensed-Regular; 264 font-family: BarlowSemiCondensed-Regular;
239 265
240 display: grid; 266 display: grid;
241 place-items: center; 267 place-items: center;
242 grid-template-columns: 20% 80%; 268 grid-template-columns: 20% 80%;
@@ -245,23 +271,237 @@ a{text-decoration: none;height: 40px;}
245 border: 0; 271 border: 0;
246 transition: background-color .1s; 272 transition: background-color .1s;
247 background-color: #2b2e46; 273 background-color: #2b2e46;
274 width: calc(100% - 15px);
275 box-sizing: border-box;
248} 276}
249.search-player>img{ 277
250 height: 60px; 278.search-player>img {
279 height: 60px;
251 border-radius: 20px; 280 border-radius: 20px;
252} 281}
253.search-player>span{ 282
254 width:154px; 283.search-player>span {
284 width: 100%;
255 font-size: 26px; 285 font-size: 26px;
286 overflow: hidden;
287 text-overflow: ellipsis;
288 white-space: nowrap;
256} 289}
257 290
291#mobile-topbar {
292 display: none;
293}
258 294
295#mobile-logo {
296 display: none;
297}
259 298
299#hamburger-menu {
300 display: none;
301}
260 302
303.mobile-search-header {
304 display: none;
305}
261 306
307.mobile-search-close {
308 display: none;
309}
262 310
263 311@media screen and (max-width: 768px) {
264 312
265 313 #sidebar {
266 314 position: fixed;
267 315 left: 0;
316 top: 60px;
317 width: 100%;
318 height: calc(100vh - 60px);
319 transform: translateX(-100%);
320 z-index: 1000;
321 transition: transform 0.3s ease;
322 }
323
324 #sidebar.mobile-open {
325 transform: translateX(0);
326 }
327
328 #logo {
329 display: none !important;
330 }
331
332 #mobile-topbar {
333 display: flex;
334 justify-content: space-between;
335 align-items: center;
336 position: fixed;
337 top: 0;
338 left: 0;
339 right: 0;
340 height: 60px;
341 background-color: #2b2e46;
342 padding: 0 18px;
343 z-index: 999;
344 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
345 }
346
347 #mobile-logo {
348 display: flex;
349 align-items: center;
350 gap: 10px;
351 }
352
353 #mobile-logo img {
354 height: 40px !important;
355 }
356
357 #mobile-logo-text {
358 display: flex;
359 flex-direction: column;
360 align-items: center;
361 font-family: BarlowCondensed-Regular;
362 color: #FFF;
363 line-height: 1.1;
364 }
365
366 #mobile-logo-text span:first-child {
367 font-family: BarlowCondensed-Bold;
368 font-size: 24px;
369 }
370
371 #mobile-logo-text span:last-child {
372 font-size: 14px;
373 }
374
375 #hamburger-menu {
376 display: flex;
377 flex-direction: column;
378 justify-content: space-around;
379 width: 30px;
380 height: 25px;
381 background: transparent;
382 border: none;
383 cursor: pointer;
384 padding: 0;
385 z-index: 1001;
386 }
387
388 #hamburger-menu span {
389 width: 30px;
390 height: 3px;
391 background: #CDCFDF;
392 border-radius: 10px;
393 transition: all 0.3s ease;
394 transform-origin: 1px;
395 }
396
397 #hamburger-menu.open span:nth-child(1) {
398 transform: rotate(45deg);
399 }
400
401 #hamburger-menu.open span:nth-child(2) {
402 opacity: 0;
403 transform: translateX(20px);
404 }
405
406 #hamburger-menu.open span:nth-child(3) {
407 transform: rotate(-45deg);
408 }
409
410 #sidebar-list {
411 height: calc(100vh - 60px);
412 width: 280px;
413 padding-top: 20px;
414 }
415
416 #sidebar-toplist {
417 height: auto;
418 grid-template-rows: 45px 20px 50px 50px 50px 50px auto;
419 }
420
421 #sidebar-bottomlist {
422 grid-template-rows: 50px 50px 50px 50px 50px;
423 margin-top: 20px;
424 }
425
426 .sidebar-button,
427 .logout-button,
428 .submit-run-button {
429 width: 270px !important;
430 }
431
432 .sidebar-button span,
433 .submit-run-button span {
434 opacity: 1 !important;
435 }
436
437 #search-panel {
438 position: fixed;
439 left: 0;
440 top: 60px;
441 width: 100%;
442 height: calc(100vh - 60px);
443 z-index: 998;
444 background-color: #202232;
445 transform: translateY(100%);
446 opacity: 0;
447 transition: transform 0.3s ease, opacity 0.3s ease;
448 pointer-events: none;
449 }
450
451 #search-panel.mobile-search-open {
452 transform: translateY(0);
453 opacity: 1;
454 pointer-events: auto;
455 }
456
457 .mobile-search-header {
458 display: flex;
459 align-items: center;
460 justify-content: flex-end;
461 padding: 10px 20px 0 20px;
462 gap: 10px;
463 }
464
465 #search-panel input#searchbar[type=text] {
466 width: calc(100% - 40px);
467 margin: 10px 20px;
468 }
469
470 .mobile-search-close {
471 display: block;
472 background-color: #2b2e46;
473 border: none;
474 color: #CDCFDF;
475 font-size: 28px;
476 width: 40px;
477 height: 40px;
478 border-radius: 50%;
479 cursor: pointer;
480 line-height: 1;
481 padding: 0;
482 transition: background-color 0.2s;
483 }
484
485 .mobile-search-close:hover {
486 background-color: #202232;
487 }
488
489 #search-panel #search-data {
490 max-height: calc(100vh - 140px);
491 padding: 0 10px;
492 }
493
494 .login {
495 grid-template-columns: 50px auto 50px;
496 }
497
498 .login>button:nth-child(2) {
499 left: 170px;
500 }
501
502 button>img {
503 scale: 2;
504 width: 20px;
505 padding: 5px;
506 }
507} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 17:15:33 +0000