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

Lighten core gameplay area and sharpen overlay edges

Browse Source
This commit is contained in:
chris 2025-11-20 08:35:58 -05:00
parent 08aef1d09a
commit 871e0dc3f3
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app.js
View File

@ -667,12 +667,12 @@
const overlay = document.getElementById('dementor-overlay');
positionDementorOverlay();
const p = dementor.progress > 1 ? 1 : dementor.progress;
const opacity = 0.18 + (p * 0.62);
const size = 14 + (p * 24); // start at edges, creep inward
const darkness = 0.3 + (p * 0.55);
const vignette = 0.35 + (p * 0.35);
const blur = 0 + (p * 2);
const glow = 0.08 + (p * 0.92);
const opacity = 0.12 + (p * 0.45);
const size = 14 + (p * 20); // start at edges, creep inward
const darkness = 0.24 + (p * 0.4);
const vignette = 0.25 + (p * 0.25);
const blur = 0 + (p * 1.5);
const glow = 0.1 + (p * 0.8);
overlay.style.opacity = opacity;
overlay.style.setProperty('--circle-size', `${size}%`);
overlay.style.setProperty('--circle-strength', darkness.toFixed(2));
@ -688,7 +688,7 @@
overlay.style.setProperty('--circle-size', '12%');
overlay.style.setProperty('--circle-strength', '0.25');
overlay.style.setProperty('--circle-blur', '0px');
overlay.style.setProperty('--vignette-strength', '0.35');
overlay.style.setProperty('--vignette-strength', '0.25');
document.documentElement.style.setProperty('--focus-glow', '0');
saveData();
}

4
style.css
View File

@ -128,7 +128,7 @@
--circle-size: 12%;
--circle-strength: 0.25;
--circle-blur: 0px;
--vignette-strength: 0.35;
--vignette-strength: 0.25;
background:
radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
@ -138,7 +138,7 @@
radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,var(--vignette-strength)) 78%, rgba(0,0,0,calc(var(--vignette-strength) * 1.2)) 100%);
radial-gradient(circle at 50% 50%, transparent 48%, rgba(0,0,0,calc(var(--vignette-strength) * 0.4)) 70%, rgba(0,0,0,var(--vignette-strength)) 90%, rgba(0,0,0,calc(var(--vignette-strength) * 1.1)) 100%);
opacity: 0;
filter: blur(var(--circle-blur));
mix-blend-mode: multiply;