Add ambient drift animation to app backdrop; adjust inset and handle reduced motion
This commit is contained in:
@@ -169,10 +169,16 @@
|
|||||||
@utility app-backdrop {
|
@utility app-backdrop {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: -10%;
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
background-color: var(--mf-bg);
|
background-color: var(--mf-bg);
|
||||||
background-image: var(--mf-ambient);
|
background-image: var(--mf-ambient);
|
||||||
|
animation: ambient-drift 48s ease-in-out infinite alternate;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@utility app-vignette {
|
@utility app-vignette {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -307,6 +313,18 @@ button:disabled {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes ambient-drift {
|
||||||
|
0% {
|
||||||
|
transform: translate3d(-3%, -2%, 0) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate3d(2%, 3%, 0) scale(1.06);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate3d(3%, -1%, 0) scale(1.02);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes sheen {
|
@keyframes sheen {
|
||||||
from {
|
from {
|
||||||
background-position: 200% 0;
|
background-position: 200% 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user