Inline Buttons: Support colors and icons (#6700)
This commit is contained in:
zubiden
Alexander Zinchuk
parent
f65b568cfb
commit
5a7b0b1492
@ -16,6 +16,8 @@ import type {
|
|||||||
ApiInlineQueryPeerType,
|
ApiInlineQueryPeerType,
|
||||||
ApiInlineResultType,
|
ApiInlineResultType,
|
||||||
ApiKeyboardButton,
|
ApiKeyboardButton,
|
||||||
|
ApiKeyboardButtonBase,
|
||||||
|
ApiKeyboardButtonStyle,
|
||||||
ApiMessagesBotApp,
|
ApiMessagesBotApp,
|
||||||
ApiReplyKeyboard,
|
ApiReplyKeyboard,
|
||||||
MediaContainer,
|
MediaContainer,
|
||||||
@ -23,7 +25,7 @@ import type {
|
|||||||
} from '../../types';
|
} from '../../types';
|
||||||
|
|
||||||
import { int2hex } from '../../../util/colors';
|
import { int2hex } from '../../../util/colors';
|
||||||
import { pick } from '../../../util/iteratees';
|
import { omitUndefined, pick } from '../../../util/iteratees';
|
||||||
import { toJSNumber } from '../../../util/numbers';
|
import { toJSNumber } from '../../../util/numbers';
|
||||||
import { addDocumentToLocalDb } from '../helpers/localDb';
|
import { addDocumentToLocalDb } from '../helpers/localDb';
|
||||||
import { serializeBytes } from '../helpers/misc';
|
import { serializeBytes } from '../helpers/misc';
|
||||||
@ -50,10 +52,15 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
const markup = replyMarkup.rows.map(({ buttons }) => {
|
const markup = replyMarkup.rows.map(({ buttons }) => {
|
||||||
return buttons.map((button): ApiKeyboardButton | undefined => {
|
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) {
|
if (button instanceof GramJs.KeyboardButton) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'command',
|
type: 'command',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
@ -62,12 +69,14 @@ export function buildReplyButtons(
|
|||||||
if (button instanceof GramJs.KeyboardButtonUrl) {
|
if (button instanceof GramJs.KeyboardButtonUrl) {
|
||||||
if (button.url.includes('?startgroup=')) {
|
if (button.url.includes('?startgroup=')) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'unsupported',
|
type: 'unsupported',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'url',
|
type: 'url',
|
||||||
text,
|
text,
|
||||||
url: button.url,
|
url: button.url,
|
||||||
@ -77,12 +86,14 @@ export function buildReplyButtons(
|
|||||||
if (button instanceof GramJs.KeyboardButtonCallback) {
|
if (button instanceof GramJs.KeyboardButtonCallback) {
|
||||||
if (button.requiresPassword) {
|
if (button.requiresPassword) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'unsupported',
|
type: 'unsupported',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'callback',
|
type: 'callback',
|
||||||
text,
|
text,
|
||||||
data: serializeBytes(button.data),
|
data: serializeBytes(button.data),
|
||||||
@ -91,6 +102,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonRequestPoll) {
|
if (button instanceof GramJs.KeyboardButtonRequestPoll) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'requestPoll',
|
type: 'requestPoll',
|
||||||
text,
|
text,
|
||||||
isQuiz: button.quiz,
|
isQuiz: button.quiz,
|
||||||
@ -99,6 +111,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonRequestPhone) {
|
if (button instanceof GramJs.KeyboardButtonRequestPhone) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'requestPhone',
|
type: 'requestPhone',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
@ -107,11 +120,13 @@ export function buildReplyButtons(
|
|||||||
if (button instanceof GramJs.KeyboardButtonBuy) {
|
if (button instanceof GramJs.KeyboardButtonBuy) {
|
||||||
if (receiptMessageId) {
|
if (receiptMessageId) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'receipt',
|
type: 'receipt',
|
||||||
receiptMessageId,
|
receiptMessageId,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'buy',
|
type: 'buy',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
@ -119,6 +134,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonGame) {
|
if (button instanceof GramJs.KeyboardButtonGame) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'game',
|
type: 'game',
|
||||||
text,
|
text,
|
||||||
};
|
};
|
||||||
@ -126,6 +142,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonSwitchInline) {
|
if (button instanceof GramJs.KeyboardButtonSwitchInline) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'switchBotInline',
|
type: 'switchBotInline',
|
||||||
text,
|
text,
|
||||||
query: button.query,
|
query: button.query,
|
||||||
@ -135,6 +152,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonUserProfile) {
|
if (button instanceof GramJs.KeyboardButtonUserProfile) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'userProfile',
|
type: 'userProfile',
|
||||||
text,
|
text,
|
||||||
userId: button.userId.toString(),
|
userId: button.userId.toString(),
|
||||||
@ -143,6 +161,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonSimpleWebView) {
|
if (button instanceof GramJs.KeyboardButtonSimpleWebView) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'simpleWebView',
|
type: 'simpleWebView',
|
||||||
text,
|
text,
|
||||||
url: button.url,
|
url: button.url,
|
||||||
@ -151,6 +170,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonWebView) {
|
if (button instanceof GramJs.KeyboardButtonWebView) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'webView',
|
type: 'webView',
|
||||||
text,
|
text,
|
||||||
url: button.url,
|
url: button.url,
|
||||||
@ -159,6 +179,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonUrlAuth) {
|
if (button instanceof GramJs.KeyboardButtonUrlAuth) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'urlAuth',
|
type: 'urlAuth',
|
||||||
text,
|
text,
|
||||||
url: button.url,
|
url: button.url,
|
||||||
@ -168,6 +189,7 @@ export function buildReplyButtons(
|
|||||||
|
|
||||||
if (button instanceof GramJs.KeyboardButtonCopy) {
|
if (button instanceof GramJs.KeyboardButtonCopy) {
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'copy',
|
type: 'copy',
|
||||||
text,
|
text,
|
||||||
copyText: button.copyText,
|
copyText: button.copyText,
|
||||||
@ -175,6 +197,7 @@ export function buildReplyButtons(
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
...baseButton,
|
||||||
type: 'unsupported',
|
type: 'unsupported',
|
||||||
text,
|
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(
|
export function buildBotInlineMessage(
|
||||||
sendMessage: GramJs.TypeBotInlineMessage, type: string, document?: GramJs.TypeDocument, photo?: GramJs.TypePhoto,
|
sendMessage: GramJs.TypeBotInlineMessage, type: string, document?: GramJs.TypeDocument, photo?: GramJs.TypePhoto,
|
||||||
): MediaContainer & { replyMarkup?: ApiReplyKeyboard } {
|
): MediaContainer & { replyMarkup?: ApiReplyKeyboard } {
|
||||||
|
|||||||
@ -874,85 +874,94 @@ export type ApiSponsoredMessage = {
|
|||||||
|
|
||||||
// KeyboardButtons
|
// 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';
|
type: 'unsupported' | 'buy' | 'command' | 'requestPhone' | 'game';
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonReceipt {
|
interface ApiKeyboardButtonReceipt extends ApiKeyboardButtonBase {
|
||||||
type: 'receipt';
|
type: 'receipt';
|
||||||
receiptMessageId: number;
|
receiptMessageId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonUrl {
|
interface ApiKeyboardButtonUrl extends ApiKeyboardButtonBase {
|
||||||
type: 'url';
|
type: 'url';
|
||||||
text: string;
|
text: string;
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonSimpleWebView {
|
interface ApiKeyboardButtonSimpleWebView extends ApiKeyboardButtonBase {
|
||||||
type: 'simpleWebView';
|
type: 'simpleWebView';
|
||||||
text: string;
|
text: string;
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonWebView {
|
interface ApiKeyboardButtonWebView extends ApiKeyboardButtonBase {
|
||||||
type: 'webView';
|
type: 'webView';
|
||||||
text: string;
|
text: string;
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonCallback {
|
interface ApiKeyboardButtonCallback extends ApiKeyboardButtonBase {
|
||||||
type: 'callback';
|
type: 'callback';
|
||||||
text: string;
|
text: string;
|
||||||
data: string;
|
data: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonRequestPoll {
|
interface ApiKeyboardButtonRequestPoll extends ApiKeyboardButtonBase {
|
||||||
type: 'requestPoll';
|
type: 'requestPoll';
|
||||||
text: string;
|
text: string;
|
||||||
isQuiz?: boolean;
|
isQuiz?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonSwitchBotInline {
|
interface ApiKeyboardButtonSwitchBotInline extends ApiKeyboardButtonBase {
|
||||||
type: 'switchBotInline';
|
type: 'switchBotInline';
|
||||||
text: string;
|
text: string;
|
||||||
query: string;
|
query: string;
|
||||||
isSamePeer?: boolean;
|
isSamePeer?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonUserProfile {
|
interface ApiKeyboardButtonUserProfile extends ApiKeyboardButtonBase {
|
||||||
type: 'userProfile';
|
type: 'userProfile';
|
||||||
text: string;
|
text: string;
|
||||||
userId: string;
|
userId: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonUrlAuth {
|
interface ApiKeyboardButtonUrlAuth extends ApiKeyboardButtonBase {
|
||||||
type: 'urlAuth';
|
type: 'urlAuth';
|
||||||
text: string;
|
text: string;
|
||||||
url: string;
|
url: string;
|
||||||
buttonId: number;
|
buttonId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyboardButtonCopy {
|
interface ApiKeyboardButtonCopy extends ApiKeyboardButtonBase {
|
||||||
type: 'copy';
|
type: 'copy';
|
||||||
text: string;
|
text: string;
|
||||||
copyText: string;
|
copyText: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KeyboardButtonSuggestedMessage {
|
export interface KeyboardButtonSuggestedMessage extends ApiKeyboardButtonBase {
|
||||||
type: 'suggestedMessage';
|
type: 'suggestedMessage';
|
||||||
text: string;
|
text: string;
|
||||||
buttonType: 'approve' | 'decline' | 'suggestChanges';
|
buttonType: 'approve' | 'decline' | 'suggestChanges';
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KeyboardButtonOpenThread {
|
export interface KeyboardButtonOpenThread extends ApiKeyboardButtonBase {
|
||||||
type: 'openThread';
|
type: 'openThread';
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KeyboardButtonGiftOffer {
|
export interface KeyboardButtonGiftOffer extends ApiKeyboardButtonBase {
|
||||||
type: 'giftOffer';
|
type: 'giftOffer';
|
||||||
text: string;
|
text: string;
|
||||||
buttonType: 'accept' | 'reject';
|
buttonType: 'accept' | 'reject';
|
||||||
|
|||||||
@ -81,7 +81,7 @@
|
|||||||
height: var(--base-height);
|
height: var(--base-height);
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
|
|
||||||
&:not(.danger) {
|
&:not(.danger):not(:hover) {
|
||||||
color: var(--color-composer-button);
|
color: var(--color-composer-button);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -13,8 +13,6 @@
|
|||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
background: var(--color-gray);
|
|
||||||
|
|
||||||
:global(body.is-ios) &,
|
:global(body.is-ios) &,
|
||||||
:global(body.is-macos) & {
|
:global(body.is-macos) & {
|
||||||
line-height: 1.375rem;
|
line-height: 1.375rem;
|
||||||
@ -53,8 +51,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mention,
|
.mention,
|
||||||
.unread:not(.muted),
|
.unread,
|
||||||
.unopened:not(.muted) {
|
.unopened {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
background: var(--color-green);
|
background: var(--color-green);
|
||||||
}
|
}
|
||||||
@ -78,11 +76,11 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--color-list-icon);
|
color: var(--color-list-icon);
|
||||||
|
|
||||||
background: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction:not(.muted) {
|
.reaction {
|
||||||
background: #ed504f;
|
background-color: #ed504f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.round {
|
.round {
|
||||||
@ -103,14 +101,18 @@
|
|||||||
font-size: 0.875rem !important;
|
font-size: 0.875rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
background-color: var(--color-gray);
|
||||||
|
}
|
||||||
|
|
||||||
.selected:not(.onAvatar) {
|
.selected:not(.onAvatar) {
|
||||||
.badge:not(.pinned) {
|
.badge:not(.pinned) {
|
||||||
color: var(--color-chat-active);
|
color: var(--color-chat-active);
|
||||||
background: var(--color-white);
|
background-color: var(--color-white);
|
||||||
|
|
||||||
&.muted {
|
&.muted {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
background: #ffffff33;
|
background-color: #ffffff33;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -143,26 +143,27 @@ const ChatBadge = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
function renderContent() {
|
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 && (
|
const unreadReactionsElement = unreadReactionsCount && (
|
||||||
<div className={buildClassName(baseClassName, styles.reaction, styles.round)}>
|
<div className={buildClassName(statefulClassName, styles.reaction, styles.round)}>
|
||||||
<Icon name="heart" />
|
<Icon name="heart" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const unreadMentionsElement = unreadMentionsCount && (
|
const unreadMentionsElement = unreadMentionsCount && (
|
||||||
<div className={buildClassName(baseClassName, styles.mention, styles.round)}>
|
<div className={buildClassName(statefulClassName, styles.mention, styles.round)}>
|
||||||
<Icon name="mention" />
|
<Icon name="mention" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const unopenedTopicElement = isTopicUnopened && (
|
const unopenedTopicElement = isTopicUnopened && (
|
||||||
<div className={buildClassName(baseClassName, styles.unopened)} />
|
<div className={buildClassName(statefulClassName, styles.unopened)} />
|
||||||
);
|
);
|
||||||
|
|
||||||
const unreadCountElement = isUnread ? (
|
const unreadCountElement = isUnread ? (
|
||||||
<div className={buildClassName(baseClassName, styles.unread)}>
|
<div className={buildClassName(statefulClassName, styles.unread)}>
|
||||||
{!hasUnreadMark && <AnimatedCounter text={formatIntegerCompact(lang, unreadCount!)} />}
|
{!hasUnreadMark && <AnimatedCounter text={formatIntegerCompact(lang, unreadCount!)} />}
|
||||||
</div>
|
</div>
|
||||||
) : undefined;
|
) : undefined;
|
||||||
|
|||||||
109
src/components/middle/composer/BotKeyboardMenu.module.scss
Normal file
109
src/components/middle/composer/BotKeyboardMenu.module.scss
Normal 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);
|
||||||
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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 { memo, useMemo } from '../../../lib/teact/teact';
|
||||||
import { getActions, withGlobal } from '../../../global';
|
import { getActions, withGlobal } from '../../../global';
|
||||||
|
|
||||||
@ -7,15 +7,17 @@ import type { ThreadId } from '../../../types';
|
|||||||
|
|
||||||
import { selectChatMessage, selectCurrentMessageList } from '../../../global/selectors';
|
import { selectChatMessage, selectCurrentMessageList } from '../../../global/selectors';
|
||||||
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment';
|
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment';
|
||||||
|
import buildClassName from '../../../util/buildClassName';
|
||||||
import renderKeyboardButtonText from './helpers/renderKeyboardButtonText';
|
import renderKeyboardButtonText from './helpers/renderKeyboardButtonText';
|
||||||
|
|
||||||
import useLang from '../../../hooks/useLang';
|
import useLang from '../../../hooks/useLang';
|
||||||
import useMouseInside from '../../../hooks/useMouseInside';
|
import useMouseInside from '../../../hooks/useMouseInside';
|
||||||
|
|
||||||
|
import CustomEmoji from '../../common/CustomEmoji';
|
||||||
import Button from '../../ui/Button';
|
import Button from '../../ui/Button';
|
||||||
import Menu from '../../ui/Menu';
|
import Menu from '../../ui/Menu';
|
||||||
|
|
||||||
import './BotKeyboardMenu.scss';
|
import styles from './BotKeyboardMenu.module.scss';
|
||||||
|
|
||||||
export type OwnProps = {
|
export type OwnProps = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -28,9 +30,11 @@ type StateProps = {
|
|||||||
message?: ApiMessage;
|
message?: ApiMessage;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
|
const ICON_SIZE = 16;
|
||||||
|
|
||||||
|
const BotKeyboardMenu = ({
|
||||||
isOpen, threadId, message, onClose,
|
isOpen, threadId, message, onClose,
|
||||||
}) => {
|
}: OwnProps & StateProps) => {
|
||||||
const { clickBotInlineButton } = getActions();
|
const { clickBotInlineButton } = getActions();
|
||||||
|
|
||||||
const lang = useLang();
|
const lang = useLang();
|
||||||
@ -58,25 +62,38 @@ const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
|
|||||||
positionX="right"
|
positionX="right"
|
||||||
positionY="bottom"
|
positionY="bottom"
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
className="BotKeyboardMenu"
|
className={styles.root}
|
||||||
onCloseAnimationEnd={onClose}
|
onCloseAnimationEnd={onClose}
|
||||||
onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
|
onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
|
||||||
onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
|
onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
|
||||||
noCompact
|
noCompact
|
||||||
>
|
>
|
||||||
<div className="content custom-scroll">
|
<div className={buildClassName(styles.content, 'custom-scroll')}>
|
||||||
{message.keyboardButtons.map((row, i) => (
|
{message.keyboardButtons.map((row, i) => (
|
||||||
<div className="row">
|
<div className={styles.row}>
|
||||||
{row.map((button, j) => (
|
{row.map((button, j) => (
|
||||||
<Button
|
<Button
|
||||||
|
className={buildClassName(
|
||||||
|
styles.button,
|
||||||
|
button.style?.type && styles[`${button.style.type}Tint`],
|
||||||
|
)}
|
||||||
ripple
|
ripple
|
||||||
|
noForcedUpperCase
|
||||||
disabled={button.type === 'unsupported'}
|
disabled={button.type === 'unsupported'}
|
||||||
|
|
||||||
onClick={() => clickBotInlineButton({
|
onClick={() => clickBotInlineButton({
|
||||||
chatId: message.chatId, messageId: message.id, threadId, button,
|
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>
|
</Button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -86,10 +86,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
:global(.InlineButtons) {
|
.inlineButtons {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contextContainer {
|
.contextContainer {
|
||||||
|
|||||||
@ -616,6 +616,7 @@ const ActionMessage = ({
|
|||||||
{fullContent}
|
{fullContent}
|
||||||
{shouldRenderInlineButtons && (
|
{shouldRenderInlineButtons && (
|
||||||
<InlineButtons
|
<InlineButtons
|
||||||
|
className={styles.inlineButtons}
|
||||||
inlineButtons={giftOfferInlineButtons}
|
inlineButtons={giftOfferInlineButtons}
|
||||||
onClick={handleInlineButtonClick}
|
onClick={handleInlineButtonClick}
|
||||||
/>
|
/>
|
||||||
|
|||||||
124
src/components/middle/message/InlineButtons.module.scss
Normal file
124
src/components/middle/message/InlineButtons.module.scss
Normal 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;
|
||||||
|
}
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -4,21 +4,26 @@ import { memo, useMemo } from '../../../lib/teact/teact';
|
|||||||
import type { ApiKeyboardButton } from '../../../api/types';
|
import type { ApiKeyboardButton } from '../../../api/types';
|
||||||
|
|
||||||
import { RE_TME_LINK, TME_LINK_PREFIX } from '../../../config';
|
import { RE_TME_LINK, TME_LINK_PREFIX } from '../../../config';
|
||||||
|
import buildClassName from '../../../util/buildClassName';
|
||||||
import renderKeyboardButtonText from '../composer/helpers/renderKeyboardButtonText';
|
import renderKeyboardButtonText from '../composer/helpers/renderKeyboardButtonText';
|
||||||
|
|
||||||
import useLang from '../../../hooks/useLang';
|
import useLang from '../../../hooks/useLang';
|
||||||
|
|
||||||
|
import CustomEmoji from '../../common/CustomEmoji';
|
||||||
import Icon from '../../common/icons/Icon';
|
import Icon from '../../common/icons/Icon';
|
||||||
import Button from '../../ui/Button';
|
import Button from '../../ui/Button';
|
||||||
|
|
||||||
import './InlineButtons.scss';
|
import styles from './InlineButtons.module.scss';
|
||||||
|
|
||||||
type OwnProps = {
|
type OwnProps = {
|
||||||
|
className?: string;
|
||||||
inlineButtons: ApiKeyboardButton[][];
|
inlineButtons: ApiKeyboardButton[][];
|
||||||
onClick: (payload: ApiKeyboardButton) => void;
|
onClick: (payload: ApiKeyboardButton) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
|
const ICON_SIZE = 16;
|
||||||
|
|
||||||
|
const InlineButtons = ({ className, inlineButtons, onClick }: OwnProps) => {
|
||||||
const lang = useLang();
|
const lang = useLang();
|
||||||
|
|
||||||
const renderIcon = (button: ApiKeyboardButton) => {
|
const renderIcon = (button: ApiKeyboardButton) => {
|
||||||
@ -28,42 +33,42 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
|
|||||||
const { url } = button;
|
const { url } = button;
|
||||||
|
|
||||||
if (url.startsWith(TME_LINK_PREFIX) && url.includes('?startapp')) {
|
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)) {
|
} else if (!RE_TME_LINK.test(url)) {
|
||||||
return <Icon className="corner-icon" name="arrow-right" />;
|
return <Icon className={styles.cornerIcon} name="arrow-right" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
case 'urlAuth':
|
case 'urlAuth':
|
||||||
return <Icon className="corner-icon" name="arrow-right" />;
|
return <Icon className={styles.cornerIcon} name="arrow-right" />;
|
||||||
case 'buy':
|
case 'buy':
|
||||||
case 'receipt':
|
case 'receipt':
|
||||||
return <Icon className="corner-icon" name="card" />;
|
return <Icon className={styles.cornerIcon} name="card" />;
|
||||||
case 'switchBotInline':
|
case 'switchBotInline':
|
||||||
return <Icon className="corner-icon" name="share-filled" />;
|
return <Icon className={styles.cornerIcon} name="share-filled" />;
|
||||||
case 'webView':
|
case 'webView':
|
||||||
case 'simpleWebView':
|
case 'simpleWebView':
|
||||||
return <Icon className="corner-icon" name="webapp" />;
|
return <Icon className={styles.cornerIcon} name="webapp" />;
|
||||||
case 'copy':
|
case 'copy':
|
||||||
return <Icon className="corner-icon" name="copy" />;
|
return <Icon className={styles.cornerIcon} name="copy" />;
|
||||||
case 'suggestedMessage':
|
case 'suggestedMessage':
|
||||||
if (button.buttonType === 'suggestChanges') {
|
if (button.buttonType === 'suggestChanges') {
|
||||||
return <Icon className="left-icon" name="edit" />;
|
return <Icon className={styles.leftIcon} name="edit" />;
|
||||||
}
|
}
|
||||||
if (button.buttonType === 'approve') {
|
if (button.buttonType === 'approve') {
|
||||||
return <Icon className="left-icon" name="check" />;
|
return <Icon className={styles.leftIcon} name="check" />;
|
||||||
}
|
}
|
||||||
if (button.buttonType === 'decline') {
|
if (button.buttonType === 'decline') {
|
||||||
return <Icon className="left-icon" name="close" />;
|
return <Icon className={styles.leftIcon} name="close" />;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'giftOffer':
|
case 'giftOffer':
|
||||||
if (button.buttonType === 'accept') {
|
if (button.buttonType === 'accept') {
|
||||||
return <Icon className="left-icon" name="check" />;
|
return <Icon className={styles.leftIcon} name="check" />;
|
||||||
}
|
}
|
||||||
if (button.buttonType === 'reject') {
|
if (button.buttonType === 'reject') {
|
||||||
return <Icon className="left-icon" name="close" />;
|
return <Icon className={styles.leftIcon} name="close" />;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -80,19 +85,29 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
|
|||||||
}, [lang, inlineButtons]);
|
}, [lang, inlineButtons]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="InlineButtons">
|
<div className={buildClassName(styles.root, className)}>
|
||||||
{inlineButtons.map((row, i) => (
|
{inlineButtons.map((row, i) => (
|
||||||
<div className="row">
|
<div className={styles.row}>
|
||||||
{row.map((button, j) => (
|
{row.map((button, j) => (
|
||||||
<Button
|
<Button
|
||||||
|
className={buildClassName(
|
||||||
|
styles.button, button.style?.type && styles[`${button.style.type}Tint`],
|
||||||
|
)}
|
||||||
size="tiny"
|
size="tiny"
|
||||||
ripple
|
ripple
|
||||||
|
noForcedUpperCase
|
||||||
disabled={button.type === 'unsupported' || (button.type === 'suggestedMessage' && button.disabled)}
|
disabled={button.type === 'unsupported' || (button.type === 'suggestedMessage' && button.disabled)}
|
||||||
|
|
||||||
onClick={() => onClick(button)}
|
onClick={() => onClick(button)}
|
||||||
>
|
>
|
||||||
{renderIcon(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]}
|
{buttonTexts[i][j]}
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -24,501 +24,508 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Button {
|
@layer ui.button {
|
||||||
--premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
|
.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;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: var(--border-radius-button);
|
border-radius: var(--border-radius-button);
|
||||||
|
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
text-transform: uppercase;
|
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-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 {
|
&.primary {
|
||||||
color: var(--color-primary);
|
--ripple-color: rgba(0, 0, 0, 0.08);
|
||||||
background-color: transparent;
|
|
||||||
|
color: var(--color-white);
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
|
||||||
@include active-styles() {
|
@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() {
|
@include no-ripple-styles() {
|
||||||
background-color: rgba(var(--color-primary-shade-rgb), 0.16);
|
background-color: var(--color-primary-shade-darker);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
color: var(--color-text-secondary);
|
--ripple-color: rgba(0, 0, 0, 0.08);
|
||||||
background-color: transparent;
|
|
||||||
}
|
color: rgba(var(--color-text-secondary-rgb), 0.75);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
|
||||||
&.danger {
|
|
||||||
@include active-styles() {
|
@include active-styles() {
|
||||||
color: var(--color-error);
|
color: white;
|
||||||
background-color: rgba(var(--color-error-rgb), 0.08);
|
background-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include no-ripple-styles() {
|
@include no-ripple-styles() {
|
||||||
background-color: rgba(var(--color-error-rgb), 0.16);
|
background-color: var(--color-primary-shade);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.faded {
|
&.gray {
|
||||||
opacity: 0.8;
|
--ripple-color: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
@include active-styles() {
|
color: var(--color-text-secondary);
|
||||||
opacity: 1;
|
background-color: var(--color-background);
|
||||||
|
|
||||||
|
@include active-styles() {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include no-ripple-styles() {
|
||||||
|
background-color: var(--color-chat-hover);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.activated {
|
&.danger {
|
||||||
opacity: 1;
|
--ripple-color: rgba(var(--color-error-rgb), 0.16);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.translucent {
|
color: var(--color-error);
|
||||||
--ripple-color: var(--color-interactive-element-hover);
|
background-color: var(--color-background);
|
||||||
|
|
||||||
color: var(--color-text-secondary);
|
@include active-styles() {
|
||||||
background-color: transparent;
|
color: var(--color-white);
|
||||||
|
background-color: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
@include active-styles() {
|
@include no-ripple-styles() {
|
||||||
background-color: var(--color-interactive-element-hover);
|
background-color: var(--color-error-shade);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include no-ripple-styles() {
|
&.text {
|
||||||
background-color: rgba(var(--color-text-secondary-rgb), 0.16);
|
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 {
|
&.faded {
|
||||||
color: var(--color-primary);
|
opacity: 0.8;
|
||||||
|
|
||||||
|
@include active-styles() {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.activated {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.translucent-white {
|
&.translucent {
|
||||||
--ripple-color: rgba(255, 255, 255, 0.08);
|
--ripple-color: var(--color-interactive-element-hover);
|
||||||
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: var(--color-text-secondary);
|
||||||
background-color: transparent;
|
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;
|
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() {
|
&.green {
|
||||||
background-color: rgba(255, 255, 255, 0.16);
|
--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);
|
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);
|
background-color: var(--color-green);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.stars {
|
@include active-styles() {
|
||||||
--ripple-color: rgba(0, 0, 0, 0.08);
|
background-color: var(--color-green-darker);
|
||||||
|
}
|
||||||
|
|
||||||
color: var(--color-white);
|
@include no-ripple-styles() {
|
||||||
background-color: #FFB727;
|
background-color: var(--color-green);
|
||||||
|
}
|
||||||
.theme-dark & {
|
|
||||||
background-color: #CF8920;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include active-styles() {
|
&.stars {
|
||||||
background-color: #FFB727CC;
|
--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() {
|
&.bluredStarsBadge {
|
||||||
background-color: #FFB727;
|
color: var(--color-white);
|
||||||
}
|
background: rgba(0, 0, 0, 0.2) !important;
|
||||||
}
|
backdrop-filter: blur(50px);
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pill {
|
&.transparentBlured {
|
||||||
padding: 0.3125rem 1rem;
|
color: white;
|
||||||
border-radius: 1.25rem;
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(0.5rem);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-icon {
|
&.smaller {
|
||||||
padding-inline-start: 0.75rem;
|
height: 2.5rem;
|
||||||
padding-inline-end: 1.25rem;
|
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 {
|
.icon {
|
||||||
margin-inline-end: 0.5rem;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.tiny {
|
&.content-with-icon-bottom,
|
||||||
--emoji-size: 1rem;
|
&.content-with-icon-top {
|
||||||
|
height: auto;
|
||||||
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 {
|
&.fluid {
|
||||||
font-size: 1.25rem;
|
width: auto;
|
||||||
}
|
padding-right: 1.75rem;
|
||||||
|
padding-left: 1.75rem;
|
||||||
&.pill {
|
|
||||||
--emoji-size: 1.25rem;
|
&.tiny {
|
||||||
|
padding-right: 1.375rem;
|
||||||
height: 1.75rem;
|
padding-left: 1.375rem;
|
||||||
padding: 0.25rem 0.5rem;
|
}
|
||||||
border-radius: 1rem;
|
|
||||||
font-size: 1rem;
|
&.pill {
|
||||||
}
|
padding: 0.5rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.round {
|
&.badge {
|
||||||
width: 3rem;
|
padding: 0.5rem 1.75rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.pill,
|
||||||
&.badge {
|
&.badge {
|
||||||
padding: 0.5rem 1.75rem;
|
padding-right: 1.75rem;
|
||||||
|
padding-left: 1.75rem;
|
||||||
|
border-radius: 1.75rem;
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.pill, &.badge {
|
&.loading {
|
||||||
padding-right: 1.75rem;
|
pointer-events: none;
|
||||||
padding-left: 1.75rem;
|
position: relative;
|
||||||
border-radius: 1.75rem;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
.Spinner {
|
||||||
pointer-events: none;
|
--spinner-size: 1.8125rem;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.Spinner {
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0.875rem;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
--spinner-size: 1.8125rem;
|
.emoji {
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.shiny::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 0;
|
||||||
right: 0.875rem;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji {
|
display: block;
|
||||||
vertical-align: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.shiny::before {
|
width: 100%;
|
||||||
content: "";
|
height: 100%;
|
||||||
|
|
||||||
position: absolute;
|
background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
|
||||||
top: 0;
|
|
||||||
|
|
||||||
display: block;
|
animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
|
||||||
width: 100%;
|
@keyframes wave {
|
||||||
height: 100%;
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
|
}
|
||||||
|
50% {
|
||||||
animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
@keyframes wave {
|
100% {
|
||||||
0% {
|
transform: translateX(100%);
|
||||||
transform: translateX(-100%);
|
}
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.premium {
|
&.premium {
|
||||||
background: var(--premium-gradient);
|
background: var(--premium-gradient);
|
||||||
}
|
|
||||||
|
|
||||||
&.rectangular {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.with-icon-top {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.with-icon-bottom {
|
&.rectangular {
|
||||||
display: flex;
|
border-radius: 0;
|
||||||
flex-direction: column-reverse;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.with-icon-start {
|
.with-icon-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
.icon {
|
|
||||||
margin-inline-end: 0.25rem;
|
.icon {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.with-icon-end {
|
.with-icon-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: column-reverse;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-inline-start: 0.25rem;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -51,6 +51,9 @@
|
|||||||
<link rel="manifest" id="the-manifest-placeholder" href="./<%= htmlWebpackPlugin.options.manifest %>">
|
<link rel="manifest" id="the-manifest-placeholder" href="./<%= htmlWebpackPlugin.options.manifest %>">
|
||||||
|
|
||||||
<script src="./redirect.js"></script>
|
<script src="./redirect.js"></script>
|
||||||
|
<style>
|
||||||
|
@layer reset, variables, ui, components;
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="root">
|
<body id="root">
|
||||||
|
|||||||
@ -18,335 +18,337 @@
|
|||||||
@return rgb($bm-red, $bm-green, $bm-blue);
|
@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-text-green: #4fae4e;
|
||||||
$color-green: #00c73e;
|
$color-green: #00c73e;
|
||||||
$color-light-green: #eeffde;
|
$color-light-green: #eeffde;
|
||||||
|
|
||||||
$color-error: #e53935;
|
$color-error: #e53935;
|
||||||
|
|
||||||
$color-warning: #fb8c00;
|
$color-warning: #fb8c00;
|
||||||
|
|
||||||
$color-yellow: #fdd764;
|
$color-yellow: #fdd764;
|
||||||
$color-orange: #d08a31;
|
$color-orange: #d08a31;
|
||||||
$color-light-coral: #d08a3133;
|
$color-light-coral: #d08a3133;
|
||||||
|
|
||||||
$color-white: #ffffff;
|
$color-white: #ffffff;
|
||||||
$color-black: #000000;
|
$color-black: #000000;
|
||||||
$color-dark-gray: #2e3939;
|
$color-dark-gray: #2e3939;
|
||||||
$color-gray: #c4c9cc;
|
$color-gray: #c4c9cc;
|
||||||
$color-text-secondary: #707579;
|
$color-text-secondary: #707579;
|
||||||
$color-text-secondary-apple: #8a8a90;
|
$color-text-secondary-apple: #8a8a90;
|
||||||
$color-text-meta: #686c72;
|
$color-text-meta: #686c72;
|
||||||
$color-text-meta-apple: #8c8c91;
|
$color-text-meta-apple: #8c8c91;
|
||||||
$color-borders: #dadce0;
|
$color-borders: #dadce0;
|
||||||
$color-dividers: #c8c6cc;
|
$color-dividers: #c8c6cc;
|
||||||
$color-dividers-android: #E7E7E7;
|
$color-dividers-android: #E7E7E7;
|
||||||
$color-item-hover: #f4f4f5;
|
$color-item-hover: #f4f4f5;
|
||||||
$color-item-active: #ededed;
|
$color-item-active: #ededed;
|
||||||
$color-chat-hover: #f4f4f5;
|
$color-chat-hover: #f4f4f5;
|
||||||
$color-chat-active: #3390ec;
|
$color-chat-active: #3390ec;
|
||||||
$color-selection: #3993fb;
|
$color-selection: #3993fb;
|
||||||
|
|
||||||
$color-message-reaction: #ebf3fd;
|
$color-message-reaction: #ebf3fd;
|
||||||
$color-message-reaction-hover: #c5def9;
|
$color-message-reaction-hover: #c5def9;
|
||||||
$color-message-reaction-own: #cef0ba;
|
$color-message-reaction-own: #cef0ba;
|
||||||
$color-message-reaction-own-hover: #b5e0a4;
|
$color-message-reaction-own-hover: #b5e0a4;
|
||||||
$color-message-reaction-chosen-hover: #1a82ea;
|
$color-message-reaction-chosen-hover: #1a82ea;
|
||||||
$color-message-reaction-chosen-hover-own: #3f9d4b;
|
$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-from: #4ef390;
|
||||||
$color-message-story-mention-to: #74bcff;
|
$color-message-story-mention-to: #74bcff;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--color-background: #{$color-white};
|
--color-background: #{$color-white};
|
||||||
--color-background-compact-menu: #FFFFFFBB;
|
--color-background-compact-menu: #FFFFFFBB;
|
||||||
--color-background-compact-menu-reactions: #FFFFFFEB;
|
--color-background-compact-menu-reactions: #FFFFFFEB;
|
||||||
--color-background-compact-menu-hover: #000000B2;
|
--color-background-compact-menu-hover: #000000B2;
|
||||||
--color-background-menu-separator: #0000001a;
|
--color-background-menu-separator: #0000001a;
|
||||||
--color-background-selected: #f4f4f5;
|
--color-background-selected: #f4f4f5;
|
||||||
--color-background-secondary: #f4f4f5;
|
--color-background-secondary: #f4f4f5;
|
||||||
--color-background-secondary-accent: #e4e4e5;
|
--color-background-secondary-accent: #e4e4e5;
|
||||||
--color-background-sidebar: #E4E4E5;
|
--color-background-sidebar: #E4E4E5;
|
||||||
--color-background-own: #{$color-light-green};
|
--color-background-own: #{$color-light-green};
|
||||||
--color-background-own-selected: #{color.adjust($color-light-green, $lightness: -10%, $space: hsl)};
|
--color-background-own-selected: #{color.adjust($color-light-green, $lightness: -10%, $space: hsl)};
|
||||||
--color-text: #{$color-black};
|
--color-text: #{$color-black};
|
||||||
--color-text-rgb: #{toRGB($color-black)};
|
--color-text-rgb: #{toRGB($color-black)};
|
||||||
--color-text-lighter: #{$color-dark-gray};
|
--color-text-lighter: #{$color-dark-gray};
|
||||||
--color-text-secondary: #{$color-text-secondary};
|
--color-text-secondary: #{$color-text-secondary};
|
||||||
--color-icon-secondary: #{$color-text-secondary};
|
--color-icon-secondary: #{$color-text-secondary};
|
||||||
--color-text-secondary-rgb: #{toRGB($color-text-secondary)};
|
--color-text-secondary-rgb: #{toRGB($color-text-secondary)};
|
||||||
--color-text-secondary-apple: #{$color-text-secondary-apple};
|
--color-text-secondary-apple: #{$color-text-secondary-apple};
|
||||||
--color-text-meta: #{$color-text-meta};
|
--color-text-meta: #{$color-text-meta};
|
||||||
--color-text-meta-rgb: #{toRGB($color-text-meta)};
|
--color-text-meta-rgb: #{toRGB($color-text-meta)};
|
||||||
--color-text-meta-colored: #{$color-text-green};
|
--color-text-meta-colored: #{$color-text-green};
|
||||||
--color-text-meta-apple: #{$color-text-meta-apple};
|
--color-text-meta-apple: #{$color-text-meta-apple};
|
||||||
--color-text-green: #{$color-text-green};
|
--color-text-green: #{$color-text-green};
|
||||||
--color-text-green-rgb: #{toRGB($color-text-green)};
|
--color-text-green-rgb: #{toRGB($color-text-green)};
|
||||||
--color-borders: #{$color-borders};
|
--color-borders: #{$color-borders};
|
||||||
--color-borders-input: #{$color-borders};
|
--color-borders-input: #{$color-borders};
|
||||||
--color-borders-alternate: rgba(0, 0, 0, 0.1);
|
--color-borders-alternate: rgba(0, 0, 0, 0.1);
|
||||||
--color-borders-read-story: #C4C9CC;
|
--color-borders-read-story: #C4C9CC;
|
||||||
--color-dividers: #{$color-dividers};
|
--color-dividers: #{$color-dividers};
|
||||||
--color-dividers-android: #{$color-dividers-android};
|
--color-dividers-android: #{$color-dividers-android};
|
||||||
--color-webpage-initial-background: #{$color-dark-gray};
|
--color-webpage-initial-background: #{$color-dark-gray};
|
||||||
--color-interactive-active: var(--color-primary);
|
--color-interactive-active: var(--color-primary);
|
||||||
--color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
|
--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-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-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
|
||||||
--color-composer-button: #{$color-text-secondary}CC;
|
--color-composer-button: #{$color-text-secondary}CC;
|
||||||
--color-toast-background: #202020CC;
|
--color-toast-background: #202020CC;
|
||||||
|
|
||||||
--color-voice-transcribe-button: #e8f3ff;
|
--color-voice-transcribe-button: #e8f3ff;
|
||||||
--color-voice-transcribe-button-own: #cceebf;
|
--color-voice-transcribe-button-own: #cceebf;
|
||||||
|
|
||||||
--color-primary: #{$color-primary};
|
--color-primary: #{$color-primary};
|
||||||
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
|
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
|
||||||
--color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
|
--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-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
|
||||||
--color-primary-opacity: rgba(var(--color-primary), 0.15);
|
--color-primary-opacity: rgba(var(--color-primary), 0.15);
|
||||||
--color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
|
--color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
|
||||||
--color-primary-tint: rgba(var(--color-primary), 0.1);
|
--color-primary-tint: rgba(var(--color-primary), 0.1);
|
||||||
--color-green: #{$color-green};
|
--color-green: #{$color-green};
|
||||||
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
|
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
|
||||||
--color-success: #{$color-green};
|
--color-success: #{$color-green};
|
||||||
|
|
||||||
--accent-color: var(--color-primary);
|
--accent-color: var(--color-primary);
|
||||||
--accent-background-color: var(--color-primary-tint);
|
--accent-background-color: var(--color-primary-tint);
|
||||||
--accent-background-active-color: var(--color-primary-opacity);
|
--accent-background-active-color: var(--color-primary-opacity);
|
||||||
|
|
||||||
--color-error: #{$color-error};
|
--color-error: #{$color-error};
|
||||||
--color-error-shade: #{color.mix($color-error, $color-black, 92%)};
|
--color-error-shade: #{color.mix($color-error, $color-black, 92%)};
|
||||||
--color-error-rgb: #{toRGB($color-error)};
|
--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-orange: #{$color-orange};
|
||||||
--color-light-coral: #{$color-light-coral};
|
--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: #4a729a;
|
||||||
--color-code-bg: #{rgba($color-text-secondary, 0.08)};
|
--color-code-bg: #{rgba($color-text-secondary, 0.08)};
|
||||||
--color-code-own: #3c7940;
|
--color-code-own: #3c7940;
|
||||||
--color-code-own-bg: #{rgba($color-text-secondary, 0.08)};
|
--color-code-own-bg: #{rgba($color-text-secondary, 0.08)};
|
||||||
|
|
||||||
--color-accent-own: #{$color-text-green};
|
--color-accent-own: #{$color-text-green};
|
||||||
--color-accent-own-rgb: #{toRGB($color-text-green)};
|
--color-accent-own-rgb: #{toRGB($color-text-green)};
|
||||||
--color-message-meta-own: #{$color-text-green};
|
--color-message-meta-own: #{$color-text-green};
|
||||||
|
|
||||||
--color-message-reaction: #{$color-message-reaction};
|
--color-message-reaction: #{$color-message-reaction};
|
||||||
--color-message-reaction-hover: #{$color-message-reaction-hover};
|
--color-message-reaction-hover: #{$color-message-reaction-hover};
|
||||||
--color-message-reaction-own: #{$color-message-reaction-own};
|
--color-message-reaction-own: #{$color-message-reaction-own};
|
||||||
--color-message-reaction-hover-own: #{$color-message-reaction-own-hover};
|
--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: #{$color-message-reaction-chosen-hover};
|
||||||
--color-message-reaction-chosen-hover-own: #{$color-message-reaction-chosen-hover-own};
|
--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-from: #{$color-message-story-mention-from};
|
||||||
--color-message-story-mention-to: #{$color-message-story-mention-to};
|
--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-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-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-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-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
|
||||||
|
|
||||||
--color-background-own-apple: #dcf8c5;
|
--color-background-own-apple: #dcf8c5;
|
||||||
--color-reply-own-hover-apple: #cbefb7;
|
--color-reply-own-hover-apple: #cbefb7;
|
||||||
--color-reply-own-active-apple: #bae6a8;
|
--color-reply-own-active-apple: #bae6a8;
|
||||||
|
|
||||||
--color-white: #{$color-white};
|
--color-white: #{$color-white};
|
||||||
--color-gray: #{$color-gray};
|
--color-gray: #{$color-gray};
|
||||||
|
|
||||||
--color-chat-username: #3C7EB0;
|
--color-chat-username: #3C7EB0;
|
||||||
--color-chat-hover: #{$color-chat-hover};
|
--color-chat-hover: #{$color-chat-hover};
|
||||||
--color-chat-active: #{$color-chat-active};
|
--color-chat-active: #{$color-chat-active};
|
||||||
--color-item-hover: #{$color-item-hover};
|
--color-item-hover: #{$color-item-hover};
|
||||||
--color-item-active: #{$color-item-active};
|
--color-item-active: #{$color-item-active};
|
||||||
|
|
||||||
--color-selection-highlight: #{$color-selection};
|
--color-selection-highlight: #{$color-selection};
|
||||||
--color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);
|
--color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);
|
||||||
|
|
||||||
--color-avatar-story-unread-from: #34c578;
|
--color-avatar-story-unread-from: #34c578;
|
||||||
--color-avatar-story-unread-to: #3ca3f3;
|
--color-avatar-story-unread-to: #3ca3f3;
|
||||||
--color-avatar-story-friend-unread-from: #c9eb38;
|
--color-avatar-story-friend-unread-from: #c9eb38;
|
||||||
--color-avatar-story-friend-unread-to: #09c167;
|
--color-avatar-story-friend-unread-to: #09c167;
|
||||||
|
|
||||||
--color-default-shadow: #72727240;
|
--color-default-shadow: #72727240;
|
||||||
--color-light-shadow: #7272722b;
|
--color-light-shadow: #7272722b;
|
||||||
|
|
||||||
--color-skeleton-background: rgba(33, 33, 33, 0.15);
|
--color-skeleton-background: rgba(33, 33, 33, 0.15);
|
||||||
--color-skeleton-foreground: rgba(232, 232, 232, 0.2);
|
--color-skeleton-foreground: rgba(232, 232, 232, 0.2);
|
||||||
|
|
||||||
--color-scrollbar: rgba(90, 90, 90, 0.3);
|
--color-scrollbar: rgba(90, 90, 90, 0.3);
|
||||||
--color-scrollbar-code: rgba(200, 200, 200, 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: #e9e9e9;
|
||||||
--color-forum-hover-unread-topic-hover: #dcdcdc;
|
--color-forum-hover-unread-topic-hover: #dcdcdc;
|
||||||
|
|
||||||
--color-deleted-account: #9eaab5;
|
--color-deleted-account: #9eaab5;
|
||||||
--color-archive: #9eaab5;
|
--color-archive: #9eaab5;
|
||||||
--stars-gradient: linear-gradient(90deg, #FFAA00 0%, #FFCD3A 100%);
|
--stars-gradient: linear-gradient(90deg, #FFAA00 0%, #FFCD3A 100%);
|
||||||
|
|
||||||
--color-stars: #FFAA00;
|
--color-stars: #FFAA00;
|
||||||
--color-heart: #ff3c32;
|
--color-heart: #ff3c32;
|
||||||
|
|
||||||
--color-gift-uncommon: #40A920;
|
--color-gift-uncommon: #40A920;
|
||||||
--color-gift-uncommon-bg: rgba(64, 169, 32, 0.15);
|
--color-gift-uncommon-bg: rgba(64, 169, 32, 0.15);
|
||||||
--color-gift-rare: #11AABE;
|
--color-gift-rare: #11AABE;
|
||||||
--color-gift-rare-bg: rgba(17, 170, 190, 0.15);
|
--color-gift-rare-bg: rgba(17, 170, 190, 0.15);
|
||||||
--color-gift-epic: #955CDB;
|
--color-gift-epic: #955CDB;
|
||||||
--color-gift-epic-bg: rgba(149, 92, 219, 0.15);
|
--color-gift-epic-bg: rgba(149, 92, 219, 0.15);
|
||||||
--color-gift-legendary: #BF7600;
|
--color-gift-legendary: #BF7600;
|
||||||
--color-gift-legendary-bg: rgba(191, 118, 0, 0.15);
|
--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: 1rem;
|
||||||
--border-radius-button-tiny: 0.875rem;
|
--border-radius-button-tiny: 0.875rem;
|
||||||
--border-radius-modal: 2rem;
|
--border-radius-modal: 2rem;
|
||||||
--border-radius-toast: 1rem;
|
--border-radius-toast: 1rem;
|
||||||
--border-radius-default: 0.75rem;
|
--border-radius-default: 0.75rem;
|
||||||
--border-radius-default-small: 0.625rem;
|
--border-radius-default-small: 0.625rem;
|
||||||
--border-radius-default-tiny: 0.375rem;
|
--border-radius-default-tiny: 0.375rem;
|
||||||
--border-radius-messages: 0.9375rem;
|
--border-radius-messages: 0.9375rem;
|
||||||
--border-radius-messages-small: 0.375rem;
|
--border-radius-messages-small: 0.375rem;
|
||||||
--border-radius-forum-avatar: 33.3333%;
|
--border-radius-forum-avatar: 33.3333%;
|
||||||
--messages-container-width: 45.5rem;
|
--messages-container-width: 45.5rem;
|
||||||
--right-column-width: 26.5rem;
|
--right-column-width: 26.5rem;
|
||||||
--folders-sidebar-width: 5rem;
|
--folders-sidebar-width: 5rem;
|
||||||
--window-controls-width: 0rem;
|
--window-controls-width: 0rem;
|
||||||
--header-height: 3.5rem;
|
--header-height: 3.5rem;
|
||||||
--custom-emoji-size: 1.25rem;
|
--emoji-size: 1.25em;
|
||||||
--emoji-size: 1.25rem;
|
--custom-emoji-size: var(--emoji-size);
|
||||||
--custom-emoji-border-radius: 0;
|
--custom-emoji-border-radius: 0;
|
||||||
|
|
||||||
--symbol-menu-width: 24rem;
|
--symbol-menu-width: 24rem;
|
||||||
--symbol-menu-height: 22.375rem;
|
--symbol-menu-height: 22.375rem;
|
||||||
--symbol-menu-footer-height: 3rem;
|
--symbol-menu-footer-height: 3rem;
|
||||||
|
|
||||||
--scrollbar-width: 0;
|
--scrollbar-width: 0;
|
||||||
|
|
||||||
--z-overlay-effects: 12000;
|
--z-overlay-effects: 12000;
|
||||||
--z-modal-confirm: 10500;
|
--z-modal-confirm: 10500;
|
||||||
--z-reaction-picker: 10200;
|
--z-reaction-picker: 10200;
|
||||||
--z-portal-menu: 10000;
|
--z-portal-menu: 10000;
|
||||||
--z-symbol-menu-modal: 5000;
|
--z-symbol-menu-modal: 5000;
|
||||||
--z-lock-screen: 3000;
|
--z-lock-screen: 3000;
|
||||||
--z-ui-loader-mask: 2000;
|
--z-ui-loader-mask: 2000;
|
||||||
--z-notification: 1700;
|
--z-notification: 1700;
|
||||||
--z-confetti: 1600;
|
--z-confetti: 1600;
|
||||||
--z-story-viewer: 1150;
|
--z-story-viewer: 1150;
|
||||||
--z-reaction-interaction-effect: 1100;
|
--z-reaction-interaction-effect: 1100;
|
||||||
--z-right-column: 900;
|
--z-right-column: 900;
|
||||||
--z-right-column-menu: 950;
|
--z-right-column-menu: 950;
|
||||||
--z-header-menu: 990;
|
--z-header-menu: 990;
|
||||||
--z-header-menu-backdrop: 980;
|
--z-header-menu-backdrop: 980;
|
||||||
--z-modal: 1510;
|
--z-modal: 1510;
|
||||||
--z-modal-menu: 1600;
|
--z-modal-menu: 1600;
|
||||||
--z-resize-grip: 1000;
|
--z-resize-grip: 1000;
|
||||||
--z-media-viewer: 1500;
|
--z-media-viewer: 1500;
|
||||||
--z-modal-low-priority: 1400;
|
--z-modal-low-priority: 1400;
|
||||||
--z-video-player-controls: 3;
|
--z-video-player-controls: 3;
|
||||||
--z-drop-area: 55;
|
--z-drop-area: 55;
|
||||||
--z-animation-fade: 50;
|
--z-animation-fade: 50;
|
||||||
--z-menu-bubble: 21;
|
--z-menu-bubble: 21;
|
||||||
--z-menu-backdrop: 20;
|
--z-menu-backdrop: 20;
|
||||||
--z-message-effect: 15;
|
--z-message-effect: 15;
|
||||||
--z-message-highlighted: 14;
|
--z-message-highlighted: 14;
|
||||||
--z-forum-panel: 13;
|
--z-forum-panel: 13;
|
||||||
--z-message-context-menu: 13;
|
--z-message-context-menu: 13;
|
||||||
--z-scroll-down-button: 12;
|
--z-scroll-down-button: 12;
|
||||||
--z-local-search: 12;
|
--z-local-search: 12;
|
||||||
--z-left-header: 11;
|
--z-left-header: 11;
|
||||||
--z-middle-header: 11;
|
--z-middle-header: 11;
|
||||||
--z-middle-footer: 11;
|
--z-middle-footer: 11;
|
||||||
--z-scroll-notch: 10;
|
--z-scroll-notch: 10;
|
||||||
--z-story-ribbon: 10;
|
--z-story-ribbon: 10;
|
||||||
--z-country-code-input-group: 10;
|
--z-country-code-input-group: 10;
|
||||||
--z-message-select-control: 9;
|
--z-message-select-control: 9;
|
||||||
--z-message-select-area: 8;
|
--z-message-select-area: 8;
|
||||||
--z-sticky-date: 9;
|
--z-sticky-date: 9;
|
||||||
--z-register-add-avatar: 5;
|
--z-register-add-avatar: 5;
|
||||||
--z-media-viewer-head: 3;
|
--z-media-viewer-head: 3;
|
||||||
--z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
|
--z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
|
||||||
--z-resize-handle: 2;
|
--z-resize-handle: 2;
|
||||||
--z-below: -1;
|
--z-below: -1;
|
||||||
--z-chat-ripple: 6;
|
--z-chat-ripple: 6;
|
||||||
--z-chat-float-button: calc(var(--z-chat-ripple) + 1);
|
--z-chat-float-button: calc(var(--z-chat-ripple) + 1);
|
||||||
|
|
||||||
--spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
|
--spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
|
||||||
--spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
|
--spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
|
||||||
--spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
|
--spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
|
||||||
--spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
|
--spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
|
||||||
--spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
|
--spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
|
||||||
--spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
|
--spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
|
||||||
--spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
|
--spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
|
||||||
--spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);
|
--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: 300ms cubic-bezier(0.33, 1, 0.68, 1);
|
||||||
--layer-transition-behind: 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);
|
--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
--select-transition: 200ms ease-out;
|
--select-transition: 200ms ease-out;
|
||||||
--chat-transform-transition: 0.2s ease-out;
|
--chat-transform-transition: 0.2s ease-out;
|
||||||
|
|
||||||
--safe-area-top: env(safe-area-inset-top);
|
--safe-area-top: env(safe-area-inset-top);
|
||||||
--safe-area-right: env(safe-area-inset-right);
|
--safe-area-right: env(safe-area-inset-right);
|
||||||
--safe-area-bottom: env(safe-area-inset-bottom);
|
--safe-area-bottom: env(safe-area-inset-bottom);
|
||||||
--safe-area-left: env(safe-area-inset-left);
|
--safe-area-left: env(safe-area-inset-left);
|
||||||
|
|
||||||
--picker-title-shift: 1rem;
|
--picker-title-shift: 1rem;
|
||||||
|
|
||||||
--font-weight-normal: 400;
|
--font-weight-normal: 400;
|
||||||
--font-weight-medium: 500;
|
--font-weight-medium: 500;
|
||||||
|
|
||||||
--middle-header-panes-height: 0px;
|
--middle-header-panes-height: 0px;
|
||||||
|
|
||||||
body.is-ios {
|
body.is-ios {
|
||||||
--layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
|
--layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
--layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);
|
--layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);
|
||||||
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
|
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-android {
|
body.is-android {
|
||||||
--slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
|
--slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1276px) and (max-width: 1920px) {
|
@media (min-width: 1276px) and (max-width: 1920px) {
|
||||||
--right-column-width: 25vw;
|
--right-column-width: 25vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1921px) {
|
@media (min-width: 1921px) {
|
||||||
--messages-container-width: 50vw;
|
--messages-container-width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
--right-column-width: 100vw;
|
--right-column-width: 100vw;
|
||||||
--symbol-menu-width: 100vw;
|
--symbol-menu-width: 100vw;
|
||||||
--symbol-menu-height: 17.6875rem;
|
--symbol-menu-height: 17.6875rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,331 +1,326 @@
|
|||||||
|
/* stylelint-disable selector-max-type */
|
||||||
/* stylelint-disable plugin/selector-tag-no-without-class */
|
/* stylelint-disable plugin/selector-tag-no-without-class */
|
||||||
*,
|
@layer reset {
|
||||||
*::before,
|
*,
|
||||||
*::after {
|
*::before,
|
||||||
box-sizing: border-box;
|
*::after {
|
||||||
}
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
html {
|
|
||||||
font-family: sans-serif;
|
html {
|
||||||
line-height: 1.15;
|
font-family: sans-serif;
|
||||||
-webkit-text-size-adjust: 100%;
|
line-height: 1.15;
|
||||||
-ms-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
-ms-overflow-style: scrollbar;
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
}
|
||||||
}
|
|
||||||
|
article,
|
||||||
@-ms-viewport {
|
aside,
|
||||||
width: device-width;
|
dialog,
|
||||||
}
|
figcaption,
|
||||||
|
figure,
|
||||||
article,
|
footer,
|
||||||
aside,
|
header,
|
||||||
dialog,
|
hgroup,
|
||||||
figcaption,
|
main,
|
||||||
figure,
|
nav,
|
||||||
footer,
|
section {
|
||||||
header,
|
display: block;
|
||||||
hgroup,
|
}
|
||||||
main,
|
|
||||||
nav,
|
body, blockquote {
|
||||||
section {
|
margin: 0;
|
||||||
display: block;
|
}
|
||||||
}
|
|
||||||
|
[tabindex="-1"]:focus {
|
||||||
body, blockquote {
|
outline: none !important;
|
||||||
margin: 0;
|
}
|
||||||
}
|
|
||||||
|
hr {
|
||||||
[tabindex="-1"]:focus {
|
overflow: visible;
|
||||||
outline: none !important;
|
box-sizing: content-box;
|
||||||
}
|
height: 0;
|
||||||
|
}
|
||||||
hr {
|
|
||||||
overflow: visible;
|
h1,
|
||||||
box-sizing: content-box;
|
h2,
|
||||||
height: 0;
|
h3,
|
||||||
}
|
h4,
|
||||||
|
h5,
|
||||||
h1,
|
h6 {
|
||||||
h2,
|
margin-top: 0;
|
||||||
h3,
|
margin-bottom: 0.5rem;
|
||||||
h4,
|
font-weight: var(--font-weight-medium);
|
||||||
h5,
|
}
|
||||||
h6 {
|
|
||||||
margin-top: 0;
|
abbr[title],
|
||||||
margin-bottom: 0.5rem;
|
abbr[data-original-title] {
|
||||||
font-weight: var(--font-weight-medium);
|
cursor: help;
|
||||||
}
|
border-bottom: 0;
|
||||||
|
text-decoration: underline;
|
||||||
abbr[title],
|
text-decoration: underline dotted;
|
||||||
abbr[data-original-title] {
|
}
|
||||||
cursor: help;
|
|
||||||
border-bottom: 0;
|
address {
|
||||||
text-decoration: underline;
|
margin-bottom: 1rem;
|
||||||
text-decoration: underline dotted;
|
font-style: normal;
|
||||||
}
|
line-height: inherit;
|
||||||
|
}
|
||||||
address {
|
|
||||||
margin-bottom: 1rem;
|
p,
|
||||||
font-style: normal;
|
ol,
|
||||||
line-height: inherit;
|
ul,
|
||||||
}
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
p,
|
margin-bottom: 1rem;
|
||||||
ol,
|
}
|
||||||
ul,
|
|
||||||
dl {
|
ol ol,
|
||||||
margin-top: 0;
|
ul ul,
|
||||||
margin-bottom: 1rem;
|
ol ul,
|
||||||
}
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
ol ol,
|
}
|
||||||
ul ul,
|
|
||||||
ol ul,
|
dd {
|
||||||
ul ol {
|
margin-bottom: 0.5rem;
|
||||||
margin-bottom: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
figure {
|
||||||
margin-bottom: 0.5rem;
|
margin: 0 0 1rem;
|
||||||
margin-left: 0;
|
}
|
||||||
}
|
|
||||||
|
dfn {
|
||||||
figure {
|
font-style: italic;
|
||||||
margin: 0 0 1rem;
|
}
|
||||||
}
|
|
||||||
|
dt,
|
||||||
dfn {
|
b,
|
||||||
font-style: italic;
|
strong {
|
||||||
}
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
dt,
|
|
||||||
b,
|
small {
|
||||||
strong {
|
font-size: 80%;
|
||||||
font-weight: var(--font-weight-medium);
|
}
|
||||||
}
|
|
||||||
|
sub,
|
||||||
small {
|
sup {
|
||||||
font-size: 80%;
|
position: relative;
|
||||||
}
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
sub,
|
vertical-align: baseline;
|
||||||
sup {
|
}
|
||||||
position: relative;
|
|
||||||
font-size: 75%;
|
sub {
|
||||||
line-height: 0;
|
bottom: -0.25em;
|
||||||
vertical-align: baseline;
|
}
|
||||||
}
|
|
||||||
|
sup {
|
||||||
sub {
|
top: -0.5em;
|
||||||
bottom: -0.25em;
|
}
|
||||||
}
|
|
||||||
|
a {
|
||||||
sup {
|
color: var(--color-links);
|
||||||
top: -0.5em;
|
text-decoration: none;
|
||||||
}
|
background-color: transparent;
|
||||||
|
|
||||||
a {
|
-webkit-text-decoration-skip: objects;
|
||||||
color: var(--color-links);
|
}
|
||||||
text-decoration: none;
|
|
||||||
background-color: transparent;
|
a:hover {
|
||||||
|
color: #0056b3;
|
||||||
-webkit-text-decoration-skip: objects;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:not([href]):not([tabindex]),
|
||||||
color: #0056b3;
|
a:not([href]):not([tabindex]):hover,
|
||||||
text-decoration: underline;
|
a:not([href]):not([tabindex]):focus {
|
||||||
}
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
a:not([href]):not([tabindex]),
|
}
|
||||||
a:not([href]):not([tabindex]):hover,
|
|
||||||
a:not([href]):not([tabindex]):focus {
|
a:not([href]):not([tabindex]):focus {
|
||||||
color: inherit;
|
outline: 0;
|
||||||
text-decoration: none;
|
}
|
||||||
}
|
|
||||||
|
pre,
|
||||||
a:not([href]):not([tabindex]):focus {
|
code,
|
||||||
outline: 0;
|
kbd,
|
||||||
}
|
samp {
|
||||||
|
/* stylelint-disable-next-line @stylistic/max-line-length */
|
||||||
pre,
|
font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
|
||||||
code,
|
font-size-adjust: 0.5;
|
||||||
kbd,
|
}
|
||||||
samp {
|
|
||||||
/* stylelint-disable-next-line @stylistic/max-line-length */
|
pre {
|
||||||
font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
|
overflow: auto;
|
||||||
font-size-adjust: 0.5;
|
margin-top: 0;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
pre {
|
|
||||||
overflow: auto;
|
img {
|
||||||
margin-top: 0;
|
border-style: none;
|
||||||
margin-bottom: 1rem;
|
vertical-align: middle;
|
||||||
|
}
|
||||||
-ms-overflow-style: scrollbar;
|
|
||||||
}
|
img, video {
|
||||||
|
dynamic-range-limit: standard;
|
||||||
img {
|
}
|
||||||
border-style: none;
|
|
||||||
vertical-align: middle;
|
svg:not(:root) {
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
img, video {
|
|
||||||
dynamic-range-limit: standard;
|
a,
|
||||||
}
|
area,
|
||||||
|
button,
|
||||||
svg:not(:root) {
|
[role="button"],
|
||||||
overflow: hidden;
|
input:not([type="range"]),
|
||||||
}
|
label,
|
||||||
|
select,
|
||||||
a,
|
summary,
|
||||||
area,
|
textarea {
|
||||||
button,
|
touch-action: manipulation;
|
||||||
[role="button"],
|
}
|
||||||
input:not([type="range"]),
|
|
||||||
label,
|
table {
|
||||||
select,
|
border-collapse: collapse;
|
||||||
summary,
|
}
|
||||||
textarea {
|
|
||||||
touch-action: manipulation;
|
caption {
|
||||||
}
|
caption-side: bottom;
|
||||||
|
|
||||||
table {
|
padding-top: 0.75rem;
|
||||||
border-collapse: collapse;
|
padding-bottom: 0.75rem;
|
||||||
}
|
|
||||||
|
color: #868e96;
|
||||||
caption {
|
text-align: left;
|
||||||
caption-side: bottom;
|
}
|
||||||
|
|
||||||
padding-top: 0.75rem;
|
th {
|
||||||
padding-bottom: 0.75rem;
|
text-align: inherit;
|
||||||
|
}
|
||||||
color: #868e96;
|
|
||||||
text-align: left;
|
label {
|
||||||
}
|
display: inline-block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
th {
|
}
|
||||||
text-align: inherit;
|
|
||||||
}
|
button {
|
||||||
|
border-radius: 0;
|
||||||
label {
|
-webkit-appearance: button;
|
||||||
display: inline-block;
|
}
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
button:focus {
|
||||||
|
outline: 1px dotted;
|
||||||
button {
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
border-radius: 0;
|
}
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
input,
|
||||||
|
button,
|
||||||
button:focus {
|
select,
|
||||||
outline: 1px dotted;
|
optgroup,
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
textarea {
|
||||||
}
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
input,
|
font-size: inherit;
|
||||||
button,
|
line-height: inherit;
|
||||||
select,
|
}
|
||||||
optgroup,
|
|
||||||
textarea {
|
button,
|
||||||
margin: 0;
|
input {
|
||||||
font-family: inherit;
|
overflow: visible;
|
||||||
font-size: inherit;
|
}
|
||||||
line-height: inherit;
|
|
||||||
}
|
button,
|
||||||
|
select {
|
||||||
button,
|
text-transform: none;
|
||||||
input {
|
}
|
||||||
overflow: visible;
|
|
||||||
}
|
button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
button,
|
border-style: none;
|
||||||
select {
|
}
|
||||||
text-transform: none;
|
|
||||||
}
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
button::-moz-focus-inner {
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-style: none;
|
}
|
||||||
}
|
|
||||||
|
input[type="date"],
|
||||||
input[type="radio"],
|
input[type="time"],
|
||||||
input[type="checkbox"] {
|
input[type="datetime-local"],
|
||||||
box-sizing: border-box;
|
input[type="month"] {
|
||||||
padding: 0;
|
-webkit-appearance: listbox;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="date"],
|
textarea {
|
||||||
input[type="time"],
|
resize: vertical;
|
||||||
input[type="datetime-local"],
|
overflow: auto;
|
||||||
input[type="month"] {
|
}
|
||||||
-webkit-appearance: listbox;
|
|
||||||
}
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
textarea {
|
margin: 0;
|
||||||
resize: vertical;
|
padding: 0;
|
||||||
overflow: auto;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
legend {
|
||||||
min-width: 0;
|
display: block;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
width: 100%;
|
||||||
border: 0;
|
max-width: 100%;
|
||||||
}
|
margin-bottom: 0.5rem;
|
||||||
|
padding: 0;
|
||||||
legend {
|
|
||||||
display: block;
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
width: 100%;
|
color: inherit;
|
||||||
max-width: 100%;
|
white-space: normal;
|
||||||
margin-bottom: 0.5rem;
|
}
|
||||||
padding: 0;
|
|
||||||
|
progress {
|
||||||
font-size: 1.5rem;
|
vertical-align: baseline;
|
||||||
line-height: inherit;
|
}
|
||||||
color: inherit;
|
|
||||||
white-space: normal;
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
}
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
progress {
|
}
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
[type="search"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
outline-offset: -2px;
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
}
|
||||||
height: auto;
|
|
||||||
}
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
[type="search"] {
|
-webkit-appearance: none;
|
||||||
-webkit-appearance: none;
|
}
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
[type="search"]::-webkit-search-cancel-button,
|
-webkit-appearance: button;
|
||||||
[type="search"]::-webkit-search-decoration {
|
}
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
output {
|
||||||
|
display: inline-block;
|
||||||
::-webkit-file-upload-button {
|
}
|
||||||
font: inherit;
|
|
||||||
-webkit-appearance: button;
|
summary {
|
||||||
}
|
display: list-item;
|
||||||
|
}
|
||||||
output {
|
|
||||||
display: inline-block;
|
template {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
summary {
|
|
||||||
display: list-item;
|
[hidden] {
|
||||||
}
|
display: none !important;
|
||||||
|
}
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user