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