From 039e1d7bf592e64aee9cf51cc0e962dcf6f4f4d6 Mon Sep 17 00:00:00 2001 From: Victor Giers Date: Wed, 28 May 2025 20:05:15 +0200 Subject: [PATCH] Refactor CSS for spirit info modal --- node/server/public/index.html | 57 +++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/node/server/public/index.html b/node/server/public/index.html index 397f904..41e50be 100644 --- a/node/server/public/index.html +++ b/node/server/public/index.html @@ -47,7 +47,35 @@ canvas { overflow-wrap: normal; } -/* === Standard: Mobile/klein - Bild oben, Text unten === */ +.spirit-info-flex { + display: flex; + flex-direction: column; + gap: 18px; +} +#spirit-info { + box-sizing: border-box; + position: fixed; + overflow-x: hidden; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: rgba(0,0,0,0.94); + color: #fff; + border-radius: 18px; + font-family: 'Segoe UI', sans-serif; + box-shadow: 0 12px 64px #000a; + width: 90vw; + max-width: 98vw; + min-width: 0; + height: auto; + max-height: 82dvh; + overflow-y: auto; + padding: 8vw 4vw 4vw 4vw; + z-index: 9999; + margin: 0; +} + +/* Standard: Bild oben, Text unten */ .spirit-info-flex { display: flex; flex-direction: column; @@ -71,8 +99,15 @@ canvas { word-break: break-word; } -/* === Breiter Desktop ODER Mobile Landscape: Bild links, Text rechts === */ +/* GROSSES DESKTOP-FENSTER ODER BREITES TABLET/PHONE landscape: Bild links, Text rechts */ @media (min-width: 750px) and (pointer: fine), (pointer: coarse) and (orientation: landscape) and (min-width: 750px) { + #spirit-info { + width: 600px; + max-width: calc(100vw - 64px); + min-width: 320px; + max-height: calc(100dvh - 64px); + padding: 40px 40px 36px 40px; + } .spirit-info-flex { flex-direction: row; align-items: flex-start; @@ -99,24 +134,6 @@ canvas { word-break: break-word; } } - -/* #spirit-info: Größe Desktop vs. Mobile */ -#spirit-info { - width: 90vw; - max-width: 98vw; - min-width: 0; - max-height: 82dvh; - padding: 8vw 4vw 4vw 4vw; -} -@media (min-width: 750px) and (pointer: fine) { - #spirit-info { - width: 600px; - max-width: calc(100vw - 64px); - min-width: 320px; - max-height: calc(100dvh - 64px); - padding: 40px 40px 36px 40px; - } -}