Tobias/ChooserApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Passe die vertikale Positionierung der Animationselemente im Overlay an, um die Sichtbarkeit zu verbessern
All checks were successful
Deploy via FTP / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Tobias Leuschner
2026-02-22 15:02:33 +01:00
parent 42ebce9327
commit 61ca4292aa
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@@ -109,7 +109,7 @@ body::before {
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, calc(-50% - 33px)); transform: translate(-50%, calc(-50% - 22px));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -168,13 +168,13 @@ body::before {
0 0 0 3px rgba(52,211,153,0.28), 0 0 0 3px rgba(52,211,153,0.28),
0 0 48px rgba(52,211,153,0.35), 0 0 48px rgba(52,211,153,0.35),
0 8px 30px rgba(0,0,0,0.4); 0 8px 30px rgba(0,0,0,0.4);
transform: translate(-50%, calc(-50% - 33px)) scale(1.08); transform: translate(-50%, calc(-50% - 22px)) scale(1.08);
} }
/* Lost: shrink and fade */ /* Lost: shrink and fade */
.finger.lost { .finger.lost {
opacity: 0; opacity: 0;
transform: translate(-50%, calc(-50% - 33px)) scale(0.45); transform: translate(-50%, calc(-50% - 22px)) scale(0.45);
transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1); transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1);
} }
@@ -182,9 +182,9 @@ body::before {
.pulse { animation: pulse 1400ms ease-in-out infinite; } .pulse { animation: pulse 1400ms ease-in-out infinite; }
@keyframes pulse { @keyframes pulse {
0% { transform: translate(-50%, calc(-50% - 33px)) scale(1.08); } 0% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
50% { transform: translate(-50%, calc(-50% - 33px)) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); } 50% { transform: translate(-50%, calc(-50% - 22px)) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
100% { transform: translate(-50%, calc(-50% - 33px)) scale(1.08); } 100% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
} }
/* ── Install hint banner ── */ /* ── Install hint banner ── */