feat: tune visual of install instructions page
This commit is contained in:
@@ -2013,6 +2013,43 @@ a {
|
||||
animation: toast-enter 0.22s ease-out both;
|
||||
}
|
||||
|
||||
.motion-height-stage {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.motion-height-stage.motion-height-locked {
|
||||
overflow: hidden;
|
||||
transition: height var(--motion-stage-duration, 360ms) cubic-bezier(0.22, 0.72, 0.2, 1);
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
.motion-height-stage.motion-height-instant {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.motion-enter-card {
|
||||
animation: motion-card-enter var(--motion-enter-duration, 340ms) cubic-bezier(0.22, 0.72, 0.2, 1)
|
||||
backwards;
|
||||
animation-delay: var(--motion-delay, 0ms);
|
||||
transform-origin: var(--motion-origin, center top);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.motion-fade-up {
|
||||
animation: motion-fade-up var(--motion-enter-duration, 160ms) ease-out both;
|
||||
}
|
||||
|
||||
.motion-scale-in {
|
||||
animation: motion-scale-in var(--motion-enter-duration, 240ms) cubic-bezier(0.22, 0.72, 0.2, 1)
|
||||
both;
|
||||
}
|
||||
|
||||
.motion-shimmer {
|
||||
animation: motion-shimmer var(--motion-shimmer-duration, 1.15s) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes section-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -2037,6 +2074,56 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes motion-card-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 12px, 0) scale(0.985);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes motion-fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes motion-scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.975);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes motion-shimmer {
|
||||
0% {
|
||||
background-position: 120% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -120% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toast-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -2234,11 +2321,16 @@ a {
|
||||
.dialog-backdrop,
|
||||
.dialog-card,
|
||||
.auth-mode-panel,
|
||||
.motion-enter-card,
|
||||
.motion-fade-up,
|
||||
.motion-scale-in,
|
||||
.motion-shimmer,
|
||||
.toast {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
.auth-card,
|
||||
.motion-height-stage.motion-height-locked {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user