344 lines
15 KiB
SCSS
344 lines
15 KiB
SCSS
@use "sass:color";
|
|
|
|
@function toRGB($color) {
|
|
@return color.channel($color, "red") + ", " + color.channel($color, "green") + ", " + color.channel($color, "blue");
|
|
}
|
|
|
|
@function blend-normal($foreground, $background) {
|
|
$opacity: color.opacity($foreground);
|
|
$background-opacity: color.opacity($background);
|
|
|
|
// calculate opacity
|
|
/* stylelint-disable @stylistic/max-line-length */
|
|
$bm-red: color.channel($foreground, "red") * $opacity + color.channel($background, "red") * $background-opacity * (1 - $opacity);
|
|
$bm-green: color.channel($foreground, "green") * $opacity + color.channel($background, "green") * $background-opacity * (1 - $opacity);
|
|
$bm-blue: color.channel($foreground, "blue") * $opacity + color.channel($background, "blue") * $background-opacity * (1 - $opacity);
|
|
/* stylelint-enable @stylistic/max-line-length */
|
|
|
|
@return rgb($bm-red, $bm-green, $bm-blue);
|
|
}
|
|
|
|
$color-primary: #3390ec;
|
|
|
|
$color-links: #3390ec;
|
|
|
|
$color-placeholders: #a2acb4;
|
|
|
|
$color-text-green: #4fae4e;
|
|
$color-green: #00c73e;
|
|
$color-light-green: #eeffde;
|
|
|
|
$color-error: #e53935;
|
|
|
|
$color-warning: #fb8c00;
|
|
|
|
$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-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-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, -10%);
|
|
--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-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);
|
|
|
|
--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-yellow: #{$color-yellow};
|
|
|
|
--color-orange: #{$color-orange};
|
|
--color-light-coral: #{$color-light-coral};
|
|
|
|
--color-links: #{$color-links};
|
|
|
|
--color-own-links: #{$color-white};
|
|
|
|
--color-placeholders: #{$color-placeholders};
|
|
|
|
--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-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-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-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-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-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-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-scrollbar: rgba(90, 90, 90, 0.3);
|
|
--color-scrollbar-code: rgba(200, 200, 200, 0.3);
|
|
|
|
--color-telegram-blue: #{$color-primary};
|
|
|
|
--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-stars: #FFAA00;
|
|
--color-heart: #ff3c32;
|
|
|
|
--color-negative-progress: #CE4C47;
|
|
|
|
--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;
|
|
|
|
--symbol-menu-width: 24rem;
|
|
--symbol-menu-height: 22.375rem;
|
|
--symbol-menu-footer-height: 3rem;
|
|
|
|
--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);
|
|
|
|
--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%);
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
|
|
--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-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: 1921px) {
|
|
--messages-container-width: 50vw;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
--right-column-width: 100vw;
|
|
--symbol-menu-width: 100vw;
|
|
--symbol-menu-height: 17.6875rem;
|
|
}
|
|
}
|