b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
167 lines
4 KiB
CSS
Executable file
167 lines
4 KiB
CSS
Executable file
.fade-in {
|
|
animation: fade-in 0.2s forwards;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out 0.2s forwards;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-deeper-out {
|
|
animation: current-to-left var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .app-go-deeper-out {
|
|
animation: current-to-right var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-deeper-in {
|
|
animation: right-to-current var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .app-go-deeper-in {
|
|
animation: left-to-current var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-deeper-back-in {
|
|
animation: left-to-current var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .app-go-deeper-back-in {
|
|
animation: right-to-current var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-deeper-back-out {
|
|
animation: current-to-right var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .app-go-deeper-back-out {
|
|
animation: current-to-left var(--transition-duration) forwards;
|
|
}
|
|
|
|
@keyframes show {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes hide {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes right-to-current {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes current-to-left {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
|
|
@keyframes current-to-right {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes left-to-current {
|
|
/* To pre-render the incoming screen and avoid a flick we are getting if
|
|
setting it to 100%. */
|
|
0% { transform: translateX(-99.99%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes header-current-to-left {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-30%); }
|
|
}
|
|
|
|
@keyframes header-left-to-current {
|
|
0% { transform: translateX(-30%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.app-go-up-in {
|
|
animation: app-go-up-in var(--transition-duration) forwards ease-in;
|
|
}
|
|
|
|
.app-go-up-back-out {
|
|
animation: app-go-up-back-out var(--transition-duration) forwards ease-in;
|
|
}
|
|
|
|
@keyframes app-go-up-in {
|
|
0% { transform: translateY(100%); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes app-go-up-back-out {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(100%); }
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-in {
|
|
animation: right-to-current var(--transition-duration) forwards ease-in;
|
|
}
|
|
html[dir="rtl"] .app-go-in {
|
|
animation: left-to-current var(--transition-duration) forwards ease-in;
|
|
}
|
|
|
|
html[dir="ltr"] .app-go-back-out {
|
|
animation: current-to-right var(--transition-duration) forwards ease-in;
|
|
}
|
|
html[dir="rtl"] .app-go-back-out {
|
|
animation: current-to-left var(--transition-duration) forwards ease-in;
|
|
}
|
|
|
|
html[dir="ltr"] .move-in-from-forward {
|
|
animation: move-left-in var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .move-in-from-forward {
|
|
animation: move-right-in var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .move-out-from-forward {
|
|
animation: move-left-out var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .move-out-from-forward {
|
|
animation: move-right-out var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .move-in-from-backward {
|
|
animation: move-right-in var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .move-in-from-backward {
|
|
animation: move-left-in var(--transition-duration) forwards;
|
|
}
|
|
|
|
html[dir="ltr"] .move-out-from-backward {
|
|
animation: move-right-out var(--transition-duration) forwards;
|
|
}
|
|
html[dir="rtl"] .move-out-from-backward {
|
|
animation: move-left-out var(--transition-duration) forwards;
|
|
}
|
|
|
|
@keyframes move-left-in {
|
|
0% { transform: translateX(100%);}
|
|
100% { transform: translateX(0);}
|
|
}
|
|
|
|
@keyframes move-left-out {
|
|
0% { transform: translateX(0);}
|
|
100% { transform: translateX(-100%);}
|
|
}
|
|
|
|
@keyframes move-right-in {
|
|
0% { transform: translateX(-100%);}
|
|
100% { transform: translateX(0%);}
|
|
}
|
|
|
|
@keyframes move-right-out {
|
|
0% { transform: translateX(0%);}
|
|
100% { transform: translateX(100%);}
|
|
}
|