Refactor styles to utilize Tailwind CSS utility classes for improved consistency and maintainability across forms, motion, shell, and vault components. Remove deprecated reduced-motion styles and consolidate motion-related animations. Update color tokens for better contrast and accessibility. Introduce a new Tailwind CSS configuration file.

This commit is contained in:
shuaiplus
2026-04-24 15:14:12 +08:00
parent 033d44808f
commit d40b0514fd
18 changed files with 1490 additions and 943 deletions
+11 -18
View File
@@ -21,77 +21,63 @@
@keyframes fade-in-up {
from {
opacity: 0;
transform: translate3d(0, 16px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes shell-enter {
from {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.992);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes surface-enter {
from {
opacity: 0;
transform: translate3d(0, 20px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes menu-in {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.96);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes dialog-in {
from {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.96);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes toast-in {
from {
opacity: 0;
transform: translate3d(18px, 0, 0) scale(0.97);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes stagger-rise {
from {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@@ -107,21 +93,28 @@
@keyframes dialog-out {
from {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
to {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.972);
}
}
@keyframes route-stage-in {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}