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.
128 lines
2.5 KiB
128 lines
2.5 KiB
/* |
|
* 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 */ { |
|
.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; |
|
|
|
// ! 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; |
|
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 & { |
|
// 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 { |
|
// --ripple-duration: .2s; |
|
// } |
|
|
|
&__circle.hiding, |
|
&__square.hiding { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@include respond-to(until-floating-left-sidebar) { |
|
.c-ripple { |
|
--ripple-duration: .4s; |
|
|
|
&__circle { |
|
animation-name: ripple-effect-handhelds; |
|
//animation-timing-function: ease-out; |
|
animation-duration: .4s; |
|
transition-duration: .3s; |
|
} |
|
} |
|
} |
|
|
|
@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); |
|
} |
|
}
|
|
|