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

style(new-game): restrict player color backgrounds to player input steps

Browse Source 
- Only player input containers use the new color backgrounds, borders, and shadows
- Game type selection and other steps are visually unaffected
- Ensures clear, consistent player association without UI side effects

Refs #26
This commit is contained in:
Frank Schwenk
2025-06-24 10:17:58 +02:00
parent 592ba57286
commit 7d4cc30e97
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/NewGame.jsx
View File

@@ -85,7 +85,7 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
<span className={styles['progress-dot']} />
<span className={styles['progress-dot']} />
</div>
<div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
<div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: 32, position: 'relative' }}>
<label htmlFor="player1-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 1</label>
<div style={{ position: 'relative', width: '100%' }}>
<input
@@ -244,7 +244,7 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
<span className={styles['progress-dot']} />
<span className={styles['progress-dot']} />
</div>
<div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
<div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
<label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
<div style={{ position: 'relative', width: '100%' }}>
<input
@@ -380,7 +380,7 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
<span className={styles['progress-dot']} />
<span className={styles['progress-dot']} />
</div>
<div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
<div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
<label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
<div style={{ position: 'relative', width: '100%' }}>
<input

26
src/components/NewGame.module.css
View File

@@ -274,4 +274,30 @@
.endlos-btn {
width: 100%;
}
.player1-input.player-input {
background: #43a047;
color: #fff;
border: 2px solid #388e3c;
box-shadow: 0 2px 12px rgba(67,160,71,0.12);
}
.player2-input.player-input {
background: #1565c0;
color: #fff;
border: 2px solid #0d47a1;
box-shadow: 0 2px 12px rgba(21,101,192,0.12);
}
.player3-input.player-input {
background: #333;
color: #fff;
border: 2px solid #222;
box-shadow: 0 2px 12px rgba(51,51,51,0.12);
}
.player1-input.player-input input,
.player2-input.player-input input,
.player3-input.player-input input {
background: #fff;
color: #222;
border: 1px solid #ccc;
}