style(ui): make 'Neues Spiel' button visually prominent

- Increased size, padding, and border radius of the button
- Changed background to bold orange with white text
- Added a plus icon before the text
- Added drop shadow and modern hover effect for emphasis

Refs #26
This commit is contained in:
Frank Schwenk
2025-06-24 10:10:38 +02:00
parent 0247c7d384
commit 0b5fa3f697

View File

@@ -37,22 +37,37 @@ input, select {
/* Utility button for new game (global, not component-specific) */
.new-game-button {
width: 100%;
background: #222;
background: #ff9800;
color: #fff;
border: none;
border-radius: 0;
font-size: 1.4rem;
font-weight: 600;
padding: 20px 0;
margin-bottom: 16px;
border-radius: 12px;
font-size: 2rem;
font-weight: 700;
padding: 28px 0;
margin-bottom: 24px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
text-align: center;
display: block;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 24px rgba(255, 152, 0, 0.25), 0 1.5px 6px rgba(0,0,0,0.12);
letter-spacing: 0.5px;
gap: 16px;
}
.new-game-button::before {
content: '+';
font-size: 2.2rem;
font-weight: 900;
margin-right: 12px;
display: inline-block;
line-height: 1;
}
.new-game-button:hover {
background: #333;
background: #ffa726;
box-shadow: 0 6px 32px rgba(255, 152, 0, 0.35), 0 2px 8px rgba(0,0,0,0.16);
}
/* Shared utility classes for buttons and layout */