froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

style(14-1): make active player highly visible in game view

Browse Source 
- Active player card now features thick, glowing orange border, strong background highlight, left accent bar, and animated pulse
- Player name and score have increased contrast for unmistakable visibility

Refs #26
This commit is contained in:
Frank Schwenk
2025-06-24 10:39:21 +02:00
parent f0a91724d2
commit ed552b3fbe
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/GameDetail.module.css
View File

@@ -128,8 +128,29 @@
color: #ff8c00; /* Example color */ color: #ff8c00; /* Example color */
} }
.active-player { .active-player {
border: 2px solid #4caf50; position: relative;
box-shadow: 0 0 10px #4caf50; border: 4px solid #ff9800;
box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15);
background: linear-gradient(90deg, #ff9800 0 8px, rgba(255,152,0,0.15) 8px 100%);
color: #222 !important;
animation: activePulse 1.2s infinite alternate;
z-index: 2;
}
.active-player .player-name, .active-player .score {
color: #222 !important;
text-shadow: 0 2px 8px rgba(255,255,255,0.25);
}
.active-player::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 8px;
background: #ff9800;
border-radius: 8px 0 0 8px;
}
@keyframes activePulse {
0% { box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15); }
100% { box-shadow: 0 0 48px 16px #ff9800, 0 0 0 16px rgba(255,152,0,0.22); }
} }
.turn-indicator { .turn-indicator {
margin: 20px 0; margin: 20px 0;