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

Passe die Positionierung und den Rahmen der Overlay-Elemente 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 14:59:31 +01:00
parent d407bd49fe
commit 15e6de7d95
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/style.css
View File

@@ -109,14 +109,14 @@ body::before {
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, calc(-50% - 22px));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 700;
color: rgba(255,255,255,0.88); color: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.07); background: rgba(255,255,255,0.07);
border: 3px solid rgba(255,255,255,0.14); border: 5px solid rgba(255,255,255,0.14);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: box-shadow:
@@ -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%,-50%) 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%,-50%) 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%,-50%) scale(1.08); } 0% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
50% { transform: translate(-50%,-50%) 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%,-50%) scale(1.08); } 100% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
} }
/* ── Install hint banner ── */ /* ── Install hint banner ── */