diff --git a/App/sims/sonnensystem/game.html b/App/sims/sonnensystem/game.html index 184d437..882b818 100644 --- a/App/sims/sonnensystem/game.html +++ b/App/sims/sonnensystem/game.html @@ -386,6 +386,26 @@ font-weight: 700; pointer-events: none; } + /* Lupe: 3 Stufen (100/50/25 %), Frame verkleinert sich zur oben-rechts-Ecke */ + #inspect-frame { transition: width .2s ease, height .2s ease; } + #inspect-frame.sc-50 { width: 240px; height: 105px; } + #inspect-frame.sc-25 { width: 120px; height: 52px; } + #inspect-frame.austria.sc-50 { width: 140px; height: 140px; } + #inspect-frame.austria.sc-25 { width: 70px; height: 70px; } + /* Eck-Element zum Umschalten der Lupengröße (unten rechts in der Lupe) */ + #inspect-resize { + position: absolute; bottom: 6px; right: 6px; + width: 26px; height: 26px; z-index: 6; + display: inline-flex; align-items: center; justify-content: center; + background: rgba(245, 158, 11, 0.92); color: #1e293b; border: none; border-radius: 7px; + cursor: pointer; pointer-events: auto; + box-shadow: 0 2px 8px rgba(0,0,0,0.45); + } + #inspect-resize svg { width: 16px; height: 16px; } + #inspect-resize:active { transform: scale(0.92); } + /* bei kleinster Stufe etwas kompakter, damit der Griff nicht die Lupe verdeckt */ + #inspect-frame.sc-25 #inspect-resize { width: 20px; height: 20px; bottom: 3px; right: 3px; } + #inspect-frame.sc-25 #inspect-resize svg { width: 12px; height: 12px; } /* ---------- Info-Karte ---------- */ #info-card { position: absolute; @@ -799,7 +819,7 @@