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.
99 lines
2.2 KiB
CSS
99 lines
2.2 KiB
CSS
/* Rotating-cube page transition (from termotohtori.fi). FRAGILE — do not
|
|
tweak. Injected by the backend as #pagerite-transition when the "cube"
|
|
transition is selected in the site settings. pagerite.js toggles
|
|
html.nav-back for history-back navigation and html.nav-fade for
|
|
same-section navigation. */
|
|
::view-transition {
|
|
perspective: 1000px;
|
|
inset: 0;
|
|
background: color-mix(var(--bg) 50%, black 50%);
|
|
}
|
|
|
|
::view-transition-group(root),
|
|
::view-transition-image-pair(root) {
|
|
transform-style: preserve-3d;
|
|
isolation: auto;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
mix-blend-mode: normal;
|
|
backface-visibility: hidden;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes group-rotate {
|
|
to {
|
|
transform: rotateY(-90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out-a-bit {
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-a-bit {
|
|
from {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
::view-transition-group(root) {
|
|
transform-origin: 50% 50% -50vw;
|
|
animation: 300ms ease-in-out forwards group-rotate;
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
animation: 300ms ease-in-out forwards fade-out-a-bit;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
transform-origin: 0 0;
|
|
transform: rotateY(90deg);
|
|
inset: 0 auto 0 100%;
|
|
animation: 300ms ease-in-out forwards fade-in-a-bit;
|
|
}
|
|
|
|
/* Reverse direction for browser back navigation (same geometry, mirrored). */
|
|
@keyframes group-rotate-back {
|
|
to {
|
|
transform: rotateY(90deg);
|
|
}
|
|
}
|
|
|
|
html.nav-back::view-transition-group(root) {
|
|
animation-name: group-rotate-back;
|
|
}
|
|
|
|
html.nav-back::view-transition-new(root) {
|
|
transform-origin: 100% 0;
|
|
transform: rotateY(-90deg);
|
|
inset: 0 100% 0 auto;
|
|
}
|
|
|
|
/* Same-section navigation: a plain crossfade instead of the cube. These
|
|
rules only override animation/geometry, leaving the block above's
|
|
perspective and layering untouched. 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-group(root) {
|
|
animation: none;
|
|
}
|
|
|
|
html.nav-fade::view-transition-old(root) {
|
|
animation: none;
|
|
}
|
|
|
|
html.nav-fade::view-transition-new(root) {
|
|
transform: none;
|
|
inset: 0;
|
|
animation: 200ms ease-in-out nav-fade-in;
|
|
}
|