LeoVasanko
c801fdc929
The cube view-transition block moves out of pagerite.css into transition
designs (pagerite/themes/{name}/transition.css), handled like banner
designs: served from disk at /_themes/..., injected by the backend as
#pagerite-transition after the banner sheet, and picked site-wide in the
site settings (Data.transition, default cube; GET/PUT /_api/settings
carry transition + the designs found on disk). The site editor swaps the
sheet in place on change; the dev-mode order fixup knows the new id.
Designs: cube (unchanged), crossfade (all navigations), slide (sideways,
both pages moving together) and reveal (clip-path wipe over the
stationary old page) — the latter two mirrored on history-back and
crossfading within a section like cube.
Also compress the site settings form into a two-column grid: site name +
favicon on one row, theme + transition on the next.
21 lines
611 B
CSS
21 lines
611 B
CSS
/* Crossfade page transition. Injected by the backend as #pagerite-transition
|
|
when the "crossfade" transition is selected in the site settings. The old
|
|
snapshot stays fully opaque underneath while the new one fades in on top —
|
|
never a dip to black. Direction-neutral, so html.nav-back needs no
|
|
mirroring (and same-section html.nav-fade changes nothing). */
|
|
@keyframes nav-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
mix-blend-mode: normal;
|
|
animation: none;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
animation: 200ms ease-in-out nav-fade-in;
|
|
}
|