wehub-resource-sync
126 lines
2.0 KiB
CSS
126 lines
2.0 KiB
CSS
/* --- Animations --- */
|
|
@layer animations {
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px) scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes toast-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
}
|
|
|
|
@keyframes skeleton-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Refresh button spin */
|
|
#refresh-btn.refreshing .icon {
|
|
animation: spin 0.6s ease-in-out;
|
|
}
|
|
|
|
/* Staggered file card entrance */
|
|
.file-card {
|
|
animation: fade-in var(--duration-normal) var(--ease-out) both;
|
|
|
|
&:nth-child(1) {
|
|
animation-delay: 0ms;
|
|
}
|
|
&:nth-child(2) {
|
|
animation-delay: 20ms;
|
|
}
|
|
&:nth-child(3) {
|
|
animation-delay: 40ms;
|
|
}
|
|
&:nth-child(4) {
|
|
animation-delay: 60ms;
|
|
}
|
|
&:nth-child(5) {
|
|
animation-delay: 80ms;
|
|
}
|
|
&:nth-child(6) {
|
|
animation-delay: 100ms;
|
|
}
|
|
&:nth-child(7) {
|
|
animation-delay: 120ms;
|
|
}
|
|
&:nth-child(8) {
|
|
animation-delay: 140ms;
|
|
}
|
|
&:nth-child(9) {
|
|
animation-delay: 160ms;
|
|
}
|
|
&:nth-child(10) {
|
|
animation-delay: 180ms;
|
|
}
|
|
&:nth-child(11) {
|
|
animation-delay: 200ms;
|
|
}
|
|
&:nth-child(12) {
|
|
animation-delay: 220ms;
|
|
}
|
|
}
|
|
|
|
/* View Transition customization */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: var(--duration-normal);
|
|
}
|
|
}
|