chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Brighten equation/keypad glow for visibility in darkness

Browse Source
This commit is contained in:
chris 2025-11-20 09:12:29 -05:00
parent 66e4efacbe
commit 962f94a92e
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -715,7 +715,7 @@
const darkness = 0.4 + (p * 0.55);
const vignette = 0.2 + (p * 0.32);
const blur = 0 + (p * 0.8);
const glow = Math.min(1.4, 0.3 + (p * 1.15)); // stronger glow as it darkens
const glow = Math.min(2.0, 0.5 + (p * 1.5)); // stronger glow as it darkens
overlay.style.opacity = opacity;
overlay.style.setProperty('--circle-size', `${size}%`);
overlay.style.setProperty('--circle-strength', darkness.toFixed(2));

13
style.css
View File

@ -272,12 +272,13 @@
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; }
.equation { font-size: 3.5rem; margin: 5px 0; min-height: 60px; }
#answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: var(--burgundy); display: flex; align-items: center; justify-content: center; }
#answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: #fff8e0; display: flex; align-items: center; justify-content: center; }
.equation, #answer-display {
color: #fff8e0;
text-shadow:
0 0 calc(3px + 10px * var(--focus-glow)) rgba(255, 235, 180, calc(0.25 + 0.5 * var(--focus-glow))),
0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 215, 80, calc(0.15 + 0.35 * var(--focus-glow)));
0 0 calc(5px + 14px * var(--focus-glow)) rgba(255, 245, 220, calc(0.4 + 0.5 * var(--focus-glow))),
0 0 calc(10px + 20px * var(--focus-glow)) rgba(255, 230, 120, calc(0.3 + 0.4 * var(--focus-glow)));
position: relative;
z-index: 200;
}
@ -287,9 +288,9 @@
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; }
.key-btn { background: rgba(116, 0, 1, 0.05); border: 1px solid var(--gold); color: var(--ink); font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer;
text-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 225, 140, calc(0.2 + 0.4 * var(--focus-glow)));
box-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 195, 50, calc(0.12 + 0.3 * var(--focus-glow)));
.key-btn { background: rgba(116, 0, 1, 0.05); border: 1px solid var(--gold); color: #fff8dc; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer;
text-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 245, 215, calc(0.35 + 0.45 * var(--focus-glow)));
box-shadow: 0 0 calc(3px + 10px * var(--focus-glow)) rgba(255, 205, 90, calc(0.2 + 0.35 * var(--focus-glow)));
}
.key-btn:active { background: var(--gold); }
.key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }