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

adventskalender/2025/css/main.css aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 14:21:34 +00:00
parent c36245937e
commit 617085efc1
1 changed files with 15 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
adventskalender/2025/css/main.css
View File

@@ -127,16 +127,16 @@
z-index: 5; /* über den Flügeln */ z-index: 5; /* über den Flügeln */
} }
/* === DOPPELTÜR (für 6 und 24) – gleicher Look wie alle Türen, aber zwei Flügel === */ /* === Doppeltüren (6 & 24) – gleiche Optik, goldene Mittelnaht === */
.door.double { .door.double {
/* Basis wie deine anderen Türen */ /* identisch zu normalen Türen */
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* gleicher Hintergrund wie alle anderen + goldene Naht in der Mitte */
background: background:
linear-gradient( linear-gradient(
90deg, 90deg,
@@ -158,51 +158,22 @@
0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent),
inset 0 0 6px rgba(255,255,255,0.18); inset 0 0 6px rgba(255,255,255,0.18);
/* Animation wie bei den anderen */
transition: transition:
transform 0.6s ease, transform 0.6s ease,
box-shadow 0.3s ease, box-shadow 0.3s ease,
background 0.25s ease; background 0.25s ease;
/* damit die Flügel nach außen drehen können */ transform-style: preserve-3d;
transform-origin: center; perspective: 800px;
overflow: visible;
} }
/* Zahl bleibt oben drüber */ /* Zahl bleibt oben sichtbar */
.door.double span { .door.double span {
position: relative; position: relative;
z-index: 5; z-index: 5;
} }
/* zwei Flügel aus demselben Look wie die Tür */ /* Hover – exakt wie bei den anderen Türen */
.door.double::before,
.door.double::after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: inherit;
border-radius: inherit;
backface-visibility: hidden;
transition: transform 0.6s ease;
z-index: 1;
}
/* linker Flügel – Scharnier links */
.door.double::before {
left: 0;
transform-origin: left center;
}
/* rechter Flügel – Scharnier rechts */
.door.double::after {
right: 0;
transform-origin: right center;
}
/* HOVER (geschlossen) – genauso wie bei den anderen, nur mit Naht */
.door.double:hover { .door.double:hover {
transform: scale(1.05); transform: scale(1.05);
background: background:
@@ -222,15 +193,15 @@
inset 0 0 10px rgba(255,255,255,0.25); inset 0 0 10px rgba(255,255,255,0.25);
} }
/* GEÖFFNET: beide Flügel klappen nach außen */ /* Öffnen – mittige Bewegung, leicht nach außen geneigt */
.door.double.open::before { .door.double.open {
transform: rotateY(-115deg); transform-origin: center;
} transform: rotateY(-8deg);
.door.double.open::after { box-shadow:
transform: rotateY(115deg); 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent),
inset 0 0 10px rgba(255,255,255,0.2);
} }
/* Hover auch im offenen Zustand */
.door.double.open:hover { .door.double.open:hover {
transform: scale(1.05); transform: rotateY(-8deg) scale(1.05);
} }