feat: 1-to-1 message render + web data-lake backend
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
html.theme-dark {
|
||||
--color-primary: #8774e1;
|
||||
--color-primary-opacity: #8378db1e;
|
||||
--color-primary-opacity-hover: #8378db40;
|
||||
--color-primary-tint: #8774e11a;
|
||||
--color-primary-shade: #7b71c6;
|
||||
--color-background: #212121;
|
||||
--color-background-compact-menu: #212121dd;
|
||||
--color-web-app-browser: #0303038f;
|
||||
--color-background-compact-menu-reactions: #212121dd;
|
||||
--color-background-compact-menu-hover: #00000066;
|
||||
--color-background-secondary: #0f0f0f;
|
||||
--color-background-secondary-accent: #191919;
|
||||
--color-background-sidebar: #0f0f0f;
|
||||
--color-background-own: #766ac8;
|
||||
--color-background-own-apple: #766ac8;
|
||||
--color-background-selected: #2c2c2c;
|
||||
--color-background-own-selected: #6549d4;
|
||||
--color-chat-hover: #2c2c2c;
|
||||
--color-chat-active: #766ac8;
|
||||
--color-chat-active-greyed: #9288d3;
|
||||
--color-item-hover: #2c2c2c;
|
||||
--color-item-active: #292929;
|
||||
--color-text: #ffffff;
|
||||
--color-text-secondary: #aaaaaa;
|
||||
--color-icon-secondary: #aaaaaa;
|
||||
--color-text-secondary-apple: #aaaaaa;
|
||||
--color-borders: #303030;
|
||||
--color-borders-input: #5b5b5a;
|
||||
--color-dividers: #3b3b3d;
|
||||
--color-dividers-android: #0f0f0f;
|
||||
--color-links: #8774e1;
|
||||
--color-gray: #717579;
|
||||
--color-list-icon: #a2a2a2;
|
||||
--color-default-shadow: #1010109c;
|
||||
--color-light-shadow: #00000040;
|
||||
--color-active: #8774e1;
|
||||
--color-active-darker: #7b71c6;
|
||||
--color-green: #00c73e;
|
||||
--color-green-darker: #00a734;
|
||||
--color-success: #00c73e;
|
||||
--color-text-meta-colored: #8378db;
|
||||
--color-reply-hover: #272727;
|
||||
--color-reply-active: #2e2f2f;
|
||||
--color-reply-own-hover: #8775da;
|
||||
--color-reply-own-hover-apple: #8775da;
|
||||
--color-reply-own-active: #917dea;
|
||||
--color-reply-own-active-apple: #917dea;
|
||||
--color-accent-own: #ffffff;
|
||||
--color-message-meta-own: #ffffff88;
|
||||
--color-own-links: #ffffff;
|
||||
--color-code: #8774e1;
|
||||
--color-code-own: #ffffff;
|
||||
--color-code-bg: #00000080;
|
||||
--color-code-own-bg: #00000050;
|
||||
--color-composer-button: #aaaaaacc;
|
||||
--color-message-reaction: #2b2a35;
|
||||
--color-message-reaction-hover: #343147;
|
||||
--color-message-reaction-own: #675caf;
|
||||
--color-message-reaction-hover-own: #5b529b;
|
||||
--color-message-reaction-chosen-hover: #7864dd;
|
||||
--color-message-reaction-chosen-hover-own: #f5f5f5;
|
||||
--color-message-non-contact: #aaaaaa;
|
||||
--color-voice-transcribe-button: #2a2a3c;
|
||||
--color-voice-transcribe-button-own: #8373d3;
|
||||
--color-chat-username: #e9eef4;
|
||||
--color-borders-read-story: #737373;
|
||||
--color-background-menu-separator: #ffffff1a;
|
||||
--color-hover-overlay: #ffffff06;
|
||||
--color-toast-background: #000000cc;
|
||||
--color-deleted-account: #9eaab5;
|
||||
--color-archive: #9eaab5;
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
.max-length-indicator {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
bottom: -0.5625rem;
|
||||
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.125rem;
|
||||
|
||||
label {
|
||||
pointer-events: none;
|
||||
cursor: var(--custom-cursor, text);
|
||||
|
||||
position: absolute;
|
||||
top: 0.6875rem;
|
||||
left: 1rem;
|
||||
transform-origin: left center;
|
||||
|
||||
display: block;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-placeholders);
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--color-background);
|
||||
|
||||
transition: transform 0.15s ease-out, color 0.15s ease-out;
|
||||
}
|
||||
|
||||
&.with-arrow {
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-bottom: 1px var(--color-text-secondary) solid;
|
||||
border-left: 1px var(--color-text-secondary) solid;
|
||||
}
|
||||
}
|
||||
|
||||
&.touched label,
|
||||
&.error label,
|
||||
&.success label,
|
||||
.form-control:focus + label,
|
||||
.form-control.focus + label {
|
||||
transform: scale(0.75) translate(0, -2rem);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
.form-control::placeholder {
|
||||
color: var(--color-placeholders);
|
||||
}
|
||||
|
||||
&.touched label {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&.error label {
|
||||
color: var(--color-error) !important;
|
||||
}
|
||||
|
||||
&.success label {
|
||||
color: var(--color-text-green) !important;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label {
|
||||
right: 0.75rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.with-arrow {
|
||||
&::after {
|
||||
right: auto;
|
||||
left: 2rem;
|
||||
border-right: 1px var(--color-text-secondary) solid;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.touched label,
|
||||
&.error label,
|
||||
&.success label,
|
||||
.form-control:focus + label,
|
||||
.form-control.focus + label {
|
||||
transform: scale(0.75) translate(1.5rem, -2.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
--border-width: 1px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
padding: calc(0.75rem - var(--border-width)) calc(1.1875rem - var(--border-width)) 0.6875rem;
|
||||
border: var(--border-width) solid var(--color-borders-input);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--color-text);
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--color-background);
|
||||
outline: none;
|
||||
|
||||
transition: border-color 0.15s ease;
|
||||
|
||||
// Hide hint for Safari password strength meter
|
||||
&::-webkit-strong-password-auto-fill-button {
|
||||
position: absolute;
|
||||
|
||||
overflow: hidden !important;
|
||||
|
||||
width: 0 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 0 !important;
|
||||
|
||||
opacity: 0;
|
||||
clip-path: inset(50%);
|
||||
}
|
||||
|
||||
&::-ms-clear,
|
||||
&::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[dir] {
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
|
||||
& + label {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--color-primary);
|
||||
caret-color: var(--color-primary);
|
||||
|
||||
& + label {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.error & {
|
||||
border-color: var(--color-error);
|
||||
box-shadow: inset 0 0 0 1px var(--color-error);
|
||||
caret-color: var(--color-error);
|
||||
}
|
||||
|
||||
.success & {
|
||||
border-color: var(--color-text-green);
|
||||
box-shadow: inset 0 0 0 1px var(--color-text-green);
|
||||
caret-color: var(--color-text-green);
|
||||
}
|
||||
|
||||
// Disable yellow highlight on autofill
|
||||
&:autofill,
|
||||
&:-webkit-autofill-strong-password,
|
||||
&:-webkit-autofill-strong-password-viewable,
|
||||
&:-webkit-autofill-and-obscured {
|
||||
box-shadow: inset 0 0 0 10rem var(--color-background);
|
||||
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
option {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: none;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding-top: calc(0.8125rem - var(--border-width));
|
||||
padding-bottom: calc(1rem - var(--border-width));
|
||||
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
.input-group.password-input {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
cursor: var(--custom-cursor, pointer);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
opacity: 0.7;
|
||||
outline: none !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
.form-control {
|
||||
padding-right: calc(0.9rem - var(--border-width));
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
@use "variables";
|
||||
@use "spacing";
|
||||
@use "forms";
|
||||
@use "dark-theme";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-family: "icons" !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
a:focus,
|
||||
[tabindex]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom-scroll {
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: thin;
|
||||
|
||||
transition: scrollbar-color 0.3s ease;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.375rem;
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
scrollbar-color: var(--color-scrollbar) transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-skeleton-background) 25%,
|
||||
var(--color-skeleton-foreground) 37%,
|
||||
var(--color-skeleton-background) 63%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: skeleton-shimmer 1.4s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
html.theme-transition,
|
||||
html.theme-transition * {
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease !important;
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ripple-container {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ripple-wave {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: scale(0);
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
background-color: var(--ripple-color, rgba(0, 0, 0, 0.08));
|
||||
animation: ripple-animation 700ms;
|
||||
}
|
||||
|
||||
.bg-menu-content {
|
||||
z-index: var(--z-portal-menu);
|
||||
min-width: 12rem;
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.75rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background-compact-menu);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0.25rem 1rem var(--color-default-shadow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html.theme-dark .bg-menu-content {
|
||||
border: 1px solid var(--color-borders);
|
||||
}
|
||||
|
||||
.bg-menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text);
|
||||
|
||||
outline: none;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&[data-highlighted],
|
||||
&:hover {
|
||||
background-color: var(--color-background-compact-menu-hover);
|
||||
}
|
||||
|
||||
&[data-selected] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-menu-separator {
|
||||
height: 1px;
|
||||
margin: 0.375rem 0;
|
||||
background-color: var(--color-background-menu-separator);
|
||||
}
|
||||
|
||||
$peer-colors: #e17076, #eda86c, #a695e7, #7bc862, #6ec9cb, #65aadd, #ee7aae;
|
||||
|
||||
@for $i from 0 through 6 {
|
||||
.peer-color-#{$i} {
|
||||
color: nth($peer-colors, $i + 1);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,271 @@
|
||||
// @optimization
|
||||
@mixin while-transition() {
|
||||
.Transition_slide:not(.Transition_slide-active) & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin adapt-padding-to-scrollbar($padding, $forceSpace: 0px) {
|
||||
padding-inline-end: calc(max($padding - var(--scrollbar-width), $forceSpace));
|
||||
}
|
||||
|
||||
@mixin adapt-margin-to-scrollbar($margin, $forceSpace: 0px) {
|
||||
margin-inline-end: calc(max($margin - var(--scrollbar-width), $forceSpace));
|
||||
}
|
||||
|
||||
@mixin filter-outline($width: 0.125rem, $color) {
|
||||
filter:
|
||||
drop-shadow($width $width 0 $color)
|
||||
drop-shadow((-$width) $width 0 $color)
|
||||
drop-shadow($width (-$width) 0 $color)
|
||||
drop-shadow((-$width) (-$width) 0 $color);
|
||||
}
|
||||
|
||||
@mixin gradient-border-top($width, $cutout: 0px) {
|
||||
mask-image: linear-gradient(transparent $cutout, black $width);
|
||||
}
|
||||
|
||||
@mixin gradient-border-bottom($height, $cutout: 0px) {
|
||||
mask-image: linear-gradient(to top, transparent $cutout, black $height);
|
||||
}
|
||||
|
||||
@mixin gradient-border-horizontal($borderStart, $borderEnd) {
|
||||
mask-image: linear-gradient(to right, transparent, black $borderStart, black calc(100% - $borderEnd), transparent);
|
||||
}
|
||||
|
||||
@mixin gradient-border-left($indent, $cutout: 0px) {
|
||||
mask-image: linear-gradient(to right, transparent $cutout, black $indent);
|
||||
}
|
||||
|
||||
@mixin gradient-border-right($indent, $cutout: 0px) {
|
||||
mask-image: linear-gradient(to left, transparent $cutout, black $indent);
|
||||
}
|
||||
|
||||
@mixin gradient-border-top-bottom($top, $bottom) {
|
||||
mask-image: linear-gradient(transparent 0%, black $top, black calc(100% - $bottom), transparent 100%);
|
||||
}
|
||||
|
||||
@mixin peer-gradient($property, $colorCount) {
|
||||
--_accent-color-rgb: var(--color-accent-own-rgb);
|
||||
|
||||
html.theme-dark {
|
||||
--_accent-color-rgb: var(--color-text-rgb);
|
||||
}
|
||||
|
||||
@if $colorCount == 2 {
|
||||
#{$property}:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgb(var(--_accent-color-rgb), 100%),
|
||||
rgb(var(--_accent-color-rgb), 100%) 5px,
|
||||
rgb(var(--_accent-color-rgb), 35%) 5px,
|
||||
rgb(var(--_accent-color-rgb), 35%) 10px
|
||||
);
|
||||
}
|
||||
|
||||
@else {
|
||||
#{$property}:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgb(var(--_accent-color-rgb), 100%),
|
||||
rgb(var(--_accent-color-rgb), 100%) 5px,
|
||||
rgb(var(--_accent-color-rgb), 60%) 5px,
|
||||
rgb(var(--_accent-color-rgb), 60%) 10px,
|
||||
rgb(var(--_accent-color-rgb), 20%) 10px,
|
||||
rgb(var(--_accent-color-rgb), 20%) 15px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin reset-range() {
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
cursor: var(--custom-cursor, pointer);
|
||||
}
|
||||
|
||||
&::-moz-range-track, &::-moz-range-progress {
|
||||
cursor: var(--custom-cursor, pointer);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin middle-header-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(-100%);
|
||||
|
||||
width: 100%;
|
||||
height: 2.875rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-right: max(0.5rem, env(safe-area-inset-right));
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: max(0.75rem, env(safe-area-inset-left));
|
||||
|
||||
background-color: var(--color-background);
|
||||
|
||||
transition: transform var(--slide-transition);
|
||||
|
||||
&::before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: -0.1875rem;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
height: 0.125rem;
|
||||
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
}
|
||||
|
||||
// Some panels might unmount without animation, so we provide same background above panel to make it less noticeable
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
height: inherit;
|
||||
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chat-list-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(calc(-100% - 0.5rem)); // Include top margin to hide fully
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5625rem;
|
||||
border-radius: var(--border-radius-island);
|
||||
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
transition: transform var(--chat-transform-transition);
|
||||
|
||||
// Some panels might unmount without animation, so we provide same background above panel to make it less noticeable
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
height: inherit;
|
||||
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) & {
|
||||
border: 1px solid var(--color-borders);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin side-panel-section {
|
||||
border-bottom: 0.625rem solid var(--color-background-secondary);
|
||||
background-color: var(--color-background);
|
||||
box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin on-active-vt($type) {
|
||||
:global {
|
||||
.active-vt-#{$type} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin with-vt-type($type) {
|
||||
:global(.active-vt-#{$type}) & {
|
||||
view-transition-name: var(--_vtn);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chat-pattern-styles($path) {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
opacity: 0.4;
|
||||
background-image: url($path);
|
||||
background-repeat: repeat;
|
||||
background-position: center;
|
||||
background-size: 430px auto;
|
||||
mix-blend-mode: soft-light;
|
||||
|
||||
:global(html.theme-dark) & {
|
||||
opacity: 0.25;
|
||||
background: linear-gradient(145deg, #4f5bd5 0%, #962fbf 35%, #dd6cb9 65%, #fec496 100%) !important;
|
||||
background-image: none;
|
||||
mix-blend-mode: unset;
|
||||
|
||||
mask-image: url($path);
|
||||
mask-repeat: repeat;
|
||||
mask-position: center;
|
||||
mask-size: 430px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chat-pattern-background($path) {
|
||||
&::before {
|
||||
@include chat-pattern-styles($path);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin action-message-bg($isModule: false, $noBackground: false) {
|
||||
@if not $noBackground {
|
||||
background-color: var(--action-message-bg);
|
||||
}
|
||||
|
||||
@if $isModule {
|
||||
:global(body.with-message-blur) & {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
body.with-message-blur & {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,334 @@
|
||||
/* stylelint-disable selector-max-type */
|
||||
/* stylelint-disable plugin/selector-tag-no-without-class */
|
||||
@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 {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
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] {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
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 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
color: #868e96;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: button;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@use "sass:map";
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacers: () !default;
|
||||
$spacers: map.merge(
|
||||
(
|
||||
0: 0,
|
||||
1: (
|
||||
$spacer * 0.25,
|
||||
),
|
||||
2: (
|
||||
$spacer * 0.5,
|
||||
),
|
||||
3: $spacer,
|
||||
4: (
|
||||
$spacer * 1.5,
|
||||
),
|
||||
5: (
|
||||
$spacer * 2,
|
||||
),
|
||||
6: (
|
||||
$spacer * 3,
|
||||
),
|
||||
),
|
||||
$spacers
|
||||
);
|
||||
|
||||
// Margin and Padding
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
.#{$abbrev}-#{$size} {
|
||||
#{$prop}: $length !important;
|
||||
}
|
||||
.#{$abbrev}t-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
}
|
||||
.#{$abbrev}r-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
}
|
||||
.#{$abbrev}b-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
.#{$abbrev}l-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@forward "mixins";
|
||||
@@ -0,0 +1,359 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
@layer variables {
|
||||
$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, $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-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.2);
|
||||
--color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
|
||||
--color-primary-tint: rgba(var(--color-primary), 0.1);
|
||||
--color-active: #{$color-green};
|
||||
--color-active-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-hover);
|
||||
|
||||
--color-green: #{$color-green};
|
||||
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
|
||||
--color-green-rgb: #{toRGB($color-green)};
|
||||
|
||||
--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-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;
|
||||
|
||||
--vh: 1vh;
|
||||
|
||||
--border-radius-button: 1rem;
|
||||
--border-radius-button-tiny: 0.875rem;
|
||||
--border-radius-modal: 2rem;
|
||||
--border-radius-toast: 1rem;
|
||||
--border-radius-island: 1.5rem;
|
||||
--border-radius-default: 1rem;
|
||||
--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;
|
||||
|
||||
--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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user