r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Backgrounds for night theme

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-04-19 14:36:14 +04:00
parent 60f4ddeba4
commit b655c08908
12 changed files with 209 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/checkboxField.ts
View File

@ -16,6 +16,7 @@ export type CheckboxFieldOptions = {
round?: boolean,
toggle?: boolean,
stateKey?: string,
stateValues?: any[],
disabled?: boolean,
checked?: boolean,
restriction?: boolean,
@ -55,10 +56,25 @@ export default class CheckboxField {
if(options.stateKey) {
appStateManager.getState().then(state => {
this.checked = getDeepProperty(state, options.stateKey);
const stateValue = getDeepProperty(state, options.stateKey);
let checked: boolean;
if(options.stateValues) {
checked = options.stateValues.indexOf(stateValue) === 1;
} else {
checked = stateValue;
}
this.setValueSilently(checked);
input.addEventListener('change', () => {
appStateManager.setByKey(options.stateKey, input.checked);
let value: any;
if(options.stateValues) {
value = options.stateValues[input.checked ? 1 : 0];
} else {
value = input.checked;
}
appStateManager.setByKey(options.stateKey, value);
});
});
}

17
src/components/sidebarLeft/index.ts
View File

@ -8,7 +8,7 @@
import { formatNumber } from "../../helpers/number";
import appImManager from "../../lib/appManagers/appImManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import appStateManager from "../../lib/appManagers/appStateManager";
import appStateManager, { State } from "../../lib/appManagers/appStateManager";
import appUsersManager from "../../lib/appManagers/appUsersManager";
import rootScope from "../../lib/rootScope";
import { SearchGroup } from "../appSearch";
@ -100,6 +100,16 @@ export class AppSidebarLeft extends SidebarSlider {
}
};
const themeCheckboxField = new CheckboxField({
toggle: true,
checked: rootScope.settings.theme === 'night'
});
themeCheckboxField.input.addEventListener('change', () => {
rootScope.settings.theme = themeCheckboxField.input.checked ? 'night' : 'day';
appStateManager.pushToState('settings', rootScope.settings);
appImManager.applyCurrentTheme();
});
const menuButtons: (ButtonMenuItemOptions & {verify?: () => boolean})[] = [{
icon: 'saved',
text: 'SavedMessages',
@ -124,10 +134,7 @@ export class AppSidebarLeft extends SidebarSlider {
onClick: () => {
},
checkboxField: new CheckboxField({
toggle: true,
stateKey: 'settings.nightTheme',
})
checkboxField: themeCheckboxField
}, {
icon: 'animations',
text: 'Animations',

29
src/components/sidebarLeft/tabs/background.ts
View File

@ -34,16 +34,20 @@ export default class AppBackgroundTab extends SliderSuperTab {
//const uploadButton = Button('btn-primary btn-transparent', {icon: 'cameraadd', text: 'ChatBackground.UploadWallpaper', disabled: true});
//const colorButton = Button('btn-primary btn-transparent', {icon: 'colorize', text: 'ChatBackground.SetColor', disabled: true});
const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
const blurCheckboxField = new CheckboxField({
text: 'ChatBackground.Blur',
name: 'blur',
stateKey: 'settings.background.blur',
checked: theme.background.blur,
withRipple: true
});
blurCheckboxField.input.addEventListener('change', () => {
const active = grid.querySelector('.active') as HTMLElement;
if(!active) return;
theme.background.blur = blurCheckboxField.input.checked;
appStateManager.pushToState('settings', rootScope.settings);
// * wait for animation end
setTimeout(() => {
setBackgroundDocument(active.dataset.slug, appDocsManager.getDoc(active.dataset.docId));
@ -75,35 +79,38 @@ export default class AppBackgroundTab extends SliderSuperTab {
download.then(() => {
if(!middleware()) {
deferred.resolve();
return;
}
const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
const onReady = (url: string) => {
//const perf = performance.now();
averageColor(url).then(pixel => {
if(!middleware()) {
deferred.resolve();
return;
}
const hsla = highlightningColor(pixel);
//console.log(doc, hsla, performance.now() - perf);
rootScope.settings.background.slug = slug;
rootScope.settings.background.type = 'image';
rootScope.settings.background.highlightningColor = hsla;
appImManager.applyBackgroundColor();
background.slug = slug;
background.type = 'image';
background.highlightningColor = hsla;
appStateManager.pushToState('settings', rootScope.settings);
saveToCache(slug, url);
appImManager.setBackground(url).then(deferred.resolve);
appImManager.applyCurrentTheme(slug, url).then(deferred.resolve);
});
};
if(rootScope.settings.background.blur) {
if(background.blur) {
setTimeout(() => {
blur(doc.url, 12, 4)
.then(url => {
if(!middleware()) {
deferred.resolve();
return;
}
@ -120,7 +127,8 @@ export default class AppBackgroundTab extends SliderSuperTab {
const setActive = () => {
const active = grid.querySelector('.active');
const target = rootScope.settings.background.type === 'image' ? grid.querySelector(`.grid-item[data-slug="${rootScope.settings.background.slug}"]`) : null;
const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
const target = background.type === 'image' ? grid.querySelector(`.grid-item[data-slug="${background.slug}"]`) : null;
if(active === target) {
return;
}
@ -137,6 +145,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
rootScope.on('background_change', setActive);
apiManager.invokeApiHashable('account.getWallPapers').then((accountWallpapers) => {
const background = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme).background;
const wallpapers = (accountWallpapers as AccountWallPapers.accountWallPapers).wallpapers as WallPaper.wallPaper[];
wallpapers.forEach((wallpaper) => {
if(wallpaper.pFlags.pattern || (wallpaper.document as MyDocument).mime_type.indexOf('application/') === 0) {
@ -164,7 +173,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
container.dataset.docId = wallpaper.document.id;
container.dataset.slug = wallpaper.slug;
if(rootScope.settings.background.type === 'image' && rootScope.settings.background.slug === wallpaper.slug) {
if(background.type === 'image' && background.slug === wallpaper.slug) {
container.classList.add('active');
}
@ -189,7 +198,7 @@ export default class AppBackgroundTab extends SliderSuperTab {
const load = () => {
const promise = setBackgroundDocument(slug, doc);
if(!doc.url || rootScope.settings.background.blur) {
if(!doc.url || background.blur) {
preloader.attach(target, true, promise);
}
};

4
src/helpers/dom.ts
View File

@ -13,7 +13,7 @@ import { MessageEntity } from "../layer";
import RichTextProcessor from "../lib/richtextprocessor";
import ListenerSetter from "./listenerSetter";
import { isTouchSupported } from "./touchSupport";
import { isApple, isMobileSafari } from "./userAgent";
import { isApple, isMobile, isMobileSafari } from "./userAgent";
import rootScope from "../lib/rootScope";
import { MOUNT_CLASS_TO } from "../config/debug";
import { doubleRaf } from "./schedulers";
@ -598,7 +598,7 @@ export const handleScrollSideEvent = (elem: HTMLElement, side: 'top' | 'bottom',
} */
export function isSendShortcutPressed(e: KeyboardEvent) {
if(e.key === 'Enter' && !isTouchSupported) {
if(e.key === 'Enter' && !isMobile) {
/* if(e.ctrlKey || e.metaKey) {
this.messageInput.innerHTML += '<br>';
placeCaretAtEnd(this.message)

2
src/index.ts
View File

@ -139,7 +139,7 @@ console.timeEnd('get storage1'); */
});
if(userAgent.isApple) {
if(userAgent.isSafari) {
if(userAgent.isSafari && userAgent.isMobile) {
document.documentElement.classList.add('is-safari');
if(touchSupport.isTouchSupported) {

2
src/lang.ts
View File

@ -93,7 +93,7 @@ const lang = {
"ReportBug": "Report Bug",
"Notifications.Count": {
"one_value": "%d notification",
"other_value": "%d notifications",
"other_value": "%d notifications"
},
"Notifications.Forwarded": {
"one_value": "Forwarded %d message",

73
src/lib/appManagers/appImManager.ts
View File

@ -45,8 +45,8 @@ import appNotificationsManager from './appNotificationsManager';
import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
import { i18n } from '../langPack';
import { SendMessageAction } from '../../layer';
import { highlightningColor, hslaStringToRgbString } from '../../helpers/color';
import { getObjectKeysAndSort } from '../../helpers/object';
import { hslaStringToRgbString } from '../../helpers/color';
import { copy, getObjectKeysAndSort } from '../../helpers/object';
import { getFilesFromEvent } from '../../helpers/files';
//console.log('appImManager included33!');
@ -80,6 +80,7 @@ export class AppImManager {
public markupTooltip: MarkupTooltip;
private themeColorElem: Element;
private backgroundPromises: {[slug: string]: Promise<string>} = {};
get myId() {
return rootScope.myId;
@ -148,18 +149,7 @@ export class AppImManager {
animationIntersector.checkAnimations(false);
});
const isDefaultBackground = rootScope.settings.background.blur === AppStateManager.STATE_INIT.settings.background.blur &&
rootScope.settings.background.slug === AppStateManager.STATE_INIT.settings.background.slug;
if(!isDefaultBackground) {
appDownloadManager.cacheStorage.getFile('backgrounds/' + rootScope.settings.background.slug).then(blob => {
this.setBackground(URL.createObjectURL(blob), false);
}, () => { // * if NO_ENTRY_FOUND
this.setBackground('');
appStateManager.setByKey('settings.background', AppStateManager.STATE_INIT.settings.background); // * reset background
});
} else {
this.setBackground('');
}
this.applyCurrentTheme();
// * fix simultaneous opened both sidebars, can happen when floating sidebar is opened with left sidebar
mediaSizes.addEventListener('changeScreen', (from, to) => {
@ -230,6 +220,31 @@ export class AppImManager {
});
}
public setCurrentBackground(broadcastEvent = false) {
const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
const isDefaultBackground = theme.background.blur === defaultTheme.background.blur &&
theme.background.slug === defaultTheme.background.slug;
if(!isDefaultBackground) {
return this.getBackground(theme.background.slug).then((url) => {
return this.setBackground(url, broadcastEvent);
}, () => { // * if NO_ENTRY_FOUND
theme.background = copy(defaultTheme.background); // * reset background
return this.setBackground('', true);
});
} else {
return this.setBackground('', broadcastEvent);
}
}
private getBackground(slug: string) {
if(this.backgroundPromises[slug]) return this.backgroundPromises[slug];
return this.backgroundPromises[slug] = appDownloadManager.cacheStorage.getFile('backgrounds/' + slug).then(blob => {
return URL.createObjectURL(blob);
});
}
public setBackground(url: string, broadcastEvent = true): Promise<void> {
const promises = this.chats.map(chat => chat.setBackground(url));
return promises[promises.length - 1].then(() => {
@ -280,18 +295,14 @@ export class AppImManager {
return sessionStorage.getFromCache('chatPositions')[key];
}
public applyBackgroundColor() {
public applyHighlightningColor() {
let hsla: string;
if(rootScope.settings.nightTheme) {
hsla = highlightningColor(new Uint8ClampedArray([15, 15, 15, 1]));
const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
if(theme.background.highlightningColor) {
hsla = theme.background.highlightningColor;
document.documentElement.style.setProperty('--message-highlightning-color', hsla);
} else {
if(rootScope.settings.background.highlightningColor) {
hsla = rootScope.settings.background.highlightningColor;
document.documentElement.style.setProperty('--message-highlightning-color', hsla);
} else {
document.documentElement.style.removeProperty('--message-highlightning-color');
}
document.documentElement.style.removeProperty('--message-highlightning-color');
}
let themeColor = '#ffffff';
@ -308,12 +319,20 @@ export class AppImManager {
}
}
public applyCurrentTheme(slug?: string, backgroundUrl?: string) {
this.applyHighlightningColor();
document.documentElement.classList.toggle('night', rootScope.settings.theme === 'night');
if(backgroundUrl) {
this.backgroundPromises[slug] = Promise.resolve(backgroundUrl);
}
return this.setCurrentBackground(!!slug);
}
private setSettings = () => {
document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
this.applyBackgroundColor();
document.documentElement.classList.toggle('night', rootScope.settings.nightTheme);
document.body.classList.toggle('animation-level-0', !rootScope.settings.animationsEnabled);
document.body.classList.toggle('animation-level-1', false);

106
src/lib/appManagers/appStateManager.ts
View File

@ -24,6 +24,19 @@ import DEBUG, { MOUNT_CLASS_TO } from '../../config/debug';
const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day
const STATE_VERSION = App.version;
type Background = {
type: 'color' | 'image' | 'default',
blur: boolean,
highlightningColor?: string,
color?: string,
slug?: string,
};
type Theme = {
name: 'day' | 'night',
background: Background
};
export type State = Partial<{
dialogs: Dialog[],
allDialogsLoaded: DialogsStorage['allDialogsLoaded'],
@ -63,17 +76,13 @@ export type State = Partial<{
suggest: boolean,
loop: boolean
},
background: {
type: 'color' | 'image' | 'default',
blur: boolean,
highlightningColor?: string,
color?: string,
slug?: string,
},
background?: Background, // ! DEPRECATED
themes: Theme[],
theme: Theme['name'],
notifications: {
sound: boolean
},
nightTheme: boolean,
nightTheme?: boolean, // ! DEPRECATED
},
drafts: AppDraftsManager['drafts']
}>;
@ -115,16 +124,26 @@ export const STATE_INIT: State = {
suggest: true,
loop: true
},
background: {
type: 'image',
blur: false,
slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile,
highlightningColor: 'hsla(85.5319, 36.9171%, 40.402%, 0.4)'
},
themes: [{
name: 'day',
background: {
type: 'image',
blur: false,
slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile,
highlightningColor: 'hsla(85.5319, 36.9171%, 40.402%, 0.4)'
}
}, {
name: 'night',
background: {
type: 'color',
blur: false,
highlightningColor: 'hsla(0, 0%, 3.82353%, 0.4)'
}
}],
theme: 'day',
notifications: {
sound: false
},
nightTheme: false
}
},
drafts: {}
};
@ -170,34 +189,43 @@ export class AppStateManager extends EventListenerBase<{
});
const time = Date.now();
if(state) {
/* if(state.version !== STATE_VERSION) {
state = copy(STATE_INIT);
} else */if((state.stateCreatedTime + REFRESH_EVERY) < time/* || true *//* && false */) {
if(DEBUG) {
this.log('will refresh state', state.stateCreatedTime, time);
}
REFRESH_KEYS.forEach(key => {
// @ts-ignore
state[key] = copy(STATE_INIT[key]);
});
const users: typeof state['users'] = {}, chats: typeof state['chats'] = {};
if(state.recentSearch?.length) {
state.recentSearch.forEach(peerId => {
if(peerId < 0) chats[peerId] = state.chats[peerId];
else users[peerId] = state.users[peerId];
});
}
state.users = users;
state.chats = chats;
/* if(state.version !== STATE_VERSION) {
state = copy(STATE_INIT);
} else */if((state.stateCreatedTime + REFRESH_EVERY) < time/* || true *//* && false */) {
if(DEBUG) {
this.log('will refresh state', state.stateCreatedTime, time);
}
REFRESH_KEYS.forEach(key => {
// @ts-ignore
state[key] = copy(STATE_INIT[key]);
});
const users: typeof state['users'] = {}, chats: typeof state['chats'] = {};
if(state.recentSearch?.length) {
state.recentSearch.forEach(peerId => {
if(peerId < 0) chats[peerId] = state.chats[peerId];
else users[peerId] = state.users[peerId];
});
}
state.users = users;
state.chats = chats;
}
validateInitObject(STATE_INIT, state);
if(!state.settings.hasOwnProperty('themes') && state.settings.background) {
const theme = state.settings.themes.find(t => t.name === STATE_INIT.settings.theme);
if(theme) {
theme.background = state.settings.background;
}
}
if(!state.settings.hasOwnProperty('theme') && state.settings.hasOwnProperty('nightTheme')) {
state.settings.theme = state.settings.nightTheme ? 'night' : 'day';
}
this.state = state;
this.state.version = STATE_VERSION;

4
src/lib/rootScope.ts
View File

@ -170,10 +170,10 @@ const rootScope = new RootScope();
MOUNT_CLASS_TO.rootScope = rootScope;
export default rootScope;
rootScope.addEventListener('album_edit', (e) => {
/* rootScope.addEventListener('album_edit', (e) => {
});
rootScope.addEventListener<'album_edit'>('album_edit', (e) => {
});
}); */

39
src/scripts/out/langPack.strings
View File

@ -1,7 +1,7 @@
"Animations" = "Animations";
"AttachAlbum" = "Album";
"BlockModal.Search.Placeholder" = "Block user...";
"DarkMode" = "Sith Mode";
"DarkMode" = "Dark Mode";
"FilterIncludeExcludeInfo" = "Choose chats and types of chats that will\nappear and never appear in this folder.";
"FilterNameInputLabel" = "Folder Name";
"FilterMenuDelete" = "Delete Folder";
@ -54,7 +54,6 @@
"Checkbox.Disabled" = "Disabled";
"Error.PreviewSender.CaptionTooLong" = "Caption is too long.";
"PreviewSender.GroupItems" = "Group items";
"PreviewSender.Send" = "SEND";
"PreviewSender.SendAlbum_one" = "Send Album";
"PreviewSender.SendAlbum_other" = "Send %d Albums";
"Presence.YourChat" = "chat with yourself";
@ -78,6 +77,14 @@
"TwoStepAuth.EmailCodeChangeEmail" = "Change Email";
"MarkupTooltip.LinkPlaceholder" = "Enter URL...";
"MediaViewer.Context.Download" = "Download";
"Profile" = "Profile";
"Saved" = "Saved";
"ReportBug" = "Report Bug";
"Notifications.Count_one" = "%d notification";
"Notifications.Count_other" = "%d notifications";
"Notifications.Forwarded_one" = "Forwarded %d message";
"Notifications.Forwarded_other" = "Forwarded %d messages";
"Notifications.New" = "New notification";
"ActionCreateChannel" = "Channel created";
"ActionCreateGroup" = "un1 created the group";
"ActionChangedTitle" = "un1 changed the group name to un2";
@ -276,10 +283,17 @@
"UserRestrictionsChangeInfo" = "Change Chat Info";
"UserRestrictionsPinMessages" = "Pin Messages";
"UserRestrictionsInviteUsers" = "Add Users";
"UserRestrictionsNoSend" = "can't send messages";
"UserRestrictionsNoSendMedia" = "no media";
"UserRestrictionsNoSendPolls" = "no polls";
"UserRestrictionsNoSendStickers" = "no stickers & GIFs";
"UserRestrictionsNoEmbedLinks" = "no embed links";
"UserRestrictionsNoChangeInfo" = "can't change Info";
"UserRestrictionsNoPinMessages" = "no pins";
"UserRestrictionsNoInviteUsers" = "can't add users";
"UserRestrictionsBlock" = "Ban and remove from group";
"ChannelPublic" = "Public Channel";
"MegaPublic" = "Public Group";
"MegaLocation" = "Location-based Group";
"ChannelPublicInfo" = "Public channels can be found in search, anyone can join them.";
"MegaPublicInfo" = "Public groups can be found in search, chat history is available to everyone and anyone can join.";
"ChannelPrivate" = "Private Channel";
@ -338,6 +352,8 @@
"RemoveStickersCount" = "REMOVE %1$s";
"Stickers_one" = "%1$d sticker";
"Stickers_other" = "%1$d stickers";
"HidAccount" = "The account was hidden by the user";
"TelegramFeatures" = "Telegram Features";
"AccountSettings.Filters" = "Chat Folders";
"AccountSettings.Notifications" = "Notifications and Sounds";
"AccountSettings.PrivacyAndSecurity" = "Privacy and Security";
@ -351,6 +367,9 @@
"Chat.Context.Scheduled.Reschedule" = "Re-schedule";
"Chat.Date.ScheduledFor" = "Scheduled for %@";
"Chat.Date.ScheduledForToday" = "Scheduled for today";
"Chat.DropTitle" = "Drop files here to send them";
"Chat.DropQuickDesc" = "in a quick way";
"Chat.DropAsFilesDesc" = "without compression";
"Chat.Service.PeerJoinedTelegram" = "%@ joined Telegram";
"Chat.Service.Channel.UpdatedTitle" = "Channel renamed to \"%@\"";
"Chat.Service.Channel.UpdatedPhoto" = "Channel photo updated";
@ -417,13 +436,21 @@
"EditAccount.Username" = "Username";
"EditAccount.Title" = "Edit Profile";
"EditAccount.Logout" = "Log Out";
"Emoji.Recent" = "Frequently Used";
"Emoji.SmilesAndPeople" = "Smileys & People";
"Emoji.AnimalsAndNature" = "Animals & Nature";
"Emoji.FoodAndDrink" = "Food & Drink";
"Emoji.ActivityAndSport" = "Activity & Sport";
"Emoji.TravelAndPlaces" = "Travel & Places";
"Emoji.Objects" = "Objects";
"Emoji.Flags" = "Flags";
"LastSeen.HoursAgo_one" = "last seen %d hour ago";
"LastSeen.HoursAgo_other" = "last seen %d hours ago";
"Login.Register.LastName.Placeholder" = "Last Name";
"Modal.Send" = "Send";
"Telegram.GeneralSettingsViewController" = "General Settings";
"Telegram.InstalledStickerPacksController" = "Stickers";
"Telegram.NotificationSettingsViewController" = "Notifications";
"Telegram.PeerInfoController" = "Info";
"Telegram.LanguageViewController" = "Language";
"Stickers.SearchAdd" = "Add";
"Stickers.SearchAdded" = "Added";
@ -456,6 +483,10 @@
"PeerInfo.SharedMedia" = "Shared Media";
"PeerInfo.Subscribers" = "Subscribers";
"PeerInfo.DeleteContact" = "Delete Contact";
"PeerInfo.Confirm.AddMembers1_one" = "Add %d user to the group?";
"PeerInfo.Confirm.AddMembers1_other" = "Add %d users to the group?";
"PeerInfo.Confirm.AddMember" = "Add \"%@\" to the group?";
"PeerMedia.Members" = "Members";
"PollResults.Title.Poll" = "Poll Results";
"PollResults.Title.Quiz" = "Quiz Results";
"PollResults.LoadMore_other" = "Show More (%d)";

10
src/scss/partials/_chat.scss
View File

@ -558,9 +558,9 @@ $chat-helper-size: 39px;
html.night & {
background-color: var(--border-color);
.chat-background-item {
/* .chat-background-item {
display: none;
}
} */
}
&.no-transition:before {
@ -781,7 +781,7 @@ $chat-helper-size: 39px;
@include respond-to(handhelds) {
--padding-vertical: .5px;
--padding-horizontal: .5rem;
--padding-horizontal: #{$chat-padding-handhelds};
}
@media only screen and (max-width: 420px) {
@ -790,7 +790,7 @@ $chat-helper-size: 39px;
@include respond-to(esg-bottom) {
--padding-vertical: .5px;
--padding-horizontal: .5rem;
--padding-horizontal: #{$chat-padding-handhelds};
}
.bubble-tail {
@ -1166,7 +1166,7 @@ $chat-helper-size: 39px;
top: -.25rem;
right: -.25rem;
&.badge-primary {
&.badge-primary:not(.badge-gray) {
background-color: var(--chatlist-status-color);
}

2
src/scss/style.scss
View File

@ -24,7 +24,7 @@ $messages-container-width: 728px;
$chat-input-size: 3.375rem;
$chat-input-handhelds-size: 2.875rem;
$chat-padding: .8125rem;
$chat-padding-handhelds: .5rem;
$chat-padding-handhelds: .25rem;
@function hover-color($color) {
@return rgba($color, $hover-alpha);