From 673d54d89f1bac5c4a129ab92546788a63a133d6 Mon Sep 17 00:00:00 2001 From: Bratonien Cosplay Date: Sat, 15 Nov 2025 10:21:12 +0100 Subject: [PATCH] no message --- adventskalender/shared/css/popup.css | 367 +++++++++++++-------------- 1 file changed, 176 insertions(+), 191 deletions(-) diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css index 00c1738..f3dcc9e 100644 --- a/adventskalender/shared/css/popup.css +++ b/adventskalender/shared/css/popup.css @@ -1,8 +1,11 @@ /* ============================================================ - Bratonien Adventskalender – SAUBERE POPUP.CSS + Bratonien Adventskalender – NEUE SAUBERE POPUP.CSS + ============================================================ */ + +/* ============================================================ + OVERLAY ============================================================ */ -/* === Overlay === */ #popup-overlay { position: fixed; inset: 0; @@ -19,213 +22,41 @@ animation: fadeIn 0.3s ease; } -/* === Popup-Box === */ +/* ============================================================ + POPUP-BOX + ============================================================ */ + #popup-box { + position: relative; + width: min(95vw, 1800px); + max-height: 90vh; + background: linear-gradient( 180deg, color-mix(in srgb, var(--ci-creamwhite) 80%, white), color-mix(in srgb, var(--ci-gold) 15%, #fff9e6) ); - position: relative; + border: 2px solid var(--ci-gold); border-radius: 16px; - width: min(95vw, 1800px); - max-height: 90vh; - - overflow-y: auto; - overflow-x: hidden; padding: clamp(1rem, 1.5vw, 2rem); - box-shadow: + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; + + box-shadow: 0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 10px rgba(255,255,255,0.4); animation: popIn .35s ease; - color:#333; - box-sizing:border-box; -} - -/* === Hauptcontainer === */ -#popup-content { - width: 100%; - max-width: 1400px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: clamp(1rem,2vw,2.5rem); + color: #333; } /* ============================================================ - TITELZEILE - ============================================================ */ -.popup-header { - text-align: center; - border-bottom: 2px solid var(--ci-gold); - padding-bottom: .5rem; -} - -.popup-header h2 { - margin: 0; - font-size: clamp(1.6rem, 2.2vw, 2.8rem); - color: var(--ci-darkgreen); -} - -/* ============================================================ - ZWEI SPALTEN – Standardlayout für ALLE Tage + CLOSE BUTTON ============================================================ */ -.popup-body { - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(1rem, 2vw, 2.5rem); -} - -.story { - line-height: 1.6; - max-width: 70ch; -} - -/* Addon rechts */ -.addon { - display: flex; - flex-direction: column; - gap: clamp(1rem, 1.5vw, 2rem); - align-items: flex-start; -} - -.addon img, -.addon video { - width: 100%; - max-width: 700px; - height: auto; - border-radius: 10px; - background:#000; - object-fit: contain; - box-shadow: 0 0 12px rgba(0,0,0,0.25); -} - -/* ============================================================ - MOBILE - ============================================================ */ -@media (max-width: 900px) { - .popup-body { - grid-template-columns: 1fr; - } - .addon { - align-items: center; - } -} - -/* ============================================================ - AUDIOPLAYER (edel-bretonisch) - ============================================================ */ - -.addon-audio { - width: 100%; - max-width: 420px; - background: color-mix(in srgb, var(--ci-creamwhite) 90%, white); - border: 2px solid var(--ci-gold); - padding: .8rem; - border-radius: 12px; - box-shadow: - 0 0 10px color-mix(in srgb, var(--ci-gold) 35%, transparent), - inset 0 0 5px rgba(255,255,255,0.4); -} - -.addon-audio::-webkit-media-controls-panel { - background: color-mix(in srgb, var(--ci-creamwhite) 92%, #fff) !important; -} - -/* ============================================================ - REZEPTTAG – rechte Spalte: "Rezeptbuch" Stil - ============================================================ */ - -.popup-recipe .popup-body { - /* gleiche Grid-Basis, aber mit speziellem Innenlayout */ - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(1rem, 2vw, 2.5rem); -} - -/* rechte Spalte */ -.popup-recipe-content { - position: relative; - width: 100%; -} - -/* Rezepttitel */ -.recipe-title { - font-size: clamp(1.3rem,1.6vw,2rem); - color: var(--ci-darkgreen); - font-weight: 600; - margin-bottom: .8rem; -} - -.popup-recipe-content picture.recipe-image-wrapper { - float: left; - width: clamp(200px, 40%, 330px); - margin: 0 1.5rem 1.2rem 0; - border-radius: 10px; - shape-outside: inset(0 round 10px); - box-shadow: 0 0 10px rgba(0,0,0,0.2); - display: block; -} - -/* Bild floatet INNERHALB der rechten Spalte */ -.popup-recipe-content .recipe-image { - float: none; - width: clamp(200px, 40%, 330px); - margin: 0 1.5rem 1.2rem 0; - border-radius: 10px; - shape-outside: inset(0 round 10px); - box-shadow: 0 0 10px rgba(0,0,0,0.2); -} - -/* h4: Zutaten + Zubereitung */ -.popup-recipe-content h4 { - font-size: clamp(1rem,1.2vw,1.4rem); - margin: 0.8rem 0 .4rem 0; - color: var(--ci-darkgreen); -} - -.popup-recipe-content ul, -.popup-recipe-content ol { - margin-left: 1.2rem; -} - - - -/* --- Mobile: kein float --- */ -@media (max-width:900px) { - .popup-recipe .popup-body { - grid-template-columns: 1fr; - } - .popup-recipe-content .recipe-image { - float: none; - margin: 0 auto 1rem auto; - display: block; - width: 100%; - max-width: 350px; - } -} - -/* ============================================================ - Animationen - ============================================================ */ - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes popIn { - 0% { transform: scale(.9); opacity:0; } - 100%{ transform:scale(1); opacity:1; } -} - -/* ============================= - CLOSE-BUTTON (oben rechts) - ============================= */ #popup-close { position: absolute; top: 12px; @@ -235,9 +66,9 @@ height: 32px; border: none; - background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6); border: 2px solid var(--ci-gold); border-radius: 50%; + background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6); font-size: 20px; font-weight: bold; @@ -252,3 +83,157 @@ background: color-mix(in srgb, var(--ci-gold) 25%, #fff2cc); } +/* ============================================================ + GLOBAL CONTAINER + ============================================================ */ + +#popup-content { + width: 100%; + max-width: 1400px; + margin: 0 auto; + + display: flex; + flex-direction: column; + gap: clamp(1rem, 2vw, 2.5rem); +} + +/* ============================================================ + HEADER + ============================================================ */ + +.popup-header { + text-align: center; + border-bottom: 2px solid var(--ci-gold); + padding-bottom: .5rem; +} + +.popup-header h2 { + margin: 0; + font-size: clamp(1.6rem, 2.2vw, 2.8rem); + color: var(--ci-darkgreen); +} + +/* ============================================================ + STANDARD ZWEI-SPALTEN LAYOUT + ============================================================ */ + +.popup-body { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(1rem, 2vw, 2.5rem); +} + +/* Linke Spalte (Story bleibt unverändert) */ +.story { + line-height: 1.6; + max-width: 70ch; +} + +/* Rechte Spalte: Standard-Content */ +.addon { + display: flex; + flex-direction: column; + gap: clamp(1rem, 1.5vw, 2rem); + align-items: flex-start; +} + +.addon img, +.addon video { + width: 100%; + max-width: 700px; + height: auto; + border-radius: 10px; + object-fit: contain; + background:#000; + box-shadow: 0 0 12px rgba(0,0,0,0.25); +} + +/* ============================================================ + REZEPTTAG – TEXT SOLL BILD UMWERBEN + ============================================================ */ + +.popup-recipe .popup-body { + /* linke Spalte bleibt Grid-Item */ + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(1rem, 2vw, 2.5rem); +} + +/* rechte Spalte verliert Grid -> normaler Blockfluss */ +.popup-recipe .popup-recipe-content { + display: block; + width: 100%; +} + +/* Rezepttitel */ +.recipe-title { + font-size: clamp(1.3rem,1.6vw,2rem); + color: var(--ci-darkgreen); + font-weight: 600; + margin-bottom: .6rem; +} + +/* Bild floaten lassen */ +.popup-recipe-content picture.recipe-image-wrapper { + float: left; + width: clamp(200px, 40%, 330px); + margin: 0 1.5rem 1.2rem 0; + border-radius: 10px; + display: block; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + shape-outside: inset(0 round 10px); +} + +/* inneres Bild: KEIN FLOAT */ +.popup-recipe-content .recipe-image { + display: block; + width: 100%; + height: auto; + border-radius: 10px; +} + +/* Überschriften Zutaten/Zubereitung */ +.popup-recipe-content h4 { + font-size: clamp(1rem, 1.2vw, 1.4rem); + color: var(--ci-darkgreen); + margin: 0.8rem 0 .4rem 0; +} + +.popup-recipe-content ul, +.popup-recipe-content ol { + margin-left: 1.2rem; +} + +/* ============================================================ + MOBILE + ============================================================ */ + +@media (max-width: 900px) { + .popup-body, + .popup-recipe .popup-body { + grid-template-columns: 1fr; + } + + /* Bild zentriert ohne Float */ + .popup-recipe-content picture.recipe-image-wrapper { + float: none; + margin: 0 auto 1rem auto; + width: 100%; + max-width: 360px; + shape-outside: none; + } +} + +/* ============================================================ + ANIMATIONEN + ============================================================ */ + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes popIn { + 0% { transform: scale(.9); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } +} \ No newline at end of file