Night theme improvements
|
@ -2515,6 +2515,8 @@ export default class ChatBubbles {
|
||||||
|
|
||||||
if(canHaveTail) {
|
if(canHaveTail) {
|
||||||
bubble.classList.add('can-have-tail');
|
bubble.classList.add('can-have-tail');
|
||||||
|
|
||||||
|
bubbleContainer.append(generateTail());
|
||||||
}
|
}
|
||||||
|
|
||||||
return bubble;
|
return bubble;
|
||||||
|
@ -3097,4 +3099,19 @@ export default class ChatBubbles {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function generateTail() {
|
||||||
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||||
|
svg.setAttributeNS(null, 'viewBox', '0 0 11 20');
|
||||||
|
svg.setAttributeNS(null, 'width', '11');
|
||||||
|
svg.setAttributeNS(null, 'height', '20');
|
||||||
|
svg.classList.add('bubble-tail');
|
||||||
|
|
||||||
|
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||||
|
use.setAttributeNS(null, 'href', '#message-tail-filled');
|
||||||
|
|
||||||
|
svg.append(use);
|
||||||
|
|
||||||
|
return svg;
|
||||||
|
}
|
||||||
|
|
|
@ -39,6 +39,7 @@ import { tsNow } from '../../helpers/date';
|
||||||
import appNavigationController from '../appNavigationController';
|
import appNavigationController from '../appNavigationController';
|
||||||
import { isMobile } from '../../helpers/userAgent';
|
import { isMobile } from '../../helpers/userAgent';
|
||||||
import { i18n } from '../../lib/langPack';
|
import { i18n } from '../../lib/langPack';
|
||||||
|
import { generateTail } from './bubbles';
|
||||||
|
|
||||||
const RECORD_MIN_TIME = 500;
|
const RECORD_MIN_TIME = 500;
|
||||||
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
|
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
|
||||||
|
@ -136,6 +137,9 @@ export default class ChatInput {
|
||||||
this.rowsWrapper = document.createElement('div');
|
this.rowsWrapper = document.createElement('div');
|
||||||
this.rowsWrapper.classList.add('rows-wrapper', 'chat-input-wrapper');
|
this.rowsWrapper.classList.add('rows-wrapper', 'chat-input-wrapper');
|
||||||
|
|
||||||
|
const tail = generateTail();
|
||||||
|
this.rowsWrapper.append(tail);
|
||||||
|
|
||||||
const fakeRowsWrapper = this.fakeRowsWrapper = document.createElement('div');
|
const fakeRowsWrapper = this.fakeRowsWrapper = document.createElement('div');
|
||||||
fakeRowsWrapper.classList.add('fake-wrapper', 'fake-rows-wrapper');
|
fakeRowsWrapper.classList.add('fake-wrapper', 'fake-rows-wrapper');
|
||||||
|
|
||||||
|
|
|
@ -44,16 +44,17 @@ export default class PopupStickers extends PopupElement {
|
||||||
div.classList.add('sticker-set');
|
div.classList.add('sticker-set');
|
||||||
|
|
||||||
this.stickersDiv = document.createElement('div');
|
this.stickersDiv = document.createElement('div');
|
||||||
this.stickersDiv.classList.add('sticker-set-stickers');
|
this.stickersDiv.classList.add('sticker-set-stickers', 'is-loading');
|
||||||
|
|
||||||
putPreloader(this.stickersDiv);
|
putPreloader(this.stickersDiv, true);
|
||||||
|
|
||||||
this.stickersFooter = document.createElement('div');
|
this.stickersFooter = document.createElement('div');
|
||||||
this.stickersFooter.classList.add('sticker-set-footer');
|
this.stickersFooter.classList.add('sticker-set-footer');
|
||||||
|
|
||||||
div.append(this.stickersDiv);
|
div.append(this.stickersDiv);
|
||||||
|
|
||||||
this.stickersFooter.append(i18n('Loading'));
|
const btn = Button('btn-primary btn-primary-transparent disable-hover', {noRipple: true, text: 'Loading'});
|
||||||
|
this.stickersFooter.append(btn);
|
||||||
|
|
||||||
this.body.append(div);
|
this.body.append(div);
|
||||||
const scrollable = new Scrollable(this.body);
|
const scrollable = new Scrollable(this.body);
|
||||||
|
@ -98,15 +99,15 @@ export default class PopupStickers extends PopupElement {
|
||||||
animationIntersector.setOnlyOnePlayableGroup(ANIMATION_GROUP);
|
animationIntersector.setOnlyOnePlayableGroup(ANIMATION_GROUP);
|
||||||
|
|
||||||
this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title);
|
this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title);
|
||||||
!set.set.installed_date ? this.stickersFooter.classList.add('add') : this.stickersFooter.classList.remove('add');
|
this.stickersFooter.classList.toggle('add', !set.set.installed_date);
|
||||||
|
|
||||||
let button: HTMLElement;
|
let button: HTMLElement;
|
||||||
if(set.set.hasOwnProperty('installed_date')) {
|
if(set.set.installed_date) {
|
||||||
button = Button('btn-primary btn-primary-transparent danger', {noRipple: true});
|
button = Button('btn-primary btn-primary-transparent danger', {noRipple: true});
|
||||||
button.append(i18n('StickerPack.Remove', [set.set.count]));
|
button.append(i18n('RemoveStickersCount', [i18n('Stickers', [set.set.count])]));
|
||||||
} else {
|
} else {
|
||||||
button = Button('btn-primary btn-color-primary', {noRipple: true});
|
button = Button('btn-primary btn-color-primary', {noRipple: true});
|
||||||
button.append(i18n('StickerPack.Add1', [set.set.count]));
|
button.append(i18n('AddStickersCount', [i18n('Stickers', [set.set.count])]));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.stickersFooter.textContent = '';
|
this.stickersFooter.textContent = '';
|
||||||
|
@ -120,6 +121,7 @@ export default class PopupStickers extends PopupElement {
|
||||||
|
|
||||||
const lazyLoadQueue = new LazyLoadQueue();
|
const lazyLoadQueue = new LazyLoadQueue();
|
||||||
|
|
||||||
|
this.stickersDiv.classList.remove('is-loading');
|
||||||
this.stickersDiv.innerHTML = '';
|
this.stickersDiv.innerHTML = '';
|
||||||
for(let doc of set.documents) {
|
for(let doc of set.documents) {
|
||||||
if(doc._ === 'documentEmpty') {
|
if(doc._ === 'documentEmpty') {
|
||||||
|
|
|
@ -147,7 +147,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
|
||||||
//console.log('ripple touchstart', e);
|
//console.log('ripple touchstart', e);
|
||||||
if(e.touches.length > 1
|
if(e.touches.length > 1
|
||||||
|| touchStartFired
|
|| touchStartFired
|
||||||
|| ((e.target as HTMLElement).tagName === 'BUTTON' && e.target !== elem)
|
|| (['BUTTON', 'A'].includes((e.target as HTMLElement).tagName) && e.target !== elem)
|
||||||
|| findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {
|
|| findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -177,7 +177,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
|
||||||
}
|
}
|
||||||
//console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') === r);
|
//console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') === r);
|
||||||
|
|
||||||
if(elem.dataset.ripple === '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {
|
if(elem.dataset.ripple === '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r || (e.target as HTMLElement).tagName === 'A') {
|
||||||
return false;
|
return false;
|
||||||
} else if(touchStartFired) {
|
} else if(touchStartFired) {
|
||||||
touchStartFired = false;
|
touchStartFired = false;
|
||||||
|
|
|
@ -113,14 +113,21 @@ export class AppSidebarLeft extends SidebarSlider {
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
checkboxField: new CheckboxField({toggle: true})
|
checkboxField: new CheckboxField({
|
||||||
|
toggle: true,
|
||||||
|
stateKey: 'settings.nightTheme',
|
||||||
|
})
|
||||||
}, {
|
}, {
|
||||||
icon: 'lamp',
|
icon: 'lamp',
|
||||||
text: 'Animations',
|
text: 'Animations',
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
checkboxField: new CheckboxField({toggle: true, checked: true})
|
checkboxField: new CheckboxField({
|
||||||
|
toggle: true,
|
||||||
|
checked: true,
|
||||||
|
stateKey: 'settings.animationsEnabled',
|
||||||
|
})
|
||||||
}, {
|
}, {
|
||||||
icon: 'help',
|
icon: 'help',
|
||||||
text: 'SettingsHelp',
|
text: 'SettingsHelp',
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { generateSection } from "..";
|
||||||
import { averageColor } from "../../../helpers/averageColor";
|
import { averageColor } from "../../../helpers/averageColor";
|
||||||
import blur from "../../../helpers/blur";
|
import blur from "../../../helpers/blur";
|
||||||
import { deferredPromise } from "../../../helpers/cancellablePromise";
|
import { deferredPromise } from "../../../helpers/cancellablePromise";
|
||||||
import { rgbToHsl } from "../../../helpers/color";
|
import { highlightningColor, rgbToHsl } from "../../../helpers/color";
|
||||||
import { attachClickEvent, findUpClassName } from "../../../helpers/dom";
|
import { attachClickEvent, findUpClassName } from "../../../helpers/dom";
|
||||||
import { AccountWallPapers, WallPaper } from "../../../layer";
|
import { AccountWallPapers, WallPaper } from "../../../layer";
|
||||||
import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsManager";
|
import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsManager";
|
||||||
|
@ -56,18 +56,6 @@ export default class AppBackgroundTab extends SliderSuperTab {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453
|
|
||||||
const highlightningColor = (pixel: Uint8ClampedArray) => {
|
|
||||||
let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]);
|
|
||||||
if(s > 0.0) {
|
|
||||||
s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s));
|
|
||||||
}
|
|
||||||
l = Math.max(0.0, l * 0.65);
|
|
||||||
|
|
||||||
const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`;
|
|
||||||
return hsla;
|
|
||||||
};
|
|
||||||
|
|
||||||
let tempId = 0;
|
let tempId = 0;
|
||||||
const setBackgroundDocument = (slug: string, doc: MyDocument) => {
|
const setBackgroundDocument = (slug: string, doc: MyDocument) => {
|
||||||
let _tempId = ++tempId;
|
let _tempId = ++tempId;
|
||||||
|
|
|
@ -132,7 +132,11 @@ export default class AppSharedMediaTab extends SliderSuperTab {
|
||||||
title: ' ',
|
title: ' ',
|
||||||
subtitleLangKey: 'UserBio',
|
subtitleLangKey: 'UserBio',
|
||||||
icon: 'info',
|
icon: 'info',
|
||||||
clickable: () => {
|
clickable: (e) => {
|
||||||
|
if((e.target as HTMLElement).tagName === 'A') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
appProfileManager.getProfileByPeerId(this.peerId).then(full => {
|
appProfileManager.getProfileByPeerId(this.peerId).then(full => {
|
||||||
copyTextToClipboard(full.about);
|
copyTextToClipboard(full.about);
|
||||||
toast(I18n.format('BioCopied', true));
|
toast(I18n.format('BioCopied', true));
|
||||||
|
@ -140,6 +144,8 @@ export default class AppSharedMediaTab extends SliderSuperTab {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.profileElements.bio.title.classList.add('pre-wrap');
|
||||||
|
|
||||||
this.profileElements.username = new Row({
|
this.profileElements.username = new Row({
|
||||||
title: ' ',
|
title: ' ',
|
||||||
subtitleLangKey: 'Username',
|
subtitleLangKey: 'Username',
|
||||||
|
|
|
@ -97,7 +97,7 @@ export default class AppStickersTab extends SliderSuperTab {
|
||||||
|
|
||||||
const countDiv = document.createElement('div');
|
const countDiv = document.createElement('div');
|
||||||
countDiv.classList.add('sticker-set-count');
|
countDiv.classList.add('sticker-set-count');
|
||||||
countDiv.append(i18n('Stickers.Count', [set.count]));
|
countDiv.append(i18n('Stickers', [set.count]));
|
||||||
details.append(countDiv);
|
details.append(countDiv);
|
||||||
|
|
||||||
const button = document.createElement('button');
|
const button = document.createElement('button');
|
||||||
|
|
|
@ -28,4 +28,16 @@ export function rgbToHsl(r: number, g: number, b: number) {
|
||||||
s: s,
|
s: s,
|
||||||
l: l,
|
l: l,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453
|
||||||
|
export function highlightningColor(pixel: Uint8ClampedArray) {
|
||||||
|
let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]);
|
||||||
|
if(s > 0.0) {
|
||||||
|
s = Math.min(1.0, s + 0.05 + 0.1 * (1.0 - s));
|
||||||
|
}
|
||||||
|
l = Math.max(0.0, l * 0.65);
|
||||||
|
|
||||||
|
const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`;
|
||||||
|
return hsla;
|
||||||
|
};
|
||||||
|
|
|
@ -83,6 +83,11 @@
|
||||||
<path id="logo" fill="#50A2E9" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
|
<path id="logo" fill="#50A2E9" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
|
||||||
<path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
|
<path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
|
||||||
<path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
|
<path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
|
||||||
|
<symbol id="message-tail-filled" viewBox="0 0 11 20">
|
||||||
|
<g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd">
|
||||||
|
<path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>
|
||||||
|
</g>
|
||||||
|
</symbol>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
<div id="main-columns" class="tabs-container" data-animation="navigation">
|
<div id="main-columns" class="tabs-container" data-animation="navigation">
|
||||||
|
|
18
src/lang.ts
|
@ -79,10 +79,6 @@ const lang = {
|
||||||
"Link.Taken": "Link is already taken",
|
"Link.Taken": "Link is already taken",
|
||||||
"Link.Invalid": "Link is invalid",
|
"Link.Invalid": "Link is invalid",
|
||||||
"StickersTab.SearchPlaceholder": "Search Stickers",
|
"StickersTab.SearchPlaceholder": "Search Stickers",
|
||||||
"StickerPack.Remove": {
|
|
||||||
"one_value": "Remove %d Sticker",
|
|
||||||
"other_value": "Remove %d Stickers"
|
|
||||||
},
|
|
||||||
"ForwardedFrom": "Forwarded from %s",
|
"ForwardedFrom": "Forwarded from %s",
|
||||||
"Popup.Avatar.Title": "Drag to Reposition",
|
"Popup.Avatar.Title": "Drag to Reposition",
|
||||||
"Popup.Unpin.AllTitle": "Unpin all messages",
|
"Popup.Unpin.AllTitle": "Unpin all messages",
|
||||||
|
@ -377,6 +373,12 @@ const lang = {
|
||||||
"RecoveryEmailTitle": "Recovery Email",
|
"RecoveryEmailTitle": "Recovery Email",
|
||||||
"ResendCode": "Resend code",
|
"ResendCode": "Resend code",
|
||||||
"PasswordAsHintError": "Hint must be different from your password",
|
"PasswordAsHintError": "Hint must be different from your password",
|
||||||
|
"AddStickersCount": "ADD %1$s",
|
||||||
|
"RemoveStickersCount": "REMOVE %1$s",
|
||||||
|
"Stickers": {
|
||||||
|
"one_value": "%1$d sticker",
|
||||||
|
"other_value": "%1$d stickers"
|
||||||
|
},
|
||||||
|
|
||||||
// * macos
|
// * macos
|
||||||
"AccountSettings.Filters": "Chat Folders",
|
"AccountSettings.Filters": "Chat Folders",
|
||||||
|
@ -480,14 +482,6 @@ const lang = {
|
||||||
"Telegram.InstalledStickerPacksController": "Stickers",
|
"Telegram.InstalledStickerPacksController": "Stickers",
|
||||||
"Telegram.NotificationSettingsViewController": "Notifications",
|
"Telegram.NotificationSettingsViewController": "Notifications",
|
||||||
"Telegram.PeerInfoController": "Info",
|
"Telegram.PeerInfoController": "Info",
|
||||||
"StickerPack.Add1": {
|
|
||||||
"one_value": "Add %d Sticker",
|
|
||||||
"other_value": "Add %d Stickers"
|
|
||||||
},
|
|
||||||
"Stickers.Count": {
|
|
||||||
"one_value": "%d sticker",
|
|
||||||
"other_value": "%d stickers"
|
|
||||||
},
|
|
||||||
"Stickers.SearchAdd": "Add",
|
"Stickers.SearchAdd": "Add",
|
||||||
"Stickers.SearchAdded": "Added",
|
"Stickers.SearchAdded": "Added",
|
||||||
"Stickers.SuggestStickers": "Suggest Stickers by Emoji",
|
"Stickers.SuggestStickers": "Suggest Stickers by Emoji",
|
||||||
|
|
|
@ -40,6 +40,7 @@ import appNotificationsManager from './appNotificationsManager';
|
||||||
import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
|
import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
|
||||||
import { i18n } from '../langPack';
|
import { i18n } from '../langPack';
|
||||||
import { SendMessageAction } from '../../layer';
|
import { SendMessageAction } from '../../layer';
|
||||||
|
import { highlightningColor } from '../../helpers/color';
|
||||||
|
|
||||||
//console.log('appImManager included33!');
|
//console.log('appImManager included33!');
|
||||||
|
|
||||||
|
@ -250,12 +251,18 @@ export class AppImManager {
|
||||||
private setSettings = () => {
|
private setSettings = () => {
|
||||||
document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
|
document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
|
||||||
|
|
||||||
if(rootScope.settings.background.highlightningColor) {
|
if(rootScope.settings.nightTheme) {
|
||||||
document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
|
document.documentElement.style.setProperty('--message-highlightning-color', highlightningColor(new Uint8ClampedArray([15, 15, 15, 1])));
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.style.removeProperty('--message-highlightning-color');
|
if(rootScope.settings.background.highlightningColor) {
|
||||||
|
document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor);
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.removeProperty('--message-highlightning-color');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.documentElement.classList.toggle('night', rootScope.settings.nightTheme);
|
||||||
|
|
||||||
document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
|
document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
|
||||||
document.body.classList.toggle('animation-level-1', false);
|
document.body.classList.toggle('animation-level-1', false);
|
||||||
document.body.classList.toggle('animation-level-2', rootScope.settings.animationsEnabled);
|
document.body.classList.toggle('animation-level-2', rootScope.settings.animationsEnabled);
|
||||||
|
|
|
@ -66,7 +66,8 @@ export type State = Partial<{
|
||||||
},
|
},
|
||||||
notifications: {
|
notifications: {
|
||||||
sound: boolean
|
sound: boolean
|
||||||
}
|
},
|
||||||
|
nightTheme: boolean,
|
||||||
},
|
},
|
||||||
drafts: AppDraftsManager['drafts']
|
drafts: AppDraftsManager['drafts']
|
||||||
}>;
|
}>;
|
||||||
|
@ -115,7 +116,8 @@ export const STATE_INIT: State = {
|
||||||
},
|
},
|
||||||
notifications: {
|
notifications: {
|
||||||
sound: false
|
sound: false
|
||||||
}
|
},
|
||||||
|
nightTheme: false
|
||||||
},
|
},
|
||||||
drafts: {}
|
drafts: {}
|
||||||
};
|
};
|
||||||
|
|
|
@ -143,6 +143,10 @@ Utility Classes
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pre-wrap {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
/* .flex-grow {
|
/* .flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -288,6 +288,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-transparent {
|
&-transparent {
|
||||||
|
color: var(--primary-color);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
@include hover() {
|
@include hover() {
|
||||||
|
|
|
@ -664,7 +664,7 @@ $chat-helper-size: 39px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&-count {
|
&-count {
|
||||||
color: #000;
|
color: var(--primary-text-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -673,7 +673,7 @@ $chat-helper-size: 39px;
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
margin: 0 5px 0 6px;
|
margin: 0 5px 0 6px;
|
||||||
color: #3f454a;
|
//color: #3f454a;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
|
@ -760,14 +760,14 @@ $chat-helper-size: 39px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
.bubble-tail {
|
||||||
transition: transform .1s;
|
transition: transform .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-centering:not(.backwards), &.is-centered {
|
&.is-centering:not(.backwards), &.is-centered {
|
||||||
border-bottom-right-radius: 12px;
|
border-bottom-right-radius: 12px;
|
||||||
|
|
||||||
&:after {
|
.bubble-tail {
|
||||||
transform: scaleX(-1) translateX(#{.5625rem * 2});
|
transform: scaleX(-1) translateX(#{.5625rem * 2});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -786,17 +786,18 @@ $chat-helper-size: 39px;
|
||||||
--padding-horizontal: .5rem;
|
--padding-horizontal: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
.bubble-tail {
|
||||||
content: '';
|
//content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
//bottom: -.1875rem;
|
//bottom: -.1875rem;
|
||||||
bottom: -.1925rem;
|
bottom: -1px;
|
||||||
right: -8.4px;
|
right: -8.4px;
|
||||||
width: .5625rem;
|
width: 11px;
|
||||||
height: 1.25rem;
|
height: 20px;
|
||||||
background-repeat: no-repeat no-repeat;
|
//background-repeat: no-repeat no-repeat;
|
||||||
background-position: 0 100%;
|
//background-position: 0 100%;
|
||||||
background-image: url('assets/img/msg-tail-left-blur.svg');
|
//background-image: url('assets/img/msg-tail-left-blur.svg');
|
||||||
|
fill: var(--surface-color);
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -102,11 +102,11 @@ $bubble-margin: .25rem;
|
||||||
margin-left: -50%;
|
margin-left: -50%;
|
||||||
margin-right: -50%;
|
margin-right: -50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #538BCC;
|
color: var(--primary-text-color);
|
||||||
line-height: 2.1;
|
line-height: 2.1;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
background-color: rgba(255, 255, 255, .95);
|
background-color: var(--surface-color);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -302,7 +302,7 @@ $bubble-margin: .25rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
color: var(--badge-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
//background: rgba(0, 0, 0, .16);
|
//background: rgba(0, 0, 0, .16);
|
||||||
background: var(--message-highlightning-color);
|
background: var(--message-highlightning-color);
|
||||||
|
@ -1339,29 +1339,39 @@ $bubble-margin: .25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-tail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&.can-have-tail.is-group-last .bubble-content:after {
|
//&.can-have-tail.is-group-last .bubble-content:after {
|
||||||
|
&.can-have-tail.is-group-last .bubble-tail {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
//bottom: 0;
|
//bottom: 0;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-repeat: no-repeat no-repeat;
|
//background-repeat: no-repeat no-repeat;
|
||||||
content: '';
|
//content: '';
|
||||||
background-size: 11px 20px;
|
//background-size: 11px 20px;
|
||||||
background-position-y: 1px;
|
//background-position-y: 1px;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
|
display: block;
|
||||||
|
fill: var(--message-background-color);
|
||||||
|
transform: translateY(1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.photo, &.video {
|
&.photo, &.video {
|
||||||
&.is-message-empty.is-group-last:not(.with-replies) {
|
&.is-message-empty.is-group-last:not(.with-replies) {
|
||||||
.bubble-content:after {
|
//.bubble-content:after {
|
||||||
|
.bubble-tail {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-message-empty.is-group-last.with-media-tail {
|
&.is-message-empty.is-group-last.with-media-tail {
|
||||||
.bubble-content:after {
|
//.bubble-content:after {
|
||||||
|
.bubble-tail {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1415,7 +1425,7 @@ $bubble-margin: .25rem;
|
||||||
|
|
||||||
&-footer {
|
&-footer {
|
||||||
height: 51px;
|
height: 51px;
|
||||||
border-top: 2px solid #e6e7ea;
|
border-top: 2px solid var(--border-color);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -1435,7 +1445,7 @@ $bubble-margin: .25rem;
|
||||||
margin-left: 9px;
|
margin-left: 9px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #1f88e3;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-avatars {
|
&-avatars {
|
||||||
|
@ -1445,7 +1455,7 @@ $bubble-margin: .25rem;
|
||||||
avatar-element {
|
avatar-element {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
border: 2px solid #fff;
|
border: 2px solid var(--surface-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 0; // * fix border blinking
|
z-index: 0; // * fix border blinking
|
||||||
|
|
||||||
|
@ -1609,11 +1619,15 @@ $bubble-margin: .25rem;
|
||||||
.bubble-content, .poll-footer-button {
|
.bubble-content, .poll-footer-button {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-tail {
|
||||||
|
margin-left: -8.4px;
|
||||||
|
}
|
||||||
|
|
||||||
.bubble-content:after {
|
/* .bubble-content:after {
|
||||||
margin-left: -8.4px;
|
margin-left: -8.4px;
|
||||||
background-image: url('assets/img/msg-tail-left.svg');
|
background-image: url('assets/img/msg-tail-left.svg');
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.can-have-tail) {
|
&:not(.can-have-tail) {
|
||||||
|
@ -1751,11 +1765,16 @@ $bubble-margin: .25rem;
|
||||||
.bubble-content, .poll-footer-button {
|
.bubble-content, .poll-footer-button {
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-tail {
|
||||||
|
right: -8.4px;
|
||||||
|
transform: translateY(1px) scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
.bubble-content:after {
|
/* .bubble-content:after {
|
||||||
right: -8.4px;
|
right: -8.4px;
|
||||||
background-image: url('assets/img/msg-tail-right.svg');
|
background-image: url('assets/img/msg-tail-right.svg');
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.can-have-tail) {
|
&:not(.can-have-tail) {
|
||||||
|
|
|
@ -20,8 +20,19 @@
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
background: #50a2e988;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
content: " ";
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: block;
|
||||||
|
background: var(--primary-color);
|
||||||
|
opacity: .53;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-bars {
|
&-bars {
|
||||||
|
@ -99,10 +110,6 @@
|
||||||
// line-height: 13px;
|
// line-height: 13px;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
&-subtitle {
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-media {
|
&-media {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
@ -178,7 +185,7 @@
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
background: #fff !important;
|
background: var(--surface-color) !important;
|
||||||
left: 0;
|
left: 0;
|
||||||
max-height: 100% !important;
|
max-height: 100% !important;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #fff;
|
background-color: var(--surface-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
.chat-search-count {
|
.chat-search-count {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
color: #949596;
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
& + .chat-input {
|
& + .chat-input {
|
||||||
|
@ -49,7 +49,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background-color: #fff;
|
background-color: var(--surface-color);
|
||||||
transition: .2s ease;
|
transition: .2s ease;
|
||||||
|
|
||||||
body.animation-level-0 & {
|
body.animation-level-0 & {
|
||||||
|
|
|
@ -122,7 +122,7 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
&-border {
|
&-border {
|
||||||
border: 2px solid #fff;
|
border: 2px solid var(--secondary-color);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
transform: translate(0, 0);
|
transform: translate(0, 0);
|
||||||
background-color: #fff;
|
background-color: var(--surface-color);
|
||||||
transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
|
transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -65,6 +65,7 @@
|
||||||
--border-width-top: 2px;
|
--border-width-top: 2px;
|
||||||
border: var(--border-width) solid #DADCE0;
|
border: var(--border-width) solid #DADCE0;
|
||||||
border-radius: $border-radius-medium;
|
border-radius: $border-radius-medium;
|
||||||
|
background-color: transparent;
|
||||||
//padding: 0 1rem;
|
//padding: 0 1rem;
|
||||||
padding: calc(var(--padding) - var(--border-width-top)) calc(var(--padding-horizontal) - var(--border-width));
|
padding: calc(var(--padding) - var(--border-width-top)) calc(var(--padding-horizontal) - var(--border-width));
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -298,7 +299,7 @@ input:focus, button:focus {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
transition: all .2s ease-out;
|
transition: opacity .2s ease-out, color .2s ease-out;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
|
@ -316,6 +317,8 @@ input:focus, button:focus {
|
||||||
> .tgico-close {
|
> .tgico-close {
|
||||||
right: 0px;
|
right: 0px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
|
||||||
&:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
|
&:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
|
|
|
@ -244,8 +244,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-menu {
|
@include respond-to(handhelds) {
|
||||||
@include respond-to(handhelds) {
|
.btn-menu {
|
||||||
margin-top: -.25rem;
|
margin-top: -.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -347,14 +347,14 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&:not(.is-hidden) {
|
&:not(.is-hidden) {
|
||||||
transform: translateZ(0px);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include respond-to(not-handhelds) {
|
@include respond-to(not-handhelds) {
|
||||||
html.no-touch &:hover .btn-corner:not(.is-hidden) {
|
html.no-touch &:hover .btn-corner:not(.is-hidden) {
|
||||||
transform: translateZ(0px);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -256,7 +256,7 @@ poll-element {
|
||||||
}
|
}
|
||||||
|
|
||||||
avatar-element {
|
avatar-element {
|
||||||
border: 1px solid #fff;
|
border: 1px solid var(--border-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
@ -31,9 +31,10 @@ html:not(.is-safari):not(.is-ios) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollable:hover::-webkit-scrollbar-thumb {
|
.scrollable:hover::-webkit-scrollbar-thumb {
|
||||||
height: 200px;
|
min-height: 5rem;
|
||||||
|
max-height: 12.5rem;
|
||||||
border-radius: $border-radius-medium;
|
border-radius: $border-radius-medium;
|
||||||
background-color: rgba(0, 0, 0, .2);
|
background-color: var(--scrollbar-color);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -96,4 +97,4 @@ html:not(.is-safari):not(.is-ios) {
|
||||||
/* html.is-safari &-padding {
|
/* html.is-safari &-padding {
|
||||||
margin-right: -6px;
|
margin-right: -6px;
|
||||||
} */
|
} */
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-user {
|
&-user {
|
||||||
color: #000;
|
color: var(--primary-text-color);
|
||||||
background-color: var(--light-secondary-text-color);
|
background-color: var(--light-secondary-text-color);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 0 17px 0px 0px;
|
padding: 0 17px 0px 0px;
|
||||||
|
@ -99,7 +99,7 @@
|
||||||
content: $tgico-close;
|
content: $tgico-close;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: #df3f40;
|
background-color: $color-error;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
@ -174,12 +174,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-field-round {
|
.checkbox-field-round {
|
||||||
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1.125rem;
|
right: 1.125rem;
|
||||||
--size: 1.25rem;
|
--size: 1.25rem;
|
||||||
|
|
||||||
.checkbox-box-border {
|
.checkbox-box-border {
|
||||||
border-color: #dadbdc;
|
|
||||||
z-index: unset;
|
z-index: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -99,15 +99,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-date:disabled {
|
&-date:disabled {
|
||||||
color: #c2c3c4;
|
opacity: .7 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon:not(:disabled) {
|
.btn-icon:not(:disabled) {
|
||||||
color: #000;
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon.active {
|
.btn-icon.active {
|
||||||
color: #fff;
|
color: var(--badge-text-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--primary-color) !important;
|
background-color: var(--primary-color) !important;
|
||||||
}
|
}
|
||||||
|
@ -129,10 +129,6 @@
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-close {
|
|
||||||
color: #52585d;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-container {
|
.popup-container {
|
||||||
|
@ -191,7 +187,7 @@
|
||||||
|
|
||||||
&-day {
|
&-day {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: black !important;
|
color: var(--primary-text-color) !important;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -228,8 +224,6 @@
|
||||||
|
|
||||||
&-controls {
|
&-controls {
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
color: #2a8ee4;
|
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
//opacity: 1;
|
//opacity: 1;
|
||||||
|
|
|
@ -83,7 +83,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-body {
|
&-body {
|
||||||
|
|
|
@ -59,6 +59,15 @@
|
||||||
@include respond-to(handhelds) {
|
@include respond-to(handhelds) {
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-loading {
|
||||||
|
min-height: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloader-circular {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sticker {
|
&-sticker {
|
||||||
|
|
|
@ -94,6 +94,18 @@ $chat-padding-handhelds: .5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin splitColor($property, $color, $light: true, $dark: true) {
|
||||||
|
--#{$property}: #{$color};
|
||||||
|
|
||||||
|
@if $light != false {
|
||||||
|
--light-#{$property}: #{hover-color($color)};
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $dark != false {
|
||||||
|
--dark-#{$property}: #{darken($color, $hover-alpha * 100)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
// * Day theme
|
// * Day theme
|
||||||
--body-background-color: #fff;
|
--body-background-color: #fff;
|
||||||
|
@ -101,22 +113,18 @@ $chat-padding-handhelds: .5rem;
|
||||||
--background-color: #fff;
|
--background-color: #fff;
|
||||||
--border-color: #dfe1e5;
|
--border-color: #dfe1e5;
|
||||||
--surface-color: #fff;
|
--surface-color: #fff;
|
||||||
|
--scrollbar-color: rgba(0, 0, 0, .2);
|
||||||
|
|
||||||
--input-search-background-color: #fff;
|
--input-search-background-color: #fff;
|
||||||
--input-search-border-color: #dfe1e5;
|
--input-search-border-color: #dfe1e5;
|
||||||
|
|
||||||
$primary-color: #3390ec;
|
@include splitColor(primary-color, #3390ec, true, true);
|
||||||
--primary-color: #{$primary-color};
|
|
||||||
--primary-text-color: #000;
|
--primary-text-color: #000;
|
||||||
|
|
||||||
--light-primary-color: #{hover-color($primary-color)};
|
|
||||||
--dark-primary-color: #{darken($primary-color, $hover-alpha * 100)};
|
|
||||||
|
|
||||||
$secondary-text-color: #707579;
|
|
||||||
--secondary-color: #c4c9cc;
|
--secondary-color: #c4c9cc;
|
||||||
--secondary-text-color: #707579;
|
@include splitColor(secondary-text-color, #707579, true, false);
|
||||||
|
|
||||||
--light-secondary-text-color: #{hover-color($secondary-text-color)};
|
@include splitColor(danger-color, #df3f40, true, false);
|
||||||
|
|
||||||
--avatar-online-color: #0ac630;
|
--avatar-online-color: #0ac630;
|
||||||
--chatlist-status-color: var(--avatar-online-color);
|
--chatlist-status-color: var(--avatar-online-color);
|
||||||
|
@ -140,22 +148,18 @@ html.night {
|
||||||
--background-color: #212121;
|
--background-color: #212121;
|
||||||
--border-color: #0f0f0f;
|
--border-color: #0f0f0f;
|
||||||
--surface-color: #212121;
|
--surface-color: #212121;
|
||||||
|
--scrollbar-color: rgba(255, 255, 255, .2);
|
||||||
|
|
||||||
--input-search-background-color: #181818;
|
--input-search-background-color: #181818;
|
||||||
--input-search-border-color: #2f2f2f;
|
--input-search-border-color: #2f2f2f;
|
||||||
|
|
||||||
$primary-color: #878afd;
|
@include splitColor(primary-color, #878afd, true, true);
|
||||||
--primary-color: #{$primary-color};
|
|
||||||
--primary-text-color: #fff;
|
--primary-text-color: #fff;
|
||||||
|
|
||||||
--light-primary-color: #{hover-color($primary-color)};
|
|
||||||
--dark-primary-color: #{darken($primary-color, $hover-alpha * 100)};
|
|
||||||
|
|
||||||
$secondary-text-color: #aaaaaa;
|
|
||||||
--secondary-color: #707579;
|
--secondary-color: #707579;
|
||||||
--secondary-text-color: #{$secondary-text-color};
|
@include splitColor(secondary-text-color, #aaaaaa, true, false);
|
||||||
|
|
||||||
--light-secondary-text-color: #{hover-color($secondary-text-color)};
|
@include splitColor(danger-color, #ff595a, true, false);
|
||||||
|
|
||||||
--avatar-online-color: #0ac630;
|
--avatar-online-color: #0ac630;
|
||||||
--chatlist-status-color: var(--primary-color);
|
--chatlist-status-color: var(--primary-color);
|
||||||
|
@ -347,6 +351,7 @@ html {
|
||||||
body {
|
body {
|
||||||
touch-action: pan-x pan-y;
|
touch-action: pan-x pan-y;
|
||||||
background-color: var(--body-background-color);
|
background-color: var(--body-background-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* body {
|
/* body {
|
||||||
|
@ -416,6 +421,7 @@ h4 {
|
||||||
input, [contenteditable=true] {
|
input, [contenteditable=true] {
|
||||||
caret-color: var(--primary-color);
|
caret-color: var(--primary-color);
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, textarea {
|
input, textarea {
|
||||||
|
@ -1167,6 +1173,11 @@ middle-ellipsis-element {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&-title-row {
|
&-title-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -1202,6 +1213,7 @@ middle-ellipsis-element {
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
BIN
tweb design/March 2021/Day.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
tweb design/March 2021/Day_Alert.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
tweb design/March 2021/Day_Appearance.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
tweb design/March 2021/Day_Menu.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
tweb design/March 2021/Day_Profile.png
Normal file
After Width: | Height: | Size: 3.2 MiB |
BIN
tweb design/March 2021/Day_Profile_Full.png
Normal file
After Width: | Height: | Size: 3.0 MiB |
BIN
tweb design/March 2021/Day_Settings.png
Normal file
After Width: | Height: | Size: 1.7 MiB |
BIN
tweb design/March 2021/Night.png
Normal file
After Width: | Height: | Size: 915 KiB |
BIN
tweb design/March 2021/Night_Alert.png
Normal file
After Width: | Height: | Size: 862 KiB |
BIN
tweb design/March 2021/Night_Appearance.png
Normal file
After Width: | Height: | Size: 596 KiB |
BIN
tweb design/March 2021/Night_Menu.png
Normal file
After Width: | Height: | Size: 739 KiB |
BIN
tweb design/March 2021/Night_Profile.png
Normal file
After Width: | Height: | Size: 2.9 MiB |
BIN
tweb design/March 2021/Night_Profile_Full.png
Normal file
After Width: | Height: | Size: 2.7 MiB |
BIN
tweb design/March 2021/Night_Settings.png
Normal file
After Width: | Height: | Size: 1.2 MiB |