diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css index 4cc59a3..00c1738 100644 --- a/adventskalender/shared/css/popup.css +++ b/adventskalender/shared/css/popup.css @@ -26,6 +26,7 @@ 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); @@ -160,9 +161,19 @@ 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: left; + float: none; width: clamp(200px, 40%, 330px); margin: 0 1.5rem 1.2rem 0; border-radius: 10px; @@ -210,4 +221,34 @@ @keyframes popIn { 0% { transform: scale(.9); opacity:0; } 100%{ transform:scale(1); opacity:1; } -} \ No newline at end of file +} + +/* ============================= + CLOSE-BUTTON (oben rechts) + ============================= */ +#popup-close { + position: absolute; + top: 12px; + right: 12px; + + width: 32px; + height: 32px; + + border: none; + background: color-mix(in srgb, var(--ci-gold) 15%, #fff9e6); + border: 2px solid var(--ci-gold); + border-radius: 50%; + + font-size: 20px; + font-weight: bold; + line-height: 28px; + color: var(--ci-darkgreen); + cursor: pointer; + + box-shadow: 0 0 8px rgba(0,0,0,0.2); +} + +#popup-close:hover { + background: color-mix(in srgb, var(--ci-gold) 25%, #fff2cc); +} +