Mathias Wagner
f3c87878ce
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 3m21s
677 lines
16 KiB
Sass
677 lines
16 KiB
Sass
// Voting Screen styles
|
|
|
|
.voting-screen
|
|
display: flex
|
|
flex-direction: column
|
|
min-height: 100%
|
|
padding: 1.5rem
|
|
|
|
.voting-header
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
margin-bottom: 2rem
|
|
flex-wrap: wrap
|
|
gap: 1rem
|
|
|
|
h1
|
|
margin: 0
|
|
color: $primary
|
|
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: $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: 2px solid #000
|
|
padding: 0.25rem 0.75rem
|
|
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
|
|
box-sizing: border-box
|
|
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
|
|
|
|
.host-info
|
|
margin-top: 0.5rem
|
|
color: #fff
|
|
font-style: italic
|
|
font-size: 0.7rem
|
|
|
|
.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
|
|
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: $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
|
|
flex-direction: column
|
|
align-items: center
|
|
margin: 2rem 0
|
|
|
|
.btn
|
|
min-width: 180px
|
|
font-size: 1rem
|
|
|
|
&.offline
|
|
background-color: $secondary
|
|
position: relative
|
|
|
|
.offline-notice
|
|
margin-top: 1rem
|
|
padding: 0.5rem
|
|
background-color: rgba($secondary, 0.2)
|
|
border: 2px solid $secondary
|
|
max-width: 400px
|
|
text-align: center
|
|
font-size: 0.7rem
|
|
|
|
svg
|
|
margin-right: 0.5rem
|
|
color: $secondary
|
|
|
|
.offline-vote-status
|
|
margin-top: 1rem
|
|
padding: 0.5rem
|
|
background-color: rgba($success, 0.2)
|
|
border: 2px solid $success
|
|
max-width: 400px
|
|
text-align: center
|
|
font-size: 0.7rem
|
|
color: $success
|
|
animation: pulse-opacity 2s infinite
|
|
|
|
&.error
|
|
background-color: rgba(#f44336, 0.2)
|
|
border-color: #f44336
|
|
color: #f44336
|
|
|
|
// 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
|
|
|
|
.reconnecting-notice
|
|
margin: 0.5rem auto 1rem auto
|
|
padding: 0.5rem
|
|
background-color: rgba($secondary, 0.2)
|
|
border: 2px solid $secondary
|
|
max-width: 400px
|
|
text-align: center
|
|
font-size: 0.7rem
|
|
color: $secondary
|
|
animation: pulse-opacity 2s infinite
|
|
|
|
.auto-advance-notice
|
|
margin: 1rem auto
|
|
max-width: 400px
|
|
padding: 0.75rem
|
|
background-color: rgba($secondary, 0.2)
|
|
border: 2px solid $secondary
|
|
text-align: center
|
|
color: $text-muted
|
|
font-style: italic
|
|
|
|
.votes-count
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
gap: 0.5rem
|
|
font-family: 'Press Start 2P', monospace
|
|
font-size: 0.8rem
|
|
margin-bottom: 1rem
|
|
|
|
span
|
|
color: $primary
|
|
font-weight: bold
|
|
|
|
.offline-badge
|
|
color: $secondary
|
|
margin-left: 0.5rem
|
|
font-size: 0.7rem
|
|
|
|
// Player votes list styling
|
|
.player-votes
|
|
background-color: rgba(0, 0, 0, 0.2)
|
|
border: 2px dashed rgba(255, 255, 255, 0.2)
|
|
border-radius: 0.5rem
|
|
padding: 0.75rem
|
|
margin-top: 0.5rem
|
|
|
|
h4
|
|
margin: 0 0 0.75rem 0
|
|
font-family: 'Press Start 2P', monospace
|
|
font-size: 0.8rem
|
|
color: $secondary
|
|
position: relative
|
|
display: inline-block
|
|
|
|
&:before, &:after
|
|
content: '>'
|
|
position: absolute
|
|
color: $accent
|
|
animation: pixel-blink 1s infinite
|
|
|
|
&:before
|
|
left: -1rem
|
|
|
|
&:after
|
|
right: -1rem
|
|
|
|
.players-voted-list
|
|
list-style: none
|
|
padding: 0
|
|
margin: 0
|
|
display: grid
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
|
|
gap: 0.5rem
|
|
|
|
li
|
|
padding: 0.5rem
|
|
border: 2px solid transparent
|
|
font-size: 0.75rem
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
transition: all 0.2s ease
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
&.voted
|
|
background-color: rgba($success, 0.1)
|
|
border-color: rgba($success, 0.5)
|
|
|
|
.vote-icon
|
|
color: $success
|
|
margin-left: 0.5rem
|
|
filter: drop-shadow(0 0 2px rgba($success, 0.8))
|
|
animation: pixel-pulse 1.5s infinite
|
|
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba($success, 0.1) 5px, rgba($success, 0.1) 10px)
|
|
z-index: -1
|
|
|
|
&.not-voted
|
|
background-color: rgba(255, 255, 255, 0.05)
|
|
border-color: rgba(255, 255, 255, 0.1)
|
|
opacity: 0.7
|
|
|
|
&.offline-voted
|
|
background-color: rgba($secondary, 0.1)
|
|
border-color: rgba($secondary, 0.5)
|
|
|
|
.offline-icon
|
|
color: $secondary
|
|
margin-left: 0.5rem
|
|
animation: pixel-pulse 1.5s infinite
|
|
|
|
@keyframes pulse-opacity
|
|
0%, 100%
|
|
opacity: 1
|
|
50%
|
|
opacity: 0.5
|
|
|
|
@keyframes pixel-blink
|
|
0%, 100%
|
|
opacity: 1
|
|
50%
|
|
opacity: 0.3
|
|
|
|
// Bye container for automatic advances
|
|
.bye-container
|
|
display: flex
|
|
justify-content: center
|
|
margin: 2rem 0
|
|
animation: pixel-float 3s infinite ease-in-out
|
|
|
|
// Vote Progress Bar
|
|
.vote-progress-container
|
|
width: 100%
|
|
margin-top: 1.5rem
|
|
margin-bottom: 2rem
|
|
padding: 0 0.5rem
|
|
animation: fade-in-up 0.5s ease forwards
|
|
position: relative
|
|
|
|
@keyframes fade-in-up
|
|
from
|
|
opacity: 0
|
|
transform: translateY(10px)
|
|
to
|
|
opacity: 1
|
|
transform: translateY(0)
|
|
|
|
.vote-progress-labels
|
|
display: flex
|
|
justify-content: space-between
|
|
margin-bottom: 0.5rem
|
|
font-size: 0.8rem
|
|
font-family: 'Press Start 2P', monospace
|
|
|
|
.vote-label
|
|
padding: 0.5rem 0.75rem
|
|
background-color: rgba(0, 0, 0, 0.7)
|
|
border: 2px solid #000
|
|
transform: translateY(0)
|
|
transition: transform 0.3s ease
|
|
position: relative
|
|
z-index: 2
|
|
|
|
&.left
|
|
color: $primary
|
|
border-left-color: $primary
|
|
border-top-color: $primary
|
|
border-bottom-color: $primary
|
|
box-shadow: -3px 3px 0 rgba($primary, 0.3)
|
|
&:hover
|
|
transform: translateY(-3px)
|
|
box-shadow: -5px 5px 0 rgba($primary, 0.5)
|
|
|
|
&.right
|
|
color: $accent
|
|
border-right-color: $accent
|
|
border-top-color: $accent
|
|
border-bottom-color: $accent
|
|
box-shadow: 3px 3px 0 rgba($accent, 0.3)
|
|
&:hover
|
|
transform: translateY(-3px)
|
|
box-shadow: 5px 5px 0 rgba($accent, 0.5)
|
|
|
|
&.winning
|
|
background-color: rgba(#000, 0.8)
|
|
border-width: 3px
|
|
transform: translateY(-3px)
|
|
position: relative
|
|
z-index: 3
|
|
animation: winner-pulse 1.5s infinite alternate
|
|
|
|
&.left
|
|
box-shadow: -5px 5px 0 rgba($primary, 0.7), 0 0 15px rgba($primary, 0.7)
|
|
|
|
&.right
|
|
box-shadow: 5px 5px 0 rgba($accent, 0.7), 0 0 15px rgba($accent, 0.7)
|
|
|
|
&.landslide
|
|
transform: translateY(-5px)
|
|
font-weight: bold
|
|
animation: winner-landslide-pulse 1s infinite alternate
|
|
|
|
&.left
|
|
box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 25px rgba($primary, 0.9)
|
|
|
|
&.right
|
|
box-shadow: 6px 6px 0 rgba($accent, 0.7), 0 0 25px rgba($accent, 0.9)
|
|
|
|
@keyframes winner-landslide-pulse
|
|
from
|
|
box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 25px rgba($primary, 0.9)
|
|
to
|
|
box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 40px rgba($primary, 1)
|
|
|
|
.vote-progress-bar
|
|
height: 36px
|
|
background-color: #222
|
|
border: 4px solid #000
|
|
position: relative
|
|
overflow: hidden
|
|
display: flex
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
|
|
|
|
.vote-progress-fill
|
|
height: 100%
|
|
transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)
|
|
position: relative
|
|
min-width: 0
|
|
|
|
&.song1
|
|
background: linear-gradient(to right, darken($primary, 20%), $primary)
|
|
box-shadow: 0 8px 24px rgba($primary, 0.3), 0 0 10px rgba($primary, 0.2)
|
|
animation: pulse-song1 2s infinite alternate
|
|
|
|
&.song2
|
|
background: linear-gradient(to left, darken($accent, 20%), $accent)
|
|
box-shadow: 0 8px 24px rgba($accent, 0.3), 0 0 10px rgba($accent, 0.2)
|
|
animation: pulse-song2 2s infinite alternate
|
|
|
|
.vote-progress-decoration
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
width: 20px
|
|
background-size: 4px 4px
|
|
opacity: 0.6
|
|
|
|
&.left
|
|
right: 10px
|
|
background-image: linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent)
|
|
animation: move-stripes-left 20s linear infinite
|
|
|
|
&.right
|
|
left: 10px
|
|
background-image: linear-gradient(-45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent)
|
|
animation: move-stripes-right 20s linear infinite
|
|
|
|
&.landslide
|
|
border-width: 5px
|
|
animation: landslide-border-pulse 1.5s infinite alternate
|
|
|
|
&.song1
|
|
border-color: lighten($primary, 20%)
|
|
|
|
&.song2
|
|
border-color: lighten($accent, 20%)
|
|
|
|
.vote-progress-divider
|
|
position: absolute
|
|
top: -8px
|
|
bottom: -8px
|
|
width: 6px
|
|
background-color: #fff
|
|
transform: translateX(-50%)
|
|
z-index: 10
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 5px rgba(0, 0, 0, 0.5)
|
|
transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
left: 50%
|
|
width: 12px
|
|
height: 12px
|
|
background-color: #fff
|
|
transform: translateX(-50%) rotate(45deg)
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 3px rgba(0, 0, 0, 0.5)
|
|
|
|
&:before
|
|
top: 0
|
|
|
|
&:after
|
|
bottom: 0
|
|
|
|
.vote-progress-percentages
|
|
display: flex
|
|
justify-content: space-between
|
|
margin-top: 0.75rem
|
|
font-family: 'Press Start 2P', monospace
|
|
font-size: 1rem
|
|
|
|
.vote-percent
|
|
font-weight: bold
|
|
text-shadow: 2px 2px 0 #000
|
|
padding: 0.4rem 0.75rem
|
|
background-color: rgba(0, 0, 0, 0.7)
|
|
border: 2px solid #000
|
|
letter-spacing: 1px
|
|
position: relative
|
|
|
|
&.left
|
|
color: $primary
|
|
border-left-color: $primary
|
|
border-bottom-color: $primary
|
|
transform: skew(-10deg)
|
|
box-shadow: -3px 3px 0 rgba($primary, 0.4)
|
|
|
|
&.right
|
|
color: $accent
|
|
border-right-color: $accent
|
|
border-bottom-color: $accent
|
|
transform: skew(10deg)
|
|
box-shadow: 3px 3px 0 rgba($accent, 0.4)
|
|
|
|
&.winning
|
|
font-size: 1.2rem
|
|
font-weight: bolder
|
|
animation: winner-text-pulse 2s infinite alternate
|
|
|
|
&.left
|
|
box-shadow: -5px 5px 0 rgba($primary, 0.5), 0 0 10px rgba($primary, 0.5)
|
|
|
|
&.right
|
|
box-shadow: 5px 5px 0 rgba($accent, 0.5), 0 0 10px rgba($accent, 0.5)
|
|
|
|
&.landslide
|
|
font-size: 1.3rem
|
|
animation: landslide-text-pulse 1s infinite alternate
|
|
|
|
&.left
|
|
box-shadow: -6px 6px 0 rgba($primary, 0.6), 0 0 15px rgba($primary, 0.6)
|
|
|
|
&.right
|
|
box-shadow: 6px 6px 0 rgba($accent, 0.6), 0 0 15px rgba($accent, 0.6)
|
|
|
|
@keyframes landslide-text-pulse
|
|
from
|
|
text-shadow: 2px 2px 0 #000, 0 0 10px currentColor
|
|
to
|
|
text-shadow: 2px 2px 0 #000, 0 0 25px currentColor, 0 0 5px #fff
|
|
|
|
// Bye container for automatic advances
|
|
.bye-container
|
|
display: flex
|
|
justify-content: center
|
|
margin: 2rem 0
|
|
animation: pixel-float 3s infinite ease-in-out
|