mirror of
https://github.com/Ocelot-Social-Community/ocelot.social.git
synced 2026-04-06 01:25:18 +00:00
Merge branch 'master' into make-test-live-demo-componente
This commit is contained in:
GitHub
commit
de123a872f
@ -148,11 +148,15 @@ const connectorStyle = (index) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Color tokens */
|
||||
.roadmap {
|
||||
margin: 1.5rem 0;
|
||||
--c-done: #eab308;
|
||||
--c-progress: #6366f1;
|
||||
--c-planned: #059669;
|
||||
}
|
||||
|
||||
/* === Legende === */
|
||||
/* === Legend === */
|
||||
.roadmap-legend {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
@ -175,122 +179,31 @@ const connectorStyle = (index) => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.roadmap-legend-dot--done {
|
||||
background: #eab308;
|
||||
}
|
||||
|
||||
.roadmap-legend-dot--in-progress {
|
||||
background: #6366f1;
|
||||
}
|
||||
|
||||
.roadmap-legend-dot--planned {
|
||||
background: #059669;
|
||||
}
|
||||
.roadmap-legend-dot--done { background: var(--c-done); }
|
||||
.roadmap-legend-dot--in-progress { background: var(--c-progress); }
|
||||
.roadmap-legend-dot--planned { background: var(--c-planned); }
|
||||
|
||||
/* === Timeline === */
|
||||
.roadmap-timeline {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* === Drei Punkte: vorherige Umsetzungen === */
|
||||
.roadmap-past {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-left: -12px;
|
||||
padding-left: 12px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.roadmap-past-dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.roadmap-past-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #eab308;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.roadmap-past-dot:nth-child(2) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.roadmap-past-dot:nth-child(3) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.roadmap-past-label {
|
||||
font-size: 0.85em;
|
||||
color: var(--vp-c-text);
|
||||
opacity: 0.6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === Klickbare Dots === */
|
||||
.roadmap-expandable {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.roadmap-expandable:hover {
|
||||
background-color: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
|
||||
.roadmap-past.roadmap-expandable:hover {
|
||||
background-color: rgba(234, 179, 8, 0.1);
|
||||
}
|
||||
|
||||
.roadmap-future.roadmap-expandable:hover {
|
||||
background-color: rgba(5, 150, 105, 0.1);
|
||||
}
|
||||
|
||||
.roadmap-expandable:hover .roadmap-past-label,
|
||||
.roadmap-expandable:hover .roadmap-future-label {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.roadmap-expandable:hover .roadmap-past-dot,
|
||||
.roadmap-expandable:hover .roadmap-future-dot {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Verbindungslinie von den Punkten zum ersten Eintrag */
|
||||
.roadmap-past::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
transform: translateX(-50%);
|
||||
bottom: -28px;
|
||||
height: 48px;
|
||||
width: 3px;
|
||||
background: #eab308;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* === Drei Punkte am Ende: weitere geplante Features === */
|
||||
/* === Past & Future expandable rows === */
|
||||
.roadmap-past,
|
||||
.roadmap-future {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-left: -12px;
|
||||
padding-left: 12px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 12px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.roadmap-past { padding-top: 12px; padding-bottom: 20px; }
|
||||
.roadmap-future { padding-top: 20px; padding-bottom: 12px; }
|
||||
|
||||
.roadmap-past-dots,
|
||||
.roadmap-future-dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -299,22 +212,22 @@ const connectorStyle = (index) => {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.roadmap-past-dot,
|
||||
.roadmap-future-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #059669;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.roadmap-future-dot:nth-child(2) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.roadmap-past-dot { background: var(--c-done); opacity: 0.5; }
|
||||
.roadmap-past-dot:nth-child(2) { opacity: 0.7; }
|
||||
.roadmap-past-dot:nth-child(3) { opacity: 0.9; }
|
||||
|
||||
.roadmap-future-dot:nth-child(3) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.roadmap-future-dot { background: var(--c-planned); opacity: 0.9; }
|
||||
.roadmap-future-dot:nth-child(2) { opacity: 0.7; }
|
||||
.roadmap-future-dot:nth-child(3) { opacity: 0.5; }
|
||||
|
||||
.roadmap-past-label,
|
||||
.roadmap-future-label {
|
||||
font-size: 0.85em;
|
||||
color: var(--vp-c-text);
|
||||
@ -322,18 +235,51 @@ const connectorStyle = (index) => {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Connector line from past dots to first entry */
|
||||
.roadmap-past::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
transform: translateX(-50%);
|
||||
bottom: -28px;
|
||||
height: 48px;
|
||||
width: 3px;
|
||||
background: var(--c-done);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* === Expandable hover === */
|
||||
.roadmap-expandable {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.roadmap-expandable:hover { background-color: rgba(128, 128, 128, 0.08); }
|
||||
.roadmap-past.roadmap-expandable:hover { background-color: rgba(234, 179, 8, 0.1); }
|
||||
.roadmap-future.roadmap-expandable:hover { background-color: rgba(5, 150, 105, 0.1); }
|
||||
|
||||
.roadmap-expandable:hover .roadmap-past-label,
|
||||
.roadmap-expandable:hover .roadmap-future-label { opacity: 0.85; }
|
||||
|
||||
.roadmap-expandable:hover .roadmap-past-dot,
|
||||
.roadmap-expandable:hover .roadmap-future-dot { opacity: 1; }
|
||||
|
||||
/* === Station === */
|
||||
.roadmap-station {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
grid-template-rows: auto;
|
||||
column-gap: 20px;
|
||||
min-height: 80px;
|
||||
margin-left: -12px;
|
||||
padding-left: 12px;
|
||||
cursor: default;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
/* === Verbindungslinie === */
|
||||
/* === Connector === */
|
||||
.roadmap-connector {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
@ -364,30 +310,27 @@ const connectorStyle = (index) => {
|
||||
}
|
||||
|
||||
.roadmap-marker--done {
|
||||
background: #eab308;
|
||||
border: 3px solid #eab308;
|
||||
background: var(--c-done);
|
||||
border: 3px solid var(--c-done);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.roadmap-marker--in-progress {
|
||||
background: #6366f1;
|
||||
border: 3px solid #6366f1;
|
||||
background: var(--c-progress);
|
||||
border: 3px solid var(--c-progress);
|
||||
box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.roadmap-marker-svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.roadmap-marker-svg { width: 10px; height: 10px; }
|
||||
|
||||
.roadmap-marker--planned {
|
||||
background: var(--vp-c-bg, #fff);
|
||||
border: 3px solid #059669;
|
||||
border: 3px solid var(--c-planned);
|
||||
}
|
||||
|
||||
/* === Inhalt === */
|
||||
/* === Content === */
|
||||
.roadmap-content {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
@ -416,23 +359,12 @@ strong.roadmap-content-title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.roadmap-content-badge--done {
|
||||
background: #fef9c3;
|
||||
color: #854d0e;
|
||||
}
|
||||
|
||||
.roadmap-content-badge--in-progress {
|
||||
background: #e0e7ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.roadmap-content-badge--planned {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
.roadmap-content-badge--done { background: #fef9c3; color: #854d0e; }
|
||||
.roadmap-content-badge--in-progress { background: #e0e7ff; color: #4338ca; }
|
||||
.roadmap-content-badge--planned { background: #d1fae5; color: #065f46; }
|
||||
|
||||
.roadmap-content-description {
|
||||
margin: 6px 0 0 0;
|
||||
margin: 6px 0 0;
|
||||
font-size: 0.9em;
|
||||
color: var(--vp-c-text);
|
||||
opacity: 0.75;
|
||||
@ -446,75 +378,24 @@ strong.roadmap-content-title {
|
||||
font-size: 0.82em;
|
||||
}
|
||||
|
||||
.roadmap-content-issues a {
|
||||
color: var(--vp-c-accent-bg);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.roadmap-content-issues a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* === Hover: Hintergrund über gesamte Zeile + Marker-Puls === */
|
||||
.roadmap-station {
|
||||
cursor: default;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
.roadmap-content-issues a { color: var(--vp-c-accent-bg); text-decoration: none; font-weight: 500; }
|
||||
.roadmap-content-issues a:hover { text-decoration: underline; }
|
||||
|
||||
/* === Hover effects === */
|
||||
.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 { background-color: rgba(234, 179, 8, 0.1); }
|
||||
.roadmap-station--in-progress:hover { background-color: rgba(99, 102, 241, 0.1); }
|
||||
.roadmap-station--planned:hover { background-color: rgba(5, 150, 105, 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
|
||||
========================================== */
|
||||
|
||||
/* Vor der Animation: alles unsichtbar */
|
||||
.roadmap-past {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-past {
|
||||
animation: contentFadeIn 0.4s ease forwards;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.roadmap-future {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-future {
|
||||
animation: contentFadeIn 0.3s ease forwards;
|
||||
animation-delay: calc(0.85s + var(--i, 0) * 0.5s);
|
||||
}
|
||||
.roadmap-station--done:hover .roadmap-marker { box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.35); }
|
||||
.roadmap-station--in-progress:hover .roadmap-marker { box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.35); }
|
||||
.roadmap-station--planned:hover .roadmap-marker { box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.35); }
|
||||
|
||||
/* === Animations: initial state === */
|
||||
.roadmap-station .roadmap-marker,
|
||||
.roadmap-station .roadmap-content {
|
||||
opacity: 0;
|
||||
@ -526,143 +407,45 @@ strong.roadmap-content-title {
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
/* Nach mounted: Animation starten */
|
||||
/* Timing pro Station: Marker poppt auf, Linie zieht, nächster Marker poppt */
|
||||
/* Station i: marker bei 0.3 + i*0.5s, connector bei 0.3 + i*0.5 + 0.15s */
|
||||
/* Normal entrance */
|
||||
.roadmap--animated .roadmap-past {
|
||||
animation: contentFadeIn 0.4s ease 0.1s forwards;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-future {
|
||||
animation: contentFadeIn 0.3s ease calc(0.85s + var(--i, 0) * 0.5s) forwards;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-station .roadmap-marker {
|
||||
animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
|
||||
markerGlow 0.5s ease calc(0.3s + var(--i) * 0.5s) forwards;
|
||||
markerGlow 0.5s ease forwards;
|
||||
animation-delay: calc(0.3s + var(--i) * 0.5s);
|
||||
}
|
||||
|
||||
/* Content fliegt mit dem Marker ein */
|
||||
.roadmap--animated .roadmap-station .roadmap-content {
|
||||
animation: contentFadeIn 0.4s ease forwards;
|
||||
animation-delay: calc(0.3s + var(--i) * 0.5s);
|
||||
}
|
||||
|
||||
/* Linie zieht sich nach unten */
|
||||
.roadmap--animated .roadmap-station .roadmap-connector {
|
||||
animation: lineGrow 0.4s ease forwards;
|
||||
animation-delay: calc(0.45s + var(--i) * 0.5s);
|
||||
}
|
||||
|
||||
@keyframes markerPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes markerGlow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes contentFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px) scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lineGrow {
|
||||
0% {
|
||||
transform: translateX(-50%) scaleY(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nach Einblend-Animation: in-progress pulsiert dauerhaft */
|
||||
.roadmap--animated .roadmap-station--in-progress .roadmap-marker {
|
||||
animation:
|
||||
markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
|
||||
markerGlow 0.5s ease forwards,
|
||||
inProgressPulse 2s ease-in-out 1s infinite;
|
||||
animation-delay:
|
||||
calc(0.3s + var(--i) * 0.5s),
|
||||
calc(0.3s + var(--i) * 0.5s),
|
||||
calc(0.8s + var(--i) * 0.5s);
|
||||
animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
|
||||
markerGlow 0.5s ease forwards,
|
||||
inProgressPulse 2s ease-in-out infinite;
|
||||
animation-delay: calc(0.3s + var(--i) * 0.5s),
|
||||
calc(0.3s + var(--i) * 0.5s),
|
||||
calc(0.8s + var(--i) * 0.5s);
|
||||
}
|
||||
|
||||
@keyframes inProgressPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 9px rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 600px) {
|
||||
.roadmap-station {
|
||||
column-gap: 14px;
|
||||
}
|
||||
|
||||
.roadmap-content {
|
||||
padding: 8px 0 20px 0;
|
||||
}
|
||||
|
||||
strong.roadmap-content-title {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion: keine Animation */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.roadmap-station .roadmap-marker,
|
||||
.roadmap-station .roadmap-content {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.roadmap-station .roadmap-connector {
|
||||
transform: translateX(-50%) scaleY(1);
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-station .roadmap-marker,
|
||||
.roadmap--animated .roadmap-station .roadmap-content,
|
||||
.roadmap--animated .roadmap-station .roadmap-connector {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-station .roadmap-connector {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Expanded: Animation ohne lange Verzögerung === */
|
||||
/* Expanded entrance (fast stagger) */
|
||||
.roadmap--expanded.roadmap--animated .roadmap-station .roadmap-marker {
|
||||
animation: markerPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
|
||||
markerGlow 0.7s ease forwards;
|
||||
animation-delay: calc(var(--i) * 0.04s), calc(var(--i) * 0.04s);
|
||||
animation-delay: calc(var(--i) * 0.04s);
|
||||
}
|
||||
|
||||
.roadmap--expanded.roadmap--animated .roadmap-station .roadmap-content {
|
||||
@ -678,12 +461,74 @@ strong.roadmap-content-title {
|
||||
.roadmap--expanded.roadmap--animated .roadmap-station--in-progress .roadmap-marker {
|
||||
animation: markerPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
|
||||
markerGlow 0.7s ease forwards,
|
||||
inProgressPulse 2s ease-in-out 0.7s infinite;
|
||||
animation-delay: calc(var(--i) * 0.04s), calc(var(--i) * 0.04s), calc(var(--i) * 0.04s + 0.6s);
|
||||
inProgressPulse 2s ease-in-out infinite;
|
||||
animation-delay: calc(var(--i) * 0.04s),
|
||||
calc(var(--i) * 0.04s),
|
||||
calc(var(--i) * 0.04s + 0.6s);
|
||||
}
|
||||
|
||||
.roadmap--expanded.roadmap--animated .roadmap-future {
|
||||
animation: contentFadeIn 0.6s ease forwards;
|
||||
animation-delay: calc(var(--i, 0) * 0.04s + 0.7s);
|
||||
}
|
||||
|
||||
/* === Keyframes === */
|
||||
@keyframes markerPop {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
60% { opacity: 1; transform: scale(1.3); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes markerGlow {
|
||||
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
|
||||
50% { box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.4); }
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
@keyframes contentFadeIn {
|
||||
0% { opacity: 0; transform: translateX(-10px) scale(0.95); }
|
||||
100% { opacity: 1; transform: translateX(0) scale(1); }
|
||||
}
|
||||
|
||||
@keyframes lineGrow {
|
||||
0% { transform: translateX(-50%) scaleY(0); opacity: 0.5; }
|
||||
100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes inProgressPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); }
|
||||
50% { box-shadow: 0 0 0 9px rgba(99, 102, 241, 0.35); }
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 600px) {
|
||||
.roadmap-station { column-gap: 14px; }
|
||||
.roadmap-content { padding: 8px 0 20px 0; }
|
||||
strong.roadmap-content-title { font-size: 1.05em; }
|
||||
}
|
||||
|
||||
/* === Reduced motion === */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.roadmap-station .roadmap-marker,
|
||||
.roadmap-station .roadmap-content {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.roadmap-station .roadmap-connector {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-station .roadmap-marker,
|
||||
.roadmap--animated .roadmap-station .roadmap-content {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.roadmap--animated .roadmap-station .roadmap-connector {
|
||||
animation: none;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user