Revamp styles for Song Battle screens with pixel art theme; enhance layout, animations, and button designs for a cohesive aesthetic
This commit is contained in:
@ -5,7 +5,7 @@
|
||||
flex-direction: column
|
||||
min-height: 100%
|
||||
padding: 1.5rem
|
||||
|
||||
|
||||
.voting-header
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
@ -13,187 +13,275 @@
|
||||
margin-bottom: 2rem
|
||||
flex-wrap: wrap
|
||||
gap: 1rem
|
||||
|
||||
|
||||
h1
|
||||
margin: 0
|
||||
color: $primary
|
||||
text-shadow: 0 0 8px rgba($primary, 0.5)
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
text-transform: uppercase
|
||||
font-size: 1.8rem
|
||||
|
||||
svg
|
||||
filter: drop-shadow(2px 2px 0 #000)
|
||||
|
||||
.round-info
|
||||
background-color: rgba($card-bg, 0.7)
|
||||
border-radius: 0.5rem
|
||||
background-color: $card-bg
|
||||
border: 4px solid #000
|
||||
box-shadow: 4px 4px 0 #000
|
||||
padding: 0.75rem 1rem
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.75rem
|
||||
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
|
||||
span
|
||||
font-weight: bold
|
||||
|
||||
|
||||
.voted-badge
|
||||
background-color: $success
|
||||
color: #fff
|
||||
border-radius: 1rem
|
||||
border: 2px solid #000
|
||||
padding: 0.25rem 0.75rem
|
||||
font-size: 0.85rem
|
||||
animation: pulse 2s infinite
|
||||
|
||||
.battle-container
|
||||
font-size: 0.75rem
|
||||
animation: pixel-pulse 2s infinite
|
||||
|
||||
@keyframes pixel-pulse
|
||||
0%, 100%
|
||||
transform: scale(1)
|
||||
opacity: 1
|
||||
50%
|
||||
transform: scale(1.1)
|
||||
opacity: 0.8
|
||||
|
||||
.battle-container
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 2rem
|
||||
margin-bottom: 2rem
|
||||
perspective: 1000px
|
||||
|
||||
.song-card
|
||||
width: 100%
|
||||
max-width: 600px
|
||||
background-color: $card-bg
|
||||
border: 4px solid #000
|
||||
box-shadow: 8px 8px 0 #000
|
||||
padding: 1rem
|
||||
transition: all 0.2s ease
|
||||
position: relative
|
||||
|
||||
&.selected
|
||||
border-color: $primary
|
||||
box-shadow: 0 0 20px $primary, 8px 8px 0 #000
|
||||
transform: translateY(-4px)
|
||||
|
||||
.song-spotlight
|
||||
opacity: 1
|
||||
|
||||
&.bye-winner
|
||||
border-color: $accent
|
||||
box-shadow: 0 0 20px $accent, 8px 8px 0 #000
|
||||
|
||||
.song-spotlight
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: linear-gradient(45deg, transparent 0%, rgba($primary, 0.1) 45%, rgba($primary, 0.4) 50%, rgba($primary, 0.1) 55%, transparent 100%)
|
||||
pointer-events: none
|
||||
opacity: 0
|
||||
transition: opacity 0.3s ease
|
||||
|
||||
.song-details
|
||||
h3
|
||||
margin-top: 0
|
||||
margin-bottom: 0.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.1rem
|
||||
color: $secondary
|
||||
|
||||
p
|
||||
margin-top: 0
|
||||
margin-bottom: 1rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
color: $text
|
||||
|
||||
.auto-advance-notice
|
||||
margin-top: 1rem
|
||||
padding: 0.75rem
|
||||
background-color: rgba($accent, 0.2)
|
||||
border: 2px solid $accent
|
||||
|
||||
p
|
||||
margin: 0
|
||||
color: $accent
|
||||
font-weight: bold
|
||||
text-align: center
|
||||
|
||||
.video-container
|
||||
margin-top: 1rem
|
||||
border: 4px solid #000
|
||||
position: relative
|
||||
|
||||
.video-overlay
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 2px, transparent 2px, transparent 4px)
|
||||
pointer-events: none
|
||||
opacity: 0.4
|
||||
|
||||
.no-video
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 1.5rem
|
||||
margin-bottom: 2rem
|
||||
perspective: 1000px
|
||||
|
||||
@media (min-width: 768px)
|
||||
flex-direction: row
|
||||
align-items: stretch
|
||||
|
||||
.song-card
|
||||
flex: 1
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 1.5rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease
|
||||
border: 2px solid transparent
|
||||
cursor: pointer
|
||||
position: relative
|
||||
overflow: hidden
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4)
|
||||
|
||||
&:hover:not(.voted)
|
||||
transform: translateY(-5px)
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6)
|
||||
|
||||
&.selected:not(.voted)
|
||||
border-color: $secondary
|
||||
box-shadow: 0 0 25px rgba($secondary, 0.4)
|
||||
transform: translateY(-8px) scale(1.02)
|
||||
|
||||
.song-spotlight
|
||||
opacity: 1
|
||||
|
||||
&.voted
|
||||
cursor: default
|
||||
|
||||
.song-spotlight
|
||||
position: absolute
|
||||
top: -50%
|
||||
left: -50%
|
||||
width: 200%
|
||||
height: 200%
|
||||
background: radial-gradient(ellipse at center, rgba($secondary, 0.3) 0%, rgba($secondary, 0) 70%)
|
||||
pointer-events: none
|
||||
opacity: 0
|
||||
transition: opacity 0.5s
|
||||
z-index: 1
|
||||
|
||||
.song-details
|
||||
margin-bottom: 1rem
|
||||
|
||||
h3
|
||||
margin: 0 0 0.25rem 0
|
||||
font-size: 1.5rem
|
||||
|
||||
p
|
||||
margin: 0
|
||||
color: $text-muted
|
||||
|
||||
.video-container
|
||||
width: 100%
|
||||
flex-grow: 1
|
||||
min-height: 200px
|
||||
position: relative
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.youtube-embed
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 0.5rem
|
||||
overflow: hidden
|
||||
|
||||
.no-video
|
||||
flex-grow: 1
|
||||
min-height: 200px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
background-color: rgba(0, 0, 0, 0.3)
|
||||
border-radius: 0.5rem
|
||||
color: $text-muted
|
||||
font-size: 3rem
|
||||
gap: 1rem
|
||||
|
||||
span
|
||||
font-size: 1rem
|
||||
|
||||
.vote-count
|
||||
position: absolute
|
||||
bottom: 1rem
|
||||
right: 1rem
|
||||
background-color: rgba($background, 0.8)
|
||||
padding: 0.5rem 1rem
|
||||
border-radius: 2rem
|
||||
font-size: 0.9rem
|
||||
|
||||
&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: linear-gradient(to right, $primary, $secondary)
|
||||
opacity: 0.2
|
||||
border-radius: 2rem
|
||||
z-index: -1
|
||||
|
||||
.versus
|
||||
font-family: 'Bangers', cursive
|
||||
justify-content: center
|
||||
height: 180px
|
||||
background-color: rgba(0, 0, 0, 0.3)
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3)
|
||||
margin-top: 1rem
|
||||
|
||||
.pulse-icon
|
||||
font-size: 2rem
|
||||
color: $accent
|
||||
text-shadow: 0 0 10px rgba($accent, 0.5)
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 0 1rem
|
||||
|
||||
@media (min-width: 768px)
|
||||
padding: 1rem
|
||||
|
||||
.voting-actions
|
||||
color: $text-muted
|
||||
margin-bottom: 0.5rem
|
||||
animation: pixel-float 2s infinite
|
||||
|
||||
span
|
||||
color: $text-muted
|
||||
font-size: 0.9rem
|
||||
|
||||
.vote-count
|
||||
position: absolute
|
||||
top: 1rem
|
||||
right: 1rem
|
||||
background-color: rgba(#000, 0.7)
|
||||
border: 2px solid $primary
|
||||
padding: 0.5rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
|
||||
.vote-number
|
||||
font-size: 1.5rem
|
||||
font-weight: bold
|
||||
color: $primary
|
||||
|
||||
.vote-text
|
||||
font-size: 0.7rem
|
||||
color: $text-muted
|
||||
|
||||
.selection-indicator
|
||||
position: absolute
|
||||
top: 1rem
|
||||
right: 1rem
|
||||
background-color: $primary
|
||||
color: #000
|
||||
width: 2rem
|
||||
height: 2rem
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
border: 2px solid #000
|
||||
animation: pixel-pulse 1s infinite
|
||||
|
||||
.versus
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
margin: 0.5rem 0
|
||||
|
||||
.versus-text
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.5rem
|
||||
font-weight: bold
|
||||
color: $accent
|
||||
letter-spacing: 2px
|
||||
animation: pixel-flash 1.5s infinite
|
||||
|
||||
.versus-decoration
|
||||
width: 150px
|
||||
height: 4px
|
||||
background-color: $accent
|
||||
margin: 0.5rem 0
|
||||
position: relative
|
||||
|
||||
&:before, &:after
|
||||
content: ''
|
||||
position: absolute
|
||||
width: 15px
|
||||
height: 15px
|
||||
background-color: $accent
|
||||
transform: rotate(45deg)
|
||||
|
||||
&:before
|
||||
left: -5px
|
||||
top: -5px
|
||||
|
||||
&:after
|
||||
right: -5px
|
||||
top: -5px
|
||||
|
||||
@keyframes pixel-flash
|
||||
0%, 100%
|
||||
opacity: 1
|
||||
50%
|
||||
opacity: 0.5
|
||||
|
||||
@keyframes pixel-float
|
||||
0%, 100%
|
||||
transform: translateY(0)
|
||||
50%
|
||||
transform: translateY(-5px)
|
||||
|
||||
// Voting action buttons area
|
||||
.voting-actions
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: 2rem 0
|
||||
|
||||
.btn
|
||||
min-width: 180px
|
||||
font-size: 1rem
|
||||
|
||||
// Voting status and information
|
||||
.voting-status
|
||||
background-color: $card-bg
|
||||
border: 4px solid #000
|
||||
box-shadow: 4px 4px 0 #000
|
||||
padding: 1rem
|
||||
margin-top: auto
|
||||
text-align: center
|
||||
|
||||
p
|
||||
margin: 0 0 1rem 0
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
color: $text
|
||||
|
||||
.votes-count
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 2rem
|
||||
|
||||
.btn
|
||||
padding: 0.75rem 2rem
|
||||
font-size: 1.1rem
|
||||
|
||||
.voting-status
|
||||
margin-top: auto
|
||||
text-align: center
|
||||
|
||||
p
|
||||
color: $text-muted
|
||||
font-style: italic
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.votes-count
|
||||
display: inline-block
|
||||
padding: 0.5rem 1rem
|
||||
background-color: rgba($card-bg, 0.7)
|
||||
border-radius: 0.5rem
|
||||
|
||||
span:first-child
|
||||
font-weight: bold
|
||||
color: $secondary
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
|
||||
span
|
||||
color: $primary
|
||||
font-weight: bold
|
||||
|
||||
// Bye container for automatic advances
|
||||
.bye-container
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: 2rem 0
|
||||
animation: pixel-float 3s infinite ease-in-out
|
||||
|
||||
Reference in New Issue
Block a user