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;
height: 88px;
border-radius: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, calc(-50% - 22px));
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: rgba(255,255,255,0.88);
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);
-webkit-backdrop-filter: blur(8px);
box-shadow:
@@ -168,13 +168,13 @@ body::before {
0 0 0 3px rgba(52,211,153,0.28),
0 0 48px rgba(52,211,153,0.35),
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 */
.finger.lost {
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);
}
@@ -182,9 +182,9 @@ body::before {
.pulse { animation: pulse 1400ms ease-in-out infinite; }
@keyframes pulse {
0% { transform: translate(-50%,-50%) 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); }
100% { transform: translate(-50%,-50%) scale(1.08); }
0% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
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% - 22px)) scale(1.08); }
}
/* ── Install hint banner ── */