aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/pages/maplist.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/pages/maplist.css')
-rw-r--r--frontend/src/components/pages/maplist.css403
1 files changed, 0 insertions, 403 deletions
diff --git a/frontend/src/components/pages/maplist.css b/frontend/src/components/pages/maplist.css
deleted file mode 100644
index b56aacc..0000000
--- a/frontend/src/components/pages/maplist.css
+++ /dev/null
@@ -1,403 +0,0 @@
1.maplist-page {
2 position: relative;
3 left: 350px;
4 height: 100vh;
5 color: #cdcfdf;
6 width: calc(100% - 380px);
7 font-family: BarlowSemiCondensed-Regular;
8 overflow-y: scroll;
9 overflow-x: hidden;
10 padding-right: 30px;
11}
12
13a {
14 color: inherit;
15 width: fit-content;
16}
17
18.maplist-page-content {
19 position: absolute;
20 left: 0px;
21 width: calc(100% - 50px);
22}
23
24.maplist-page-header {
25 margin-top: 33px;
26 display: grid;
27 margin-bottom: 10px;
28}
29
30.nav-btn {
31 height: 40px;
32 background-color: #2b2e46;
33 color: inherit;
34 font-size: 18px;
35 font-family: inherit;
36 border: none;
37 border-radius: 20px;
38 transition: background-color .1s;
39 cursor: default;
40 width: fit-content;
41}
42
43.nav-btn>span {
44 padding: 0 8px 0 8px;
45}
46
47.nav-btn:hover {
48 background-color: #202232;
49 cursor: pointer;
50}
51
52.game {
53 width: 100%;
54 height: 192px;
55 /* background: #202232; */
56 border-radius: 24px;
57 overflow: hidden;
58}
59
60.game-header {
61 width: 100%;
62 height: 144px;
63 display: flex;
64 justify-content: center;
65 align-items: center;
66 overflow: hidden;
67}
68
69.game-header-text {
70 display: flex;
71 justify-content: center;
72 align-items: center;
73 position: absolute;
74}
75
76.game-img {
77 width: 100%;
78 height: 100%;
79 background-size: cover;
80 filter: blur(4px);
81}
82
83.game-header-text>span {
84 font-size: 42px;
85 font-weight: 500;
86 margin: 5px;
87}
88
89.game-header-text span>b {
90 font-size: 96px;
91 font-weight: 600;
92}
93
94.game-nav {
95 display: flex;
96 height: 48px;
97}
98
99.game-nav-btn {
100 width: 100%;
101 height: 100%;
102 border: none;
103 border-radius: 0px;
104 color: inherit;
105 font-family: inherit;
106 font-size: 22px;
107 background: #2B2E46;
108 transition: background-color .1s;
109 margin: 0 1px;
110 display: flex;
111 justify-content: center;
112 align-items: center;
113}
114
115.game-nav-btn:hover {
116 cursor: pointer;
117}
118
119.selected {
120 background-color: #202232;
121}
122
123.gameview-nav {
124 margin-top: 20px;
125 display: flex;
126 height: 56px;
127 border-radius: 24px;
128 overflow: hidden;
129 gap: 0.06em;
130 /* background-color: #202232; */
131}
132
133.maplist {
134 width: 100%;
135 margin-top: 20px;
136 margin-bottom: 40px;
137}
138
139.chapter-name {
140 font-size: 30px;
141}
142
143.chapter-page-div {
144 display: flex;
145 justify-content: right;
146 transform: translateY(-30px);
147}
148
149.chapter-page-div button {
150 background-color: #00000000;
151 border: 0;
152 cursor: pointer;
153 height: 30px;
154 padding: 0;
155 width: 30px;
156}
157
158.chapter-page-div span {
159 color: #cdcfdf;
160 font-family: BarlowSemiCondensed-Regular;
161 font-size: 20px;
162}
163
164.maplist-maps {
165 display: grid;
166 grid-template-columns: 25% 25% 25% 25%;
167 margin-top: 10px;
168 transform: translateY(-30px);
169}
170
171.maplist-item {
172 background: #202232;
173 border-radius: 24px;
174 overflow: hidden;
175 margin: 10px 10px;
176 /* padding: 10px 15px; */
177 cursor: pointer;
178 user-select: none;
179}
180
181.loader-map {
182 border-radius: 24px;
183 overflow: hidden;
184 margin: 10px 10px;
185 /* padding: 10px 15px; */
186 user-select: none;
187 width: calc(100% - 20px);
188 height: calc(223px);
189}
190
191.maplist-img-div {
192 height: 150px;
193 overflow: hidden;
194}
195
196.maplist-img {
197 width: 100%;
198 height: 100%;
199 background-size: cover;
200 filter: blur(4px);
201 opacity: 0.7;
202}
203
204.maplist-portalcount-div {
205 display: flex;
206 justify-content: center;
207 align-items: center;
208 text-align: center;
209 height: 100%;
210 transform: translateY(-100%);
211 overflow: hidden;
212}
213
214.maplist-title {
215 font-size: 22px;
216 text-align: center;
217 width: 100%;
218 display: inherit;
219 padding: 5px 0px;
220 color: #CDCFDF;
221}
222
223.maplist-portals {
224 margin-left: 5px;
225 font-size: 32px;
226}
227
228.difficulty-div {
229 display: flex;
230 padding: 7px 10px;
231}
232
233.difficulty-label {
234 font-size: 18px;
235}
236
237.difficulty-bar {
238 width: 100%;
239 display: grid;
240 grid-template-columns: 20% 20% 20% 20% 20%;
241 align-items: center;
242 margin: 5px;
243}
244
245.difficulty-point {
246 background: #2B2E46;
247 height: 3px;
248 margin: 5px;
249 border-radius: 10px;
250}
251
252.stats {
253 margin-top: 30px;
254}
255
256.portalcount-over-time-div {
257 width: 100%;
258 height: 450px;
259 position: relative;
260 background-color: #202232;
261 border-radius: 20px;
262}
263
264.graph-title {
265 width: 100%;
266 display: inherit;
267 font-size: 24px;
268 margin-top: 5px;
269 text-align: center;
270 font-family: BarlowSemiCondensed-SemiBold;
271 padding-top: 7px;
272}
273
274.portalcount-graph {
275 height: calc(100% - 30px);
276 width: calc(100% - 80px);
277}
278
279.chart {
280 height: calc(100% - 80px);
281 width: 100%;
282 position: relative;
283 padding: 0px 0px;
284 scrollbar-width: thin;
285}
286
287.line-chart {
288 list-style: none;
289 margin: 0;
290 padding: 0;
291 height: 100%;
292 border-bottom: 2px solid #2B2E46;
293}
294
295.data-point {
296 background-color: #202232;
297 border: 4px solid #006FDE;
298 border-radius: 50%;
299 height: 6px;
300 position: absolute;
301 width: 6px;
302 bottom: calc(var(--y) - 4.5px);
303 left: calc(var(--x) - 6.5px);
304 transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
305 z-index: 1;
306 animation: point_intro 0.2s cubic-bezier(0.075, 0.82, 0.165, 1.8);
307 animation-fill-mode: backwards;
308}
309
310.data-point:hover, .data-point-active {
311 background-color: #006FDE;
312 box-shadow: 0px 0px 10px #006FDE;
313}
314
315.line-segment {
316 background-color: #006FDE;
317 bottom: var(--y);
318 height: 4px;
319 left: var(--x);
320 position: absolute;
321 transform: rotate(calc(var(--angle) * -1deg));
322 width: calc(var(--hypotenuse) * 1px);
323 transform-origin: left bottom;
324 border-radius: 20px;
325 z-index: 1;
326 animation: line_intro 0.05s cubic-bezier(0, 1, 0.31, 0.96);
327 animation-fill-mode: backwards;
328}
329
330#dataPointInfo {
331 position: absolute;
332 width: 400px;
333 height: 85px;
334 background: #202232;
335 box-shadow: 0px 4px 16px 0px #00000080;
336 transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
337 z-index: 1000;
338 opacity: 0;
339 left: auto;
340 border-radius: 20px;
341 padding: 15px 7px;
342}
343
344.section-header {
345 display: flex;
346 text-align: center;
347 font-family: BarlowSemiCondensed-SemiBold;
348 font-size: 18px;
349 height: 40%;
350 justify-content: space-evenly;
351 align-items: center;
352}
353
354.section-header span, .section-data span {
355 flex: 1;
356}
357
358.divider {
359 width: 100%;
360 height: 2px;
361 background-color: #2B2E46;
362 display: flex;
363 margin: 5px 0px 8px 0px;
364}
365
366.section-data {
367 display: flex;
368 grid-template-columns: 25% 25% 25% 25%;
369 text-align: center;
370 background-color: #2B2E46;
371 height: 52%;
372 border-radius: 200px;
373 align-items: center;
374 justify-content: space-evenly;
375 flex-grow: 1;
376 font-family: BarlowSemiCondensed-Regular;
377 font-size: 18px;
378 padding: 0px 5px;
379}
380
381@keyframes line_intro {
382 0% {
383 width: 0;
384 }
385 100% {
386 width: calc(var(--hypotenuse) * 1px);
387 }
388}
389
390@keyframes point_intro {
391 0% {
392 opacity: 0;
393 width: 0;
394 height: 0;
395 transform: translate(3px, -3px);
396 }
397 100% {
398 width: 6px;
399 height: 6px;
400 transform: translate(0px, 0px);
401 opacity: 1;
402 }
403}