[OCaml] High Intensity Training Online
style Animate the workout accordion
Ease the slot panels open and shut. Where the browser can interpolate to an intrinsic size (interpolate-size with ::details-content), the height transitions both ways, so the slot leaving the exclusive group folds up as the chosen one unfolds. Elsewhere the height snaps and the panel still fades and settles into place on open, matching the routine accordion. Reduced motion disables both.
lib/web/assets/hito.css
@@ -656,6 +656,42 @@
656
656
}
657
657
.slot-accordion[data-done="true"] > summary { border-left: 4px solid var(--brass); }
658
658
659
Added:
/* Unfold and collapse. Where the browser can interpolate to an intrinsic size
660
Added:
(interpolate-size + ::details-content), the panel's height eases open and
661
Added:
shut, so the slot leaving the group folds up as the chosen one unfolds.
662
Added:
Elsewhere the height snaps and the panel still fades and settles into place
663
Added:
on open. Reduced motion disables both. */
664
Added:
.slot-accordion {
665
Added:
interpolate-size: allow-keywords;
666
Added:
}
667
Added:
.slot-accordion::details-content {
668
Added:
block-size: 0;
669
Added:
overflow: clip;
670
Added:
transition:
671
Added:
block-size 220ms ease,
672
Added:
content-visibility 220ms allow-discrete;
673
Added:
}
674
Added:
.slot-accordion[open]::details-content {
675
Added:
block-size: auto;
676
Added:
}
677
Added:
.slot-accordion[open] > .slot-panel {
678
Added:
animation: slot-panel-open 220ms ease both;
679
Added:
}
680
Added:
@keyframes slot-panel-open {
681
Added:
from {
682
Added:
opacity: 0;
683
Added:
transform: translateY(-0.35rem);
684
Added:
}
685
Added:
to {
686
Added:
opacity: 1;
687
Added:
transform: none;
688
Added:
}
689
Added:
}
690
Added:
@media (prefers-reduced-motion: reduce) {
691
Added:
.slot-accordion::details-content { transition: none; }
692
Added:
.slot-accordion[open] > .slot-panel { animation: none; }
693
Added:
}
694
Added:
659
695
/* The sticky workout timer bar. It pins to the top of the scroll area while a
660
696
workout is being logged and shows the elapsed time. The client ticks the
661
697
value from the workout's start time; server-rendered markup shows a static