diff options
Diffstat (limited to 'frontend/src/components/pages/maplist.css')
| -rw-r--r-- | frontend/src/components/pages/maplist.css | 403 |
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 | |||
| 13 | a { | ||
| 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 | } | ||