ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dev] More improvements for linting (#5951)

Browse Source
This commit is contained in:
zubiden 2025-06-04 20:40:56 +02:00 committed by Alexander Zinchuk
parent fa791bbe24
commit b4772cc542
367 changed files with 8209 additions and 6028 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.fantasticonrc.js → .fantasticonrc.cjs
View File

@ -1,4 +1,4 @@
export default { module.exports = {
inputDir: './src/assets/font-icons', inputDir: './src/assets/font-icons',
outputDir: './src/styles', outputDir: './src/styles',
name: 'icons', name: 'icons',

3
.stylelintrc.json
View File

@ -1,7 +1,8 @@
{ {
"extends": [ "extends": [
"stylelint-config-recommended-scss", "stylelint-config-recommended-scss",
"@stylistic/stylelint-config" "@stylistic/stylelint-config",
"stylelint-config-clean-order/error"
], ],
"ignoreFiles": [ "ignoreFiles": [
"dist/*.css", "dist/*.css",

38
package-lock.json generated
View File

@ -96,6 +96,7 @@
"script-loader": "^0.7.2", "script-loader": "^0.7.2",
"serve": "^14.2.4", "serve": "^14.2.4",
"stylelint": "^16.19.1", "stylelint": "^16.19.1",
"stylelint-config-clean-order": "^7.0.0",
"stylelint-config-recommended-scss": "^15.0.0", "stylelint-config-recommended-scss": "^15.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.8.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
"stylelint-group-selectors": "^1.0.10", "stylelint-group-selectors": "^1.0.10",
@ -18381,6 +18382,16 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/postcss-sorting": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
"integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"postcss": "^8.4.20"
}
},
"node_modules/postcss-value-parser": { "node_modules/postcss-value-parser": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -20891,6 +20902,19 @@
"node": ">=18.12.0" "node": ">=18.12.0"
} }
}, },
"node_modules/stylelint-config-clean-order": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-clean-order/-/stylelint-config-clean-order-7.0.0.tgz",
"integrity": "sha512-R28w1xNliIbem3o+VIrNjAU8cMgxrGlDoXVqWW7lJ1OvSDsmNGj5aKSW6Xm7i5PK4E99T3Hs19BJFni5IbE56g==",
"dev": true,
"license": "MIT",
"dependencies": {
"stylelint-order": "^6.0.4"
},
"peerDependencies": {
"stylelint": ">=14"
}
},
"node_modules/stylelint-config-recommended": { "node_modules/stylelint-config-recommended": {
"version": "16.0.0", "version": "16.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz",
@ -20978,6 +21002,20 @@
"stylelint": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" "stylelint": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
} }
}, },
"node_modules/stylelint-order": {
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz",
"integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss": "^8.4.32",
"postcss-sorting": "^8.0.2"
},
"peerDependencies": {
"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
}
},
"node_modules/stylelint-scss": { "node_modules/stylelint-scss": {
"version": "6.12.0", "version": "6.12.0",
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.12.0.tgz", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.12.0.tgz",

7
package.json
View File

@ -19,13 +19,13 @@
"electron:package:staging": "ENV=staging npm run electron:package -- -p never", "electron:package:staging": "ENV=staging npm run electron:package -- -p never",
"electron:release:production": "ENV=production npm run electron:package -- -p always", "electron:release:production": "ENV=production npm run electron:package -- -p always",
"telegraph:update_changelog": "node ./dev/telegraphChangelog.js", "telegraph:update_changelog": "node ./dev/telegraphChangelog.js",
"check": "tsc && stylelint \"**/*.{css,scss}\" && eslint .", "check": "tsc && stylelint \"**/*.{css,scss}\" && eslint",
"check:fix": "npm run check -- --fix", "check:fix": "stylelint \"**/*.{css,scss}\" --fix && eslint --fix",
"tl:rehash": "node ./dev/tlHash.js", "tl:rehash": "node ./dev/tlHash.js",
"gramjs:tl": "tsx ./src/lib/gramjs/tl/generateModules.ts", "gramjs:tl": "tsx ./src/lib/gramjs/tl/generateModules.ts",
"lang:ts": "tsx ./dev/generateLangTypes.js", "lang:ts": "tsx ./dev/generateLangTypes.js",
"lang:initial": "tsx ./dev/generateInitialLangFallback.js", "lang:initial": "tsx ./dev/generateInitialLangFallback.js",
"icons:build": "fantasticon", "icons:build": "fantasticon -c .fantasticonrc.cjs",
"test": "cross-env APP_ENV=test jest --verbose --silent --forceExit", "test": "cross-env APP_ENV=test jest --verbose --silent --forceExit",
"test:playwright": "playwright test", "test:playwright": "playwright test",
"test:record": "playwright codegen localhost:1235", "test:record": "playwright codegen localhost:1235",
@ -118,6 +118,7 @@
"script-loader": "^0.7.2", "script-loader": "^0.7.2",
"serve": "^14.2.4", "serve": "^14.2.4",
"stylelint": "^16.19.1", "stylelint": "^16.19.1",
"stylelint-config-clean-order": "^7.0.0",
"stylelint-config-recommended-scss": "^15.0.0", "stylelint-config-recommended-scss": "^15.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.8.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
"stylelint-group-selectors": "^1.0.10", "stylelint-group-selectors": "^1.0.10",

14
public/get/index.css
View File

@ -7,23 +7,22 @@ body {
margin: 0; margin: 0;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #222222; color: #222222;
background-color: white; background-color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.container { .container {
min-width: 200px; min-width: 200px;
max-width: 330px; max-width: 330px;
padding: 40px 40px 16px 40px; padding: 40px 40px 16px 40px;
border-radius: 10px;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
} }
.logo-container { .logo-container {
@ -55,21 +54,18 @@ body {
.container h1 { .container h1 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 24px; font-size: 24px;
} }
.select-model { .select-model {
margin-top: 36px; margin-top: 36px;
margin-bottom: 16px; margin-bottom: 16px;
color: #444444; color: #444444;
} }
.info { .info {
margin-top: 28px; margin-top: 28px;
margin-bottom: 36px; margin-bottom: 36px;
line-height: 1.25rem; line-height: 1.25rem;
color: #444444; color: #444444;
} }
@ -100,13 +96,13 @@ body {
margin: 10px; margin: 10px;
padding: 8px 20px; padding: 8px 20px;
border-radius: 5px;
font-size: 16px; font-size: 16px;
color: #FFF; color: #FFF;
text-decoration: none; text-decoration: none;
background-color: #007BFF; background-color: #007BFF;
border-radius: 5px;
transition: background-color 150ms; transition: background-color 150ms;
} }
@ -117,7 +113,6 @@ body {
.download-btn.single { .download-btn.single {
display: block; display: block;
margin: 32px 0; margin: 32px 0;
} }
@ -128,7 +123,6 @@ body {
.footer a { .footer a {
display: inline-block; display: inline-block;
color: #A9A9A9; color: #A9A9A9;
} }

26
src/components/App.module.scss
View File

@ -2,29 +2,23 @@
height: 100%; height: 100%;
background-color: var(--theme-background-color); background-color: var(--theme-background-color);
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
@media (max-width: 600px) {
height: calc(var(--vh, 1vh) * 100);
}
:global(html.theme-light) & {
background-image: url('../assets/chat-bg-br.png');
}
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
bottom: 0;
right: 0; right: 0;
bottom: 0;
left: 0;
background-image: url('../assets/chat-bg-pattern-light.png'); background-image: url('../assets/chat-bg-pattern-light.png');
background-repeat: repeat;
background-position: top right; background-position: top right;
background-size: 510px auto; background-size: 510px auto;
background-repeat: repeat;
mix-blend-mode: overlay; mix-blend-mode: overlay;
:global(html.theme-dark) & { :global(html.theme-dark) & {
@ -37,4 +31,12 @@
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
} }
} }
:global(html.theme-light) & {
background-image: url('../assets/chat-bg-br.png');
}
@media (max-width: 600px) {
height: calc(var(--vh, 1vh) * 100);
}
} }

96
src/components/auth/Auth.scss
View File

@ -7,36 +7,30 @@
max-width: 25.5rem; max-width: 25.5rem;
margin: 0 auto; margin: 0 auto;
padding: 6rem 1rem 1rem; padding: 6rem 1rem 1rem;
text-align: center; text-align: center;
@media (min-width: 600px) and (min-height: 450px) {
padding: 6.8125rem 1.5rem 1.5rem;
&.qr {
padding-top: 4rem;
}
}
#logo, #logo,
.AvatarEditable label { .AvatarEditable label {
display: block; display: block;
margin-left: auto;
margin-right: auto;
width: 7.5rem; width: 7.5rem;
height: 7.5rem; height: 7.5rem;
margin-right: auto;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
margin-left: auto;
@media (min-width: 600px) and (min-height: 450px) {
width: 10rem;
height: 10rem;
margin-bottom: 2.5rem;
}
body.is-electron & { body.is-electron & {
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
} }
@media (min-width: 600px) and (min-height: 450px) {
width: 10rem;
height: 10rem;
margin-bottom: 2.5rem;
}
} }
#logo { #logo {
@ -55,14 +49,14 @@
} }
.note { .note {
margin-bottom: 2.5rem;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.35; line-height: 1.35;
margin-bottom: 2.5rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@media (min-width: 600px) { @media (min-width: 600px) {
font-size: 1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
font-size: 1rem;
} }
} }
@ -73,6 +67,14 @@
min-height: 0; min-height: 0;
} }
} }
@media (min-width: 600px) and (min-height: 450px) {
padding: 6.8125rem 1.5rem 1.5rem;
&.qr {
padding-top: 4rem;
}
}
} }
#auth-registration-form, #auth-registration-form,
@ -80,8 +82,8 @@
#auth-code-form, #auth-code-form,
#auth-password-form, #auth-password-form,
#auth-qr-form { #auth-qr-form {
height: 100%;
overflow-y: auto; overflow-y: auto;
height: 100%;
body.is-electron.is-macos & { body.is-electron.is-macos & {
-webkit-app-region: drag; -webkit-app-region: drag;
@ -116,16 +118,20 @@
} }
.auth-number-edit { .auth-number-edit {
width: 2.5rem; cursor: var(--custom-cursor, pointer);
height: 2.5rem;
padding: 0.5rem;
font-size: 1.5rem;
color: var(--color-text-secondary);
opacity: 0.75;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: var(--custom-cursor, pointer);
width: 2.5rem;
height: 2.5rem;
padding: 0.5rem;
font-size: 1.5rem;
color: var(--color-text-secondary);
opacity: 0.75;
&:hover, &:hover,
&:focus { &:focus {
@ -135,19 +141,21 @@
#auth-qr-form { #auth-qr-form {
.qr-outer { .qr-outer {
height: 280px;
position: relative; position: relative;
height: 280px;
} }
.qr-inner, .qr-inner,
.qr-loading { .qr-loading {
height: 280px;
width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%;
height: 280px;
} }
.qr-inner { .qr-inner {
@ -167,18 +175,20 @@
.qr-plane { .qr-plane {
position: absolute; position: absolute;
z-index: 1;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-telegram-blue); background-color: var(--color-telegram-blue);
} }
.qr-container { .qr-container {
background-color: white;
border-radius: 1.5rem;
overflow: hidden; overflow: hidden;
border-radius: 1.5rem;
background-color: white;
} }
h1 { h1 {
@ -187,29 +197,33 @@
} }
ol { ol {
list-style: none;
counter-reset: item; counter-reset: item;
padding: 0 1.75rem; padding: 0 1.75rem;
list-style: none;
li { li {
counter-increment: item; counter-increment: item;
text-align: left;
margin: 0.75rem 0;
display: flex; display: flex;
margin: 0.75rem 0;
text-align: left;
&::before { &::before {
content: counter(item); content: counter(item);
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
min-width: 1.375rem; min-width: 1.375rem;
height: 1.375rem; height: 1.375rem;
padding: 0;
margin: 0 0.75rem 0 0; margin: 0 0.75rem 0 0;
background: var(--color-primary); padding: 0;
border-radius: 50%; border-radius: 50%;
font-size: smaller; font-size: smaller;
color: white; color: white;
background: var(--color-primary);
} }
} }
} }
@ -221,8 +235,8 @@
.test-server-badge { .test-server-badge {
position: fixed; position: fixed;
bottom: 0.5rem;
right: 0.5rem; right: 0.5rem;
bottom: 0.5rem;
} }
.auth-close { .auth-close {
@ -233,12 +247,12 @@
@keyframes qr-show { @keyframes qr-show {
0% { 0% {
opacity: 0;
transform: scale(0.7); transform: scale(0.7);
opacity: 0;
} }
50% { 50% {
opacity: 1;
transform: scale(1.1); transform: scale(1.1);
opacity: 1;
} }
100% { 100% {
transform: scale(1); transform: scale(1);

35
src/components/auth/CountryCodeInput.scss
View File

@ -1,15 +1,15 @@
.CountryCodeInput { .CountryCodeInput {
.input-group { .input-group {
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
z-index: var(--z-country-code-input-group); z-index: var(--z-country-code-input-group);
.Spinner { .Spinner {
--spinner-size: 1.5rem;
position: absolute; position: absolute;
top: 0.6875rem; top: 0.6875rem;
right: 0.75rem; right: 0.75rem;
opacity: 0.5; opacity: 0.5;
--spinner-size: 1.5rem;
} }
// Prevent loading additional 10 kB of icomoon font on initial load. // Prevent loading additional 10 kB of icomoon font on initial load.
@ -17,30 +17,33 @@
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
transform: scaleY(1) rotate(45deg);
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
border: 2px solid var(--color-text-secondary); border: 2px solid var(--color-text-secondary);
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
transform: scaleY(1) rotate(45deg);
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease; transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
&.open { &.open {
border-color: var(--color-primary);
transform: scaleY(-1) rotate(45deg);
top: 1.3125rem; top: 1.3125rem;
transform: scaleY(-1) rotate(45deg);
border-color: var(--color-primary);
} }
} }
} }
.bubble { .bubble {
width: 100%;
max-height: 23.5rem;
overflow-y: auto;
transform-origin: top center !important; transform-origin: top center !important;
transform: scale(0.95); transform: scale(0.95);
overflow-y: auto;
width: 100%;
max-height: 23.5rem;
&.open { &.open {
transform: scaleY(1); transform: scaleY(1);
} }
@ -63,29 +66,33 @@
} }
.country-flag { .country-flag {
font-size: 2rem;
margin-right: 1rem; margin-right: 1rem;
font-size: 2rem;
.emoji { .emoji {
display: inline-block;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
display: inline-block;
vertical-align: 4px;
margin: -0.5rem 0.125rem; margin: -0.5rem 0.125rem;
vertical-align: 4px;
} }
} }
.country-name { .country-name {
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
margin-right: 1rem; margin-right: 1rem;
text-align: left; text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
} }
.country-code { .country-code {
margin-left: auto; margin-left: auto;
opacity: 0.5;
padding-right: 0.25rem; padding-right: 0.25rem;
opacity: 0.5;
} }
} }

19
src/components/calls/ActiveCallHeader.scss
View File

@ -1,20 +1,23 @@
.ActiveCallHeader { .ActiveCallHeader {
position: absolute; position: absolute;
z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
height: 2rem; transform: translateY(-100%);
width: 100%;
z-index: 1;
display: flex; display: flex;
justify-content: center;
font-weight: var(--font-weight-medium);
font-size: 0.875rem;
color: #fff;
align-items: center; align-items: center;
justify-content: center;
width: 100%;
height: 2rem;
padding: 0 1rem; padding: 0 1rem;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
color: #fff;
background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172)); background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172));
transform: translateY(-100%);
&.open { &.open {
transform: translateY(0); transform: translateY(0);

111
src/components/calls/group/GroupCall.module.scss
View File

@ -25,38 +25,39 @@
:global { :global {
.modal-dialog { .modal-dialog {
overflow: hidden;
max-width: var(--default-width); max-width: var(--default-width);
max-height: min(var(--max-height), 100vh);
height: 100%; height: 100%;
min-height: min(80vh, var(--max-height)); min-height: min(80vh, var(--max-height));
overflow: hidden; max-height: min(var(--max-height), 100vh);
background: var(--group-call-background-color); background: var(--group-call-background-color);
} }
.modal-content { .modal-content {
min-height: 100%;
display: flex; display: flex;
min-height: 100%;
padding: 0; padding: 0;
} }
} }
} }
.panelWrapper { .panelWrapper {
max-width: var(--default-width);
width: 100%; width: 100%;
max-width: var(--default-width);
} }
.panel { .panel {
background: var(--group-call-panel-color); position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll; overflow-y: scroll;
position: relative; display: flex;
flex-direction: column;
height: 100%;
background: var(--group-call-panel-color);
} }
.panelScrollTrigger { .panelScrollTrigger {
@ -66,23 +67,24 @@
} }
.panelHeader { .panelHeader {
display: flex; user-select: none;
align-items: center;
position: sticky; position: sticky;
z-index: 1;
top: 0; top: 0;
border-bottom: 0.0625rem solid transparent; display: flex;
align-items: center;
padding: 0.375rem 0.875rem; padding: 0.375rem 0.875rem;
border-bottom: 0.0625rem solid transparent;
@include mixins.adapt-padding-to-scrollbar(0.875rem);
user-select: none;
z-index: 1;
background: var(--group-call-panel-color); background: var(--group-call-panel-color);
transition: 0.25s ease-in-out border-bottom-color; transition: 0.25s ease-in-out border-bottom-color;
@include mixins.adapt-padding-to-scrollbar(0.875rem);
&.scrolled { &.scrolled {
border-bottom-color: var(--group-call-panel-header-border-color); border-bottom-color: var(--group-call-panel-header-border-color);
} }
@ -105,21 +107,23 @@
} }
.panelHeaderText { .panelHeaderText {
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.title { .title {
line-height: 1.375rem;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
unicode-bidi: plaintext; unicode-bidi: plaintext;
overflow: hidden;
margin: 0;
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin: 0; line-height: 1.375rem;
text-overflow: ellipsis;
white-space: pre;
} }
.bigger { .bigger {
@ -127,14 +131,16 @@
} }
.subtitle { .subtitle {
overflow: hidden;
display: inline-block;
margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.125rem; line-height: 1.125rem;
margin: 0;
color: var(--color-text-secondary); color: var(--color-text-secondary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; white-space: nowrap;
} }
.participants { .participants {
@ -145,8 +151,8 @@
} }
.participantVideos { .participantVideos {
width: 100%;
position: relative; position: relative;
width: 100%;
} }
.addParticipantButton { .addParticipantButton {
@ -156,7 +162,6 @@
.videos { .videos {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: calc(100% - var(--default-width)); width: calc(100% - var(--default-width));
} }
@ -185,24 +190,28 @@
.actions { .actions {
--actions-max-width: 0px; --actions-max-width: 0px;
position: absolute; position: absolute;
z-index: 2;
bottom: 1.75rem;
left: 50%; left: 50%;
transform: translateX(calc(-50% - var(--actions-max-width) / 2)); transform: translateX(calc(-50% - var(--actions-max-width) / 2));
bottom: 1.75rem;
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
z-index: 2;
} }
.actionButton { .actionButton {
width: 3.375rem !important; width: 3.375rem !important;
height: 3.375rem !important; height: 3.375rem !important;
color: var(--color-text) !important; color: var(--color-text) !important;
background-color: var(--green-button-color) !important; background-color: var(--green-button-color) !important;
transition: 0.15s filter, 0.25s ease-out background-color;
backdrop-filter: blur(25px); backdrop-filter: blur(25px);
transition: 0.15s filter, 0.25s ease-out background-color;
&:global(.disabled) { &:global(.disabled) {
background: var(--disabled-button-color) !important; background: var(--disabled-button-color) !important;
} }
@ -245,10 +254,9 @@
.landscape { .landscape {
.panelWrapper { .panelWrapper {
position: absolute; position: absolute;
right: 0;
top: 0; top: 0;
right: 0;
bottom: 0; bottom: 0;
transform: translateZ(0); transform: translateZ(0);
} }
@ -256,13 +264,16 @@
.actions { .actions {
--actions-max-width: var(--default-width); --actions-max-width: var(--default-width);
bottom: 2.5rem;
padding: 0.75rem;
border-radius: 1.25rem;
opacity: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(50px); backdrop-filter: blur(50px);
border-radius: 1.25rem;
padding: 0.75rem;
bottom: 2.5rem;
transition: 250ms ease-in-out opacity; transition: 250ms ease-in-out opacity;
opacity: 0;
} }
.videos:hover ~ .actions, .mainVideoContainer:hover ~ .actions, .actions:hover { .videos:hover ~ .actions, .mainVideoContainer:hover ~ .actions, .actions:hover {
@ -272,11 +283,12 @@
&.noVideoParticipants { &.noVideoParticipants {
.panelWrapper { .panelWrapper {
max-width: max(50vw, 30rem);
width: 100%;
transform: translateX(-50%);
left: 50%;
right: 0; right: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: max(50vw, 30rem);
} }
:global(.modal-content) { :global(.modal-content) {
@ -287,14 +299,17 @@
.portrait { .portrait {
.panelWrapper::after { .panelWrapper::after {
display: block; pointer-events: none;
content: ''; content: '';
position: fixed; position: fixed;
bottom: 0;
left: 0;
display: block;
width: 100%; width: 100%;
height: 7.5rem; height: 7.5rem;
left: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.65) 48.54%, #212121 100%); background: linear-gradient(180deg, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.65) 48.54%, #212121 100%);
} }

10
src/components/calls/group/GroupCallParticipant.module.scss
View File

@ -2,6 +2,7 @@
:global { :global {
.ListItem-button { .ListItem-button {
--color-chat-hover: rgba(255, 255, 255, 0.04); --color-chat-hover: rgba(255, 255, 255, 0.04);
padding: 0.5rem; padding: 0.5rem;
} }
@ -13,9 +14,10 @@
display: flex !important; display: flex !important;
.fullName { .fullName {
font-weight: var(--font-weight-medium);
font-size: 1rem;
--emoji-size: 1rem; --emoji-size: 1rem;
font-size: 1rem;
font-weight: var(--font-weight-medium);
} }
} }
} }
@ -23,8 +25,8 @@
.subtitle { .subtitle {
display: flex !important; display: flex !important;
align-items: center;
gap: 0.375rem; gap: 0.375rem;
align-items: center;
font-size: 1rem !important; font-size: 1rem !important;
} }
@ -35,8 +37,8 @@
} }
.icon { .icon {
margin-left: auto;
margin-right: 0.25rem; margin-right: 0.25rem;
margin-left: auto;
} }
.subtitleBlue { .subtitleBlue {

2
src/components/calls/group/GroupCallParticipantList.module.scss
View File

@ -1,7 +1,7 @@
.root { .root {
position: absolute; position: absolute;
width: 100%;
top: 0.25rem; top: 0.25rem;
width: 100%;
padding-bottom: 5rem; padding-bottom: 5rem;
} }

71
src/components/calls/group/GroupCallParticipantMenu.scss
View File

@ -11,22 +11,27 @@
z-index: var(--z-modal-menu); z-index: var(--z-modal-menu);
.bubble { .bubble {
backdrop-filter: none !important; overflow: visible;
background: none !important;
border-radius: 0;
padding: 0; padding: 0;
border: none !important; border: none !important;
box-shadow: none !important; border-radius: 0;
overflow: visible;
color: var(--color-text); color: var(--color-text);
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
.group { .group {
box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
overflow: hidden; overflow: hidden;
background: var(--color-background);
border-radius: var(--border-radius-default);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-radius: var(--border-radius-default);
background: var(--color-background);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
} }
} }
@ -37,16 +42,35 @@
} }
.volume-control { .volume-control {
@mixin thumb-styles() {
width: 1.5rem;
height: 3rem;
border: none;
border-radius: var(--border-radius-default);
background: var(--range-color);
box-shadow: -13.5rem 0 0 12.75rem var(--range-color);
transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
}
cursor: var(--custom-cursor, pointer);
position: relative;
overflow: hidden;
height: 3rem; height: 3rem;
.info { .info {
pointer-events: none; pointer-events: none;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 100%;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
.AnimatedSticker { .AnimatedSticker {
@ -70,31 +94,16 @@
--range-color: #CB5757; --range-color: #CB5757;
} }
position: relative;
overflow: hidden;
cursor: var(--custom-cursor, pointer);
@mixin thumb-styles() {
border: none;
height: 3rem;
width: 1.5rem;
background: var(--range-color);
border-radius: var(--border-radius-default);
box-shadow: -13.5rem 0 0 12.75rem var(--range-color);
transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
}
@include mixins.reset-range();
// Apply custom styles // Apply custom styles
input[type="range"] { input[type="range"] {
height: 3rem;
position: absolute; position: absolute;
left: -1.5rem;
top: 0;
width: calc(100% + 1.5rem);
margin: 0;
z-index: 0; z-index: 0;
top: 0;
left: -1.5rem;
width: calc(100% + 1.5rem);
height: 3rem;
margin: 0;
// Note that while we're repeating code here, // Note that while we're repeating code here,
// that's necessary as you can't comma-separate these type of selectors. // that's necessary as you can't comma-separate these type of selectors.
@ -111,5 +120,7 @@
@include thumb-styles(); @include thumb-styles();
} }
} }
@include mixins.reset-range();
} }
} }

84
src/components/calls/group/GroupCallParticipantVideo.module.scss
View File

@ -1,15 +1,16 @@
.wrapper { .wrapper {
position: absolute; position: absolute;
opacity: 1;
transform: translate(var(--x), var(--y)) scale(1); transform: translate(var(--x), var(--y)) scale(1);
width: var(--width); width: var(--width);
height: var(--height); height: var(--height);
opacity: 1;
} }
.hidden { .hidden {
opacity: 0;
transform: translate(var(--x), var(--y)) scale(0.6); transform: translate(var(--x), var(--y)) scale(0.6);
opacity: 0;
} }
.noAnimate { .noAnimate {
@ -17,34 +18,44 @@
} }
.root { .root {
user-select: none;
position: relative; position: relative;
width: 100%;
height: 100%;
display: flex; display: flex;
width: 100%;
height: 100%;
border-radius: 0.625rem; border-radius: 0.625rem;
user-select: none;
&::before { &::before {
content: ''; content: '';
display: block;
position: absolute; position: absolute;
inset: -0.125rem; inset: -0.125rem;
transform: scale(0.96);
display: block;
border-radius: 0.75rem; border-radius: 0.75rem;
background: var(--gradient-speaking); background: var(--gradient-speaking);
transform: scale(0.96);
transition: 0.25s ease-in-out transform; transition: 0.25s ease-in-out transform;
} }
&::after { &::after {
content: ''; content: '';
display: block;
position: absolute; position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.62%, rgba(0, 0, 0, 0.5) 86.46%);
z-index: 2; z-index: 2;
inset: 0;
display: block;
border-radius: 0.625rem; border-radius: 0.625rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.62%, rgba(0, 0, 0, 0.5) 86.46%);
} }
&.speaking::before { &.speaking::before {
@ -57,35 +68,41 @@
} }
.video { .video {
z-index: 2;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block;
object-fit: contain;
border-radius: 0.625rem; border-radius: 0.625rem;
z-index: 2;
object-fit: contain;
} }
.videoFallback { .videoFallback {
composes: video; composes: video;
position: absolute; position: absolute;
height: 100%;
z-index: 1; z-index: 1;
height: 100%;
} }
.thumbnailWrapper { .thumbnailWrapper {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
border-radius: 0.625rem; border-radius: 0.625rem;
background: #000; background: #000;
} }
.thumbnail { .thumbnail {
object-fit: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover;
} }
.flipped { .flipped {
@ -94,32 +111,36 @@
.pinButton { .pinButton {
position: absolute; position: absolute;
inset-inline-end: 0.25rem;
inset-block-start: 0.25rem;
z-index: 3; z-index: 3;
inset-block-start: 0.25rem;
inset-inline-end: 0.25rem;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
.bottomPanel { .bottomPanel {
position: absolute; position: absolute;
z-index: 3;
inset-block-end: 0; inset-block-end: 0;
inset-inline: 0; inset-inline: 0;
border-end-end-radius: 0.625rem;
border-end-start-radius: 0.625rem; display: flex;
gap: 0.25rem;
align-items: center;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
display: flex; border-end-start-radius: 0.625rem;
align-items: center; border-end-end-radius: 0.625rem;
gap: 0.25rem;
z-index: 3;
} }
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
font-size: 1rem;
min-width: 0; min-width: 0;
font-size: 1rem;
} }
.pinned .bottomPanel, .pinned::after { .pinned .bottomPanel, .pinned::after {
@ -132,23 +153,24 @@
} }
.name { .name {
color: #FFFFFF;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1.125rem; line-height: 1.125rem;
color: #FFFFFF;
:global(.fullName) { :global(.fullName) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 1rem;
--emoji-size: 1rem; --emoji-size: 1rem;
overflow: hidden;
font-size: 1rem;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.status { .status {
line-height: 1.125rem;
color: #FFFFFF; color: #FFFFFF;
opacity: 0.6; opacity: 0.6;
line-height: 1.125rem;
} }
.icon { .icon {

14
src/components/calls/group/GroupCallTopPane.scss
View File

@ -3,11 +3,12 @@
.GroupCallTopPane { .GroupCallTopPane {
@include mixins.header-pane; @include mixins.header-pane;
cursor: var(--custom-cursor, pointer);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
align-items: center; align-items: center;
cursor: var(--custom-cursor, pointer); justify-content: space-between;
.info { .info {
display: flex; display: flex;
@ -26,10 +27,11 @@
} }
.join { .join {
height: 1.875rem;
border-radius: 1rem;
font-weight: var(--font-weight-medium);
padding: 0 1rem;
width: auto; width: auto;
height: 1.875rem;
padding: 0 1rem;
border-radius: 1rem;
font-weight: var(--font-weight-medium);
} }
} }

20
src/components/calls/group/MicrophoneButton.module.scss
View File

@ -3,32 +3,38 @@
background: var(--gradient-green); background: var(--gradient-green);
&::before, &::after { &::before, &::after {
content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
content: '';
display: block; display: block;
transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
opacity: 0; opacity: 0;
transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
} }
&::before { &::before {
background: var(--gradient-blue);
transform: rotate(45deg); transform: rotate(45deg);
background: var(--gradient-blue);
} }
&::after { &::after {
background: var(--gradient-purple);
transform: rotate(-45deg); transform: rotate(-45deg);
background: var(--gradient-purple);
} }
} }
.spinner { .spinner {
position: absolute; position: absolute;
width: 100%;
height: 100%;
z-index: 2; z-index: 2;
width: 100%;
height: 100%;
opacity: 0; opacity: 0;
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
} }
@ -37,8 +43,8 @@
} }
.mutedByAdmin::before, .canUnmute::before { .mutedByAdmin::before, .canUnmute::before {
opacity: 1;
transform: rotate(0deg); transform: rotate(0deg);
opacity: 1;
} }
.icon { .icon {

82
src/components/calls/phone/PhoneCall.module.scss
View File

@ -6,6 +6,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 80vh; height: 80vh;
padding: 0; padding: 0;
} }
@ -14,13 +15,14 @@
--radius: 0; --radius: 0;
position: absolute; position: absolute;
z-index: -1;
top: 0; top: 0;
left: 0; left: 0;
transform: scale(1.1);
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
z-index: -1;
transform: scale(1.1);
:global(.Avatar__media) { :global(.Avatar__media) {
border-radius: 0; border-radius: 0;
@ -36,8 +38,8 @@
.single-column { .single-column {
:global(.modal-dialog) { :global(.modal-dialog) {
max-width: 100% !important; max-width: 100% !important;
border-radius: 0;
margin: 0; margin: 0;
border-radius: 0;
} }
:global(.modal-content) { :global(.modal-content) {
@ -47,13 +49,16 @@
} }
.header { .header {
width: 100%; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
color: #fff;
position: absolute; width: 100%;
padding: 0.5rem; padding: 0.5rem;
color: #fff;
:global(.Button) { :global(.Button) {
color: #fff; color: #fff;
} }
@ -68,33 +73,41 @@
} }
.emojis-backdrop { .emojis-backdrop {
pointer-events: none;
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
pointer-events: none;
width: 100%;
height: 100%;
transition: 0.25s ease-in-out background-color; transition: 0.25s ease-in-out background-color;
z-index: 2;
&.open { &.open {
background-color: rgba(0, 0, 0, 0.7);
pointer-events: auto; pointer-events: auto;
background-color: rgba(0, 0, 0, 0.7);
} }
} }
.emojis { .emojis {
user-select: none;
pointer-events: auto; pointer-events: auto;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
margin-top: 1rem; user-select: none;
height: 3rem;
transition: 0.25s ease-in-out transform;
top: 0; top: 0;
height: 3rem;
margin-top: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
transition: 0.25s ease-in-out transform;
&.open { &.open {
transform: scale(2) translateY(3rem); transform: scale(2) translateY(3rem);
} }
@ -102,13 +115,18 @@
.emoji-tooltip { .emoji-tooltip {
user-select: none; user-select: none;
position: absolute; position: absolute;
margin-top: 10rem;
color: white;
max-width: 20rem; max-width: 20rem;
text-align: center; margin-top: 10rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: white;
text-align: center;
opacity: 0; opacity: 0;
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
&.open { &.open {
@ -117,25 +135,29 @@
} }
.user-info { .user-info {
width: 100%; pointer-events: none;
user-select: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: auto;
padding-top: 4rem; padding-top: 4rem;
padding-bottom: 2rem; padding-bottom: 2rem;
margin-bottom: auto;
color: #fff; color: #fff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
pointer-events: none;
user-select: none;
} }
.buttons { .buttons {
display: flex; user-select: none;
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
user-select: none; display: flex;
} }
.leave { .leave {
@ -159,20 +181,22 @@
} }
.main-video { .main-video {
z-index: -1;
position: absolute; position: absolute;
z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.second-video { .second-video {
z-index: -1;
position: absolute; position: absolute;
width: 9rem; z-index: -1;
bottom: 1rem;
right: 1rem; right: 1rem;
border-radius: 0.5rem; bottom: 1rem;
transform: translateY(calc(100% + 1rem)) rotateY(180deg); transform: translateY(calc(100% + 1rem)) rotateY(180deg);
width: 9rem;
border-radius: 0.5rem;
transition: 0.25s ease-in-out transform; transition: 0.25s ease-in-out transform;
&.visible { &.visible {

13
src/components/calls/phone/PhoneCallButton.module.scss
View File

@ -1,8 +1,8 @@
.root { .root {
width: 5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 5rem;
&:not(:first-child) { &:not(:first-child) {
margin-left: 1rem; margin-left: 1rem;
@ -10,16 +10,16 @@
} }
.button { .button {
background-color: rgba(0, 0, 0, 0.1) !important;
color: #fff !important; color: #fff !important;
background-color: rgba(0, 0, 0, 0.1) !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.2) !important; background-color: rgba(0, 0, 0, 0.2) !important;
} }
&.active { &.active {
background-color: #fff !important;
color: var(--color-text-secondary) !important; color: var(--color-text-secondary) !important;
background-color: #fff !important;
&:hover { &:hover {
background-color: #ddd !important; background-color: #ddd !important;
@ -28,9 +28,10 @@
} }
.button-text { .button-text {
color: #fff;
font-size: 0.75rem;
text-transform: lowercase;
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.75rem;
color: #fff;
text-transform: lowercase;
white-space: nowrap; white-space: nowrap;
} }

4
src/components/calls/phone/RatePhoneCallModal.module.scss
View File

@ -1,7 +1,7 @@
.stars { .stars {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -19,8 +19,8 @@
} }
.comment { .comment {
margin-top: 1rem;
overflow: hidden; overflow: hidden;
margin-top: 1rem;
&:not(.visible) { &:not(.visible) {
display: none; display: none;

2
src/components/common/AboutMonetizationModal.module.scss
View File

@ -1,7 +1,7 @@
.title, .description { .title, .description {
padding-inline: 1.5rem;
text-align: center !important; text-align: center !important;
text-wrap: pretty; text-wrap: pretty;
padding-inline: 1.5rem;
} }
.toncoin { .toncoin {

4
src/components/common/AnimatedIconWithPreview.module.scss
View File

@ -1,6 +1,5 @@
.root { .root {
position: relative; position: relative;
display: block !important; display: block !important;
:global(.AnimatedSticker.not-shown) { :global(.AnimatedSticker.not-shown) {
@ -10,8 +9,9 @@
.preview { .preview {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;

165
src/components/common/Audio.scss
View File

@ -1,7 +1,7 @@
.Audio { .Audio {
position: relative;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
position: relative;
&.inline { &.inline {
margin-top: calc(0.5rem - 0.3125rem); margin-top: calc(0.5rem - 0.3125rem);
@ -16,8 +16,8 @@
} }
.media-loading { .media-loading {
position: absolute;
pointer-events: none; pointer-events: none;
position: absolute;
&.interactive { &.interactive {
pointer-events: auto; pointer-events: auto;
@ -29,17 +29,21 @@
.icon-view-once { .icon-view-once {
position: absolute; position: absolute;
padding: 0.125rem; z-index: var(--z-badge);
left: 2rem;
bottom: 0; bottom: 0;
font-size: 1rem; left: 2rem;
transform: scale(1);
padding: 0.125rem;
border-radius: 50%; border-radius: 50%;
font-size: 1rem;
color: var(--color-white); color: var(--color-white);
opacity: 1;
background-color: var(--color-primary); background-color: var(--color-primary);
outline: var(--background-color) solid 0.125rem; outline: var(--background-color) solid 0.125rem;
z-index: var(--z-badge);
opacity: 1;
transform: scale(1);
transition: transition:
opacity 0.4s, opacity 0.4s,
transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
@ -81,8 +85,8 @@
.icon-play, .icon-play,
.icon-pause, .icon-pause,
.flame { .flame {
opacity: 1;
transform: scale(1); transform: scale(1);
opacity: 1;
transition: transition:
opacity 0.4s, opacity 0.4s,
transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
@ -95,8 +99,8 @@
&.loading .icon-pause, &.loading .icon-pause,
&.loading .flame, &.loading .flame,
&.loading .icon-view-once { &.loading .icon-view-once {
opacity: 0;
transform: scale(0.5); transform: scale(0.5);
opacity: 0;
} }
} }
@ -128,13 +132,14 @@
.download-button { .download-button {
position: absolute; position: absolute;
z-index: 1;
top: 1.9375rem;
left: 1.9375rem;
width: 1.1875rem !important; width: 1.1875rem !important;
height: 1.1875rem !important; height: 1.1875rem !important;
padding: 0; padding: 0;
left: 1.9375rem;
top: 1.9375rem;
border: 0.125rem solid var(--background-color); border: 0.125rem solid var(--background-color);
z-index: 1;
.icon { .icon {
font-size: 0.8125rem; font-size: 0.8125rem;
@ -142,15 +147,15 @@
} }
&.bigger .download-button { &.bigger .download-button {
left: 2rem;
top: 2rem; top: 2rem;
left: 2rem;
border: 0.125rem solid var(--color-background); border: 0.125rem solid var(--color-background);
} }
.content { .content {
flex-grow: 1;
align-self: center; align-self: center;
min-width: 0; min-width: 0;
flex-grow: 1;
text-align: initial; text-align: initial;
} }
@ -160,12 +165,14 @@
} }
.title { .title {
font-weight: var(--font-weight-medium);
margin: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden; overflow: hidden;
margin: 0;
font-weight: var(--font-weight-medium);
line-height: 1.25;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
canvas { canvas {
@ -173,21 +180,26 @@
} }
.voice-duration { .voice-duration {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.25rem 0 0;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--color-text-secondary);
&.unread::after { &.unread::after {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
background-color: var(--accent-color);
border-radius: 50%;
margin-inline-start: 0.125rem; margin-inline-start: 0.125rem;
border-radius: 50%;
background-color: var(--accent-color);
} }
} }
@ -227,28 +239,32 @@
} }
.Button { .Button {
border-radius: var(--border-radius-default-tiny);
background: var(--color-voice-transcribe);
color: var(--accent-color);
width: auto; width: auto;
margin-inline-start: 0.25rem;
font-size: 1.25rem;
height: 1.5rem; height: 1.5rem;
margin-inline-start: 0.25rem;
padding: 0.375rem; padding: 0.375rem;
border-radius: var(--border-radius-default-tiny);
font-size: 1.25rem;
color: var(--accent-color);
background: var(--color-voice-transcribe);
&:hover { &:hover {
background: var(--color-voice-transcribe) !important;
opacity: 0.8; opacity: 0.8;
background: var(--color-voice-transcribe) !important;
} }
} }
} }
.waveform { .waveform {
cursor: var(--custom-cursor, pointer);
margin-left: 1px;
touch-action: none; touch-action: none;
cursor: var(--custom-cursor, pointer);
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
margin-left: 1px;
} }
&.non-interactive { &.non-interactive {
@ -258,13 +274,15 @@
.meta, .meta,
.performer, .performer,
.date { .date {
unicode-bidi: plaintext;
overflow: hidden;
margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
unicode-bidi: plaintext; white-space: nowrap;
} }
.date { .date {
@ -272,13 +290,14 @@
} }
.duration { .duration {
font-size: 0.875rem;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0; flex-shrink: 0;
font-size: 0.875rem;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
} }
.meta { .meta {
@ -288,10 +307,10 @@
padding-inline-end: 0.5rem; padding-inline-end: 0.5rem;
& > span { & > span {
min-width: 0;
white-space: nowrap;
overflow: hidden; overflow: hidden;
min-width: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.performer { .performer {
@ -303,78 +322,91 @@
} }
.bullet { .bullet {
margin: 0 0.25rem;
flex-shrink: 0; flex-shrink: 0;
margin: 0 0.25rem;
} }
} }
.seekline { .seekline {
flex-grow: 1; touch-action: none;
height: 1.25rem; cursor: var(--custom-cursor, pointer);
position: relative; position: relative;
top: 3px; top: 3px;
cursor: var(--custom-cursor, pointer);
touch-action: none; flex-grow: 1;
height: 1.25rem;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 100%;
top: 6px; top: 6px;
width: 100%;
height: 2px; height: 2px;
background-color: var(--color-interactive-inactive);
border-radius: 2px; border-radius: 2px;
background-color: var(--color-interactive-inactive);
} }
} }
.seekline-play-progress { .seekline-play-progress {
position: absolute; position: absolute;
top: 6px;
overflow: hidden;
width: 100%;
height: 2px; height: 2px;
border-radius: 2px; border-radius: 2px;
overflow: hidden;
width: 100%;
top: 6px;
&-inner { &-inner {
position: absolute; position: absolute;
right: 100%;
width: 100%; width: 100%;
background-color: var(--color-interactive-active);
height: 2px; height: 2px;
border-radius: 2px; border-radius: 2px;
right: 100%;
background-color: var(--color-interactive-active);
} }
} }
.seekline-buffered-progress { .seekline-buffered-progress {
height: 2px;
border-radius: 2px;
position: absolute; position: absolute;
top: 6px; top: 6px;
height: 2px;
border-radius: 2px;
background-color: var(--color-interactive-buffered); background-color: var(--color-interactive-buffered);
} }
.seekline-thumb { .seekline-thumb {
position: absolute; position: absolute;
width: 100%;
top: 7px; top: 7px;
left: 0; left: 0;
width: 100%;
&-inner { &-inner {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
width: 100%;
right: 100%; right: 100%;
width: 100%;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: -6px; top: -6px;
right: -6px; right: -6px;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 6px; border-radius: 6px;
background: var(--color-interactive-active); background: var(--color-interactive-active);
} }
} }
@ -382,11 +414,12 @@
&.bigger { &.bigger {
.title { .title {
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
line-height: 1.5rem; line-height: 1.5rem;
text-overflow: ellipsis;
white-space: nowrap;
} }
.meta { .meta {
@ -405,8 +438,8 @@
&[dir="rtl"] { &[dir="rtl"] {
.media-loading { .media-loading {
left: auto !important;
right: 0; right: 0;
left: auto !important;
} }
} }
} }
@ -422,12 +455,12 @@
} }
.toggle-play { .toggle-play {
margin-left: 0.5rem;
margin-right: 0; margin-right: 0;
margin-left: 0.5rem;
&.smaller { &.smaller {
margin-left: 0.75rem;
margin-right: 0; margin-right: 0;
margin-left: 0.75rem;
} }
} }
@ -441,8 +474,8 @@
} }
.download-button { .download-button {
left: auto;
right: 2rem; right: 2rem;
left: auto;
} }
} }
} }

58
src/components/common/Avatar.scss
View File

@ -5,20 +5,23 @@
--_size: 0px; --_size: 0px;
--_font-size: max(calc(var(--_size) / 2 - 2px), 0.5rem); --_font-size: max(calc(var(--_size) / 2 - 2px), 0.5rem);
user-select: none;
position: relative;
display: flex;
flex: none; flex: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--_size); width: var(--_size);
height: var(--_size); height: var(--_size);
border-radius: var(--radius); border-radius: var(--radius);
color: white;
font-weight: bold;
display: flex;
white-space: nowrap;
user-select: none;
position: relative;
font-size: var(--_font-size); font-size: var(--_font-size);
font-weight: bold;
color: white;
white-space: nowrap;
.emoji { .emoji {
width: var(--_font-size); width: var(--_font-size);
@ -30,17 +33,20 @@
} }
> .inner { > .inner {
overflow: hidden;
border-radius: var(--radius);
position: absolute; position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 1; z-index: 1;
top: 0;
left: 0;
overflow: hidden;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
border-radius: var(--radius);
background-image: linear-gradient(var(--color-white) -300%, var(--color-user)); background-image: linear-gradient(var(--color-white) -300%, var(--color-user));
} }
@ -61,10 +67,10 @@
z-index: 1; z-index: 1;
> .inner { > .inner {
top: 0.1875rem;
left: 0.1875rem;
width: calc(100% - 0.375rem); width: calc(100% - 0.375rem);
height: calc(100% - 0.375rem); height: calc(100% - 0.375rem);
left: 0.1875rem;
top: 0.1875rem;
} }
} }
@ -75,30 +81,36 @@
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -0.25rem;
left: -0.25rem;
width: calc(var(--_size) + 0.25rem); width: calc(var(--_size) + 0.25rem);
height: calc(var(--_size) + 0.25rem); height: calc(var(--_size) + 0.25rem);
left: -0.25rem;
top: -0.25rem;
border-radius: 50%; border-radius: 50%;
background: var(--color-borders-read-story); background: var(--color-borders-read-story);
} }
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
z-index: 0;
top: -0.125rem;
left: -0.125rem;
width: var(--_size); width: var(--_size);
height: var(--_size); height: var(--_size);
left: -0.125rem;
top: -0.125rem;
border-radius: 50%; border-radius: 50%;
z-index: 0;
background: var(--color-background); background: var(--color-background);
} }
&.online::after { &.online::after {
bottom: -0.125rem;
right: -0.125rem; right: -0.125rem;
bottom: -0.125rem;
} }
} }
@ -122,9 +134,9 @@
.poster { .poster {
position: absolute; position: absolute;
left: 0;
top: 0;
z-index: 0; z-index: 0;
top: 0;
left: 0;
} }
&.forum { &.forum {

13
src/components/common/AvatarList.module.scss
View File

@ -4,8 +4,8 @@
--spacing: calc(var(--_size) * 0.4); --spacing: calc(var(--_size) * 0.4);
--spacing-gap: calc(var(--_size) * 0.04); --spacing-gap: calc(var(--_size) * 0.04);
display: flex;
position: relative; position: relative;
display: flex;
} }
.avatar { .avatar {
@ -30,18 +30,17 @@
.badge { .badge {
position: absolute; position: absolute;
bottom: -1px;
right: -1px; right: -1px;
bottom: -1px;
background-color: var(--color-primary); padding: 0rem 0.25rem;
color: var(--color-white);
border: 1px solid var(--color-background); border: 1px solid var(--color-background);
border-radius: 1rem; border-radius: 1rem;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1rem;
color: var(--color-white);
padding: 0rem 0.25rem; background-color: var(--color-primary);
} }

8
src/components/common/BadgeButton.module.scss
View File

@ -1,12 +1,14 @@
.root { .root {
padding: 0.25em 0.5em;
border-radius: 1em;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1; line-height: 1;
border-radius: 1em;
padding: 0.25em 0.5em;
background-color: var(--accent-background-active-color);
color: var(--accent-color); color: var(--accent-color);
background-color: var(--accent-background-active-color);
filter: brightness(1); filter: brightness(1);
transition: 150ms filter ease-in; transition: 150ms filter ease-in;
} }

8
src/components/common/Blockquote.module.scss
View File

@ -10,9 +10,9 @@
} }
.gradientContainer { .gradientContainer {
max-height: inherit;
margin-top: 0.125rem; margin-top: 0.125rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
max-height: inherit;
.collapsed & { .collapsed & {
@include mixins.gradient-border-bottom(1rem); @include mixins.gradient-border-bottom(1rem);
@ -21,15 +21,15 @@
.collapseIcon { .collapseIcon {
position: absolute; position: absolute;
right: 0;
bottom: 0;
display: grid; display: grid;
place-items: center; place-items: center;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
border-radius: 50%; border-radius: 50%;
bottom: 0;
right: 0;
} }
.clickable { .clickable {

53
src/components/common/CalendarModal.scss
View File

@ -27,8 +27,8 @@
.footer { .footer {
display: flex; display: flex;
justify-content: flex-end;
flex-direction: column; flex-direction: column;
justify-content: flex-end;
.Button { .Button {
text-transform: none; text-transform: none;
@ -48,35 +48,40 @@
margin: 0 0 0 1.25rem; margin: 0 0 0 1.25rem;
font-size: 1.25rem; font-size: 1.25rem;
@media (max-width: 600px) {
margin-left: 0.75rem;
}
& ~ .Button { & ~ .Button {
color: var(--color-primary); color: var(--color-primary);
} }
@media (max-width: 600px) {
margin-left: 0.75rem;
}
} }
.Button.hidden { .Button.hidden {
opacity: 0.5;
pointer-events: none; pointer-events: none;
opacity: 0.5;
} }
} }
.day-button { .day-button {
position: relative; position: relative;
border-radius: 4rem;
outline: none !important;
font-weight: var(--font-weight-medium);
margin: 0.125rem 0.625rem;
@media (max-width: 600px) { margin: 0.125rem 0.625rem;
margin: 0.25rem 0.375rem; border-radius: 4rem;
font-weight: var(--font-weight-medium);
outline: none !important;
&::before {
content: "";
display: block;
padding-top: 100%;
} }
&.weekday { &.weekday {
margin-bottom: 0;
height: 1rem; height: 1rem;
margin-bottom: 0;
} }
&.clickable { &.clickable {
@ -87,39 +92,41 @@
} }
&.selected { &.selected {
background-color: var(--color-primary);
color: white; color: white;
background-color: var(--color-primary);
} }
} }
&.disabled { &.disabled {
opacity: 0.25;
pointer-events: none; pointer-events: none;
} opacity: 0.25;
&::before {
content: "";
display: block;
padding-top: 100%;
} }
span { span {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
font-size: 0.875rem; font-size: 0.875rem;
} }
@media (max-width: 600px) {
margin: 0.25rem 0.375rem;
}
} }
.calendar-wrapper { .calendar-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 17rem; min-height: 17rem;
margin: 1.5rem -0.5rem 0.5rem; margin: 1.5rem -0.5rem 0.5rem;
} }

84
src/components/common/ChatForumLastMessage.module.scss
View File

@ -2,19 +2,20 @@
--radius: 0.75rem; --radius: 0.75rem;
--first-column-background-color: var(--color-background-selected); --first-column-background-color: var(--color-background-selected);
display: flex; pointer-events: none;
min-width: 0;
overflow: hidden;
margin-inline-end: 0.5rem;
flex-grow: 1;
flex-direction: column;
align-items: flex-start;
z-index: 3; z-index: 3;
transition: 0.25s ease-out background-color; overflow: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: flex-start;
pointer-events: none; min-width: 0;
margin-inline-end: 0.5rem;
transition: 0.25s ease-out background-color;
@media (hover: hover) { @media (hover: hover) {
:global(.ListItem-button:hover) & { :global(.ListItem-button:hover) & {
@ -43,13 +44,14 @@
} }
.loading { .loading {
color: var(--color-text-secondary);
line-height: 1.25rem; line-height: 1.25rem;
color: var(--color-text-secondary);
} }
.other-column, .main-column { .other-column, .main-column {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.25rem; line-height: 1.25rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@ -68,44 +70,46 @@
} }
.other-column { .other-column {
margin-left: 0.25rem;
margin-right: 0.25rem;
display: inline;
position: relative; position: relative;
display: inline;
margin-right: 0.25rem;
margin-left: 0.25rem;
} }
.main-column { .main-column {
pointer-events: initial;
position: relative;
max-width: 100%;
border-start-start-radius: var(--radius); border-start-start-radius: var(--radius);
border-start-end-radius: var(--radius); border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius); border-end-end-radius: var(--radius);
max-width: 100%;
position: relative;
pointer-events: initial;
.after-wrapper { .after-wrapper {
position: absolute;
bottom: 0;
inset-inline-end: calc(var(--radius) * -1);
width: var(--radius); width: var(--radius);
height: var(--radius); height: var(--radius);
bottom: 0;
position: absolute;
inset-inline-end: calc(var(--radius) * -1);
} }
.after { .after {
border-end-start-radius: var(--radius);
background: var(--background-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
border-end-start-radius: var(--radius);
background: var(--background-color);
} }
} }
.title { .title {
overflow: hidden;
margin-left: 0.25rem; margin-left: 0.25rem;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.25rem; line-height: 1.25rem;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -114,16 +118,18 @@
} }
.other-column-title { .other-column-title {
font-size: 0.9375rem;
margin-inline-start: 1.5rem; margin-inline-start: 1.5rem;
font-size: 0.9375rem;
} }
.other-columns { .other-columns {
overflow: hidden;
height: 1.25rem;
line-height: 1.25rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
line-height: 1.25rem;
height: 1.25rem;
} }
.ellipsis { .ellipsis {
@ -131,28 +137,28 @@
} }
.last-message { .last-message {
border-end-start-radius: var(--radius);
border-end-end-radius: var(--radius);
max-width: 100%;
pointer-events: initial; pointer-events: initial;
position: relative; position: relative;
max-width: 100%;
border-end-start-radius: var(--radius);
border-end-end-radius: var(--radius);
.after-wrapper { .after-wrapper {
position: absolute;
top: 0;
inset-inline-end: calc(var(--radius) * -1);
width: var(--radius); width: var(--radius);
height: var(--radius); height: var(--radius);
top: 0;
position: absolute;
inset-inline-end: calc(var(--radius) * -1);
} }
.after { .after {
border-start-start-radius: var(--radius);
background: var(--background-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
border-start-start-radius: var(--radius);
background: var(--background-color);
} }
:global(.last-message) { :global(.last-message) {

399
src/components/common/Composer.scss
View File

@ -7,13 +7,8 @@
.select-mode-active + .middle-column-footer & { .select-mode-active + .middle-column-footer & {
position: absolute; position: absolute;
padding-right: 2rem;
bottom: 0; bottom: 0;
padding-right: 2rem;
@media (max-width: 600px) {
padding-right: 1rem;
bottom: env(safe-area-inset-bottom);
}
&::before { &::before {
right: 2.125rem; right: 2.125rem;
@ -26,6 +21,11 @@
.svg-appendix { .svg-appendix {
opacity: 0; opacity: 0;
} }
@media (max-width: 600px) {
bottom: env(safe-area-inset-bottom);
padding-right: 1rem;
}
} }
.form-control { .form-control {
@ -33,23 +33,25 @@
} }
.effect-icon { .effect-icon {
display: grid; cursor: var(--custom-cursor, pointer);
width: 1.5rem;
height: 1.5rem;
place-items: center;
font-size: 1rem;
line-height: 1;
position: absolute; position: absolute;
right: -0.25rem; right: -0.25rem;
bottom: -0.25rem; bottom: -0.25rem;
background-color: var(--color-background); display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border: 1px solid var(--color-borders); border: 1px solid var(--color-borders);
border-radius: 50%;
font-size: 1rem;
line-height: 1;
color: var(--color-text); color: var(--color-text);
border-radius: 50%; background-color: var(--color-background);
cursor: var(--custom-cursor, pointer);
& > .emoji { & > .emoji {
width: 1rem !important; width: 1rem !important;
@ -59,34 +61,30 @@
@keyframes show-send-as-button { @keyframes show-send-as-button {
from { from {
transform: scale(0);
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
width: 1rem; width: 1rem;
transform: scale(0);
} }
to { to {
transform: scale(1);
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
width: var(--base-height); width: var(--base-height);
transform: scale(1);
} }
} }
> .Button { > .Button {
overflow: visible; overflow: visible;
flex-shrink: 0; flex-shrink: 0;
margin-left: 0.5rem;
width: var(--base-height); width: var(--base-height);
height: var(--base-height); height: var(--base-height);
margin-left: 0.5rem;
&:not(.danger) { &:not(.danger) {
color: var(--color-composer-button); color: var(--color-composer-button);
} }
@media (max-width: 600px) {
width: 2.875rem;
height: 2.875rem;
}
.icon-send, .icon-send,
.icon-schedule, .icon-schedule,
.icon-forward, .icon-forward,
@ -106,28 +104,6 @@
} }
} }
@media (hover: hover) {
&:not(:active):not(:focus):not(:hover) {
.icon-send,
.icon-schedule,
.icon-forward,
.icon-check {
color: var(--color-primary);
}
}
}
@media (hover: none) {
&:not(:active):not(:focus) {
.icon-send,
.icon-schedule,
.icon-forward,
.icon-check {
color: var(--color-primary);
}
}
}
&.cancel { &.cancel {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -168,6 +144,18 @@
} }
.paidStarsBadge { .paidStarsBadge {
position: absolute;
top: -1rem;
height: auto;
margin-top: 0.625rem;
padding-block: 0.25rem;
padding-inline: 0.375rem;
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold) !important;
line-height: 1;
animation: hide-icon 0.4s forwards ease-out; animation: hide-icon 0.4s forwards ease-out;
&.visible { &.visible {
animation: grow-icon 0.4s ease-out; animation: grow-icon 0.4s ease-out;
@ -176,17 +164,6 @@
.icon { .icon {
font-size: 0.875rem; font-size: 0.875rem;
} }
position: absolute;
top: -1rem;
height: auto;
padding-inline: 0.375rem;
padding-block: 0.25rem;
font-size: 0.8125rem;
margin-top: 0.625rem;
line-height: 1;
font-weight: var(--font-weight-semibold) !important;
} }
&.send, &.sendOneTime { &.send, &.sendOneTime {
@ -278,6 +255,33 @@
&.not-ready > .icon { &.not-ready > .icon {
animation-duration: 0ms !important; animation-duration: 0ms !important;
} }
@media (max-width: 600px) {
width: 2.875rem;
height: 2.875rem;
}
@media (hover: hover) {
&:not(:active):not(:focus):not(:hover) {
.icon-send,
.icon-schedule,
.icon-forward,
.icon-check {
color: var(--color-primary);
}
}
}
@media (hover: none) {
&:not(:active):not(:focus) {
.icon-send,
.icon-schedule,
.icon-forward,
.icon-check {
color: var(--color-primary);
}
}
}
} }
&:not(.mounted) > .Button, &:not(.mounted) > .Button,
@ -295,8 +299,8 @@
} }
body:not(.no-message-composer-animations) & .send-as-button.appear-animation { body:not(.no-message-composer-animations) & .send-as-button.appear-animation {
animation: 0.25s ease-in-out forwards show-send-as-button;
transform-origin: right; transform-origin: right;
animation: 0.25s ease-in-out forwards show-send-as-button;
} }
> .ReactionSelector { > .ReactionSelector {
@ -305,15 +309,11 @@
--color-text: #fff; --color-text: #fff;
position: absolute; position: absolute;
left: 50%;
right: auto;
top: -0.75rem;
transform: translate(-50%, -100%);
z-index: 1; z-index: 1;
top: -0.75rem;
@media (max-width: 600px) { right: auto;
top: -4.25rem; left: 50%;
} transform: translate(-50%, -100%);
.ReactionSelector__bubble-small, .ReactionSelector__bubble-small,
.ReactionSelector__bubble-big { .ReactionSelector__bubble-big {
@ -328,11 +328,15 @@
.ReactionSelector__hint { .ReactionSelector__hint {
color: #fff; color: #fff;
} }
@media (max-width: 600px) {
top: -4.25rem;
}
} }
.composer-action-buttons-container { .composer-action-buttons-container {
width: auto;
position: relative; position: relative;
width: auto;
+ .AttachMenu { + .AttachMenu {
margin-left: var(--action-button-compact-fix); margin-left: var(--action-button-compact-fix);
@ -340,19 +344,21 @@
} }
.composer-action-buttons { .composer-action-buttons {
display: flex;
top: 0; top: 0;
right: 0; right: 0;
left: auto; left: auto;
display: flex;
width: auto; width: auto;
height: auto; height: auto;
} }
} }
.mobile-symbol-menu-button { .mobile-symbol-menu-button {
position: relative;
width: 2.875rem; width: 2.875rem;
height: 2.875rem; height: 2.875rem;
position: relative;
.icon-smile, .icon-smile,
.icon-keyboard, .icon-keyboard,
@ -401,33 +407,39 @@
} }
.composer-wrapper { .composer-wrapper {
flex-grow: 1;
max-width: calc(100% - 4rem);
background: var(--color-background);
position: relative; position: relative;
z-index: 1; z-index: 1;
box-shadow: 0 1px 2px var(--color-default-shadow);
flex-grow: 1;
max-width: calc(100% - 4rem);
border-radius: var(--border-radius-messages); border-radius: var(--border-radius-messages);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background: var(--color-background);
box-shadow: 0 1px 2px var(--color-default-shadow);
&.with-story-tweaks { &.with-story-tweaks {
border-radius: var(--border-radius-default-small); border-radius: var(--border-radius-default-small);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
box-shadow: none;
&.is-need-premium { &.is-need-premium {
border-bottom-right-radius: var(--border-radius-default-small); border-bottom-right-radius: var(--border-radius-default-small);
} }
box-shadow: none;
} }
.svg-appendix { .svg-appendix {
position: absolute; position: absolute;
bottom: -0.1875rem;
right: -0.5rem; right: -0.5rem;
bottom: -0.1875rem;
width: 0.5625rem; width: 0.5625rem;
height: 1.25rem; height: 1.25rem;
transition: opacity 200ms;
font-size: 1rem !important; font-size: 1rem !important;
transition: opacity 200ms;
.corner { .corner {
fill: var(--color-background); fill: var(--color-background);
} }
@ -441,33 +453,33 @@
.message-input-wrapper { .message-input-wrapper {
--action-button-size: var(--base-height, 3.5rem); --action-button-size: var(--base-height, 3.5rem);
--action-button-compact-fix: -1rem; --action-button-compact-fix: -1rem;
display: flex;
@media (max-width: 600px) { display: flex;
--action-button-size: 2.875rem;
--action-button-compact-fix: -0.6875rem;
}
.input-scroller { .input-scroller {
--_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem)); --_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem));
margin-right: calc(-1 * var(--_scroller-right-gap)); margin-right: calc(-1 * var(--_scroller-right-gap));
padding-right: var(--_scroller-right-gap); padding-right: var(--_scroller-right-gap);
} }
> .Spinner { > .Spinner {
align-self: center;
--spinner-size: 1.5rem; --spinner-size: 1.5rem;
align-self: center;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.composer-action-button { .composer-action-button {
flex-shrink: 0; flex-shrink: 0;
background: none !important; align-self: flex-end;
width: var(--action-button-size); width: var(--action-button-size);
height: var(--action-button-size); height: var(--action-button-size);
margin: 0; margin: 0;
padding: 0; padding: 0;
align-self: flex-end;
background: none !important;
&:not(.faded):not(.activated) { &:not(.faded):not(.activated) {
color: var(--color-composer-button); color: var(--color-composer-button);
@ -481,19 +493,23 @@
--icon-width: 1.25rem; --icon-width: 1.25rem;
--icon-gap: 0.25rem; --icon-gap: 0.25rem;
--padding-sides: 0.5rem; --padding-sides: 0.5rem;
background: var(--color-primary) !important;
height: 2rem;
margin: 0 0.5rem 0.75rem;
color: white !important;
text-transform: none;
display: inline-flex; display: inline-flex;
padding: 0 var(--padding-sides); justify-content: flex-start;
width: 2rem; width: 2rem;
max-width: clamp(0px, 12rem, 25vw); max-width: clamp(0px, 12rem, 25vw);
height: 2rem;
margin: 0 0.5rem 0.75rem;
padding: 0 var(--padding-sides);
border-radius: 0.5rem;
color: white !important;
text-transform: none;
background: var(--color-primary) !important;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: 0.25s ease-out width, 0.25s ease-out border-radius; transition: 0.25s ease-out width, 0.25s ease-out border-radius;
border-radius: 0.5rem;
justify-content: flex-start;
&.open { &.open {
width: calc(var(--bot-menu-text-width) + var(--padding-sides) * 2 + var(--icon-gap) + var(--icon-width)); width: calc(var(--bot-menu-text-width) + var(--padding-sides) * 2 + var(--icon-gap) + var(--icon-width));
@ -506,10 +522,10 @@
} }
.bot-menu-icon { .bot-menu-icon {
font-size: 1.25rem;
margin-right: var(--icon-gap);
transition: 0.25s ease-out transform;
transform: translateX(-0.15rem); transform: translateX(-0.15rem);
margin-right: var(--icon-gap);
font-size: 1.25rem;
transition: 0.25s ease-out transform;
&.open { &.open {
transform: translateX(0); transform: translateX(0);
@ -518,11 +534,13 @@
.bot-menu-text { .bot-menu-text {
--emoji-size: 1rem; --emoji-size: 1rem;
overflow: hidden;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
} }
&.bot-commands { &.bot-commands {
@ -536,14 +554,17 @@
&.scheduled-button .icon::after { &.scheduled-button .icon::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0.75rem; top: 0.75rem;
right: 0.875rem; right: 0.875rem;
border: 0.1875rem solid var(--color-background);
box-sizing: content-box; box-sizing: content-box;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
border: 0.1875rem solid var(--color-background);
border-radius: 50%; border-radius: 50%;
background: var(--color-green-darker); background: var(--color-green-darker);
box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background); box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background);
@ -560,24 +581,31 @@
} }
.recording-state { .recording-state {
display: inline-block;
position: relative; position: relative;
line-height: var(--base-height);
display: inline-block;
height: var(--base-height); height: var(--base-height);
padding: 0 3.125rem 0 1rem; padding: 0 3.125rem 0 1rem;
font-family: var(--font-family); font-family: var(--font-family);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
line-height: var(--base-height);
&::after { &::after {
content: ""; content: "";
width: 0.75rem;
height: 0.75rem;
background: var(--color-error);
border-radius: 0.375rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.375rem;
right: 1.3125rem; right: 1.3125rem;
width: 0.75rem;
height: 0.75rem;
margin-top: -0.375rem;
border-radius: 0.375rem;
background: var(--color-error);
animation: recording-blink-like-macos 1.5s infinite; animation: recording-blink-like-macos 1.5s infinite;
} }
@ -586,12 +614,17 @@
line-height: 2.875rem; line-height: 2.875rem;
} }
} }
@media (max-width: 600px) {
--action-button-size: 2.875rem;
--action-button-compact-fix: -0.6875rem;
}
} }
.symbol-menu-trigger { .symbol-menu-trigger {
left: -1rem;
bottom: 0;
position: absolute; position: absolute;
bottom: 0;
left: -1rem;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
@ -606,9 +639,9 @@
} }
.input-scroller { .input-scroller {
overflow: hidden;
min-height: var(--base-height, 3.5rem); min-height: var(--base-height, 3.5rem);
max-height: 26rem; max-height: 26rem;
overflow: hidden;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: height 100ms ease; transition: height 100ms ease;
@ -617,11 +650,6 @@
overflow-y: auto; overflow-y: auto;
} }
@media (max-width: 600px) {
min-height: 2.875rem;
max-height: 16rem;
}
& > .input-scroller-content { & > .input-scroller-content {
position: relative; position: relative;
} }
@ -631,11 +659,13 @@
} }
.emoji { .emoji {
pointer-events: none;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin: 0 1px -5px; margin: 0 1px -5px;
vertical-align: 0; vertical-align: 0;
pointer-events: none;
} }
.custom-emoji { .custom-emoji {
@ -653,6 +683,11 @@
vertical-align: bottom; vertical-align: bottom;
} }
} }
@media (max-width: 600px) {
min-height: 2.875rem;
max-height: 16rem;
}
} }
#message-input-text, #message-input-text,
@ -662,25 +697,27 @@
flex-grow: 1; flex-grow: 1;
.form-control { .form-control {
padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem;
overflow: hidden;
height: auto;
line-height: 1.375;
font-family: var(--font-family);
unicode-bidi: plaintext; unicode-bidi: plaintext;
text-align: initial; overflow: hidden;
font-size: var(--composer-text-size, 1rem);
background: transparent !important; height: auto;
padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
font-family: var(--font-family);
font-size: var(--composer-text-size, 1rem);
line-height: 1.375;
text-align: initial;
background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
caret-color: var(--color-text); caret-color: var(--color-text);
&.touched { &.touched {
& ~ .placeholder-text { & ~ .placeholder-text {
opacity: 0;
transform: translateX(1rem); transform: translateX(1rem);
opacity: 0;
} }
} }
@ -690,27 +727,32 @@
} }
.placeholder-star-icon { .placeholder-star-icon {
line-height: 1;
margin-inline-end: 0.0625rem;
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
margin-inline-end: 0.0625rem;
line-height: 1;
} }
.forced-placeholder, .forced-placeholder,
.placeholder-text { .placeholder-text {
display: inline-flex;
align-items: center;
position: absolute;
color: var(--color-placeholders);
pointer-events: none; pointer-events: none;
unicode-bidi: plaintext;
text-align: initial; position: absolute;
line-height: 1.3125;
font-size: var(--composer-text-size, 1rem);
top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2); top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2);
bottom: auto; bottom: auto;
white-space: nowrap;
unicode-bidi: plaintext;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; display: inline-flex;
align-items: center;
max-width: 100%; max-width: 100%;
font-size: var(--composer-text-size, 1rem);
line-height: 1.3125;
color: var(--color-placeholders);
text-align: initial;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 200ms ease-out, transform 200ms ease-out; transition: opacity 200ms ease-out, transform 200ms ease-out;
&.with-icon { &.with-icon {
@ -747,8 +789,8 @@
} }
.text-entity-link { .text-entity-link {
color: var(--color-links) !important;
cursor: var(--custom-cursor, default); cursor: var(--custom-cursor, default);
color: var(--color-links) !important;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -759,15 +801,17 @@
} }
.spoiler { .spoiler {
background-image: url("../../assets/spoiler-dots-black.png");
background-size: auto min(100%, 1.125rem);
border-radius: 0.5rem;
padding: 0 0.3125rem 0.125rem 0.3125rem; padding: 0 0.3125rem 0.125rem 0.3125rem;
border-radius: 0.5rem;
text-shadow: text-shadow:
-2px -2px 0 var(--color-background), -2px -2px 0 var(--color-background),
2px -2px 0 var(--color-background), 2px -2px 0 var(--color-background),
-2px 2px 0 var(--color-background), -2px 2px 0 var(--color-background),
2px 2px 0 var(--color-background); 2px 2px 0 var(--color-background);
background-image: url("../../assets/spoiler-dots-black.png");
background-size: auto min(100%, 1.125rem);
} }
html.theme-dark & .spoiler { html.theme-dark & .spoiler {
@ -775,25 +819,30 @@
} }
.clone { .clone {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
pointer-events: none; pointer-events: none;
position: absolute;
z-index: -10; z-index: -10;
top: 0;
right: 0;
left: 0;
unicode-bidi: plaintext; unicode-bidi: plaintext;
text-align: initial; text-align: initial;
opacity: 0;
} }
} }
#message-input-text { #message-input-text {
.form-control { .form-control {
margin-bottom: 0;
line-height: 1.3125;
padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
white-space: pre-wrap;
height: auto; height: auto;
margin-bottom: 0;
padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
line-height: 1.3125;
white-space: pre-wrap;
@media (max-width: 600px) { @media (max-width: 600px) {
padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
@ -811,8 +860,8 @@
&:not(:only-child) { &:not(:only-child) {
.form-control { .form-control {
padding-left: 0;
padding-right: 0; padding-right: 0;
padding-left: 0;
@media (min-width: 600px) { @media (min-width: 600px) {
padding-left: 0.5rem; padding-left: 0.5rem;
@ -858,23 +907,20 @@
} }
.unlock-button { .unlock-button {
width: auto;
height: auto;
margin-left: 0.4375rem;
padding-top: 0.125rem;
padding-right: 0.4375rem;
padding-bottom: 0.125rem;
padding-left: 0.4375rem;
color: var(--color-text);
text-transform: lowercase;
&:hover, &:hover,
&.active { &.active {
background: var(--color-chat-hover); background: var(--color-chat-hover);
} }
color: var(--color-text);
width: auto;
height: auto;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
padding-right: 0.4375rem;
padding-left: 0.4375rem;
margin-left: 0.4375rem;
text-transform: lowercase;
} }
} }
@ -886,36 +932,37 @@
top: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2); top: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
left: 0.875rem; left: 0.875rem;
@media (max-width: 600px) {
top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
}
&.is-need-premium { &.is-need-premium {
pointer-events: auto; pointer-events: auto;
} }
@media (max-width: 600px) {
top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
}
} }
.composer-tooltip { .composer-tooltip {
scrollbar-gutter: stable;
position: absolute; position: absolute;
bottom: calc(100% + 0.5rem); bottom: calc(100% + 0.5rem);
left: 0; left: 0;
width: 100%; transform-origin: bottom;
background: var(--color-background); transform: translateY(1.5rem);
border-radius: var(--border-radius-messages);
padding: 0.5rem;
max-height: 15rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 1px 2px var(--color-default-shadow); width: 100%;
max-height: 15rem;
padding: 0.5rem;
border-radius: var(--border-radius-messages);
opacity: 0; opacity: 0;
transform: translateY(1.5rem); background: var(--color-background);
transform-origin: bottom; box-shadow: 0 1px 2px var(--color-default-shadow);
transition: opacity var(--layer-transition), transform var(--layer-transition);
scrollbar-gutter: stable; transition: opacity var(--layer-transition), transform var(--layer-transition);
@include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.adapt-padding-to-scrollbar(0.5rem);
@ -924,8 +971,8 @@
} }
&.open { &.open {
opacity: 1;
transform: translateY(0); transform: translateY(0);
opacity: 1;
} }
.Loading { .Loading {

2
src/components/common/CountryPickerModal.module.scss
View File

@ -23,6 +23,6 @@
.footer { .footer {
display: flex; display: flex;
justify-content: flex-end;
flex-direction: column; flex-direction: column;
justify-content: flex-end;
} }

22
src/components/common/CustomEmoji.module.scss
View File

@ -1,12 +1,15 @@
.root { .root {
position: relative;
display: inline-flex; display: inline-flex;
flex: 0 0 var(--custom-emoji-size);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
vertical-align: text-bottom;
position: relative;
width: var(--custom-emoji-size); width: var(--custom-emoji-size);
height: var(--custom-emoji-size); height: var(--custom-emoji-size);
flex: 0 0 var(--custom-emoji-size);
vertical-align: text-bottom;
:global(.rlottie-canvas) { :global(.rlottie-canvas) {
display: block; display: block;
@ -25,21 +28,20 @@
.placeholder { .placeholder {
width: 85%; width: 85%;
height: 85%; height: 85%;
background-color: #77777719;
border-radius: 0.3125rem; border-radius: 0.3125rem;
background-color: #77777719;
} }
.thumb { .thumb {
pointer-events: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none;
} }
.media { .media {
user-select: none !important;
width: var(--custom-emoji-size) !important; width: var(--custom-emoji-size) !important;
height: var(--custom-emoji-size) !important; height: var(--custom-emoji-size) !important;
user-select: none !important;
} }
.root, .media, .thumb { .root, .media, .thumb {
@ -47,11 +49,13 @@
} }
.highlight-catch { .highlight-catch {
user-select: auto !important;
position: absolute; position: absolute;
z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
user-select: auto !important;
z-index: 1;
} }

7
src/components/common/CustomEmojiSetsModal.module.scss
View File

@ -1,8 +1,8 @@
.root { .root {
:global { :global {
.modal-dialog { .modal-dialog {
height: 70%;
max-width: 25rem; max-width: 25rem;
height: 70%;
@media (max-width: 600px) { @media (max-width: 600px) {
height: 90%; height: 90%;
@ -39,8 +39,11 @@
.sets { .sets {
position: relative; position: relative;
width: 100%;
overflow-y: auto; overflow-y: auto;
width: 100%;
padding: 0 0.5rem; padding: 0 0.5rem;
text-align: left; text-align: left;
} }

10
src/components/common/DeleteMessageModal.module.scss
View File

@ -10,8 +10,8 @@
.container { .container {
display: flex; display: flex;
align-items: center;
gap: 1rem; gap: 1rem;
align-items: center;
margin-left: -0.5rem; margin-left: -0.5rem;
} }
@ -25,9 +25,9 @@
.actionTitle { .actionTitle {
margin-top: 1.5rem; margin-top: 1.5rem;
color: var(--color-links);
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-links);
} }
.restrictionTitle { .restrictionTitle {
@ -35,8 +35,8 @@
} }
.button { .button {
color: var(--color-links) !important;
padding: 0 !important; padding: 0 !important;
color: var(--color-links) !important;
&:hover { &:hover {
background: none !important; background: none !important;
} }
@ -60,17 +60,17 @@
.restrictionContainer, .restrictionContainer,
.dropdownList { .dropdownList {
margin: 0 -1rem;
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
margin: 0 -1rem;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} }
.restrictionContainerOpen, .restrictionContainerOpen,
.dropdownListOpen { .dropdownListOpen {
margin: 0 -1rem;
max-height: 100vh; max-height: 100vh;
margin: 0 -1rem;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: max-height 0.3s ease-in-out; transition: max-height 0.3s ease-in-out;
} }

2
src/components/common/DotAnimation.scss
View File

@ -3,9 +3,9 @@
align-items: center; align-items: center;
.ellipsis { .ellipsis {
overflow: hidden;
display: flex; display: flex;
width: 1rem; width: 1rem;
overflow: hidden;
&::after { &::after {
content: "..."; content: "...";

9
src/components/common/FakeIcon.scss
View File

@ -1,11 +1,12 @@
.FakeIcon { .FakeIcon {
margin-inline: 0.25rem;
padding: 0.125rem 0.25rem;
border: 1px solid var(--color-error); border: 1px solid var(--color-error);
border-radius: 0.375rem; border-radius: 0.375rem;
color: var(--color-error);
font-size: 0.625rem; font-size: 0.625rem;
padding: 0.125rem 0.25rem;
line-height: initial;
margin-inline: 0.25rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: initial;
color: var(--color-error);
text-transform: capitalize; text-transform: capitalize;
} }

98
src/components/common/File.scss
View File

@ -1,5 +1,6 @@
.File { .File {
--secondary-color: var(--color-text-secondary); --secondary-color: var(--color-text-secondary);
display: flex; display: flex;
align-items: center; align-items: center;
@ -23,13 +24,15 @@
.file-progress, .file-progress,
.file-icon, .file-icon,
.file-preview { .file-preview {
width: 3.375rem;
height: 3.375rem;
border-radius: var(--border-radius-messages-small);
background: var(--color-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3.375rem;
height: 3.375rem;
border-radius: var(--border-radius-messages-small);
background: var(--color-primary);
} }
.file-progress { .file-progress {
@ -39,44 +42,51 @@
} }
.file-icon { .file-icon {
padding: 1rem 0.75rem 0.5rem;
align-items: flex-end;
flex-shrink: 0;
position: relative; position: relative;
flex-shrink: 0;
align-items: flex-end;
padding: 1rem 0.75rem 0.5rem;
color: white; color: white;
clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%); clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%);
transition: clip-path 0.15s ease-in; transition: clip-path 0.15s ease-in;
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
display: block;
border-color: rgba(black, 0.25);
border-style: solid;
border-width: 0.5625rem;
border-bottom-left-radius: 0.25rem;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: border-width 0.15s ease-in;
}
.file-ext { .file-ext {
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
transition: opacity 0.15s; transition: opacity 0.15s;
} }
&::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
border-bottom-left-radius: 0.25rem;
border-color: rgba(black, 0.25);
border-width: 0.5625rem;
border-style: solid;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: border-width 0.15s ease-in;
}
} }
.file-preview { .file-preview {
background: transparent;
overflow: hidden; overflow: hidden;
background: transparent;
& + .action-icon, & + .action-icon,
& + .file-progress { & + .file-progress {
background: rgba(black, 0.5);
border-radius: var(--border-radius-messages-small); border-radius: var(--border-radius-messages-small);
background: rgba(black, 0.5);
} }
img { img {
@ -85,16 +95,21 @@
} }
.action-icon { .action-icon {
color: #fff;
font-size: 1.5rem;
position: absolute; position: absolute;
top: 0; top: 0;
width: 3.375rem;
height: 3.375rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3.375rem;
height: 3.375rem;
font-size: 1.5rem;
color: #fff;
opacity: 0; opacity: 0;
transition: opacity 0.25s; transition: opacity 0.25s;
} }
@ -126,25 +141,28 @@
} }
.file-info { .file-info {
margin-top: 0.1875rem;
margin-right: 0.125rem;
white-space: nowrap;
overflow: hidden; overflow: hidden;
flex-grow: 1; flex-grow: 1;
margin-top: 0.1875rem;
margin-right: 0.125rem;
white-space: nowrap;
& + .Link { & + .Link {
padding-left: 1rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
padding-left: 1rem;
white-space: nowrap; white-space: nowrap;
} }
} }
.file-title { .file-title {
font-size: 1rem;
line-height: 1.5rem;
font-weight: var(--font-weight-medium);
overflow: hidden; overflow: hidden;
font-size: 1rem;
font-weight: var(--font-weight-medium);
line-height: 1.5rem;
text-overflow: ellipsis; text-overflow: ellipsis;
.emoji { .emoji {
@ -153,11 +171,13 @@
} }
.file-subtitle { .file-subtitle {
overflow: hidden;
max-width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 0.9375rem; line-height: 0.9375rem;
color: var(--secondary-color); color: var(--secondary-color);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
span + span { span + span {
@ -205,22 +225,22 @@
.file-progress, .file-progress,
.file-icon, .file-icon,
.file-preview { .file-preview {
margin-left: 0.75rem;
margin-right: 0; margin-right: 0;
margin-left: 0.75rem;
} }
.file-info { .file-info {
text-align: right; text-align: right;
& + .Link { & + .Link {
padding-left: 0;
padding-right: 1rem; padding-right: 1rem;
padding-left: 0;
} }
} }
.action-icon { .action-icon {
left: auto;
right: 0; right: 0;
left: auto;
} }
} }
} }

9
src/components/common/FullNameTitle.module.scss
View File

@ -1,7 +1,7 @@
.root { .root {
display: flex !important; display: flex !important;
align-items: center;
gap: 0.25rem; gap: 0.25rem;
align-items: center;
:global(.custom-emoji) { :global(.custom-emoji) {
color: var(--color-primary); color: var(--color-primary);
@ -15,18 +15,19 @@
} }
.statusTransition { .statusTransition {
height: 1.5em !important;
width: 1.5em !important; width: 1.5em !important;
height: 1.5em !important;
} }
} }
.fullName { .fullName {
font-size: 1em; overflow: hidden;
margin-bottom: 0; margin-bottom: 0;
font-size: 1em;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
&.canCopy { &.canCopy {
pointer-events: all; pointer-events: all;

19
src/components/common/GifButton.scss
View File

@ -1,10 +1,13 @@
.GifButton { .GifButton {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 6.25rem; height: 6.25rem;
background-color: transparent; background-color: transparent;
position: relative;
&:hover { &:hover {
.gif-unsave-button { .gif-unsave-button {
@ -36,33 +39,39 @@
} }
.preview, video { .preview, video {
user-select: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
-webkit-touch-callout: none; -webkit-touch-callout: none;
user-select: none;
} }
.Spinner { .Spinner {
position: absolute;
pointer-events: none; pointer-events: none;
position: absolute;
} }
.gif-unsave-button { .gif-unsave-button {
position: absolute; position: absolute;
z-index: 1;
top: 0.25rem; top: 0.25rem;
right: 0.25rem; right: 0.25rem;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
padding: 0.125rem; padding: 0.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: 0.15s opacity ease-in-out;
opacity: 0; opacity: 0;
z-index: 1;
transition: 0.15s opacity ease-in-out;
&-icon { &-icon {
font-size: 0.75rem; font-size: 0.75rem;

10
src/components/common/LastMessageMeta.scss
View File

@ -1,14 +1,16 @@
.LastMessageMeta { .LastMessageMeta {
margin-right: 0.1875rem;
flex-shrink: 0;
font-size: 0.75rem;
display: flex; display: flex;
flex-shrink: 0;
align-items: center; align-items: center;
margin-right: 0.1875rem;
font-size: 0.75rem;
.MessageOutgoingStatus { .MessageOutgoingStatus {
color: var(--color-text-meta-colored);
margin-right: 0.125rem; margin-right: 0.125rem;
font-size: 1.125rem; font-size: 1.125rem;
color: var(--color-text-meta-colored);
body.is-ios & { body.is-ios & {
margin-bottom: -0.125rem; margin-bottom: -0.125rem;

6
src/components/common/LinkField.module.scss
View File

@ -11,10 +11,10 @@
.moreMenu, .copy { .moreMenu, .copy {
position: absolute; position: absolute;
right: 0.5rem;
top: 50%;
transform: translate(0, -50%);
z-index: 1; z-index: 1;
top: 50%;
right: 0.5rem;
transform: translate(0, -50%);
} }
.title { .title {

12
src/components/common/ManageUsernames.module.scss
View File

@ -1,16 +1,16 @@
@use "../../styles/mixins"; @use "../../styles/mixins";
.container { .container {
padding: 1.5rem 1.5rem 0;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
padding: 1.5rem 1.5rem 0;
@include mixins.side-panel-section; @include mixins.side-panel-section;
} }
.header { .header {
position: relative;
font-size: 1rem; font-size: 1rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
position: relative;
&[dir="rtl"] { &[dir="rtl"] {
text-align: right; text-align: right;
@ -18,12 +18,12 @@
} }
.description { .description {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 0; margin-bottom: 0;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
} }
.sortableContainer { .sortableContainer {
@ -31,9 +31,9 @@
} }
.item { .item {
margin-right: -1rem;
margin-bottom: 0; margin-bottom: 0;
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem;
:global(.multiline-item) { :global(.multiline-item) {
padding-inline-end: 3rem; padding-inline-end: 3rem;

24
src/components/common/Media.scss
View File

@ -1,28 +1,36 @@
.Media { .Media {
cursor: var(--custom-cursor, pointer);
position: relative;
overflow: hidden;
height: 0; height: 0;
padding-bottom: 100%; padding-bottom: 100%;
overflow: hidden;
position: relative;
cursor: var(--custom-cursor, pointer);
.video-duration { .video-duration {
position: absolute; position: absolute;
left: 0.25rem;
top: 0.25rem; top: 0.25rem;
background: rgba(0, 0, 0, 0.25); left: 0.25rem;
color: #fff;
font-size: 0.75rem;
padding: 0 0.3125rem; padding: 0 0.3125rem;
border-radius: 0.1875rem; border-radius: 0.1875rem;
font-size: 0.75rem;
line-height: 1.125rem; line-height: 1.125rem;
color: #fff;
background: rgba(0, 0, 0, 0.25);
} }
.media-miniature { .media-miniature {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }

86
src/components/common/MediaSpoiler.module.scss
View File

@ -1,17 +1,18 @@
.root { .root {
--click-shift-x: 0px;
--click-shift-y: 0px;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-text-secondary); // Fallback before canvas is prepared background-color: var(--color-text-secondary); // Fallback before canvas is prepared
--click-shift-x: 0px;
--click-shift-y: 0px;
} }
.mask-animation:global(.closing) { .mask-animation:global(.closing) {
mask-image: url("../../assets/spoilers/mask.svg"), linear-gradient(#ffffff, #ffffff);
-webkit-mask-composite: destination-out; -webkit-mask-composite: destination-out;
mask-composite: exclude; mask-composite: exclude;
mask-image: url("../../assets/spoilers/mask.svg"), linear-gradient(#ffffff, #ffffff);
mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center; mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 0%; mask-size: 0%;
@ -41,6 +42,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y));
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -48,7 +51,48 @@
background-size: var(--background-size) var(--background-size); background-size: var(--background-size) var(--background-size);
transition: transform 500ms ease-in; transition: transform 500ms ease-in;
transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y));
&::before {
--x-direction: 0;
--y-direction: var(--background-size);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--background-url);
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
background-size: var(--background-size) var(--background-size);
animation: 2s linear -0.8s infinite opacity-breath;
}
&::after {
--x-direction: calc(-1 * var(--background-size));
--y-direction: calc(-1 * var(--background-size));
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--background-url);
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
background-size: var(--background-size) var(--background-size);
animation: 2s linear -1.5s infinite opacity-breath;
}
@media (-webkit-min-device-pixel-ratio: 2) { @media (-webkit-min-device-pixel-ratio: 2) {
--background-url: url("../../assets/spoilers/turbulence_2x.png"); --background-url: url("../../assets/spoilers/turbulence_2x.png");
@ -57,38 +101,6 @@
@media (-webkit-min-device-pixel-ratio: 3) { @media (-webkit-min-device-pixel-ratio: 3) {
--background-url: url("../../assets/spoilers/turbulence_3x.png"); --background-url: url("../../assets/spoilers/turbulence_3x.png");
} }
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--background-url);
background-size: var(--background-size) var(--background-size);
--x-direction: 0;
--y-direction: var(--background-size);
animation: 2s linear -0.8s infinite opacity-breath;
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--background-url);
background-size: var(--background-size) var(--background-size);
--x-direction: calc(-1 * var(--background-size));
--y-direction: calc(-1 * var(--background-size));
animation: 2s linear -1.5s infinite opacity-breath;
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}
} }
:global(body:not(.no-page-transitions)) .dots { :global(body:not(.no-page-transitions)) .dots {

20
src/components/common/MessageOutgoingStatus.scss
View File

@ -1,10 +1,12 @@
.MessageOutgoingStatus { .MessageOutgoingStatus {
width: 1.1875rem;
height: 1.1875rem;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
line-height: 1;
width: 1.1875rem;
height: 1.1875rem;
font-size: 1.1875rem; font-size: 1.1875rem;
line-height: 1;
.icon-message-succeeded { .icon-message-succeeded {
padding-left: 0.125rem; padding-left: 0.125rem;
@ -17,17 +19,21 @@
.MessageOutgoingStatus--failed::before { .MessageOutgoingStatus--failed::before {
content: ""; content: "";
display: block;
position: absolute; position: absolute;
inset: 0.25rem; inset: 0.25rem;
display: block;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
} }
.icon-message-failed { .icon-message-failed {
background: none;
color: var(--color-error);
z-index: 1;
position: relative; position: relative;
z-index: 1;
color: var(--color-error);
background: none;
} }
} }

21
src/components/common/MiniTable.module.scss
View File

@ -1,15 +1,15 @@
.root { .root {
display: grid;
grid-template-columns: min-content 1fr;
justify-content: center;
gap: 0.375rem;
font-size: 0.875rem;
margin-top: 0.5rem;
text-align: initial;
position: relative; position: relative;
display: grid;
grid-template-columns: min-content 1fr;
gap: 0.375rem;
justify-content: center;
margin-top: 0.5rem;
font-size: 0.875rem;
text-align: initial;
white-space: nowrap; white-space: nowrap;
} }
@ -19,10 +19,11 @@
} }
.value { .value {
overflow: hidden;
justify-self: flex-start; justify-self: flex-start;
width: 100%; // Grid ellipsis hack width: 100%; // Grid ellipsis hack
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

10
src/components/common/NothingFound.scss
View File

@ -13,10 +13,12 @@
} }
.description { .description {
color: var(--color-text-secondary);
font-size: 0.875rem;
text-align: center;
margin: 1rem 0 0;
unicode-bidi: plaintext; unicode-bidi: plaintext;
margin: 1rem 0 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;
} }
} }

21
src/components/common/PasswordMonkey.scss
View File

@ -1,17 +1,13 @@
#monkey { #monkey {
position: relative; position: relative;
display: block; display: block;
margin-left: auto;
margin-right: auto;
width: 7.5rem; width: 7.5rem;
height: 7.5rem; height: 7.5rem;
margin-right: auto;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
margin-left: auto;
@media (min-width: 600px) and (min-height: 450px) {
width: 10rem;
height: 10rem;
margin-bottom: 2.5rem;
}
&.big { &.big {
width: 10rem; width: 10rem;
@ -20,8 +16,9 @@
.AnimatedSticker { .AnimatedSticker {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -36,4 +33,10 @@
background: url('../../assets/monkey.svg') center; background: url('../../assets/monkey.svg') center;
background-size: 100%; background-size: 100%;
} }
@media (min-width: 600px) and (min-height: 450px) {
width: 10rem;
height: 10rem;
margin-bottom: 2.5rem;
}
} }

28
src/components/common/PeerBadge.module.scss
View File

@ -1,44 +1,48 @@
.root { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 0.5rem; gap: 0.5rem;
align-items: center;
} }
.top { .top {
position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
position: relative;
} }
.badge { .badge {
position: absolute; position: absolute;
z-index: 1;
bottom: -0.5rem; bottom: -0.5rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1;
display: flex; display: flex;
align-items: center;
gap: 0.125rem; gap: 0.125rem;
align-items: center;
padding: 0.25rem;
border: 2px solid var(--color-background);
border-radius: 1rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1; line-height: 1;
color: var(--color-white);
white-space: nowrap; white-space: nowrap;
padding: 0.25rem;
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-white);
border: 2px solid var(--color-background);
border-radius: 1rem;
} }
.text { .text {
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-size: 0.875rem;
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
font-size: 0.875rem;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
} }

59
src/components/common/PeerChip.module.scss
View File

@ -1,15 +1,20 @@
.root { .root {
cursor: var(--custom-cursor, pointer);
position: relative;
display: flex; display: flex;
flex-shrink: 1;
align-items: center; align-items: center;
background: var(--color-chat-hover);
min-width: 0;
height: 2rem; height: 2rem;
margin-inline: 0.25rem; margin-inline: 0.25rem;
padding-right: 0.75rem; padding-right: 0.75rem;
border-radius: 1rem; border-radius: 1rem;
cursor: var(--custom-cursor, pointer);
position: relative; background: var(--color-chat-hover);
min-width: 0;
flex-shrink: 1;
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
&.minimized { &.minimized {
@ -44,10 +49,13 @@
.avatar, .avatar,
.iconWrapper { .iconWrapper {
flex-shrink: 0;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
opacity: 1; opacity: 1;
flex-shrink: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
} }
@ -55,54 +63,63 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.375rem; padding: 0.375rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-primary);
color: white; color: white;
background-color: var(--color-primary);
.icon { .icon {
font-size: 1.25rem;
position: relative; position: relative;
top: -1px; top: -1px;
font-size: 1.25rem;
} }
} }
.name { .name {
margin-left: 0.5rem;
white-space: nowrap;
min-width: 0; min-width: 0;
margin-left: 0.5rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
:global(.emoji.emoji-small) { :global(.emoji.emoji-small) {
width: 1.125rem; width: 1.125rem;
height: 1.125rem; height: 1.125rem;
background-size: 1.125rem;
vertical-align: -4px; vertical-align: -4px;
background-size: 1.125rem;
} }
} }
.remove { .remove {
position: absolute; position: absolute;
left: 0; z-index: 1;
top: 0; top: 0;
width: 2rem; left: 0;
height: 2rem;
border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--color-error);
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1.5rem; font-size: 1.5rem;
color: white; color: white;
opacity: 0; opacity: 0;
background-color: var(--color-error);
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
z-index: 1;
} }
&.squareAvatar { &.squareAvatar {
--border-radius-forum-avatar: 0.625rem;
border-start-start-radius: 0.625rem; border-start-start-radius: 0.625rem;
border-end-start-radius: 0.625rem; border-end-start-radius: 0.625rem;
--border-radius-forum-avatar: 0.625rem;
&.minimized, .remove { &.minimized, .remove {
border-radius: 0.625rem; border-radius: 0.625rem;
@ -110,8 +127,8 @@
} }
&[dir="rtl"] { &[dir="rtl"] {
padding-left: 1rem;
padding-right: 0; padding-right: 0;
padding-left: 1rem;
&.minimized { &.minimized {
padding-right: 0; padding-right: 0;
@ -119,13 +136,13 @@
} }
.name { .name {
margin-left: 0;
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0;
} }
.remove { .remove {
left: auto;
right: 0; right: 0;
left: auto;
} }
} }
} }

14
src/components/common/PeerColorWrapper.module.scss
View File

@ -1,25 +1,31 @@
.root { .root {
--peer-color-wrapper-bar-color: var(--bar-gradient, var(--accent-color));
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-inline-start: 0.5625rem; padding-inline-start: 0.5625rem;
padding-inline-end: 0.375rem; padding-inline-end: 0.375rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: var(--accent-background-color);
color: var(--accent-color); color: var(--accent-color);
--peer-color-wrapper-bar-color: var(--bar-gradient, var(--accent-color)); background-color: var(--accent-background-color);
&::before { &::before {
content: ""; content: "";
display: block;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
inset-inline-start: 0; inset-inline-start: 0;
display: block;
width: 0.1875rem; width: 0.1875rem;
background: var(--peer-color-wrapper-bar-color); background: var(--peer-color-wrapper-bar-color);
} }
} }

52
src/components/common/PremiumProgress.module.scss
View File

@ -1,10 +1,14 @@
.root { .root {
--percent: calc(var(--progress, 0.5) * 100%); --percent: calc(var(--progress, 0.5) * 100%);
display: flex;
position: relative; position: relative;
display: flex;
height: 2rem; height: 2rem;
background: var(--color-background-menu-separator);
border-radius: 0.625rem; border-radius: 0.625rem;
background: var(--color-background-menu-separator);
} }
.withBadge { .withBadge {
@ -12,13 +16,15 @@
} }
.badgeContainer { .badgeContainer {
display: flex;
justify-content: center;
position: absolute; position: absolute;
top: -1.5rem; top: -1.5rem;
left: 0;
right: 0; right: 0;
left: 0;
transform: translate(calc(var(--shift-x) * 100% - 50%), -20px); transform: translate(calc(var(--shift-x) * 100% - 50%), -20px);
display: flex;
justify-content: center;
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
animation: slide-in 0.5s ease-in-out; animation: slide-in 0.5s ease-in-out;
} }
@ -34,11 +40,14 @@
} }
.floating-badge-wrapper { .floating-badge-wrapper {
animation: rotate-in 0.5s ease-in-out;
border-radius: 0.5rem;
height: 2.6875rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 2.6875rem;
border-radius: 0.5rem;
animation: rotate-in 0.5s ease-in-out;
} }
@keyframes rotate-in { @keyframes rotate-in {
@ -57,28 +66,33 @@
} }
.floating-badge { .floating-badge {
position: relative;
z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #ffffff;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 1rem; border-radius: 1rem;
color: #ffffff;
background-color: #7E85FF; background-color: #7E85FF;
position: relative;
z-index: 1;
} }
.floating-badge-triangle { .floating-badge-triangle {
display: inline-block;
position: absolute; position: absolute;
bottom: -4px; bottom: -4px;
left: calc(var(--tail-position, 0.5) * 100%); left: calc(var(--tail-position, 0.5) * 100%);
transform: translateX(-50%); transform: translateX(-50%);
display: inline-block;
} }
.floating-badge-icon { .floating-badge-icon {
font-size: 1.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
font-size: 1.25rem;
} }
.floating-badge-value { .floating-badge-value {
@ -90,8 +104,10 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
@ -105,14 +121,18 @@
.progress { .progress {
--multiplier: calc(1 / var(--progress) - 1); --multiplier: calc(1 / var(--progress) - 1);
overflow: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
bottom: 0; bottom: 0;
left: 0;
overflow: hidden;
width: max(var(--percent), 0.625rem); width: max(var(--percent), 0.625rem);
border-top-left-radius: 0.625rem; border-top-left-radius: 0.625rem;
border-bottom-left-radius: 0.625rem; border-bottom-left-radius: 0.625rem;
background-image: var(--premium-gradient); background-image: var(--premium-gradient);
background-size: calc(1 / var(--progress) * 100%) 100%; background-size: calc(1 / var(--progress) * 100%) 100%;
@ -132,8 +152,8 @@
.primary { .primary {
.progress { .progress {
background-image: none;
background-color: var(--color-primary); background-color: var(--color-primary);
background-image: none;
} }
.floating-badge { .floating-badge {

8
src/components/common/PrivacySettingsNoticeModal.module.scss
View File

@ -5,9 +5,9 @@
} }
.icon { .icon {
margin-bottom: 0.25rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-primary); background-color: var(--color-primary);
margin-bottom: 0.25rem;
} }
.header { .header {
@ -20,20 +20,20 @@
text-align: center; text-align: center;
@media (min-width: 600px) { @media (min-width: 600px) {
margin-left: 0.75rem;
margin-right: 0.75rem; margin-right: 0.75rem;
margin-left: 0.75rem;
} }
} }
.separator { .separator {
width: 80%;
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
width: 80%;
} }
.button { .button {
text-transform: none;
border-radius: var(--border-radius-default-tiny); border-radius: var(--border-radius-default-tiny);
text-transform: none;
} }
.closeButton { .closeButton {

121
src/components/common/ProfileInfo.module.scss
View File

@ -1,28 +1,36 @@
.fallbackPhoto { .fallbackPhoto {
pointer-events: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
opacity: 0; opacity: 0;
pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
} }
.fallbackPhotoContents { .fallbackPhotoContents {
display: flex; pointer-events: none;
font-size: 0.75rem;
color: var(--color-white);
opacity: 0.5;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
user-select: none; user-select: none;
display: flex;
align-items: center; align-items: center;
height: 1.5rem; height: 1.5rem;
pointer-events: none;
font-size: 0.75rem;
color: var(--color-white);
opacity: 0.5;
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
@ -44,14 +52,15 @@
} }
.photoWrapper { .photoWrapper {
width: 100%;
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0;
overflow: hidden; overflow: hidden;
width: 100%;
> :global(.Transition) { > :global(.Transition) {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -60,22 +69,26 @@
.photoDashes { .photoDashes {
position: absolute; position: absolute;
z-index: 2;
top: 0.5rem;
left: 0;
display: flex;
width: 100%; width: 100%;
height: 0.125rem; height: 0.125rem;
padding: 0 0.375rem; padding: 0 0.375rem;
z-index: 2;
display: flex;
top: 0.5rem;
left: 0;
} }
.photoDash { .photoDash {
flex: 1 1 auto; flex: 1 1 auto;
background-color: var(--color-white);
opacity: 0.25;
border-radius: 0.125rem;
margin: 0 0.125rem; margin: 0 0.125rem;
border-radius: 0.125rem;
opacity: 0.25;
background-color: var(--color-white);
transition: opacity 300ms ease; transition: opacity 300ms ease;
&_current { &_current {
@ -84,21 +97,25 @@
} }
.navigation { .navigation {
cursor: var(--custom-cursor, pointer);
position: absolute; position: absolute;
z-index: 1;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 25%; width: 25%;
border: none;
padding: 0;
margin: 0; margin: 0;
padding: 0;
border: none;
appearance: none; appearance: none;
opacity: 0.25;
background: transparent no-repeat; background: transparent no-repeat;
background-size: 1.25rem; background-size: 1.25rem;
opacity: 0.25;
transition: opacity 0.15s;
outline: none !important; outline: none !important;
cursor: var(--custom-cursor, pointer);
z-index: 1; transition: opacity 0.15s;
&:global(:hover), &:global(:hover),
:global(.is-touch-env) & { :global(.is-touch-env) & {
@ -111,8 +128,8 @@
background-position: 1.25rem 50%; background-position: 1.25rem 50%;
&[dir="rtl"] { &[dir="rtl"] {
left: auto;
right: 0; right: 0;
left: auto;
transform: scaleX(-1); transform: scaleX(-1);
} }
} }
@ -123,26 +140,31 @@
background-position: calc(100% - 1.25rem) 50%; background-position: calc(100% - 1.25rem) 50%;
&[dir="rtl"] { &[dir="rtl"] {
left: 0;
right: auto; right: auto;
left: 0;
transform: scaleX(-1); transform: scaleX(-1);
} }
} }
} }
.info { .info {
pointer-events: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%;
min-height: 100px;
padding: 0 1.5rem 0.5rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
color: var(--color-white);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
pointer-events: none;
width: 100%;
min-height: 100px;
padding: 0 1.5rem 0.5rem;
color: var(--color-white);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
:global(.statusSparkles) { :global(.statusSparkles) {
color: var(--color-white) !important; color: var(--color-white) !important;
@ -150,23 +172,23 @@
&:dir(rtl) { &:dir(rtl) {
.status { .status {
text-align: right;
unicode-bidi: plaintext; unicode-bidi: plaintext;
text-align: right;
} }
} }
&[dir="rtl"] { &[dir="rtl"] {
.status { .status {
text-align: right;
unicode-bidi: plaintext; unicode-bidi: plaintext;
text-align: right;
} }
} }
} }
.status { .status {
font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.875rem;
} }
.user-status { .user-status {
@ -175,17 +197,22 @@
.get-status { .get-status {
--blured-background-color: #c4c9cc42; --blured-background-color: #c4c9cc42;
cursor: var(--custom-cursor, pointer);
font-size: 0.75rem;
margin-inline-start: 0.375rem;
border-radius: 1rem;
padding: 0.1875rem 0.375rem;
pointer-events: all; pointer-events: all;
cursor: var(--custom-cursor, pointer);
margin-inline-start: 0.375rem;
padding: 0.1875rem 0.375rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
transition: 150ms filter ease-in;
opacity: 0.8;
background: var(--blured-background-color); background: var(--blured-background-color);
backdrop-filter: blur(100px); backdrop-filter: blur(100px);
opacity: 0.8;
transition: 150ms filter ease-in;
&:hover { &:hover {
filter: brightness(1.1); filter: brightness(1.1);
@ -199,17 +226,17 @@
} }
.topicTitle { .topicTitle {
margin: 0.5rem 0 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.5rem; line-height: 1.5rem;
text-align: center; text-align: center;
margin: 0.5rem 0 0;
} }
.topicIcon { .topicIcon {
margin: auto; display: flex !important;
width: 7.5rem !important; width: 7.5rem !important;
height: 7.5rem !important; height: 7.5rem !important;
display: flex !important; margin: auto;
&:global(.general-forum-icon) { &:global(.general-forum-icon) {
font-size: 7.5rem; font-size: 7.5rem;
@ -219,7 +246,6 @@
.topicIconTitle { .topicIconTitle {
font-size: 3rem !important; font-size: 3rem !important;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
:global(.emoji-small) { :global(.emoji-small) {
@ -229,9 +255,10 @@
} }
.topicMessagesCounter { .topicMessagesCounter {
margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin: 0;
text-align: center; text-align: center;
} }

19
src/components/common/ProfileInfo.scss
View File

@ -1,29 +1,30 @@
// This class is used in `ghostAnimation`, so we need to keep it global // This class is used in `ghostAnimation`, so we need to keep it global
.ProfileInfo { .ProfileInfo {
aspect-ratio: 1 / 1;
position: relative; position: relative;
aspect-ratio: 1 / 1;
@supports not (aspect-ratio: 1 / 1) { @supports not (aspect-ratio: 1 / 1) {
&::before { &::before {
content: "";
float: left; float: left;
padding-top: 100%; padding-top: 100%;
content: "";
} }
&::after { &::after {
display: block;
content: ""; content: "";
clear: both; clear: both;
display: block;
} }
} }
.fullName { .fullName {
font-weight: var(--font-weight-medium);
font-size: 1.25rem;
line-height: 1.375rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.25rem;
font-weight: var(--font-weight-medium);
line-height: 1.375rem;
overflow-wrap: anywhere;
white-space: pre-wrap;
} }
.VerifiedIcon, .VerifiedIcon,
@ -44,8 +45,8 @@
.custom-emoji { .custom-emoji {
--custom-emoji-size: 1.5rem; --custom-emoji-size: 1.5rem;
color: var(--color-white) !important;
pointer-events: auto; pointer-events: auto;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
color: var(--color-white) !important;
} }
} }

12
src/components/common/ProfilePhoto.scss
View File

@ -1,13 +1,13 @@
.ProfilePhoto { .ProfilePhoto {
width: 100%;
height: 100%;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
position: relative; position: relative;
width: 100%;
height: 100%;
.avatar-media { .avatar-media {
position: relative;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
position: relative;
} }
.spinner-wrapper { .spinner-wrapper {
@ -20,12 +20,15 @@
&.replies-bot-account, &.replies-bot-account,
&.no-photo, &.no-photo,
&.saved-messages { &.saved-messages {
cursor: var(--custom-cursor, default);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-white); color: var(--color-white);
background: linear-gradient(var(--color-white) -125%, var(--color-user)); background: linear-gradient(var(--color-white) -125%, var(--color-user));
cursor: var(--custom-cursor, default);
} }
&.no-photo { &.no-photo {
@ -43,6 +46,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

31
src/components/common/SliderDots.module.scss
View File

@ -1,32 +1,37 @@
.root { .root {
display: flex;
justify-content: center;
margin: 2rem;
align-items: center;
--fake-translate: calc(8px); --fake-translate: calc(8px);
--dot-width: calc(10px + 8px); --dot-width: calc(10px + 8px);
--start-from: 0; --start-from: 0;
--length: 50; --length: 50;
--count: 8; --count: 8;
--center: calc((var(--length) * var(--dot-width)) / 2); --center: calc((var(--length) * var(--dot-width)) / 2);
transform: transform:
translateX( translateX(
calc(var(--center) - (var(--dot-width) * var(--count) / 2) - (var(--dot-width) * var(--start-from))) calc(var(--center) - (var(--dot-width) * var(--count) / 2) - (var(--dot-width) * var(--start-from)))
); );
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
transition: 0.25s ease-out transform; transition: 0.25s ease-out transform;
} }
.arrow { .arrow {
z-index: 2;
position: absolute; position: absolute;
left: 0.5rem; z-index: 2;
top: 0.5rem; top: 0.5rem;
left: 0.5rem;
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
} }
.right { .right {
left: initial;
right: 0.5rem; right: 0.5rem;
left: initial;
} }
.arrow.arrow-hidden { .arrow.arrow-hidden {
@ -34,13 +39,17 @@
} }
.dot { .dot {
flex: none;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
flex: none;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #DFE1E5;
border-radius: 50%;
margin-right: 10px; margin-right: 10px;
border-radius: 50%;
background: #DFE1E5;
transition: 0.25s ease-in-out opacity; transition: 0.25s ease-in-out opacity;
} }
@ -55,8 +64,8 @@
} }
.invisible { .invisible {
opacity: 0;
pointer-events: none; pointer-events: none;
opacity: 0;
} }
.active { .active {

8
src/components/common/Sparkles.module.scss
View File

@ -1,17 +1,17 @@
.root { .root {
pointer-events: none;
position: absolute; position: absolute;
inset: 0; inset: 0;
line-height: 1; line-height: 1;
pointer-events: none;
} }
.progress { .progress {
--_progress: 0; --_progress: 0;
z-index: 0; z-index: 0;
overflow: hidden;
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.8; opacity: 0.8;
overflow: hidden;
} }
.button { .button {
@ -34,14 +34,14 @@
@keyframes sparkle { @keyframes sparkle {
0% { 0% {
opacity: 0;
transform: translate(0, 0); transform: translate(0, 0);
opacity: 0;
} }
15% { 15% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0;
transform: translate(var(--_shift-x), var(--_shift-y)); transform: translate(var(--_shift-x), var(--_shift-y));
opacity: 0;
} }
} }

82
src/components/common/StickerButton.scss
View File

@ -2,77 +2,86 @@
--custom-emoji-size: 2.25rem; --custom-emoji-size: 2.25rem;
--premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
position: relative;
display: inline-block; display: inline-block;
flex-shrink: 0;
width: 4.5rem; width: 4.5rem;
height: 4.5rem; height: 4.5rem;
border-radius: var(--border-radius-messages-small); border-radius: var(--border-radius-messages-small);
background: transparent no-repeat center; background: transparent no-repeat center;
background-size: contain; background-size: contain;
transition: background-color 0.15s ease, opacity 0.3s ease !important; transition: background-color 0.15s ease, opacity 0.3s ease !important;
position: relative;
flex-shrink: 0;
&.custom-emoji { &.custom-emoji {
color: var(--color-primary);
width: var(--custom-emoji-size); width: var(--custom-emoji-size);
height: var(--custom-emoji-size); height: var(--custom-emoji-size);
margin: 0.3125rem; margin: 0.3125rem;
color: var(--color-primary);
&.status-default { &.status-default {
font-size: 2rem;
padding: 0.125rem; padding: 0.125rem;
font-size: 2rem;
color: var(--color-text); color: var(--color-text);
} }
} }
&.effect-emoji .sticker-locked { &.effect-emoji .sticker-locked {
font-size: 0.75rem;
width: 0.875rem; width: 0.875rem;
height: 0.875rem; height: 0.875rem;
font-size: 0.75rem;
} }
&.set-expand { &.set-expand {
padding: 0;
vertical-align: bottom;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
padding: 0;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
vertical-align: bottom;
} }
.sticker-locked { .sticker-locked {
position: absolute; position: absolute;
bottom: 0; z-index: 2;
right: 0; right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%; border-radius: 50%;
color: white; color: white;
z-index: 2;
opacity: 0.75; opacity: 0.75;
background: var(--premium-gradient); background: var(--premium-gradient);
} }
.sticker-premium { .sticker-premium {
position: absolute; position: absolute;
bottom: 0; z-index: 1;
right: 0; right: 0;
width: 1.25rem; bottom: 0;
height: 1.25rem;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%; border-radius: 50%;
color: white;
background: var(--premium-gradient);
z-index: 1; color: white;
background: var(--premium-gradient);
} }
&.selected { &.selected {
@ -91,12 +100,6 @@
} }
} }
@media (max-width: 600px) {
&, &.custom-emoji {
margin: 0.25rem;
}
}
&.set-button { &.set-button {
width: 2.75rem !important; width: 2.75rem !important;
height: 2.75rem; height: 2.75rem;
@ -114,38 +117,47 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.sticker-media { .sticker-media {
object-fit: contain;
-webkit-touch-callout: none;
user-select: none; user-select: none;
object-fit: contain;
-webkit-touch-callout: none;
} }
.sticker-remove-button { .sticker-remove-button {
position: absolute; position: absolute;
z-index: 2;
top: -0.125rem; top: -0.125rem;
right: -0.125rem; right: -0.125rem;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
padding: 0.125rem; padding: 0.125rem;
z-index: 2;
.icon {
font-size: 1rem;
}
opacity: 0; opacity: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
.icon {
font-size: 1rem;
}
}
@media (max-width: 600px) {
&, &.custom-emoji {
margin: 0.25rem;
}
} }
} }
.sticker-context-menu { .sticker-context-menu {
position: absolute;
cursor: var(--custom-cursor, default); cursor: var(--custom-cursor, default);
position: absolute;
z-index: var(--z-header-menu); z-index: var(--z-header-menu);
.bubble { .bubble {

3
src/components/common/StickerSetCard.scss
View File

@ -1,11 +1,12 @@
.StickerSetCard { .StickerSetCard {
.StickerButton, .StickerButton,
.Button { .Button {
flex: 0 0 2.5rem;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
padding: 0; padding: 0;
flex: 0 0 2.5rem;
} }
.install-button { .install-button {

25
src/components/common/StickerSetModal.scss
View File

@ -4,12 +4,6 @@
max-width: 100%; max-width: 100%;
} }
@media (max-width: 600px) {
.modal-dialog {
width: 20.375rem;
}
}
.modal-header { .modal-header {
padding: 0.5rem; padding: 0.5rem;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
@ -23,8 +17,8 @@
.modal-content { .modal-content {
--emoji-size: 4.5rem; --emoji-size: 4.5rem;
text-align: center;
padding: 0 !important; padding: 0 !important;
text-align: center;
} }
&.custom-emoji .modal-content { &.custom-emoji .modal-content {
@ -37,23 +31,28 @@
.stickers { .stickers {
position: relative; position: relative;
overflow-y: auto;
width: 100%; width: 100%;
height: 19rem; height: 19rem;
max-height: 50vh; max-height: 50vh;
overflow-y: auto;
padding: 0 0.25rem; padding: 0 0.25rem;
text-align: left; text-align: left;
} }
.stickers-grid { .stickers-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem)); grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem));
justify-content: space-between;
row-gap: 0.25rem; row-gap: 0.25rem;
column-gap: var(--symbol-set-gap-size, 0.625rem); column-gap: var(--symbol-set-gap-size, 0.625rem);
text-align: initial; justify-content: space-between;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
text-align: initial;
@media (max-width: 600px) { @media (max-width: 600px) {
grid-gap: 0.5rem; grid-gap: 0.5rem;
} }
@ -75,4 +74,10 @@
height: 22.8125rem; height: 22.8125rem;
max-height: calc(50vh + 3.8125rem); max-height: calc(50vh + 3.8125rem);
} }
@media (max-width: 600px) {
.modal-dialog {
width: 20.375rem;
}
}
} }

3
src/components/common/StickerView.module.scss
View File

@ -1,7 +1,7 @@
.thumb { .thumb {
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1;
&:global(.closing) { &:global(.closing) {
transition-delay: 150ms; transition-delay: 150ms;
@ -20,6 +20,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

36
src/components/common/TopicChip.module.scss
View File

@ -1,30 +1,40 @@
.root { .root {
--custom-emoji-size: 1.125rem; --custom-emoji-size: 1.125rem;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem;
line-height: 1.125rem;
background-color: var(--background-color);
border-radius: var(--border-radius-messages);
color: var(--topic-button-accent-color);
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
position: relative;
display: inline-flex;
gap: 0.25rem;
align-items: center;
padding: 0.25rem;
border-radius: var(--border-radius-messages);
line-height: 1.125rem;
color: var(--topic-button-accent-color);
background-color: var(--background-color);
&::before { &::before {
content: ""; content: "";
display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--topic-button-accent-color);
opacity: 0.15;
transition: opacity 0.15s ease-in-out;
border-radius: var(--border-radius-messages); border-radius: var(--border-radius-messages);
opacity: 0.15;
background-color: var(--topic-button-accent-color);
transition: opacity 0.15s ease-in-out;
} }
&:hover::before { &:hover::before {

19
src/components/common/TopicDefaultIcon.module.scss
View File

@ -1,13 +1,15 @@
.root { .root {
position: relative;
display: inline-flex; display: inline-flex;
flex-shrink: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
vertical-align: middle;
position: relative;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
flex-shrink: 0;
vertical-align: middle;
} }
.icon { .icon {
@ -17,15 +19,16 @@
} }
.title { .title {
z-index: 1;
color: #ffffff;
font-weight: var(--font-weight-medium);
font-size: 0.75em;
line-height: 1;
position: absolute; position: absolute;
z-index: 1;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 0.75em;
font-weight: var(--font-weight-medium);
line-height: 1;
color: #ffffff;
:global(.emoji) { :global(.emoji) {
width: 1em; width: 1em;
height: 1em; height: 1em;

31
src/components/common/UiLoader.module.scss
View File

@ -1,13 +1,15 @@
.mask { .mask {
position: fixed; position: fixed;
z-index: var(--z-ui-loader-mask);
top: 0; top: 0;
left: 0;
right: 0; right: 0;
margin: 0 auto; left: 0;
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: var(--z-ui-loader-mask); margin: 0 auto;
display: flex;
} }
.main { .main {
@ -22,12 +24,14 @@
.left { .left {
flex: 1; flex: 1;
background: var(--color-background);
min-width: 16rem;
width: 33vw; width: 33vw;
min-width: 16rem;
max-width: 26.5rem; max-width: 26.5rem;
height: 100%; height: 100%;
background: var(--color-background);
@media (min-width: 926px) { @media (min-width: 926px) {
max-width: 40vw; max-width: 40vw;
} }
@ -46,17 +50,20 @@
} }
@media (max-width: 600px) { @media (max-width: 600px) {
max-width: none;
width: 100vw !important; width: 100vw !important;
max-width: none;
} }
} }
.middle { .middle {
flex: 3;
border-left: 1px solid var(--color-borders);
position: relative; position: relative;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
flex: 3;
border-left: 1px solid var(--color-borders);
background-size: cover !important; background-size: cover !important;
@media (max-width: 1275px) { @media (max-width: 1275px) {
@ -70,12 +77,14 @@
.right { .right {
position: absolute; position: absolute;
z-index: 1;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1;
height: 100%;
width: var(--right-column-width); width: var(--right-column-width);
height: 100%;
border-left: 1px solid var(--color-borders); border-left: 1px solid var(--color-borders);
background: var(--color-background); background: var(--color-background);
} }

7
src/components/common/VerifiedIcon.scss
View File

@ -1,9 +1,10 @@
.VerifiedIcon { .VerifiedIcon {
--color-fill: var(--color-primary);
--color-checkmark: #fff;
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
--color-fill: var(--color-primary);
--color-checkmark: #fff;
} }

60
src/components/common/WebLink.scss
View File

@ -1,9 +1,11 @@
.WebLink { .WebLink {
position: relative;
min-height: 3rem; min-height: 3rem;
padding: 0.25rem 0 0 3.75rem; padding: 0.25rem 0 0 3.75rem;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.125rem; line-height: 1.125rem;
position: relative;
& + & { & + & {
margin-top: 1.5rem; margin-top: 1.5rem;
@ -11,29 +13,36 @@
&.without-media::before { &.without-media::before {
content: attr(data-initial); content: attr(data-initial);
width: 3rem;
height: 3rem;
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
background-color: var(--color-webpage-initial-background); left: 0;
color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius-messages-small); border-radius: var(--border-radius-messages-small);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-medium);
color: #fff;
text-transform: uppercase;
background-color: var(--color-webpage-initial-background);
} }
.Media { .Media {
cursor: var(--custom-cursor, default) !important;
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
cursor: var(--custom-cursor, default) !important;
padding-bottom: unset !important; padding-bottom: unset !important;
border-radius: var(--border-radius-messages-small) !important; border-radius: var(--border-radius-messages-small) !important;
} }
@ -41,36 +50,39 @@
.site-name, .site-name,
.site-description, .site-description,
.site-title { .site-title {
overflow-wrap: anywhere;
text-align: initial; text-align: initial;
overflow-wrap: anywhere;
} }
.site-name { .site-name {
display: block;
color: var(--color-links);
font-weight: var(--font-weight-normal);
white-space: nowrap;
overflow: hidden; overflow: hidden;
display: block;
font-weight: var(--font-weight-normal);
color: var(--color-links);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.site-title { .site-title {
margin-bottom: 0.0625rem;
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin-bottom: 0.0625rem;
line-height: 1.3125rem; line-height: 1.3125rem;
} }
.sender-name, .sender-name,
.site-description { .site-description {
margin-bottom: 0;
color: var(--color-text-secondary);
line-height: 1.125rem;
max-height: 2.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: 2.25rem;
margin-bottom: 0;
line-height: 1.125rem;
color: var(--color-text-secondary);
} }
.sender-name { .sender-name {
@ -87,8 +99,8 @@
.Media, .Media,
&.without-media::before { &.without-media::before {
left: auto;
right: 0; right: 0;
left: auto;
} }
.content { .content {

34
src/components/common/code/CodeBlock.scss
View File

@ -1,27 +1,33 @@
.CodeBlock { .CodeBlock {
background-color: var(--color-code-bg);
color: var(--color-text);
margin: 0;
padding-block: 0.1875rem;
margin-block: 0.25rem;
border-radius: 0.25rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 0;
margin-block: 0.25rem;
padding-block: 0.1875rem;
border-radius: 0.25rem;
color: var(--color-text);
background-color: var(--color-code-bg);
.code-title { .code-title {
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-medium);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--accent-color);
font-size: calc(var(--message-text-size, 1rem) - 0.125rem); font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
font-weight: var(--font-weight-medium);
color: var(--accent-color);
text-overflow: ellipsis;
white-space: nowrap;
} }
.code-block { .code-block {
overflow: hidden;
margin: 0; margin: 0;
white-space: pre-wrap; white-space: pre-wrap;
overflow: hidden;
&:hover { &:hover {
.code-overlay { .code-overlay {
@ -30,8 +36,8 @@
} }
&.no-word-wrap { &.no-word-wrap {
white-space: pre;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
white-space: pre;
} }
html.theme-light & { html.theme-light & {
@ -83,8 +89,8 @@
} }
.hljs { .hljs {
display: block;
overflow-x: auto; overflow-x: auto;
display: block;
color: var(--color-text); color: var(--color-text);
} }
} }
@ -132,8 +138,8 @@
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: var(--color-comment);
font-style: italic; font-style: italic;
color: var(--color-comment);
} }
.hljs-meta, .hljs-meta,

21
src/components/common/code/CodeOverlay.module.scss
View File

@ -1,22 +1,29 @@
.overlay { .overlay {
pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out;
} }
.copy, .wrap { .copy, .wrap {
cursor: var(--custom-cursor, pointer);
display: flex; display: flex;
font-size: 1.25rem;
margin: 0.125rem;
padding: 0.125rem; padding: 0.125rem;
border-radius: 0.125rem; border-radius: 0.125rem;
margin: 0.125rem;
font-size: 1.25rem;
transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out;
cursor: var(--custom-cursor, pointer);
&:hover, &.wrapOn { &:hover, &.wrapOn {
background-color: var(--color-background-compact-menu-hover); background-color: var(--color-background-compact-menu-hover);
@ -24,18 +31,20 @@
} }
.content { .content {
pointer-events: auto;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.125rem; padding: 0.125rem;
border-bottom-left-radius: 0.25rem;
background-color: var(--color-background-compact-menu); background-color: var(--color-background-compact-menu);
backdrop-filter: blur(1px); backdrop-filter: blur(1px);
border-bottom-left-radius: 0.25rem;
pointer-events: auto;
&.hidden { &.hidden {
display: none; display: none;

82
src/components/common/embedded/EmbeddedMessage.scss
View File

@ -5,23 +5,27 @@
.EmbeddedMessage { .EmbeddedMessage {
--hover-opacity: 0; --hover-opacity: 0;
--hover-background-color: white; --hover-background-color: white;
color: var(--color-text);
--ripple-color: rgba(0, 0, 0, 0.08);
cursor: var(--custom-cursor, pointer);
position: relative;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
line-height: 1.125rem;
margin-bottom: 0.0625rem; margin-bottom: 0.0625rem;
padding-block: 0.1875rem; padding-block: 0.1875rem;
border-radius: var(--border-radius-messages-small); border-radius: var(--border-radius-messages-small);
position: relative;
overflow: hidden; font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
cursor: var(--custom-cursor, pointer); line-height: 1.125rem;
color: var(--color-text);
background-color: var(--accent-background-color); background-color: var(--accent-background-color);
--ripple-color: rgba(0, 0, 0, 0.08);
html.theme-dark & { html.theme-dark & {
--ripple-color: rgba(255, 255, 255, 0.08); --ripple-color: rgba(255, 255, 255, 0.08);
--hover-background-color: black; --hover-background-color: black;
@ -36,19 +40,21 @@
} }
.hover-effect { .hover-effect {
transition: opacity 0.15s; pointer-events: none;
content: ''; content: '';
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--hover-background-color);
opacity: var(--hover-opacity); opacity: var(--hover-opacity);
background-color: var(--hover-background-color);
pointer-events: none; transition: opacity 0.15s;
z-index: 2;
} }
body.no-page-transitions & { body.no-page-transitions & {
@ -64,9 +70,12 @@
.custom-shape & { .custom-shape & {
--peer-color-wrapper-bar-color: var(--accent-color); --peer-color-wrapper-bar-color: var(--accent-color);
--accent-color: white; --accent-color: white;
max-width: 15rem; max-width: 15rem;
margin: 0; margin: 0;
color: white !important; color: white !important;
background-color: var(--pattern-color); background-color: var(--pattern-color);
box-shadow: 0 1px 2px var(--color-default-shadow); box-shadow: 0 1px 2px var(--color-default-shadow);
@ -76,6 +85,19 @@
} }
&.is-quote { &.is-quote {
&::after {
@include icons.icon;
content: map.get(icons.$icons-map, "quote");
position: absolute;
top: 0.25rem;
inset-inline-end: 0.25rem;
font-size: 0.625rem;
color: var(--accent-color);
}
.message-title { .message-title {
padding-inline-end: 0.75rem; padding-inline-end: 0.75rem;
} }
@ -83,18 +105,6 @@
.message-text .embedded-text-wrapper { .message-text .embedded-text-wrapper {
white-space: normal; white-space: normal;
} }
&::after {
@include icons.icon;
content: map.get(icons.$icons-map, "quote");
color: var(--accent-color);
position: absolute;
top: 0.25rem;
inset-inline-end: 0.25rem;
font-size: 0.625rem;
}
} }
&.with-thumb { &.with-thumb {
@ -114,8 +124,8 @@
.embedded-origin-icon { .embedded-origin-icon {
margin-inline: 0.125rem; margin-inline: 0.125rem;
vertical-align: middle;
line-height: 1.25; line-height: 1.25;
vertical-align: middle;
} }
.embedded-chat-icon { .embedded-chat-icon {
@ -131,24 +141,24 @@
.message-title { .message-title {
display: flex; display: flex;
align-items: center;
flex-wrap: nowrap;
flex: 1; flex: 1;
flex-wrap: nowrap;
align-items: center;
} }
.message-title, .embedded-sender, .embedded-sender-chat, .message-title, .embedded-sender, .embedded-sender-chat,
.embedded-message-title, .forward-sender-title { .embedded-message-title, .forward-sender-title {
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.embedded-sender-wrapper, .embedded-sender-wrapper,
.embedded-forward-sender-wrapper { .embedded-forward-sender-wrapper {
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
overflow: hidden;
} }
.embedded-sender-wrapper { .embedded-sender-wrapper {
@ -156,12 +166,14 @@
} }
.embedded-text-wrapper { .embedded-text-wrapper {
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
height: 1.125rem; height: 1.125rem;
margin-bottom: 0; margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap;
&::after { &::after {
content: none; content: none;
display: none; display: none;
@ -181,6 +193,7 @@
.custom-emoji { .custom-emoji {
// Custom emoji needs to be slightly bigger than normal emoji // Custom emoji needs to be slightly bigger than normal emoji
--custom-emoji-size: max(calc(1.125 * var(--message-text-size, 1rem) + 1px), 20px); --custom-emoji-size: max(calc(1.125 * var(--message-text-size, 1rem) + 1px), 20px);
margin-inline-end: 1px; margin-inline-end: 1px;
& > img { & > img {
@ -201,12 +214,13 @@
.embedded-thumb { .embedded-thumb {
position: absolute; position: absolute;
top: 0.375rem; top: 0.375rem;
overflow: hidden;
flex-shrink: 0;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 0.25rem; border-radius: 0.25rem;
flex-shrink: 0;
overflow: hidden;
&.round { &.round {
border-radius: 1rem; border-radius: 1rem;

6
src/components/common/embedded/EmojiIconBackground.module.scss
View File

@ -1,9 +1,11 @@
.root { .root {
color: var(--accent-color); pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
pointer-events: none;
color: var(--accent-color);
} }

5
src/components/common/gift/GiftRibbon.module.scss
View File

@ -1,9 +1,10 @@
.root { .root {
position: absolute; position: absolute;
height: 3.5rem;
width: 3.5rem;
top: -0.125rem; top: -0.125rem;
right: -0.125rem; right: -0.125rem;
width: 3.5rem;
height: 3.5rem;
} }
.text { .text {

10
src/components/common/gift/GiftTransferPreview.module.scss
View File

@ -1,22 +1,22 @@
.root { .root {
display: flex; display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem; gap: 0.5rem;
align-items: center;
justify-content: center;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.giftPreview { .giftPreview {
width: 4rem;
height: 4rem;
position: relative; position: relative;
overflow: hidden;
display: grid; display: grid;
place-items: center; place-items: center;
overflow: hidden; width: 4rem;
height: 4rem;
border-radius: 0.625rem; border-radius: 0.625rem;
} }

53
src/components/common/gift/SavedGift.module.scss
View File

@ -1,27 +1,32 @@
.root { .root {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.625rem;
padding-top: 0.875rem;
border-radius: 0.625rem;
background-color: var(--color-background-secondary);
position: relative;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
min-width: 0;
padding: 0.625rem;
padding-top: 0.875rem;
border-radius: 0.625rem;
background-color: var(--color-background-secondary);
&::before { &::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
border-radius: 0.625rem;
background-color: var(--color-hover-overlay);
pointer-events: none; pointer-events: none;
content: "";
position: absolute;
z-index: 1; z-index: 1;
inset: 0;
border-radius: 0.625rem;
opacity: 0;
background-color: var(--color-hover-overlay);
} }
&:hover::before { &:hover::before {
@ -37,20 +42,22 @@
} }
.hiddenGift { .hiddenGift {
display: grid;
place-items: center;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-light-shadow);
color: white;
font-size: 1.25rem; font-size: 1.25rem;
color: white;
background-color: var(--color-light-shadow);
backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
} }

6
src/components/common/icons/StarIcon.module.scss
View File

@ -1,8 +1,8 @@
.root { .root {
--color-fill: var(--color-primary); --color-fill: var(--color-primary);
flex-shrink: 0;
display: flex; display: flex;
flex-shrink: 0;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
@ -19,8 +19,10 @@
.adaptive { .adaptive {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
line-height: 1; line-height: 1;
vertical-align: text-top; vertical-align: text-top;
} }
@ -31,6 +33,6 @@
} }
.clickable { .clickable {
cursor: var(--custom-cursor, pointer);
pointer-events: auto; pointer-events: auto;
cursor: var(--custom-cursor, pointer);
} }

32
src/components/common/pickers/ChatOrUserPicker.scss
View File

@ -2,9 +2,9 @@
.ChatOrUserPicker { .ChatOrUserPicker {
.modal-dialog { .modal-dialog {
height: 70%;
max-width: 25rem;
overflow: hidden; overflow: hidden;
max-width: 25rem;
height: 70%;
@media (max-width: 600px) { @media (max-width: 600px) {
height: 90%; height: 90%;
@ -26,37 +26,39 @@
} }
.input-group { .input-group {
margin: 0;
flex: 1; flex: 1;
margin: 0;
} }
.form-control { .form-control {
border: none; unicode-bidi: plaintext;
box-shadow: none !important;
height: 2.75rem; height: 2.75rem;
padding: 0.5rem; padding: 0.5rem;
border: none;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
unicode-bidi: plaintext;
box-shadow: none !important;
} }
} }
.modal-content { .modal-content {
padding: 0 !important;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 !important;
> .Transition { > .Transition {
height: 100%;
overflow: hidden; overflow: hidden;
height: 100%;
} }
.picker-list { .picker-list {
height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
height: 100%;
padding-inline: 0.5rem; padding-inline: 0.5rem;
@include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.adapt-padding-to-scrollbar(0.5rem);
@ -73,12 +75,14 @@
} }
.no-results { .no-results {
height: 100%;
margin: 0;
padding: 1rem 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
margin: 0;
padding: 1rem 1rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
@ -98,9 +102,9 @@
.topic-icon { .topic-icon {
--custom-emoji-size: 2.75rem; --custom-emoji-size: 2.75rem;
margin-inline-end: 0.25rem !important;
width: 2.75rem; width: 2.75rem;
height: 2.75rem; height: 2.75rem;
margin-inline-end: 0.25rem !important;
font-size: 2.75rem !important; font-size: 2.75rem !important;
} }
@ -114,8 +118,8 @@
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
line-height: 1.6875rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1.6875rem;
} }
.fullName { .fullName {

44
src/components/common/pickers/PickerItem.module.scss
View File

@ -1,28 +1,29 @@
.root { .root {
position: relative;
overflow: hidden;
display: grid; display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: min-content min-content 1fr min-content; grid-template-columns: min-content min-content 1fr min-content;
grid-template-rows: 1fr 1fr;
align-items: center; align-items: center;
position: relative;
padding: 0.25rem;
min-height: 2.5rem; min-height: 2.5rem;
padding: 0.25rem;
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
overflow: hidden;
background-color: var(--background-color);
color: var(--color-text);
line-height: 1.25; line-height: 1.25;
color: var(--color-text);
text-align: initial; text-align: initial;
transition-property: background-color, opacity; background-color: var(--background-color);
transition-duration: 150ms; transition-duration: 150ms;
transition-property: background-color, opacity;
:global(body.is-ios) &, :global(body.is-ios) &,
:global(body.is-android) & { :global(body.is-android) & {
border-radius: 0;
padding-inline-start: 0.75rem; padding-inline-start: 0.75rem;
border-radius: 0;
} }
:global(body.is-ios) & { :global(body.is-ios) & {
@ -30,8 +31,8 @@
} }
@media (max-width: 600px) { @media (max-width: 600px) {
border-radius: 0;
padding-inline-start: 0.5rem !important; padding-inline-start: 0.5rem !important;
border-radius: 0;
} }
} }
@ -47,13 +48,14 @@
} }
.separator { .separator {
grid-row: 2;
grid-column: 3; grid-column: 3;
grid-row: 2;
align-self: end;
/* stylelint-disable-next-line plugin/whole-pixel */ /* stylelint-disable-next-line plugin/whole-pixel */
height: 0.5px; height: 0.5px;
background-color: var(--color-dividers);
align-self: end;
margin-bottom: -0.1875rem; margin-bottom: -0.1875rem;
background-color: var(--color-dividers);
} }
.disabled { .disabled {
@ -62,22 +64,24 @@
} }
.title { .title {
grid-row: 1 / 3;
grid-column: 3; grid-column: 3;
grid-row: 1 / 3;
} }
.subtitle { .subtitle {
grid-column: 3;
grid-row: 2;
padding-bottom: 0.3125rem; padding-bottom: 0.3125rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
grid-row: 2;
grid-column: 3;
} }
.title, .subtitle { .title, .subtitle {
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.withAvatar, .multiline { .withAvatar, .multiline {
@ -96,19 +100,19 @@
} }
.startInput { .startInput {
grid-row: 1 / 3;
grid-column: 1; grid-column: 1;
grid-row: 1 / 3;
margin-inline-end: 1.1875rem; margin-inline-end: 1.1875rem;
} }
.endInput { .endInput {
grid-row: 1 / 3;
grid-column: 4; grid-column: 4;
grid-row: 1 / 3;
margin-inline-start: 1.25rem; margin-inline-start: 1.25rem;
} }
.avatarElement { .avatarElement {
grid-row: 1 / 3;
grid-column: 2; grid-column: 2;
grid-row: 1 / 3;
margin-inline-end: 0.75rem; margin-inline-end: 0.75rem;
} }

39
src/components/common/pickers/PickerStyles.module.scss
View File

@ -1,63 +1,64 @@
@use "../../../styles/mixins"; @use "../../../styles/mixins";
.container { .container {
height: 100%; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; height: 100%;
} }
.header { .header {
padding: 0.75rem 1.25rem; overflow-y: auto;
border-bottom: 1px solid var(--color-borders);
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto;
max-height: 20rem; max-height: 20rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--color-borders);
:global(.input-group) { :global(.input-group) {
margin-bottom: 0;
flex-grow: 1; flex-grow: 1;
margin-bottom: 0;
} }
:global(.form-control) { :global(.form-control) {
height: 2rem; height: 2rem;
padding: 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
padding: 0;
box-shadow: none !important; box-shadow: none !important;
} }
} }
.pickerCategoryTitle { .pickerCategoryTitle {
color: var(--color-text-secondary);
padding-inline: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-inline: 0.5rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid var(--color-borders);
padding-top: 0.5rem;
margin-top: 0.375rem; margin-top: 0.375rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-borders);
} }
} }
.peerChip { .peerChip {
margin-bottom: 0.5rem;
max-width: calc(50% - 0.5rem); max-width: calc(50% - 0.5rem);
margin-bottom: 0.5rem;
} }
.pickerList { .pickerList {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto;
flex-grow: 1;
} }
.padded { .padded {
padding: 0.5rem;
scrollbar-gutter: stable; scrollbar-gutter: stable;
padding: 0.5rem;
@include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.adapt-padding-to-scrollbar(0.5rem);
@ -67,12 +68,14 @@
} }
.noResults { .noResults {
height: 100%;
margin: 0;
padding: 1rem 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
margin: 0;
padding: 1rem 1rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }

29
src/components/common/profile/BusinessHours.module.scss
View File

@ -4,8 +4,8 @@
.top { .top {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: space-between;
} }
.icon { .icon {
@ -35,15 +35,19 @@
} }
.offset-trigger { .offset-trigger {
z-index: 1;
display: inline-block; display: inline-block;
align-self: flex-end;
margin-bottom: 0.25rem;
padding: 0 0.5rem; padding: 0 0.5rem;
border-radius: 0.75rem; border-radius: 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-primary); color: var(--color-primary);
background-color: var(--color-primary-tint); background-color: var(--color-primary-tint);
align-self: flex-end;
margin-bottom: 0.25rem;
z-index: 1;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
@ -53,32 +57,35 @@
} }
.transition { .transition {
margin-bottom: 0.5rem;
height: 0; height: 0;
margin-bottom: 0.5rem;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} }
.timetable { .timetable {
margin-bottom: 0;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.6875rem; margin-top: 0.6875rem;
margin-bottom: 0;
} }
.schedule { .schedule {
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-bottom: 0;
justify-self: end; justify-self: end;
margin-bottom: 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: end; text-align: end;
} }
.weekday { .weekday {
word-break: break-all;
line-height: 1.25;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25;
word-break: break-all;
} }
.current-day { .current-day {

26
src/components/common/profile/ChatExtra.module.scss
View File

@ -1,10 +1,12 @@
.businessLocation { .businessLocation {
flex-shrink: 0;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
object-fit: cover;
border-radius: 0.25rem;
flex-shrink: 0;
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
border-radius: 0.25rem;
object-fit: cover;
} }
.personalChannel { .personalChannel {
@ -12,22 +14,25 @@
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
column-gap: 0.5rem; column-gap: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.personalChannelTitle { .personalChannelTitle {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-inline-start: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
margin-inline-start: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
} }
.botVerificationSection, .botVerificationSection,
.sectionInfo { .sectionInfo {
color: var(--color-text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-secondary);
} }
.botVerificationSection { .botVerificationSection {
@ -36,15 +41,18 @@
.botVerificationIcon { .botVerificationIcon {
--custom-emoji-size: 1rem; --custom-emoji-size: 1rem;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
} }
.personalChannelSubscribers { .personalChannelSubscribers {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-inline-end: 0.5rem; margin-inline-end: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
} }
.personalChannelItem { .personalChannelItem {

4
src/components/common/profile/RadialPatternBackground.module.scss
View File

@ -1,6 +1,6 @@
.root { .root {
border-radius: inherit;
overflow: hidden; overflow: hidden;
border-radius: inherit;
&::before { &::before {
content: ''; content: '';
@ -13,8 +13,8 @@
} }
.canvas { .canvas {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
position: relative;
} }

21
src/components/common/profile/UserBirthday.module.scss
View File

@ -6,19 +6,18 @@
--digit-offset: 0; --digit-offset: 0;
--digit-offset-x: calc(8rem * var(--digit-offset) * 0.75); --digit-offset-x: calc(8rem * var(--digit-offset) * 0.75);
position: absolute; pointer-events: none;
width: 8rem;
height: 8rem;
z-index: 2;
transform: scale(0); position: absolute;
z-index: 2;
top: 50%; top: 50%;
left: calc(10% + var(--digit-offset-x)); left: calc(10% + var(--digit-offset-x));
transform: scale(0);
offset-path: path('M 0 0 C 128 -46 99 -376 93 -529'); offset-path: path('M 0 0 C 128 -46 99 -376 93 -529');
offset-anchor: center;
offset-rotate: 0deg; offset-rotate: 0deg;
pointer-events: none; width: 8rem;
height: 8rem;
animation: animation:
2.75s float 0.25s, 2.75s float 0.25s,
@ -26,6 +25,8 @@
1s dissapear 2s; 1s dissapear 2s;
animation-timing-function: ease-in; animation-timing-function: ease-in;
animation-fill-mode: forwards; animation-fill-mode: forwards;
offset-anchor: center;
} }
.shiftOrigin { .shiftOrigin {
@ -33,14 +34,14 @@
} }
.effect { .effect {
pointer-events: none;
position: absolute; position: absolute;
z-index: 1;
top: calc(50% - 1rem); top: calc(50% - 1rem);
left: 10rem; left: 10rem;
transform: translate(-50%, -50%) scaleX(-1); transform: translate(-50%, -50%) scaleX(-1);
z-index: 1;
pointer-events: none;
width: 18rem; width: 18rem;
height: 18rem; height: 18rem;
} }

13
src/components/common/reactions/CustomEmojiEffect.module.scss
View File

@ -5,22 +5,25 @@
.particle { .particle {
--custom-emoji-size: var(--particle-size, 1rem); --custom-emoji-size: var(--particle-size, 1rem);
color: var(--color-primary);
position: absolute; position: absolute;
offset-path: var(--offset-path);
offset-rotate: 0deg;
width: var(--particle-size, 1rem); width: var(--particle-size, 1rem);
height: var(--particle-size, 1rem); height: var(--particle-size, 1rem);
border-radius: 0.25rem; border-radius: 0.25rem;
offset-path: var(--offset-path);
offset-rotate: 0deg; color: var(--color-primary);
animation: 1.5s particle ease-out; animation: 1.5s particle ease-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@keyframes particle { @keyframes particle {
0% { 0% {
offset-distance: 0%;
transform: scale(1); transform: scale(1);
offset-distance: 0%;
} }
50% { 50% {
@ -32,8 +35,8 @@
} }
100% { 100% {
transform: scale(1);
offset-distance: 100%; offset-distance: 100%;
opacity: 0; opacity: 0;
transform: scale(1);
} }
} }

4
src/components/common/reactions/ReactionAnimatedEmoji.module.scss
View File

@ -2,14 +2,14 @@
--custom-emoji-border-radius: 0.25rem; --custom-emoji-border-radius: 0.25rem;
position: relative; position: relative;
z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--custom-emoji-size); width: var(--custom-emoji-size);
height: var(--custom-emoji-size); height: var(--custom-emoji-size);
z-index: 1;
} }
.animated-icon, .effect { .animated-icon, .effect {

7
src/components/common/reactions/ReactionEmoji.module.scss
View File

@ -2,14 +2,19 @@
--custom-emoji-size: 2.25rem; --custom-emoji-size: 2.25rem;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
position: relative;
display: inline-block; display: inline-block;
width: var(--custom-emoji-size); width: var(--custom-emoji-size);
height: var(--custom-emoji-size); height: var(--custom-emoji-size);
border-radius: var(--border-radius-messages-small); border-radius: var(--border-radius-messages-small);
background: transparent no-repeat center; background: transparent no-repeat center;
background-size: contain; background-size: contain;
transition: background-color 0.15s ease, opacity 0.3s ease !important; transition: background-color 0.15s ease, opacity 0.3s ease !important;
position: relative;
&.selected, &.selected,
&:hover { &:hover {

4
src/components/common/reactions/ReactionStaticEmoji.scss
View File

@ -1,6 +1,6 @@
.ReactionStaticEmoji { .ReactionStaticEmoji {
width: 1rem;
display: block; display: block;
width: 1rem;
// Unicorn reaction preview is too small // Unicorn reaction preview is too small
&.with-unicorn-fix { &.with-unicorn-fix {
@ -8,7 +8,7 @@
} }
&.icon-heart { &.icon-heart {
color: var(--color-heart) !important;
margin: 0 !important; margin: 0 !important;
color: var(--color-heart) !important;
} }
} }

2
src/components/common/spoiler/Spoiler.scss
View File

@ -1,9 +1,9 @@
.Spoiler { .Spoiler {
&--concealed { &--concealed {
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
border-radius: 0.5rem;
background-image: url('../../../assets/spoiler-dots-black.png'); background-image: url('../../../assets/spoiler-dots-black.png');
background-size: auto min(100%, 1.125rem); background-size: auto min(100%, 1.125rem);
border-radius: 0.5rem;
html.theme-dark &, html.theme-dark &,
html.theme-light .ListItem.selected &, html.theme-light .ListItem.selected &,

6
src/components/left/ArchivedChats.scss
View File

@ -1,6 +1,6 @@
.ArchivedChats { .ArchivedChats {
height: 100%;
overflow: hidden; overflow: hidden;
height: 100%;
background: var(--color-background); background: var(--color-background);
.left-header { .left-header {
@ -18,9 +18,9 @@
} }
.Button.rtl { .Button.rtl {
transition: var(--slide-transition) transform;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
transition: var(--slide-transition) transform;
&.right-aligned { &.right-aligned {
transform: transform:
@ -39,8 +39,8 @@
} }
.story-toggler-wrapper { .story-toggler-wrapper {
flex-grow: 1;
position: relative; position: relative;
flex-grow: 1;
} }
.chat-list-wrapper { .chat-list-wrapper {

8
src/components/left/ChatFolderModal.module.scss
View File

@ -1,21 +1,21 @@
@use '../../styles/mixins'; @use '../../styles/mixins';
.modalContent { .modalContent {
padding: 0 !important;
overflow-y: hidden !important; overflow-y: hidden !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 !important;
} }
.root :global(.modal-dialog) { .root :global(.modal-dialog) {
max-height: 70%;
max-width: 26.25rem;
overflow: hidden; overflow: hidden;
max-width: 26.25rem;
max-height: 70%;
} }
.main { .main {
overflow-y: auto;
scrollbar-gutter: stable; scrollbar-gutter: stable;
overflow-y: auto;
padding: 1rem 0.375rem; padding: 1rem 0.375rem;
@include mixins.adapt-padding-to-scrollbar(0.375rem); @include mixins.adapt-padding-to-scrollbar(0.375rem);

34
src/components/left/ConnectionStatusOverlay.scss
View File

@ -1,12 +1,14 @@
.connection-state-wrapper { .connection-state-wrapper {
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 2;
opacity: 1;
transition: transform 300ms ease, opacity 300ms ease; transition: transform 300ms ease, opacity 300ms ease;
opacity: 1;
&:not(.open) { &:not(.open) {
transform: translateY(-3rem); transform: translateY(-3rem);
@ -19,15 +21,17 @@
} }
#ConnectionStatusOverlay { #ConnectionStatusOverlay {
height: 2.9375rem;
flex: 0 0 auto;
display: flex; display: flex;
flex: 0 0 auto;
align-items: center; align-items: center;
height: 2.9375rem;
margin: 0.375rem 0.5rem; margin: 0.375rem 0.5rem;
padding: 0 0.75rem; padding: 0 0.75rem;
background: var(--color-yellow);
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
background: var(--color-yellow);
&.interactive { &.interactive {
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
} }
@ -38,20 +42,16 @@
> .state-text { > .state-text {
flex: 1; flex: 1;
color: var(--color-text-lighter);
margin-inline-start: 1.875rem;
padding-bottom: 0.0625rem;
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
padding-bottom: 0.0625rem; color: var(--color-text-lighter);
margin-inline-start: 1.875rem;
white-space: nowrap; white-space: nowrap;
} }
@media (max-width: 950px) {
> .state-text {
margin-inline-start: 1.25rem;
}
}
.Transition { .Transition {
width: 100%; width: 100%;
// https://dfmcphee.com/flex-items-and-min-width-0/ // https://dfmcphee.com/flex-items-and-min-width-0/
@ -64,4 +64,10 @@
width: 100%; width: 100%;
} }
} }
@media (max-width: 950px) {
> .state-text {
margin-inline-start: 1.25rem;
}
}
} }

31
src/components/left/LeftColumn.scss
View File

@ -3,38 +3,39 @@
} }
.left-header { .left-header {
display: flex;
flex-shrink: 0;
align-items: center;
height: var(--header-height); height: var(--header-height);
padding: 0.375rem 0.8125rem 0.5rem 0.8125rem; padding: 0.375rem 0.8125rem 0.5rem 0.8125rem;
display: flex;
align-items: center;
flex-shrink: 0;
background-color: var(--color-background); background-color: var(--color-background);
h3 { h3 {
user-select: none;
overflow: hidden;
margin-right: auto;
margin-bottom: 0; margin-bottom: 0;
margin-left: 1.375rem;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin-left: 1.375rem;
margin-right: auto;
user-select: none;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.SearchInput { .SearchInput {
margin-left: 0.625rem;
max-width: calc(100% - 3.25rem); max-width: calc(100% - 3.25rem);
margin-left: 0.625rem;
@media (max-width: 600px) { @media (max-width: 600px) {
max-width: calc(100% - 3rem); max-width: calc(100% - 3rem);
} }
} }
@media (max-width: 600px) {
padding: 0.5rem;
}
.Button.smaller { .Button.smaller {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
@ -57,8 +58,8 @@
padding: 0.5rem 0.5rem 0.5rem 4.5rem; padding: 0.5rem 0.5rem 0.5rem 4.5rem;
.SearchInput { .SearchInput {
margin-left: 0.5rem;
max-width: calc(100% - 2.75rem); max-width: calc(100% - 2.75rem);
margin-left: 0.5rem;
} }
.Menu.main-menu .bubble { .Menu.main-menu .bubble {
@ -66,4 +67,8 @@
--offset-x: -4.125rem; --offset-x: -4.125rem;
} }
} }
@media (max-width: 600px) {
padding: 0.5rem;
}
} }

3
src/components/left/NewChatButton.scss
View File

@ -14,7 +14,6 @@
body.no-page-transitions & { body.no-page-transitions & {
transform: none !important; transform: none !important;
opacity: 0; opacity: 0;
transition: opacity 0.15s; transition: opacity 0.15s;
&.revealed { &.revealed {
@ -26,9 +25,9 @@
transform: translateY(0); transform: translateY(0);
@media (max-width: 600px) { @media (max-width: 600px) {
transform-style: preserve-3d;
// Force rendering in the composite layer to fix the z-index rendering issue // Force rendering in the composite layer to fix the z-index rendering issue
transform: translate3d(0, 0, 0.625rem); transform: translate3d(0, 0, 0.625rem);
transform-style: preserve-3d;
} }
} }

26
src/components/left/main/Archive.module.scss
View File

@ -7,16 +7,20 @@
} }
.minimized { .minimized {
background-color: var(--color-background-secondary);
margin: -0.5rem -0.5rem 0 -0.5rem !important; margin: -0.5rem -0.5rem 0 -0.5rem !important;
background-color: var(--color-background-secondary);
&::after {
display: none;
}
&:hover { &:hover {
opacity: 0.85; opacity: 0.85;
} }
.button { .button {
border-radius: 0;
padding: 0.375rem !important; padding: 0.375rem !important;
border-radius: 0;
background-color: transparent; background-color: transparent;
} }
@ -35,9 +39,11 @@
.unread-count { .unread-count {
position: absolute; position: absolute;
right: 0.75rem; right: 0.75rem;
background-color: transparent;
color: var(--color-text-secondary);
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--color-text-secondary);
background-color: transparent;
} }
.info { .info {
@ -45,12 +51,8 @@
} }
.name { .name {
line-height: 1.25rem !important;
font-size: 0.8125rem !important; font-size: 0.8125rem !important;
} line-height: 1.25rem !important;
&::after {
display: none;
} }
} }
@ -72,9 +74,9 @@
} }
.avatarWrapper { .avatarWrapper {
z-index: 1;
flex-shrink: 0; flex-shrink: 0;
background-color: var(--background-color); background-color: var(--background-color);
z-index: 1;
} }
.avatar { .avatar {
@ -87,9 +89,9 @@
} }
.chatsPreview { .chatsPreview {
color: var(--color-text-secondary);
flex-grow: 1;
overflow: hidden; overflow: hidden;
flex-grow: 1;
color: var(--color-text-secondary);
text-overflow: ellipsis; text-overflow: ellipsis;
} }

601
src/components/left/main/Chat.scss
View File

@ -8,19 +8,20 @@
--z-badge: 4; --z-badge: 4;
--z-status: 8; // Avatar stories require a higher z-index than the ripple to work --z-status: 8; // Avatar stories require a higher z-index than the ripple to work
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
-webkit-touch-callout: none;
body.is-ios &, body.is-ios &,
body.is-macos & { body.is-macos & {
--color-text-meta: var(--color-text-meta-apple); --color-text-meta: var(--color-text-meta-apple);
} }
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
-webkit-touch-callout: none;
&.standalone { &.standalone {
position: static; position: static;
@ -54,6 +55,303 @@
} }
} }
&:not(.standalone):last-of-type {
border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height
}
&.selected-forum {
&::before {
transform: translateX(0) scaleY(1) !important;
}
}
body.is-ios &,
body.is-android & {
.ListItem-button {
border-radius: 0 !important;
}
}
&.forum {
--color-chat-username: var(--color-text);
&::before {
content: '';
position: absolute;
z-index: var(--z-forum-indicator);
top: 0.625rem;
bottom: 0.625rem;
left: -0.4375rem; // `.chat-list` left padding
transform: translateX(-0.375rem) scaleY(0.5);
width: 0.3125rem;
border-start-end-radius: var(--border-radius-default);
border-end-end-radius: var(--border-radius-default);
background: var(--color-primary);
transition: transform var(--layer-transition);
body.no-page-transitions & {
transition: none;
}
}
.ListItem-button {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
}
.title {
line-height: 1.375rem;
}
.status {
background-color: var(--background-color);
}
@media (max-width: 600px) {
&::before {
left: 0;
}
}
}
.ripple-container {
z-index: var(--z-chat-ripple);
}
.status {
position: relative;
z-index: var(--z-status);
overflow: visible !important;
display: flex;
align-items: center;
align-self: stretch;
}
.avatar-badge-wrapper {
--outline-color: var(--color-background);
position: absolute;
z-index: var(--z-badge);
right: 0.5rem;
bottom: 0;
.ChatBadge {
box-shadow: 0 0 0 2px var(--outline-color);
}
.ChatBadge-transition {
position: relative;
transition: opacity var(--layer-transition), transform var(--layer-transition);
body.no-page-transitions & {
transition: opacity var(--layer-transition);
}
}
}
.avatar-badge {
--_color-outline: var(--color-background);
position: absolute;
right: 0.0625rem;
bottom: 0.0625rem;
flex-shrink: 0;
}
.avatar-subscription {
font-size: 0.875rem;
@include mixins.filter-outline(1px, var(--_color-outline));
}
.avatar-online {
transform: scale(0);
width: 0.875rem;
height: 0.875rem;
border: 2px solid var(--_color-outline);
border-radius: 50%;
opacity: 0.5;
background-color: #0ac630;
transition: opacity 200ms, transform 200ms;
&.avatar-online-shown {
transform: scale(1);
opacity: 1;
}
}
.info {
transition: opacity 300ms ease, transform var(--layer-transition);
body.no-page-transitions & {
transition: opacity 300ms ease;
}
.title .custom-emoji {
color: var(--color-primary);
}
.icon-muted {
margin-left: 0.25rem;
font-size: 1.125rem;
color: var(--color-list-icon);
body.is-ios & {
margin-top: 0;
margin-right: 0.5rem;
}
}
.general-forum-icon {
font-size: 1.25rem;
color: var(--color-text-secondary);
}
.LastMessageMeta {
body.is-ios & {
margin-right: 0;
font-size: 0.875rem;
}
}
.last-message,
.typing-status {
unicode-bidi: plaintext;
flex-grow: 1;
padding-right: 0.25rem;
color: var(--color-text-secondary);
&[dir="ltr"] {
text-align: left;
}
.sender-name {
color: var(--color-chat-username);
body.is-macos &,
body.is-ios & {
color: var(--color-text);
}
}
.draft {
color: var(--color-error);
}
}
.last-message {
.draft {
&::after {
content: ": ";
}
}
.colon, .chat-prefix-icon {
margin-inline-end: 0.1875rem;
}
.chat-prefix-icon {
transform: translateY(1px);
display: inline-block;
font-size: 0.875rem;
color: var(--color-list-icon);
}
.media-preview-spoiler {
filter: blur(1px);
}
.media-preview--image {
width: 1.25rem;
height: 1.25rem;
margin-inline-start: 0.125rem;
margin-inline-end: 0.25rem;
border-radius: 0.125rem;
vertical-align: -0.25rem;
object-fit: cover;
body.is-ios & {
width: 1.125rem;
height: 1.125rem;
vertical-align: -0.1875rem;
}
&.round {
border-radius: 0.625rem;
}
}
.emoji-small {
width: 1rem;
height: 1rem;
vertical-align: -0.125rem;
}
.icon-play {
position: relative;
bottom: 0.0625rem;
display: inline-block;
margin-inline-start: -1.25rem;
margin-inline-end: 0.5rem;
font-size: 0.75rem;
color: #fff;
body.is-ios & {
bottom: 0;
margin-inline-start: -1.125rem;
}
}
}
.star-amount-icon {
margin-inline: 0;
line-height: initial;
vertical-align: text-top;
}
}
&[dir="rtl"] {
.info {
.LastMessageMeta {
margin-right: auto;
margin-left: 0;
}
.title,
.subtitle {
padding-right: 0;
padding-left: 0.125rem;
}
.icon-muted {
margin-right: 0.25rem;
margin-left: 0;
}
.last-message,
.typing-status {
unicode-bidi: plaintext;
padding-right: 0;
padding-left: 0.5rem;
text-align: right;
}
}
}
// Super specific selector to override the same in `ListItem` // Super specific selector to override the same in `ListItem`
@media (min-width: 600px) { @media (min-width: 600px) {
&:not(.has-ripple):not(.is-static), &:not(.has-ripple):not(.is-static),
@ -64,10 +362,6 @@
} }
} }
&:not(.standalone):last-of-type {
border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height
}
@media (max-width: 600px) { @media (max-width: 600px) {
&.selected { &.selected {
--background-color: var(--color-chat-hover) !important; --background-color: var(--color-chat-hover) !important;
@ -147,292 +441,9 @@
} }
} }
&.selected-forum {
&::before {
transform: translateX(0) scaleY(1) !important;
}
}
body.is-ios &,
body.is-android & {
.ListItem-button {
border-radius: 0 !important;
}
}
@media (max-width: 600px) { @media (max-width: 600px) {
.ListItem-button { .ListItem-button {
border-radius: 0 !important; border-radius: 0 !important;
} }
} }
&.forum {
--color-chat-username: var(--color-text);
&::before {
content: '';
position: absolute;
top: 0.625rem;
bottom: 0.625rem;
left: -0.4375rem; // `.chat-list` left padding
width: 0.3125rem;
transform: translateX(-0.375rem) scaleY(0.5);
transition: transform var(--layer-transition);
body.no-page-transitions & {
transition: none;
}
background: var(--color-primary);
z-index: var(--z-forum-indicator);
border-start-end-radius: var(--border-radius-default);
border-end-end-radius: var(--border-radius-default);
}
@media (max-width: 600px) {
&::before {
left: 0;
}
}
.ListItem-button {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
}
.title {
line-height: 1.375rem;
}
.status {
background-color: var(--background-color);
}
}
.ripple-container {
z-index: var(--z-chat-ripple);
}
.status {
position: relative;
align-self: stretch;
display: flex;
align-items: center;
z-index: var(--z-status);
overflow: visible !important;
}
.avatar-badge-wrapper {
position: absolute;
bottom: 0;
right: 0.5rem;
z-index: var(--z-badge);
--outline-color: var(--color-background);
.ChatBadge {
box-shadow: 0 0 0 2px var(--outline-color);
}
.ChatBadge-transition {
position: relative;
transition: opacity var(--layer-transition), transform var(--layer-transition);
body.no-page-transitions & {
transition: opacity var(--layer-transition);
}
}
}
.avatar-badge {
--_color-outline: var(--color-background);
position: absolute;
bottom: 0.0625rem;
right: 0.0625rem;
flex-shrink: 0;
}
.avatar-subscription {
font-size: 0.875rem;
@include mixins.filter-outline(1px, var(--_color-outline));
}
.avatar-online {
border-radius: 50%;
border: 2px solid var(--_color-outline);
background-color: #0ac630;
width: 0.875rem;
height: 0.875rem;
opacity: 0.5;
transform: scale(0);
transition: opacity 200ms, transform 200ms;
&.avatar-online-shown {
opacity: 1;
transform: scale(1);
}
}
.info {
transition: opacity 300ms ease, transform var(--layer-transition);
body.no-page-transitions & {
transition: opacity 300ms ease;
}
.title .custom-emoji {
color: var(--color-primary);
}
.icon-muted {
font-size: 1.125rem;
margin-left: 0.25rem;
color: var(--color-list-icon);
body.is-ios & {
margin-top: 0;
margin-right: 0.5rem;
}
}
.general-forum-icon {
font-size: 1.25rem;
color: var(--color-text-secondary);
}
.LastMessageMeta {
body.is-ios & {
font-size: 0.875rem;
margin-right: 0;
}
}
.last-message,
.typing-status {
padding-right: 0.25rem;
flex-grow: 1;
color: var(--color-text-secondary);
unicode-bidi: plaintext;
&[dir="ltr"] {
text-align: left;
}
.sender-name {
color: var(--color-chat-username);
body.is-macos &,
body.is-ios & {
color: var(--color-text);
}
}
.draft {
color: var(--color-error);
}
}
.last-message {
.draft {
&::after {
content: ": ";
}
}
.colon, .chat-prefix-icon {
margin-inline-end: 0.1875rem;
}
.chat-prefix-icon {
display: inline-block;
color: var(--color-list-icon);
font-size: 0.875rem;
transform: translateY(1px);
}
.media-preview-spoiler {
filter: blur(1px);
}
.media-preview--image {
width: 1.25rem;
height: 1.25rem;
object-fit: cover;
border-radius: 0.125rem;
vertical-align: -0.25rem;
margin-inline-end: 0.25rem;
margin-inline-start: 0.125rem;
body.is-ios & {
width: 1.125rem;
height: 1.125rem;
vertical-align: -0.1875rem;
}
&.round {
border-radius: 0.625rem;
}
}
.emoji-small {
width: 1rem;
height: 1rem;
vertical-align: -0.125rem;
}
.icon-play {
position: relative;
display: inline-block;
font-size: 0.75rem;
color: #fff;
margin-inline-start: -1.25rem;
margin-inline-end: 0.5rem;
bottom: 0.0625rem;
body.is-ios & {
margin-inline-start: -1.125rem;
bottom: 0;
}
}
}
.star-amount-icon {
vertical-align: text-top;
line-height: initial;
margin-inline: 0;
}
}
&[dir="rtl"] {
.info {
.LastMessageMeta {
margin-left: 0;
margin-right: auto;
}
.title,
.subtitle {
padding-left: 0.125rem;
padding-right: 0;
}
.icon-muted {
margin-left: 0;
margin-right: 0.25rem;
}
.last-message,
.typing-status {
padding-left: 0.5rem;
padding-right: 0;
text-align: right;
unicode-bidi: plaintext;
}
}
}
} }

28
src/components/left/main/ChatBadge.scss
View File

@ -29,58 +29,62 @@
} }
.ChatBadge { .ChatBadge {
flex-shrink: 0;
min-width: 1.5rem; min-width: 1.5rem;
height: 1.5rem; height: 1.5rem;
background: var(--color-gray);
border-radius: 0.75rem;
padding: 0 0.4375rem !important; padding: 0 0.4375rem !important;
color: white; border-radius: 0.75rem;
font-size: 0.875rem !important; font-size: 0.875rem !important;
line-height: 1.5625rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1.5625rem;
color: white;
text-align: center; text-align: center;
flex-shrink: 0;
background: var(--color-gray);
body.is-macos & { body.is-macos & {
line-height: 1.5rem; line-height: 1.5rem;
} }
body.is-ios &:not(.unopened) { body.is-ios &:not(.unopened) {
line-height: 1.375rem;
min-width: 1.375rem; min-width: 1.375rem;
height: 1.375rem; height: 1.375rem;
padding: 0 0.375rem; padding: 0 0.375rem;
line-height: 1.375rem;
} }
body.is-ios, body.is-ios,
body.is-macos, body.is-macos,
&.miniapp { &.miniapp {
line-height: 1.5rem !important;
min-width: 1.5rem; min-width: 1.5rem;
height: 1.5rem !important; height: 1.5rem !important;
line-height: 1.5rem !important;
} }
&.mention, &.mention,
&.unread:not(.muted), &.unread:not(.muted),
&.unopened:not(.muted) { &.unopened:not(.muted) {
background: var(--color-green);
color: var(--color-white); color: var(--color-white);
background: var(--color-green);
} }
&.unopened { &.unopened {
align-self: center;
width: 0.5rem; width: 0.5rem;
height: 0.5rem;
min-width: auto; min-width: auto;
height: 0.5rem;
min-height: auto; min-height: auto;
padding: 0; padding: 0;
align-self: center;
} }
&.pinned { &.pinned {
color: var(--color-list-icon);
background: transparent;
width: 1.5rem; width: 1.5rem;
padding: 0; padding: 0;
color: var(--color-list-icon);
background: transparent;
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;

29
src/components/left/main/ChatCallStatus.module.scss
View File

@ -24,34 +24,41 @@
.root { .root {
position: absolute; position: absolute;
z-index: 1;
right: 6px; right: 6px;
bottom: 0; bottom: 0;
overflow: hidden;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%;
background-color: #0ac630;
border: 2px solid var(--color-background); border: 2px solid var(--color-background);
overflow: hidden; border-radius: 50%;
z-index: 1;
background-color: #0ac630;
} }
.indicator { .indicator {
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%; border-radius: 50%;
} }
.indicatorInner { .indicatorInner {
will-change: transform;
transform: translateZ(0);
width: 2px; width: 2px;
height: 6px; height: 6px;
background: var(--color-background);
border-radius: 1px;
margin: 1px; margin: 1px;
will-change: transform; border-radius: 1px;
transform: translateZ(0);
background: var(--color-background);
} }
.indicatorInner:nth-child(odd) { .indicatorInner:nth-child(odd) {
@ -63,8 +70,8 @@
} }
.selected { .selected {
background-color: var(--color-white);
border-color: var(--color-chat-active); border-color: var(--color-chat-active);
background-color: var(--color-white);
.indicatorInner { .indicatorInner {
background-color: var(--color-chat-active); background-color: var(--color-chat-active);

35
src/components/left/main/EmptyFolder.module.scss
View File

@ -1,14 +1,11 @@
.root { .root {
width: 100%;
height: 80%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
@media (max-height: 480px) { width: 100%;
height: 100%; height: 80%;
}
.sticker { .sticker {
height: 6rem; height: 6rem;
@ -16,11 +13,12 @@
} }
.title { .title {
font-size: 1.25rem;
margin-bottom: 0.125rem;
overflow-wrap: anywhere;
text-align: center;
max-width: 100%; max-width: 100%;
margin-bottom: 0.125rem;
font-size: 1.25rem;
text-align: center;
overflow-wrap: anywhere;
} }
.description { .description {
@ -34,17 +32,18 @@
} }
:global(.Button.pill) { :global(.Button.pill) {
max-width: 100%;
margin-top: 0.625rem;
font-weight: var(--font-weight-medium);
padding-inline-start: 0.75rem;
unicode-bidi: plaintext; unicode-bidi: plaintext;
justify-content: start; justify-content: start;
max-width: 100%;
margin-top: 0.625rem;
padding-inline-start: 0.75rem;
font-weight: var(--font-weight-medium);
.button-text { .button-text {
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@ -53,6 +52,10 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@media (max-height: 480px) {
height: 100%;
}
} }
.centered { .centered {

24
src/components/left/main/EmptyForum.module.scss
View File

@ -4,24 +4,25 @@
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
padding: 1rem; padding: 1rem;
:global(.Button.pill) { :global(.Button.pill) {
max-width: 100%;
margin-top: 0.625rem;
font-weight: var(--font-weight-medium);
padding-inline-start: 0.75rem;
unicode-bidi: plaintext; unicode-bidi: plaintext;
justify-content: start; justify-content: start;
max-width: 100%;
margin-top: 0.625rem;
padding-inline-start: 0.75rem;
font-weight: var(--font-weight-medium);
.button-text { .button-text {
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@ -38,11 +39,12 @@
} }
.title { .title {
font-size: 1.25rem;
margin-bottom: 0.125rem;
overflow-wrap: anywhere;
text-align: center;
max-width: 100%; max-width: 100%;
margin-bottom: 0.125rem;
font-size: 1.25rem;
text-align: center;
overflow-wrap: anywhere;
} }
.description { .description {

66
src/components/left/main/ForumPanel.module.scss
View File

@ -1,28 +1,28 @@
.root { .root {
position: absolute; position: absolute;
z-index: var(--z-forum-panel);
top: 0; top: 0;
right: 0; right: 0;
left: 4.75rem; left: 4.75rem;
z-index: var(--z-forum-panel); transform: translate3d(100%, 0, 0);
height: 100%;
background-color: var(--color-background);
border-left: 1px solid var(--color-borders);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform var(--layer-transition); height: 100%;
transform: translate3d(100%, 0, 0); border-left: 1px solid var(--color-borders);
@media (max-width: 600px) { background-color: var(--color-background);
left: 4.3125rem;
} transition: transform var(--layer-transition);
&.rtl { &.rtl {
left: 0;
right: 4.75rem; right: 4.75rem;
left: 0;
transform: translateX(-100%); transform: translateX(-100%);
border-left: none;
border-right: 1px solid var(--color-borders); border-right: 1px solid var(--color-borders);
border-left: none;
} }
&.no-animation { &.no-animation {
@ -36,10 +36,14 @@
} }
:global(.HeaderActions) { :global(.HeaderActions) {
margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin-left: auto;
}
@media (max-width: 600px) {
left: 4.3125rem;
} }
} }
@ -48,8 +52,9 @@
height: 0; height: 0;
border-bottom: 0.0625rem solid var(--color-borders); border-bottom: 0.0625rem solid var(--color-borders);
transition: 0.1s ease opacity;
opacity: 0; opacity: 0;
transition: 0.1s ease opacity;
} }
.scrolled .notch { .scrolled .notch {
@ -58,45 +63,50 @@
.scroll-top-handler { .scroll-top-handler {
position: absolute; position: absolute;
top: 0;
z-index: 100; z-index: 100;
top: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
} }
.info { .info {
margin-left: 0.4375rem;
min-width: 0;
width: 100%;
cursor: var(--custom-cursor, pointer); cursor: var(--custom-cursor, pointer);
width: 100%;
min-width: 0;
margin-left: 0.4375rem;
:global(.info) { :global(.info) {
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
flex-grow: 1; flex-grow: 1;
overflow: hidden; justify-content: center;
} }
:global(.fullName) { :global(.fullName) {
line-height: 1.375rem;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
unicode-bidi: plaintext; unicode-bidi: plaintext;
overflow: hidden;
margin: 0 !important;
font-size: 1rem !important; font-size: 1rem !important;
font-weight: var(--font-weight-medium) !important; font-weight: var(--font-weight-medium) !important;
margin: 0 !important; line-height: 1.375rem;
text-overflow: ellipsis;
white-space: pre;
} }
:global(.status) { :global(.status) {
overflow: hidden;
display: inline-block;
margin: 0;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.125rem; line-height: 1.125rem;
margin: 0;
color: var(--color-text-secondary); color: var(--color-text-secondary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; white-space: nowrap;
} }
} }

14
src/components/left/main/FrozenAccountNotification.module.scss
View File

@ -1,9 +1,11 @@
.root { .root {
background-color: var(--color-background-secondary); cursor: pointer;
margin-inline: -0.5rem; margin-inline: -0.5rem;
padding-block: 0.75rem; padding-block: 0.75rem;
padding-inline: 1rem; padding-inline: 1rem;
cursor: pointer;
background-color: var(--color-background-secondary);
&:hover { &:hover {
opacity: 0.85; opacity: 0.85;
@ -11,15 +13,15 @@
} }
.title { .title {
color: var(--color-error);
font-weight: var(--font-weight-medium);
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-medium);
line-height: 1rem; line-height: 1rem;
color: var(--color-error);
} }
.subtitle { .subtitle {
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.875rem;
line-height: 1rem; line-height: 1rem;
color: var(--color-text-secondary);
} }

27
src/components/left/main/LeftMain.scss
View File

@ -1,21 +1,24 @@
#LeftColumn-main { #LeftColumn-main {
height: 100%;
position: relative; position: relative;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
height: 100%;
background: var(--color-background); background: var(--color-background);
> .Transition { > .Transition {
flex: 1;
overflow: hidden; overflow: hidden;
flex: 1;
} }
.ChatFolders { .ChatFolders {
height: 100%; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; height: 100%;
.tabs-placeholder { .tabs-placeholder {
height: 2.625rem; height: 2.625rem;
@ -28,11 +31,14 @@
} }
.TabList { .TabList {
justify-content: flex-start;
border-bottom: 0;
z-index: 1; z-index: 1;
justify-content: flex-start;
border-bottom: 0;
opacity: 1; opacity: 1;
transition: opacity var(--layer-transition); transition: opacity var(--layer-transition);
} }
@ -46,25 +52,26 @@
} }
> .Transition { > .Transition {
flex: 1;
overflow: hidden; overflow: hidden;
flex: 1;
} }
} }
.RecentContacts, .RecentContacts,
.LeftSearch, .LeftSearch,
.search-content { .search-content {
height: 100%;
overflow-y: auto; overflow-y: auto;
height: 100%;
} }
.btn-update { .btn-update {
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
margin: 0 auto;
transform: translateX(-50%); transform: translateX(-50%);
margin: 0 auto;
white-space: nowrap; white-space: nowrap;
} }
} }

Some files were not shown because too many files have changed in this diff Show More