TelegramPWA/src/styles/_variables.scss

@use "sass:color";

@function toRGB($color) {
  @return red($color) + ", " + green($color) + ", " + blue($color);
}

@function blend-normal($foreground, $background) {
  $opacity: opacity($foreground);
  $background-opacity: opacity($background);

  // calculate opacity
  $bm-red: color.red($foreground) * $opacity + color.red($background) * $background-opacity * (1 - $opacity);
  $bm-green: color.green($foreground) * $opacity + color.green($background) * $background-opacity * (1 - $opacity);
  $bm-blue: color.blue($foreground) * $opacity + color.blue($background) * $background-opacity * (1 - $opacity);
  @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-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-active: #ededed;
$color-chat-hover: #f4f4f5;
$color-chat-active: #3390ec;
$color-selection: #3993fb;

// https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants
// Colors borrowed from https://github.com/telegramdesktop/tdesktop/blob/dev/Telegram/Resources/day-blue.tdesktop-theme
// historyPeer[1-8]UserpicBg
$color-user-1: #e17076;
$color-user-2: #7bc862;
//$color-user-3: #E5CA77;
$color-user-4: #65aadd;
$color-user-5: #a695e7;
$color-user-6: #ee7aae;
$color-user-7: #6ec9cb;
$color-user-8: #faa774;

$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-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-selected: #f4f4f5;
  --color-background-secondary: #f4f4f5;
  --color-background-secondary-accent: #e4e4e5;
  --color-background-own: #{$color-light-green};
  --color-background-own-selected: color.adjust($color-light-green, -10%);
  --color-text: #{$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-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.25);
  --color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
  --color-green: #{$color-green};
  --color-green-darker: #{color.mix($color-green, $color-black, 84%)};

  --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-links: #{$color-links};

  --color-own-links: #{$color-white};

  --color-placeholders: #{$color-placeholders};

  --color-pinned: #{$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-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-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-active: #{$color-item-active};

  --color-selection-highlight: #{$color-selection};
  --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);

  --color-user-1: #{$color-user-1};
  --color-user-2: #{$color-user-2};
  --color-user-4: #{$color-user-4};
  --color-user-5: #{$color-user-5};
  --color-user-6: #{$color-user-6};
  --color-user-7: #{$color-user-7};
  --color-user-8: #{$color-user-8};

  --color-avatar-story-unread-from: #34c76f;
  --color-avatar-story-unread-to: #3da1fd;

  --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;

  --vh: 1vh;

  --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: 25%;
  --messages-container-width: 45.5rem;
  --right-column-width: 26.5rem;
  --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;

  @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;
  }

  --z-modal-confirm: 10000;
  --z-symbol-menu-modal: 5000;
  --z-lock-screen: 3000;
  --z-ui-loader-mask: 2000;
  --z-notification: 1700;
  --z-confetti: 1600;
  --z-reaction-picker: 1200;
  --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-media-viewer: 1500;
  --z-video-player-controls: 3;
  --z-drop-area: 55;
  --z-animation-fade: 50;
  --z-menu-bubble: 21;
  --z-menu-backdrop: 20;
  --z-message-highlighted: 14;
  --z-message-context-menu: 13;
  --z-scroll-down-button: 12;
  --z-mobile-search: 12;
  --z-left-header: 11;
  --z-middle-header: 11;
  --z-middle-footer: 11;
  --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-forum-panel: 5;
  --z-media-viewer-head: 3;
  --z-symbol-menu-mobile: 2;
  --z-resize-handle: 2;
  --z-below: -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==);

  --drag-target-border: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23DDDFE0' stroke-width='4' stroke-dasharray='9.1%2c 10.5' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e");
  --drag-target-border-hovered: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2363A2E3' stroke-width='4' stroke-dasharray='9.1%2c 10.5' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e");

  --layer-blackout-opacity: 0.3;

  --layer-transition: 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;

  body.is-ios {
    --layer-transition: 450ms cubic-bezier(0.33, 1, 0.68, 1);
    --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  body.is-android {
    --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
    --slide-transition: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  }
}