- Timestamp:
- 06/11/22 12:46:20 (2 years ago)
- Branches:
- main
- Children:
- 64dc53b
- Parents:
- 6568bde
- Location:
- styles
- Files:
-
- 2 added
- 1 deleted
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
styles/globals.css
r6568bde r87614a5 1 @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap); 1 2 html, 2 3 body { 3 4 padding: 0; 4 5 margin: 0; 5 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 6 font-family: 'Inter', sans-serif; 7 7 } 8 8 … … 13 13 14 14 * { 15 box-sizing: border-box; 16 } 15 -webkit-box-sizing: border-box; 16 box-sizing: border-box; 17 } 18 19 p, h1, h3 { 20 margin: 0; 21 } 22 23 .app { 24 color: white; 25 letter-spacing: 1px; 26 width: 100vw; 27 height: 100vh; 28 margin: auto; 29 overflow: hidden; 30 background-size: cover; 31 background-repeat: no-repeat; 32 background-position: 0% 50%; 33 text-align: center; 34 } 35 36 /** 37 * Component <- Header 38 */ 39 header.header { 40 display: -webkit-box; 41 display: -ms-flexbox; 42 display: flex; 43 -webkit-box-pack: justify; 44 -ms-flex-pack: justify; 45 justify-content: space-between; 46 -webkit-box-align: center; 47 -ms-flex-align: center; 48 align-items: center; 49 width: 92vw; 50 margin: auto; 51 margin-top: 20px; 52 } 53 54 header.header .logo { 55 width: 80px; 56 aspect-ratio: 1; 57 border-radius: 100%; 58 background-image: url("/images/logo.png"); 59 background-size: cover; 60 border: 2px solid rgba(255, 255, 255, 0.2); 61 cursor: pointer; 62 } 63 64 header.header h2 { 65 cursor: pointer; 66 } 67 68 header.header nav ul { 69 display: -webkit-box; 70 display: -ms-flexbox; 71 display: flex; 72 -webkit-box-orient: horizontal; 73 -webkit-box-direction: normal; 74 -ms-flex-direction: row; 75 flex-direction: row; 76 list-style-type: none; 77 } 78 79 header.header nav ul li { 80 cursor: pointer; 81 margin-right: 4rem; 82 } 83 84 header.header nav ul li:last-child { 85 margin-right: 0; 86 } 87 88 /** 89 * Component <- Full Width Text 90 * 91 * Used in "Welcome To Caessino" 92 */ 93 .fullwidthText { 94 width: 100vw; 95 display: -webkit-box; 96 display: -ms-flexbox; 97 display: flex; 98 -webkit-box-orient: vertical; 99 -webkit-box-direction: normal; 100 -ms-flex-direction: column; 101 flex-direction: column; 102 -webkit-box-pack: center; 103 -ms-flex-pack: center; 104 justify-content: center; 105 -webkit-box-align: center; 106 -ms-flex-align: center; 107 align-items: center; 108 margin-top: 40px; 109 padding: 15px 0 20px 0; 110 background-color: rgba(0, 0, 0, 0.6); 111 } 112 113 .fullwidthText h1 { 114 color: #FFD700; 115 font-weight: lighter; 116 font-size: 2.5rem; 117 } 118 119 .fullwidthText h3 { 120 margin-top: 15px; 121 font-weight: lighter; 122 } 123 124 /** 125 * Component <- Alert 126 * 127 * Similar to Full Width Text 128 */ 129 .alert { 130 width: 100vw; 131 display: -webkit-box; 132 display: -ms-flexbox; 133 display: flex; 134 -webkit-box-orient: vertical; 135 -webkit-box-direction: normal; 136 -ms-flex-direction: column; 137 flex-direction: column; 138 -webkit-box-pack: center; 139 -ms-flex-pack: center; 140 justify-content: center; 141 -webkit-box-align: center; 142 -ms-flex-align: center; 143 align-items: center; 144 padding: 20px 0 25px 0; 145 background-color: rgba(0, 0, 0, 0.9); 146 position: absolute; 147 top: 50vh; 148 -webkit-transform: translateY(-70%); 149 transform: translateY(-70%); 150 -webkit-transition: '.5s linear'; 151 transition: '.5s linear'; 152 } 153 154 .alert h1 { 155 color: #FFD700; 156 font-weight: lighter; 157 font-size: 2.5rem; 158 } 159 160 .alert h3 { 161 margin-top: 10px; 162 font-weight: lighter; 163 } 164 165 .alert button { 166 width: 500px; 167 margin-top: 20px; 168 } 169 170 /** 171 * Component <- Notification 172 * 173 * Displayed fixed in the top right corner 174 */ 175 .notification { 176 position: fixed; 177 top: 40px; 178 right: 30px; 179 width: 500px; 180 min-height: 200px; 181 display: -webkit-box; 182 display: -ms-flexbox; 183 display: flex; 184 -webkit-box-orient: vertical; 185 -webkit-box-direction: normal; 186 -ms-flex-direction: column; 187 flex-direction: column; 188 -webkit-box-pack: center; 189 -ms-flex-pack: center; 190 justify-content: center; 191 -webkit-box-align: end; 192 -ms-flex-align: end; 193 align-items: flex-end; 194 font-size: 2rem; 195 padding: 20px; 196 border-radius: 15px; 197 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 198 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 199 } 200 201 .notification svg { 202 cursor: pointer; 203 } 204 205 .notification > div { 206 -webkit-box-flex: 1; 207 -ms-flex: 1; 208 flex: 1; 209 width: 100%; 210 display: -webkit-box; 211 display: -ms-flexbox; 212 display: flex; 213 -webkit-box-pack: center; 214 -ms-flex-pack: center; 215 justify-content: center; 216 -webkit-box-align: center; 217 -ms-flex-align: center; 218 align-items: center; 219 font-size: 1.5rem; 220 margin-bottom: 1.2rem; 221 text-align: center; 222 } 223 224 /** 225 * Component <- Game Circle 226 * 227 * Used in Landing Page -> to display the games in circles 228 */ 229 .gameCircles { 230 display: -webkit-box; 231 display: -ms-flexbox; 232 display: flex; 233 -webkit-box-orient: horizontal; 234 -webkit-box-direction: normal; 235 -ms-flex-direction: row; 236 flex-direction: row; 237 -webkit-box-pack: justify; 238 -ms-flex-pack: justify; 239 justify-content: space-between; 240 -webkit-box-align: center; 241 -ms-flex-align: center; 242 align-items: center; 243 width: 92vw; 244 margin: auto; 245 margin-top: 50px; 246 } 247 248 .gameCircles .gameCircle { 249 -webkit-transition: all .2s linear; 250 transition: all .2s linear; 251 cursor: pointer; 252 display: -webkit-box; 253 display: -ms-flexbox; 254 display: flex; 255 -webkit-box-orient: vertical; 256 -webkit-box-direction: normal; 257 -ms-flex-direction: column; 258 flex-direction: column; 259 -webkit-box-pack: center; 260 -ms-flex-pack: center; 261 justify-content: center; 262 -webkit-box-align: center; 263 -ms-flex-align: center; 264 align-items: center; 265 } 266 267 .gameCircles .gameCircle .circleLarge { 268 -webkit-transition: all .2s linear; 269 transition: all .2s linear; 270 width: 22vw; 271 aspect-ratio: 1; 272 border-radius: 100%; 273 background: -webkit-gradient(linear, left bottom, right top, from(#ffd900cc), to(#B65714)); 274 background: linear-gradient(to top right, #ffd900cc, #B65714); 275 opacity: .95; 276 display: -webkit-box; 277 display: -ms-flexbox; 278 display: flex; 279 -webkit-box-orient: vertical; 280 -webkit-box-direction: normal; 281 -ms-flex-direction: column; 282 flex-direction: column; 283 } 284 285 .gameCircles .gameCircle .circleLarge .circle { 286 border-radius: 100%; 287 width: 98%; 288 background-size: cover; 289 margin: auto; 290 aspect-ratio: 1; 291 } 292 293 .gameCircles .gameCircle h3 { 294 -webkit-transition: all .2s linear; 295 transition: all .2s linear; 296 font-weight: lighter; 297 margin-top: 30px; 298 opacity: 0; 299 } 300 301 .gameCircles .gameCircle h1.loading { 302 color: white; 303 position: absolute; 304 width: 100vw; 305 top: 50vh; 306 left: 50vw; 307 -webkit-transform: translate(-50%, -50%); 308 transform: translate(-50%, -50%); 309 font-size: 5rem; 310 z-index: 10; 311 } 312 313 .gameCircles .gameCircle:hover .circleLarge { 314 -webkit-transform: scale(1.1); 315 transform: scale(1.1); 316 opacity: 1; 317 } 318 319 .gameCircles .gameCircle:hover h3 { 320 opacity: 1; 321 } 322 323 .gameCircles:hover .gameCircle .circleLarge { 324 opacity: 1 !important; 325 } 326 327 /** 328 * Full Screen Overlay 329 */ 330 .fullscreen { 331 position: fixed; 332 top: 0; 333 left: 0; 334 width: 100vw; 335 height: 100vh; 336 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625)); 337 background: linear-gradient(to right, #0B932E, #097625); 338 color: #ead24d; 339 } 340 341 .fs-centered > div { 342 position: fixed; 343 top: 50vh; 344 left: 50vw; 345 -webkit-transform: translate(-50%, -50%); 346 transform: translate(-50%, -50%); 347 } 348 349 .fs-inputs-container > div { 350 margin: auto; 351 margin-top: 2.4rem; 352 width: -webkit-fit-content; 353 width: -moz-fit-content; 354 width: fit-content; 355 display: -webkit-box; 356 display: -ms-flexbox; 357 display: flex; 358 -webkit-box-orient: vertical; 359 -webkit-box-direction: normal; 360 -ms-flex-direction: column; 361 flex-direction: column; 362 -webkit-box-pack: center; 363 -ms-flex-pack: center; 364 justify-content: center; 365 -webkit-box-align: center; 366 -ms-flex-align: center; 367 align-items: center; 368 } 369 370 .fs-inputs-container > div > span { 371 margin-bottom: .5rem; 372 font-size: 1.5rem; 373 } 374 375 .fs-inputs-container > div > input { 376 margin-bottom: 2rem; 377 font-size: 2rem; 378 } 379 380 .statsScreen svg { 381 cursor: pointer; 382 font-size: 2.5rem; 383 color: white; 384 } 385 386 .statsScreen > div h1 { 387 font-size: 2.5rem; 388 margin-bottom: 5rem; 389 } 390 391 .statsScreen > div p { 392 display: -webkit-box; 393 display: -ms-flexbox; 394 display: flex; 395 -webkit-box-pack: justify; 396 -ms-flex-pack: justify; 397 justify-content: space-between; 398 font-size: 1.5rem; 399 margin-bottom: 1rem; 400 } 401 402 .statsScreen > div p:nth-child(2n) { 403 color: white; 404 } 405 406 .statsScreen > div p span { 407 margin-left: 5rem; 408 } 409 410 .manageCreditsScreen svg { 411 cursor: pointer; 412 font-size: 2.5rem; 413 color: white; 414 } 415 416 .manageCreditsScreen > div h1 { 417 font-size: 1.5rem; 418 margin-bottom: 1rem; 419 } 420 421 .manageCreditsScreen > div p { 422 margin-bottom: 5rem; 423 color: white; 424 } 425 426 .manageCreditsScreen > div button { 427 width: 100%; 428 } 429 430 .inlineAlert { 431 cursor: pointer; 432 background-color: #ffdddd; 433 padding: .8rem 2.4rem; 434 border-radius: 15px; 435 color: #ff0000; 436 font-size: 1.8rem !important; 437 font-weight: 100; 438 letter-spacing: -.030em; 439 } 440 441 /** 442 * Component <- Loading 443 */ 444 .loadingScreen h1 { 445 font-size: 5rem; 446 } 447 448 /** 449 * Component <- RegisterScreen 450 */ 451 /** 452 * Primary Thingies 453 */ 454 .primaryButton { 455 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625)); 456 background: linear-gradient(to right, #0B932E, #097625); 457 color: #ead24d; 458 outline: none; 459 border: none; 460 border-radius: 10px; 461 font-size: 1.5rem; 462 font-weight: bold; 463 padding: 5px 20px; 464 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 465 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 466 cursor: pointer; 467 -webkit-transition: all .2s linear; 468 transition: all .2s linear; 469 } 470 471 .primaryButton:hover { 472 -webkit-transform: scale(1.1) rotateZ(-1deg); 473 transform: scale(1.1) rotateZ(-1deg); 474 } 475 476 .primaryButton:active { 477 -webkit-transition: .05s linear; 478 transition: .05s linear; 479 -webkit-transform: scale(1) rotateZ(-1deg); 480 transform: scale(1) rotateZ(-1deg); 481 } 482 483 .secondaryButton { 484 background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea)); 485 background: linear-gradient(to right, #4d99ea, #4d99ea); 486 color: white; 487 outline: none; 488 border: none; 489 border-radius: 10px; 490 font-size: 1.5rem; 491 font-weight: bold; 492 padding: 5px 20px; 493 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 494 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 495 cursor: pointer; 496 -webkit-transition: all .2s linear; 497 transition: all .2s linear; 498 } 499 500 .secondaryButton:hover { 501 -webkit-transform: scale(1.1) rotateZ(-1deg); 502 transform: scale(1.1) rotateZ(-1deg); 503 } 504 505 .secondaryButton:active { 506 -webkit-transition: .05s linear; 507 transition: .05s linear; 508 -webkit-transform: scale(1) rotateZ(-1deg); 509 transform: scale(1) rotateZ(-1deg); 510 } 511 512 /** 513 * Input Sliders 514 */ 515 .primarySlider { 516 -webkit-appearance: none; 517 width: 250px; 518 height: 10px; 519 background: #0B932E; 520 outline: none; 521 border-radius: 10px; 522 -webkit-transition: .2s; 523 -webkit-transition: opacity .2s; 524 transition: opacity .2s; 525 -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25); 526 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25); 527 } 528 529 .primarySlider:hover { 530 opacity: 1; 531 } 532 533 .primarySlider::-webkit-slider-thumb { 534 -webkit-appearance: none; 535 appearance: none; 536 outline: none; 537 border: none; 538 width: 35px; 539 height: 35px; 540 border-radius: 50%; 541 background: url("/images/gold-coin.png"); 542 background-size: contain; 543 background-color: #ead24d; 544 cursor: pointer; 545 } 546 547 .primarySlider::-moz-range-thumb { 548 -moz-appearance: none; 549 appearance: none; 550 outline: none; 551 border: none; 552 width: 35px; 553 height: 35px; 554 border-radius: 50%; 555 background: url("/images/gold-coin.png"); 556 background-size: contain; 557 background-color: #ead24d; 558 cursor: pointer; 559 } 560 561 /** 562 * Scrollbar 563 */ 564 /* width */ 565 ::-webkit-scrollbar { 566 width: 15px; 567 } 568 569 /* Track */ 570 ::-webkit-scrollbar-track { 571 background: #0B932E; 572 } 573 574 /* Handle */ 575 ::-webkit-scrollbar-thumb { 576 background: #ead24d; 577 } 578 579 /* Handle on hover */ 580 ::-webkit-scrollbar-thumb:hover { 581 background: #efcb00; 582 } 583 584 /** 585 * File <- Blackjack Main 586 * Components <- PlayButtons, Cards 587 */ 588 .blackjackButtons { 589 position: absolute; 590 left: 0; 591 top: 90vh; 592 width: 100vw; 593 height: 10vh; 594 overflow: hidden; 595 } 596 597 .blackjackButtons > div { 598 display: -webkit-box; 599 display: -ms-flexbox; 600 display: flex; 601 -webkit-box-orient: horizontal; 602 -webkit-box-direction: normal; 603 -ms-flex-direction: row; 604 flex-direction: row; 605 -webkit-box-pack: center; 606 -ms-flex-pack: center; 607 justify-content: center; 608 -webkit-box-align: center; 609 -ms-flex-align: center; 610 align-items: center; 611 -webkit-transition: .5s ease-in-out; 612 transition: .5s ease-in-out; 613 } 614 615 .blackjackButtons > div > button { 616 width: 300px; 617 } 618 619 .blackjackButtons > div > button:nth-child(2) { 620 margin-left: 30px; 621 } 622 623 .blackjackCards .card { 624 aspect-ratio: 400/560; 625 height: 150px; 626 background-size: contain; 627 position: absolute; 628 -webkit-transition: .5s ease-in-out; 629 transition: .5s ease-in-out; 630 border-radius: 10px; 631 border: 1px solid black; 632 } 633 634 .blackjackDisplayBet { 635 position: absolute; 636 -webkit-transform: translate(-50%, -50%); 637 transform: translate(-50%, -50%); 638 left: 51vw; 639 top: 63.5vh; 640 } 641 642 .blackjackSideBetsModal { 643 z-index: 20; 644 -webkit-box-orient: vertical !important; 645 -webkit-box-direction: normal !important; 646 -ms-flex-direction: column !important; 647 flex-direction: column !important; 648 position: fixed; 649 left: 50vw; 650 top: 45vh; 651 width: 41vw; 652 height: 80vh; 653 padding: 10px; 654 -webkit-transform: translate(-50%, -50%); 655 transform: translate(-50%, -50%); 656 background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0)); 657 background: linear-gradient(to right, #0B932Ec0, #097625e0); 658 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25); 659 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25); 660 border-radius: 20px; 661 overflow-y: scroll; 662 } 663 664 .blackjackSideBetsModal .blackjackSideBetSelect { 665 display: -webkit-box; 666 display: -ms-flexbox; 667 display: flex; 668 -webkit-box-orient: vertical; 669 -webkit-box-direction: normal; 670 -ms-flex-direction: column; 671 flex-direction: column; 672 width: 100%; 673 } 674 675 .blackjackSideBetsModal .blackjackSideBetSelect:first-child { 676 margin-top: 10rem; 677 } 678 679 .blackjackSideBetsModal .blackjackSideBetSelect h1 { 680 margin-bottom: 1rem; 681 color: #ead24d; 682 } 683 684 .blackjackSideBetsModal .blackjackSideBetSelect > div { 685 text-align: left; 686 } 687 688 .blackjackSideBetsModal .blackjackSideBetSelect > div p { 689 margin-bottom: 1rem; 690 padding: 10px 20px; 691 border-radius: 5px; 692 cursor: pointer; 693 -webkit-transition: all .25s linear; 694 transition: all .25s linear; 695 } 696 697 .blackjackSideBetsModal .blackjackSideBetSelect > div p span { 698 font-size: 1.2rem; 699 color: #ead24d; 700 } 701 702 .blackjackSideBetsModal .blackjackSideBetSelect > div p:hover { 703 color: #ead24d; 704 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 705 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); 706 } 707 708 .blackjackSideBetsChooseCreditsModal { 709 z-index: 20; 710 -webkit-box-orient: vertical !important; 711 -webkit-box-direction: normal !important; 712 -ms-flex-direction: column !important; 713 flex-direction: column !important; 714 position: fixed; 715 left: 50vw; 716 top: 45vh; 717 width: 41vw; 718 height: 80vh; 719 padding: 10px; 720 -webkit-transform: translate(-50%, -50%); 721 transform: translate(-50%, -50%); 722 background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080)); 723 background: linear-gradient(to right, #00000080, #00000080); 724 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25); 725 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25); 726 border-radius: 20px; 727 } 728 729 .blackjackSideBetsChooseCreditsModal p { 730 margin-bottom: 1rem; 731 padding: 10px 20px; 732 border-radius: 5px; 733 -webkit-transition: all .25s linear; 734 transition: all .25s linear; 735 } 736 737 .blackjackSideBetsChooseCreditsModal p span { 738 font-size: 1.2rem; 739 color: white; 740 } 741 /*# sourceMappingURL=globals.css.map */
Note:
See TracChangeset
for help on using the changeset viewer.