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:
@ -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
|
||||
|
Reference in New Issue
Block a user