refactor: deduplicate modal/button styles and enforce global utility usage

- Consolidated all modal-related styles into Modal.module.css; ValidationModal.module.css is now deprecated
- All main action/navigation buttons in NewGame and GameDetail use global .btn/.nav-buttons utility classes
- Removed duplicate utility classes from component CSS files
- Fixed .fullscreenToggle class naming for consistency
- Cleaned up component CSS to only contain component-specific styles
- Updated GameCompletionModal to use shared modal styles

This ensures DRY, maintainable, and consistent styling across the app.
This commit is contained in:
Frank Schwenk
2025-06-06 16:42:11 +02:00
parent 209df5d9f2
commit d1379985f3
13 changed files with 51 additions and 202 deletions

View File

@@ -1,26 +1,4 @@
#game-completion-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #222;
padding: 32px 24px 24px 24px;
border-radius: 16px;
width: 90vw;
max-width: 480px;
box-shadow: 0 4px 32px rgba(0,0,0,0.7);
position: relative;
margin: auto;
transform: none;
}
/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
.final-scores {
margin: 20px 0;
}
@@ -60,14 +38,6 @@
margin: 0;
color: #fff;
}
.modal-footer {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 24px;
width: 100%;
justify-content: center;
}
.btn {
flex: 1;
padding: 18px 0;
@@ -89,25 +59,7 @@
.btn--warning:hover {
background: #d32f2f;
}
.close-button {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
color: #aaa;
font-size: 2rem;
cursor: pointer;
z-index: 2;
}
.close-button:hover {
color: #fff;
}
@media (max-width: 600px) {
.modal-content {
padding: 16px 4px 16px 4px;
max-width: 98vw;
}
.btn {
font-size: 1rem;
padding: 14px 0;