Replaced rest of icons
Layout fixes in left sidebar Added animation to chatlist menu button Changed chat layer transition
This commit is contained in:
Eduard Kuzmenko
parent
5c522c034e
commit
4ab2c8036d
@ -2912,6 +2912,7 @@ export default class ChatBubbles {
|
||||
|
||||
const setBubbles: HTMLElement[] = [];
|
||||
|
||||
this.chatInner.classList.add('zoom-fading');
|
||||
const delay = isAdditionRender ? 10 : 40;
|
||||
const offsetIndex = isAdditionRender ? 0 : 1;
|
||||
const animateAsLadder = (mids: number[], offsetIndex = 0) => {
|
||||
@ -2979,6 +2980,8 @@ export default class ChatBubbles {
|
||||
setBubbles.forEach(contentWrapper => {
|
||||
contentWrapper.style.transitionDelay = '';
|
||||
});
|
||||
|
||||
this.chatInner.classList.remove('zoom-fading');
|
||||
});
|
||||
|
||||
// ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх,
|
||||
|
||||
@ -239,7 +239,7 @@ export default class ChatContextMenu {
|
||||
onClick: this.onUnpinClick,
|
||||
verify: () => this.message.pFlags.pinned && this.appPeersManager.canPinMessage(this.peerId),
|
||||
}, {
|
||||
icon: 'revote',
|
||||
icon: 'checkretract',
|
||||
text: 'Chat.Poll.Unvote',
|
||||
onClick: this.onRetractVote,
|
||||
verify: () => {
|
||||
|
||||
@ -288,7 +288,7 @@ export default class ChatInput {
|
||||
}
|
||||
|
||||
this.attachMenuButtons = [{
|
||||
icon: 'photo',
|
||||
icon: 'image',
|
||||
text: 'Chat.Input.Attach.PhotoOrVideo',
|
||||
onClick: () => {
|
||||
this.fileInput.value = '';
|
||||
@ -344,12 +344,12 @@ export default class ChatInput {
|
||||
this.recordRippleEl = document.createElement('div');
|
||||
this.recordRippleEl.classList.add('record-ripple');
|
||||
|
||||
this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send');
|
||||
this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send animated-button-icon');
|
||||
this.btnSend.insertAdjacentHTML('afterbegin', `
|
||||
<span class="tgico tgico-send"></span>
|
||||
<span class="tgico tgico-schedule"></span>
|
||||
<span class="tgico tgico-check"></span>
|
||||
<span class="tgico tgico-microphone2"></span>
|
||||
<span class="tgico tgico-microphone"></span>
|
||||
`);
|
||||
|
||||
this.btnSendContainer.append(this.recordRippleEl, this.btnSend);
|
||||
|
||||
@ -69,7 +69,7 @@ export default class MarkupTooltip {
|
||||
}
|
||||
});
|
||||
|
||||
this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true});
|
||||
this.linkBackButton = ButtonIcon('left', {noRipple: true});
|
||||
this.linkInput = document.createElement('input');
|
||||
_i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder');
|
||||
this.linkInput.classList.add('input-clear');
|
||||
|
||||
@ -39,7 +39,7 @@ export default class ChatSearch {
|
||||
this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container');
|
||||
|
||||
this.backBtn = document.createElement('button');
|
||||
this.backBtn.classList.add('btn-icon', 'tgico-arrow_back', 'sidebar-close-button');
|
||||
this.backBtn.classList.add('btn-icon', 'tgico-left', 'sidebar-close-button');
|
||||
ripple(this.backBtn);
|
||||
|
||||
this.backBtn.addEventListener('click', () => {
|
||||
|
||||
@ -68,7 +68,7 @@ export default class ChatTopbar {
|
||||
this.container = document.createElement('div');
|
||||
this.container.classList.add('sidebar-header', 'topbar');
|
||||
|
||||
this.btnBack = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});
|
||||
this.btnBack = ButtonIcon('left sidebar-close-button', {noRipple: true});
|
||||
|
||||
// * chat info section
|
||||
this.chatInfo = document.createElement('div');
|
||||
|
||||
@ -198,7 +198,11 @@ export class AppSidebarLeft extends SidebarSlider {
|
||||
text: 'NewPrivateChat',
|
||||
onClick: onContactsClick
|
||||
}]);
|
||||
this.newBtnMenu.className = 'btn-circle rp btn-corner tgico-newchat_filled btn-menu-toggle';
|
||||
this.newBtnMenu.className = 'btn-circle rp btn-corner btn-menu-toggle animated-button-icon';
|
||||
this.newBtnMenu.insertAdjacentHTML('afterbegin', `
|
||||
<span class="tgico tgico-newchat_filled"></span>
|
||||
<span class="tgico tgico-close"></span>
|
||||
`);
|
||||
this.newBtnMenu.id = 'new-menu';
|
||||
sidebarHeader.nextElementSibling.append(this.newBtnMenu);
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@ import { ButtonMenuItemOptions } from "../../buttonMenu";
|
||||
import Button from "../../button";
|
||||
import AppIncludedChatsTab from "./includedChats";
|
||||
import { i18n, i18n_, LangPackKey } from "../../../lib/langPack";
|
||||
import { SettingSection } from "..";
|
||||
|
||||
const MAX_FOLDER_NAME_LENGTH = 12;
|
||||
|
||||
@ -31,8 +32,8 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
private menuBtn: HTMLElement;
|
||||
private nameInputField: InputField;
|
||||
|
||||
private include_peers: HTMLElement;
|
||||
private exclude_peers: HTMLElement;
|
||||
private include_peers: SettingSection;
|
||||
private exclude_peers: SettingSection;
|
||||
private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any;
|
||||
|
||||
private animation: RLottiePlayer;
|
||||
@ -81,14 +82,14 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
inputWrapper.append(this.nameInputField.container);
|
||||
|
||||
const generateList = (className: string, h2Text: LangPackKey, buttons: {icon: string, name?: string, withRipple?: true, text: LangPackKey}[], to: any) => {
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('folder-list', className);
|
||||
const section = new SettingSection({
|
||||
name: h2Text,
|
||||
noDelimiter: true
|
||||
});
|
||||
|
||||
const h2 = document.createElement('div');
|
||||
h2.classList.add('sidebar-left-h2');
|
||||
i18n_({element: h2, key: h2Text});
|
||||
section.container.classList.add('folder-list', className);
|
||||
|
||||
const categories = document.createElement('div');
|
||||
const categories = section.generateContentElement();
|
||||
categories.classList.add('folder-categories');
|
||||
|
||||
buttons.forEach(o => {
|
||||
@ -105,9 +106,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
categories.append(button);
|
||||
});
|
||||
|
||||
container.append(h2, categories);
|
||||
|
||||
return container;
|
||||
return section;
|
||||
};
|
||||
|
||||
this.include_peers = generateList('folder-list-included', 'FilterInclude', [{
|
||||
@ -154,16 +153,16 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
name: 'exclude_read'
|
||||
}], this.flags);
|
||||
|
||||
this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers, this.exclude_peers);
|
||||
this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers.container, this.exclude_peers.container);
|
||||
|
||||
const includedFlagsContainer = this.include_peers.querySelector('.folder-categories');
|
||||
const excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories');
|
||||
const includedFlagsContainer = this.include_peers.container.querySelector('.folder-categories');
|
||||
const excludedFlagsContainer = this.exclude_peers.container.querySelector('.folder-categories');
|
||||
|
||||
includedFlagsContainer.firstElementChild.addEventListener('click', () => {
|
||||
includedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
|
||||
new AppIncludedChatsTab(this.slider).open(this.filter, 'included', this);
|
||||
});
|
||||
|
||||
excludedFlagsContainer.firstElementChild.addEventListener('click', () => {
|
||||
excludedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
|
||||
new AppIncludedChatsTab(this.slider).open(this.filter, 'excluded', this);
|
||||
});
|
||||
|
||||
@ -264,7 +263,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
}
|
||||
|
||||
(['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
|
||||
const container = this[key];
|
||||
const section = this[key];
|
||||
const ul = appDialogsManager.createChatList();
|
||||
|
||||
const peers = filter[key].slice();
|
||||
@ -291,20 +290,17 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
}
|
||||
};
|
||||
|
||||
container.append(ul);
|
||||
section.generateContentElement().append(ul);
|
||||
|
||||
let showMore: HTMLElement;
|
||||
if(peers.length) {
|
||||
showMore = document.createElement('div');
|
||||
showMore.classList.add('show-more', 'rp-overflow');
|
||||
const content = section.generateContentElement();
|
||||
showMore = Button('folder-category-button btn btn-primary btn-transparent', {icon: 'down'});
|
||||
showMore.classList.add('load-more', 'rp-overflow');
|
||||
showMore.addEventListener('click', () => renderMore(20));
|
||||
showMore.append(i18n('FilterShowMoreChats', [peers.length]));
|
||||
|
||||
ripple(showMore);
|
||||
const down = document.createElement('div');
|
||||
down.classList.add('tgico-down');
|
||||
showMore.append(down, i18n('FilterShowMoreChats', [peers.length]));
|
||||
|
||||
container.append(showMore);
|
||||
content.append(showMore);
|
||||
}
|
||||
|
||||
renderMore(4);
|
||||
@ -321,7 +317,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
|
||||
|
||||
setFilter(filter: DialogFilter, firstTime: boolean) {
|
||||
// cleanup
|
||||
Array.from(this.container.querySelectorAll('ul, .show-more')).forEach(el => el.remove());
|
||||
Array.from(this.container.querySelectorAll('ul, .load-more')).forEach(el => el.remove());
|
||||
|
||||
if(firstTime) {
|
||||
this.originalFilter = filter;
|
||||
|
||||
@ -74,7 +74,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
|
||||
appStateManager.setByKey('settings.messagesTextSize', value);
|
||||
};
|
||||
|
||||
const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'ChatBackground'});
|
||||
const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'image', text: 'ChatBackground'});
|
||||
|
||||
attachClickEvent(chatBackgroundButton, () => {
|
||||
new AppBackgroundTab(this.slider).open();
|
||||
|
||||
@ -17,6 +17,7 @@ import AppEditFolderTab from "./editFolder";
|
||||
import { i18n, LangPackKey, _i18n, join } from "../../../lib/langPack";
|
||||
import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
|
||||
import RichTextProcessor from "../../../lib/richtextprocessor";
|
||||
import { SettingSection } from "..";
|
||||
|
||||
export default class AppIncludedChatsTab extends SliderSuperTab {
|
||||
private editFolderTab: AppEditFolderTab;
|
||||
@ -167,12 +168,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
|
||||
const filter = this.filter;
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
const dd = document.createElement('div');
|
||||
dd.classList.add('sidebar-left-h2');
|
||||
_i18n(dd, 'FilterChatTypes');
|
||||
|
||||
const categories = document.createElement('div');
|
||||
categories.classList.add('folder-categories');
|
||||
|
||||
const categoriesSection = new SettingSection({
|
||||
noDelimiter: true,
|
||||
name: 'FilterChatTypes'
|
||||
});
|
||||
|
||||
categoriesSection.container.classList.add('folder-categories');
|
||||
|
||||
let details: {[flag: string]: {ico: string, text: LangPackKey}};
|
||||
if(this.type === 'excluded') {
|
||||
@ -198,16 +200,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
|
||||
button.append(this.checkbox());
|
||||
f.append(button);
|
||||
}
|
||||
categories.append(f);
|
||||
categoriesSection.content.append(f);
|
||||
|
||||
const hr = document.createElement('hr');
|
||||
hr.style.margin = '7px 0 9px';
|
||||
const chatsSection = new SettingSection({
|
||||
name: 'FilterChats'
|
||||
});
|
||||
|
||||
const d = document.createElement('div');
|
||||
d.classList.add('sidebar-left-h2');
|
||||
_i18n(d, 'FilterChats');
|
||||
|
||||
fragment.append(dd, categories, hr, d);
|
||||
fragment.append(categoriesSection.container, chatsSection.container);
|
||||
|
||||
/////////////////
|
||||
|
||||
@ -231,14 +230,16 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
|
||||
return div;
|
||||
};
|
||||
|
||||
this.selector.list.parentElement.insertBefore(fragment, this.selector.list);
|
||||
const parent = this.selector.list.parentElement;
|
||||
chatsSection.content.append(this.selector.list);
|
||||
parent.append(fragment);
|
||||
|
||||
this.selector.addInitial(selectedPeers);
|
||||
|
||||
for(const flag in filter.pFlags) {
|
||||
// @ts-ignore
|
||||
if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) {
|
||||
(categories.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
|
||||
(categoriesSection.content.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@ export default class SliderSuperTab implements SliderTab {
|
||||
this.header = document.createElement('div');
|
||||
this.header.classList.add('sidebar-header');
|
||||
|
||||
this.closeBtn = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});
|
||||
this.closeBtn = ButtonIcon('left sidebar-close-button', {noRipple: true});
|
||||
this.title = document.createElement('div');
|
||||
this.title.classList.add('sidebar-header__title');
|
||||
this.header.append(this.closeBtn, this.title);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="nights">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@ -557,7 +557,7 @@ export class AppProfileManager {
|
||||
div.innerHTML = '';
|
||||
div.dataset.color = '';
|
||||
div.classList.add('tgico-saved');
|
||||
div.classList.remove('tgico-avatar_deletedaccount');
|
||||
div.classList.remove('tgico-deletedaccount');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -566,7 +566,7 @@ export class AppProfileManager {
|
||||
if(user && user.pFlags && user.pFlags.deleted) {
|
||||
div.innerHTML = '';
|
||||
div.dataset.color = appPeersManager.getPeerColorById(peerId);
|
||||
div.classList.add('tgico-avatar_deletedaccount');
|
||||
div.classList.add('tgico-deletedaccount');
|
||||
div.classList.remove('tgico-saved');
|
||||
return;
|
||||
}
|
||||
@ -579,7 +579,7 @@ export class AppProfileManager {
|
||||
}
|
||||
|
||||
div.innerHTML = '';
|
||||
div.classList.remove('tgico-saved', 'tgico-avatar_deletedaccount');
|
||||
div.classList.remove('tgico-saved', 'tgico-deletedaccount');
|
||||
div.dataset.color = color;
|
||||
|
||||
let abbr: string;
|
||||
|
||||
@ -95,3 +95,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.animated-button-icon {
|
||||
> .tgico {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
body:not(.animation-level-0) & {
|
||||
animation: hide-icon .4s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@include animation-level(0) {
|
||||
visibility: hidden;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,11 +69,11 @@ avatar-element {
|
||||
font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
|
||||
}
|
||||
|
||||
&.tgico-savedmessages:before {
|
||||
/* &.tgico-savedmessages:before {
|
||||
font-size: calc(25px / var(--multiplier));
|
||||
}
|
||||
} */
|
||||
|
||||
&.tgico-avatar_deletedaccount:before {
|
||||
&.tgico-deletedaccount:before {
|
||||
font-size: calc(54px / var(--multiplier));
|
||||
}
|
||||
|
||||
|
||||
@ -243,9 +243,9 @@
|
||||
font-size: .875rem;
|
||||
cursor: default;
|
||||
|
||||
&-text {
|
||||
/* &-text {
|
||||
margin-top: -.125rem;
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,25 +23,20 @@ $chat-helper-size: 39px;
|
||||
max-width: 100%;
|
||||
padding-top: .25rem;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto; /* Forces side columns to stay same width */
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
//overflow: hidden;
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
transform: translateY(var(--translateY));
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
//display: none !important;
|
||||
|
||||
/* // * for no ESG top
|
||||
flex: 1 1 auto;
|
||||
height: calc(100% - 56px); */
|
||||
|
||||
@include respond-to(esg-top) {
|
||||
/* flex: 0 0 auto;
|
||||
height: auto; */
|
||||
max-width: var(--messages-container-width) !important;
|
||||
}
|
||||
|
||||
@ -55,15 +50,16 @@ $chat-helper-size: 39px;
|
||||
|
||||
@include respond-to(medium-screens) {
|
||||
width: calc(100% - var(--right-column-width)) !important;
|
||||
//transition: transform var(--layer-transition);
|
||||
|
||||
body.is-right-column-shown & {
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
--translateY: 100%;
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translate3d(0, var(--translateY), 0) !important;
|
||||
position: absolute !important;
|
||||
bottom: 0;
|
||||
@ -227,20 +223,6 @@ $chat-helper-size: 39px;
|
||||
color: var(--secondary-text-color);
|
||||
z-index: 3;
|
||||
|
||||
> .tgico {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
|
||||
body:not(.animation-level-0) & {
|
||||
animation: hide-icon .4s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@include animation-level(0) {
|
||||
visibility: hidden;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tgico-send {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
@ -267,7 +249,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
&.send .tgico-send,
|
||||
&.record .tgico-microphone2,
|
||||
&.record .tgico-microphone,
|
||||
&.edit .tgico-check,
|
||||
&.schedule .tgico-schedule {
|
||||
animation: grow-icon .4s forwards ease-in-out !important;
|
||||
@ -600,10 +582,11 @@ $chat-helper-size: 39px;
|
||||
background-color: inherit;
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: opacity var(--layer-transition);
|
||||
transition: opacity var(--transition-standard-out);
|
||||
opacity: 0;
|
||||
|
||||
|
||||
&.is-visible:not(.backwards) {
|
||||
transition: opacity var(--transition-standard-in);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -614,11 +597,12 @@ $chat-helper-size: 39px;
|
||||
margin: -16.5rem 0 -20rem 0;
|
||||
transform: scale(1);
|
||||
transform-origin: left center;
|
||||
transition: transform var(--layer-transition), opacity var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important;
|
||||
}
|
||||
|
||||
body.animation-level-2.is-right-column-shown & {
|
||||
transform: scale(.666666667);
|
||||
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -955,7 +939,7 @@ $chat-helper-size: 39px;
|
||||
position: relative;
|
||||
|
||||
transform: translateY(var(--translateY));
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@ -981,6 +965,7 @@ $chat-helper-size: 39px;
|
||||
// }
|
||||
|
||||
.chat.type-chat &.is-chat-input-hidden.is-selecting:not(.backwards) {
|
||||
transition: transform var(--transition-standard-in);
|
||||
--translateY: -78px;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
@ -988,6 +973,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
.bubbles-inner {
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translateY(calc(var(--translateY) * -1));
|
||||
//margin-top: $chat-helper-size;
|
||||
//transition: none;
|
||||
@ -1005,14 +991,13 @@ $chat-helper-size: 39px;
|
||||
> .scrollable {
|
||||
height: auto;
|
||||
display: block;
|
||||
/* margin-bottom: 0;
|
||||
transition: margin-bottom var(--layer-transition) */
|
||||
}
|
||||
//}
|
||||
|
||||
// ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ!
|
||||
@include respond-to(medium-screens) {
|
||||
body.is-right-column-shown & {
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0);
|
||||
}
|
||||
}
|
||||
@ -1082,7 +1067,7 @@ $chat-helper-size: 39px;
|
||||
|
||||
//padding-top: 10000px;
|
||||
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
transform: translateY(0);
|
||||
/* transition: margin-top var(--layer-transition);
|
||||
transition-delay: .2s; */
|
||||
@ -1144,8 +1129,8 @@ $chat-helper-size: 39px;
|
||||
opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
|
||||
|
||||
html.is-safari & {
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translateY(calc(var(--translateY) * -1));
|
||||
//transition: transform var(--layer-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -672,15 +672,18 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&.animating {
|
||||
transition: border-radius var(--layer-transition);
|
||||
transition: border-radius var(--transition-standard-out);
|
||||
|
||||
.album-item-media {
|
||||
transition: transform var(--layer-transition), border-radius var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out), border-radius var(--transition-standard-out);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.backwards) {
|
||||
transition: border-radius var(--transition-standard-in);
|
||||
|
||||
.album-item-media {
|
||||
transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in);
|
||||
transform: scale(.883333);
|
||||
}
|
||||
|
||||
@ -1566,11 +1569,15 @@ $bubble-margin: .25rem;
|
||||
opacity: 1;
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: transform var(--layer-transition), opacity var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out), opacity var(--transition-standard-out);
|
||||
}
|
||||
|
||||
.bubbles-inner.zoom-fading & {
|
||||
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
||||
//transition: transform 10s ease-in-out, opacity 10s ease-in-out;
|
||||
}
|
||||
|
||||
&.zoom-fade /* .bubble-content */ {
|
||||
//transform: scale(.8) translateZ(0);
|
||||
transform: scale3d(.8, .8, 1) translateX(0);
|
||||
//transform: scale(.8) translateX(0);
|
||||
opacity: 0;
|
||||
@ -1594,7 +1601,7 @@ $bubble-margin: .25rem;
|
||||
.bubbles.is-selecting & {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform-origin: bottom;
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@ -1603,6 +1610,7 @@ $bubble-margin: .25rem;
|
||||
|
||||
.bubbles.is-selecting:not(.backwards) & {
|
||||
transform: scale3d(.76, .76, 1);
|
||||
transition: transform var(--transition-standard-in);
|
||||
}
|
||||
|
||||
// @include respond-to(handhelds) {
|
||||
@ -1789,22 +1797,23 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
@include respond-to(not-handhelds) {
|
||||
transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
|
||||
@include respond-to(medium-screens) {
|
||||
transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
|
||||
|
||||
@include respond-to(no-floating-left-sidebar) {
|
||||
&.zoom-fade {
|
||||
transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
|
||||
}
|
||||
|
||||
//@include respond-to(no-floating-left-sidebar) {
|
||||
body.is-right-column-shown & {
|
||||
transform: translateX(0);
|
||||
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
||||
transform: scale(1) translateX(0);
|
||||
|
||||
&.zoom-fade {
|
||||
transform: scale3d(.8, .8, 1) translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.zoom-fade {
|
||||
transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
|
||||
}
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,10 +157,11 @@
|
||||
padding-right: inherit; */
|
||||
|
||||
@include respond-to(medium-screens) {
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
|
||||
body.is-right-column-shown & {
|
||||
transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
|
||||
transition: transform var(--transition-standard-in);
|
||||
}
|
||||
|
||||
body.animation-level-0 & {
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
.checkbox-caption {
|
||||
position: relative;
|
||||
padding-left: 3.3125rem;
|
||||
padding-left: 3.375rem;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-height: 24px;
|
||||
@ -329,14 +329,14 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color .2s;
|
||||
transition: background-color .1s;
|
||||
margin: 0 var(--offset);
|
||||
|
||||
&:before {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--secondary-color);
|
||||
transition: border-color .2s, transform .2s;
|
||||
transition: border-color .1s, transform .1s;
|
||||
background-color: var(--surface-color);
|
||||
content: " ";
|
||||
transform: translateX(calc(var(--offset) * -1));
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
@font-face {
|
||||
font-family: "#{$tgico-font-family}";
|
||||
src:
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xc1ll') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xc1ll') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xc1ll#tgico') format('svg');
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?cbcfst') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?cbcfst') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?cbcfst#tgico') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
@ -87,11 +87,6 @@
|
||||
content: $tgico-archive;
|
||||
}
|
||||
}
|
||||
.tgico-arrow_back {
|
||||
&:before {
|
||||
content: $tgico-arrow_back;
|
||||
}
|
||||
}
|
||||
.tgico-arrow_down {
|
||||
&:before {
|
||||
content: $tgico-arrow_down;
|
||||
@ -257,6 +252,11 @@
|
||||
content: $tgico-delete_filled;
|
||||
}
|
||||
}
|
||||
.tgico-deletedaccount {
|
||||
&:before {
|
||||
content: $tgico-deletedaccount;
|
||||
}
|
||||
}
|
||||
.tgico-deleteleft {
|
||||
&:before {
|
||||
content: $tgico-deleteleft;
|
||||
@ -482,11 +482,6 @@
|
||||
content: $tgico-microphone;
|
||||
}
|
||||
}
|
||||
.tgico-microphone2 {
|
||||
&:before {
|
||||
content: $tgico-microphone2;
|
||||
}
|
||||
}
|
||||
.tgico-minus {
|
||||
&:before {
|
||||
content: $tgico-minus;
|
||||
@ -547,16 +542,6 @@
|
||||
content: $tgico-nosound;
|
||||
}
|
||||
}
|
||||
.tgico-notificationsoff {
|
||||
&:before {
|
||||
content: $tgico-notificationsoff;
|
||||
}
|
||||
}
|
||||
.tgico-notificationson {
|
||||
&:before {
|
||||
content: $tgico-notificationson;
|
||||
}
|
||||
}
|
||||
.tgico-passwordoff {
|
||||
&:before {
|
||||
content: $tgico-passwordoff;
|
||||
@ -577,11 +562,6 @@
|
||||
content: $tgico-phone;
|
||||
}
|
||||
}
|
||||
.tgico-photo {
|
||||
&:before {
|
||||
content: $tgico-photo;
|
||||
}
|
||||
}
|
||||
.tgico-pin {
|
||||
&:before {
|
||||
content: $tgico-pin;
|
||||
@ -652,11 +632,6 @@
|
||||
content: $tgico-reply;
|
||||
}
|
||||
}
|
||||
.tgico-revote {
|
||||
&:before {
|
||||
content: $tgico-revote;
|
||||
}
|
||||
}
|
||||
.tgico-saved {
|
||||
&:before {
|
||||
content: $tgico-saved;
|
||||
@ -797,11 +772,6 @@
|
||||
content: $tgico-username;
|
||||
}
|
||||
}
|
||||
.tgico-write {
|
||||
&:before {
|
||||
content: $tgico-write;
|
||||
}
|
||||
}
|
||||
.tgico-zoomin {
|
||||
&:before {
|
||||
content: $tgico-zoomin;
|
||||
|
||||
@ -29,40 +29,40 @@ $tgico-admin: "\e906";
|
||||
$tgico-animals: "\e907";
|
||||
$tgico-animations: "\e908";
|
||||
$tgico-archive: "\e909";
|
||||
$tgico-arrow_back: "\e90a";
|
||||
$tgico-arrow_down: "\e90b";
|
||||
$tgico-arrow_next: "\e90c";
|
||||
$tgico-attach: "\e90d";
|
||||
$tgico-bold: "\e90e";
|
||||
$tgico-botcom: "\e90f";
|
||||
$tgico-bots: "\e910";
|
||||
$tgico-bug: "\e911";
|
||||
$tgico-calendar: "\e912";
|
||||
$tgico-calendarfilter: "\e913";
|
||||
$tgico-camera: "\e914";
|
||||
$tgico-cameraadd: "\e915";
|
||||
$tgico-car: "\e916";
|
||||
$tgico-channel: "\e917";
|
||||
$tgico-channelviews: "\e918";
|
||||
$tgico-chatspinned: "\e919";
|
||||
$tgico-chatsplaceholder: "\e91a";
|
||||
$tgico-check1: "\e91b";
|
||||
$tgico-checkbox: "\e91c";
|
||||
$tgico-checkboxblock: "\e91d";
|
||||
$tgico-checkboxempty: "\e91e";
|
||||
$tgico-checkboxon: "\e91f";
|
||||
$tgico-checkretract: "\e920";
|
||||
$tgico-checkround: "\e921";
|
||||
$tgico-close: "\e922";
|
||||
$tgico-clouddownload: "\e923";
|
||||
$tgico-colorize: "\e924";
|
||||
$tgico-comments: "\e925";
|
||||
$tgico-commentssticker: "\e926";
|
||||
$tgico-copy: "\e927";
|
||||
$tgico-darkmode: "\e928";
|
||||
$tgico-data: "\e929";
|
||||
$tgico-delete: "\e92a";
|
||||
$tgico-delete_filled: "\e92b";
|
||||
$tgico-arrow_down: "\e90a";
|
||||
$tgico-arrow_next: "\e90b";
|
||||
$tgico-attach: "\e90c";
|
||||
$tgico-bold: "\e90d";
|
||||
$tgico-botcom: "\e90e";
|
||||
$tgico-bots: "\e90f";
|
||||
$tgico-bug: "\e910";
|
||||
$tgico-calendar: "\e911";
|
||||
$tgico-calendarfilter: "\e912";
|
||||
$tgico-camera: "\e913";
|
||||
$tgico-cameraadd: "\e914";
|
||||
$tgico-car: "\e915";
|
||||
$tgico-channel: "\e916";
|
||||
$tgico-channelviews: "\e917";
|
||||
$tgico-chatspinned: "\e918";
|
||||
$tgico-chatsplaceholder: "\e919";
|
||||
$tgico-check1: "\e91a";
|
||||
$tgico-checkbox: "\e91b";
|
||||
$tgico-checkboxblock: "\e91c";
|
||||
$tgico-checkboxempty: "\e91d";
|
||||
$tgico-checkboxon: "\e91e";
|
||||
$tgico-checkretract: "\e91f";
|
||||
$tgico-checkround: "\e920";
|
||||
$tgico-close: "\e921";
|
||||
$tgico-clouddownload: "\e922";
|
||||
$tgico-colorize: "\e923";
|
||||
$tgico-comments: "\e924";
|
||||
$tgico-commentssticker: "\e925";
|
||||
$tgico-copy: "\e926";
|
||||
$tgico-darkmode: "\e927";
|
||||
$tgico-data: "\e928";
|
||||
$tgico-delete: "\e929";
|
||||
$tgico-delete_filled: "\e92a";
|
||||
$tgico-deletedaccount: "\e92b";
|
||||
$tgico-deleteleft: "\e92c";
|
||||
$tgico-deleteuser: "\e92d";
|
||||
$tgico-devices: "\e92e";
|
||||
@ -108,69 +108,63 @@ $tgico-menu: "\e955";
|
||||
$tgico-message: "\e956";
|
||||
$tgico-messageunread: "\e957";
|
||||
$tgico-microphone: "\e958";
|
||||
$tgico-microphone2: "\e959";
|
||||
$tgico-minus: "\e95a";
|
||||
$tgico-monospace: "\e95b";
|
||||
$tgico-more: "\e95c";
|
||||
$tgico-mute: "\e95d";
|
||||
$tgico-muted: "\e95e";
|
||||
$tgico-newchannel: "\e95f";
|
||||
$tgico-newchat_filled: "\e960";
|
||||
$tgico-newgroup: "\e961";
|
||||
$tgico-newprivate: "\e962";
|
||||
$tgico-next: "\e963";
|
||||
$tgico-noncontacts: "\e964";
|
||||
$tgico-nosound: "\e965";
|
||||
$tgico-notificationsoff: "\e966";
|
||||
$tgico-notificationson: "\e967";
|
||||
$tgico-passwordoff: "\e968";
|
||||
$tgico-pause: "\e969";
|
||||
$tgico-permissions: "\e96a";
|
||||
$tgico-phone: "\e96b";
|
||||
$tgico-photo: "\e96c";
|
||||
$tgico-pin: "\e96d";
|
||||
$tgico-pinlist: "\e96e";
|
||||
$tgico-pinned_filled: "\e96f";
|
||||
$tgico-pinnedchat: "\e970";
|
||||
$tgico-play: "\e971";
|
||||
$tgico-plus: "\e972";
|
||||
$tgico-poll: "\e973";
|
||||
$tgico-previous: "\e974";
|
||||
$tgico-radiooff: "\e975";
|
||||
$tgico-radioon: "\e976";
|
||||
$tgico-readchats: "\e977";
|
||||
$tgico-recent: "\e978";
|
||||
$tgico-replace: "\e979";
|
||||
$tgico-reply: "\e97a";
|
||||
$tgico-revote: "\e97b";
|
||||
$tgico-saved: "\e97c";
|
||||
$tgico-savedmessages: "\e97d";
|
||||
$tgico-schedule: "\e97e";
|
||||
$tgico-scheduled: "\e97f";
|
||||
$tgico-search: "\e980";
|
||||
$tgico-select: "\e981";
|
||||
$tgico-send: "\e982";
|
||||
$tgico-send2: "\e983";
|
||||
$tgico-sending: "\e984";
|
||||
$tgico-sendingerror: "\e985";
|
||||
$tgico-settings: "\e986";
|
||||
$tgico-smallscreen: "\e987";
|
||||
$tgico-smile: "\e988";
|
||||
$tgico-sport: "\e989";
|
||||
$tgico-stickers: "\e98a";
|
||||
$tgico-stop: "\e98b";
|
||||
$tgico-strikethrough: "\e98c";
|
||||
$tgico-textedit: "\e98d";
|
||||
$tgico-tip: "\e98e";
|
||||
$tgico-unarchive: "\e98f";
|
||||
$tgico-underline: "\e990";
|
||||
$tgico-unlock: "\e991";
|
||||
$tgico-unmute: "\e992";
|
||||
$tgico-unpin: "\e993";
|
||||
$tgico-unread: "\e994";
|
||||
$tgico-up: "\e995";
|
||||
$tgico-user: "\e996";
|
||||
$tgico-username: "\e997";
|
||||
$tgico-write: "\e998";
|
||||
$tgico-zoomin: "\e999";
|
||||
$tgico-zoomout: "\e99a";
|
||||
$tgico-minus: "\e959";
|
||||
$tgico-monospace: "\e95a";
|
||||
$tgico-more: "\e95b";
|
||||
$tgico-mute: "\e95c";
|
||||
$tgico-muted: "\e95d";
|
||||
$tgico-newchannel: "\e95e";
|
||||
$tgico-newchat_filled: "\e95f";
|
||||
$tgico-newgroup: "\e960";
|
||||
$tgico-newprivate: "\e961";
|
||||
$tgico-next: "\e962";
|
||||
$tgico-noncontacts: "\e963";
|
||||
$tgico-nosound: "\e964";
|
||||
$tgico-passwordoff: "\e965";
|
||||
$tgico-pause: "\e966";
|
||||
$tgico-permissions: "\e967";
|
||||
$tgico-phone: "\e968";
|
||||
$tgico-pin: "\e969";
|
||||
$tgico-pinlist: "\e96a";
|
||||
$tgico-pinned_filled: "\e96b";
|
||||
$tgico-pinnedchat: "\e96c";
|
||||
$tgico-play: "\e96d";
|
||||
$tgico-plus: "\e96e";
|
||||
$tgico-poll: "\e96f";
|
||||
$tgico-previous: "\e970";
|
||||
$tgico-radiooff: "\e971";
|
||||
$tgico-radioon: "\e972";
|
||||
$tgico-readchats: "\e973";
|
||||
$tgico-recent: "\e974";
|
||||
$tgico-replace: "\e975";
|
||||
$tgico-reply: "\e976";
|
||||
$tgico-saved: "\e977";
|
||||
$tgico-savedmessages: "\e978";
|
||||
$tgico-schedule: "\e979";
|
||||
$tgico-scheduled: "\e97a";
|
||||
$tgico-search: "\e97b";
|
||||
$tgico-select: "\e97c";
|
||||
$tgico-send: "\e97d";
|
||||
$tgico-send2: "\e97e";
|
||||
$tgico-sending: "\e97f";
|
||||
$tgico-sendingerror: "\e980";
|
||||
$tgico-settings: "\e981";
|
||||
$tgico-smallscreen: "\e982";
|
||||
$tgico-smile: "\e983";
|
||||
$tgico-sport: "\e984";
|
||||
$tgico-stickers: "\e985";
|
||||
$tgico-stop: "\e986";
|
||||
$tgico-strikethrough: "\e987";
|
||||
$tgico-textedit: "\e988";
|
||||
$tgico-tip: "\e989";
|
||||
$tgico-unarchive: "\e98a";
|
||||
$tgico-underline: "\e98b";
|
||||
$tgico-unlock: "\e98c";
|
||||
$tgico-unmute: "\e98d";
|
||||
$tgico-unpin: "\e98e";
|
||||
$tgico-unread: "\e98f";
|
||||
$tgico-up: "\e990";
|
||||
$tgico-user: "\e991";
|
||||
$tgico-username: "\e992";
|
||||
$tgico-zoomin: "\e993";
|
||||
$tgico-zoomout: "\e994";
|
||||
|
||||
@ -350,8 +350,10 @@
|
||||
}
|
||||
|
||||
.btn-corner {
|
||||
&.menu-open:before {
|
||||
content: $tgico-close;
|
||||
&:not(.menu-open) .tgico-newchat_filled,
|
||||
&.menu-open .tgico-close {
|
||||
animation: grow-icon .4s forwards ease-in-out !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
@ -486,6 +488,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.language-container {
|
||||
.sidebar-left-section {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.new-group-container {
|
||||
.search-group {
|
||||
margin-top: .5rem;
|
||||
@ -493,8 +501,16 @@
|
||||
}
|
||||
|
||||
.edit-folder-container {
|
||||
.folder-category-button:nth-child(n+2) {
|
||||
pointer-events: none;
|
||||
.chatlist {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.folder-categories {
|
||||
.folder-category-button {
|
||||
&:nth-child(n+2) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -574,22 +590,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.edit-folder-container {
|
||||
.sidebar-left-h2 {
|
||||
padding: 7px 24px 15px 24px;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 7px 16px 15px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-folders-container {
|
||||
.sidebar-left-section {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* &-name {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
@ -643,28 +653,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left-h2 {
|
||||
padding: 21px 24px 8px;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
width: 100%;
|
||||
padding: 21px 16px 8px;
|
||||
}
|
||||
.input-wrapper {
|
||||
margin-bottom: .125rem !important;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
margin-bottom: 10px !important;
|
||||
.sidebar-left-section {
|
||||
padding-bottom: 0rem;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
li {
|
||||
padding: 9px 11px;
|
||||
padding: 9px 12px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.user-caption {
|
||||
padding: 3px 28px 6px;
|
||||
padding: 3px 28px 6px 27px;
|
||||
}
|
||||
|
||||
p span {
|
||||
@ -673,32 +682,14 @@
|
||||
}
|
||||
|
||||
.folder-categories {
|
||||
width: 100%;
|
||||
|
||||
.checkbox-field {
|
||||
position: absolute;
|
||||
right: 1.625rem !important;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
right: 1rem !important;
|
||||
}
|
||||
right: 1.125rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-category-button {
|
||||
display: flex;
|
||||
padding: 0 1.5rem;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
border-radius: 0;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 0 1.125rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: #797d82;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-forward, .included-chatlist-container {
|
||||
@ -723,16 +714,24 @@
|
||||
}
|
||||
|
||||
.included-chatlist-container {
|
||||
.sidebar-left-h2 {
|
||||
padding: 6px 24px 8px 24px;
|
||||
.sidebar-left-section {
|
||||
padding-bottom: 0;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 6px 16px 8px 16px;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.chatlist {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selector {
|
||||
ul {
|
||||
.chatlist {
|
||||
.checkbox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -742,10 +741,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-category-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.search-group-recent {
|
||||
@ -875,7 +870,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
padding: 0 1.1875rem;
|
||||
padding: 0 1.125rem;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
width: var(--right-column-width);
|
||||
transition: transform var(--layer-transition);
|
||||
transition: transform var(--transition-standard-out);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
@ -35,6 +35,7 @@
|
||||
} */
|
||||
|
||||
body.is-right-column-shown:not(.is-left-column-shown) & {
|
||||
transition: transform var(--transition-standard-in);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@ -66,7 +67,7 @@
|
||||
flex: 0 0 auto;
|
||||
|
||||
.sidebar-close-button.tgico:before {
|
||||
content: $tgico-arrow_back;
|
||||
content: $tgico-left;
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
content: $tgico-close;
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
> hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -41,8 +41,14 @@ $chat-padding-handhelds: .5rem;
|
||||
--z-below: -1;
|
||||
--hover-alpha: #{$hover-alpha};
|
||||
|
||||
--transition-standard-easing: cubic-bezier(.4, .0, .2, 1);
|
||||
--transition-standard-in-time: .25s;
|
||||
--transition-standard-out-time: .2s;
|
||||
--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);
|
||||
--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);
|
||||
|
||||
--pm-transition: .2s ease-in-out;
|
||||
--layer-transition: .2s ease-in-out;
|
||||
--layer-transition: .2s cubic-bezier(.4, .0, .2, 1);
|
||||
--slide-header-transition: .4s ease-in-out;
|
||||
--tabs-transition: .25s ease-in-out;
|
||||
--btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user