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.
75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
/* Horizontal slide page transition: the old page slides left while the new
|
|
one follows from the right, both moving together like pages side by side.
|
|
Injected by the backend as #pagerite-transition when the "slide"
|
|
transition is selected in the site settings. Mirrored on history-back
|
|
(html.nav-back); same-section navigation crossfades (html.nav-fade). Both
|
|
snapshots cover the viewport throughout, so no background shows between
|
|
them. */
|
|
::view-transition {
|
|
background: var(--bg);
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
mix-blend-mode: normal;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes slide-out-left {
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
animation: 300ms ease-in-out forwards slide-out-left;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
animation: 300ms ease-in-out slide-in-right;
|
|
}
|
|
|
|
/* Reverse direction for browser back navigation. */
|
|
@keyframes slide-out-right {
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
html.nav-back::view-transition-old(root) {
|
|
animation-name: slide-out-right;
|
|
}
|
|
|
|
html.nav-back::view-transition-new(root) {
|
|
animation-name: slide-in-left;
|
|
}
|
|
|
|
/* Same-section navigation: a plain crossfade instead of the slide. 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-old(root) {
|
|
animation: none;
|
|
}
|
|
|
|
html.nav-fade::view-transition-new(root) {
|
|
animation: 200ms ease-in-out nav-fade-in;
|
|
}
|