mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-14 14:22:16 +00:00
280 lines
No EOL
4.8 KiB
Sass
280 lines
No EOL
4.8 KiB
Sass
$black: var(--black)
|
|
$white: var(--white)
|
|
$primary: var(--primary)
|
|
$secondary: var(--secondary)
|
|
$gold: var(--gold)
|
|
$silver: var(--silver)
|
|
$bronze: var(--bronze)
|
|
|
|
\:root
|
|
--black: 31, 27, 21
|
|
--white: 232, 227, 227
|
|
--primary: 210, 206, 97
|
|
--secondary: 185, 77, 77
|
|
--gold: 255, 222, 70
|
|
--silver: 229, 220, 206
|
|
--bronze: 193, 145, 69
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap')
|
|
@import "profile-settings"
|
|
@import "block"
|
|
@import "button"
|
|
@import "hint"
|
|
|
|
*
|
|
box-sizing: border-box
|
|
font-family: 'Merriweather', serif
|
|
|
|
html
|
|
margin: 0
|
|
padding: 0
|
|
|
|
body
|
|
margin: 0
|
|
padding: 0
|
|
display: flex
|
|
flex-direction: row
|
|
background-color: RGB($black)
|
|
color: RGB($white)
|
|
|
|
.background
|
|
position: fixed
|
|
inset: 0
|
|
overflow: hidden
|
|
z-index: 1
|
|
|
|
> img
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
|
|
.app
|
|
margin: 0 auto
|
|
padding: 0
|
|
|
|
width: 800px
|
|
min-height: 100vh
|
|
|
|
position: relative
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
background-color: rgba($black, 0.5)
|
|
backdrop-filter: blur(5px)
|
|
z-index: 2
|
|
|
|
.table
|
|
width: 100%
|
|
height: auto
|
|
background-color: rgba($black, 0.5)
|
|
border-radius: 2px
|
|
border: 1px solid RGBA(var(--white),0.05)
|
|
overflow: hidden
|
|
|
|
> table
|
|
width: 100%
|
|
border-collapse: collapse
|
|
|
|
> tbody
|
|
> tr
|
|
height: 2.75rem
|
|
vertical-align: middle
|
|
|
|
> th
|
|
padding: 0.5rem
|
|
background-image: linear-gradient(to bottom, RGBA($white, 0.05), transparent)
|
|
text-align: center
|
|
font-weight: bolder
|
|
|
|
> td
|
|
padding: 0.5rem
|
|
text-align: center
|
|
|
|
> a
|
|
color: RGB($white)
|
|
text-decoration: none
|
|
|
|
&#you
|
|
color: RGB($primary)
|
|
text-shadow: 0 0 5px RGBA($primary, 0.4)
|
|
|
|
&:hover
|
|
text-decoration: underline
|
|
|
|
> i
|
|
padding: 0.25rem
|
|
color: RGB($black)
|
|
border-radius: 2px
|
|
|
|
&.first
|
|
background-color: RGBA($gold, 0.6)
|
|
|
|
&.second
|
|
background-color: RGBA($silver, 0.6)
|
|
|
|
&.third
|
|
background-color: RGBA($bronze, 0.6)
|
|
|
|
&:nth-child(odd) > td
|
|
background-color: RGBA($white, 0.01)
|
|
|
|
header
|
|
padding: 1rem 1rem 0
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 0.4rem
|
|
background-image: linear-gradient(to bottom, RGB(var(--black)), transparent)
|
|
|
|
> hr
|
|
margin: 0
|
|
width: 100%
|
|
border: none
|
|
border-bottom: 1px solid RGBA($white, 0.1)
|
|
|
|
.title
|
|
margin-bottom: 1rem
|
|
height: auto
|
|
> img
|
|
width: 100%
|
|
height: auto
|
|
max-width: 100%
|
|
|
|
nav, nav > form
|
|
padding: 0
|
|
width: 100%
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: center
|
|
gap: 0.4rem
|
|
|
|
.spacer
|
|
width: 100%
|
|
|
|
@media (max-width: 700px)
|
|
nav, nav > form
|
|
&.compact
|
|
flex-direction: column
|
|
|
|
.flash
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
> p
|
|
margin: 0
|
|
padding: 0.75rem 1rem
|
|
|
|
width: 100%
|
|
position: relative
|
|
|
|
background-color: RGB($black)
|
|
color: RGB($primary)
|
|
|
|
transition: background-color 0.2s ease-in-out, padding 0.2s ease-in-out
|
|
|
|
> span
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
bottom: 0
|
|
width: 0.25rem
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
background-color: RGB($primary)
|
|
color: transparent
|
|
|
|
overflow: hidden
|
|
transition: width 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out
|
|
|
|
> i
|
|
font-size: 1.25em
|
|
|
|
&:hover
|
|
padding: 0.75rem 1rem 0.75rem 4rem
|
|
background-color: RGBA($primary, 0.1)
|
|
cursor: pointer
|
|
|
|
> span
|
|
width: 3rem
|
|
color: RGB($black)
|
|
|
|
&.success
|
|
color: RGB($primary)
|
|
|
|
> span
|
|
background-color: RGB($primary)
|
|
|
|
&:hover
|
|
background-color: RGBA($primary, 0.1)
|
|
|
|
&.error
|
|
color: RGB($secondary)
|
|
|
|
> span
|
|
background-color: RGB($secondary)
|
|
|
|
&:hover
|
|
background-color: RGBA($secondary, 0.1)
|
|
|
|
main
|
|
padding: 1rem
|
|
height: 100%
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
> h2
|
|
margin: 0 0 1rem 0
|
|
font-size: 1.5em
|
|
color: RGB($white)
|
|
|
|
.center-text
|
|
height: 100%
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
> h2
|
|
margin: 0
|
|
text-align: center
|
|
font-size: 2em
|
|
color: RGB($white)
|
|
|
|
> p
|
|
margin: 0
|
|
text-align: center
|
|
font-size: 1em
|
|
color: RGB($white)
|
|
|
|
> img
|
|
margin: 1rem auto 0
|
|
max-width: 100%
|
|
max-height: 15rem
|
|
border-radius: 2px
|
|
|
|
footer
|
|
padding: 0.5rem 1rem
|
|
width: 100%
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
p
|
|
margin: 0
|
|
width: 100%
|
|
text-align: center
|
|
font-size: 0.8em
|
|
white-space: nowrap
|
|
color: RGB($white)
|
|
|
|
a
|
|
color: RGB($secondary)
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
text-decoration: underline |