WebsiteProjects/ToneGuessr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update WaitingRoom design

Browse Source
This commit is contained in:
Mathias Wagner 2025-03-01 16:26:36 +01:00
parent 251879a1e1
commit a1193ea87f
1 changed files with 62 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
client/src/pages/WaitingRoom/styles.sass
View File

@ -335,34 +335,51 @@
margin: 0 margin: 0
.playlist-section .playlist-section
background: rgba(255, 255, 255, 0.08) background: rgba(20, 20, 30, 0.6)
backdrop-filter: blur(10px) backdrop-filter: blur(10px)
border-radius: 20px border-radius: 15px
padding: 25px padding: 25px
animation: float-up 0.8s ease-out animation: float-up 0.8s ease-out
border: 1px solid rgba(255, 255, 255, 0.2) border: 1px solid rgba(255, 255, 255, 0.1)
transition: all 0.3s ease
&:hover
border-color: rgba(255, 255, 255, 0.2)
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
.section-header .section-header
background: rgba(30, 30, 40, 0.95)
padding: 20px
border-radius: 12px
margin: -25px -25px 25px -25px
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
text-align: center text-align: center
margin-bottom: 20px
h2 h2
margin: 0 margin: 0
font-size: 32px font-size: 24px
color: $white color: $white
background: linear-gradient(135deg, $yellow, $pink) display: flex
-webkit-background-clip: text align-items: center
background-clip: text justify-content: center
-webkit-text-fill-color: transparent gap: 10px
&:before, &:after
content: ""
height: 1px
width: 50px
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
.vote-info .vote-info
color: rgba(255, 255, 255, 0.7) color: rgba(255, 255, 255, 0.6)
font-size: 16px font-size: 14px
margin-top: 5px
.playlists-grid .playlists-grid
display: grid display: grid
grid-template-columns: repeat(3, 1fr) grid-template-columns: repeat(3, 1fr)
gap: 25px gap: 20px
padding: 5px
@media (max-width: 1200px) @media (max-width: 1200px)
grid-template-columns: repeat(2, 1fr) grid-template-columns: repeat(2, 1fr)
@ -371,31 +388,36 @@
grid-template-columns: 1fr grid-template-columns: 1fr
.playlist-card .playlist-card
background: rgba(20, 20, 30, 0.6) background: rgba(255, 255, 255, 0.05)
border-radius: 15px border-radius: 12px
overflow: hidden overflow: hidden
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
cursor: pointer cursor: pointer
border: 2px solid transparent border: 1px solid rgba(255, 255, 255, 0.1)
&:hover &:hover
transform: translateY(-5px) transform: translateY(-5px)
background: rgba(30, 30, 40, 0.8) background: rgba(255, 255, 255, 0.08)
border-color: rgba(255, 255, 255, 0.2)
.playlist-overlay .playlist-overlay
opacity: 1 opacity: 1
&.selected &.selected
border-color: $yellow background: rgba($yellow, 0.1)
box-shadow: 0 0 30px rgba($yellow, 0.3) border-color: rgba($yellow, 0.3)
box-shadow: 0 0 30px rgba($yellow, 0.15)
.playlist-overlay .playlist-overlay
opacity: 1 opacity: 1
background: rgba(0, 0, 0, 0.5) background: rgba(0, 0, 0, 0.4)
.your-vote .your-vote
transform: translateY(0) transform: translateY(0)
opacity: 1 opacity: 1
.playlist-info h3
color: $yellow
.playlist-thumbnail .playlist-thumbnail
position: relative position: relative
@ -422,40 +444,48 @@
align-items: center align-items: center
.vote-count .vote-count
background: rgba(0, 0, 0, 0.8) background: rgba(20, 20, 30, 0.85)
padding: 12px 20px padding: 12px 20px
border-radius: 25px border-radius: 15px
text-align: center text-align: center
border: 1px solid rgba(255, 255, 255, 0.2)
backdrop-filter: blur(5px)
.count .count
font-size: 32px font-size: 28px
font-weight: bold font-weight: bold
color: $yellow color: $yellow
display: block display: block
text-shadow: 0 0 10px rgba($yellow, 0.5)
.vote-label .vote-label
font-size: 14px font-size: 12px
color: rgba(255, 255, 255, 0.8) color: rgba(255, 255, 255, 0.7)
.your-vote .your-vote
position: absolute position: absolute
bottom: 15px bottom: 15px
background: $yellow background: $yellow
color: #000 color: rgba(0, 0, 0, 0.8)
padding: 8px 16px padding: 8px 16px
border-radius: 20px border-radius: 20px
font-weight: bold font-weight: bold
font-size: 12px
transform: translateY(20px) transform: translateY(20px)
opacity: 0 opacity: 0
transition: all 0.3s ease transition: all 0.3s ease
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
.playlist-info .playlist-info
padding: 20px padding: 15px
background: rgba(20, 20, 30, 0.4)
border-top: 1px solid rgba(255, 255, 255, 0.05)
h3 h3
color: $white color: $white
margin-bottom: 10px margin-bottom: 8px
font-size: 20px font-size: 18px
transition: color 0.3s ease
.playlist-details .playlist-details
display: flex display: flex
@ -463,8 +493,8 @@
gap: 8px gap: 8px
span span
color: rgba(255, 255, 255, 0.7) color: rgba(255, 255, 255, 0.6)
font-size: 14px font-size: 13px
.vote-percentage-bar .vote-percentage-bar
height: 4px height: 4px
@ -474,7 +504,8 @@
.fill .fill
height: 100% height: 100%
background: linear-gradient(90deg, $yellow, $pink) background: linear-gradient(90deg, $yellow, rgba($yellow, 0.5))
box-shadow: 0 0 10px rgba($yellow, 0.3)
transition: width 0.3s ease transition: width 0.3s ease
.bottom-section .bottom-section