GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

fix(quick-play): replace hardcoded colors with CSS variables 

- Replace all cyan (#00d4ff) with var(--color-primary)
- Replace all purple (#8B5CF6) with var(--color-secondary)
- Replace gold (#ffd700) with var(--color-accent-gold)
- Add --color-accent-gold and semantic color aliases to color-variables.css
- Convert 40+ CSS classes to use theme-aware variables
- Fixes theme switching for setup screens, buttons, controls, sliders, modals
- Maintains exclusions: grays, whites, blacks, consequence colors, status colors
This commit is contained in:
dilgenfritz 2025-11-24 13:27:02 -06:00
parent 85e9c9cc5d
commit e9fbb2b427
2 changed files with 124 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
quick-play.html
View File

@ -2337,7 +2337,7 @@
console.log('🎬 Set webcam overlay type to TASK');
} else if (taskTitleText) {
overlayTaskType.textContent = 'SESSION';
overlayTaskType.style.color = '#ffd700';
overlayTaskType.style.color = 'var(--color-accent-gold)';
console.log('🎬 Set webcam overlay type to SESSION');
} else {
overlayTaskType.textContent = 'TRAINING';
@ -2397,7 +2397,7 @@
webcamTaskType.style.color = 'var(--color-primary)';
} else if (title) {
webcamTaskType.textContent = 'SESSION';
webcamTaskType.style.color = '#ffd700';
webcamTaskType.style.color = 'var(--color-accent-gold)';
} else {
webcamTaskType.textContent = 'TRAINING';
webcamTaskType.style.color = '#00ff00';
@ -5731,12 +5731,12 @@
setupOverlay.innerHTML = `
<div style="text-align: center; max-width: 600px; padding: 40px;">
<h2 style="color: #ff6b35; margin-bottom: 20px;">📺 No Videos Available</h2>
<h2 style="color: var(--color-warning); margin-bottom: 20px;">📺 No Videos Available</h2>
<p style="font-size: 1.1em; margin-bottom: 20px;">
To use the overlay video player, you need to set up video directories first.
</p>
<div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 10px; margin: 20px 0;">
<h3 style="color: #3a86ff; margin-bottom: 15px;">Setup Instructions:</h3>
<h3 style="color: var(--color-primary); margin-bottom: 15px;">Setup Instructions:</h3>
<ol style="text-align: left; font-size: 1em; line-height: 1.6;">
<li>Go to the main menu (index.html)</li>
<li>Click on "Media Library" tab</li>
@ -5747,11 +5747,11 @@
</div>
<div style="margin-top: 30px;">
<button onclick="this.parentElement.parentElement.remove()"
style="padding: 12px 24px; background: #ff6b35; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; margin-right: 10px;">
style="padding: 12px 24px; background: var(--color-warning); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; margin-right: 10px;">
✅ Got It
</button>
<button onclick="window.open('index.html', '_blank')"
style="padding: 12px 24px; background: #3a86ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em;">
style="padding: 12px 24px; background: var(--color-primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em;">
📂 Go to Media Library
</button>
</div>
@ -6666,9 +6666,9 @@
// Update statistics display
messageStats.innerHTML = `
<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
<span>Total Messages: <strong style="color: #00d4ff;">${totalMessages}</strong></span>
<span>Enabled: <strong style="color: #00ff64;">${enabledMessages}</strong></span>
<span>Disabled: <strong style="color: #ff6b35;">${disabledMessages}</strong></span>
<span>Total Messages: <strong style="color: var(--color-primary);">${totalMessages}</strong></span>
<span>Enabled: <strong style="color: var(--color-success);">${enabledMessages}</strong></span>
<span>Disabled: <strong style="color: var(--color-warning);">${disabledMessages}</strong></span>
</div>
<div style="font-size: 12px; color: #888888;">
Categories: ${Object.keys(categories).map(cat => `${cat} (${categories[cat]})`).join(', ')}
@ -7812,7 +7812,7 @@
}
.quick-play-mode {
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
background: var(--color-background-gradient);
min-height: 100vh;
font-family: 'Electrolize', sans-serif;
}
@ -7844,7 +7844,7 @@
}
.recording-timestamp {
color: #ffd700;
color: var(--color-accent-gold);
font-family: 'Courier New', monospace;
}
@ -8163,14 +8163,14 @@
}
.collapsible-header:hover {
background: rgba(0, 212, 255, 0.15);
border-color: rgba(0, 212, 255, 0.5);
background: var(--color-primary-transparent);
border-color: var(--color-primary);
}
.collapse-icon {
font-size: 12px;
transition: transform 0.3s ease;
color: #00d4ff;
color: var(--color-primary);
}
.collapsible-header.active .collapse-icon {
@ -8181,20 +8181,20 @@
margin-top: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 212, 255, 0.2);
border: 1px solid var(--color-primary-border);
border-radius: 8px;
}
.setting-group {
margin-bottom: 30px;
padding: 20px;
background: rgba(0, 212, 255, 0.05);
border: 1px solid rgba(0, 212, 255, 0.2);
background: var(--color-primary-transparent);
border: 1px solid var(--color-primary-border);
border-radius: 10px;
}
.setting-group h3 {
color: #00d4ff;
color: var(--color-primary);
font-size: 18px;
margin: 0 0 15px 0;
display: flex;
@ -8210,7 +8210,7 @@
.time-preset, .difficulty-preset {
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(0, 212, 255, 0.3);
border: 2px solid var(--color-primary-border);
border-radius: 10px;
padding: 15px;
cursor: pointer;
@ -8220,18 +8220,18 @@
}
.time-preset:hover, .difficulty-preset:hover {
border-color: #00d4ff;
background: rgba(0, 212, 255, 0.1);
border-color: var(--color-primary);
background: var(--color-primary-transparent);
}
.time-preset.active, .difficulty-preset.active {
border-color: #00d4ff;
background: rgba(0, 212, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
border-color: var(--color-primary);
background: var(--color-primary-hover);
box-shadow: 0 0 20px var(--color-primary-transparent);
}
.preset-value, .difficulty-name {
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
font-size: 16px;
margin-bottom: 5px;
@ -8307,8 +8307,8 @@
.setting-row select {
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 212, 255, 0.3);
color: #00d4ff;
border: 1px solid var(--color-primary-border);
color: var(--color-primary);
padding: 5px 10px;
border-radius: 5px;
}
@ -8323,7 +8323,7 @@
}
.tag-category h4 {
color: #00d4ff;
color: var(--color-primary);
font-size: 14px;
margin-bottom: 10px;
font-weight: bold;
@ -8342,18 +8342,18 @@
cursor: pointer;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 212, 255, 0.2);
border: 1px solid var(--color-primary-border);
border-radius: 5px;
transition: all 0.2s ease;
}
.tag-option:hover {
background: rgba(0, 212, 255, 0.1);
border-color: rgba(0, 212, 255, 0.4);
background: var(--color-primary-transparent);
border-color: var(--color-primary-hover);
}
.tag-option input[type="checkbox"] {
accent-color: #00d4ff;
accent-color: var(--color-primary);
margin: 0;
}
@ -8364,7 +8364,7 @@
}
.tag-option input[type="checkbox"]:checked + .tag-name {
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
}
@ -8373,7 +8373,7 @@
margin-top: 15px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 212, 255, 0.3);
border: 1px solid var(--color-primary-border);
border-radius: 5px;
display: flex;
align-items: center;
@ -8388,19 +8388,19 @@
}
.task-duration {
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
font-size: 14px;
}
.task-timer {
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
font-size: 16px;
background: rgba(0, 212, 255, 0.1);
background: var(--color-primary-transparent);
padding: 2px 8px;
border-radius: 3px;
border: 1px solid rgba(0, 212, 255, 0.3);
border: 1px solid var(--color-primary-border);
min-width: 45px;
text-align: center;
}
@ -8430,7 +8430,7 @@
border-radius: 5px;
background: rgba(0, 0, 0, 0.8);
outline: none;
border: 1px solid rgba(0, 212, 255, 0.3);
border: 1px solid var(--color-primary-border);
}
.slider::-webkit-slider-thumb {
@ -8438,24 +8438,24 @@
width: 20px;
height: 20px;
border-radius: 50%;
background: #00d4ff;
background: var(--color-primary);
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
box-shadow: var(--shadow-glow-primary);
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #00d4ff;
background: var(--color-primary);
cursor: pointer;
border: none;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
box-shadow: var(--shadow-glow-primary);
}
.slider-value {
min-width: 45px;
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
text-align: center;
}
@ -8482,7 +8482,7 @@
.results-container {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00d4ff;
border: 2px solid var(--color-primary);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
@ -8490,11 +8490,11 @@
}
.results-header h2 {
color: #00d4ff;
color: var(--color-primary);
font-family: 'Audiowide', sans-serif;
font-size: 32px;
margin: 0 0 10px 0;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
text-shadow: var(--shadow-glow-primary);
}
.results-stats {
@ -8523,7 +8523,7 @@
}
.stat-value {
color: #00d4ff;
color: var(--color-primary);
font-size: 24px;
font-weight: bold;
}
@ -8539,7 +8539,7 @@
.time-preset.custom input {
background: transparent;
border: none;
color: #00d4ff;
color: var(--color-primary);
text-align: center;
width: 60px;
font-size: 12px;
@ -8739,7 +8739,7 @@
appearance: none;
width: 16px;
height: 16px;
background: #8B5CF6;
background: var(--color-secondary);
border-radius: 50%;
cursor: pointer;
}
@ -8747,7 +8747,7 @@
.volume-slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: #8B5CF6;
background: var(--color-secondary);
border-radius: 50%;
cursor: pointer;
border: none;
@ -8772,7 +8772,7 @@
}
.playlist-select:focus {
border-color: #8B5CF6;
border-color: var(--color-secondary);
}
.video-info {
@ -8806,7 +8806,7 @@
.progress-fill {
height: 100%;
background: #8B5CF6;
background: var(--color-secondary);
border-radius: 2px;
width: 0%;
transition: width 0.1s ease;
@ -8826,7 +8826,7 @@
background: rgba(0, 0, 0, 0.4);
border-radius: 15px;
padding: 15px;
border: 1px solid rgba(0, 212, 255, 0.3);
border: 1px solid var(--color-primary-border);
min-height: 0; /* Allow flex to shrink */
overflow: visible; /* Allow natural sizing */
height: auto; /* Auto height based on content */
@ -8839,11 +8839,11 @@
}
.task-text-container h3 {
color: #00d4ff;
color: var(--color-primary);
font-family: 'Audiowide', sans-serif;
font-size: 22px;
margin: 0 0 8px 0;
text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
text-shadow: var(--shadow-glow-primary);
text-align: center;
line-height: 1.2;
}
@ -9215,7 +9215,7 @@
width: 12px;
height: 12px;
border-radius: 50%;
background: #00d4ff;
background: var(--color-primary);
cursor: pointer;
border: none;
}
@ -9224,7 +9224,7 @@
width: 12px;
height: 12px;
border-radius: 50%;
background: #00d4ff;
background: var(--color-primary);
cursor: pointer;
border: none;
}
@ -9241,13 +9241,13 @@
.task-display-container {
background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(5px);
border: 2px solid rgba(0, 212, 255, 0.5) !important;
border: 2px solid var(--color-primary-border) !important;
}
.control-sidebar {
background: rgba(0, 0, 0, 0.8) !important;
backdrop-filter: blur(5px);
border: 1px solid rgba(0, 212, 255, 0.5) !important;
border: 1px solid var(--color-primary-border) !important;
}
/* Video mode selection styles */
@ -9260,8 +9260,8 @@
.video-options {
margin-left: 20px;
padding: 15px;
background: rgba(0, 212, 255, 0.05);
border: 1px solid rgba(0, 212, 255, 0.2);
background: var(--color-primary-transparent);
border: 1px solid var(--color-primary-border);
border-radius: 8px;
}
@ -9319,7 +9319,7 @@
.task-management-container {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00d4ff;
border: 2px solid var(--color-primary);
border-radius: 15px;
padding: 30px;
}
@ -9330,7 +9330,7 @@
}
.task-management-header h2 {
color: #00d4ff;
color: var(--color-primary);
font-family: 'Audiowide', sans-serif;
margin-bottom: 10px;
}
@ -9339,14 +9339,14 @@
display: flex;
gap: 15px;
margin-bottom: 30px;
border-bottom: 2px solid rgba(0, 212, 255, 0.3);
border-bottom: 2px solid var(--color-primary-border);
padding-bottom: 15px;
}
.task-tab-btn {
padding: 12px 20px;
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(0, 212, 255, 0.3);
border: 2px solid var(--color-primary-border);
border-radius: 8px;
color: #aaa;
cursor: pointer;
@ -9355,14 +9355,14 @@
}
.task-tab-btn.active {
background: rgba(0, 212, 255, 0.2);
border-color: #00d4ff;
color: #00d4ff;
background: var(--color-primary-transparent);
border-color: var(--color-primary);
color: var(--color-primary);
}
.task-tab-btn:hover {
background: rgba(0, 212, 255, 0.1);
border-color: #00d4ff;
background: var(--color-primary-transparent);
border-color: var(--color-primary);
}
.task-section {
@ -9382,7 +9382,7 @@
}
.add-task-section h3 {
color: #00d4ff;
color: var(--color-primary);
margin-bottom: 15px;
}
@ -9449,18 +9449,18 @@
.tag-suggestion {
padding: 4px 8px;
background: rgba(0, 212, 255, 0.2);
border: 1px solid rgba(0, 212, 255, 0.4);
background: var(--color-primary-transparent);
border: 1px solid var(--color-primary-hover);
border-radius: 12px;
color: #00d4ff;
color: var(--color-primary);
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.tag-suggestion:hover {
background: rgba(0, 212, 255, 0.3);
border-color: #00d4ff;
background: var(--color-primary-transparent);
border-color: var(--color-primary);
}
.form-actions {
@ -9476,7 +9476,7 @@
}
.existing-tasks-section h3 {
color: #00d4ff;
color: var(--color-primary);
margin-bottom: 15px;
}
@ -9522,8 +9522,8 @@
}
.task-item:hover {
background: rgba(0, 212, 255, 0.1);
border-color: #00d4ff;
background: var(--color-primary-transparent);
border-color: var(--color-primary);
}
.task-content {
@ -9544,9 +9544,9 @@
.task-tag {
padding: 2px 6px;
background: rgba(0, 212, 255, 0.3);
background: var(--color-primary-transparent);
border-radius: 10px;
color: #00d4ff;
color: var(--color-primary);
font-size: 11px;
}
@ -9605,7 +9605,7 @@
}
input:checked + .toggle-slider {
background-color: #00d4ff;
background-color: var(--color-primary);
}
input:checked + .toggle-slider:before {
@ -9643,9 +9643,9 @@
.tag-dropdown {
width: 100%;
background: rgba(0, 20, 40, 0.8);
border: 2px solid rgba(0, 212, 255, 0.3);
border: 2px solid var(--color-primary-border);
border-radius: 8px;
color: #00d4ff;
color: var(--color-primary);
padding: 8px;
font-family: 'Orbitron', monospace;
font-size: 14px;
@ -9655,12 +9655,12 @@
.tag-dropdown option {
padding: 4px 8px;
background: rgba(0, 20, 40, 0.9);
color: #00d4ff;
border-bottom: 1px solid rgba(0, 212, 255, 0.1);
color: var(--color-primary);
border-bottom: 1px solid var(--color-primary-transparent);
}
.tag-dropdown option:checked {
background: rgba(0, 212, 255, 0.3);
background: var(--color-primary-transparent);
color: #ffffff;
}
@ -9692,9 +9692,9 @@
#new-tag-input {
width: 100%;
background: rgba(0, 20, 40, 0.8);
border: 2px solid rgba(0, 212, 255, 0.3);
border: 2px solid var(--color-primary-border);
border-radius: 8px;
color: #00d4ff;
color: var(--color-primary);
padding: 12px;
font-family: 'Orbitron', monospace;
font-size: 14px;
@ -9703,12 +9703,12 @@
}
#new-tag-input:focus {
border-color: rgba(0, 212, 255, 0.8);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
border-color: var(--color-primary-hover);
box-shadow: var(--shadow-glow-primary);
}
#new-tag-input::placeholder {
color: rgba(0, 212, 255, 0.5);
color: var(--color-primary-transparent);
}
.tags-list {
@ -9727,12 +9727,12 @@
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 212, 255, 0.2);
color: #00d4ff;
background: var(--color-primary-transparent);
color: var(--color-primary);
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
border: 1px solid rgba(0, 212, 255, 0.3);
border: 1px solid var(--color-primary-border);
}
.tag-delete-btn {
@ -9781,11 +9781,11 @@
.custom-modal {
background: linear-gradient(135deg, rgba(0, 20, 40, 0.95), rgba(0, 40, 80, 0.95));
border: 2px solid rgba(0, 212, 255, 0.6);
border: 2px solid var(--color-primary-hover);
border-radius: 12px;
min-width: 400px;
max-width: 500px;
box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
box-shadow: var(--shadow-glow-primary);
font-family: 'Orbitron', monospace;
animation: modalSlideIn 0.3s ease-out;
}
@ -9810,10 +9810,10 @@
.custom-modal-header h3 {
margin: 0;
color: #00d4ff;
color: var(--color-primary);
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
text-shadow: var(--shadow-glow-primary);
}
.custom-modal-body {
@ -9925,8 +9925,8 @@
background: rgba(0, 0, 0, 0.6);
border-radius: 12px;
padding: 30px;
border: 1px solid #00d4ff;
box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
border: 1px solid var(--color-primary);
box-shadow: var(--shadow-glow-primary);
}
.message-management-header {
@ -9974,9 +9974,9 @@
.message-tab-btn.active,
.message-tab-btn:hover {
background: rgba(0, 212, 255, 0.3);
color: #00d4ff;
border-color: #00d4ff;
background: var(--color-primary-transparent);
color: var(--color-primary);
border-color: var(--color-primary);
}
.message-section {
@ -9992,7 +9992,7 @@
}
.message-section h3 {
color: #00d4ff;
color: var(--color-primary);
margin-bottom: 20px;
font-size: 20px;
}
@ -10050,7 +10050,7 @@
}
.message-control-row .range-display {
color: #00d4ff;
color: var(--color-primary);
font-weight: bold;
min-width: 60px;
text-align: center;
@ -10084,9 +10084,9 @@
}
.message-btn {
background: rgba(0, 212, 255, 0.2);
color: #00d4ff;
border: 1px solid #00d4ff;
background: var(--color-primary-transparent);
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
@ -10095,7 +10095,7 @@
}
.message-btn:hover {
background: rgba(0, 212, 255, 0.4);
background: var(--color-primary-transparent);
}
.message-btn.primary {
@ -10138,8 +10138,8 @@
}
.message-item:hover {
background: rgba(0, 212, 255, 0.1);
border-color: rgba(0, 212, 255, 0.3);
background: var(--color-primary-transparent);
border-color: var(--color-primary-border);
}
.message-item.disabled {
@ -10184,8 +10184,8 @@
}
.message-category.encouraging {
background: rgba(0, 212, 255, 0.3);
color: #00d4ff;
background: var(--color-primary-transparent);
color: var(--color-primary);
}
.message-category.achievement {
@ -10227,8 +10227,8 @@
}
.message-btn-edit:hover {
background: rgba(0, 212, 255, 0.3);
border-color: #00d4ff;
background: var(--color-primary-transparent);
border-color: var(--color-primary);
}
.message-btn-delete:hover {

7
src/styles/color-variables.css
View File

@ -19,6 +19,13 @@
--color-accent-red-dark: #c0392b; /* Darker red */
--color-accent-green: #00ff88; /* Success green */
--color-accent-blue: #3498db; /* Info blue */
--color-accent-gold: #ffd700; /* Gold accent */
/* Semantic aliases for common uses */
--color-warning: #f39c12; /* Orange-gold warning color */
--color-success: var(--color-accent-green); /* Success state */
--color-error: var(--color-accent-red); /* Error state */
--color-info: var(--color-accent-blue); /* Info state */
/* ===== BACKGROUND COLORS ===== */
--bg-primary: #0a0a0a; /* Nearly black */