440 lines
8.2 KiB
SCSS
440 lines
8.2 KiB
SCSS
/*
|
||
* https://github.com/morethanwords/tweb
|
||
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||
*/
|
||
|
||
.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: 500;
|
||
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;
|
||
}
|
||
} */
|
||
|
||
li {
|
||
//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;
|
||
|
||
@include respond-to(handhelds) {
|
||
border-radius: 0;
|
||
}
|
||
|
||
@include hover-background-effect();
|
||
|
||
&.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;
|
||
justify-content: space-between;
|
||
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(--light-secondary-text-color);
|
||
background: var(--primary-color) !important;
|
||
|
||
.user-caption,
|
||
.tgico-chatspinned:before,
|
||
//.user-title:after,
|
||
.user-title,
|
||
.message-status,
|
||
.text-highlight {
|
||
color: #fff;
|
||
}
|
||
|
||
b {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.user-title:after {
|
||
color: rgba(255, 255, 255, .7);
|
||
}
|
||
|
||
.verified-background {
|
||
fill: #fff !important;
|
||
}
|
||
|
||
.verified-check {
|
||
fill: var(--primary-color) !important;
|
||
}
|
||
|
||
.dialog-avatar.is-online:after {
|
||
background-color: #fff;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.badge.unread {
|
||
background-color: #fff !important;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.peer-typing-container {
|
||
--color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* .user-title,
|
||
.dialog-title-details,
|
||
.user-last-message */li 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 {
|
||
&:not(:empty), &.tgico-pinnedchat {
|
||
margin-left: .5rem;
|
||
}
|
||
|
||
&.unread {
|
||
transition: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog-avatar {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.user-caption {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
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;
|
||
}
|
||
} */
|
||
|
||
.verified-icon {
|
||
flex: 0 0 auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
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 {
|
||
i {
|
||
font-style: normal;
|
||
//color: var(--primary-color);
|
||
}
|
||
}
|
||
|
||
.message-status {
|
||
margin-right: .1rem;
|
||
//margin-top: .3rem;
|
||
margin-top: -.3rem;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
|
||
&[class*=" tgico-"] {
|
||
color: var(--chatlist-status-color);
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
&:before {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.message-time {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.dialog-subtitle-badge {
|
||
margin-top: 4px;
|
||
margin-right: -3px;
|
||
margin-left: .25rem;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.tgico-chatspinned {
|
||
background: transparent;
|
||
position: relative;
|
||
|
||
&:before {
|
||
color: var(--chatlist-pinned-color);
|
||
transition: opacity .2s ease-in-out;
|
||
opacity: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&.unread {
|
||
&:before {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.unread, li.is-muted.backwards .unread {
|
||
background-color: var(--chatlist-status-color);
|
||
}
|
||
|
||
li.is-muted .unread {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
}
|
||
|
||
// use together like class="chatlist-container contacts-container"
|
||
.contacts-container, .search-group-contacts {
|
||
li {
|
||
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;
|
||
}
|
||
}
|