1044 lines
26 KiB
Sass
1044 lines
26 KiB
Sass
@import "@/common/styles/colors"
|
|
|
|
|
|
.game-page
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
height: 100vh
|
|
width: 100vw
|
|
position: relative
|
|
animation: page-fade-in 1s ease-in-out
|
|
overflow: hidden
|
|
|
|
&.with-otamatone
|
|
.game-layout
|
|
height: calc(100vh - 280px)
|
|
padding-bottom: 20px
|
|
|
|
.chat-panel
|
|
max-height: calc(100vh - 300px)
|
|
|
|
.game-layout
|
|
display: flex
|
|
width: 100%
|
|
height: calc(100vh - 180px)
|
|
justify-content: space-between
|
|
align-items: stretch
|
|
padding: 0 20px
|
|
z-index: 2
|
|
position: relative
|
|
transition: height 0.3s ease
|
|
|
|
.main-content
|
|
flex: 1
|
|
padding: 20px 30px
|
|
overflow-y: auto
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
min-width: 0
|
|
margin-right: 20px
|
|
|
|
.chat-panel
|
|
width: 280px
|
|
height: 100%
|
|
max-height: calc(100vh - 200px)
|
|
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
|
|
overflow: hidden
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), max-height 0.3s ease
|
|
animation: slide-in-right 0.5s ease-out
|
|
|
|
.chat-header
|
|
display: flex
|
|
align-items: center
|
|
padding: 12px 15px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
|
|
|
|
svg
|
|
font-size: 16px
|
|
color: $white
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
|
|
animation: icon-pulse 3s infinite alternate ease-in-out
|
|
|
|
.chat-title
|
|
margin-left: 10px
|
|
font-size: 16px
|
|
color: $white
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3)
|
|
|
|
.chat-messages
|
|
flex: 1
|
|
padding: 10px
|
|
overflow-y: auto
|
|
color: $white
|
|
font-size: 14px
|
|
|
|
&::-webkit-scrollbar
|
|
width: 4px
|
|
background: transparent
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
background: rgba(255, 255, 255, 0.2)
|
|
border-radius: 2px
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.3)
|
|
|
|
.message
|
|
margin-bottom: 8px
|
|
padding: 6px 10px
|
|
border-radius: 8px
|
|
background: rgba(255, 255, 255, 0.05)
|
|
word-break: break-word
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.1)
|
|
|
|
.message-sender
|
|
font-weight: bold
|
|
color: $yellow
|
|
margin-right: 4px
|
|
font-size: 13px
|
|
|
|
.message-text
|
|
font-size: 13px
|
|
|
|
.message-text.system
|
|
font-style: italic
|
|
color: rgba(255, 255, 255, 0.6)
|
|
|
|
.system-message
|
|
text-align: center
|
|
color: rgba(255, 255, 255, 0.6)
|
|
padding: 4px 0
|
|
font-size: 12px
|
|
|
|
.chat-input
|
|
display: flex
|
|
padding: 10px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2)
|
|
|
|
input
|
|
flex: 1
|
|
padding: 8px 12px
|
|
border: none
|
|
border-radius: 8px
|
|
outline: none
|
|
background: rgba(0, 0, 0, 0.3)
|
|
color: $white
|
|
font-size: 14px
|
|
|
|
&:focus
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2)
|
|
|
|
.send-button
|
|
margin-left: 8px
|
|
width: 36px
|
|
height: 36px
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
color: $white
|
|
border: none
|
|
border-radius: 50%
|
|
cursor: pointer
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
transition: all 0.2s ease
|
|
|
|
&:hover
|
|
transform: translateY(-2px)
|
|
box-shadow: 0 4px 15px rgba(102, 204, 255, 0.5)
|
|
|
|
&:active
|
|
transform: translateY(0)
|
|
|
|
.game-header
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
width: 100%
|
|
padding: 15px 30px
|
|
margin-bottom: 10px
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
|
|
background: rgba(0, 0, 0, 0.2)
|
|
backdrop-filter: blur(10px)
|
|
|
|
h2
|
|
font-size: 32px
|
|
background: linear-gradient(135deg, $yellow, $pink)
|
|
background-clip: text
|
|
-webkit-background-clip: text
|
|
color: transparent
|
|
margin: 0
|
|
animation: pulse 3s infinite alternate ease-in-out
|
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.3)
|
|
|
|
.game-role, .game-round
|
|
background: rgba(255, 255, 255, 0.1)
|
|
padding: 8px 15px
|
|
border-radius: 20px
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
display: flex
|
|
align-items: center
|
|
font-size: 14px
|
|
|
|
svg
|
|
margin-right: 8px
|
|
color: $yellow
|
|
|
|
.submit-guess-button, .next-round-button, button:not(.send-button)
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
color: #fff
|
|
border: none
|
|
border-radius: 10px
|
|
padding: 12px 25px
|
|
font-size: 16px
|
|
font-weight: bold
|
|
cursor: pointer
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
|
|
display: inline-flex
|
|
align-items: center
|
|
justify-content: center
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
top: -50%
|
|
left: -50%
|
|
width: 200%
|
|
height: 200%
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
|
|
opacity: 0
|
|
transition: opacity 0.5s ease
|
|
|
|
svg
|
|
margin-right: 10px
|
|
|
|
&:hover:not(.disabled)
|
|
transform: translateY(-5px)
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 204, 255, 0.4)
|
|
|
|
&:before
|
|
opacity: 1
|
|
|
|
&:active:not(.disabled)
|
|
transform: translateY(-2px)
|
|
|
|
&.disabled
|
|
opacity: 0.5
|
|
cursor: not-allowed
|
|
background: linear-gradient(135deg, #777, #555)
|
|
|
|
.waiting-phase
|
|
text-align: center
|
|
padding: 100px 0
|
|
animation: fade-in 0.5s ease-out
|
|
|
|
h3
|
|
font-size: 24px
|
|
color: $white
|
|
margin-bottom: 20px
|
|
animation: pulse 2s infinite alternate ease-in-out
|
|
|
|
.composing-phase, .guessing-phase, .results-phase
|
|
width: 100%
|
|
max-width: 800px
|
|
margin: 0 auto
|
|
animation: fade-in 0.5s ease-out
|
|
|
|
.song-display
|
|
text-align: center
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
width: 100%
|
|
margin-bottom: 30px
|
|
|
|
.song-card
|
|
display: flex
|
|
flex-direction: row
|
|
align-items: center
|
|
background: rgba(40, 40, 60, 0.85)
|
|
padding: 20px
|
|
border-radius: 15px
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4)
|
|
backdrop-filter: blur(10px)
|
|
border: 1px solid rgba(255, 255, 255, 0.15)
|
|
max-width: 500px
|
|
margin: 20px auto
|
|
transition: all 0.3s ease
|
|
|
|
&:hover
|
|
transform: translateY(-5px)
|
|
border-color: rgba(255, 255, 255, 0.3)
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.1)
|
|
|
|
img
|
|
width: 120px
|
|
height: 120px
|
|
object-fit: cover
|
|
border-radius: 8px
|
|
margin-right: 20px
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5)
|
|
border: 2px solid rgba(255, 255, 255, 0.2)
|
|
|
|
.music-controls
|
|
margin-top: 30px
|
|
width: 100%
|
|
max-width: 400px
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
|
|
.chat-window
|
|
width: 50%
|
|
height: 450px
|
|
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
|
|
overflow: hidden
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
will-change: box-shadow, border
|
|
transform: translateZ(0)
|
|
backface-visibility: hidden
|
|
animation: card-float 6s infinite ease-in-out alternate 0.5s
|
|
|
|
&:hover
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.15)
|
|
border: 1px solid rgba(255, 255, 255, 0.4)
|
|
|
|
.chat-header
|
|
display: flex
|
|
align-items: center
|
|
padding: 15px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
|
|
|
|
svg
|
|
font-size: 18pt
|
|
color: $white
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
|
|
animation: icon-pulse 3s infinite alternate ease-in-out
|
|
|
|
.chat-title
|
|
margin-left: 15px
|
|
font-size: 18pt
|
|
color: $white
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)
|
|
|
|
.chat-messages
|
|
flex: 1
|
|
padding: 10px
|
|
overflow-y: auto
|
|
color: $white
|
|
position: relative
|
|
|
|
&::-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: 8px 12px
|
|
border-radius: 12px
|
|
background: rgba(255, 255, 255, 0.05)
|
|
backdrop-filter: blur(5px)
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
transition: all 0.3s ease
|
|
animation: message-fade-in 0.5s ease-out
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.1)
|
|
transform: translateY(-2px)
|
|
|
|
.message-sender
|
|
font-weight: bold
|
|
color: $yellow
|
|
margin-right: 5px
|
|
|
|
.message-text
|
|
margin-left: 5px
|
|
|
|
.message-text.system
|
|
font-style: italic
|
|
color: #888
|
|
|
|
.system-message
|
|
text-align: center
|
|
font-style: italic
|
|
color: #888
|
|
padding: 5px 0
|
|
|
|
.chat-input
|
|
display: flex
|
|
padding: 15px
|
|
background: rgba(30, 30, 30, 0.5)
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2)
|
|
|
|
input
|
|
flex: 1
|
|
padding: 12px 15px
|
|
border: none
|
|
border-radius: 10px
|
|
outline: none
|
|
background: rgba(0, 0, 0, 0.3)
|
|
color: $white
|
|
font-family: 'Bangers', sans-serif
|
|
letter-spacing: 0.1rem
|
|
backdrop-filter: blur(5px)
|
|
transition: all 0.3s ease
|
|
will-change: box-shadow
|
|
|
|
&:focus
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3)
|
|
background: rgba(0, 0, 0, 0.4)
|
|
|
|
button
|
|
margin-left: 15px
|
|
padding: 12px 20px
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
color: $white
|
|
border: none
|
|
border-radius: 10px
|
|
cursor: pointer
|
|
font-family: 'Bangers', sans-serif
|
|
letter-spacing: 0.1rem
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)
|
|
will-change: transform, background, box-shadow
|
|
transform: translateZ(0)
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
top: -50%
|
|
left: -50%
|
|
width: 200%
|
|
height: 200%
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
|
|
opacity: 0
|
|
transition: opacity 0.5s ease
|
|
|
|
&:hover
|
|
transform: translateY(-3px) scale(1.05)
|
|
background: linear-gradient(135deg, lighten($purple, 5%), lighten($blue, 5%))
|
|
box-shadow: 0 0 20px rgba(102, 204, 255, 0.7)
|
|
|
|
&:before
|
|
opacity: 1
|
|
animation: rotate-background 5s linear infinite
|
|
|
|
.phase-header
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
width: 100%
|
|
margin-bottom: 20px
|
|
|
|
.timer
|
|
background: rgba(255, 255, 255, 0.1)
|
|
padding: 10px 15px
|
|
border-radius: 20px
|
|
font-size: 18px
|
|
display: flex
|
|
align-items: center
|
|
|
|
svg
|
|
margin-right: 8px
|
|
color: $yellow
|
|
|
|
.song-grid
|
|
display: grid
|
|
grid-template-columns: repeat(3, 1fr)
|
|
gap: 20px
|
|
margin-top: 20px
|
|
animation: fade-in 0.5s ease-out
|
|
|
|
@media (max-width: 768px)
|
|
grid-template-columns: repeat(2, 1fr)
|
|
|
|
@media (max-width: 500px)
|
|
grid-template-columns: 1fr
|
|
|
|
.song-option
|
|
background: rgba(255, 255, 255, 0.1)
|
|
border-radius: 15px
|
|
overflow: hidden
|
|
cursor: pointer
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
border: 2px solid transparent
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)
|
|
|
|
&:hover
|
|
transform: translateY(-5px)
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1)
|
|
background: rgba(255, 255, 255, 0.15)
|
|
|
|
&.selected
|
|
border: 2px solid $yellow
|
|
box-shadow: 0 0 20px rgba(255, 255, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3)
|
|
background: rgba(255, 255, 255, 0.2)
|
|
|
|
.song-image
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
img
|
|
width: 100%
|
|
height: 150px
|
|
object-fit: cover
|
|
transition: transform 0.3s ease
|
|
|
|
.selected &
|
|
transform: scale(1.05)
|
|
|
|
.selection-indicator
|
|
position: absolute
|
|
top: 10px
|
|
right: 10px
|
|
background-color: $yellow
|
|
color: #000
|
|
width: 30px
|
|
height: 30px
|
|
border-radius: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
box-shadow: 0 0 15px rgba(255, 255, 0, 0.7)
|
|
animation: pulse 1.5s infinite ease-in-out
|
|
|
|
.song-details
|
|
padding: 15px
|
|
|
|
.song-title
|
|
font-weight: bold
|
|
font-size: 18px
|
|
color: #fff
|
|
margin-bottom: 5px
|
|
|
|
.song-artist
|
|
font-size: 14px
|
|
color: rgba(255, 255, 255, 0.8)
|
|
|
|
.guess-actions
|
|
margin-top: 30px
|
|
text-align: center
|
|
animation: fade-in 0.5s ease-out 0.2s both
|
|
|
|
.submit-guess-button
|
|
background: linear-gradient(135deg, $purple, $blue)
|
|
color: #fff
|
|
border: none
|
|
border-radius: 10px
|
|
padding: 12px 25px
|
|
font-size: 16px
|
|
font-weight: bold
|
|
cursor: pointer
|
|
transition: all 0.3s ease
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
|
|
display: inline-flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
svg
|
|
margin-right: 8px
|
|
|
|
&:hover:not(.disabled)
|
|
transform: translateY(-3px)
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 204, 255, 0.4)
|
|
|
|
&:active:not(.disabled)
|
|
transform: translateY(-1px)
|
|
|
|
&.disabled
|
|
opacity: 0.5
|
|
cursor: not-allowed
|
|
background: linear-gradient(135deg, #999, #666)
|
|
|
|
.selection-hint
|
|
margin-top: 10px
|
|
color: rgba(255, 255, 255, 0.7)
|
|
font-size: 14px
|
|
font-style: italic
|
|
|
|
.loading-songs
|
|
text-align: center
|
|
padding: 40px
|
|
color: $white
|
|
|
|
p
|
|
font-size: 18px
|
|
opacity: 0.8
|
|
animation: pulse 1.5s infinite ease-in-out
|
|
|
|
@keyframes subtle-text-glow
|
|
0%, 100%
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4)
|
|
50%
|
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.3)
|
|
|
|
@keyframes title-glow
|
|
0%, 100%
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 30px rgba(102, 204, 255, 0.4)
|
|
50%
|
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 40px rgba(102, 204, 255, 0.6), 0 0 60px rgba(102, 204, 255, 0.3)
|
|
|
|
@keyframes text-shimmer
|
|
0%, 100%
|
|
opacity: 0.95
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)
|
|
50%
|
|
opacity: 1
|
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(133, 255, 189, 0.5)
|
|
|
|
@keyframes album-rotate
|
|
0%, 100%
|
|
transform: rotate(-2deg)
|
|
50%
|
|
transform: rotate(2deg)
|
|
|
|
@keyframes icon-pulse
|
|
0%, 100%
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
|
|
transform: scale(1)
|
|
50%
|
|
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
|
|
transform: scale(1.1)
|
|
|
|
@keyframes message-fade-in
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(10px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
@keyframes title-shimmer
|
|
0%
|
|
background-position: 0% 50%
|
|
50%
|
|
background-position: 100% 50%
|
|
100%
|
|
background-position: 0% 50%
|
|
|
|
@keyframes title-float
|
|
0%, 100%
|
|
transform: translateY(0) scale(1) rotate(-1deg)
|
|
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
|
|
50%
|
|
transform: translateY(-10px) scale(1.05) rotate(1deg)
|
|
filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 50px rgba(102, 204, 255, 0.6))
|
|
|
|
@keyframes fade-in
|
|
0%
|
|
opacity: 0
|
|
transform: translateY(20px)
|
|
100%
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
@keyframes pulse
|
|
0%, 100%
|
|
opacity: 0.8
|
|
transform: scale(1)
|
|
50%
|
|
opacity: 1
|
|
transform: scale(1.05)
|
|
|
|
.player-container
|
|
position: fixed
|
|
left: 20px
|
|
bottom: 20px
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: flex-start
|
|
z-index: 100
|
|
background: rgba(0, 0, 0, 0.5)
|
|
padding: 10px
|
|
border-radius: 10px
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
|
|
max-width: 320px
|
|
|
|
.player-controls
|
|
width: 100%
|
|
margin-top: 10px
|
|
position: relative
|
|
left: auto
|
|
top: auto
|
|
right: auto
|
|
background: none
|
|
box-shadow: none
|
|
padding: 0
|
|
|
|
.volume-controls
|
|
width: 100%
|
|
display: flex
|
|
align-items: center
|
|
background: none
|
|
padding: 5px 0
|
|
position: static
|
|
box-shadow: none
|
|
|
|
span
|
|
white-space: nowrap
|
|
|
|
.volume-slider
|
|
flex: 1
|
|
margin-left: 10px
|
|
|
|
.composer-player
|
|
width: 300px
|
|
height: 169px
|
|
border-radius: 8px
|
|
overflow: hidden
|
|
|
|
.composer-player
|
|
width: 300px
|
|
height: 169px
|
|
border-radius: 8px
|
|
overflow: hidden
|
|
|
|
.position-jump-button
|
|
display: block
|
|
margin-top: 10px
|
|
padding: 8px 15px
|
|
background: linear-gradient(135deg, $yellow, $orange)
|
|
color: #fff
|
|
border: none
|
|
border-radius: 8px
|
|
font-size: 14px
|
|
font-weight: 600
|
|
cursor: pointer
|
|
transition: all 0.2s ease
|
|
width: 100%
|
|
|
|
&:hover
|
|
background: linear-gradient(135deg, lighten($yellow, 5%), lighten($orange, 5%))
|
|
transform: translateY(-2px)
|
|
box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3)
|
|
|
|
&:active
|
|
transform: translateY(0)
|
|
|
|
.player-container
|
|
width: 100%
|
|
margin-top: 20px
|
|
background: rgba(20, 20, 20, 0.5)
|
|
backdrop-filter: blur(10px)
|
|
padding: 15px
|
|
border-radius: 15px
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
|
|
|
|
h4
|
|
color: $white
|
|
margin: 0 0 15px 0
|
|
text-align: center
|
|
font-size: 16px
|
|
|
|
.embedded-player
|
|
width: 100%
|
|
border-radius: 8px
|
|
overflow: hidden
|
|
|
|
.song-player-container
|
|
width: 100%
|
|
max-width: 500px
|
|
margin: 20px auto
|
|
border-radius: 15px
|
|
overflow: hidden
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25)
|
|
background: rgba(0, 0, 0, 0.5)
|
|
|
|
.song-embedded-player
|
|
width: 100%
|
|
height: auto
|
|
aspect-ratio: 16 / 9
|
|
|
|
.results-phase
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
width: 100%
|
|
|
|
h3
|
|
margin-bottom: 30px
|
|
font-size: 28px
|
|
color: $white
|
|
text-shadow: 0 2px 15px rgba(255, 255, 255, 0.3)
|
|
|
|
.round-results
|
|
width: 100%
|
|
max-width: 600px
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
|
|
.composer-results, .guesser-results
|
|
width: 100%
|
|
margin-bottom: 20px
|
|
text-align: center
|
|
|
|
p
|
|
font-size: 18px
|
|
margin-bottom: 15px
|
|
color: $white
|
|
|
|
.correct-song
|
|
margin-top: 10px
|
|
position: relative
|
|
overflow: visible
|
|
z-index: 5
|
|
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
top: -30px
|
|
left: -30px
|
|
right: -30px
|
|
bottom: -30px
|
|
background: rgba(20, 20, 40, 0.2)
|
|
border-radius: 40px
|
|
filter: blur(40px)
|
|
z-index: -1
|
|
|
|
.song-card.highlight
|
|
position: relative
|
|
transform: scale(1.05)
|
|
background: linear-gradient(135deg, rgba(40, 40, 60, 0.9), rgba(30, 30, 50, 0.95))
|
|
border: 2px solid $yellow
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 50px rgba(255, 255, 0, 0.2)
|
|
backdrop-filter: blur(30px)
|
|
padding: 25px
|
|
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
-webkit-backdrop-filter: blur(30px)
|
|
background: rgba(35, 35, 50, 0.5)
|
|
border-radius: 18px
|
|
|
|
&:hover
|
|
transform: translateY(-8px) scale(1.08)
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 255, 0, 0.3), inset 0 0 50px rgba(255, 255, 255, 0.08)
|
|
|
|
&:after
|
|
content: "✓"
|
|
position: absolute
|
|
top: -15px
|
|
right: -15px
|
|
width: 40px
|
|
height: 40px
|
|
background: linear-gradient(135deg, $yellow, darken($yellow, 15%))
|
|
color: #000
|
|
border-radius: 50%
|
|
border: 3px solid rgba(0, 0, 0, 0.5)
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
font-size: 20px
|
|
font-weight: bold
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.5)
|
|
animation: pulse-highlight 2s infinite alternate ease-in-out
|
|
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
inset: 0
|
|
background: linear-gradient(135deg, rgba(80, 80, 120, 0.3), rgba(30, 30, 60, 0.8))
|
|
border-radius: 18px
|
|
z-index: -1
|
|
opacity: 0.8
|
|
|
|
img
|
|
width: 130px
|
|
height: 130px
|
|
border-radius: 14px
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6)
|
|
border: 3px solid rgba(255, 255, 255, 0.3)
|
|
transform: rotate(-2deg)
|
|
transition: all 0.5s ease, border-radius 0.3s ease
|
|
|
|
&:hover
|
|
transform: rotate(0deg) scale(1.05)
|
|
border-color: rgba(255, 255, 0, 0.6)
|
|
border-radius: 12px
|
|
|
|
.song-info
|
|
margin-left: 25px
|
|
|
|
.song-names
|
|
font-size: 26px
|
|
font-weight: bold
|
|
color: $white
|
|
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5)
|
|
margin-bottom: 10px
|
|
background: linear-gradient(90deg, $white, rgba(255,255,255,0.7))
|
|
-webkit-background-clip: text
|
|
background-clip: text
|
|
-webkit-text-fill-color: transparent
|
|
|
|
.song-description
|
|
font-size: 18px
|
|
color: rgba(255, 255, 255, 0.8)
|
|
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7)
|
|
|
|
.guess-result
|
|
margin: 20px 0
|
|
padding: 15px 20px
|
|
border-radius: 16px
|
|
font-size: 18px
|
|
font-weight: bold
|
|
animation: bounce-in 0.5s ease-out
|
|
|
|
&.correct
|
|
background: linear-gradient(135deg, rgba(50, 200, 100, 0.8), rgba(40, 160, 80, 0.8))
|
|
color: white
|
|
box-shadow: 0 4px 20px rgba(50, 200, 100, 0.4)
|
|
|
|
&.incorrect
|
|
background: linear-gradient(135deg, rgba(220, 60, 60, 0.8), rgba(180, 40, 40, 0.8))
|
|
color: white
|
|
box-shadow: 0 4px 20px rgba(220, 60, 60, 0.4)
|
|
|
|
.scoreboard
|
|
width: 100%
|
|
background: rgba(40, 40, 60, 0.6)
|
|
backdrop-filter: blur(10px)
|
|
border-radius: 20px
|
|
padding: 20px
|
|
margin-bottom: 20px
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3)
|
|
border: 1px solid rgba(255, 255, 255, 0.1)
|
|
margin-top: 5px
|
|
|
|
h4
|
|
text-align: center
|
|
font-size: 22px
|
|
color: $white
|
|
margin-top: 10px
|
|
margin-bottom: 10px
|
|
padding-bottom: 8px
|
|
|
|
.scores
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
|
|
.score-entry
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
padding: 12px 15px
|
|
border-radius: 14px
|
|
background: rgba(255, 255, 255, 0.1)
|
|
transition: all 0.2s ease
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.15)
|
|
transform: translateY(-2px)
|
|
|
|
&.current-user
|
|
background: rgba(102, 204, 255, 0.2)
|
|
border-left: 3px solid $blue
|
|
|
|
.player-name
|
|
display: flex
|
|
align-items: center
|
|
font-weight: 500
|
|
color: $white
|
|
font-size: 16px
|
|
|
|
.host-icon
|
|
color: $yellow
|
|
margin-left: 8px
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5))
|
|
|
|
.player-score
|
|
background: rgba(255, 255, 255, 0.2)
|
|
padding: 5px 12px
|
|
border-radius: 20px
|
|
font-weight: bold
|
|
font-size: 18px
|
|
color: $yellow
|
|
min-width: 40px
|
|
text-align: center
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&:after
|
|
content: ""
|
|
position: absolute
|
|
top: -50%
|
|
left: -50%
|
|
width: 200%
|
|
height: 200%
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
|
|
opacity: 0
|
|
transition: opacity 0.5s ease
|
|
|
|
&.highlighted
|
|
animation: score-highlight 1s ease
|
|
|
|
.next-round-button
|
|
margin-top: 10px
|
|
padding: 15px 30px
|
|
font-size: 18px
|
|
|
|
.waiting-message
|
|
margin-top: 20px
|
|
font-style: italic
|
|
color: rgba(255, 255, 255, 0.7)
|
|
|
|
@keyframes score-highlight
|
|
0%
|
|
transform: scale(1)
|
|
background: rgba(255, 255, 0, 0.8)
|
|
color: #000
|
|
50%
|
|
transform: scale(1.2)
|
|
100%
|
|
transform: scale(1)
|
|
background: rgba(255, 255, 255, 0.2)
|
|
color: $yellow
|
|
|
|
@keyframes bounce-in
|
|
0%
|
|
opacity: 0
|
|
transform: scale(0.8)
|
|
50%
|
|
transform: scale(1.05)
|
|
100%
|
|
opacity: 1
|
|
transform: scale(1)
|
|
|
|
@keyframes pulse-highlight
|
|
0%, 100%
|
|
transform: scale(1)
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.3)
|
|
50%
|
|
transform: scale(1.1)
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6) |