Enhance Voting and Home screens with pixel art styles; add player voting status list and update button designs for improved UI experience

This commit is contained in:
2025-04-24 17:56:53 +02:00
parent 38ed69bf5b
commit fca6baa694
8 changed files with 221 additions and 61 deletions

View File

@ -274,10 +274,95 @@
gap: 0.5rem
font-family: 'Press Start 2P', monospace
font-size: 0.8rem
margin-bottom: 1rem
span
color: $primary
font-weight: bold
// 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
@keyframes pixel-blink
0%, 100%
opacity: 1
50%
opacity: 0.3
// Bye container for automatic advances
.bye-container