rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Offline-Pfote sichtbar by-default, JS versteckt nur, SW by-v1082

Browse source 
Logik umgedreht: Default ist 'sichtbar', JS setzt .is-hidden nur wenn
explizit nicht in Welten. So robust gegen Sibling-Selektor-Probleme
oder CSS-Compositing-Eigenheiten auf iOS PWA.

Außerdem: Hintergrund prominenter (rgba 0.95 statt 0.85), echter
Border statt Glas-Filter, stärkerer Schatten — bei den vorigen
Versuchen war die Pfote vermutlich auch durch Transparenz schwer zu
erkennen auf grauem Hintergrund.
This commit is contained in:
rene 2026-05-26 14:43:56 +02:00
parent eb0f460304
commit 53c80b9bf6
6 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

16
backend/static/css/components.css
View file

@ -8872,28 +8872,24 @@ svg.empty-state-icon {
5 Pfade — Score 0 (grau) bis 5 (grün, gefüllt)
============================================================ */
#offline-indicator {
display: none; /* Default: aus */
display: flex; /* Default: sichtbar — JS blendet auf Detail-Seiten aus */
position: fixed;
right: 20px; /* gleicher right wie #worlds-fab */
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px + 54px + 12px); /* FAB-Bottom + FAB-Höhe + 12px */
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
background: rgba(255,255,255,0.95);
border: 2px solid var(--c-border);
box-shadow: 0 2px 10px rgba(0,0,0,0.18);
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 61; /* knapp über dem FAB (60), unter Modals */
transition: transform 0.12s, box-shadow 0.12s;
transition: transform 0.12s, opacity 0.2s;
}
/* Welten aktiv → Indikator sichtbar (CSS-Sibling + JS-Klasse als Fallback) */
#worlds-overlay.worlds-visible ~ #offline-indicator,
#offline-indicator.visible { display: flex; }
#offline-indicator.is-hidden { display: none; } /* JS-gesteuert: in Detail-Seiten */
[data-theme="dark"] #offline-indicator {
background: rgba(31,41,55,0.85);