From 206cfb8a9a314818e17831e9555a10e604a41acf Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 21:16:19 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 98 ++++++++++++------------------- 1 file changed, 39 insertions(+), 59 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 02ffef5..aa8a2ba 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -136,6 +136,40 @@ inset 0 0 10px rgba(255,255,255,0.2); } +.fluegel.rota.left:hover, +.fluegel.rota.hover-proxy.left { + transform: rotateY(115deg) scale(1.05); + 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.rota.right:hover, +.fluegel.rota.hover-proxy.right { + transform: rotateY(-115deg) scale(1.05); + box-shadow: + 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), + inset 0 0 10px rgba(255,255,255,0.25); +} + +/* === Openfield === */ + +.openfield { + position: absolute; + display: block; + border-radius: 12px; + opacity: 0; + pointer-events: none; + cursor: pointer; + z-index: 1; + transition: + opacity 0.3s ease, + transform 0.25s ease, + box-shadow 0.25s ease, + background 0.4s ease; +} + +.door.open + .openfield, .fluegel.rota.left + .fluegel.rota.right + .openfield, .fluegel.rota.right + .fluegel.rota.left + .openfield { opacity: 1; @@ -161,65 +195,9 @@ transform: translateZ(-1px); } - -/* Hover bei geöffneten Flügeln */ -.fluegel.rota.left:hover, -.fluegel.rota.right:hover, -.fluegel.rota.left.hover-proxy, -.fluegel.rota.right.hover-proxy { - transform: rotateY(var(--door-rotation)) scale(1.05); - 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); -} - -/* === Openfield === */ - -.openfield { - position: absolute; - display: block; - border-radius: 12px; - opacity: 0; - pointer-events: none; - cursor: pointer; - z-index: 1; - transition: - opacity 0.3s ease, - transform 0.25s ease, - box-shadow 0.25s ease, - background 0.4s ease; -} - -.door.open + .openfield { - opacity: 1; - pointer-events: auto; - z-index: 6; - background: - linear-gradient( - 130deg, - rgba(255, 255, 255, 0.35) 0%, - rgba(255, 255, 255, 0.15) 30%, - rgba(255, 255, 255, 0.05) 55%, - rgba(0, 0, 0, 0.25) 100% - ), - rgba(0, 0, 0, 0.12); - backdrop-filter: blur(2px) brightness(1.08); - -webkit-backdrop-filter: blur(2px) brightness(1.08); - border: 2px solid color-mix(in srgb, var(--ci-gold) 85%, transparent); - box-shadow: - inset 0 4px 8px rgba(0, 0, 0, 0.6), - inset 0 -3px 6px rgba(0, 0, 0, 0.5), - 0 0 10px rgba(0, 0, 0, 0.35), - 0 0 14px color-mix(in srgb, var(--ci-gold) 15%, transparent); - transform: translateZ(-1px); -} - .door.open + .openfield:hover, +.fluegel.rota.left + .fluegel.rota.right + .openfield:hover, +.fluegel.rota.right + .fluegel.rota.left + .openfield:hover, .openfield.hover-proxy { transform: scale(1.05); background: @@ -235,7 +213,9 @@ inset 0 0 10px rgba(255, 255, 255, 0.25); } -.door.open:hover + .openfield { +.door.open:hover + .openfield, +.fluegel.rota.left:hover + .fluegel.rota.right + .openfield, +.fluegel.rota.right:hover + .fluegel.rota.left + .openfield { transform: scale(1.05); background: linear-gradient(