From d40d7d0ca1a2b2fb4a6597b0c3f45c5ed12835b0 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 2 Apr 2021 18:32:10 +0400 Subject: [PATCH] Layout changes Night theme at the very beginning --- src/components/audio.ts | 14 +- src/components/buttonMenu.ts | 15 +- src/components/chat/topbar.ts | 2 +- src/components/checkboxField.ts | 49 ++- src/components/poll.ts | 12 +- src/components/popups/peer.ts | 2 + src/components/preloader.ts | 5 +- src/components/sidebarLeft/index.ts | 37 +- src/components/singleTransition.ts | 4 +- src/index.hbs | 2 +- src/lang.ts | 6 +- src/lib/appManagers/appDialogsManager.ts | 20 +- src/lib/appManagers/appImManager.ts | 16 +- src/lib/richtextprocessor.ts | 4 +- src/scss/mixins/_hover.scss | 4 +- src/scss/partials/_animatedIcon.scss | 4 +- src/scss/partials/_audio.scss | 65 ++- src/scss/partials/_avatar.scss | 9 +- src/scss/partials/_badge.scss | 14 +- src/scss/partials/_button.scss | 87 +++- src/scss/partials/_chat.scss | 51 +-- src/scss/partials/_chatBubble.scss | 479 ++++------------------ src/scss/partials/_chatDrop.scss | 4 +- src/scss/partials/_chatMarkupTooltip.scss | 4 +- src/scss/partials/_chatPinned.scss | 22 +- src/scss/partials/_chatTopbar.scss | 20 +- src/scss/partials/_chatlist.scss | 27 +- src/scss/partials/_checkbox.scss | 27 +- src/scss/partials/_ckin.scss | 2 +- src/scss/partials/_document.scss | 4 +- src/scss/partials/_emojiDropdown.scss | 8 +- src/scss/partials/_input.scss | 29 +- src/scss/partials/_leftSidebar.scss | 42 +- src/scss/partials/_mediaViewer.scss | 4 +- src/scss/partials/_peerTyping.scss | 2 +- src/scss/partials/_poll.scss | 357 ++++++++++++++++ src/scss/partials/_preloader.scss | 19 +- src/scss/partials/_rightSidebar.scss | 66 ++- src/scss/partials/_selector.scss | 2 +- src/scss/partials/_sidebar.scss | 8 +- src/scss/partials/_slider.scss | 28 +- src/scss/partials/pages/_authCode.scss | 2 +- src/scss/partials/pages/_chats.scss | 5 +- src/scss/partials/popups/_createPoll.scss | 2 +- src/scss/partials/popups/_datePicker.scss | 4 +- src/scss/partials/popups/_peer.scss | 24 +- src/scss/partials/popups/_popup.scss | 13 +- src/scss/partials/popups/_stickers.scss | 6 +- src/scss/style.scss | 125 ++++-- 49 files changed, 1004 insertions(+), 753 deletions(-) create mode 100644 src/scss/partials/_poll.scss diff --git a/src/components/audio.ts b/src/components/audio.ts index 9d7ac288..5a02d3c1 100644 --- a/src/components/audio.ts +++ b/src/components/audio.ts @@ -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 = ` - + `; html += h; diff --git a/src/components/buttonMenu.ts b/src/components/buttonMenu.ts index 319839e6..b7182970 100644 --- a/src/components/buttonMenu.ts +++ b/src/components/buttonMenu.ts @@ -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) => { diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 945fffb5..4b9c4461 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -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'); diff --git a/src/components/checkboxField.ts b/src/components/checkboxField.ts index 36d3fd2a..73654823 100644 --- a/src/components/checkboxField.ts +++ b/src/components/checkboxField.ts @@ -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); diff --git a/src/components/poll.ts b/src/components/poll.ts index 2a75c2f5..b0123684 100644 --- a/src/components/poll.ts +++ b/src/components/poll.ts @@ -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); diff --git a/src/components/popups/peer.ts b/src/components/popups/peer.ts index 03481aa8..836d70fa 100644 --- a/src/components/popups/peer.ts +++ b/src/components/popups/peer.ts @@ -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); diff --git a/src/components/preloader.ts b/src/components/preloader.ts index b17fa185..2133bba0 100644 --- a/src/components/preloader.ts +++ b/src/components/preloader.ts @@ -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(); } diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 03687ed8..a5cfe533 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -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'); } }]); diff --git a/src/components/singleTransition.ts b/src/components/singleTransition.ts index 35e2f13f..2dfd4ef1 100644 --- a/src/components/singleTransition.ts +++ b/src/components/singleTransition.ts @@ -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); } diff --git a/src/index.hbs b/src/index.hbs index 659028f2..2fe9c853 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -1,5 +1,5 @@ - + diff --git a/src/lang.ts b/src/lang.ts index 7aa78031..65f237ba 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -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", diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index c8ac4c05..384decb9 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -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') { diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 90d2f7bb..90aeec83 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -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 { const promises = this.chats.map(chat => chat.setBackground(url)); return promises[promises.length - 1].then(() => { diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts index 2d5d0fad..012be66d 100644 --- a/src/lib/richtextprocessor.ts +++ b/src/lib/richtextprocessor.ts @@ -505,7 +505,7 @@ namespace RichTextProcessor { const currentContext = url[0] === '#'; - insertPart(entity, ``, ''); + insertPart(entity, ``, ''); } break; @@ -525,7 +525,7 @@ namespace RichTextProcessor { if(contextUrl) { const entityText = text.substr(entity.offset, entity.length); const hashtag = entityText.substr(1); - insertPart(entity, ``, ''); + insertPart(entity, ``, ''); } break; diff --git a/src/scss/mixins/_hover.scss b/src/scss/mixins/_hover.scss index fd577f45..744014e8 100644 --- a/src/scss/mixins/_hover.scss +++ b/src/scss/mixins/_hover.scss @@ -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); } diff --git a/src/scss/partials/_animatedIcon.scss b/src/scss/partials/_animatedIcon.scss index 1a604bd3..72e82055 100644 --- a/src/scss/partials/_animatedIcon.scss +++ b/src/scss/partials/_animatedIcon.scss @@ -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); } diff --git a/src/scss/partials/_audio.scss b/src/scss/partials/_audio.scss index b9a2a25b..fcdabdf4 100644 --- a/src/scss/partials/_audio.scss +++ b/src/scss/partials/_audio.scss @@ -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); } } -} \ No newline at end of file +} diff --git a/src/scss/partials/_avatar.scss b/src/scss/partials/_avatar.scss index 68341c3d..d6de9c27 100644 --- a/src/scss/partials/_avatar.scss +++ b/src/scss/partials/_avatar.scss @@ -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; diff --git a/src/scss/partials/_badge.scss b/src/scss/partials/_badge.scss index 9cbe4857..1efc95bd 100644 --- a/src/scss/partials/_badge.scss +++ b/src/scss/partials/_badge.scss @@ -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); } -} \ No newline at end of file +} diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 7af80519..677d4b68 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -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); } */ } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index bd025702..15abf4c6 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -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; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index f4b05a1f..b85b4c73 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -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); - } -} \ No newline at end of file diff --git a/src/scss/partials/_chatDrop.scss b/src/scss/partials/_chatDrop.scss index 17e3d95c..245c96f6 100644 --- a/src/scss/partials/_chatDrop.scss +++ b/src/scss/partials/_chatDrop.scss @@ -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); } & + & { diff --git a/src/scss/partials/_chatMarkupTooltip.scss b/src/scss/partials/_chatMarkupTooltip.scss index 04e69471..59cea37c 100644 --- a/src/scss/partials/_chatMarkupTooltip.scss +++ b/src/scss/partials/_chatMarkupTooltip.scss @@ -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 { diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 7ea1005e..c774328e 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -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 { diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index 4c4836ba..413a5aba 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -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); } } } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index ae88f703..b67361cc 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -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); } } diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index bf2dbd19..98424fb6 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -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; } */ } diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index e1b568c0..d5490d6e 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -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; diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index 5c0b5156..e22504cd 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -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; diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss index 7ec18b35..713897a5 100644 --- a/src/scss/partials/_emojiDropdown.scss +++ b/src/scss/partials/_emojiDropdown.scss @@ -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); } } diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss index 1ccfef6e..5751858e 100644 --- a/src/scss/partials/_input.scss +++ b/src/scss/partials/_input.scss @@ -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 { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 3e05b999..0c8b097c 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -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; } diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 99554d9d..5bf73949 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -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; diff --git a/src/scss/partials/_peerTyping.scss b/src/scss/partials/_peerTyping.scss index 7c37135d..aa220ee3 100644 --- a/src/scss/partials/_peerTyping.scss +++ b/src/scss/partials/_peerTyping.scss @@ -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; diff --git a/src/scss/partials/_poll.scss b/src/scss/partials/_poll.scss new file mode 100644 index 00000000..dc1ea946 --- /dev/null +++ b/src/scss/partials/_poll.scss @@ -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); + } +} diff --git a/src/scss/partials/_preloader.scss b/src/scss/partials/_preloader.scss index 628987ca..397d9cea 100644 --- a/src/scss/partials/_preloader.scss +++ b/src/scss/partials/_preloader.scss @@ -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%; } -} \ No newline at end of file +} diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 3d914ba0..de6dfe38 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -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); } } diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss index 2057f070..be829e03 100644 --- a/src/scss/partials/_selector.scss +++ b/src/scss/partials/_selector.scss @@ -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; diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss index c2463515..cb56490e 100644 --- a/src/scss/partials/_sidebar.scss +++ b/src/scss/partials/_sidebar.scss @@ -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 { diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index d5413ed4..b97b0b1d 100644 --- a/src/scss/partials/_slider.scss +++ b/src/scss/partials/_slider.scss @@ -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 & { diff --git a/src/scss/partials/pages/_authCode.scss b/src/scss/partials/pages/_authCode.scss index 7764584a..7b91257c 100644 --- a/src/scss/partials/pages/_authCode.scss +++ b/src/scss/partials/pages/_authCode.scss @@ -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); } } diff --git a/src/scss/partials/pages/_chats.scss b/src/scss/partials/pages/_chats.scss index 17260599..9acdcc83 100644 --- a/src/scss/partials/pages/_chats.scss +++ b/src/scss/partials/pages/_chats.scss @@ -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 { diff --git a/src/scss/partials/popups/_createPoll.scss b/src/scss/partials/popups/_createPoll.scss index d42d6e88..4970fd1f 100644 --- a/src/scss/partials/popups/_createPoll.scss +++ b/src/scss/partials/popups/_createPoll.scss @@ -53,7 +53,7 @@ } .caption { - color: #707579; + color: var(--secondary-text-color); font-weight: 500; padding: 1rem 1.5rem 0; } diff --git a/src/scss/partials/popups/_datePicker.scss b/src/scss/partials/popups/_datePicker.scss index 2aecc5ee..2835893c 100644 --- a/src/scss/partials/popups/_datePicker.scss +++ b/src/scss/partials/popups/_datePicker.scss @@ -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; } } } diff --git a/src/scss/partials/popups/_peer.scss b/src/scss/partials/popups/_peer.scss index fac04efa..75af6c89 100644 --- a/src/scss/partials/popups/_peer.scss +++ b/src/scss/partials/popups/_peer.scss @@ -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; diff --git a/src/scss/partials/popups/_popup.scss b/src/scss/partials/popups/_popup.scss index a77b2d6a..1c12149b 100644 --- a/src/scss/partials/popups/_popup.scss +++ b/src/scss/partials/popups/_popup.scss @@ -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; } } } diff --git a/src/scss/partials/popups/_stickers.scss b/src/scss/partials/popups/_stickers.scss index 5623b98d..e0c780d4 100644 --- a/src/scss/partials/popups/_stickers.scss +++ b/src/scss/partials/popups/_stickers.scss @@ -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 { diff --git a/src/scss/style.scss b/src/scss/style.scss index 4c9a88d3..45848300 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -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;