ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2026-04-04 00:25:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

hover animation

Browse Source
This commit is contained in:
Ulf Gebhardt 2026-03-11 15:25:59 +01:00
parent 236930704a
commit 8115017568
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
1 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/.vuepress/components/RoadmapProgress.vue
View File

@ -275,12 +275,14 @@ const connectorStyle = (index) => {
grid-template-rows: auto;
column-gap: 20px;
min-height: 80px;
margin-left: -12px;
padding-left: 12px;
}
/* === Verbindungslinie === */
.roadmap-connector {
position: absolute;
left: 12px;
left: 24px;
transform: translateX(-50%);
top: 28px;
bottom: -28px;
@ -408,6 +410,42 @@ strong.roadmap-content-title {
text-decoration: underline;
}
/* === Hover: Hintergrund über gesamte Zeile + Marker-Puls === */
.roadmap-station {
cursor: default;
border-radius: 10px;
transition: background-color 0.25s ease;
}
.roadmap-station:hover .roadmap-marker {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: scale(1.25);
}
.roadmap-station--done:hover {
background-color: rgba(234, 179, 8, 0.1);
}
.roadmap-station--done:hover .roadmap-marker {
box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.35);
}
.roadmap-station--in-progress:hover {
background-color: rgba(99, 102, 241, 0.1);
}
.roadmap-station--in-progress:hover .roadmap-marker {
box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.35);
}
.roadmap-station--planned:hover {
background-color: rgba(5, 150, 105, 0.1);
}
.roadmap-station--planned:hover .roadmap-marker {
box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.35);
}
/* ==========================================
Animation: Punkte poppen auf, Linie zieht
========================================== */