Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-15 10:10:02 +01:00
parent 04dede84e0
commit 5b3e3c2d00
1 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
adventskalender/shared/css/popup.css
View File

@@ -26,6 +26,7 @@
color-mix(in srgb, var(--ci-creamwhite) 80%, white), color-mix(in srgb, var(--ci-creamwhite) 80%, white),
color-mix(in srgb, var(--ci-gold) 15%, #fff9e6) color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
); );
position: relative;
border: 2px solid var(--ci-gold); border: 2px solid var(--ci-gold);
border-radius: 16px; border-radius: 16px;
width: min(95vw, 1800px); width: min(95vw, 1800px);
@@ -160,9 +161,19 @@
margin-bottom: .8rem; 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 */ /* Bild floatet INNERHALB der rechten Spalte */
.popup-recipe-content .recipe-image { .popup-recipe-content .recipe-image {
float: left; float: none;
width: clamp(200px, 40%, 330px); width: clamp(200px, 40%, 330px);
margin: 0 1.5rem 1.2rem 0; margin: 0 1.5rem 1.2rem 0;
border-radius: 10px; border-radius: 10px;
@@ -210,4 +221,34 @@
@keyframes popIn { @keyframes popIn {
0% { transform: scale(.9); opacity:0; } 0% { transform: scale(.9); opacity:0; }
100%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1); opacity:1; }
} }
/* =============================
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);
}