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