80 lines
1.7 KiB
CSS
80 lines
1.7 KiB
CSS
.app-route-transition,
|
|
.admin-page-transition {
|
|
min-height: 100%;
|
|
animation: page-soft-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
will-change: transform, opacity, filter;
|
|
background: transparent;
|
|
}
|
|
|
|
.admin-page-transition {
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.route-loading {
|
|
min-height: 280px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,244,238,0.78));
|
|
}
|
|
|
|
.route-loading span {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
border: 3px solid rgba(194, 105, 58, 0.2);
|
|
border-top-color: #C2693A;
|
|
animation: route-loading-spin 760ms linear infinite;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 220ms;
|
|
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
animation-name: view-soft-out;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
animation-name: view-soft-in;
|
|
}
|
|
|
|
@keyframes page-soft-enter {
|
|
from {
|
|
opacity: 0.94;
|
|
transform: translate3d(18px, 0, 0) scale(0.998);
|
|
filter: blur(0.2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
@keyframes view-soft-out {
|
|
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
to { opacity: 0.96; transform: translate3d(-8px, 0, 0); }
|
|
}
|
|
|
|
@keyframes view-soft-in {
|
|
from { opacity: 0.96; transform: translate3d(10px, 0, 0); }
|
|
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
@keyframes route-loading-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.app-route-transition,
|
|
.admin-page-transition,
|
|
.route-loading span,
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
}
|
|
}
|