DemonGatanjieuandClaude Opus 5.5
6a61682d2a
Opening, closing and changing pages jumped; now they take a short transition. Styles alone do it, since a dozen modules open the window: anything leaving display: none starts its animation. The rail's highlight is one piece that slides between the entries. Going between docked, floating and full window lays the page out once and moves only its picture, where the docked rule used to animate the width and lay it out on every frame. Only opacity and position move, and all of it stays off under reduced motion. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
1.8 KiB
CSS
68 lines
1.8 KiB
CSS
/* How the window and its pages come and go. Only opacity and position move, so no frame lays the page
|
|
out again. No script needed: anything going from display: none starts its animation, whichever way it
|
|
was opened. ui_shell_frame.js moves the window between its modes; ui_shell_rail.js the rail's marker. */
|
|
|
|
#anomalous-modal {
|
|
opacity: 0;
|
|
transition: opacity var(--amb-motion-exit) ease-out, display var(--amb-motion-exit) allow-discrete;
|
|
}
|
|
|
|
#anomalous-modal.visible {
|
|
opacity: 1;
|
|
transition-duration: var(--amb-motion-enter);
|
|
}
|
|
|
|
@starting-style {
|
|
#anomalous-modal.visible { opacity: 0; }
|
|
}
|
|
|
|
#anomalous-container {
|
|
--amb-window-move: 0 0;
|
|
--amb-window-scale: 0.985;
|
|
animation: anomalous-window-in var(--amb-motion-enter) var(--amb-ease-out);
|
|
transition: scale var(--amb-motion-exit) ease-out, translate var(--amb-motion-exit) ease-out;
|
|
}
|
|
|
|
#anomalous-container.anomalous-docked {
|
|
--amb-window-move: -24px 0;
|
|
--amb-window-scale: 1;
|
|
}
|
|
|
|
#anomalous-modal:not(.visible) #anomalous-container {
|
|
scale: var(--amb-window-scale);
|
|
translate: var(--amb-window-move);
|
|
pointer-events: none; /* clicks reach the canvas while it fades */
|
|
}
|
|
|
|
@keyframes anomalous-window-in {
|
|
from {
|
|
scale: var(--amb-window-scale);
|
|
translate: var(--amb-window-move);
|
|
}
|
|
}
|
|
|
|
#anomalous-content > :not(#anomalous-header),
|
|
.anomalous-nb-modal {
|
|
animation: anomalous-page-in var(--amb-motion-enter) var(--amb-ease-out);
|
|
}
|
|
|
|
@keyframes anomalous-page-in {
|
|
from {
|
|
opacity: 0;
|
|
translate: 0 6px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#anomalous-modal,
|
|
#anomalous-container {
|
|
transition: none;
|
|
}
|
|
|
|
#anomalous-container,
|
|
#anomalous-content > :not(#anomalous-header),
|
|
.anomalous-nb-modal {
|
|
animation: none;
|
|
}
|
|
}
|