From 7621e5fbcc0c329d7dd65acfd54a799ad8f9127c Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 16:25:59 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 57 +++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 0a70c1e..3378c20 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -236,37 +236,58 @@ .fluegel { position: absolute; top: 0; - width: 50%; height: 100%; + width: 50%; + border-radius: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), color-mix(in srgb, var(--ci-blue) 35%, transparent) ); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 2px solid var(--ci-gold); box-shadow: - inset 0 0 6px rgba(255,255,255,0.18), - 0 0 8px rgba(0,0,0,0.3); - transition: transform 0.8s ease; + 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), + inset 0 0 6px rgba(255,255,255,0.18); + transition: + transform 0.8s ease, + box-shadow 0.3s ease, + background 0.25s ease; transform-style: preserve-3d; backface-visibility: hidden; - border-radius: 0; + cursor: pointer; + z-index: 2; } -.fluegel.left { - left: 0; - transform-origin: left center; +.fluegel.left { left: 0; transform-origin: left center; } +.fluegel.right { right: 0; transform-origin: right center; } + +.fluegel.open.left { transform: rotateY(-115deg); } +.fluegel.open.right { transform: rotateY(115deg); } + +.fluegel:hover { + transform: scale(1.05) rotateY(var(--fluegel, 0)); + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--ci-gold) 20%, var(--ci-darkgreen)), + color-mix(in srgb, var(--ci-creamwhite) 15%, var(--ci-blue)) + ); + box-shadow: + 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), + inset 0 0 10px rgba(255,255,255,0.25); } -.fluegel.right { - right: 0; - transform-origin: right center; -} +.fluegel.open.left { --fluegel: -115deg; } +.fluegel.open.right { --fluegel: 115deg; } -.fluegel.open.left { - transform: rotateY(-115deg); -} - -.fluegel.open.right { - transform: rotateY(115deg); +.door.double { + position: absolute; + display: flex; + align-items: stretch; + justify-content: space-between; + perspective: 800px; + border-radius: 12px; + overflow: visible; } \ No newline at end of file