diff options
Diffstat (limited to 'frontend/src/css/Games.css')
| -rw-r--r-- | frontend/src/css/Games.css | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css new file mode 100644 index 0000000..ec57a71 --- /dev/null +++ b/frontend/src/css/Games.css | |||
| @@ -0,0 +1,99 @@ | |||
| 1 | .games-page { | ||
| 2 | position: absolute; | ||
| 3 | left: 320px; | ||
| 4 | color: white; | ||
| 5 | width: calc(100% - 320px); | ||
| 6 | height: 100%; | ||
| 7 | font-family: BarlowSemiCondensed-Regular; | ||
| 8 | color: #ffffff; | ||
| 9 | overflow-y: scroll; | ||
| 10 | scrollbar-width: thin; | ||
| 11 | } | ||
| 12 | |||
| 13 | .games-page-item-content { | ||
| 14 | position: absolute; | ||
| 15 | left: 50px; | ||
| 16 | width: calc(100% - 100px); | ||
| 17 | } | ||
| 18 | |||
| 19 | .games-page-item-content a { | ||
| 20 | color: inherit; | ||
| 21 | } | ||
| 22 | |||
| 23 | .games-page-header { | ||
| 24 | margin-top: 50px; | ||
| 25 | margin-left: 50px; | ||
| 26 | } | ||
| 27 | |||
| 28 | span>b { | ||
| 29 | font-size: 56px; | ||
| 30 | font-family: BarlowCondensed-Bold; | ||
| 31 | } | ||
| 32 | |||
| 33 | .loader-game { | ||
| 34 | width: 100%; | ||
| 35 | height: 256px; | ||
| 36 | border-radius: 24px; | ||
| 37 | overflow: hidden; | ||
| 38 | margin: 25px 0px; | ||
| 39 | } | ||
| 40 | |||
| 41 | .games-page-item { | ||
| 42 | width: 100%; | ||
| 43 | height: 256px; | ||
| 44 | background: #202232; | ||
| 45 | border-radius: 24px; | ||
| 46 | overflow: hidden; | ||
| 47 | margin: 25px 0px; | ||
| 48 | } | ||
| 49 | |||
| 50 | .games-page-item-header { | ||
| 51 | width: 100%; | ||
| 52 | height: 50%; | ||
| 53 | background-size: cover; | ||
| 54 | overflow: hidden; | ||
| 55 | } | ||
| 56 | |||
| 57 | .games-page-item-header-img { | ||
| 58 | width: 100%; | ||
| 59 | height: 100%; | ||
| 60 | backdrop-filter: blur(4px); | ||
| 61 | filter: blur(4px); | ||
| 62 | background-size: cover; | ||
| 63 | } | ||
| 64 | |||
| 65 | .games-page-item-header span>b { | ||
| 66 | display: flex; | ||
| 67 | justify-content: center; | ||
| 68 | align-items: center; | ||
| 69 | height: 100%; | ||
| 70 | transform: translateY(-100%); | ||
| 71 | } | ||
| 72 | |||
| 73 | .games-page-item-body { | ||
| 74 | display: flex; | ||
| 75 | justify-content: center; | ||
| 76 | align-items: center; | ||
| 77 | height: 50%; | ||
| 78 | } | ||
| 79 | |||
| 80 | .games-page-item-body-item { | ||
| 81 | background: #2B2E46; | ||
| 82 | text-align: center; | ||
| 83 | width: max-content; | ||
| 84 | width: calc(100% - 24px); | ||
| 85 | height: 100px; | ||
| 86 | border-radius: 24px; | ||
| 87 | color: #CDCFDF; | ||
| 88 | margin: 12px; | ||
| 89 | } | ||
| 90 | |||
| 91 | .games-page-item-body-item-title { | ||
| 92 | margin-top: 0px; | ||
| 93 | font-size: 26px; | ||
| 94 | } | ||
| 95 | |||
| 96 | .games-page-item-body-item-num { | ||
| 97 | font-size: 50px; | ||
| 98 | font-family: BarlowCondensed-Bold; | ||
| 99 | } \ No newline at end of file | ||