ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inline Buttons: Support colors and icons (#6700)

Browse Source
This commit is contained in:
zubiden 2026-02-22 23:43:44 +01:00 committed by Alexander Zinchuk
parent f65b568cfb
commit 5a7b0b1492
17 changed files with 1385 additions and 1210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/api/gramjs/apiBuilders/bots.ts
View File

@ -16,6 +16,8 @@ import type {
ApiInlineQueryPeerType,
ApiInlineResultType,
ApiKeyboardButton,
ApiKeyboardButtonBase,
ApiKeyboardButtonStyle,
ApiMessagesBotApp,
ApiReplyKeyboard,
MediaContainer,
@ -23,7 +25,7 @@ import type {
} from '../../types';
import { int2hex } from '../../../util/colors';
import { pick } from '../../../util/iteratees';
import { omitUndefined, pick } from '../../../util/iteratees';
import { toJSNumber } from '../../../util/numbers';
import { addDocumentToLocalDb } from '../helpers/localDb';
import { serializeBytes } from '../helpers/misc';
@ -50,10 +52,15 @@ export function buildReplyButtons(
const markup = replyMarkup.rows.map(({ buttons }) => {
return buttons.map((button): ApiKeyboardButton | undefined => {
const { text } = button;
const { text, style } = button;
const baseButton = omitUndefined<ApiKeyboardButtonBase>({
style: style && buildApiKeyboardButtonStyle(style),
});
if (button instanceof GramJs.KeyboardButton) {
return {
...baseButton,
type: 'command',
text,
};
@ -62,12 +69,14 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonUrl) {
if (button.url.includes('?startgroup=')) {
return {
...baseButton,
type: 'unsupported',
text,
};
}
return {
...baseButton,
type: 'url',
text,
url: button.url,
@ -77,12 +86,14 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonCallback) {
if (button.requiresPassword) {
return {
...baseButton,
type: 'unsupported',
text,
};
}
return {
...baseButton,
type: 'callback',
text,
data: serializeBytes(button.data),
@ -91,6 +102,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonRequestPoll) {
return {
...baseButton,
type: 'requestPoll',
text,
isQuiz: button.quiz,
@ -99,6 +111,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonRequestPhone) {
return {
...baseButton,
type: 'requestPhone',
text,
};
@ -107,11 +120,13 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonBuy) {
if (receiptMessageId) {
return {
...baseButton,
type: 'receipt',
receiptMessageId,
};
}
return {
...baseButton,
type: 'buy',
text,
};
@ -119,6 +134,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonGame) {
return {
...baseButton,
type: 'game',
text,
};
@ -126,6 +142,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonSwitchInline) {
return {
...baseButton,
type: 'switchBotInline',
text,
query: button.query,
@ -135,6 +152,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonUserProfile) {
return {
...baseButton,
type: 'userProfile',
text,
userId: button.userId.toString(),
@ -143,6 +161,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonSimpleWebView) {
return {
...baseButton,
type: 'simpleWebView',
text,
url: button.url,
@ -151,6 +170,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonWebView) {
return {
...baseButton,
type: 'webView',
text,
url: button.url,
@ -159,6 +179,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonUrlAuth) {
return {
...baseButton,
type: 'urlAuth',
text,
url: button.url,
@ -168,6 +189,7 @@ export function buildReplyButtons(
if (button instanceof GramJs.KeyboardButtonCopy) {
return {
...baseButton,
type: 'copy',
text,
copyText: button.copyText,
@ -175,6 +197,7 @@ export function buildReplyButtons(
}
return {
...baseButton,
type: 'unsupported',
text,
};
@ -193,6 +216,17 @@ export function buildReplyButtons(
};
}
export function buildApiKeyboardButtonStyle(
style: GramJs.TypeKeyboardButtonStyle,
): ApiKeyboardButtonStyle | undefined {
const { bgPrimary, bgDanger, bgSuccess, icon } = style;
return {
type: bgPrimary ? 'primary' : bgDanger ? 'destructive' : bgSuccess ? 'success' : undefined,
iconId: icon?.toString(),
};
}
export function buildBotInlineMessage(
sendMessage: GramJs.TypeBotInlineMessage, type: string, document?: GramJs.TypeDocument, photo?: GramJs.TypePhoto,
): MediaContainer & { replyMarkup?: ApiReplyKeyboard } {

37
src/api/types/messages.ts
View File

@ -874,85 +874,94 @@ export type ApiSponsoredMessage = {
// KeyboardButtons
interface ApiKeyboardButtonSimple {
export interface ApiKeyboardButtonStyle {
type?: 'primary' | 'success' | 'destructive';
iconId?: string;
}
export interface ApiKeyboardButtonBase {
style?: ApiKeyboardButtonStyle;
}
interface ApiKeyboardButtonSimple extends ApiKeyboardButtonBase {
type: 'unsupported' | 'buy' | 'command' | 'requestPhone' | 'game';
text: string;
}
interface ApiKeyboardButtonReceipt {
interface ApiKeyboardButtonReceipt extends ApiKeyboardButtonBase {
type: 'receipt';
receiptMessageId: number;
}
interface ApiKeyboardButtonUrl {
interface ApiKeyboardButtonUrl extends ApiKeyboardButtonBase {
type: 'url';
text: string;
url: string;
}
interface ApiKeyboardButtonSimpleWebView {
interface ApiKeyboardButtonSimpleWebView extends ApiKeyboardButtonBase {
type: 'simpleWebView';
text: string;
url: string;
}
interface ApiKeyboardButtonWebView {
interface ApiKeyboardButtonWebView extends ApiKeyboardButtonBase {
type: 'webView';
text: string;
url: string;
}
interface ApiKeyboardButtonCallback {
interface ApiKeyboardButtonCallback extends ApiKeyboardButtonBase {
type: 'callback';
text: string;
data: string;
}
interface ApiKeyboardButtonRequestPoll {
interface ApiKeyboardButtonRequestPoll extends ApiKeyboardButtonBase {
type: 'requestPoll';
text: string;
isQuiz?: boolean;
}
interface ApiKeyboardButtonSwitchBotInline {
interface ApiKeyboardButtonSwitchBotInline extends ApiKeyboardButtonBase {
type: 'switchBotInline';
text: string;
query: string;
isSamePeer?: boolean;
}
interface ApiKeyboardButtonUserProfile {
interface ApiKeyboardButtonUserProfile extends ApiKeyboardButtonBase {
type: 'userProfile';
text: string;
userId: string;
}
interface ApiKeyboardButtonUrlAuth {
interface ApiKeyboardButtonUrlAuth extends ApiKeyboardButtonBase {
type: 'urlAuth';
text: string;
url: string;
buttonId: number;
}
interface ApiKeyboardButtonCopy {
interface ApiKeyboardButtonCopy extends ApiKeyboardButtonBase {
type: 'copy';
text: string;
copyText: string;
}
export interface KeyboardButtonSuggestedMessage {
export interface KeyboardButtonSuggestedMessage extends ApiKeyboardButtonBase {
type: 'suggestedMessage';
text: string;
buttonType: 'approve' | 'decline' | 'suggestChanges';
disabled?: boolean;
}
export interface KeyboardButtonOpenThread {
export interface KeyboardButtonOpenThread extends ApiKeyboardButtonBase {
type: 'openThread';
text: string;
}
export interface KeyboardButtonGiftOffer {
export interface KeyboardButtonGiftOffer extends ApiKeyboardButtonBase {
type: 'giftOffer';
text: string;
buttonType: 'accept' | 'reject';

2
src/components/common/Composer.scss
View File

@ -81,7 +81,7 @@
height: var(--base-height);
margin-left: 0.5rem;
&:not(.danger) {
&:not(.danger):not(:hover) {
color: var(--color-composer-button);
}

20
src/components/left/main/ChatBadge.module.scss
View File

@ -13,8 +13,6 @@
color: white;
text-align: center;
background: var(--color-gray);
:global(body.is-ios) &,
:global(body.is-macos) & {
line-height: 1.375rem;
@ -53,8 +51,8 @@
}
.mention,
.unread:not(.muted),
.unopened:not(.muted) {
.unread,
.unopened {
color: var(--color-white);
background: var(--color-green);
}
@ -78,11 +76,11 @@
font-size: 1rem;
color: var(--color-list-icon);
background: transparent;
background-color: transparent;
}
.reaction:not(.muted) {
background: #ed504f;
.reaction {
background-color: #ed504f;
}
.round {
@ -103,14 +101,18 @@
font-size: 0.875rem !important;
}
.muted {
background-color: var(--color-gray);
}
.selected:not(.onAvatar) {
.badge:not(.pinned) {
color: var(--color-chat-active);
background: var(--color-white);
background-color: var(--color-white);
&.muted {
color: var(--color-white);
background: #ffffff33;
background-color: #ffffff33;
}
}
}

11
src/components/left/main/ChatBadge.tsx
View File

@ -143,26 +143,27 @@ const ChatBadge = ({
});
function renderContent() {
const baseClassName = buildClassName(styles.badge, !shouldBeUnMuted && styles.muted, badgeClassName);
const baseClassName = buildClassName(styles.badge, badgeClassName);
const statefulClassName = buildClassName(baseClassName, !shouldBeUnMuted && styles.muted);
const unreadReactionsElement = unreadReactionsCount && (
<div className={buildClassName(baseClassName, styles.reaction, styles.round)}>
<div className={buildClassName(statefulClassName, styles.reaction, styles.round)}>
<Icon name="heart" />
</div>
);
const unreadMentionsElement = unreadMentionsCount && (
<div className={buildClassName(baseClassName, styles.mention, styles.round)}>
<div className={buildClassName(statefulClassName, styles.mention, styles.round)}>
<Icon name="mention" />
</div>
);
const unopenedTopicElement = isTopicUnopened && (
<div className={buildClassName(baseClassName, styles.unopened)} />
<div className={buildClassName(statefulClassName, styles.unopened)} />
);
const unreadCountElement = isUnread ? (
<div className={buildClassName(baseClassName, styles.unread)}>
<div className={buildClassName(statefulClassName, styles.unread)}>
{!hasUnreadMark && <AnimatedCounter text={formatIntegerCompact(lang, unreadCount!)} />}
</div>
) : undefined;

109
src/components/middle/composer/BotKeyboardMenu.module.scss Normal file
View File

@ -0,0 +1,109 @@
@use "../../../styles/mixins";
.root {
:global(.bubble) {
width: 100% !important;
max-width: 27rem;
border-radius: var(--border-radius-default-small);
}
}
.content {
overflow-y: scroll;
display: flex;
flex-direction: column;
max-height: 75vh;
padding: 0.1875rem 0.625rem;
@include mixins.adapt-padding-to-scrollbar(0.625rem);
}
.row {
display: flex;
flex-direction: row;
& + & {
margin-top: 0.375rem;
}
}
.button {
--secondary-bg: transparent;
flex: 1;
width: auto;
height: auto;
min-height: 3.0625rem;
border: 2px solid var(--color-primary);
border-radius: var(--border-radius-messages-small);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
background: var(--color-background);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
opacity: 80%;
background-color: var(--secondary-bg);
}
& + & {
margin-left: 0.375rem;
}
&:hover {
border-color: var(--color-primary-shade);
color: #fff;
background: var(--color-primary-shade);
}
}
.inlineButtonText {
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.customEmojiIcon {
margin-inline-end: 0.125rem;
vertical-align: text-top;
}
.primaryTint,
.successTint,
.destructiveTint {
border-width: 0;
color: #fff;
background-color: transparent;
&:hover {
border-color: transparent;
opacity: 75%;
background-color: transparent;
}
}
.primaryTint {
--secondary-bg: var(--color-primary);
}
.successTint {
--secondary-bg: var(--color-success);
}
.destructiveTint {
--secondary-bg: var(--color-error);
}

55
src/components/middle/composer/BotKeyboardMenu.scss
View File

@ -1,55 +0,0 @@
@use "../../../styles/mixins";
.BotKeyboardMenu {
.bubble {
width: 100% !important;
max-width: 27rem;
border-radius: var(--border-radius-default-small);
}
.content {
overflow-y: scroll;
display: flex;
flex-direction: column;
max-height: 75vh;
padding: 0.1875rem 0.625rem;
@include mixins.adapt-padding-to-scrollbar(0.625rem);
.row {
display: flex;
flex-direction: row;
}
.row + .row {
margin-top: 0.375rem;
}
.Button {
flex: 1;
width: auto;
height: auto;
min-height: 3.0625rem;
border: 2px solid var(--color-primary);
border-radius: var(--border-radius-messages-small);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-transform: none;
background: var(--color-background);
&:hover {
border-color: var(--color-primary-shade);
color: #fff;
background: var(--color-primary-shade);
}
}
.Button + .Button {
margin-left: 0.375rem;
}
}
}

35
src/components/middle/composer/BotKeyboardMenu.tsx
View File

@ -1,4 +1,4 @@
import type { FC, TeactNode } from '../../../lib/teact/teact';
import type { TeactNode } from '../../../lib/teact/teact';
import { memo, useMemo } from '../../../lib/teact/teact';
import { getActions, withGlobal } from '../../../global';
@ -7,15 +7,17 @@ import type { ThreadId } from '../../../types';
import { selectChatMessage, selectCurrentMessageList } from '../../../global/selectors';
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment';
import buildClassName from '../../../util/buildClassName';
import renderKeyboardButtonText from './helpers/renderKeyboardButtonText';
import useLang from '../../../hooks/useLang';
import useMouseInside from '../../../hooks/useMouseInside';
import CustomEmoji from '../../common/CustomEmoji';
import Button from '../../ui/Button';
import Menu from '../../ui/Menu';
import './BotKeyboardMenu.scss';
import styles from './BotKeyboardMenu.module.scss';
export type OwnProps = {
isOpen: boolean;
@ -28,9 +30,11 @@ type StateProps = {
message?: ApiMessage;
};
const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
const ICON_SIZE = 16;
const BotKeyboardMenu = ({
isOpen, threadId, message, onClose,
}) => {
}: OwnProps & StateProps) => {
const { clickBotInlineButton } = getActions();
const lang = useLang();
@ -58,25 +62,38 @@ const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
positionX="right"
positionY="bottom"
onClose={onClose}
className="BotKeyboardMenu"
className={styles.root}
onCloseAnimationEnd={onClose}
onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
noCompact
>
<div className="content custom-scroll">
<div className={buildClassName(styles.content, 'custom-scroll')}>
{message.keyboardButtons.map((row, i) => (
<div className="row">
<div className={styles.row}>
{row.map((button, j) => (
<Button
className={buildClassName(
styles.button,
button.style?.type && styles[`${button.style.type}Tint`],
)}
ripple
noForcedUpperCase
disabled={button.type === 'unsupported'}
onClick={() => clickBotInlineButton({
chatId: message.chatId, messageId: message.id, threadId, button,
})}
>
{buttonTexts?.[i][j]}
<span className={styles.inlineButtonText}>
{button.style?.iconId && (
<CustomEmoji
className={styles.customEmojiIcon}
documentId={button.style.iconId}
size={ICON_SIZE}
/>
)}
{buttonTexts?.[i][j]}
</span>
</Button>
))}
</div>

6
src/components/middle/message/ActionMessage.module.scss
View File

@ -86,10 +86,10 @@
display: flex;
flex-direction: column;
align-items: center;
}
:global(.InlineButtons) {
width: 100%;
}
.inlineButtons {
width: 100%;
}
.contextContainer {

1
src/components/middle/message/ActionMessage.tsx
View File

@ -616,6 +616,7 @@ const ActionMessage = ({
{fullContent}
{shouldRenderInlineButtons && (
<InlineButtons
className={styles.inlineButtons}
inlineButtons={giftOfferInlineButtons}
onClick={handleInlineButtonClick}
/>

124
src/components/middle/message/InlineButtons.module.scss Normal file
View File

@ -0,0 +1,124 @@
.root {
display: flex;
flex-direction: column;
max-width: var(--max-width);
}
.button {
--secondary-bg: transparent;
flex: 1;
width: auto;
margin: 0.125rem;
border-radius: var(--border-radius-messages-small);
font-weight: var(--font-weight-medium);
line-height: 1.25;
background-color: var(--action-message-bg);
transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
opacity: 50%;
background-color: var(--secondary-bg);
}
&:active,
&:hover,
&:focus {
background-color: var(--action-message-bg) !important;
backdrop-filter: brightness(115%);
@supports not (backdrop-filter: brightness(115%)) {
filter: brightness(115%);
}
}
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
}
.cornerIcon {
position: absolute;
top: 0.1875rem;
right: 0.1875rem;
display: block;
font-size: 0.875rem;
&:global(.icon-arrow-right) {
top: 0.125rem;
right: 0.125rem;
transform: rotate(-45deg);
font-size: 0.75rem;
}
}
.leftIcon {
margin-right: 0.25rem;
font-size: 1rem !important;
}
.inlineButtonText {
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
&:first-of-type .button {
margin-top: 0.25rem !important;
}
&:last-of-type .button {
margin-bottom: 0;
&:first-of-type {
border-bottom-left-radius: var(--border-radius-messages);
}
&:last-of-type {
border-bottom-right-radius: var(--border-radius-messages);
}
}
}
.primaryTint {
--secondary-bg: var(--color-primary);
}
.successTint {
--secondary-bg: var(--color-success);
}
.destructiveTint {
--secondary-bg: var(--color-error);
}
.customEmojiIcon {
margin-inline-end: 0.125rem;
vertical-align: text-top;
}

89
src/components/middle/message/InlineButtons.scss
View File

@ -1,89 +0,0 @@
.InlineButtons {
display: flex;
flex-direction: column;
max-width: var(--max-width);
.row {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
.Button {
flex: 1;
width: auto;
margin: 0.125rem;
border-radius: var(--border-radius-messages-small);
font-weight: var(--font-weight-medium);
text-transform: none;
background: var(--action-message-bg);
transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
&:active,
&:hover,
&:focus {
background: var(--action-message-bg) !important;
backdrop-filter: brightness(115%);
@supports not (backdrop-filter: brightness(115%)) {
filter: brightness(115%);
}
}
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
.corner-icon {
position: absolute;
top: 0.1875rem;
right: 0.1875rem;
display: block;
font-size: 0.875rem;
&.icon-arrow-right {
top: 0.125rem;
right: 0.125rem;
transform: rotate(-45deg);
font-size: 0.75rem;
}
}
}
.left-icon {
margin-right: 0.25rem;
font-size: 1rem !important;
}
.inline-button-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row:first-of-type .Button {
margin-top: 0.25rem !important;
}
.row:last-of-type .Button {
margin-bottom: 0;
&:first-of-type {
border-bottom-left-radius: var(--border-radius-messages);
}
&:last-of-type {
border-bottom-right-radius: var(--border-radius-messages);
}
}
}

51
src/components/middle/message/InlineButtons.tsx
View File

@ -4,21 +4,26 @@ import { memo, useMemo } from '../../../lib/teact/teact';
import type { ApiKeyboardButton } from '../../../api/types';
import { RE_TME_LINK, TME_LINK_PREFIX } from '../../../config';
import buildClassName from '../../../util/buildClassName';
import renderKeyboardButtonText from '../composer/helpers/renderKeyboardButtonText';
import useLang from '../../../hooks/useLang';
import CustomEmoji from '../../common/CustomEmoji';
import Icon from '../../common/icons/Icon';
import Button from '../../ui/Button';
import './InlineButtons.scss';
import styles from './InlineButtons.module.scss';
type OwnProps = {
className?: string;
inlineButtons: ApiKeyboardButton[][];
onClick: (payload: ApiKeyboardButton) => void;
};
const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
const ICON_SIZE = 16;
const InlineButtons = ({ className, inlineButtons, onClick }: OwnProps) => {
const lang = useLang();
const renderIcon = (button: ApiKeyboardButton) => {
@ -28,42 +33,42 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
const { url } = button;
if (url.startsWith(TME_LINK_PREFIX) && url.includes('?startapp')) {
return <Icon className="corner-icon" name="webapp" />;
return <Icon className={styles.cornerIcon} name="webapp" />;
} else if (!RE_TME_LINK.test(url)) {
return <Icon className="corner-icon" name="arrow-right" />;
return <Icon className={styles.cornerIcon} name="arrow-right" />;
}
return;
}
case 'urlAuth':
return <Icon className="corner-icon" name="arrow-right" />;
return <Icon className={styles.cornerIcon} name="arrow-right" />;
case 'buy':
case 'receipt':
return <Icon className="corner-icon" name="card" />;
return <Icon className={styles.cornerIcon} name="card" />;
case 'switchBotInline':
return <Icon className="corner-icon" name="share-filled" />;
return <Icon className={styles.cornerIcon} name="share-filled" />;
case 'webView':
case 'simpleWebView':
return <Icon className="corner-icon" name="webapp" />;
return <Icon className={styles.cornerIcon} name="webapp" />;
case 'copy':
return <Icon className="corner-icon" name="copy" />;
return <Icon className={styles.cornerIcon} name="copy" />;
case 'suggestedMessage':
if (button.buttonType === 'suggestChanges') {
return <Icon className="left-icon" name="edit" />;
return <Icon className={styles.leftIcon} name="edit" />;
}
if (button.buttonType === 'approve') {
return <Icon className="left-icon" name="check" />;
return <Icon className={styles.leftIcon} name="check" />;
}
if (button.buttonType === 'decline') {
return <Icon className="left-icon" name="close" />;
return <Icon className={styles.leftIcon} name="close" />;
}
break;
case 'giftOffer':
if (button.buttonType === 'accept') {
return <Icon className="left-icon" name="check" />;
return <Icon className={styles.leftIcon} name="check" />;
}
if (button.buttonType === 'reject') {
return <Icon className="left-icon" name="close" />;
return <Icon className={styles.leftIcon} name="close" />;
}
break;
}
@ -80,19 +85,29 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
}, [lang, inlineButtons]);
return (
<div className="InlineButtons">
<div className={buildClassName(styles.root, className)}>
{inlineButtons.map((row, i) => (
<div className="row">
<div className={styles.row}>
{row.map((button, j) => (
<Button
className={buildClassName(
styles.button, button.style?.type && styles[`${button.style.type}Tint`],
)}
size="tiny"
ripple
noForcedUpperCase
disabled={button.type === 'unsupported' || (button.type === 'suggestedMessage' && button.disabled)}
onClick={() => onClick(button)}
>
{renderIcon(button)}
<span className="inline-button-text">
<span className={styles.inlineButtonText}>
{button.style?.iconId && (
<CustomEmoji
className={styles.customEmojiIcon}
documentId={button.style.iconId}
size={ICON_SIZE}
/>
)}
{buttonTexts[i][j]}
</span>
</Button>

819
src/components/ui/Button.scss
View File

@ -24,501 +24,508 @@
}
}
.Button {
--premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
@layer ui.button {
.Button {
--premium-gradient: linear-gradient(88.39deg, #6c93ff -2.56%, #976fff 51.27%, #df69d1 107.39%);
cursor: var(--custom-cursor, pointer);
cursor: var(--custom-cursor, pointer);
position: relative;
position: relative;
overflow: hidden;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
overflow: hidden;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 3rem;
padding: 0.625rem;
border: 0;
border-radius: var(--border-radius-button);
width: 100%;
height: 3rem;
padding: 0.625rem;
border: 0;
border-radius: var(--border-radius-button);
font-weight: var(--font-weight-medium);
line-height: 1.2;
color: white;
text-decoration: none !important;
text-transform: uppercase;
font-weight: var(--font-weight-medium);
line-height: 1.2;
color: white;
text-decoration: none !important;
text-transform: uppercase;
background-color: transparent;
background-size: cover;
outline: none !important;
transition: background-color 0.2s, color 0.2s, opacity 0.2s;
white-space-collapse: preserve;
// @optimization
&:active,
&.clicked,
body.no-page-transitions & {
transition: none !important;
}
&.no-upper-case {
text-transform: none;
}
&.inline {
display: inline;
}
&.disabled {
cursor: var(--custom-cursor, default);
&:not(.non-interactive) {
opacity: 0.5 !important;
}
&:not(.click-allowed) {
pointer-events: none;
}
}
&.primary {
--ripple-color: rgba(0, 0, 0, 0.08);
color: var(--color-white);
background-color: var(--color-primary);
@include active-styles() {
background-color: rgba(var(--color-primary-shade-rgb), 0.9);
}
@include no-ripple-styles() {
background-color: var(--color-primary-shade-darker);
}
}
&.secondary {
--ripple-color: rgba(0, 0, 0, 0.08);
color: rgba(var(--color-text-secondary-rgb), 0.75);
background-color: var(--color-background);
@include active-styles() {
color: white;
background-color: var(--color-primary);
}
@include no-ripple-styles() {
background-color: var(--color-primary-shade);
}
}
&.gray {
--ripple-color: rgba(0, 0, 0, 0.08);
color: var(--color-text-secondary);
background-color: var(--color-background);
@include active-styles() {
color: var(--color-primary);
}
@include no-ripple-styles() {
background-color: var(--color-chat-hover);
}
}
&.danger {
--ripple-color: rgba(var(--color-error-rgb), 0.16);
color: var(--color-error);
background-color: var(--color-background);
@include active-styles() {
color: var(--color-white);
background-color: var(--color-error);
}
@include no-ripple-styles() {
background-color: var(--color-error-shade);
}
}
&.text {
background-color: transparent;
background-size: cover;
outline: none !important;
transition:
background-color 0.2s,
color 0.2s,
opacity 0.2s;
white-space-collapse: preserve;
// @optimization
&:active,
&.clicked,
body.no-page-transitions & {
transition: none !important;
}
&.no-upper-case {
text-transform: none;
}
&.inline {
display: inline;
}
&.disabled {
cursor: var(--custom-cursor, default);
&:not(.non-interactive) {
opacity: 0.5 !important;
}
&:not(.click-allowed) {
pointer-events: none;
}
}
&.primary {
color: var(--color-primary);
background-color: transparent;
--ripple-color: rgba(0, 0, 0, 0.08);
color: var(--color-white);
background-color: var(--color-primary);
@include active-styles() {
background-color: rgba(var(--color-primary-shade-rgb), 0.08);
background-color: rgba(var(--color-primary-shade-rgb), 0.9);
}
@include no-ripple-styles() {
background-color: rgba(var(--color-primary-shade-rgb), 0.16);
background-color: var(--color-primary-shade-darker);
}
}
&.secondary {
color: var(--color-text-secondary);
background-color: transparent;
}
--ripple-color: rgba(0, 0, 0, 0.08);
color: rgba(var(--color-text-secondary-rgb), 0.75);
background-color: var(--color-background);
&.danger {
@include active-styles() {
color: var(--color-error);
background-color: rgba(var(--color-error-rgb), 0.08);
color: white;
background-color: var(--color-primary);
}
@include no-ripple-styles() {
background-color: rgba(var(--color-error-rgb), 0.16);
background-color: var(--color-primary-shade);
}
}
}
&.faded {
opacity: 0.8;
&.gray {
--ripple-color: rgba(0, 0, 0, 0.08);
@include active-styles() {
opacity: 1;
color: var(--color-text-secondary);
background-color: var(--color-background);
@include active-styles() {
color: var(--color-primary);
}
@include no-ripple-styles() {
background-color: var(--color-chat-hover);
}
}
&.activated {
opacity: 1;
}
}
&.danger {
--ripple-color: rgba(var(--color-error-rgb), 0.16);
&.translucent {
--ripple-color: var(--color-interactive-element-hover);
color: var(--color-error);
background-color: var(--color-background);
color: var(--color-text-secondary);
background-color: transparent;
@include active-styles() {
color: var(--color-white);
background-color: var(--color-error);
}
@include active-styles() {
background-color: var(--color-interactive-element-hover);
@include no-ripple-styles() {
background-color: var(--color-error-shade);
}
}
@include no-ripple-styles() {
background-color: rgba(var(--color-text-secondary-rgb), 0.16);
&.text {
background-color: transparent;
&.primary {
color: var(--color-primary);
background-color: transparent;
@include active-styles() {
background-color: rgba(var(--color-primary-shade-rgb), 0.08);
}
@include no-ripple-styles() {
background-color: rgba(var(--color-primary-shade-rgb), 0.16);
}
}
&.secondary {
color: var(--color-text-secondary);
background-color: transparent;
}
&.danger {
@include active-styles() {
color: var(--color-error);
background-color: rgba(var(--color-error-rgb), 0.08);
}
@include no-ripple-styles() {
background-color: rgba(var(--color-error-rgb), 0.16);
}
}
}
&.activated {
color: var(--color-primary);
&.faded {
opacity: 0.8;
@include active-styles() {
opacity: 1;
}
&.activated {
opacity: 1;
}
}
}
&.translucent-white {
--ripple-color: rgba(255, 255, 255, 0.08);
&.translucent {
--ripple-color: var(--color-interactive-element-hover);
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
color: var(--color-text-secondary);
background-color: transparent;
@include active-styles() {
background-color: var(--color-interactive-element-hover);
}
@include no-ripple-styles() {
background-color: rgba(var(--color-text-secondary-rgb), 0.16);
}
&.activated {
color: var(--color-primary);
}
}
&.translucent-white {
--ripple-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
@include active-styles() {
color: white;
background-color: rgba(255, 255, 255, 0.08);
}
@include no-ripple-styles() {
background-color: rgba(255, 255, 255, 0.16);
}
}
&.translucent-black {
--ripple-color: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.8);
background-color: transparent;
@include active-styles() {
background-color: rgba(0, 0, 0, 0.08);
}
@include no-ripple-styles() {
background-color: rgba(0, 0, 0, 0.16);
}
}
&.translucent-bordered {
--ripple-color: rgba(0, 0, 0, 0.08);
border: 1px solid var(--accent-color);
color: var(--accent-color);
background-color: transparent;
@include active-styles() {
color: var(--color-white);
background-color: var(--accent-color);
}
@include no-ripple-styles() {
background-color: var(--active-color);
}
}
&.adaptive {
--ripple-color: var(--accent-background-active-color);
color: var(--accent-color);
background-color: var(--accent-background-color);
@include active-styles() {
background-color: var(--accent-background-active-color);
}
@include no-ripple-styles() {
background-color: var(--accent-background-active-color);
}
}
&.dark {
--ripple-color: rgba(255, 255, 255, 0.08);
@include active-styles() {
color: white;
background-color: rgba(255, 255, 255, 0.08);
background-color: rgba(0, 0, 0, 0.75);
@include active-styles() {
color: white;
background-color: rgba(0, 0, 0, 0.85);
}
@include no-ripple-styles() {
background-color: rgba(0, 0, 0, 0.95);
}
}
@include no-ripple-styles() {
background-color: rgba(255, 255, 255, 0.16);
}
}
&.green {
--ripple-color: rgba(0, 0, 0, 0.08);
&.translucent-black {
--ripple-color: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.8);
background-color: transparent;
@include active-styles() {
background-color: rgba(0, 0, 0, 0.08);
}
@include no-ripple-styles() {
background-color: rgba(0, 0, 0, 0.16);
}
}
&.translucent-bordered {
--ripple-color: rgba(0, 0, 0, 0.08);
border: 1px solid var(--accent-color);
color: var(--accent-color);
background-color: transparent;
@include active-styles() {
color: var(--color-white);
background-color: var(--accent-color);
}
@include no-ripple-styles() {
background-color: var(--active-color);
}
}
&.adaptive {
--ripple-color: var(--accent-background-active-color);
color: var(--accent-color);
background-color: var(--accent-background-color);
@include active-styles() {
background-color: var(--accent-background-active-color);
}
@include no-ripple-styles() {
background-color: var(--accent-background-active-color);
}
}
&.dark {
--ripple-color: rgba(255, 255, 255, 0.08);
color: white;
background-color: rgba(0, 0, 0, 0.75);
@include active-styles() {
color: white;
background-color: rgba(0, 0, 0, 0.85);
}
@include no-ripple-styles() {
background-color: rgba(0, 0, 0, 0.95);
}
}
&.green {
--ripple-color: rgba(0, 0, 0, 0.08);
color: var(--color-white);
background-color: var(--color-green);
@include active-styles() {
background-color: var(--color-green-darker);
}
@include no-ripple-styles() {
background-color: var(--color-green);
}
}
&.stars {
--ripple-color: rgba(0, 0, 0, 0.08);
@include active-styles() {
background-color: var(--color-green-darker);
}
color: var(--color-white);
background-color: #FFB727;
.theme-dark & {
background-color: #CF8920;
@include no-ripple-styles() {
background-color: var(--color-green);
}
}
@include active-styles() {
background-color: #FFB727CC;
&.stars {
--ripple-color: rgba(0, 0, 0, 0.08);
color: var(--color-white);
background-color: #ffb727;
.theme-dark & {
background-color: #cf8920;
}
@include active-styles() {
background-color: #ffb727cc;
}
@include no-ripple-styles() {
background-color: #ffb727;
}
}
@include no-ripple-styles() {
background-color: #FFB727;
}
}
&.bluredStarsBadge {
color: var(--color-white);
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(50px);
}
&.transparentBlured {
color: white;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(0.5rem);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&.smaller {
height: 2.5rem;
padding: 0.3125rem;
&.round {
width: 2.5rem;
&.bluredStarsBadge {
color: var(--color-white);
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(50px);
}
&.pill {
padding: 0.3125rem 1rem;
border-radius: 1.25rem;
&.transparentBlured {
color: white;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(0.5rem);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&.with-icon {
padding-inline-start: 0.75rem;
padding-inline-end: 1.25rem;
&.smaller {
height: 2.5rem;
padding: 0.3125rem;
&.round {
width: 2.5rem;
}
&.pill {
padding: 0.3125rem 1rem;
border-radius: 1.25rem;
}
&.with-icon {
padding-inline-start: 0.75rem;
padding-inline-end: 1.25rem;
.icon {
margin-inline-end: 0.5rem;
font-size: 1.5rem;
}
}
}
&.tiny {
--emoji-size: 1rem;
--custom-emoji-size: var(--emoji-size);
height: 2.25rem;
padding: 0.4375rem;
border-radius: var(--border-radius-button-tiny);
font-size: 0.875rem;
&.round {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
}
.icon {
font-size: 1.25rem;
}
&.pill {
--emoji-size: 1.25rem;
--custom-emoji-size: var(--emoji-size);
height: 1.75rem;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-size: 1rem;
}
}
&.round {
width: 3rem;
border-radius: 50%;
.icon {
margin-inline-end: 0.5rem;
font-size: 1.5rem;
}
}
}
&.tiny {
--emoji-size: 1rem;
height: 2.25rem;
padding: 0.4375rem;
border-radius: var(--border-radius-button-tiny);
font-size: 0.875rem;
&.round {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
&.content-with-icon-bottom,
&.content-with-icon-top {
height: auto;
}
.icon {
font-size: 1.25rem;
}
&.pill {
--emoji-size: 1.25rem;
height: 1.75rem;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-size: 1rem;
}
}
&.round {
width: 3rem;
border-radius: 50%;
.icon {
font-size: 1.5rem;
}
}
&.content-with-icon-bottom,
&.content-with-icon-top {
height: auto;
}
&.fluid {
width: auto;
padding-right: 1.75rem;
padding-left: 1.75rem;
&.tiny {
padding-right: 1.375rem;
padding-left: 1.375rem;
}
&.pill {
padding: 0.5rem 0.75rem;
&.fluid {
width: auto;
padding-right: 1.75rem;
padding-left: 1.75rem;
&.tiny {
padding-right: 1.375rem;
padding-left: 1.375rem;
}
&.pill {
padding: 0.5rem 0.75rem;
}
&.badge {
padding: 0.5rem 1.75rem;
}
}
&.pill,
&.badge {
padding: 0.5rem 1.75rem;
padding-right: 1.75rem;
padding-left: 1.75rem;
border-radius: 1.75rem;
text-transform: none;
}
}
&.pill, &.badge {
padding-right: 1.75rem;
padding-left: 1.75rem;
border-radius: 1.75rem;
text-transform: none;
}
&.loading {
pointer-events: none;
position: relative;
&.loading {
pointer-events: none;
position: relative;
.Spinner {
--spinner-size: 1.8125rem;
.Spinner {
position: absolute;
top: 50%;
right: 0.875rem;
transform: translateY(-50%);
}
}
--spinner-size: 1.8125rem;
.emoji {
vertical-align: -3px;
}
&.shiny::before {
content: "";
position: absolute;
top: 50%;
right: 0.875rem;
transform: translateY(-50%);
}
}
top: 0;
.emoji {
vertical-align: -3px;
}
display: block;
&.shiny::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
display: block;
animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes wave {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
@keyframes wave {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
}
}
&.premium {
background: var(--premium-gradient);
}
&.rectangular {
border-radius: 0;
}
.with-icon-top {
display: flex;
flex-direction: column;
.icon {
margin-bottom: 0.25rem;
&.premium {
background: var(--premium-gradient);
}
}
.with-icon-bottom {
display: flex;
flex-direction: column-reverse;
.icon {
margin-top: 0.25rem;
&.rectangular {
border-radius: 0;
}
}
.with-icon-start {
display: flex;
align-items: center;
.icon {
margin-inline-end: 0.25rem;
.with-icon-top {
display: flex;
flex-direction: column;
.icon {
margin-bottom: 0.25rem;
}
}
}
.with-icon-end {
display: flex;
flex-direction: row-reverse;
align-items: center;
.with-icon-bottom {
display: flex;
flex-direction: column-reverse;
.icon {
margin-inline-start: 0.25rem;
.icon {
margin-top: 0.25rem;
}
}
.with-icon-start {
display: flex;
align-items: center;
.icon {
margin-inline-end: 0.25rem;
}
}
.with-icon-end {
display: flex;
flex-direction: row-reverse;
align-items: center;
.icon {
margin-inline-start: 0.25rem;
}
}
}
}

3
src/index.html
View File

@ -51,6 +51,9 @@
<link rel="manifest" id="the-manifest-placeholder" href="./<%= htmlWebpackPlugin.options.manifest %>">
<script src="./redirect.js"></script>
<style>
@layer reset, variables, ui, components;
</style>
</head>
<body id="root">

542
src/styles/_variables.scss
View File

@ -18,335 +18,337 @@
@return rgb($bm-red, $bm-green, $bm-blue);
}
$color-primary: #3390ec;
@layer variables {
$color-primary: #3390ec;
$color-links: #3390ec;
$color-links: #3390ec;
$color-placeholders: #a2acb4;
$color-placeholders: #a2acb4;
$color-text-green: #4fae4e;
$color-green: #00c73e;
$color-light-green: #eeffde;
$color-text-green: #4fae4e;
$color-green: #00c73e;
$color-light-green: #eeffde;
$color-error: #e53935;
$color-error: #e53935;
$color-warning: #fb8c00;
$color-warning: #fb8c00;
$color-yellow: #fdd764;
$color-orange: #d08a31;
$color-light-coral: #d08a3133;
$color-yellow: #fdd764;
$color-orange: #d08a31;
$color-light-coral: #d08a3133;
$color-white: #ffffff;
$color-black: #000000;
$color-dark-gray: #2e3939;
$color-gray: #c4c9cc;
$color-text-secondary: #707579;
$color-text-secondary-apple: #8a8a90;
$color-text-meta: #686c72;
$color-text-meta-apple: #8c8c91;
$color-borders: #dadce0;
$color-dividers: #c8c6cc;
$color-dividers-android: #E7E7E7;
$color-item-hover: #f4f4f5;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5;
$color-chat-active: #3390ec;
$color-selection: #3993fb;
$color-white: #ffffff;
$color-black: #000000;
$color-dark-gray: #2e3939;
$color-gray: #c4c9cc;
$color-text-secondary: #707579;
$color-text-secondary-apple: #8a8a90;
$color-text-meta: #686c72;
$color-text-meta-apple: #8c8c91;
$color-borders: #dadce0;
$color-dividers: #c8c6cc;
$color-dividers-android: #E7E7E7;
$color-item-hover: #f4f4f5;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5;
$color-chat-active: #3390ec;
$color-selection: #3993fb;
$color-message-reaction: #ebf3fd;
$color-message-reaction-hover: #c5def9;
$color-message-reaction-own: #cef0ba;
$color-message-reaction-own-hover: #b5e0a4;
$color-message-reaction-chosen-hover: #1a82ea;
$color-message-reaction-chosen-hover-own: #3f9d4b;
$color-message-reaction: #ebf3fd;
$color-message-reaction-hover: #c5def9;
$color-message-reaction-own: #cef0ba;
$color-message-reaction-own-hover: #b5e0a4;
$color-message-reaction-chosen-hover: #1a82ea;
$color-message-reaction-chosen-hover-own: #3f9d4b;
$color-message-non-contact: #cceebf;
$color-message-non-contact: #cceebf;
$color-message-story-mention-from: #4ef390;
$color-message-story-mention-to: #74bcff;
$color-message-story-mention-from: #4ef390;
$color-message-story-mention-to: #74bcff;
:root {
--color-background: #{$color-white};
--color-background-compact-menu: #FFFFFFBB;
--color-background-compact-menu-reactions: #FFFFFFEB;
--color-background-compact-menu-hover: #000000B2;
--color-background-menu-separator: #0000001a;
--color-background-selected: #f4f4f5;
--color-background-secondary: #f4f4f5;
--color-background-secondary-accent: #e4e4e5;
--color-background-sidebar: #E4E4E5;
--color-background-own: #{$color-light-green};
--color-background-own-selected: #{color.adjust($color-light-green, $lightness: -10%, $space: hsl)};
--color-text: #{$color-black};
--color-text-rgb: #{toRGB($color-black)};
--color-text-lighter: #{$color-dark-gray};
--color-text-secondary: #{$color-text-secondary};
--color-icon-secondary: #{$color-text-secondary};
--color-text-secondary-rgb: #{toRGB($color-text-secondary)};
--color-text-secondary-apple: #{$color-text-secondary-apple};
--color-text-meta: #{$color-text-meta};
--color-text-meta-rgb: #{toRGB($color-text-meta)};
--color-text-meta-colored: #{$color-text-green};
--color-text-meta-apple: #{$color-text-meta-apple};
--color-text-green: #{$color-text-green};
--color-text-green-rgb: #{toRGB($color-text-green)};
--color-borders: #{$color-borders};
--color-borders-input: #{$color-borders};
--color-borders-alternate: rgba(0, 0, 0, 0.1);
--color-borders-read-story: #C4C9CC;
--color-dividers: #{$color-dividers};
--color-dividers-android: #{$color-dividers-android};
--color-webpage-initial-background: #{$color-dark-gray};
--color-interactive-active: var(--color-primary);
--color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
--color-interactive-buffered: rgba(var(--color-text-secondary-rgb), 0.25); // Overlays underlying inactive element
--color-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
--color-composer-button: #{$color-text-secondary}CC;
--color-toast-background: #202020CC;
:root {
--color-background: #{$color-white};
--color-background-compact-menu: #FFFFFFBB;
--color-background-compact-menu-reactions: #FFFFFFEB;
--color-background-compact-menu-hover: #000000B2;
--color-background-menu-separator: #0000001a;
--color-background-selected: #f4f4f5;
--color-background-secondary: #f4f4f5;
--color-background-secondary-accent: #e4e4e5;
--color-background-sidebar: #E4E4E5;
--color-background-own: #{$color-light-green};
--color-background-own-selected: #{color.adjust($color-light-green, $lightness: -10%, $space: hsl)};
--color-text: #{$color-black};
--color-text-rgb: #{toRGB($color-black)};
--color-text-lighter: #{$color-dark-gray};
--color-text-secondary: #{$color-text-secondary};
--color-icon-secondary: #{$color-text-secondary};
--color-text-secondary-rgb: #{toRGB($color-text-secondary)};
--color-text-secondary-apple: #{$color-text-secondary-apple};
--color-text-meta: #{$color-text-meta};
--color-text-meta-rgb: #{toRGB($color-text-meta)};
--color-text-meta-colored: #{$color-text-green};
--color-text-meta-apple: #{$color-text-meta-apple};
--color-text-green: #{$color-text-green};
--color-text-green-rgb: #{toRGB($color-text-green)};
--color-borders: #{$color-borders};
--color-borders-input: #{$color-borders};
--color-borders-alternate: rgba(0, 0, 0, 0.1);
--color-borders-read-story: #C4C9CC;
--color-dividers: #{$color-dividers};
--color-dividers-android: #{$color-dividers-android};
--color-webpage-initial-background: #{$color-dark-gray};
--color-interactive-active: var(--color-primary);
--color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
--color-interactive-buffered: rgba(var(--color-text-secondary-rgb), 0.25); // Overlays underlying inactive element
--color-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
--color-composer-button: #{$color-text-secondary}CC;
--color-toast-background: #202020CC;
--color-voice-transcribe-button: #e8f3ff;
--color-voice-transcribe-button-own: #cceebf;
--color-voice-transcribe-button: #e8f3ff;
--color-voice-transcribe-button-own: #cceebf;
--color-primary: #{$color-primary};
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
--color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
--color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
--color-primary-opacity: rgba(var(--color-primary), 0.15);
--color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
--color-primary-tint: rgba(var(--color-primary), 0.1);
--color-green: #{$color-green};
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
--color-success: #{$color-green};
--color-primary: #{$color-primary};
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
--color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
--color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
--color-primary-opacity: rgba(var(--color-primary), 0.15);
--color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
--color-primary-tint: rgba(var(--color-primary), 0.1);
--color-green: #{$color-green};
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
--color-success: #{$color-green};
--accent-color: var(--color-primary);
--accent-background-color: var(--color-primary-tint);
--accent-background-active-color: var(--color-primary-opacity);
--accent-color: var(--color-primary);
--accent-background-color: var(--color-primary-tint);
--accent-background-active-color: var(--color-primary-opacity);
--color-error: #{$color-error};
--color-error-shade: #{color.mix($color-error, $color-black, 92%)};
--color-error-rgb: #{toRGB($color-error)};
--color-error: #{$color-error};
--color-error-shade: #{color.mix($color-error, $color-black, 92%)};
--color-error-rgb: #{toRGB($color-error)};
--color-warning: #{$color-warning};
--color-warning: #{$color-warning};
--color-yellow: #{$color-yellow};
--color-yellow: #{$color-yellow};
--color-orange: #{$color-orange};
--color-light-coral: #{$color-light-coral};
--color-orange: #{$color-orange};
--color-light-coral: #{$color-light-coral};
--color-links: #{$color-links};
--color-links: #{$color-links};
--color-own-links: #{$color-white};
--color-own-links: #{$color-white};
--color-placeholders: #{$color-placeholders};
--color-placeholders: #{$color-placeholders};
--color-list-icon: #{$color-white};
--color-list-icon: #{$color-white};
--color-code: #4a729a;
--color-code-bg: #{rgba($color-text-secondary, 0.08)};
--color-code-own: #3c7940;
--color-code-own-bg: #{rgba($color-text-secondary, 0.08)};
--color-code: #4a729a;
--color-code-bg: #{rgba($color-text-secondary, 0.08)};
--color-code-own: #3c7940;
--color-code-own-bg: #{rgba($color-text-secondary, 0.08)};
--color-accent-own: #{$color-text-green};
--color-accent-own-rgb: #{toRGB($color-text-green)};
--color-message-meta-own: #{$color-text-green};
--color-accent-own: #{$color-text-green};
--color-accent-own-rgb: #{toRGB($color-text-green)};
--color-message-meta-own: #{$color-text-green};
--color-message-reaction: #{$color-message-reaction};
--color-message-reaction-hover: #{$color-message-reaction-hover};
--color-message-reaction-own: #{$color-message-reaction-own};
--color-message-reaction-hover-own: #{$color-message-reaction-own-hover};
--color-message-reaction-chosen-hover: #{$color-message-reaction-chosen-hover};
--color-message-reaction-chosen-hover-own: #{$color-message-reaction-chosen-hover-own};
--color-message-reaction: #{$color-message-reaction};
--color-message-reaction-hover: #{$color-message-reaction-hover};
--color-message-reaction-own: #{$color-message-reaction-own};
--color-message-reaction-hover-own: #{$color-message-reaction-own-hover};
--color-message-reaction-chosen-hover: #{$color-message-reaction-chosen-hover};
--color-message-reaction-chosen-hover-own: #{$color-message-reaction-chosen-hover-own};
--color-message-non-contact: #{$color-message-non-contact};
--color-message-non-contact: #{$color-message-non-contact};
--color-message-story-mention-from: #{$color-message-story-mention-from};
--color-message-story-mention-to: #{$color-message-story-mention-to};
--color-message-story-mention-from: #{$color-message-story-mention-from};
--color-message-story-mention-to: #{$color-message-story-mention-to};
--color-reply-hover: #{blend-normal(rgba($color-text-secondary, 0.08), $color-white)};
--color-reply-active: #{blend-normal(rgba($color-text-secondary, 0.16), $color-white)};
--color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
--color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
--color-reply-hover: #{blend-normal(rgba($color-text-secondary, 0.08), $color-white)};
--color-reply-active: #{blend-normal(rgba($color-text-secondary, 0.16), $color-white)};
--color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
--color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
--color-background-own-apple: #dcf8c5;
--color-reply-own-hover-apple: #cbefb7;
--color-reply-own-active-apple: #bae6a8;
--color-background-own-apple: #dcf8c5;
--color-reply-own-hover-apple: #cbefb7;
--color-reply-own-active-apple: #bae6a8;
--color-white: #{$color-white};
--color-gray: #{$color-gray};
--color-white: #{$color-white};
--color-gray: #{$color-gray};
--color-chat-username: #3C7EB0;
--color-chat-hover: #{$color-chat-hover};
--color-chat-active: #{$color-chat-active};
--color-item-hover: #{$color-item-hover};
--color-item-active: #{$color-item-active};
--color-chat-username: #3C7EB0;
--color-chat-hover: #{$color-chat-hover};
--color-chat-active: #{$color-chat-active};
--color-item-hover: #{$color-item-hover};
--color-item-active: #{$color-item-active};
--color-selection-highlight: #{$color-selection};
--color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);
--color-selection-highlight: #{$color-selection};
--color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);
--color-avatar-story-unread-from: #34c578;
--color-avatar-story-unread-to: #3ca3f3;
--color-avatar-story-friend-unread-from: #c9eb38;
--color-avatar-story-friend-unread-to: #09c167;
--color-avatar-story-unread-from: #34c578;
--color-avatar-story-unread-to: #3ca3f3;
--color-avatar-story-friend-unread-from: #c9eb38;
--color-avatar-story-friend-unread-to: #09c167;
--color-default-shadow: #72727240;
--color-light-shadow: #7272722b;
--color-default-shadow: #72727240;
--color-light-shadow: #7272722b;
--color-skeleton-background: rgba(33, 33, 33, 0.15);
--color-skeleton-foreground: rgba(232, 232, 232, 0.2);
--color-skeleton-background: rgba(33, 33, 33, 0.15);
--color-skeleton-foreground: rgba(232, 232, 232, 0.2);
--color-scrollbar: rgba(90, 90, 90, 0.3);
--color-scrollbar-code: rgba(200, 200, 200, 0.3);
--color-scrollbar: rgba(90, 90, 90, 0.3);
--color-scrollbar-code: rgba(200, 200, 200, 0.3);
--color-telegram-blue: #{$color-primary};
--color-telegram-blue: #{$color-primary};
--color-forum-hover-unread-topic: #e9e9e9;
--color-forum-hover-unread-topic-hover: #dcdcdc;
--color-forum-hover-unread-topic: #e9e9e9;
--color-forum-hover-unread-topic-hover: #dcdcdc;
--color-deleted-account: #9eaab5;
--color-archive: #9eaab5;
--stars-gradient: linear-gradient(90deg, #FFAA00 0%, #FFCD3A 100%);
--color-deleted-account: #9eaab5;
--color-archive: #9eaab5;
--stars-gradient: linear-gradient(90deg, #FFAA00 0%, #FFCD3A 100%);
--color-stars: #FFAA00;
--color-heart: #ff3c32;
--color-stars: #FFAA00;
--color-heart: #ff3c32;
--color-gift-uncommon: #40A920;
--color-gift-uncommon-bg: rgba(64, 169, 32, 0.15);
--color-gift-rare: #11AABE;
--color-gift-rare-bg: rgba(17, 170, 190, 0.15);
--color-gift-epic: #955CDB;
--color-gift-epic-bg: rgba(149, 92, 219, 0.15);
--color-gift-legendary: #BF7600;
--color-gift-legendary-bg: rgba(191, 118, 0, 0.15);
--color-gift-uncommon: #40A920;
--color-gift-uncommon-bg: rgba(64, 169, 32, 0.15);
--color-gift-rare: #11AABE;
--color-gift-rare-bg: rgba(17, 170, 190, 0.15);
--color-gift-epic: #955CDB;
--color-gift-epic-bg: rgba(149, 92, 219, 0.15);
--color-gift-legendary: #BF7600;
--color-gift-legendary-bg: rgba(191, 118, 0, 0.15);
--color-negative-progress: #CE4C47;
--color-negative-progress: #CE4C47;
--vh: 1vh;
--vh: 1vh;
--border-radius-button: 1rem;
--border-radius-button-tiny: 0.875rem;
--border-radius-modal: 2rem;
--border-radius-toast: 1rem;
--border-radius-default: 0.75rem;
--border-radius-default-small: 0.625rem;
--border-radius-default-tiny: 0.375rem;
--border-radius-messages: 0.9375rem;
--border-radius-messages-small: 0.375rem;
--border-radius-forum-avatar: 33.3333%;
--messages-container-width: 45.5rem;
--right-column-width: 26.5rem;
--folders-sidebar-width: 5rem;
--window-controls-width: 0rem;
--header-height: 3.5rem;
--custom-emoji-size: 1.25rem;
--emoji-size: 1.25rem;
--custom-emoji-border-radius: 0;
--border-radius-button: 1rem;
--border-radius-button-tiny: 0.875rem;
--border-radius-modal: 2rem;
--border-radius-toast: 1rem;
--border-radius-default: 0.75rem;
--border-radius-default-small: 0.625rem;
--border-radius-default-tiny: 0.375rem;
--border-radius-messages: 0.9375rem;
--border-radius-messages-small: 0.375rem;
--border-radius-forum-avatar: 33.3333%;
--messages-container-width: 45.5rem;
--right-column-width: 26.5rem;
--folders-sidebar-width: 5rem;
--window-controls-width: 0rem;
--header-height: 3.5rem;
--emoji-size: 1.25em;
--custom-emoji-size: var(--emoji-size);
--custom-emoji-border-radius: 0;
--symbol-menu-width: 24rem;
--symbol-menu-height: 22.375rem;
--symbol-menu-footer-height: 3rem;
--symbol-menu-width: 24rem;
--symbol-menu-height: 22.375rem;
--symbol-menu-footer-height: 3rem;
--scrollbar-width: 0;
--scrollbar-width: 0;
--z-overlay-effects: 12000;
--z-modal-confirm: 10500;
--z-reaction-picker: 10200;
--z-portal-menu: 10000;
--z-symbol-menu-modal: 5000;
--z-lock-screen: 3000;
--z-ui-loader-mask: 2000;
--z-notification: 1700;
--z-confetti: 1600;
--z-story-viewer: 1150;
--z-reaction-interaction-effect: 1100;
--z-right-column: 900;
--z-right-column-menu: 950;
--z-header-menu: 990;
--z-header-menu-backdrop: 980;
--z-modal: 1510;
--z-modal-menu: 1600;
--z-resize-grip: 1000;
--z-media-viewer: 1500;
--z-modal-low-priority: 1400;
--z-video-player-controls: 3;
--z-drop-area: 55;
--z-animation-fade: 50;
--z-menu-bubble: 21;
--z-menu-backdrop: 20;
--z-message-effect: 15;
--z-message-highlighted: 14;
--z-forum-panel: 13;
--z-message-context-menu: 13;
--z-scroll-down-button: 12;
--z-local-search: 12;
--z-left-header: 11;
--z-middle-header: 11;
--z-middle-footer: 11;
--z-scroll-notch: 10;
--z-story-ribbon: 10;
--z-country-code-input-group: 10;
--z-message-select-control: 9;
--z-message-select-area: 8;
--z-sticky-date: 9;
--z-register-add-avatar: 5;
--z-media-viewer-head: 3;
--z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
--z-resize-handle: 2;
--z-below: -1;
--z-chat-ripple: 6;
--z-chat-float-button: calc(var(--z-chat-ripple) + 1);
--z-overlay-effects: 12000;
--z-modal-confirm: 10500;
--z-reaction-picker: 10200;
--z-portal-menu: 10000;
--z-symbol-menu-modal: 5000;
--z-lock-screen: 3000;
--z-ui-loader-mask: 2000;
--z-notification: 1700;
--z-confetti: 1600;
--z-story-viewer: 1150;
--z-reaction-interaction-effect: 1100;
--z-right-column: 900;
--z-right-column-menu: 950;
--z-header-menu: 990;
--z-header-menu-backdrop: 980;
--z-modal: 1510;
--z-modal-menu: 1600;
--z-resize-grip: 1000;
--z-media-viewer: 1500;
--z-modal-low-priority: 1400;
--z-video-player-controls: 3;
--z-drop-area: 55;
--z-animation-fade: 50;
--z-menu-bubble: 21;
--z-menu-backdrop: 20;
--z-message-effect: 15;
--z-message-highlighted: 14;
--z-forum-panel: 13;
--z-message-context-menu: 13;
--z-scroll-down-button: 12;
--z-local-search: 12;
--z-left-header: 11;
--z-middle-header: 11;
--z-middle-footer: 11;
--z-scroll-notch: 10;
--z-story-ribbon: 10;
--z-country-code-input-group: 10;
--z-message-select-control: 9;
--z-message-select-area: 8;
--z-sticky-date: 9;
--z-register-add-avatar: 5;
--z-media-viewer-head: 3;
--z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
--z-resize-handle: 2;
--z-below: -1;
--z-chat-ripple: 6;
--z-chat-float-button: calc(var(--z-chat-ripple) + 1);
--spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
--spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
--spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
--spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
--spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
--spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
--spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
--spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);
--spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
--spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
--spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
--spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
--spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
--spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
--spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
--spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);
--premium-gradient: linear-gradient(84.4deg, #6C93FF -4.85%, #976FFF 51.72%, #DF69D1 110.7%);
--premium-gradient: linear-gradient(84.4deg, #6C93FF -4.85%, #976FFF 51.72%, #DF69D1 110.7%);
--layer-blackout-opacity: 0.1;
--layer-blackout-opacity: 0.1;
--layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--layer-transition-behind: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
--select-transition: 200ms ease-out;
--chat-transform-transition: 0.2s ease-out;
--layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--layer-transition-behind: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
--select-transition: 200ms ease-out;
--chat-transform-transition: 0.2s ease-out;
--safe-area-top: env(safe-area-inset-top);
--safe-area-right: env(safe-area-inset-right);
--safe-area-bottom: env(safe-area-inset-bottom);
--safe-area-left: env(safe-area-inset-left);
--safe-area-top: env(safe-area-inset-top);
--safe-area-right: env(safe-area-inset-right);
--safe-area-bottom: env(safe-area-inset-bottom);
--safe-area-left: env(safe-area-inset-left);
--picker-title-shift: 1rem;
--picker-title-shift: 1rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-weight-medium: 500;
--middle-header-panes-height: 0px;
--middle-header-panes-height: 0px;
body.is-ios {
--layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
--layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
}
body.is-ios {
--layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
--layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
}
body.is-android {
--slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-android {
--slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1276px) and (max-width: 1920px) {
--right-column-width: 25vw;
}
@media (min-width: 1276px) and (max-width: 1920px) {
--right-column-width: 25vw;
}
@media (min-width: 1921px) {
--messages-container-width: 50vw;
}
@media (min-width: 1921px) {
--messages-container-width: 50vw;
}
@media (max-width: 600px) {
--right-column-width: 100vw;
--symbol-menu-width: 100vw;
--symbol-menu-height: 17.6875rem;
@media (max-width: 600px) {
--right-column-width: 100vw;
--symbol-menu-width: 100vw;
--symbol-menu-height: 17.6875rem;
}
}
}

653
src/styles/reboot.css
View File

@ -1,331 +1,326 @@
/* stylelint-disable selector-max-type */
/* stylelint-disable plugin/selector-tag-no-without-class */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
width: device-width;
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body, blockquote {
margin: 0;
}
[tabindex="-1"]:focus {
outline: none !important;
}
hr {
overflow: visible;
box-sizing: content-box;
height: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: var(--font-weight-medium);
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
p,
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
figure {
margin: 0 0 1rem;
}
dfn {
font-style: italic;
}
dt,
b,
strong {
font-weight: var(--font-weight-medium);
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: var(--color-links);
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
/* stylelint-disable-next-line @stylistic/max-line-length */
font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
font-size-adjust: 0.5;
}
pre {
overflow: auto;
margin-top: 0;
margin-bottom: 1rem;
-ms-overflow-style: scrollbar;
}
img {
border-style: none;
vertical-align: middle;
}
img, video {
dynamic-range-limit: standard;
}
svg:not(:root) {
overflow: hidden;
}
a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
touch-action: manipulation;
}
table {
border-collapse: collapse;
}
caption {
caption-side: bottom;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #868e96;
text-align: left;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
-webkit-appearance: button;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
overflow: auto;
}
fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: 0.5rem;
padding: 0;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: none;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body, blockquote {
margin: 0;
}
[tabindex="-1"]:focus {
outline: none !important;
}
hr {
overflow: visible;
box-sizing: content-box;
height: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: var(--font-weight-medium);
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
p,
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
figure {
margin: 0 0 1rem;
}
dfn {
font-style: italic;
}
dt,
b,
strong {
font-weight: var(--font-weight-medium);
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: var(--color-links);
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
/* stylelint-disable-next-line @stylistic/max-line-length */
font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
font-size-adjust: 0.5;
}
pre {
overflow: auto;
margin-top: 0;
margin-bottom: 1rem;
}
img {
border-style: none;
vertical-align: middle;
}
img, video {
dynamic-range-limit: standard;
}
svg:not(:root) {
overflow: hidden;
}
a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
touch-action: manipulation;
}
table {
border-collapse: collapse;
}
caption {
caption-side: bottom;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #868e96;
text-align: left;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
-webkit-appearance: button;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
overflow: auto;
}
fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: 0.5rem;
padding: 0;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: none;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
}