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.
164 lines
2.8 KiB
164 lines
2.8 KiB
@keyframes scaleIn { |
|
0% { |
|
transform: scale(.2); |
|
} |
|
|
|
to { |
|
transform: scale(1); |
|
} |
|
} |
|
|
|
.selector { |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
&-search-container { |
|
flex: 0 0 auto; |
|
//flex: 1 1 auto; |
|
position: relative; |
|
max-height: 132px; |
|
overflow: hidden; |
|
|
|
.scrollable { |
|
position: relative; |
|
max-height: inherit; // fix safari |
|
} |
|
|
|
avatar-element:before { |
|
font-size: 18px; |
|
} |
|
} |
|
|
|
&-search { |
|
padding: 0 24px 0 24px; |
|
display: flex; |
|
flex-flow: wrap; |
|
|
|
&-input { |
|
border: none; |
|
outline: none; |
|
flex: 1 1 auto; |
|
} |
|
|
|
// ! only in this container need this padding |
|
.selector-search-input { |
|
padding: 7px 0px 19px 0px; |
|
} |
|
} |
|
|
|
&-user { |
|
color: #000; |
|
background-color: var(--color-gray-hover); |
|
font-size: 16px; |
|
padding: 0 17px 0px 0px; |
|
line-height: 31px; |
|
margin-left: -4px; |
|
margin-right: 12px; |
|
height: 32px; |
|
margin-bottom: 7px; |
|
border-radius: 24px; |
|
user-select: none; |
|
flex: 0 0 auto; |
|
transition: .2s all; |
|
|
|
html.no-touch &:hover { |
|
background-color: #fae2e3; |
|
cursor: pointer; |
|
|
|
.selector-user-avatar:after { |
|
opacity: 1; |
|
transform: scaleX(-1) rotate(-90deg); |
|
} |
|
} |
|
|
|
&.scale-in { |
|
animation: scaleIn .15s ease forwards; |
|
} |
|
|
|
&.scale-out { |
|
animation: scaleIn .1s ease forwards; |
|
animation-direction: reverse; |
|
} |
|
|
|
&-avatar { |
|
float: left; |
|
margin-right: 8px; |
|
overflow: hidden; |
|
|
|
html.is-safari & { |
|
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow |
|
} |
|
|
|
&:after { |
|
position: absolute; |
|
content: $tgico-close; |
|
left: 0; |
|
top: 0; |
|
background-color: #df3f40; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 2; |
|
font-size: 23px; |
|
line-height: 32px !important; |
|
opacity: 0; |
|
transition: .2s opacity, .2s transform; |
|
transform: scaleX(-1) rotate(0deg); |
|
} |
|
} |
|
} |
|
|
|
.chatlist-container { |
|
height: 100%; |
|
flex: 1 1 auto; |
|
} |
|
|
|
ul { |
|
.user-caption { |
|
padding: 1px 3.5px 1px 12px; |
|
} |
|
|
|
p { |
|
height: 24px; |
|
} |
|
|
|
span.user-last-message { |
|
font-size: 14px; |
|
} |
|
|
|
li { |
|
padding-bottom: 0; |
|
|
|
> .rp { |
|
margin: 0px 9px 0px 8px; |
|
padding: 12px 8.5px; |
|
|
|
@include respond-to(handhelds) { |
|
margin: 0; |
|
} |
|
|
|
html.is-safari & { |
|
margin-right: 4px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
hr { |
|
margin: 0 0 8px; |
|
} |
|
|
|
[type="checkbox"] + span { |
|
padding-left: calc(9px + 2.25rem); |
|
} |
|
|
|
.checkbox { |
|
margin-top: 11px; |
|
padding-left: 11px; |
|
} |
|
|
|
.checkbox-field { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
} |