376 lines
9.3 KiB
Sass
376 lines
9.3 KiB
Sass
@import "@/common/styles/colors"
|
|
|
|
.waiting-room-page
|
|
height: 100vh
|
|
width: 100vw
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
position: relative
|
|
padding: 20px
|
|
animation: page-fade-in 0.8s ease-in-out
|
|
|
|
.waiting-room-header
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
width: 100%
|
|
margin-bottom: 30px
|
|
position: relative
|
|
z-index: 2
|
|
animation: float-up 0.8s ease-out
|
|
|
|
.back-button
|
|
position: absolute
|
|
left: 20px
|
|
top: 0
|
|
background: none
|
|
border: none
|
|
color: $white
|
|
font-size: 1rem
|
|
display: flex
|
|
align-items: center
|
|
gap: 10px
|
|
cursor: pointer
|
|
transition: all 0.2s ease
|
|
padding: 8px 16px
|
|
border-radius: 5px
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.1)
|
|
|
|
h1
|
|
font-size: 42pt
|
|
color: $white
|
|
margin-bottom: 15px
|
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.7)
|
|
background: linear-gradient(135deg, $pink, $blue 45%, $mint-green 65%, $yellow 85%, $pink)
|
|
background-size: 300% 100%
|
|
animation: title-shimmer 10s infinite alternate ease-in-out
|
|
-webkit-background-clip: text
|
|
background-clip: text
|
|
-webkit-text-fill-color: transparent
|
|
|
|
.room-code-container
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
|
|
.room-code
|
|
font-size: 1.2rem
|
|
color: $white
|
|
background: rgba(255, 255, 255, 0.1)
|
|
padding: 10px 25px
|
|
border-radius: 10px
|
|
cursor: pointer
|
|
transition: all 0.3s ease
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
backdrop-filter: blur(5px)
|
|
display: flex
|
|
align-items: center
|
|
gap: 10px
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.2)
|
|
border: 1px solid rgba(255, 255, 255, 0.4)
|
|
|
|
.code
|
|
font-weight: bold
|
|
font-size: 1.3rem
|
|
color: $yellow
|
|
letter-spacing: 2px
|
|
margin-left: 5px
|
|
margin-right: 5px
|
|
|
|
svg
|
|
font-size: 1rem
|
|
transition: all 0.3s ease
|
|
|
|
&.copied
|
|
color: $mint-green
|
|
animation: pop 0.3s ease
|
|
|
|
.copy-hint
|
|
margin-top: 5px
|
|
font-size: 0.8rem
|
|
color: $border
|
|
opacity: 0.7
|
|
|
|
.waiting-room-content
|
|
display: flex
|
|
width: 100%
|
|
max-width: 1200px
|
|
gap: 30px
|
|
height: calc(100vh - 180px)
|
|
z-index: 2
|
|
position: relative
|
|
animation: float-up 1.2s ease-out
|
|
|
|
.users-panel,
|
|
.chat-panel
|
|
background: rgba(255, 255, 255, 0.08)
|
|
backdrop-filter: blur(10px)
|
|
border-radius: 20px
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
display: flex
|
|
flex-direction: column
|
|
animation: card-pulse 6s infinite alternate ease-in-out
|
|
transition: all 0.3s ease
|
|
|
|
&:hover
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.15)
|
|
|
|
.users-panel
|
|
width: 30%
|
|
|
|
.users-list
|
|
flex-grow: 1
|
|
overflow-y: auto
|
|
padding: 15px
|
|
|
|
&::-webkit-scrollbar
|
|
width: 6px
|
|
background: rgba(0, 0, 0, 0.2)
|
|
border-radius: 3px
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
background: rgba(255, 255, 255, 0.2)
|
|
border-radius: 3px
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.3)
|
|
|
|
.no-users
|
|
color: $border
|
|
text-align: center
|
|
padding: 20px 0
|
|
font-style: italic
|
|
|
|
.user-item
|
|
margin-bottom: 10px
|
|
padding: 12px 15px
|
|
background: rgba(255, 255, 255, 0.05)
|
|
border-radius: 10px
|
|
color: $white
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
transition: all 0.2s ease
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.1)
|
|
transform: translateY(-2px)
|
|
|
|
&.host
|
|
border: 1px solid $yellow
|
|
box-shadow: 0 0 10px rgba($yellow, 0.3)
|
|
|
|
.host-badge
|
|
background: $yellow
|
|
color: #000
|
|
font-size: 0.75rem
|
|
padding: 3px 8px
|
|
border-radius: 10px
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
|
|
.game-controls
|
|
margin: 15px
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 10px
|
|
|
|
.start-game-button
|
|
padding: 15px
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
border: none
|
|
border-radius: 12px
|
|
color: $white
|
|
font-size: 1.1rem
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: 10px
|
|
cursor: pointer
|
|
transition: all 0.3s ease
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
|
|
|
|
svg
|
|
font-size: 1.2rem
|
|
|
|
&:hover:not(.disabled)
|
|
transform: translateY(-3px)
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba($purple, 0.6)
|
|
background: linear-gradient(135deg, lighten($purple, 5%), lighten($blue, 5%))
|
|
|
|
&.disabled
|
|
background: linear-gradient(135deg, desaturate($purple, 40%), desaturate($blue, 40%))
|
|
opacity: 0.7
|
|
cursor: not-allowed
|
|
|
|
.start-hint
|
|
color: $border
|
|
text-align: center
|
|
font-size: 0.8rem
|
|
font-style: italic
|
|
|
|
.chat-panel
|
|
width: 70%
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.chat-messages
|
|
flex-grow: 1
|
|
overflow-y: auto
|
|
padding: 15px
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
&::-webkit-scrollbar
|
|
width: 8px
|
|
background: rgba(0, 0, 0, 0.2)
|
|
border-radius: 4px
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
background: rgba(255, 255, 255, 0.2)
|
|
border-radius: 4px
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.3)
|
|
|
|
.message
|
|
margin-bottom: 10px
|
|
padding: 10px 15px
|
|
border-radius: 12px
|
|
background: rgba(255, 255, 255, 0.05)
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
color: $white
|
|
animation: message-fade-in 0.3s ease-out
|
|
width: fit-content
|
|
max-width: 80%
|
|
align-self: flex-start
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.1)
|
|
|
|
.message-sender
|
|
font-weight: bold
|
|
color: $yellow
|
|
margin-right: 5px
|
|
|
|
.message-text
|
|
color: $white
|
|
|
|
&.system-message
|
|
background: rgba(0, 0, 0, 0.2)
|
|
border: 1px solid rgba(255, 255, 255, 0.05)
|
|
color: $border
|
|
padding: 8px 12px
|
|
font-style: italic
|
|
align-self: center
|
|
|
|
.message-text.system
|
|
color: $border
|
|
font-style: italic
|
|
|
|
.chat-input
|
|
display: flex
|
|
padding: 15px
|
|
gap: 10px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1)
|
|
border-radius: 0 0 20px 20px
|
|
|
|
input
|
|
flex: 1
|
|
padding: 12px 15px
|
|
background: rgba(0, 0, 0, 0.3)
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
border-radius: 8px
|
|
color: $white
|
|
outline: none
|
|
transition: all 0.2s ease
|
|
|
|
&:focus
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1)
|
|
|
|
button
|
|
padding: 12px 20px
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
border: none
|
|
border-radius: 8px
|
|
color: $white
|
|
cursor: pointer
|
|
transition: all 0.3s ease
|
|
|
|
&:hover
|
|
transform: translateY(-2px)
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba($purple, 0.5)
|
|
|
|
.panel-header
|
|
display: flex
|
|
align-items: center
|
|
gap: 10px
|
|
padding: 15px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
|
|
border-radius: 20px 20px 0 0
|
|
|
|
svg
|
|
color: $white
|
|
font-size: 1.4rem
|
|
|
|
h2
|
|
color: $white
|
|
font-size: 1.4rem
|
|
margin: 0
|
|
|
|
@keyframes pop
|
|
0%
|
|
transform: scale(1)
|
|
50%
|
|
transform: scale(1.3)
|
|
100%
|
|
transform: scale(1)
|
|
|
|
@keyframes title-shimmer
|
|
0%
|
|
background-position: 0% 50%
|
|
50%
|
|
background-position: 100% 50%
|
|
100%
|
|
background-position: 0% 50%
|
|
|
|
@keyframes message-fade-in
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(5px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
@keyframes card-pulse
|
|
0%, 100%
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
|
|
50%
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.2)
|
|
|
|
@keyframes float-up
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(20px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
@keyframes page-fade-in
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|