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.

109 lines
2.0 KiB

.rp {
position: relative;
user-select: none;
}
.rp-overflow, .btn-menu-toggle.rp, .menu-horizontal li.rp/* , html.is-safari .c-ripple */ {
.c-ripple {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
&__circle {
overflow: hidden;
}
}
}
/**
* Utility: Ripple
* --------------------------------------------------
*/
.c-ripple {
--ripple-duration: .7s;
//display: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
// ! with these rules ripple lags
/* width: 100%;
height: 100%; */
//overflow: hidden;
/* background: transparent;
border-radius: inherit; */
html.is-safari &:not(:empty) {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
border-radius: inherit;
}
&__circle {
background-color: rgba(0, 0, 0, .08);
display: block;
position: absolute;
transform: scale(0);
border-radius: 50%;
animation: ripple-effect .7s forwards;
transition: .35s opacity;
//overflow: hidden;
.btn-menu &, .c-ripple.is-square & {
animation-name: ripple-effect-handhelds;
animation-duration: .2s;
transition-duration: .1s;
//border-radius: 15%;
}
/* @include respond-to(handhelds) {
animation-duration: .2s;
transition-duration: .1s;
//border-radius: 15%;
} */
}
.btn-menu &, &.is-square {
--ripple-duration: .2s;
}
&__circle.hiding, &__square.hiding {
opacity: 0;
}
}
@include respond-to(until-floating-left-sidebar) {
.chats-container ul li > .rp {
.c-ripple {
--ripple-duration: .2s;
&__circle {
animation-duration: .2s;
transition-duration: .1s;
animation-name: ripple-effect-handhelds;
}
}
}
}
@keyframes ripple-effect {
0% {
transform: scale(0);
}
to {
transform: scale(2);
}
}
@keyframes ripple-effect-handhelds {
0% {
transform: scale(.85);
}
to {
transform: scale(2);
}
}