Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
3.8 KiB
218 lines
3.8 KiB
// * Jolly Cobra's transition |
|
|
|
.transition { |
|
> .transition-item { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
animation-fill-mode: forwards!important; |
|
|
|
&:not(.active):not(.from):not(.to) { |
|
display: none !important; // Best performance when animating container |
|
} |
|
} |
|
|
|
/* |
|
* zoom-fade |
|
*/ |
|
&.zoom-fade { |
|
> .from { |
|
transform-origin: center; |
|
transform: scale(1); |
|
opacity: 1; |
|
} |
|
|
|
> .to { |
|
transform-origin: center; |
|
opacity: 0; |
|
} |
|
|
|
&.animating { |
|
> .from { |
|
animation: fade-out-opacity .15s ease; |
|
} |
|
|
|
> .to { |
|
animation: fade-in-opacity .15s ease, zoom-fade-in-move .15s ease; |
|
} |
|
} |
|
} |
|
|
|
&.zoom-fade.backwards { |
|
> .from { |
|
transform: scale(1); |
|
} |
|
|
|
> .to { |
|
transform: scale(0.95); |
|
} |
|
|
|
&.animating { |
|
> .from { |
|
animation: fade-in-backwards-opacity .1s ease, zoom-fade-in-backwards-move .15s ease; |
|
} |
|
|
|
> .to { |
|
animation: fade-out-backwards-opacity .15s ease, zoom-fade-out-backwards-move .15s ease; |
|
} |
|
} |
|
} |
|
|
|
/* |
|
* slide-fade |
|
*/ |
|
&.slide-fade { |
|
--easeOutSine: cubic-bezier(.39, .575, .565, 1); |
|
--easeInSine: cubic-bezier(.47, 0, .745, .715); |
|
position: relative; |
|
|
|
> .from { |
|
transform-origin: left center; |
|
transform: translateX(0); |
|
opacity: 1; |
|
} |
|
|
|
> .to { |
|
transform-origin: left center; |
|
transform: translateX(1.5rem); |
|
opacity: 0; |
|
} |
|
|
|
&.animating { |
|
> .from { |
|
animation: fade-out-opacity .4s ease-out, slide-fade-out-move .4s; |
|
} |
|
|
|
> .to { |
|
animation: fade-in-opacity .4s var(--easeInSine), slide-fade-in-move .4s; |
|
} |
|
} |
|
} |
|
|
|
&.slide-fade.backwards { |
|
> .from { |
|
transform: translateX(0); |
|
opacity: 1; |
|
} |
|
|
|
> .to { |
|
transform: translateX(-1.5rem); |
|
opacity: 0; |
|
} |
|
|
|
&.animating { |
|
> .from { |
|
animation: fade-in-backwards-opacity .4s ease-out, slide-fade-in-backwards-move .4s; |
|
} |
|
|
|
> .to { |
|
animation: fade-out-backwards-opacity .4s var(--easeOutSine), slide-fade-out-backwards-move .4s; |
|
} |
|
} |
|
} |
|
|
|
/* &.reveal { |
|
> .to { |
|
clip-path: inset(0 100% 0 0); |
|
} |
|
|
|
&.animating { |
|
> .to { |
|
animation: reveal-in 350ms ease-in; |
|
} |
|
} |
|
} */ |
|
} |
|
|
|
/* |
|
* zoom-fade |
|
*/ |
|
@keyframes zoom-fade-in-move { |
|
0% { |
|
transform: scale(1.1); |
|
} |
|
100% { |
|
transform: scale(1); |
|
} |
|
} |
|
|
|
@keyframes zoom-fade-in-backwards-move { |
|
0% { |
|
transform: scale(1); |
|
} |
|
100% { |
|
transform: scale(1.1); |
|
} |
|
} |
|
|
|
@keyframes zoom-fade-out-backwards-move { |
|
0% { |
|
transform: scale(0.95); |
|
} |
|
100% { |
|
transform: scale(1); |
|
} |
|
} |
|
|
|
/* |
|
* slide-fade |
|
*/ |
|
@keyframes slide-fade-in-move { |
|
0% { |
|
transform: translateX(1.5rem); |
|
} |
|
100% { |
|
transform: translateX(0); |
|
} |
|
} |
|
|
|
@keyframes slide-fade-out-move { |
|
0% { |
|
transform: translateX(0); |
|
} |
|
100% { |
|
transform: translateX(-1.5rem); |
|
} |
|
} |
|
|
|
@keyframes slide-fade-in-backwards-move { |
|
0% { |
|
transform: translateX(0); |
|
} |
|
100% { |
|
transform: translateX(1.5rem); |
|
} |
|
} |
|
|
|
@keyframes slide-fade-out-backwards-move { |
|
0% { |
|
transform: translateX(-1.5rem); |
|
} |
|
100% { |
|
transform: translateX(0); |
|
} |
|
} |
|
|
|
/* @keyframes reveal-in { |
|
0% { |
|
clip-path: inset(0 100% 0 0); |
|
} |
|
100% { |
|
clip-path: inset(0 0 0 0); |
|
} |
|
} */ |
|
|
|
/* .zoom-fade { |
|
transition: .15s ease-in-out opacity, .15s ease-in-out transform; |
|
transform: scale3d(1.1, 1.1, 1); |
|
opacity: 0; |
|
display: flex; |
|
|
|
&.active { |
|
transform: scale3d(1, 1, 1); |
|
transform-origin: center; |
|
opacity: 1; |
|
} |
|
} */
|
|
|