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:
parent
50e245233c
commit
38ed69bf5b
@ -1,53 +1,71 @@
|
||||
// Button styles for the Song Battle application
|
||||
// Button styles for the Song Battle application - Pixel Art Theme
|
||||
|
||||
// Base button style
|
||||
.btn
|
||||
display: inline-block
|
||||
padding: 0.75rem 1.5rem
|
||||
border: none
|
||||
border-radius: 0.5rem
|
||||
border: 4px solid #000
|
||||
border-radius: 0
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
font-weight: 600
|
||||
cursor: pointer
|
||||
transition: all 0.3s ease
|
||||
text-transform: uppercase
|
||||
letter-spacing: 1px
|
||||
position: relative
|
||||
overflow: hidden
|
||||
text-align: center
|
||||
min-width: 120px
|
||||
|
||||
// Sheen animation on hover
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 0
|
||||
left: -100%
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
)
|
||||
transition: all 0.6s
|
||||
|
||||
&:hover:before
|
||||
left: 100%
|
||||
background-color: $primary
|
||||
color: #000
|
||||
box-shadow:
|
||||
4px 4px 0 #000,
|
||||
inset -4px -4px 0 darken($primary, 30%),
|
||||
inset 4px 4px 0 lighten($primary, 10%)
|
||||
transition: all 0.1s ease
|
||||
|
||||
&:hover
|
||||
transform: translateY(-3px)
|
||||
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3)
|
||||
transform: translate(-2px, -2px)
|
||||
box-shadow:
|
||||
6px 6px 0 #000,
|
||||
inset -4px -4px 0 darken($primary, 30%),
|
||||
inset 4px 4px 0 lighten($primary, 10%)
|
||||
|
||||
&:active
|
||||
transform: translateY(0)
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)
|
||||
transform: translate(4px, 4px)
|
||||
box-shadow:
|
||||
0 0 0 #000,
|
||||
inset -4px -4px 0 darken($primary, 30%),
|
||||
inset 4px 4px 0 lighten($primary, 10%)
|
||||
|
||||
&:disabled
|
||||
opacity: 0.5
|
||||
cursor: not-allowed
|
||||
transform: none
|
||||
box-shadow: none
|
||||
|
||||
// Button types
|
||||
&.primary
|
||||
background-color: $primary
|
||||
color: #000
|
||||
box-shadow:
|
||||
4px 4px 0 #000,
|
||||
inset -4px -4px 0 darken($primary, 30%),
|
||||
inset 4px 4px 0 lighten($primary, 10%)
|
||||
|
||||
&.secondary
|
||||
background-color: $secondary
|
||||
color: #000
|
||||
box-shadow:
|
||||
4px 4px 0 #000,
|
||||
inset -4px -4px 0 darken($secondary, 30%),
|
||||
inset 4px 4px 0 lighten($secondary, 10%)
|
||||
|
||||
&.accent
|
||||
background-color: $accent
|
||||
color: #000
|
||||
box-shadow:
|
||||
4px 4px 0 #000,
|
||||
inset -4px -4px 0 darken($accent, 30%),
|
||||
inset 4px 4px 0 lighten($accent, 10%)
|
||||
|
||||
// Primary button
|
||||
.btn.primary
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
// Colors for Song Battle application
|
||||
// Colors for Song Battle application - Pixel Art Theme
|
||||
|
||||
// Main colors
|
||||
$background: #0f0f1a // Kept for compatibility
|
||||
$card-bg: rgba(20, 20, 35, 0.85) // Semi-transparent dark card background
|
||||
$background: #1a1126 // Dark purple background for pixel art feel
|
||||
$card-bg: rgba(32, 24, 48, 0.9) // Semi-transparent dark purple card background
|
||||
$text: #ffffff
|
||||
$text-muted: rgba(255, 255, 255, 0.7) // Brighter for better contrast with gradient
|
||||
$text-muted: rgba(255, 255, 255, 0.8) // Brighter for better contrast with gradient
|
||||
|
||||
// Brand colors
|
||||
$primary: #f0c3ff // Light purple - complementary to gradient
|
||||
$secondary: #00e5ff // Bright cyan - stands out against pink/purple
|
||||
$accent: #ffcc00 // Bright gold - contrasts with pink/purple
|
||||
// Brand colors - More saturated for pixel art aesthetic
|
||||
$primary: #ff55ff // Bright magenta - pixel art style
|
||||
$secondary: #00ddff // Bright cyan - pixel art style
|
||||
$accent: #ffcc00 // Bright gold - pixel art style
|
||||
|
||||
// Pixel art accent colors
|
||||
$pixel-purple: #9900ff
|
||||
$pixel-blue: #0088ff
|
||||
$pixel-green: #00ff66
|
||||
|
||||
// Status colors
|
||||
$success: #00c853
|
||||
|
||||
@ -9,66 +9,126 @@
|
||||
padding: 2rem
|
||||
position: relative
|
||||
|
||||
// Pixel art floating items in background
|
||||
&:before, &:after
|
||||
content: ''
|
||||
position: absolute
|
||||
width: 12px
|
||||
height: 12px
|
||||
background-color: $pixel-blue
|
||||
animation: pixel-float 3s infinite alternate ease-in-out
|
||||
z-index: -1
|
||||
|
||||
&:before
|
||||
top: 15%
|
||||
left: 20%
|
||||
box-shadow: 0 0 10px $pixel-blue
|
||||
animation-delay: 0s
|
||||
|
||||
&:after
|
||||
bottom: 20%
|
||||
right: 15%
|
||||
background-color: $pixel-purple
|
||||
box-shadow: 0 0 10px $pixel-purple
|
||||
animation-delay: 1.5s
|
||||
|
||||
.logo
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
margin-bottom: 2rem
|
||||
margin-bottom: 3rem
|
||||
|
||||
.logo-image
|
||||
image-rendering: pixelated
|
||||
width: 120px
|
||||
width: 180px
|
||||
height: auto
|
||||
margin-bottom: 1rem
|
||||
animation: pulse 2s infinite ease-in-out
|
||||
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7))
|
||||
margin-bottom: 1.5rem
|
||||
animation: pixel-float 3s infinite ease-in-out
|
||||
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5))
|
||||
|
||||
h1
|
||||
font-size: 3.5rem
|
||||
font-size: 2.5rem
|
||||
margin: 0
|
||||
color: white
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3)
|
||||
font-family: 'Press Start 2P', monospace
|
||||
color: $primary
|
||||
animation: pixel-flash 3s infinite
|
||||
letter-spacing: 2px
|
||||
text-transform: uppercase
|
||||
|
||||
.card
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 2rem
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.1)
|
||||
border: 1px solid rgba(255, 255, 255, 0.1)
|
||||
backdrop-filter: blur(10px)
|
||||
box-shadow: 8px 8px 0 #000
|
||||
border: 4px solid #000
|
||||
width: 100%
|
||||
max-width: 500px
|
||||
|
||||
.tabs
|
||||
display: flex
|
||||
margin-bottom: 1.5rem
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1)
|
||||
|
||||
button
|
||||
flex: 1
|
||||
background: none
|
||||
border: none
|
||||
color: $text-muted
|
||||
padding: 1rem
|
||||
font-size: 1rem
|
||||
cursor: pointer
|
||||
transition: color 0.2s, border-bottom 0.2s
|
||||
position: relative
|
||||
overflow: visible
|
||||
|
||||
// Pixel art decorations
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -10px
|
||||
left: -10px
|
||||
width: 20px
|
||||
height: 20px
|
||||
background-color: $accent
|
||||
z-index: 1
|
||||
animation: pixel-rotate 8s linear infinite
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
bottom: -2px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 2px
|
||||
background-color: transparent
|
||||
transition: background-color 0.2s
|
||||
bottom: -10px
|
||||
right: -10px
|
||||
width: 20px
|
||||
height: 20px
|
||||
background-color: $primary
|
||||
z-index: 1
|
||||
animation: pixel-rotate 8s linear infinite reverse
|
||||
|
||||
@keyframes pixel-rotate
|
||||
0%
|
||||
transform: rotate(0deg)
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
.tabs
|
||||
display: flex
|
||||
margin-bottom: 1.5rem
|
||||
border-bottom: 4px solid #000
|
||||
|
||||
button
|
||||
flex: 1
|
||||
background: none
|
||||
border: 4px solid #000
|
||||
border-bottom: none
|
||||
color: $text-muted
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.7rem
|
||||
padding: 0.75rem 0.5rem
|
||||
position: relative
|
||||
text-transform: uppercase
|
||||
transition: all 0.2s ease
|
||||
cursor: pointer
|
||||
|
||||
&:hover:not(.active)
|
||||
background-color: rgba($primary, 0.2)
|
||||
color: $text
|
||||
|
||||
&.active
|
||||
color: $primary
|
||||
background-color: $primary
|
||||
color: #000
|
||||
z-index: 1
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
bottom: -4px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 4px
|
||||
background-color: $primary
|
||||
|
||||
.home-footer
|
||||
|
||||
@ -0,0 +1,191 @@
|
||||
// Lobby Screen styles
|
||||
|
||||
.lobby-screen
|
||||
display: flex
|
||||
flex-direction: column
|
||||
min-height: 100%
|
||||
padding: 1.5rem
|
||||
|
||||
.lobby-header
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
margin-bottom: 2rem
|
||||
flex-wrap: wrap
|
||||
gap: 1rem
|
||||
|
||||
h1
|
||||
margin: 0
|
||||
color: $primary
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.8rem
|
||||
text-transform: uppercase
|
||||
position: relative
|
||||
letter-spacing: 2px
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
bottom: -10px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 4px
|
||||
background-color: $primary
|
||||
|
||||
.lobby-code
|
||||
display: flex
|
||||
align-items: center
|
||||
background-color: $card-bg
|
||||
padding: 0.75rem 1rem
|
||||
border: 4px solid #000
|
||||
box-shadow: 4px 4px 0 #000
|
||||
|
||||
p
|
||||
margin: 0 1rem 0 0
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.7rem
|
||||
text-transform: uppercase
|
||||
|
||||
.code
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-weight: bold
|
||||
color: $secondary
|
||||
font-size: 1rem
|
||||
letter-spacing: 2px
|
||||
background-color: rgba(0, 0, 0, 0.3)
|
||||
padding: 0.5rem
|
||||
border: 2px solid $secondary
|
||||
|
||||
.btn
|
||||
padding: 0.25rem 0.5rem
|
||||
font-size: 0.7rem
|
||||
|
||||
.lobby-content
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-grow: 1
|
||||
gap: 1.5rem
|
||||
|
||||
@media (min-width: 768px)
|
||||
flex-direction: row
|
||||
|
||||
.settings-section, .players-section
|
||||
background-color: $card-bg
|
||||
border: 4px solid #000
|
||||
box-shadow: 8px 8px 0 #000
|
||||
padding: 1.5rem
|
||||
position: relative
|
||||
|
||||
h2
|
||||
margin-top: 0
|
||||
margin-bottom: 1rem
|
||||
color: $secondary
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.2rem
|
||||
text-transform: uppercase
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
display: block
|
||||
width: 100%
|
||||
height: 4px
|
||||
background-color: $secondary
|
||||
margin-top: 0.5rem
|
||||
|
||||
.players-list
|
||||
flex: 1
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 1.5rem
|
||||
|
||||
h2
|
||||
margin-top: 0
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
color: $primary
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
padding: 0.75rem 1rem
|
||||
margin-bottom: 0.5rem
|
||||
border-radius: 0.5rem
|
||||
background-color: rgba(255, 255, 255, 0.05)
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
|
||||
&.host
|
||||
border-left: 3px solid $primary
|
||||
|
||||
&.disconnected
|
||||
opacity: 0.6
|
||||
|
||||
.status-disconnected
|
||||
font-size: 0.8rem
|
||||
color: $danger
|
||||
margin-left: auto
|
||||
|
||||
.lobby-info
|
||||
flex: 1
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.settings-preview
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 1.5rem
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
h3
|
||||
margin-top: 0
|
||||
color: $secondary
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
.actions
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 1rem
|
||||
margin-top: auto
|
||||
|
||||
.warning
|
||||
color: $warning
|
||||
text-align: center
|
||||
margin-top: 1rem
|
||||
font-size: 0.9rem
|
||||
|
||||
// Modal overlay for settings
|
||||
.modal-overlay
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background-color: rgba(0, 0, 0, 0.7)
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
z-index: 100
|
||||
|
||||
.modal
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 2rem
|
||||
width: 90%
|
||||
max-width: 500px
|
||||
|
||||
h2
|
||||
margin-top: 0
|
||||
color: $primary
|
||||
|
||||
.modal-actions
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
gap: 1rem
|
||||
margin-top: 2rem
|
||||
@ -8,48 +8,121 @@
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
// Celebratory pixel confetti
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -20px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 20px
|
||||
background: repeating-linear-gradient(90deg, $primary 0px, $primary 10px, $accent 10px, $accent 20px, $secondary 20px, $secondary 30px)
|
||||
animation: pixel-rain 8s linear infinite
|
||||
|
||||
@keyframes pixel-rain
|
||||
0%
|
||||
transform: translateY(-20px)
|
||||
100%
|
||||
transform: translateY(100vh)
|
||||
|
||||
header
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 2rem
|
||||
margin-bottom: 3rem
|
||||
position: relative
|
||||
|
||||
h1
|
||||
margin: 0
|
||||
color: $primary
|
||||
text-shadow: 0 0 8px rgba($primary, 0.5)
|
||||
color: $accent
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
gap: 0.75rem
|
||||
font-size: 2.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
animation: winner-pulse 2s infinite alternate
|
||||
|
||||
svg
|
||||
color: $accent
|
||||
filter: drop-shadow(2px 2px 0 #000)
|
||||
|
||||
@keyframes winner-pulse
|
||||
0%
|
||||
transform: scale(1)
|
||||
text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
|
||||
100%
|
||||
transform: scale(1.05)
|
||||
text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000
|
||||
|
||||
.winner-card
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
padding: 1.5rem
|
||||
border: 8px solid $accent
|
||||
padding: 2rem
|
||||
margin-bottom: 2rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 1.5rem
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
|
||||
position: relative
|
||||
overflow: hidden
|
||||
box-shadow: 10px 10px 0 #000, 0 0 20px rgba($accent, 0.7)
|
||||
|
||||
&::after
|
||||
// Trophy decoration
|
||||
&:before
|
||||
content: '🏆'
|
||||
position: absolute
|
||||
top: -15px
|
||||
right: 20px
|
||||
font-size: 2.5rem
|
||||
transform: rotate(15deg)
|
||||
filter: drop-shadow(2px 2px 0 #000)
|
||||
z-index: 1
|
||||
|
||||
// Pixel border pattern
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
height: 5px
|
||||
background: linear-gradient(to right, $primary, $accent)
|
||||
bottom: 0
|
||||
background: repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba($accent, 0.2) 10px, rgba($accent, 0.2) 20px)
|
||||
pointer-events: none
|
||||
z-index: 0
|
||||
|
||||
@media (min-width: 768px)
|
||||
flex-direction: row
|
||||
align-items: stretch
|
||||
|
||||
.winner-content
|
||||
z-index: 1
|
||||
|
||||
.winner-title
|
||||
margin-top: 0
|
||||
color: $accent
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.8rem
|
||||
text-transform: uppercase
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.winner-info
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.winner-song
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.2rem
|
||||
color: $text
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.winner-player
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1rem
|
||||
color: $primary
|
||||
padding: 0.5rem
|
||||
background-color: rgba($primary, 0.2)
|
||||
border: 3px solid $primary
|
||||
display: inline-block
|
||||
|
||||
.winner-info
|
||||
flex: 1
|
||||
|
||||
|
||||
@ -17,20 +17,29 @@
|
||||
h1
|
||||
margin: 0
|
||||
color: $primary
|
||||
text-shadow: 0 0 8px rgba($primary, 0.5)
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.8rem
|
||||
text-transform: uppercase
|
||||
letter-spacing: 2px
|
||||
|
||||
svg
|
||||
filter: drop-shadow(2px 2px 0 #000)
|
||||
|
||||
.songs-counter
|
||||
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
|
||||
font-size: 1.1rem
|
||||
font-size: 1rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
|
||||
.counter
|
||||
font-weight: bold
|
||||
color: $primary
|
||||
color: $secondary
|
||||
text-shadow: 1px 1px 0 #000
|
||||
|
||||
.submission-content
|
||||
display: flex
|
||||
@ -44,11 +53,62 @@
|
||||
.songs-list
|
||||
flex: 1.5
|
||||
background-color: $card-bg
|
||||
border-radius: 1rem
|
||||
border: 4px solid #000
|
||||
box-shadow: 8px 8px 0 #000
|
||||
padding: 1.5rem
|
||||
|
||||
h2
|
||||
margin-top: 0
|
||||
color: $secondary
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 1.2rem
|
||||
text-transform: uppercase
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
display: block
|
||||
width: 100%
|
||||
height: 4px
|
||||
background-color: $secondary
|
||||
margin-top: 0.5rem
|
||||
|
||||
.song-item
|
||||
margin-bottom: 1rem
|
||||
padding: 0.75rem
|
||||
background-color: rgba(0, 0, 0, 0.3)
|
||||
border: 3px solid #000
|
||||
position: relative
|
||||
|
||||
.song-title
|
||||
font-weight: bold
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
color: $text
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.song-channel
|
||||
font-size: 0.8rem
|
||||
color: $text-muted
|
||||
|
||||
.remove-song
|
||||
position: absolute
|
||||
top: 0.5rem
|
||||
right: 0.5rem
|
||||
background: $danger
|
||||
color: #000
|
||||
border: 2px solid #000
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.7rem
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
@ -17,18 +17,25 @@
|
||||
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
|
||||
@ -36,164 +43,245 @@
|
||||
.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
|
||||
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: 1.5rem
|
||||
gap: 2rem
|
||||
margin-bottom: 2rem
|
||||
perspective: 1000px
|
||||
|
||||
@media (min-width: 768px)
|
||||
flex-direction: row
|
||||
align-items: stretch
|
||||
|
||||
.song-card
|
||||
flex: 1
|
||||
width: 100%
|
||||
max-width: 600px
|
||||
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
|
||||
border: 4px solid #000
|
||||
box-shadow: 8px 8px 0 #000
|
||||
padding: 1rem
|
||||
transition: all 0.2s ease
|
||||
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)
|
||||
&.selected
|
||||
border-color: $primary
|
||||
box-shadow: 0 0 20px $primary, 8px 8px 0 #000
|
||||
transform: translateY(-4px)
|
||||
|
||||
.song-spotlight
|
||||
opacity: 1
|
||||
|
||||
&.voted
|
||||
cursor: default
|
||||
&.bye-winner
|
||||
border-color: $accent
|
||||
box-shadow: 0 0 20px $accent, 8px 8px 0 #000
|
||||
|
||||
.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
|
||||
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
|
||||
|
||||
.versus
|
||||
font-family: 'Bangers', cursive
|
||||
font-size: 2rem
|
||||
.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
|
||||
text-shadow: 0 0 10px rgba($accent, 0.5)
|
||||
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
|
||||
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
|
||||
padding: 0 1rem
|
||||
justify-content: center
|
||||
border: 2px solid #000
|
||||
animation: pixel-pulse 1s infinite
|
||||
|
||||
@media (min-width: 768px)
|
||||
padding: 1rem
|
||||
.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-bottom: 2rem
|
||||
margin: 2rem 0
|
||||
|
||||
.btn
|
||||
padding: 0.75rem 2rem
|
||||
font-size: 1.1rem
|
||||
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
|
||||
color: $text-muted
|
||||
font-style: italic
|
||||
margin-bottom: 0.5rem
|
||||
margin: 0 0 1rem 0
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
color: $text
|
||||
|
||||
.votes-count
|
||||
display: inline-block
|
||||
padding: 0.5rem 1rem
|
||||
background-color: rgba($card-bg, 0.7)
|
||||
border-radius: 0.5rem
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
|
||||
span:first-child
|
||||
span
|
||||
color: $primary
|
||||
font-weight: bold
|
||||
color: $secondary
|
||||
|
||||
// Bye container for automatic advances
|
||||
.bye-container
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: 2rem 0
|
||||
animation: pixel-float 3s infinite ease-in-out
|
||||
|
||||
@ -4,8 +4,38 @@
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: #000
|
||||
border-radius: 0.5rem
|
||||
overflow: hidden
|
||||
border: 4px solid #000
|
||||
position: relative
|
||||
|
||||
// Pixel art CRT screen effect
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1) 50%)
|
||||
background-size: 100% 4px
|
||||
z-index: 2
|
||||
pointer-events: none
|
||||
opacity: 0.4
|
||||
|
||||
// Video glow effect
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -3px
|
||||
left: -3px
|
||||
right: -3px
|
||||
bottom: -3px
|
||||
background-color: transparent
|
||||
box-shadow: 0 0 10px rgba($secondary, 0.5)
|
||||
z-index: -1
|
||||
pointer-events: none
|
||||
|
||||
iframe
|
||||
border: none
|
||||
z-index: 1
|
||||
position: relative
|
||||
|
||||
@ -11,16 +11,18 @@
|
||||
.search-input
|
||||
width: 100%
|
||||
padding: 0.75rem 2.5rem 0.75rem 1rem
|
||||
border-radius: 0.5rem
|
||||
background: rgba(255, 255, 255, 0.1)
|
||||
border: 1px solid rgba(255, 255, 255, 0.2)
|
||||
background: rgba(0, 0, 0, 0.3)
|
||||
border: 3px solid #000
|
||||
color: $text
|
||||
font-size: 1rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
box-shadow: 4px 4px 0 #000
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border-color: $primary
|
||||
box-shadow: 0 0 0 3px rgba($primary, 0.3)
|
||||
border-color: $secondary
|
||||
box-shadow: 4px 4px 0 #000, 0 0 8px rgba($secondary, 0.5)
|
||||
|
||||
.spinner-icon, .clear-icon
|
||||
position: absolute
|
||||
@ -28,17 +30,68 @@
|
||||
right: 1rem
|
||||
transform: translateY(-50%)
|
||||
color: $text-muted
|
||||
filter: drop-shadow(1px 1px 0 #000)
|
||||
|
||||
.clear-icon
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
color: $text
|
||||
transform: translateY(-50%) scale(1.2)
|
||||
transition: all 0.2s ease
|
||||
|
||||
.selected-video
|
||||
background: rgba($card-bg, 0.6)
|
||||
border-radius: 0.75rem
|
||||
background: $card-bg
|
||||
border: 3px solid #000
|
||||
box-shadow: 4px 4px 0 #000
|
||||
padding: 1rem
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.video-details
|
||||
h3
|
||||
margin-top: 0.5rem
|
||||
margin-bottom: 0.5rem
|
||||
color: $secondary
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
|
||||
p
|
||||
color: $text-muted
|
||||
margin: 0 0 0.5rem
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.7rem
|
||||
|
||||
.btn
|
||||
margin-top: 1rem
|
||||
|
||||
.search-results
|
||||
.result-item
|
||||
background: rgba($card-bg, 0.7)
|
||||
border: 2px solid #000
|
||||
margin-bottom: 0.5rem
|
||||
padding: 0.75rem
|
||||
cursor: pointer
|
||||
transition: all 0.2s ease
|
||||
|
||||
&:hover
|
||||
border-color: $primary
|
||||
background: rgba($card-bg, 0.9)
|
||||
transform: translateX(4px)
|
||||
|
||||
&.selected
|
||||
border-color: $secondary
|
||||
border-width: 3px
|
||||
box-shadow: 0 0 8px rgba($secondary, 0.5)
|
||||
|
||||
.result-title
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
margin: 0 0 0.25rem
|
||||
color: $text
|
||||
|
||||
.result-channel
|
||||
font-size: 0.7rem
|
||||
color: $text-muted
|
||||
border: 1px solid rgba($primary, 0.3)
|
||||
|
||||
.preview-header
|
||||
@ -90,7 +143,8 @@
|
||||
|
||||
.video-preview
|
||||
position: relative
|
||||
padding-bottom: 56.25% // 16:9 aspect ratio
|
||||
padding-bottom: 56.25%
|
||||
// 16:9 aspect ratio
|
||||
height: 0
|
||||
overflow: hidden
|
||||
border-radius: 0.5rem
|
||||
|
||||
@ -5,12 +5,17 @@
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 0.5rem
|
||||
margin-bottom: 0.75rem
|
||||
font-weight: 500
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.8rem
|
||||
color: $secondary
|
||||
text-transform: uppercase
|
||||
|
||||
.required
|
||||
color: $danger
|
||||
margin-left: 0.25rem
|
||||
animation: pixel-flash 1s infinite
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
@ -21,32 +26,45 @@
|
||||
select
|
||||
width: 100%
|
||||
padding: 0.75rem
|
||||
background-color: rgba(0, 0, 0, 0.4)
|
||||
border: 2px solid rgba(255, 255, 255, 0.3)
|
||||
border-radius: 0.5rem
|
||||
background-color: $card-bg
|
||||
border: 3px solid #000
|
||||
color: $text
|
||||
font-size: 1rem
|
||||
transition: all 0.3s ease
|
||||
font-family: 'Press Start 2P', monospace
|
||||
font-size: 0.9rem
|
||||
transition: all 0.2s ease
|
||||
box-sizing: border-box
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
|
||||
|
||||
&:focus
|
||||
border-color: $secondary
|
||||
box-shadow: 0 0 15px rgba($secondary, 0.5)
|
||||
outline: none
|
||||
transform: scale(1.02)
|
||||
|
||||
&::placeholder
|
||||
color: rgba(255, 255, 255, 0.5)
|
||||
box-shadow: 4px 4px 0 #000
|
||||
|
||||
&:focus
|
||||
border-color: $primary
|
||||
box-shadow: 0 0 0 2px rgba($primary, 0.25)
|
||||
box-shadow: 4px 4px 0 #000, 0 0 8px $primary
|
||||
outline: none
|
||||
|
||||
&::placeholder
|
||||
color: rgba(255, 255, 255, 0.4)
|
||||
|
||||
// Pixel art checkbox
|
||||
input[type="checkbox"]
|
||||
appearance: none
|
||||
width: 24px
|
||||
height: 24px
|
||||
background-color: $card-bg
|
||||
border: 3px solid #000
|
||||
position: relative
|
||||
cursor: pointer
|
||||
|
||||
&:checked:after
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 6px
|
||||
top: 2px
|
||||
width: 6px
|
||||
height: 12px
|
||||
border: solid $primary
|
||||
border-width: 0 3px 3px 0
|
||||
transform: rotate(45deg)
|
||||
|
||||
&.checkbox
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
@ -15,27 +15,42 @@
|
||||
html, body
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||||
background: linear-gradient(45deg, #AE00FF 0%, #FF007F 100%) fixed
|
||||
font-family: 'Press Start 2P', 'Courier New', monospace
|
||||
background: linear-gradient(45deg, #6600cc 0%, #ff0066 100%) fixed
|
||||
color: $text
|
||||
height: 100%
|
||||
overflow-x: hidden
|
||||
image-rendering: pixelated
|
||||
|
||||
// Pixel art border mixin
|
||||
@mixin pixel-border($color: $primary, $size: 4px)
|
||||
border: $size solid $color
|
||||
box-shadow: 0 0 0 2px darken($color, 30%)
|
||||
position: relative
|
||||
|
||||
#root, .app
|
||||
height: 100%
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
background-image: url('/background.svg')
|
||||
background-size: 32px 32px
|
||||
background-repeat: repeat
|
||||
|
||||
a
|
||||
color: $primary
|
||||
color: $secondary
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
color: lighten($secondary, 20%)
|
||||
transform: scale(1.05)
|
||||
transition: all 0.2s ease
|
||||
|
||||
h1, h2, h3
|
||||
font-family: 'Bangers', cursive
|
||||
letter-spacing: 1px
|
||||
font-family: 'Press Start 2P', 'VT323', monospace
|
||||
letter-spacing: 2px
|
||||
text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
|
||||
|
||||
// Background elements
|
||||
.background-elements
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user