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.
53 lines
1.3 KiB
CSS
53 lines
1.3 KiB
CSS
/* Wipe-reveal page transition: the old page stays put while the new one is
|
|
revealed on top of it by a clip-path wipe sweeping left to right.
|
|
Injected by the backend as #pagerite-transition when the "reveal"
|
|
transition is selected in the site settings. Mirrored on history-back
|
|
(html.nav-back: the wipe sweeps right to left); same-section navigation
|
|
crossfades (html.nav-fade). */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
mix-blend-mode: normal;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes reveal-right {
|
|
from {
|
|
clip-path: inset(0 100% 0 0);
|
|
}
|
|
to {
|
|
clip-path: inset(0);
|
|
}
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
clip-path: inset(0);
|
|
animation: 350ms ease-in-out reveal-right;
|
|
}
|
|
|
|
/* Reverse direction for browser back navigation. */
|
|
@keyframes reveal-left {
|
|
from {
|
|
clip-path: inset(0 0 0 100%);
|
|
}
|
|
to {
|
|
clip-path: inset(0);
|
|
}
|
|
}
|
|
|
|
html.nav-back::view-transition-new(root) {
|
|
animation-name: reveal-left;
|
|
}
|
|
|
|
/* Same-section navigation: a plain crossfade instead of the wipe. The old
|
|
snapshot stays fully opaque underneath while the new one fades in on
|
|
top — never a dip to black. */
|
|
@keyframes nav-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
html.nav-fade::view-transition-new(root) {
|
|
animation: 200ms ease-in-out nav-fade-in;
|
|
}
|