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.
703 lines
13 KiB
703 lines
13 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
@mixin dialog-badge-transition-reset() { |
|
transition: none; |
|
transform: scale(0); |
|
opacity: 1; |
|
} |
|
|
|
@mixin dialog-badge-transition-visible() { |
|
transform: scale(1); |
|
} |
|
|
|
@mixin dialog-badge-transition-backwards() { |
|
opacity: 0; |
|
} |
|
|
|
@mixin dialog-badge-transition-animating() { |
|
transition: background-color var(--chatlist-badge-transition-in), transform var(--chatlist-badge-transition-in); |
|
} |
|
|
|
@mixin dialog-badge-transition-animating-backwards() { |
|
transition: background-color var(--chatlist-badge-transition-out), transform var(--chatlist-badge-transition-out), opacity var(--chatlist-badge-transition-out); |
|
} |
|
|
|
@mixin dialog-badge-transition($after: false) { |
|
@include animation-level(2) { |
|
@if $after { |
|
&:after { |
|
@include dialog-badge-transition-reset(); |
|
} |
|
|
|
&.is-visible:not(.backwards):after { |
|
@include dialog-badge-transition-visible(); |
|
} |
|
|
|
&.backwards:after { |
|
@include dialog-badge-transition-backwards(); |
|
} |
|
|
|
&.animating:after { |
|
@include dialog-badge-transition-animating(); |
|
} |
|
|
|
&.animating.backwards:after { |
|
@include dialog-badge-transition-animating-backwards(); |
|
} |
|
} @else { |
|
@include dialog-badge-transition-reset(); |
|
|
|
&.is-visible:not(.backwards) { |
|
@include dialog-badge-transition-visible(); |
|
} |
|
|
|
&.backwards { |
|
@include dialog-badge-transition-backwards(); |
|
} |
|
|
|
&.animating { |
|
@include dialog-badge-transition-animating(); |
|
|
|
&.backwards { |
|
@include dialog-badge-transition-animating-backwards(); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.chatlist-container { |
|
position: relative; |
|
|
|
.search-group-recent.search-group { |
|
@include respond-to(handhelds) { |
|
padding: 2px 0 0; |
|
} |
|
} |
|
|
|
.search-group { |
|
width: 100%; |
|
padding: 1rem 0 .5rem; |
|
margin-bottom: 17px; |
|
|
|
@include respond-to(handhelds) { |
|
margin-bottom: 0; |
|
} |
|
|
|
&__name { |
|
color: var(--secondary-text-color); |
|
padding: 0 23px; |
|
padding-bottom: 1rem; |
|
font-weight: var(--font-weight-bold); |
|
user-select: none; |
|
|
|
@include respond-to(handhelds) { |
|
padding: 5px 9px 0 16px; |
|
font-size: 15px; |
|
} |
|
} |
|
|
|
&-contacts { |
|
border-bottom: 1px solid var(--border-color); |
|
|
|
@include respond-to(handhelds) { |
|
padding: 0px 0 2px; |
|
} |
|
|
|
// .search-group__name { |
|
// padding-bottom: 17px; |
|
|
|
// @include respond-to(handhelds) { |
|
// padding-bottom: 0; |
|
// } |
|
// } |
|
} |
|
|
|
&-people.search-group-contacts { |
|
padding: 5px 0 5px !important; |
|
} |
|
|
|
&:last-child { |
|
border-bottom: none; |
|
} |
|
} |
|
|
|
.search-super { |
|
.search-group { |
|
margin-bottom: 0px; |
|
padding: 4px 0 0; |
|
|
|
&__name { |
|
padding-top: 1rem; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
ul.chatlist { |
|
padding: 0 .5rem/* .5rem */; |
|
|
|
@include respond-to(handhelds) { |
|
// padding: 0 0 .5rem; |
|
padding: 0; |
|
} |
|
} |
|
|
|
.chatlist { |
|
//--avatarSize: 54px; |
|
//--height: 72px; |
|
margin: 0; |
|
display: flex; |
|
flex-direction: column; |
|
position: relative; |
|
width: 100%; |
|
background-color: var(--surface-color); |
|
|
|
user-select: none; |
|
-webkit-user-select: none; /* disable selection/Copy of UIWebView */ |
|
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ |
|
|
|
/* &.chatlist-avatar-48 { |
|
--avatarSize: 48px; |
|
} |
|
|
|
@include respond-to(handhelds) { |
|
&.chatlist-handhelds-66 { |
|
--height: 66px; |
|
} |
|
} */ |
|
|
|
&-chat { |
|
--background: unset; |
|
//height: var(--height); |
|
height: 72px; |
|
//max-height: var(--height); |
|
border-radius: $border-radius-medium; |
|
display: flex; |
|
align-items: flex-start; // TODO: проверить разницу в производительности с align-items: center; |
|
flex-direction: row; |
|
position: relative; |
|
cursor: pointer; |
|
padding: .5625rem; |
|
/* padding-top: calc((var(--height) - var(--avatarSize)) / 2); |
|
padding-bottom: calc((var(--height) - var(--avatarSize)) / 2); |
|
padding-right: 8.5px; |
|
padding-left: 8.5px; */ |
|
overflow: hidden; |
|
background: var(--background); |
|
-webkit-user-drag: none; |
|
|
|
@include respond-to(handhelds) { |
|
border-radius: 0; |
|
} |
|
|
|
//@include hover-background-effect(); |
|
@include hover(gray, --background, false); |
|
|
|
&.is-muted { |
|
.user-title { |
|
&:after { |
|
flex: 0 0 auto; |
|
content: $tgico-nosound; |
|
color: var(--chatlist-pinned-color); |
|
font-size: 1.125rem; |
|
margin-left: .125rem; |
|
} |
|
} |
|
|
|
body:not(.animation-level-0) & { |
|
&.animating { |
|
&:not(.backwards) { |
|
.user-title:after { |
|
animation: fade-in-opacity .2s ease-in-out forwards; |
|
} |
|
} |
|
|
|
&.backwards .user-title:after { |
|
animation: fade-in-backwards-opacity .2s ease-in-out forwards; |
|
} |
|
} |
|
} |
|
} |
|
|
|
p { |
|
margin: 0; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: flex-start; |
|
height: 27px; |
|
} |
|
|
|
a { |
|
color: inherit; |
|
} |
|
|
|
.text-highlight { |
|
color: var(--primary-text-color); |
|
} |
|
|
|
/* img.emoji { |
|
margin-right: .25rem; |
|
margin-left: .25rem; |
|
|
|
&:first-child { |
|
margin-left: 0; |
|
} |
|
} */ |
|
|
|
&.menu-open { |
|
--background: var(--light-secondary-text-color); |
|
} |
|
|
|
@include respond-to(not-handhelds) { |
|
&.active { |
|
--background: var(--primary-color) !important; |
|
//background: var(--light-secondary-text-color); |
|
|
|
.user-caption, |
|
.tgico-chatspinned:before, |
|
//.user-title:after, |
|
.user-title, |
|
.message-status, |
|
.text-highlight, |
|
.premium-icon, |
|
.verified-icon { |
|
color: #fff; |
|
} |
|
|
|
.badge-fake { |
|
color: #fff; |
|
border-color: #fff; |
|
} |
|
|
|
b { |
|
color: #fff !important; |
|
} |
|
|
|
.user-title:after { |
|
color: rgba(255, 255, 255, .7); |
|
} |
|
|
|
.verified-icon { |
|
&-background { |
|
fill: #fff !important; |
|
} |
|
|
|
&-check { |
|
// fill: var(--primary-color) !important; |
|
visibility: hidden; |
|
} |
|
} |
|
|
|
.dialog-avatar.is-online:after, |
|
.dialog-group-call-icon { |
|
background-color: #fff; |
|
border-color: var(--primary-color); |
|
} |
|
|
|
.badge.unread, |
|
.mention { |
|
background-color: #fff !important; |
|
color: var(--primary-color); |
|
} |
|
|
|
.peer-typing-container { |
|
--color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* .user-title, |
|
.dialog-title-details, |
|
.user-last-message */&-chat span { |
|
//display: inline-block; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
//margin: .1rem 0; |
|
line-height: 27px; |
|
} |
|
|
|
.peer-typing-container { |
|
--color: var(--secondary-text-color); |
|
|
|
.peer-typing-text { |
|
display: inline-flex; |
|
transform: translateY(-2px); |
|
} |
|
} |
|
|
|
.dialog { |
|
&-title { |
|
&-details { |
|
font-size: .75rem; |
|
padding: 1px 0px 0px 0px; |
|
flex: 0 0 auto; |
|
margin-left: .5rem; |
|
} |
|
} |
|
|
|
&-subtitle { |
|
margin-top: -3px; |
|
|
|
&-badge { |
|
display: block !important; |
|
margin-top: 4px; |
|
margin-right: -3px; |
|
margin-left: .5rem; |
|
flex: 0 0 auto; |
|
|
|
/* &:not(:empty), &.tgico-pinnedchat { |
|
margin-left: .5rem; |
|
} */ |
|
|
|
/* &.unread { |
|
transition: none; |
|
} */ |
|
} |
|
|
|
&-media { |
|
width: 1.25rem; |
|
height: 1.25rem; |
|
position: relative; |
|
flex: 0 0 auto; |
|
border-radius: .125rem; |
|
margin-top: -0.125rem; |
|
margin-right: 0.375rem; |
|
display: inline-block; |
|
vertical-align: middle; |
|
|
|
&.is-round { |
|
border-radius: 50%; |
|
|
|
.tgico-play { |
|
font-size: .875rem; |
|
} |
|
} |
|
|
|
.tgico-play { |
|
position: absolute; |
|
z-index: 1; |
|
color: #fff; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
line-height: 1; |
|
font-size: 1rem; |
|
} |
|
|
|
.media-photo { |
|
width: inherit; |
|
height: inherit; |
|
object-fit: cover; |
|
border-radius: inherit; |
|
} |
|
} |
|
} |
|
|
|
&-group-call-icon { |
|
position: absolute; |
|
left: 45px; |
|
top: 45px; |
|
border: 2px solid var(--surface-color); |
|
overflow: hidden; |
|
border-radius: 50%; |
|
background-color: var(--avatar-online-color); |
|
width: 20px; |
|
height: 20px; |
|
z-index: 2; |
|
} |
|
|
|
&-subtitle-badge, |
|
&-group-call-icon { |
|
@include dialog-badge-transition(); |
|
} |
|
|
|
&-avatar { |
|
@include dialog-badge-transition(true); |
|
} |
|
} |
|
|
|
.dialog-avatar { |
|
flex: 0 0 auto; |
|
} |
|
|
|
.user-caption { |
|
overflow: hidden; |
|
color: var(--secondary-text-color); |
|
flex: 1 1 auto; |
|
padding: .0625rem .4375rem .0625rem .5625rem; |
|
} |
|
|
|
.dialog-avatar, |
|
.user-caption { |
|
pointer-events: none; |
|
position: relative; // for z-index |
|
} |
|
|
|
.user-title { |
|
display: flex !important; |
|
align-items: center; |
|
|
|
img.emoji { |
|
vertical-align: top; |
|
margin-top: 4px; |
|
width: 18px; |
|
height: 18px; |
|
} |
|
|
|
/* span.emoji { |
|
&:first-of-type:not(:first-child) { |
|
margin-left: .125rem; |
|
} |
|
} */ |
|
} |
|
|
|
.user-last-message { |
|
img.emoji { |
|
width: 20px; |
|
height: 20px; |
|
margin-top: -3px; |
|
} |
|
|
|
/* span.emoji { |
|
font-size: 1.2rem; |
|
margin: 0 .125rem; |
|
overflow: visible; |
|
//margin-top: -1.5px; |
|
} */ |
|
} |
|
|
|
.user-title, |
|
.user-last-message { |
|
flex-grow: 1; |
|
|
|
i { |
|
font-style: normal; |
|
//color: var(--primary-color); |
|
} |
|
} |
|
|
|
.message-status { |
|
margin-right: 0.125rem; |
|
display: inline-block; |
|
vertical-align: middle; |
|
color: var(--chatlist-status-color); |
|
line-height: 1; |
|
width: 1.25rem; |
|
height: 1.25rem; |
|
font-size: 1.25rem; |
|
position: relative; |
|
margin-top: -.0625rem; |
|
|
|
&:before { |
|
vertical-align: middle; |
|
} |
|
} |
|
|
|
/* .message-time { |
|
vertical-align: middle; |
|
} */ |
|
|
|
.tgico-chatspinned { |
|
background: transparent; |
|
|
|
@include animation-level(2) { |
|
&:before { |
|
transition: opacity .2s ease-in-out; |
|
} |
|
} |
|
|
|
&:before { |
|
color: var(--chatlist-pinned-color); |
|
opacity: 1; |
|
} |
|
|
|
&.unread { |
|
&:before { |
|
opacity: 0; |
|
} |
|
} |
|
} |
|
|
|
.tgico-chatspinned/* , |
|
.tgico-mention */ { |
|
position: relative; |
|
|
|
&:before { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
} |
|
|
|
.mention { |
|
padding: 0; |
|
background-color: var(--chatlist-status-color) !important; |
|
|
|
html.is-mac & { |
|
line-height: 22px !important; |
|
} |
|
} |
|
|
|
.mention-badge { |
|
margin-right: -2px; |
|
} |
|
|
|
/* .tgico-mention { |
|
&:before { |
|
color: #fff !important; |
|
opacity: 1 !important; |
|
} |
|
} */ |
|
|
|
.unread, |
|
.is-muted.backwards .unread { |
|
background-color: var(--chatlist-status-color); |
|
} |
|
|
|
.is-muted .unread { |
|
background-color: var(--secondary-color); |
|
} |
|
|
|
&-parts { |
|
/* width: 100%; |
|
min-height: 100%; |
|
display: flex; |
|
flex-direction: column; */ |
|
|
|
&.with-contacts { |
|
.chatlist-top:not(.with-placeholder) { |
|
height: auto; |
|
padding-bottom: .5rem; |
|
} |
|
|
|
.chatlist-top.with-placeholder { |
|
&.has-contacts { |
|
height: 24.125rem; |
|
} |
|
|
|
.empty-placeholder-dialogs { |
|
top: 50%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// do not set position: relative here. will break chatlist slicing. |
|
&-top { |
|
// flex: 0 0 auto; |
|
height: 100%; |
|
} |
|
|
|
&-bottom { |
|
// flex: 1 1 auto; |
|
max-height: 36.375rem; |
|
|
|
.sidebar-left-section { |
|
padding-bottom: 0; |
|
margin-bottom: 0 !important; |
|
|
|
/* &-name { |
|
padding-top: 1rem !important; |
|
padding-bottom: 1rem !important; |
|
} */ |
|
} |
|
|
|
.chatlist-new { |
|
padding: 0; |
|
// margin-top: -.5rem; |
|
} |
|
} |
|
|
|
// * supernew correct layout |
|
&-new { |
|
.chatlist-chat { |
|
height: 4.5rem; |
|
padding: 0 .75rem; |
|
align-items: center; |
|
} |
|
|
|
.user-caption { |
|
padding-left: .75rem; |
|
} |
|
|
|
p { |
|
height: auto !important; |
|
} |
|
|
|
span { |
|
line-height: var(--line-height) !important; |
|
} |
|
|
|
.dialog-subtitle { |
|
margin-top: .125rem; |
|
} |
|
|
|
.user-last-message { |
|
font-size: .875rem; |
|
} |
|
} |
|
} |
|
|
|
// use together like class="chatlist-container contacts-container" |
|
.contacts-container, |
|
.search-group-contacts { |
|
.chatlist-chat { |
|
padding: .75rem; |
|
|
|
@include respond-to(handhelds) { |
|
height: 66px; |
|
padding-top: 9px; |
|
padding-bottom: 9px; |
|
} |
|
} |
|
|
|
.user-caption { |
|
padding: 1px 3.5px 1px 13px; |
|
|
|
@include respond-to(handhelds) { |
|
padding: 0 4px 0 14px; |
|
} |
|
} |
|
|
|
.user-title, |
|
b, |
|
.user-last-message b { |
|
font-weight: normal; |
|
} |
|
|
|
p { |
|
height: 24px; |
|
|
|
@include respond-to(handhelds) { |
|
height: 26px; |
|
} |
|
} |
|
|
|
span.user-last-message { |
|
font-size: 14px; |
|
} |
|
} |
|
|
|
.chatlist-new.chatlist-48 { |
|
.chatlist-chat { |
|
height: 3.5rem; |
|
} |
|
|
|
.user-caption { |
|
padding-left: 1.125rem; |
|
} |
|
|
|
.dialog-subtitle { |
|
margin-top: .0625rem; |
|
} |
|
}
|
|
|