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

Strengthen number contrast with brighter glow and strokes

Browse Source
This commit is contained in:
chris 2025-11-20 09:13:34 -05:00
parent 962f94a92e
commit 8c12f6e220
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
style.css
View File

@ -272,13 +272,14 @@
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; } .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; } .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: #fff8e0; 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: #fffdf2; display: flex; align-items: center; justify-content: center; }
.equation, #answer-display { .equation, #answer-display {
color: #fff8e0; color: #fffdf2;
text-shadow: text-shadow:
0 0 calc(5px + 14px * var(--focus-glow)) rgba(255, 245, 220, calc(0.4 + 0.5 * var(--focus-glow))), 0 0 calc(6px + 16px * var(--focus-glow)) rgba(255, 250, 235, calc(0.45 + 0.45 * var(--focus-glow))),
0 0 calc(10px + 20px * var(--focus-glow)) rgba(255, 230, 120, calc(0.3 + 0.4 * var(--focus-glow))); 0 0 calc(12px + 22px * var(--focus-glow)) rgba(255, 230, 140, calc(0.35 + 0.4 * var(--focus-glow)));
-webkit-text-stroke: 1px rgba(0,0,0,0.5);
position: relative; position: relative;
z-index: 200; z-index: 200;
} }
@ -288,9 +289,10 @@
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @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; } .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: #fff8dc; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer; .key-btn { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); color: #fffdf2; 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))); text-shadow: 0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 245, 225, calc(0.4 + 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))); box-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 205, 90, calc(0.25 + 0.35 * var(--focus-glow)));
-webkit-text-stroke: 1px rgba(0,0,0,0.55);
} }
.key-btn:active { background: var(--gold); } .key-btn:active { background: var(--gold); }
.key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; } .key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }