Layout changes
Night theme at the very beginning
This commit is contained in:
Eduard Kuzmenko
parent
6475479390
commit
d40d7d0ca1
src
components
index.hbslang.tslib
scss
mixins
partials
_animatedIcon.scss_audio.scss_avatar.scss_badge.scss_button.scss_chat.scss_chatBubble.scss_chatDrop.scss_chatMarkupTooltip.scss_chatPinned.scss_chatTopbar.scss_chatlist.scss_checkbox.scss_ckin.scss_document.scss_emojiDropdown.scss_input.scss_leftSidebar.scss_mediaViewer.scss_peerTyping.scss_poll.scss_preloader.scss_rightSidebar.scss_selector.scss_sidebar.scss_slider.scss
style.scsspages
popups
@ -74,11 +74,15 @@ function wrapVoiceMessage(audioEl: AudioElement) {
|
||||
audioEl.classList.add('is-unread');
|
||||
}
|
||||
|
||||
if(message.pFlags.out) {
|
||||
audioEl.classList.add('is-out');
|
||||
}
|
||||
|
||||
const barWidth = 2;
|
||||
const barMargin = mediaSizes.isMobile ? 2 : 1;
|
||||
const barHeightMin = mediaSizes.isMobile ? 3 : 2;
|
||||
const barHeightMax = mediaSizes.isMobile ? 16 : 23;
|
||||
const availW = mediaSizes.isMobile ? 152 : 190;
|
||||
const barMargin = 2; //mediaSizes.isMobile ? 2 : 1;
|
||||
const barHeightMin = 4; //mediaSizes.isMobile ? 3 : 2;
|
||||
const barHeightMax = 23; //mediaSizes.isMobile ? 16 : 23;
|
||||
const availW = 150; //mediaSizes.isMobile ? 152 : 190;
|
||||
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.classList.add('audio-waveform');
|
||||
@ -114,7 +118,7 @@ function wrapVoiceMessage(audioEl: AudioElement) {
|
||||
const bar_value = Math.max(((maxValue * maxDelta) + ((normValue + 1) / 2)) / (normValue + 1), barHeightMin);
|
||||
|
||||
const h = `
|
||||
<rect x="${barX}" y="${barHeightMax - bar_value}" width="2" height="${bar_value}" rx="1" ry="1"></rect>
|
||||
<rect x="${barX}" y="${barHeightMax - bar_value}" width="${barWidth}" height="${bar_value}" rx="1" ry="1"></rect>
|
||||
`;
|
||||
html += h;
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { attachClickEvent, AttachClickOptions, cancelEvent, CLICK_EVENT_NAME } from "../helpers/dom";
|
||||
import ListenerSetter from "../helpers/listenerSetter";
|
||||
import { i18n, LangPackKey } from "../lib/langPack";
|
||||
import CheckboxField from "./checkboxField";
|
||||
import { closeBtnMenu } from "./misc";
|
||||
import { ripple } from "./ripple";
|
||||
|
||||
@ -9,7 +10,8 @@ export type ButtonMenuItemOptions = {
|
||||
text: LangPackKey,
|
||||
onClick: (e: MouseEvent | TouchEvent) => void,
|
||||
element?: HTMLElement,
|
||||
options?: AttachClickOptions
|
||||
options?: AttachClickOptions,
|
||||
checkboxField?: CheckboxField,
|
||||
/* , cancelEvent?: true */
|
||||
};
|
||||
|
||||
@ -20,7 +22,16 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'btn-menu-item tgico-' + icon;
|
||||
ripple(el);
|
||||
el.append(i18n(text));
|
||||
const t = i18n(text);
|
||||
t.classList.add('btn-menu-item-text');
|
||||
el.append(t);
|
||||
|
||||
if(options.checkboxField) {
|
||||
el.append(options.checkboxField.label);
|
||||
attachClickEvent(el, () => {
|
||||
options.checkboxField.checked = !options.checkboxField.checked;
|
||||
}, options.options);
|
||||
}
|
||||
|
||||
// * cancel keyboard close
|
||||
attachClickEvent(el, CLICK_EVENT_NAME !== 'click' ? (e) => {
|
||||
|
||||
@ -243,7 +243,7 @@ export default class ChatTopbar {
|
||||
this.avatarElement = new AvatarElement();
|
||||
this.avatarElement.setAttribute('dialog', '1');
|
||||
//this.avatarElement.setAttribute('clickable', '');
|
||||
this.avatarElement.classList.add('avatar-40', 'person-avatar');
|
||||
this.avatarElement.classList.add('avatar-42', 'person-avatar');
|
||||
|
||||
this.subtitle = document.createElement('div');
|
||||
this.subtitle.classList.add('info');
|
||||
|
||||
@ -8,6 +8,7 @@ export type CheckboxFieldOptions = {
|
||||
textArgs?: any[],
|
||||
name?: string,
|
||||
round?: boolean,
|
||||
toggle?: boolean,
|
||||
stateKey?: string,
|
||||
disabled?: boolean,
|
||||
checked?: boolean,
|
||||
@ -39,7 +40,7 @@ export default class CheckboxField {
|
||||
const input = this.input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
if(options.name) {
|
||||
input.id = 'input-' + name;
|
||||
input.id = 'input-' + options.name;
|
||||
}
|
||||
|
||||
if(options.checked) {
|
||||
@ -65,26 +66,36 @@ export default class CheckboxField {
|
||||
label.classList.add('checkbox-without-caption');
|
||||
}
|
||||
|
||||
const box = document.createElement('div');
|
||||
box.classList.add('checkbox-box');
|
||||
label.append(input);
|
||||
|
||||
const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
checkSvg.classList.add('checkbox-box-check');
|
||||
checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24');
|
||||
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||
use.setAttributeNS(null, 'href', '#check');
|
||||
use.setAttributeNS(null, 'x', '-1');
|
||||
checkSvg.append(use);
|
||||
if(options.toggle) {
|
||||
label.classList.add('checkbox-field-toggle');
|
||||
|
||||
const bg = document.createElement('div');
|
||||
bg.classList.add('checkbox-box-background');
|
||||
|
||||
const border = document.createElement('div');
|
||||
border.classList.add('checkbox-box-border');
|
||||
|
||||
box.append(border, bg, checkSvg);
|
||||
|
||||
label.append(input, box);
|
||||
const toggle = document.createElement('div');
|
||||
toggle.classList.add('checkbox-toggle');
|
||||
label.append(toggle);
|
||||
} else {
|
||||
const box = document.createElement('div');
|
||||
box.classList.add('checkbox-box');
|
||||
|
||||
const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
checkSvg.classList.add('checkbox-box-check');
|
||||
checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24');
|
||||
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||||
use.setAttributeNS(null, 'href', '#check');
|
||||
use.setAttributeNS(null, 'x', '-1');
|
||||
checkSvg.append(use);
|
||||
|
||||
const bg = document.createElement('div');
|
||||
bg.classList.add('checkbox-box-background');
|
||||
|
||||
const border = document.createElement('div');
|
||||
border.classList.add('checkbox-box-border');
|
||||
|
||||
box.append(border, bg, checkSvg);
|
||||
|
||||
label.append(box);
|
||||
}
|
||||
|
||||
if(span) {
|
||||
label.append(span);
|
||||
|
||||
@ -10,6 +10,8 @@ import { ripple } from "./ripple";
|
||||
import appSidebarRight from "./sidebarRight";
|
||||
import AppPollResultsTab from "./sidebarRight/tabs/pollResults";
|
||||
import { i18n, LangPackKey } from "../lib/langPack";
|
||||
import { fastRaf } from "../helpers/schedulers";
|
||||
import SetTransition from "./singleTransition";
|
||||
|
||||
let lineTotalLength = 0;
|
||||
const tailLength = 9;
|
||||
@ -523,9 +525,13 @@ export default class PollElement extends HTMLElement {
|
||||
// is need update
|
||||
if(this.chosenIndexes.length || this.isRetracted || this.isClosed) {
|
||||
const percents = results.results.map(v => results.total_voters ? v.voters / results.total_voters * 100 : 0);
|
||||
this.setResults(this.isRetracted ? this.percents : percents, this.chosenIndexes);
|
||||
this.percents = percents;
|
||||
this.isRetracted = false;
|
||||
|
||||
SetTransition(this, '', !this.isRetracted, 340);
|
||||
fastRaf(() => {
|
||||
this.setResults(this.isRetracted ? this.percents : percents, this.chosenIndexes);
|
||||
this.percents = percents;
|
||||
this.isRetracted = false;
|
||||
});
|
||||
}
|
||||
|
||||
this.setVotersCount(results);
|
||||
|
||||
@ -41,6 +41,8 @@ export default class PopupPeer extends PopupElement {
|
||||
fragment.append(p);
|
||||
|
||||
if(options.checkboxes) {
|
||||
this.container.classList.add('have-checkbox');
|
||||
|
||||
options.checkboxes.forEach(o => {
|
||||
o.withRipple = true;
|
||||
const checkboxField = new CheckboxField(o);
|
||||
|
||||
@ -165,7 +165,10 @@ export default class ProgressivePreloader {
|
||||
}
|
||||
} else {
|
||||
if(this.tryAgainOnFail) {
|
||||
this.setManual();
|
||||
SetTransition(this.preloader, '', true, TRANSITION_TIME);
|
||||
fastRaf(() => {
|
||||
this.setManual();
|
||||
});
|
||||
} else {
|
||||
this.detach();
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@ import AppArchivedTab from "./tabs/archivedTab";
|
||||
import AppAddMembersTab from "./tabs/addMembers";
|
||||
import { i18n_, LangPackKey } from "../../lib/langPack";
|
||||
import ButtonMenu, { ButtonMenuItemOptions } from "../buttonMenu";
|
||||
import CheckboxField from "../checkboxField";
|
||||
|
||||
export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
|
||||
|
||||
@ -56,7 +57,7 @@ export class AppSidebarLeft extends SidebarSlider {
|
||||
|
||||
//this._selectTab(0); // make first tab as default
|
||||
|
||||
this.inputSearch = new InputSearch('Telegram Search');
|
||||
this.inputSearch = new InputSearch('Search');
|
||||
const sidebarHeader = this.sidebarEl.querySelector('.item-main .sidebar-header');
|
||||
sidebarHeader.append(this.inputSearch.container);
|
||||
|
||||
@ -82,28 +83,24 @@ export class AppSidebarLeft extends SidebarSlider {
|
||||
|
||||
const btnArchive: ButtonMenuItemOptions = {
|
||||
icon: 'archive',
|
||||
text: 'ChatList.Menu.Archived',
|
||||
text: 'ArchivedChats',
|
||||
onClick: () => {
|
||||
new AppArchivedTab(this).open();
|
||||
}
|
||||
};
|
||||
|
||||
const btnMenu = ButtonMenu([{
|
||||
icon: 'newgroup',
|
||||
text: 'NewGroup',
|
||||
onClick: onNewGroupClick
|
||||
}, {
|
||||
icon: 'user',
|
||||
text: 'Contacts',
|
||||
onClick: onContactsClick
|
||||
}, btnArchive, {
|
||||
icon: 'savedmessages',
|
||||
text: 'Saved',
|
||||
text: 'SavedMessages',
|
||||
onClick: () => {
|
||||
setTimeout(() => { // menu doesn't close if no timeout (lol)
|
||||
appImManager.setPeer(appImManager.myId);
|
||||
}, 0);
|
||||
}
|
||||
}, btnArchive, {
|
||||
icon: 'user',
|
||||
text: 'Contacts',
|
||||
onClick: onContactsClick
|
||||
}, {
|
||||
icon: 'settings',
|
||||
text: 'Settings',
|
||||
@ -111,10 +108,24 @@ export class AppSidebarLeft extends SidebarSlider {
|
||||
new AppSettingsTab(this).open();
|
||||
}
|
||||
}, {
|
||||
icon: 'help btn-disabled',
|
||||
icon: 'colorize',
|
||||
text: 'DarkMode',
|
||||
onClick: () => {
|
||||
|
||||
},
|
||||
checkboxField: new CheckboxField({toggle: true})
|
||||
}, {
|
||||
icon: 'lamp',
|
||||
text: 'Animations',
|
||||
onClick: () => {
|
||||
|
||||
},
|
||||
checkboxField: new CheckboxField({toggle: true, checked: true})
|
||||
}, {
|
||||
icon: 'help',
|
||||
text: 'SettingsHelp',
|
||||
onClick: () => {
|
||||
|
||||
appImManager.openUsername('TelegramTips');
|
||||
}
|
||||
}]);
|
||||
|
||||
|
||||
@ -6,13 +6,13 @@ const SetTransition = (element: HTMLElement, className: string, forwards: boolea
|
||||
clearTimeout(+timeout);
|
||||
}
|
||||
|
||||
if(forwards) {
|
||||
if(forwards && className) {
|
||||
element.classList.add(className);
|
||||
}
|
||||
|
||||
const afterTimeout = () => {
|
||||
delete element.dataset.timeout;
|
||||
if(!forwards) {
|
||||
if(!forwards && className) {
|
||||
element.classList.remove('backwards', className);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="nights">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
const lang = {
|
||||
"Animations": "Animations",
|
||||
"AttachAlbum": "Album",
|
||||
"BlockModal.Search.Placeholder": "Block user...",
|
||||
"DarkMode": "Sith Mode",
|
||||
"FilterIncludeExcludeInfo": "Choose chats and types of chats that will\nappear and never appear in this folder.",
|
||||
"FilterNameInputLabel": "Folder Name",
|
||||
"FilterMenuDelete": "Delete Folder",
|
||||
@ -21,7 +23,7 @@ const lang = {
|
||||
"EditProfile.Username.Invalid": "Username is invalid",
|
||||
"EditProfile.Username.Help": "You can choose a username on Telegram. If you do, people will be able to find you by this username and contact you without needing your phone number.\n\nYou can use a–z, 0–9 and underscores. Minimum length is 5 characters.",
|
||||
"ExceptionModal.Search.Placeholder": "Add exception...",
|
||||
"ChatList.Menu.Archived": "Archived",
|
||||
//"ChatList.Menu.Archived": "Archived",
|
||||
"Chat.Menu.SelectMessages": "Select Messages",
|
||||
"Chat.Menu.ClearSelection": "Clear Selection",
|
||||
"Chat.Input.UnpinAll": "Unpin All Messages",
|
||||
@ -33,7 +35,7 @@ const lang = {
|
||||
"other_value": "%d Messages"
|
||||
},
|
||||
"Chat.Selection.LimitToast": "Max selection count reached.",
|
||||
"Saved": "Saved",
|
||||
//"Saved": "Saved",
|
||||
"General.Keyboard": "Keyboard",
|
||||
"General.SendShortcut.Enter": "Send by Enter",
|
||||
"General.SendShortcut.CtrlEnter": "Send by %s + Enter",
|
||||
|
||||
@ -425,7 +425,7 @@ export class AppDialogsManager {
|
||||
delete this.chatLists[filter.id];
|
||||
delete this.filtersRendered[filter.id];
|
||||
|
||||
if(!Object.keys(this.filtersRendered).length) {
|
||||
if(Object.keys(this.filtersRendered).length <= 1) {
|
||||
this.folders.menuScrollContainer.classList.add('hide');
|
||||
}
|
||||
});
|
||||
@ -674,7 +674,7 @@ export class AppDialogsManager {
|
||||
if(filter.titleEl) titleSpan.append(filter.titleEl);
|
||||
else titleSpan.innerHTML = RichTextProcessor.wrapEmojiText(filter.title);
|
||||
const unreadSpan = document.createElement('div');
|
||||
unreadSpan.classList.add('badge', 'badge-20', 'badge-blue');
|
||||
unreadSpan.classList.add('badge', 'badge-20', 'badge-primary');
|
||||
const i = document.createElement('i');
|
||||
span.append(titleSpan, unreadSpan, i);
|
||||
menuTab.append(span);
|
||||
@ -694,20 +694,20 @@ export class AppDialogsManager {
|
||||
this.chatLists[filter.id] = ul;
|
||||
this.setListClickListener(ul, null, true);
|
||||
|
||||
if(!this.showFiltersTimeout) {
|
||||
this.showFiltersTimeout = window.setTimeout(() => {
|
||||
this.showFiltersTimeout = 0;
|
||||
this.folders.menuScrollContainer.classList.remove('hide');
|
||||
this.setFiltersUnreadCount();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
this.filtersRendered[filter.id] = {
|
||||
menu: menuTab,
|
||||
container: div,
|
||||
unread: unreadSpan,
|
||||
title: titleSpan
|
||||
};
|
||||
|
||||
if(!this.showFiltersTimeout && Object.keys(this.filtersRendered).length > 1) {
|
||||
this.showFiltersTimeout = window.setTimeout(() => {
|
||||
this.showFiltersTimeout = 0;
|
||||
this.folders.menuScrollContainer.classList.remove('hide');
|
||||
this.setFiltersUnreadCount();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
private loadDialogs(side: SliceSides = 'bottom') {
|
||||
|
||||
@ -190,12 +190,7 @@ export class AppImManager {
|
||||
|
||||
switch(p[0]) {
|
||||
case '@': {
|
||||
appUsersManager.resolveUsername(p).then(peer => {
|
||||
const isUser = peer._ === 'user';
|
||||
const peerId = isUser ? peer.id : -peer.id;
|
||||
|
||||
this.setInnerPeer(peerId, postId);
|
||||
});
|
||||
this.openUsername(p, postId);
|
||||
break;
|
||||
}
|
||||
|
||||
@ -211,6 +206,15 @@ export class AppImManager {
|
||||
//location.hash = '';
|
||||
};
|
||||
|
||||
public openUsername(username: string, msgId?: number) {
|
||||
return appUsersManager.resolveUsername(username).then(peer => {
|
||||
const isUser = peer._ === 'user';
|
||||
const peerId = isUser ? peer.id : -peer.id;
|
||||
|
||||
return this.setInnerPeer(peerId, msgId);
|
||||
});
|
||||
}
|
||||
|
||||
public setBackground(url: string, broadcastEvent = true): Promise<void> {
|
||||
const promises = this.chats.map(chat => chat.setBackground(url));
|
||||
return promises[promises.length - 1].then(() => {
|
||||
|
||||
@ -505,7 +505,7 @@ namespace RichTextProcessor {
|
||||
|
||||
const currentContext = url[0] === '#';
|
||||
|
||||
insertPart(entity, `<a href="${encodeEntities(url)}"${currentContext ? '' : ' target="_blank" rel="noopener noreferrer"'}>`, '</a>');
|
||||
insertPart(entity, `<a class="anchor-url" href="${encodeEntities(url)}"${currentContext ? '' : ' target="_blank" rel="noopener noreferrer"'}>`, '</a>');
|
||||
}
|
||||
|
||||
break;
|
||||
@ -525,7 +525,7 @@ namespace RichTextProcessor {
|
||||
if(contextUrl) {
|
||||
const entityText = text.substr(entity.offset, entity.length);
|
||||
const hashtag = entityText.substr(1);
|
||||
insertPart(entity, `<a href="${contextUrl.replace('{1}', encodeURIComponent(hashtag))}"${contextExternal ? ' target="_blank" rel="noopener noreferrer"' : ''}>`, '</a>');
|
||||
insertPart(entity, `<a class="anchor-hashtag" href="${contextUrl.replace('{1}', encodeURIComponent(hashtag))}"${contextExternal ? ' target="_blank" rel="noopener noreferrer"' : ''}>`, '</a>');
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@mixin hover($color: null, $property: null, $use-transition: false) {
|
||||
@if $color {
|
||||
@if $color == gray {
|
||||
$color: var(--color-gray-hover);
|
||||
$color: var(--light-secondary-text-color);
|
||||
} @else if $color == blue or $color == primary {
|
||||
$color: var(--color-blue-hover);
|
||||
$color: var(--light-primary-color);
|
||||
} @else if $color == red {
|
||||
$color: var(--color-red-hover);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
width: 1.125rem;
|
||||
height: .125rem;
|
||||
border-radius: .125rem;
|
||||
background-color: var(--color-text-secondary);
|
||||
background-color: var(--secondary-text-color);
|
||||
transition: transform var(--slide-header-transition);
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
width: 1.125rem;
|
||||
height: .125rem;
|
||||
border-radius: .125rem;
|
||||
background-color: var(--color-text-secondary);
|
||||
background-color: var(--secondary-text-color);
|
||||
transition: transform .25s;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
&-toggle, &-download {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -340,32 +340,36 @@
|
||||
|
||||
&-waveform {
|
||||
height: 23px;
|
||||
margin-top: -3px;
|
||||
margin-top: 1px;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
/* @include respond-to(handhelds) {
|
||||
margin-top: -4px;
|
||||
}
|
||||
} */
|
||||
|
||||
//overflow: visible!important;
|
||||
|
||||
rect {
|
||||
fill: var(--primary-color);
|
||||
//overflow: visible!important;
|
||||
fill: #CBCBCB;
|
||||
opacity: .3;
|
||||
|
||||
&.active, .audio.is-unread & {
|
||||
fill: $color-blue;
|
||||
&.active, .audio.is-unread:not(.is-out) & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//&.audio-54 {
|
||||
&-details {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
//}
|
||||
// //&.audio-54 {
|
||||
// &-details {
|
||||
// margin-top: 4px;
|
||||
// margin-bottom: 2px;
|
||||
// }
|
||||
// //}
|
||||
|
||||
// &.audio-48 {
|
||||
height: 3rem;
|
||||
padding-left: calc(3rem + .5625rem);
|
||||
|
||||
&.audio-48 {
|
||||
.audio-details {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 0;
|
||||
@ -374,7 +378,24 @@
|
||||
.audio-title {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-ico, &-download {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.part {
|
||||
height: 112px !important;
|
||||
width: 112px !important;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
&-title {
|
||||
font-size: 1rem;
|
||||
@ -383,7 +404,7 @@
|
||||
|
||||
&-time, &-subtitle {
|
||||
font-size: 14px;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -433,11 +454,13 @@
|
||||
content: " ";
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
margin-left: .375rem;
|
||||
display: inline;
|
||||
margin-top: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -451,7 +474,7 @@
|
||||
margin-left: 5px;
|
||||
|
||||
&__filled {
|
||||
background-color: #0089ff;
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&:not(.progress-line__loaded) {
|
||||
z-index: 1;
|
||||
@ -464,9 +487,9 @@
|
||||
|
||||
&__seek {
|
||||
--thumb-size: 12px;
|
||||
--thumb-color: #0089ff;
|
||||
--thumb-color: var(--primary-color);
|
||||
//background-color: #e6ecf0;
|
||||
background-color: rgba(193, 207, 220, .39);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,8 +96,8 @@ avatar-element {
|
||||
content: " ";
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
background-color: #0ac630;
|
||||
border: 2px solid var(--surface-color);
|
||||
background-color: var(--avatar-online-color);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 2.4375rem;
|
||||
@ -148,6 +148,11 @@ avatar-element {
|
||||
--multiplier: 1.227272;
|
||||
}
|
||||
|
||||
&.avatar-42 {
|
||||
--size: 42px;
|
||||
--multiplier: 1.285714;
|
||||
}
|
||||
|
||||
&.avatar-40 {
|
||||
--size: 40px;
|
||||
--multiplier: 1.35;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.badge {
|
||||
border-radius: .75rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
color: var(--badge-text-color);
|
||||
font-size: .875rem;
|
||||
transition: background-color .2s ease-in-out;
|
||||
text-align: center;
|
||||
@ -14,14 +14,14 @@
|
||||
height: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
line-height: 1.25rem !important;
|
||||
padding: 0 5.75px;
|
||||
padding: 0 .375rem;
|
||||
}
|
||||
|
||||
&-24 {
|
||||
height: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
line-height: 1.5rem !important;
|
||||
padding: 0 7.75px;
|
||||
padding: 0 .5rem;
|
||||
|
||||
&.tgico {
|
||||
// width: 1.5rem;
|
||||
@ -40,11 +40,11 @@
|
||||
background-color: $color-green;
|
||||
}
|
||||
|
||||
&-blue {
|
||||
background-color: $color-blue;
|
||||
&-primary {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&-gray {
|
||||
background-color: #c5c9cc;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
border-radius: 50% !important;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: .5rem;
|
||||
@ -30,7 +30,7 @@
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -51,7 +51,7 @@
|
||||
transform: translate3d(0, var(--translateY), 0);
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
@ -86,11 +86,11 @@
|
||||
.btn-menu {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 8px 1px rgba(0, 0, 0, .24);
|
||||
background-color: var(--surface-color);
|
||||
box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, .24);
|
||||
z-index: 3;
|
||||
top: 100%;
|
||||
padding: 9px 0;
|
||||
padding: .5rem 0;
|
||||
border-radius: $border-radius-medium;
|
||||
opacity: 0;
|
||||
transform: scale(.8);
|
||||
@ -159,16 +159,18 @@
|
||||
&-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0 40px 0 20px;
|
||||
padding: 0 40px 0 1rem;
|
||||
height: 56px;
|
||||
cursor: pointer !important;
|
||||
pointer-events: all !important;
|
||||
color: #000;
|
||||
color: var(--primary-text-color);
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
line-height: var(--line-height);
|
||||
|
||||
@include hover-background-effect();
|
||||
|
||||
@ -177,15 +179,62 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 1.5rem;
|
||||
margin-right: 32px;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 0 30px 0 16px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
--size: 20px;
|
||||
margin: 0 .3125rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
|
||||
.checkbox-toggle {
|
||||
--toggle-width: 1.9375rem;
|
||||
width: var(--toggle-width);
|
||||
height: .875rem;
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: $border-radius-big;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:before {
|
||||
--offset: 3px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--secondary-color);
|
||||
transition: border-color .2s, transform .2s;
|
||||
background-color: var(--surface-color);
|
||||
content: " ";
|
||||
transform: translateX(calc(var(--offset) * -1));
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .checkbox-toggle {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&:before {
|
||||
border-color: var(--primary-color);
|
||||
transform: translateX(calc(var(--toggle-width) - 1.25rem + var(--offset)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* &-overlay {
|
||||
@ -235,14 +284,14 @@
|
||||
|
||||
@include hover() {
|
||||
transition: .2s background-color, .2s opacity;
|
||||
background: darken($color-blue, 8%);
|
||||
background: var(--dark-primary-color);
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
|
||||
@include hover() {
|
||||
background: hover-color($color-blue);
|
||||
background: var(--light-primary-color);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@ -252,7 +301,7 @@
|
||||
}
|
||||
|
||||
.preloader-circular .preloader-path {
|
||||
stroke: $color-blue;
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -274,7 +323,7 @@
|
||||
|
||||
// ! example: multiselect input, button in pinned messages chat, settings, chat background tab
|
||||
.btn-transparent {
|
||||
color: #000;
|
||||
color: var(--primary-text-color);
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -297,7 +346,7 @@
|
||||
|
||||
// * tgico
|
||||
&:before {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 1.5rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
@ -329,7 +378,7 @@
|
||||
pointer-events: all !important;
|
||||
|
||||
&:not(.btn-primary):not(.btn-corner).menu-open {
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
@ -356,7 +405,7 @@
|
||||
.btn-disabled {
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
color: #707579 !important;
|
||||
color: var(--secondary-text-color) !important;
|
||||
|
||||
&:before {
|
||||
color: inherit !important;
|
||||
@ -368,10 +417,10 @@
|
||||
}
|
||||
|
||||
.btn-color-primary {
|
||||
background: $color-blue;
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
|
||||
/* .c-ripple__circle {
|
||||
background-color: var(--color-blue-hover);
|
||||
background-color: var(--light-primary-color);
|
||||
} */
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$btn-send-margin: .5625rem;
|
||||
$btn-send-margin: .5rem;
|
||||
$chat-helper-size: 39px;
|
||||
|
||||
/* #bubble-contextmenu > div {
|
||||
@ -40,7 +40,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
--bottom: 21px;
|
||||
--bottom: 20px;
|
||||
}
|
||||
|
||||
@include respond-to(esg-bottom) {
|
||||
@ -204,7 +204,7 @@ $chat-helper-size: 39px;
|
||||
|
||||
.btn-send {
|
||||
transition: .2s transform !important;
|
||||
color: #9e9e9e;
|
||||
color: var(--secondary-text-color);
|
||||
z-index: 3;
|
||||
|
||||
> .tgico {
|
||||
@ -222,11 +222,11 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
.tgico-send {
|
||||
color: $color-blue !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.tgico-check {
|
||||
color: $color-blue !important;
|
||||
color: var(--primary-color) !important;
|
||||
height: 32px!important;
|
||||
font-size: 2rem;
|
||||
|
||||
@ -236,7 +236,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
.tgico-schedule {
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 34px; // * same as for btn-icon in input
|
||||
@ -266,7 +266,7 @@ $chat-helper-size: 39px;
|
||||
.btn-record-cancel, .btn-send {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
background-color: #fff !important;
|
||||
background-color: var(--surface-color) !important;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
@ -467,9 +467,9 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
border-left: 1px solid #DADCE0;
|
||||
}
|
||||
/* @include respond-to(not-handhelds) {
|
||||
border-left: 1px solid var(--border-color);
|
||||
} */
|
||||
|
||||
@include respond-to(floating-left-sidebar) {
|
||||
position: fixed !important;
|
||||
@ -555,6 +555,13 @@ $chat-helper-size: 39px;
|
||||
overflow: hidden;
|
||||
background-color: #e6ebee;
|
||||
|
||||
html.night & {
|
||||
background-color: var(--border-color);
|
||||
.chat-background-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-transition:before {
|
||||
transition: none !important;
|
||||
}
|
||||
@ -609,7 +616,7 @@ $chat-helper-size: 39px;
|
||||
width: calc(100% - (var(--chat-input-size) + #{$btn-send-margin}));
|
||||
max-width: calc(100% - (var(--chat-input-size) + #{$btn-send-margin}));
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
border-radius: 12px;
|
||||
border-bottom-right-radius: 0;
|
||||
//box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
|
||||
@ -795,8 +802,8 @@ $chat-helper-size: 39px;
|
||||
|
||||
.attach-file {
|
||||
&.menu-open {
|
||||
color: $color-blue;
|
||||
background-color: hover-color($color-blue) !important;
|
||||
color: var(--primary-color);
|
||||
background-color: hover-color(var(--primary-color)) !important;
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
@ -901,7 +908,7 @@ $chat-helper-size: 39px;
|
||||
.btn-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 24px;
|
||||
color: #8d969c;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
// ! EXPERIMENTAL
|
||||
margin: 0 .125rem 5px;
|
||||
@ -910,7 +917,7 @@ $chat-helper-size: 39px;
|
||||
height: 34px;
|
||||
|
||||
&.active {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -950,7 +957,7 @@ $chat-helper-size: 39px;
|
||||
// }
|
||||
|
||||
&.is-chat-input-hidden.is-selecting:not(.backwards) {
|
||||
--translateY: -79px;
|
||||
--translateY: -78px;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
--translateY: -58px;
|
||||
@ -1046,7 +1053,7 @@ $chat-helper-size: 39px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
justify-content: flex-end;
|
||||
padding: 0 1rem;
|
||||
padding: 0 $chat-padding;
|
||||
max-width: var(--messages-container-width);
|
||||
|
||||
//padding-top: 10000px;
|
||||
@ -1065,13 +1072,7 @@ $chat-helper-size: 39px;
|
||||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 0 .5rem;
|
||||
|
||||
.is-out {
|
||||
.bubble-content-wrapper {
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
padding: 0 $chat-padding-handhelds;
|
||||
|
||||
html.is-mac & {
|
||||
-webkit-user-select: none;
|
||||
@ -1127,7 +1128,7 @@ $chat-helper-size: 39px;
|
||||
|
||||
.bubbles-go-down {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
border-radius: 50%;
|
||||
color: $placeholder-color;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@ -48,10 +48,6 @@ $bubble-margin: .25rem;
|
||||
flex-wrap: wrap;
|
||||
//flex-direction: column; // fix 'Unread messages', still need to refactor it
|
||||
|
||||
--background-color: #fff;
|
||||
--accent-color: #{$color-blue};
|
||||
--secondary-color: #{$color-gray};
|
||||
|
||||
&.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & {
|
||||
&:after {
|
||||
position: absolute;
|
||||
@ -218,7 +214,7 @@ $bubble-margin: .25rem;
|
||||
height: fit-content;
|
||||
z-index: 2;
|
||||
user-select: none;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--message-background-color);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@ -819,9 +815,9 @@ $bubble-margin: .25rem;
|
||||
|
||||
.message {
|
||||
font-size: var(--messages-text-size);
|
||||
padding: 0 9px 6px 9px;
|
||||
padding: 0 .5rem .375rem .625rem;
|
||||
max-width: 100%;
|
||||
color: #000;
|
||||
color: var(--primary-text-color);
|
||||
line-height: 1.3125; // 21 / 16
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap; // * fix spaces on line begin
|
||||
@ -1131,9 +1127,11 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message.voice-message {
|
||||
// ! SAFARI FIX BLINK ON SELECTION TRANSFORM !
|
||||
overflow: visible !important;
|
||||
// ! SAFARI FIX BLINK ON SELECTION TRANSFORM !
|
||||
html:not(.is-safari) & {
|
||||
.message.voice-message {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-message-empty {
|
||||
@ -1260,6 +1258,10 @@ $bubble-margin: .25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.anchor-url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.video-play {
|
||||
background-color: var(--message-time-background);
|
||||
color: #fff;
|
||||
@ -1293,7 +1295,7 @@ $bubble-margin: .25rem;
|
||||
padding: 5px 9px 0 9px;
|
||||
font-weight: 500 !important;
|
||||
/* padding-bottom: 4px; */
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
font-size: .9rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@ -1420,7 +1422,7 @@ $bubble-margin: .25rem;
|
||||
padding: 0 .5rem;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
min-width: 15rem;
|
||||
|
||||
.tgico-comments, .tgico-next {
|
||||
@ -1462,7 +1464,7 @@ $bubble-margin: .25rem;
|
||||
.replies-footer-text {
|
||||
&:after {
|
||||
content: " ";
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
margin-left: .75rem;
|
||||
@ -1555,8 +1557,8 @@ $bubble-margin: .25rem;
|
||||
//background-color: rgba(0, 0, 0, .24);
|
||||
background-color: var(--message-highlightning-color);
|
||||
font-size: .9375rem;
|
||||
padding: 0 .5rem;
|
||||
line-height: 1.5rem;
|
||||
padding: .28125rem .5rem;
|
||||
line-height: 1.3125;
|
||||
border-radius: .75rem;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
@ -1628,14 +1630,10 @@ $bubble-margin: .25rem;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
.quote {
|
||||
@include hover() {
|
||||
background-color: $light;
|
||||
background-color: var(--light-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1653,19 +1651,19 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border-left: 2px $color-blue solid;
|
||||
border-left: 2px var(--primary-color) solid;
|
||||
}
|
||||
|
||||
.quote .name, .reply-title/* , .reply i */ {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-left: -1px;
|
||||
margin-left: -3px;
|
||||
padding-right: 8px;
|
||||
|
||||
.inner {
|
||||
color: #a3adb6;
|
||||
color: var(--secondary-text-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
@ -1691,7 +1689,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.audio-subtitle, .contact-number, .audio-time {
|
||||
color: #707579 !important;
|
||||
color: var(--secondary-text-color) !important;
|
||||
}
|
||||
|
||||
/* .poll {
|
||||
@ -1705,7 +1703,7 @@ $bubble-margin: .25rem;
|
||||
|
||||
.bubble.is-out {
|
||||
flex-direction: row-reverse;
|
||||
--background-color: #eeffde;
|
||||
--message-background-color: var(--message-out-background-color);
|
||||
|
||||
.bubble-content {
|
||||
&, .poll-footer-button {
|
||||
@ -1713,7 +1711,25 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #50af4f;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
transform: 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);
|
||||
|
||||
&.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1764,7 +1780,7 @@ $bubble-margin: .25rem;
|
||||
&.is-reply {
|
||||
&.emoji-big, &.sticker {
|
||||
.web, .reply {
|
||||
background-color: #eeffde;
|
||||
background-color: var(--message-out-background-color);
|
||||
right: calc(100% + 10px);
|
||||
border-color: rgba($color-green, .12);
|
||||
}
|
||||
@ -1772,23 +1788,23 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border-left: 2px $darkgreen solid;
|
||||
border-left: 2px solid var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
.reply-border {
|
||||
background-color: $darkgreen;
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
.quote .name, .reply-title, .reply i {
|
||||
color: $darkgreen;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
.time {
|
||||
padding-right: 4px;
|
||||
margin-left: -3px;
|
||||
padding-right: 5px;
|
||||
margin-left: -4px;
|
||||
|
||||
.inner {
|
||||
color: $darkgreen;
|
||||
color: var(--message-out-primary-color);
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
@ -1806,7 +1822,7 @@ $bubble-margin: .25rem;
|
||||
|
||||
&.forwarded {
|
||||
.name {
|
||||
color: $darkgreen;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1833,27 +1849,27 @@ $bubble-margin: .25rem;
|
||||
} */
|
||||
|
||||
.document-ico:after {
|
||||
border-top-color: #eeffde;
|
||||
border-right-color: #eeffde;
|
||||
border-top-color: var(--message-out-background-color);
|
||||
border-right-color: var(--message-out-background-color);
|
||||
}
|
||||
|
||||
.audio {
|
||||
&-waveform {
|
||||
rect {
|
||||
fill: #B8DDA9;
|
||||
fill: var(--message-out-primary-color);
|
||||
|
||||
&.active {
|
||||
fill: #68AB5A !important;
|
||||
fill: var(--message-out-primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-time, &-subtitle {
|
||||
color: #68AB5A;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
&-toggle, &-download {
|
||||
background-color: #4FAE4E;
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
&-download:empty {
|
||||
@ -1862,12 +1878,17 @@ $bubble-margin: .25rem;
|
||||
|
||||
&.is-unread {
|
||||
rect {
|
||||
//fill: #68AB5A;
|
||||
fill: #B8DDA9;
|
||||
fill: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
.audio-time:after {
|
||||
background-color: #68AB5A;
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
.part {
|
||||
background-color: var(--message-out-audio-play-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1893,21 +1914,21 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.audio-subtitle, .contact-number, .document-size {
|
||||
color: #4FAE4E;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
poll-element {
|
||||
.poll {
|
||||
&-desc, &-votes-count {
|
||||
color: $color-text-green;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
&-line use {
|
||||
stroke: #4fae4e;
|
||||
stroke: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
&-answer-selected {
|
||||
background-color: #4fae4e;
|
||||
background-color: var(--message-out-primary-color);
|
||||
}
|
||||
|
||||
html.no-touch &-answer:hover {
|
||||
@ -1917,12 +1938,12 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
&-footer-button, &-hint {
|
||||
color: #4fae4e;
|
||||
color: var(--message-out-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-ring__circle {
|
||||
stroke: #4fae4e;
|
||||
stroke: var(--message-out-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1960,14 +1981,14 @@ $bubble-margin: .25rem;
|
||||
&.is-multiple-documents {
|
||||
.document-container {
|
||||
.bubble-select-checkbox {
|
||||
background-color: #eeffde;
|
||||
background-color: var(--message-out-background-color);
|
||||
|
||||
&:before {
|
||||
border-color: #9ed695;
|
||||
}
|
||||
|
||||
.checkbox-box-border {
|
||||
border-color: #eeffde;
|
||||
border-color: var(--message-out-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1977,7 +1998,7 @@ $bubble-margin: .25rem;
|
||||
}
|
||||
|
||||
.document-wrapper {
|
||||
background-color: #eeffde;
|
||||
background-color: var(--message-out-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2039,355 +2060,3 @@ $bubble-margin: .25rem;
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
poll-element {
|
||||
margin-top: -1px;
|
||||
display: block;
|
||||
//min-width: 280px;
|
||||
min-width: 330px;
|
||||
user-select: none;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
&:not(.is-closed):not(.is-voted) .poll-answer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.poll {
|
||||
&-title {
|
||||
font-weight: 500;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
max-width: 88%;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #707579;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
// @include respond-to(handhelds) {
|
||||
// max-width: 280px;
|
||||
// }
|
||||
}
|
||||
|
||||
&-type {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: -4px;
|
||||
right: 2px;
|
||||
color: #50a2e9;
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
transition: transform .2s ease;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// @include respond-to(handhelds) {
|
||||
// right: 16px;
|
||||
// }
|
||||
|
||||
&.active {
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-send-vote {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&-avatars {
|
||||
display: flex;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&-answer {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 28px;
|
||||
margin-top: 1px;
|
||||
|
||||
&-text {
|
||||
margin-top: 6px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&-percents {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
font-weight: 500;
|
||||
margin-top: 7px;
|
||||
font-size: 14px;
|
||||
transition: .34s opacity;
|
||||
margin-left: -9px;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
left: 15px;
|
||||
color: #fff;
|
||||
background: #50a2e9;
|
||||
border-radius: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-weight: bold;
|
||||
font-size: .75rem;
|
||||
opacity: 0;
|
||||
animation: fade-in-opacity .1s ease forwards;
|
||||
animation-direction: reverse;
|
||||
animation-delay: .24s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:before {
|
||||
content: $tgico-check;
|
||||
//margin-left: 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
.animation-ring {
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-voting {
|
||||
.progress-ring__circle {
|
||||
stroke-dashoffset: -19.792;
|
||||
animation: pollAnswerRotate .65s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-correct):not(.is-chosen) {
|
||||
.poll-answer-selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple answers
|
||||
&.is-chosing {
|
||||
.poll-answer-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& ~ .poll-footer {
|
||||
.poll-send-vote {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-votes-count {
|
||||
color: #707579;
|
||||
font-size: 14px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 2px;
|
||||
transition: stroke-dashoffset .34s linear, stroke-dasharray .34s linear;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-dasharray: 0, 485.9;
|
||||
|
||||
use {
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
stroke: #50a2e9;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
text-align: center;
|
||||
margin-top: 7px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
&-footer-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -7px;
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
color: #50a2e9;
|
||||
//text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
//border-bottom-left-radius: 6px;
|
||||
//border-bottom-right-radius: 12px;
|
||||
font-size: 1rem;
|
||||
line-height: 37px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-quiz-timer {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke: #a3adb6;
|
||||
transform: rotate(270deg);
|
||||
top: -7px;
|
||||
fill: none;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
&-time {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
color: #a3adb6;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-quiz .poll {
|
||||
&-answer {
|
||||
&.is-chosen:not(.is-correct) {
|
||||
use {
|
||||
stroke: #DF3F40;
|
||||
}
|
||||
|
||||
.poll-answer-selected {
|
||||
background: #DF3F40;
|
||||
//line-height: 16px;
|
||||
|
||||
&:before {
|
||||
content: $tgico-close;
|
||||
font-size: 12px;
|
||||
//margin-left: 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* &-line {
|
||||
use {
|
||||
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
avatar-element {
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.circle-hover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
transform: scale(1);
|
||||
transition: .1s transform;
|
||||
|
||||
.poll-answer-selected {
|
||||
display: flex!important;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 16px;
|
||||
animation: none;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-ring {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
transition: transform .12s;
|
||||
background-color: #f4f4f4;
|
||||
transform: scale(.1);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
top: unset;
|
||||
left: unset;
|
||||
|
||||
&__circle {
|
||||
transform-origin: center;
|
||||
transform: rotate(-90deg);
|
||||
transition: stroke-dashoffset .15s;
|
||||
stroke-dasharray: 56.5487, 56.5487;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 2;
|
||||
stroke: #dadbdc;
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-voted {
|
||||
.circle-hover, .animation-ring {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.poll-answer-percents {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.poll-answer-selected {
|
||||
animation-direction: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-retracting {
|
||||
.circle-hover {
|
||||
transition-delay: .24s;
|
||||
}
|
||||
|
||||
.animation-ring {
|
||||
transition-delay: .22s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pollAnswerRotate {
|
||||
to {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
@ -77,7 +77,7 @@
|
||||
|
||||
.drop.is-dragover & {
|
||||
animation: drop-outline-move .5s linear infinite;
|
||||
stroke: $color-blue;
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
|
||||
/* .drop.is-dragover.backwards & {
|
||||
@ -108,7 +108,7 @@
|
||||
}
|
||||
|
||||
&.is-dragover {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
& + & {
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
&.active {
|
||||
color: #fff!important;
|
||||
background-color: $color-blue!important;
|
||||
background-color: var(--primary-color)!important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
}
|
||||
|
||||
&-link-apply {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
font-size: 2rem;
|
||||
|
||||
&-container {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
height: 32px;
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: $color-blue;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
&-mask {
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
background: #50a2e988;
|
||||
position: relative;
|
||||
}
|
||||
@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&-title, &-subtitle {
|
||||
@ -135,12 +135,8 @@
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
//color: $color-blue;
|
||||
color: #707579;
|
||||
|
||||
/* &.document-title {
|
||||
color: #707579;
|
||||
} */
|
||||
//color: var(--primary-color);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
@ -163,14 +159,14 @@
|
||||
}
|
||||
|
||||
/* html.no-touch &:hover {
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
} */
|
||||
|
||||
&-border {
|
||||
height: 2rem;
|
||||
border-radius: 1px;
|
||||
min-width: 2px;
|
||||
background: $color-blue;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -241,7 +237,7 @@
|
||||
border-radius: 4px;
|
||||
|
||||
/* html.no-touch &:hover {
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
} */
|
||||
}
|
||||
}
|
||||
@ -466,7 +462,7 @@
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
&-title, &-subtitle {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
z-index: 1;
|
||||
min-height: 3.5rem;
|
||||
max-height: 3.5rem;
|
||||
// border-bottom: 1px solid #DADCE0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
|
||||
&.is-pinned-floating {
|
||||
&.is-pinned-audio-shown, &.is-pinned-message-shown:not(.hide-pinned) {
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
padding-left: 7px;
|
||||
padding-left: .1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,9 +76,10 @@
|
||||
|
||||
.user-title {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
margin-bottom: 1px;
|
||||
|
||||
/* @include respond-to(handhelds) {
|
||||
text-overflow: ellipsis;
|
||||
@ -95,10 +96,7 @@
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: -2px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.btn-menu-toggle {
|
||||
@ -179,7 +177,7 @@
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 10px;
|
||||
padding-left: 1.125rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -194,12 +192,12 @@
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 14px;
|
||||
font-size: .875rem;
|
||||
//line-height: 18px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
.online {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
padding: 0 23px;
|
||||
padding-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
@ -86,6 +86,7 @@ ul.chatlist {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: var(--surface-color);
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
|
||||
@ -102,7 +103,6 @@ ul.chatlist {
|
||||
} */
|
||||
|
||||
li {
|
||||
background-color: #fff;
|
||||
//height: var(--height);
|
||||
height: 72px;
|
||||
//max-height: var(--height);
|
||||
@ -112,7 +112,7 @@ ul.chatlist {
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 9px 8.5px;
|
||||
padding: .5625rem;
|
||||
/* padding-top: calc((var(--height) - var(--avatarSize)) / 2);
|
||||
padding-bottom: calc((var(--height) - var(--avatarSize)) / 2);
|
||||
padding-right: 8.5px;
|
||||
@ -174,7 +174,7 @@ ul.chatlist {
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
color: #000;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
/* img.emoji {
|
||||
@ -187,12 +187,12 @@ ul.chatlist {
|
||||
} */
|
||||
|
||||
&.menu-open {
|
||||
background: var(--color-gray-hover);
|
||||
background: var(--light-secondary-text-color);
|
||||
}
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
&.active {
|
||||
background: var(--color-gray-hover);
|
||||
background: var(--light-secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -226,10 +226,9 @@ ul.chatlist {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
flex: 1 1 auto;
|
||||
//padding: 1px 3.5px 1px 9px; - DO MAKETA JS3
|
||||
padding: 1px 8.5px 1px 9px; // JS3
|
||||
padding: .0625rem .4375rem .0625rem .5625rem;
|
||||
}
|
||||
|
||||
.user-title {
|
||||
@ -277,7 +276,7 @@ ul.chatlist {
|
||||
.user-title, .user-last-message {
|
||||
i {
|
||||
font-style: normal;
|
||||
//color: $color-blue;
|
||||
//color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -289,7 +288,7 @@ ul.chatlist {
|
||||
vertical-align: middle;
|
||||
|
||||
&[class*=" tgico-"] {
|
||||
color: $color-green;
|
||||
color: var(--chatlist-status-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@ -314,7 +313,7 @@ ul.chatlist {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
color: #a2abb2;
|
||||
color: var(--chatlist-pinned-color);
|
||||
transition: opacity .2s ease-in-out;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
@ -330,11 +329,11 @@ ul.chatlist {
|
||||
}
|
||||
|
||||
.unread, li.is-muted.backwards .unread {
|
||||
background: $color-green;
|
||||
background-color: var(--chatlist-status-color);
|
||||
}
|
||||
|
||||
li.is-muted .unread {
|
||||
background: #c5c9cc;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.checkbox-field {
|
||||
--size: 18px;
|
||||
--size: 1.25rem;
|
||||
margin: 1.5rem 1.1875rem;
|
||||
display: block;
|
||||
text-align: left;
|
||||
@ -25,7 +25,7 @@
|
||||
transform: translateY(-50%);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 3px;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
|
||||
html.is-safari & {
|
||||
@ -51,14 +51,14 @@
|
||||
right: -15%;
|
||||
bottom: -15%;
|
||||
left: -15%;
|
||||
background-color: $button-primary-background;
|
||||
background-color: var(--primary-color);
|
||||
transform: scale(1);
|
||||
transition: transform .2s 0s ease-in-out;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-check {
|
||||
--offset: 1px;
|
||||
--offset: 3px;
|
||||
width: calc(var(--size) - var(--offset));
|
||||
height: calc(var(--size) - var(--offset));
|
||||
top: 50%;
|
||||
@ -85,6 +85,7 @@
|
||||
line-height: 26px;
|
||||
user-select: none;
|
||||
transition: .2s opacity;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@ -132,6 +133,7 @@
|
||||
}
|
||||
|
||||
.radio-field {
|
||||
--size: 1.375rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
margin: 1.25rem 0;
|
||||
@ -152,7 +154,7 @@
|
||||
&:checked {
|
||||
& ~ .radio-field-main {
|
||||
&::before {
|
||||
border-color: $button-primary-background;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -166,6 +168,7 @@
|
||||
.radio-field-main {
|
||||
padding-left: 3.5rem;
|
||||
position: relative;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
@ -173,8 +176,8 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
transform: translateY(-50%);
|
||||
|
||||
body.animation-level-0 & {
|
||||
@ -183,7 +186,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
border: 2px solid #707579;
|
||||
border: 2px solid var(--secondary-text-color);
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
transition: border-color .1s ease, opacity .1s ease;
|
||||
@ -191,17 +194,17 @@
|
||||
|
||||
&::after {
|
||||
left: .3125rem;
|
||||
width: .625rem;
|
||||
height: .625rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
border-radius: 50%;
|
||||
background: $button-primary-background;
|
||||
background: var(--primary-color);
|
||||
transform: translateY(-50%) scale(0);
|
||||
transform-origin: center;
|
||||
transition: transform .1s ease;
|
||||
}
|
||||
|
||||
/* &-subtitle {
|
||||
color: #707579 !important;
|
||||
color: var(--secondary-text-color) !important;
|
||||
font-size: 14px !important;
|
||||
} */
|
||||
}
|
||||
|
||||
@ -281,7 +281,7 @@ video::-webkit-media-controls-enclosure {
|
||||
|
||||
&__seek {
|
||||
--thumb-size: 13px;
|
||||
--thumb-color: #63a2e3;
|
||||
--thumb-color: var(--primary-color);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.document {
|
||||
--background-color: #{$color-blue};
|
||||
--background-color: #{var(--primary-color)};
|
||||
$border-radius: .375rem;
|
||||
padding-left: 4.25rem;
|
||||
height: 70px;
|
||||
@ -102,7 +102,7 @@
|
||||
|
||||
&-size {
|
||||
white-space: nowrap;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: .875rem;
|
||||
//padding-right: 32px;
|
||||
line-height: 1.3;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
width: 100%;
|
||||
//height: 282px;
|
||||
height: unquote('min(282px, calc(var(--vh) * 100 - 135px))');
|
||||
background: #fff;
|
||||
background: var(--surface-color);
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
max-height: 100%;
|
||||
@ -81,7 +81,7 @@
|
||||
//font-size: .85rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
//background: linear-gradient(to bottom,#fff 0,rgba(255,255,255,.9) 60%,rgba(255,255,255,0) 100%);
|
||||
z-index: 2;
|
||||
//padding: .53333rem 6PX .66667rem;
|
||||
@ -152,6 +152,7 @@
|
||||
width: 100%;
|
||||
box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.21);
|
||||
z-index: 4;
|
||||
background-color: var(--surface-color);
|
||||
|
||||
.menu-horizontal-div-item {
|
||||
margin: 0;
|
||||
@ -278,7 +279,6 @@
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
max-width: 100%;
|
||||
//border-top: 1px solid $lightgrey;
|
||||
}
|
||||
|
||||
.menu-horizontal-div-item {
|
||||
@ -287,7 +287,7 @@
|
||||
|
||||
&.active {
|
||||
&:not(.tgico-recent) {
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
border: solid #707579;
|
||||
border: solid var(--secondary-text-color);
|
||||
border-radius: 1px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
@ -107,7 +107,7 @@
|
||||
&:focus {
|
||||
--border-width: 2px;
|
||||
--border-width-top: 3px;
|
||||
border-color: $button-primary-background;
|
||||
border-color: var(--primary-color);
|
||||
//padding: 0 calc(1rem - 1px);
|
||||
}
|
||||
|
||||
@ -139,11 +139,11 @@
|
||||
&:focus ~ .arrow-down {
|
||||
margin-top: -4px;
|
||||
transform: rotate(225deg);
|
||||
border-color: $button-primary-background;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:focus ~ label {
|
||||
color: $button-primary-background;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -238,8 +238,8 @@ input:focus, button:focus {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//Vozmojno nado budet vernut margin-left: 22px;, tak kak eto vrode v levom bare tak po verstke, a v pravom bare dlya mobili nado 16, gde stiker seti
|
||||
margin-left: 1rem;
|
||||
margin-right: .25rem;
|
||||
margin-left: .4375rem;
|
||||
margin-right: .4375rem;
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
@ -247,16 +247,16 @@ input:focus, button:focus {
|
||||
}
|
||||
|
||||
&-input {
|
||||
--height: 40px;
|
||||
background-color: var(--color-gray-hover);
|
||||
padding: 0px calc(42px - var(--border-width));
|
||||
--height: 42px;
|
||||
background-color: var(--input-search-background-color);
|
||||
padding: 0px calc(var(--height) + 3px - var(--border-width));
|
||||
height: var(--height);
|
||||
min-height: var(--height) !important;
|
||||
max-height: var(--height) !important;
|
||||
//line-height: calc(var(--height) + 2px - var(--border-width) * 2);
|
||||
border-radius: 22px;
|
||||
transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
|
||||
border-color: transparent;
|
||||
border-color: var(--input-search-border-color);
|
||||
line-height: var(--height);
|
||||
|
||||
body.animation-level-0 & {
|
||||
@ -273,10 +273,10 @@ input:focus, button:focus {
|
||||
&:focus {
|
||||
--border-width: 2px;
|
||||
background-color: transparent;
|
||||
border-color: $button-primary-background;
|
||||
border-color: var(--primary-color);
|
||||
|
||||
& ~ .tgico {
|
||||
color: $button-primary-background;
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -296,10 +296,11 @@ input:focus, button:focus {
|
||||
transform: translate(0, -50%);
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
opacity: .6;
|
||||
transition: all .2s ease-out;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@ -309,7 +310,7 @@ input:focus, button:focus {
|
||||
> .tgico-search {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
left: .75rem;
|
||||
left: .8125rem;
|
||||
}
|
||||
|
||||
> .tgico-close {
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 18rem;
|
||||
// ! -1 because of border-left and border-right on whole page
|
||||
max-width: calc(#{$large-screen} / 4 - 1px);
|
||||
max-width: calc(#{$large-screen} / 4);
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
width: 100%;
|
||||
@ -54,8 +53,8 @@
|
||||
|
||||
.menu-horizontal-scrollable {
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #dadce0;
|
||||
background-color: var(--surface-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
|
||||
top: unset;
|
||||
@ -104,6 +103,16 @@
|
||||
&:not(.hide) + .scrollable {
|
||||
top: 44px;
|
||||
height: calc(100% - 44px);
|
||||
|
||||
#folders-container {
|
||||
li:first-child {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,6 +201,7 @@
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: var(--surface-color);
|
||||
}
|
||||
|
||||
#folders-container {
|
||||
@ -242,7 +252,7 @@
|
||||
}
|
||||
|
||||
.sidebar-tools-button .btn-menu {
|
||||
min-width: 217px;
|
||||
width: 300px;
|
||||
|
||||
.archived-count {
|
||||
justify-self: flex-end;
|
||||
@ -454,7 +464,7 @@
|
||||
font-size: 0.875rem;
|
||||
margin-top: 14px;
|
||||
margin-left: 23px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
@ -539,7 +549,7 @@
|
||||
|
||||
.caption {
|
||||
text-align: center;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
max-width: 20rem;
|
||||
@ -837,7 +847,7 @@
|
||||
&-caption {
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
line-height: var(--line-height);
|
||||
padding: 0 1rem;
|
||||
|
||||
@ -877,7 +887,7 @@
|
||||
}
|
||||
|
||||
&-h2 {
|
||||
color: #707579;
|
||||
color: var(--primary-color);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1005,7 +1015,7 @@
|
||||
|
||||
&-title-right {
|
||||
font-size: .75rem;
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--secondary-text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -1064,8 +1074,12 @@
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&-value {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
@ -1074,11 +1088,11 @@
|
||||
background-color: #e6ecf0;
|
||||
|
||||
&__filled {
|
||||
background-color: #3390ec;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&__seek {
|
||||
--thumb-color: #3390ec;
|
||||
--thumb-color: var(--primary-color);
|
||||
--thumb-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -1097,7 +1111,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 3px solid $color-blue;
|
||||
border: 3px solid var(--primary-color);
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .88);
|
||||
/* color: $color-gray; */
|
||||
/* color: var(--secondary-text-color); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -107,7 +107,7 @@
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
//color: #707579;
|
||||
//color: var(--secondary-text-color);
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
margin: 0 1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
357
src/scss/partials/_poll.scss
Normal file
357
src/scss/partials/_poll.scss
Normal file
@ -0,0 +1,357 @@
|
||||
poll-element {
|
||||
margin-top: -1px;
|
||||
display: block;
|
||||
//min-width: 280px;
|
||||
min-width: 330px;
|
||||
user-select: none;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
&:not(.is-closed):not(.is-voted) .poll-answer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.poll {
|
||||
&-title {
|
||||
font-weight: 500;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
max-width: 88%;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: var(--secondary-text-color);
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
// @include respond-to(handhelds) {
|
||||
// max-width: 280px;
|
||||
// }
|
||||
}
|
||||
|
||||
&-type {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: -4px;
|
||||
right: 2px;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
transition: transform .2s ease;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// @include respond-to(handhelds) {
|
||||
// right: 16px;
|
||||
// }
|
||||
|
||||
&.active {
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-send-vote {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&-avatars {
|
||||
display: flex;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&-answer {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 28px;
|
||||
margin-top: 1px;
|
||||
|
||||
&-text {
|
||||
margin-top: 6px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&-percents {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
font-weight: 500;
|
||||
margin-top: 7px;
|
||||
font-size: 14px;
|
||||
transition: .34s opacity;
|
||||
margin-left: -9px;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
left: 15px;
|
||||
color: #fff;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-weight: bold;
|
||||
font-size: .75rem;
|
||||
opacity: 0;
|
||||
animation: fade-in-opacity .1s ease forwards;
|
||||
animation-direction: reverse;
|
||||
animation-delay: .24s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:before {
|
||||
content: $tgico-check;
|
||||
//margin-left: 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
.animation-ring {
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-voting {
|
||||
.progress-ring__circle {
|
||||
stroke-dashoffset: -19.792;
|
||||
animation: pollAnswerRotate .65s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-correct):not(.is-chosen) {
|
||||
.poll-answer-selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple answers
|
||||
&.is-chosing {
|
||||
.poll-answer-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& ~ .poll-footer {
|
||||
.poll-send-vote {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-votes-count {
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 14px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 2px;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-dasharray: 0, 485.9;
|
||||
|
||||
use {
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
stroke: var(--primary-color);
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
text-align: center;
|
||||
margin-top: 7px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
&-footer-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -7px;
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
color: var(--primary-color);
|
||||
//text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
//border-bottom-left-radius: 6px;
|
||||
//border-bottom-right-radius: 12px;
|
||||
font-size: 1rem;
|
||||
line-height: 37px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-quiz-timer {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke: #a3adb6;
|
||||
transform: rotate(270deg);
|
||||
top: -7px;
|
||||
fill: none;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
&-time {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
color: #a3adb6;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-quiz .poll {
|
||||
&-answer {
|
||||
&.is-chosen:not(.is-correct) {
|
||||
use {
|
||||
stroke: #DF3F40;
|
||||
}
|
||||
|
||||
.poll-answer-selected {
|
||||
background: #DF3F40;
|
||||
//line-height: 16px;
|
||||
|
||||
&:before {
|
||||
content: $tgico-close;
|
||||
font-size: 12px;
|
||||
//margin-left: 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* &-line {
|
||||
use {
|
||||
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
avatar-element {
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.circle-hover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
transform: scale(1);
|
||||
transition: .1s transform;
|
||||
|
||||
.poll-answer-selected {
|
||||
display: flex!important;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 16px;
|
||||
animation: none;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-ring {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
transition: transform .12s;
|
||||
background-color: #f4f4f4;
|
||||
transform: scale(.1);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
top: unset;
|
||||
left: unset;
|
||||
|
||||
&__circle {
|
||||
transform-origin: center;
|
||||
transform: rotate(-90deg);
|
||||
transition: stroke-dashoffset .15s;
|
||||
stroke-dasharray: 56.5487, 56.5487;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 2;
|
||||
stroke: #dadbdc;
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-voted {
|
||||
.circle-hover, .animation-ring {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.poll-answer-percents {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.poll-answer-selected {
|
||||
animation-direction: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-retracting {
|
||||
.circle-hover {
|
||||
transition-delay: .24s;
|
||||
}
|
||||
|
||||
.animation-ring {
|
||||
transition-delay: .22s;
|
||||
}
|
||||
}
|
||||
|
||||
&.animating {
|
||||
.poll-line {
|
||||
transition: stroke-dashoffset .34s linear, stroke-dasharray .34s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pollAnswerRotate {
|
||||
to {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
@ -58,7 +58,6 @@ $transition: .2s ease-in-out;
|
||||
.you-spin-me-round {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.preloader-circular {
|
||||
@ -73,17 +72,27 @@ $transition: .2s ease-in-out;
|
||||
stroke-dasharray: 5, 149.82;
|
||||
//stroke-dasharray: 112.36, 149.82;
|
||||
stroke-dashoffset: 0;
|
||||
transition: stroke-dasharray $transition, stroke-width $transition;
|
||||
|
||||
stroke-linecap: round;
|
||||
stroke: white;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
&.is-visible:not(.manual), &.is-visible.animating {
|
||||
.you-spin-me-round {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.preloader-path-new {
|
||||
transition: stroke-dasharray $transition, stroke-width $transition;
|
||||
}
|
||||
}
|
||||
|
||||
&.preloader-swing {
|
||||
cursor: default;
|
||||
|
||||
.you-spin-me-round {
|
||||
animation: rotate 1s linear infinite;
|
||||
animation: rotate 1s linear infinite !important;
|
||||
}
|
||||
|
||||
.preloader-path-new {
|
||||
@ -153,7 +162,7 @@ $transition: .2s ease-in-out;
|
||||
background-color: #fff;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -219,4 +228,4 @@ $transition: .2s ease-in-out;
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -237%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
#column-right {
|
||||
position: relative;
|
||||
overflow: unset;
|
||||
|
||||
@include respond-to(only-small-screens) {
|
||||
box-shadow: 0 0.25rem 0.5rem 0.1rem hsla(0, 0%, 44.7%, .25);
|
||||
@ -17,7 +18,7 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
transform: translate3d(var(--right-column-width), 0, 0);
|
||||
transform: translate3d(calc(var(--right-column-width) + 1px), 0, 0);
|
||||
|
||||
.sidebar-content {
|
||||
min-width: var(--right-column-width);
|
||||
@ -36,10 +37,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to(medium-screens) {
|
||||
border-left: 1px solid #DADCE0;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 56px;
|
||||
width: 1px;
|
||||
background-color: var(--border-color);
|
||||
left: -1px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* @include respond-to(medium-screens) {
|
||||
border-left: 1px solid var(--border-color);
|
||||
} */
|
||||
|
||||
/* body.is-forward-active & {
|
||||
z-index: 4;
|
||||
} */
|
||||
@ -135,6 +147,7 @@
|
||||
word-break: break-word;
|
||||
max-width: 340px;
|
||||
margin: 0 auto;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
span.emoji {
|
||||
vertical-align: inherit;
|
||||
@ -144,7 +157,7 @@
|
||||
|
||||
&-subtitle {
|
||||
text-align: center;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 14px;
|
||||
margin-bottom: .875rem;
|
||||
margin-top: 1px;
|
||||
@ -154,7 +167,7 @@
|
||||
}
|
||||
|
||||
.online {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -179,7 +192,7 @@
|
||||
left: 24px;
|
||||
/* top: 0; */
|
||||
font-size: 24px;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
left: 15px;
|
||||
@ -204,7 +217,7 @@
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: #707579 !important;
|
||||
color: var(--secondary-text-color) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.6;
|
||||
|
||||
@ -269,7 +282,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.search-group__show-more {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -278,7 +291,7 @@
|
||||
border-top: 1px solid #dadce0;
|
||||
padding: 24px 0px 0px 24px;
|
||||
font-weight: 500;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 18px 0px 0px 16px;
|
||||
@ -308,7 +321,7 @@
|
||||
//top: -1px;
|
||||
top: 0px;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
@ -505,7 +518,7 @@
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -552,10 +565,8 @@
|
||||
}
|
||||
|
||||
.audio {
|
||||
padding-left: 61px;
|
||||
/* min-height: 58px; */
|
||||
justify-content: unset;
|
||||
height: 48px;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@include respond-to(not-handhelds) {
|
||||
@ -569,23 +580,6 @@
|
||||
/* &-no-subtitle {
|
||||
padding-bottom: 16px;
|
||||
} */
|
||||
|
||||
&-ico, &-download {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.part {
|
||||
height: 112px !important;
|
||||
width: 112px !important;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -607,7 +601,7 @@
|
||||
margin-left: 8px;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.search-group.is-short {
|
||||
@ -636,7 +630,7 @@
|
||||
|
||||
&-count {
|
||||
font-size: 14px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
&-header {
|
||||
@ -660,7 +654,7 @@
|
||||
|
||||
&.gray {
|
||||
background: #F1F3F4;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -677,7 +671,7 @@
|
||||
|
||||
&:hover {
|
||||
border-radius: 12px;
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
}
|
||||
|
||||
img {
|
||||
@ -696,7 +690,7 @@
|
||||
width: 100%;
|
||||
|
||||
&-answer {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
padding: 0 16px 8px 16px;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
@ -726,7 +720,7 @@
|
||||
padding-right: 32px;
|
||||
padding-left: 16.5px;
|
||||
font-size: 24px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
&-user {
|
||||
color: #000;
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
font-size: 16px;
|
||||
padding: 0 17px 0px 0px;
|
||||
line-height: 31px;
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
.sidebar {
|
||||
background-color: #fff;
|
||||
//overflow: hidden;
|
||||
|
||||
&-header {
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7.5px 16px;
|
||||
padding: 0 1rem;
|
||||
min-height: 56px;
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
@ -27,6 +24,7 @@
|
||||
font-weight: 500;
|
||||
padding-left: 24px;
|
||||
font-size: 20px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.btn-icon + .btn-icon {
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
z-index: 2;
|
||||
flex-direction: row;
|
||||
|
||||
color: $color-gray;
|
||||
border-bottom: 1px solid $lightgrey;
|
||||
color: var(--secondary-text-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
|
||||
&-item {
|
||||
@ -31,11 +31,21 @@
|
||||
@include hover-background-effect();
|
||||
|
||||
&.active {
|
||||
color: var(--primary-color);
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c-ripple__circle {
|
||||
background-color: var(--color-blue-hover);
|
||||
background-color: var(--light-primary-color);
|
||||
}
|
||||
|
||||
@include hover-background-effect(primary);
|
||||
|
||||
.badge {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
@ -44,14 +54,6 @@
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-blue;
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@ -59,7 +61,7 @@
|
||||
bottom: calc(-.625rem - 2px);
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
height: .1875rem;
|
||||
width: 100%;
|
||||
border-radius: .1875rem .1875rem 0 0;
|
||||
@ -102,7 +104,7 @@
|
||||
position: relative;
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 1;
|
||||
background-color: #fff;
|
||||
background-color: var(--background-color);
|
||||
//z-index: 1;
|
||||
|
||||
body.animation-level-0 & {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 1rem;
|
||||
border-bottom: 2px solid $button-primary-background;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 25% 50%; */
|
||||
display: flex;
|
||||
max-width: calc(#{$large-screen} + 2px) !important;
|
||||
|
||||
.avatar-edit {
|
||||
.tgico-cameraadd {
|
||||
@ -93,7 +94,7 @@
|
||||
|
||||
// ! do not change it to &-path
|
||||
.preloader-path {
|
||||
stroke: $button-primary-background;
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,7 +117,7 @@
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #DADCE0;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.avatar-edit {
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
font-weight: 500;
|
||||
padding: 1rem 1.5rem 0;
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 12px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -109,7 +109,7 @@
|
||||
.btn-icon.active {
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
background-color: $color-blue !important;
|
||||
background-color: var(--primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,14 +4,19 @@
|
||||
#{$parent} {
|
||||
&-header {
|
||||
display: flex;
|
||||
margin-bottom: .4375rem;
|
||||
margin-bottom: .625rem;
|
||||
align-items: center;
|
||||
padding: .125rem .25rem;
|
||||
}
|
||||
|
||||
&-container {
|
||||
padding: 1rem 1.5rem .75rem 1rem;
|
||||
padding: 1rem 1.5rem .8125rem;
|
||||
max-width: unquote('min(400px, 100%)');
|
||||
|
||||
&.have-checkbox {
|
||||
.popup-buttons {
|
||||
margin-top: .5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
@ -20,23 +25,24 @@
|
||||
margin-bottom: .125rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: .75rem;
|
||||
padding-left: .6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
padding: 0 .25rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.625rem;
|
||||
margin-bottom: 0;
|
||||
min-width: 15rem;
|
||||
max-width: fit-content;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
margin-right: -.75rem;
|
||||
margin-top: 1.625rem;
|
||||
margin-right: -.5rem;
|
||||
|
||||
.btn {
|
||||
font-weight: 500;
|
||||
@ -52,8 +58,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
/* padding: 0 .9375rem;
|
||||
margin: 0 -.8125rem; */
|
||||
padding: 0 1.1875rem;
|
||||
margin: 0;
|
||||
margin: 0 -1.0625rem;
|
||||
|
||||
.checkbox-box {
|
||||
left: auto;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
position: relative;
|
||||
/* max-width: 400px; */
|
||||
border-radius: $border-radius-medium;
|
||||
background-color: #fff;
|
||||
background-color: var(--surface-color);
|
||||
padding: 1rem;
|
||||
transform: translate3d(0, 3rem, 0);
|
||||
backface-visibility: hidden;
|
||||
@ -63,26 +63,27 @@
|
||||
|
||||
&-close {
|
||||
cursor: pointer;
|
||||
color: $color-gray;
|
||||
color: var(--secondary-text-color);
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
justify-self: center;
|
||||
line-height: 1;
|
||||
transition: color .2s;
|
||||
//transition: color .2s;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
/* @include hover() {
|
||||
color: #000;
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&-body {
|
||||
@ -109,7 +110,7 @@
|
||||
.btn {
|
||||
& + .btn {
|
||||
margin-top: 0 !important;
|
||||
margin-right: .5rem;
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,9 +11,9 @@
|
||||
}
|
||||
|
||||
.sticker-set-footer {
|
||||
border-top: 1px solid $lightgrey;
|
||||
border-top: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
|
||||
.btn-primary {
|
||||
text-transform: uppercase;
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
&:hover {
|
||||
border-radius: 12px;
|
||||
background-color: var(--color-gray-hover);
|
||||
background-color: var(--light-secondary-text-color);
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -2,22 +2,12 @@ $placeholder-color: #9e9e9e;
|
||||
$border-radius: 8px;
|
||||
$border-radius-medium: 10px;
|
||||
$border-radius-big: 12px;
|
||||
$button-primary-background: #4EA4F6;
|
||||
|
||||
$color-green: #4DCD5E;
|
||||
$color-error: #E53935;
|
||||
$color-red: #E53935;
|
||||
$color-gray: #707579;
|
||||
$color-blue: #50a2e9;
|
||||
$color-error: #df3f40;
|
||||
$color-red: #df3f40;
|
||||
$hover-alpha: .08;
|
||||
|
||||
$darkgreen: #50af4f;
|
||||
$color-text-green: $darkgreen;
|
||||
|
||||
$lightgrey: #dadce0;
|
||||
|
||||
$light: rgba($color-gray, $hover-alpha);
|
||||
|
||||
//$small-screen: 720px;
|
||||
$small-screen: 600px;
|
||||
//$small-screen: 900px;
|
||||
@ -30,7 +20,7 @@ $messages-container-width: 728px;
|
||||
|
||||
$chat-input-size: 3.375rem;
|
||||
$chat-input-handhelds-size: 2.875rem;
|
||||
$chat-padding: 1rem;
|
||||
$chat-padding: .8125rem;
|
||||
$chat-padding-handhelds: .5rem;
|
||||
|
||||
@function hover-color($color) {
|
||||
@ -43,11 +33,10 @@ $chat-padding-handhelds: .5rem;
|
||||
:root {
|
||||
--vh: 1vh;
|
||||
--z-below: -1;
|
||||
--hover-alpha: #{$hover-alpha};
|
||||
|
||||
--color-gray: #c4c9cc;
|
||||
--color-gray-hover: #{hover-color($color-gray)};
|
||||
--color-blue-hover: #{hover-color($color-blue)};
|
||||
--color-red-hover: #{hover-color($color-red)};
|
||||
--color-text-secondary: #{$color-gray};
|
||||
--pm-transition: .2s ease-in-out;
|
||||
--layer-transition: .2s ease-in-out;
|
||||
--slide-header-transition: .4s ease-in-out;
|
||||
@ -105,6 +94,82 @@ $chat-padding-handhelds: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
// * Day theme
|
||||
--body-background-color: #fff;
|
||||
//--background-color: #f4f4f5;
|
||||
--background-color: #fff;
|
||||
--border-color: #dfe1e5;
|
||||
--surface-color: #fff;
|
||||
|
||||
--input-search-background-color: #fff;
|
||||
--input-search-border-color: #dfe1e5;
|
||||
|
||||
$primary-color: #3390ec;
|
||||
--primary-color: #{$primary-color};
|
||||
--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-text-color: #707579;
|
||||
|
||||
--light-secondary-text-color: #{hover-color($secondary-text-color)};
|
||||
|
||||
--avatar-online-color: #0ac630;
|
||||
--chatlist-status-color: var(--avatar-online-color);
|
||||
--chatlist-pinned-color: #a2abb2;
|
||||
--badge-text-color: #fff;
|
||||
|
||||
--message-background-color: var(--surface-color);
|
||||
--message-out-background-color: #eeffde;
|
||||
--message-out-primary-color: #4fae4e;
|
||||
--message-out-secondary-color: #4fae4e;
|
||||
--message-out-audio-play-button-color: #fff;
|
||||
|
||||
// * Day theme end
|
||||
}
|
||||
|
||||
html.night {
|
||||
//:root {
|
||||
// * Night theme
|
||||
--body-background-color: #181818;
|
||||
//--background-color: #181818;
|
||||
--background-color: #212121;
|
||||
--border-color: #0f0f0f;
|
||||
--surface-color: #212121;
|
||||
|
||||
--input-search-background-color: #181818;
|
||||
--input-search-border-color: #2f2f2f;
|
||||
|
||||
$primary-color: #878afd;
|
||||
--primary-color: #{$primary-color};
|
||||
--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-text-color: #{$secondary-text-color};
|
||||
|
||||
--light-secondary-text-color: #{hover-color($secondary-text-color)};
|
||||
|
||||
--avatar-online-color: #0ac630;
|
||||
--chatlist-status-color: var(--primary-color);
|
||||
--chatlist-pinned-color: var(--secondary-color);
|
||||
--badge-text-color: #fff;
|
||||
|
||||
--message-background-color: var(--surface-color);
|
||||
--message-out-background-color: #ae582d;
|
||||
--message-out-primary-color: #fff;
|
||||
--message-out-secondary-color: #4fae4e;
|
||||
--message-out-audio-play-button-color: var(--message-out-background-color);
|
||||
// * Night theme end
|
||||
}
|
||||
|
||||
@import "partials/ico";
|
||||
@import "partials/input";
|
||||
@import "partials/button";
|
||||
@ -138,6 +203,7 @@ $chat-padding-handhelds: .5rem;
|
||||
@import "partials/audio";
|
||||
@import "partials/quizHint";
|
||||
@import "partials/peerTyping";
|
||||
@import "partials/poll";
|
||||
|
||||
@import "partials/popups/popup";
|
||||
@import "partials/popups/editAvatar";
|
||||
@ -280,6 +346,7 @@ html {
|
||||
|
||||
body {
|
||||
touch-action: pan-x pan-y;
|
||||
background-color: var(--body-background-color);
|
||||
}
|
||||
|
||||
/* body {
|
||||
@ -292,7 +359,7 @@ body {
|
||||
} */
|
||||
|
||||
a {
|
||||
color: $color-blue;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea, html {
|
||||
@ -347,7 +414,8 @@ h4 {
|
||||
}
|
||||
|
||||
input, [contenteditable=true] {
|
||||
caret-color: $button-primary-background;
|
||||
caret-color: var(--primary-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@ -356,7 +424,7 @@ input, textarea {
|
||||
|
||||
.subtitle {
|
||||
/* font-weight: 500; */
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@ -369,10 +437,10 @@ input, textarea {
|
||||
}
|
||||
|
||||
.blue, .primary {
|
||||
color: $color-blue!important;
|
||||
color: var(--primary-color)!important;
|
||||
|
||||
.c-ripple__circle {
|
||||
background-color: var(--color-blue-hover);
|
||||
background-color: var(--light-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -466,13 +534,13 @@ input, textarea {
|
||||
hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 1px solid #DADCE0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 0;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.user-title, b/* , .user-last-message b */ {
|
||||
color: #000;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: bolder;
|
||||
//font-weight: 500;
|
||||
//font-weight: normal;
|
||||
@ -494,7 +562,7 @@ hr {
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color-blue;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tgico-cameraadd {
|
||||
@ -715,7 +783,7 @@ img.emoji {
|
||||
padding-right: 32px;
|
||||
padding-left: 16px;
|
||||
font-size: 24px;
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -728,7 +796,7 @@ img.emoji {
|
||||
// }
|
||||
|
||||
.content-empty {
|
||||
color: #707579;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
@keyframes grow-icon {
|
||||
@ -1113,6 +1181,7 @@ middle-ellipsis-element {
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--primary-text-color);
|
||||
line-height: var(--line-height);
|
||||
|
||||
&-right {
|
||||
@ -1132,7 +1201,7 @@ middle-ellipsis-element {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1157,7 +1226,7 @@ middle-ellipsis-element {
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: var(--color-text-secondary) !important;
|
||||
color: var(--secondary-text-color) !important;
|
||||
font-size: .875rem !important;
|
||||
line-height: var(--line-height);
|
||||
margin-top: .125rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user