626 lines
12 KiB
SCSS
626 lines
12 KiB
SCSS
/*
|
||
* 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: 0 0 .5rem;
|
||
|
||
&__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 {
|
||
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 */
|
||
|
||
&-chat {
|
||
--background: unset;
|
||
background: var(--background) !important;
|
||
-webkit-user-drag: none;
|
||
|
||
//@include hover-background-effect();
|
||
@include hover(filled-gray, --background, false);
|
||
|
||
&.menu-open,
|
||
&.is-forum-open {
|
||
// --background: var(--light-secondary-text-color);
|
||
--background: var(--light-filled-secondary-text-color);
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
i {
|
||
font-style: normal;
|
||
}
|
||
|
||
.text-highlight {
|
||
color: var(--primary-text-color);
|
||
}
|
||
|
||
.premium-icon {
|
||
margin-top: -.125rem;
|
||
}
|
||
|
||
.topic-icon {
|
||
flex: 0 0 auto;
|
||
// margin-right: .375rem;
|
||
// display: inline-block;
|
||
}
|
||
|
||
.row-title .topic-icon {
|
||
--size: 1.375rem;
|
||
margin-right: .25rem;
|
||
}
|
||
|
||
// ! IT IS IMPORTANT, OVERFLOW DOESN'T WORK WITH display: inline-flex;
|
||
.topic-name {
|
||
.topic-icon {
|
||
display: inline;
|
||
line-height: 1 !important;
|
||
|
||
// &:before {
|
||
// content: " ";
|
||
// display: inline-block;
|
||
// width: inherit;
|
||
// height: inherit;
|
||
// min-width: inherit;
|
||
// min-height: inherit;
|
||
// }
|
||
|
||
&-svg {
|
||
position: relative;
|
||
// top: 0;
|
||
// left: 0;
|
||
}
|
||
|
||
&-content {
|
||
left: 0;
|
||
margin-top: -6px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include respond-to(not-handhelds) {
|
||
&.active {
|
||
--background: var(--primary-color) !important;
|
||
//background: var(--light-secondary-text-color);
|
||
|
||
.row-subtitle,
|
||
.row-title,
|
||
.tgico-chatspinned:before,
|
||
//.user-title:after,
|
||
.user-title,
|
||
.message-status,
|
||
.text-highlight,
|
||
.premium-icon,
|
||
.verified-icon,
|
||
.sending-status-icon {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.badge-fake {
|
||
color: #fff;
|
||
border-color: #fff;
|
||
}
|
||
|
||
.primary-text,
|
||
.danger {
|
||
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);
|
||
}
|
||
|
||
// .badge.avatar-badge {
|
||
// border-color: var(--background);
|
||
// }
|
||
|
||
.peer-typing-container {
|
||
--color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.peer-typing-container {
|
||
--color: var(--secondary-text-color);
|
||
|
||
.peer-typing-text {
|
||
display: inline-flex;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
.sending-status-icon.tgico-premium_lock {
|
||
font-size: .8125rem;
|
||
margin: .1875rem 0 0 .5rem;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.dialog {
|
||
&-title {
|
||
&-details {
|
||
font-size: .75rem;
|
||
padding: 1px 0px 0px 0px;
|
||
flex: 0 0 auto;
|
||
margin-left: .5rem;
|
||
}
|
||
}
|
||
|
||
&-subtitle {
|
||
&-badge {
|
||
display: block !important;
|
||
margin-left: .5rem;
|
||
flex: 0 0 auto;
|
||
|
||
/* &:not(:empty), &.tgico-pinnedchat {
|
||
margin-left: .5rem;
|
||
} */
|
||
|
||
/* &.unread {
|
||
transition: none;
|
||
} */
|
||
|
||
&.avatar-badge {
|
||
// --padding: .375rem;
|
||
--size: 1.625rem;
|
||
margin: 0;
|
||
position: absolute;
|
||
right: calc(100% - 4.0625rem);
|
||
top: 2.4375rem;
|
||
// border: 2px solid var(--surface-color);
|
||
border: 2px solid var(--background, var(--surface-color));
|
||
pointer-events: none;
|
||
line-height: 23px !important;
|
||
}
|
||
}
|
||
|
||
&-media {
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
line-height: 1.25rem;
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
border-radius: .25rem;
|
||
margin-right: 0.375rem;
|
||
display: inline-block;
|
||
|
||
&:before {
|
||
content: " ";
|
||
display: inline-block;
|
||
width: inherit;
|
||
height: inherit;
|
||
min-width: inherit;
|
||
min-height: inherit;
|
||
}
|
||
|
||
&.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;
|
||
top: auto;
|
||
bottom: auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-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;
|
||
}
|
||
|
||
.dialog-avatar,
|
||
.row-row {
|
||
pointer-events: none;
|
||
position: relative; // for z-index
|
||
}
|
||
|
||
.user-title {
|
||
display: flex !important;
|
||
align-items: center;
|
||
|
||
img.emoji {
|
||
vertical-align: top;
|
||
margin-top: 1px;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
position: relative; // * for custom emoji
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
position: relative;
|
||
|
||
&:before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.mention {
|
||
padding: 0;
|
||
background-color: var(--chatlist-status-color) !important;
|
||
|
||
html.is-mac & {
|
||
line-height: 1.25rem !important;
|
||
}
|
||
}
|
||
|
||
.mention-badge {
|
||
margin-right: -.125rem;
|
||
}
|
||
|
||
/* .tgico-mention {
|
||
&:before {
|
||
color: #fff !important;
|
||
opacity: 1 !important;
|
||
}
|
||
} */
|
||
|
||
.unread,
|
||
.is-muted.backwards .unread {
|
||
background-color: var(--chatlist-status-color);
|
||
}
|
||
|
||
.is-muted .unread,
|
||
.no-unmuted-topic .unread {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
.not-visited {
|
||
--size: .5rem;
|
||
--padding: 0;
|
||
background-color: var(--secondary-color) !important;
|
||
}
|
||
|
||
&-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;
|
||
}
|
||
}
|
||
}
|