Stylesheets (Benutzerdefinierte Stile)

Mit  Stylesheets kannst du eigenes CSS einbinden. Wichtig: Stylesheets sind konstant – einmal geladen, wirken sie im ganzen Spiel (alle Szenen). Plane also global und arbeite bevorzugt mit Klassen , nicht mit generischen Element-Selektoren. 

 

 Grundprinzipien 

 

 

 Global & dauerhaft : Regeln gelten szenenübergreifend, bis du sie änderst oder entfernst. 

 

 

 Mit Klassen arbeiten : Viele Features (z. B. 360°-Hotspot) haben ein Feld „CSS-Klasse“ – dort trägst du Klassen wie hs-primary ein und definierst sie hier im Stylesheet. 

 

 

 Schonend stylen : Keine globalen Resets wie *{ margin:0 } oder button{… } , das kann UI-Elemente der App unerwartet verändern. 

 

 

 Spezifität niedrig halten : Lieber .hs-primary als div .container .hs-primary . So bleibt es wartbar. 

 

 

 

 Beispiele 

 1) Eigene Hotspot-/Button-Stile 

 

 

 

 

 

 

 

 

 /* im Feature als CSS-Klasse: hs-primary */ .hs-primary{ background: #3faace; color:#fff; border:1px solid rgba(0,0,0,.25); border-radius:10px; padding:.5rem .75rem; box-shadow:0 6px 16px rgba(0,0,0,.15); } .hs-primary:hover{ transform:translateY(-1px); } 

 2) Utility-Klassen für Inhalte 

 Nutze sie in Textblöcken, Dialogen, etc. (wo Klassen gesetzt werden können). 

 

 

 

 

 

 

 

 

 .u-shadow { box-shadow:0 8px 24px rgba(0,0,0,.18); } .u-round { border-radius:16px; } .u-muted { opacity:.75 } .u-center { text-align:center } .u-spacious { padding:1rem } 

 3) Farb-Theme per CSS-Variablen 

 

 

 

 

 

 

 

 

 :root{ --brand:#68bfdd; --brand-ink:#fff; } .btn-primary{ background:var(--brand); color:var(--brand-ink); } 

 4) Sanfte Szene-Einstiegsanimation (klasse auf Container setzen) 

 

 

 

 

 

 

 

 

 .scene-fadein{ animation:scnFade .45s ease-out both; } 

@keyframes scnFade{ from{ opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } 

 

 Best Practices 

 

 

 Scoping : Wenn möglich, gib Szenen/Features eigene Klassen und style nur diese ( .quiz-intro .u-muted ). 

 

 

 Kontrast & Lesbarkeit : Farben so wählen, dass AA-Kontrast (≥ 4.5:1) erreicht wird – besonders bei Buttons/Links. 

 

 

 Animationen sparsam : Kurze, dezente Effekte (≤ 500 ms, ease-out ). 

 

 

 Testen auf Geräten : Unterschiedliche Displays, Dark-Mode und Zoomstufen durchprobieren. 

 

 

 Rollback : Wenn etwas „zu global“ wirkt, überschreibe gezielt oder entferne die Regel (Stylesheets wirken sofort in allen Szenen). 

 

 

 

 Mini-Checkliste 

 

 

 Klassen in Features vergeben (z. B. CSS-Klasse im Hotspot-Editor). 

 

 

 Passende Regeln hier definieren (keine globalen Tag-Selektoren). 

 

 

 Responsiv & kontrastreich gestalten. 

 

 

 Auf mehreren Geräten testen. 

 

 

 So bleibt dein Look konsistent – und trotzdem präzise steuerbar pro Feature/Szene.