ske087/digiserver-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark-theme colours on player delete modal and maintenance page

Browse Source 
Both bugs had the same cause: light colours were set with inline style
attributes, which outrank the theme rules in base.html and so survived the
dark theme. Text that inherits --text-color then became light-on-light.

* manage_player.html: the delete confirmation modal used an inline
  background-color of #fefefe with the body's dark-mode text colour, making
  the message unreadable in dark mode. Rebuilt it with .modal-* classes
  driven by the base.html CSS variables (and dark-mode variants for the
  title, warning and player name).
* admin/maintenance.html: the "Automatic reset interval" panel, table
  headers and JS-rendered rows/tables hardcoded #f8f9fa/#e2e8f0/#dee2e6.
  Switched them to --bg-color / --card-bg / --border-color /
  --text-secondary and added a themed .maint-badge-pending.

Verified with computed styles in both themes; light mode is unchanged.
This commit is contained in:
scheianu
2026-10-14 22:35:39 +03:00
parent 88827be7be
commit 5b69ccb02b
2 changed files with 142 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/players/manage_player.html
+84 -20
View File
@@ -290,24 +290,24 @@
</div>
<!-- Delete Confirmation Modal -->
<div id="deleteModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
<div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<h2 style="margin-top: 0; color: #dc3545; display: flex; align-items: center; gap: 0.5rem;">
<div id="deleteModal" class="modal-overlay">
<div class="modal-box">
<h2 class="modal-title">
<span style="font-size: 1.5rem;">⚠️</span>
Confirm Delete
</h2>
<p style="font-size: 1.1rem; margin: 1.5rem 0;">
Are you sure you want to delete player <strong>"{{ player.name }}"</strong>?
<p class="modal-text">
Are you sure you want to delete player <strong class="modal-player">"{{ player.name }}"</strong>?
</p>
<p style="color: #dc3545; margin: 1rem 0;">
<p class="modal-warning">
<strong>Warning:</strong> This action cannot be undone. All feedback logs for this player will also be deleted.
</p>
<div style="display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 2rem;">
<button onclick="closeDeleteModal()" class="btn" style="background: #6c757d;">
<div class="modal-actions">
<button onclick="closeDeleteModal()" class="btn modal-cancel">
Cancel
</button>
<form method="POST" action="{{ url_for('players.delete_player', player_id=player.id) }}" style="margin: 0;">
<button type="submit" class="btn" style="background: #dc3545;">
<button type="submit" class="btn btn-danger">
Yes, Delete Player
</button>
</form>
@@ -316,23 +316,87 @@
</div>
<style>
body.dark-mode #deleteModal > div {
background-color: #1a202c;
border-color: #4a5568;
color: #e2e8f0;
/* Delete confirmation modal — themed via the CSS variables defined in
base.html so it follows the light/dark theme. Inline colours are
deliberately avoided: they would win over the theme rules and leave
the modal white (with light text) in dark mode. */
.modal-overlay {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
body.dark-mode #deleteModal h2 {
.modal-box {
background-color: var(--card-bg);
color: var(--text-color);
margin: 15% auto;
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: var(--shadow-lg);
}
.modal-title {
margin-top: 0;
color: #dc3545;
display: flex;
align-items: center;
gap: 0.5rem;
}
body.dark-mode .modal-title {
color: #f87171;
}
body.dark-mode #deleteModal p {
color: #e2e8f0;
.modal-text {
font-size: 1.1rem;
margin: 1.5rem 0;
color: var(--text-color);
}
body.dark-mode #deleteModal p strong {
.modal-player {
color: var(--primary-color);
}
body.dark-mode .modal-player {
color: #a78bfa;
}
.modal-warning {
margin: 1rem 0;
padding: 0.75rem 1rem;
border-radius: 6px;
background: #fff3cd;
color: #856404;
}
body.dark-mode .modal-warning {
background: #4a3800;
color: #fbbf24;
}
.modal-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 2rem;
}
.modal-cancel {
background: #6c757d;
}
.modal-cancel:hover {
background: #5a6268;
}
</style>
<script>