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.

131 lines
2.6 KiB

3 years ago
/*
* https://github.com/morethanwords/tweb
* Copyright (C) 2019-2021 Eduard Kuzmenko
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
.rp {
position: relative;
user-select: none;
}
.rp-overflow,
.btn-menu-toggle.rp,
.menu-horizontal-div-item.rp,
.btn-corner.rp,
.pinned-container-wrapper.rp
/* , html.is-safari .c-ripple */ {
3 years ago
.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;
// pointer-events: none;
3 years ago
// ! 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 {
// opacity: .08;
3 years ago
background-color: var(--ripple-color);
display: block;
position: absolute;
transform: scale(0);
border-radius: 50%;
animation: ripple-effect .7s forwards;
//animation-timing-function: ease-out;
transition: .35s opacity, .35s background-color;
//overflow: hidden;
pointer-events: none;
.btn-menu &,
.c-ripple.is-square & {
3 years ago
animation-name: ripple-effect-handhelds;
//animation-timing-function: ease-out;
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 {
3 years ago
--ripple-duration: .2s;
}
&__circle.hiding,
&__square.hiding {
3 years ago
opacity: 0;
}
}
@include respond-to(until-floating-left-sidebar) {
.chatlist-container ul li > .rp {
.c-ripple {
--ripple-duration: .2s;
&__circle {
animation-name: ripple-effect-handhelds;
//animation-timing-function: ease-out;
animation-duration: .2s;
transition-duration: .1s;
}
}
}
}
@keyframes ripple-effect {
0% {
transform: scale(0);
}
to {
transform: scale(2);
}
}
@keyframes ripple-effect-handhelds {
0% {
//transform: scale(.85);
transform: scale(.27);
}
to {
transform: scale(2);
}
}