[OCaml] High Intensity Training Online
feat Animate routine accordions
Add a short fade-and-rise animation when a routine description opens. The existing reduced-motion rule disables the animation for users who request less motion.
lib/web/assets/hito.css
@@ -923,6 +923,19 @@
923
923
color: var(--muted-ink);
924
924
}
925
925
.routine-accordion[open] > summary::after { content: "−"; }
926
Added:
.routine-accordion[open] > .routine-description {
927
Added:
animation: routine-description-open 180ms ease both;
928
Added:
}
929
Added:
@keyframes routine-description-open {
930
Added:
from {
931
Added:
opacity: 0;
932
Added:
transform: translateY(-0.35rem);
933
Added:
}
934
Added:
to {
935
Added:
opacity: 1;
936
Added:
transform: translateY(0);
937
Added:
}
938
Added:
}
926
939
.routine-description {
927
940
padding: 0 1rem 0.8rem;
928
941
border-top: 1px solid var(--rule);