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',
outputDir: './src/styles',
name: 'icons',

3
.stylelintrc.json
View File

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

38
package-lock.json generated
View File

@ -96,6 +96,7 @@
"script-loader": "^0.7.2",
"serve": "^14.2.4",
"stylelint": "^16.19.1",
"stylelint-config-clean-order": "^7.0.0",
"stylelint-config-recommended-scss": "^15.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
"stylelint-group-selectors": "^1.0.10",
@ -18381,6 +18382,16 @@
"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": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -20891,6 +20902,19 @@
"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": {
"version": "16.0.0",
"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"
}
},
"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": {
"version": "6.12.0",
"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:release:production": "ENV=production npm run electron:package -- -p always",
"telegraph:update_changelog": "node ./dev/telegraphChangelog.js",
"check": "tsc && stylelint \"**/*.{css,scss}\" && eslint .",
"check:fix": "npm run check -- --fix",
"check": "tsc && stylelint \"**/*.{css,scss}\" && eslint",
"check:fix": "stylelint \"**/*.{css,scss}\" --fix && eslint --fix",
"tl:rehash": "node ./dev/tlHash.js",
"gramjs:tl": "tsx ./src/lib/gramjs/tl/generateModules.ts",
"lang:ts": "tsx ./dev/generateLangTypes.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:playwright": "playwright test",
"test:record": "playwright codegen localhost:1235",
@ -118,6 +118,7 @@
"script-loader": "^0.7.2",
"serve": "^14.2.4",
"stylelint": "^16.19.1",
"stylelint-config-clean-order": "^7.0.0",
"stylelint-config-recommended-scss": "^15.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
"stylelint-group-selectors": "^1.0.10",

14
public/get/index.css
View File

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

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

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

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

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

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

@ -1,20 +1,23 @@
.ActiveCallHeader {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 2rem;
width: 100%;
z-index: 1;
transform: translateY(-100%);
display: flex;
justify-content: center;
font-weight: var(--font-weight-medium);
font-size: 0.875rem;
color: #fff;
align-items: center;
justify-content: center;
width: 100%;
height: 2rem;
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));
transform: translateY(-100%);
&.open {
transform: translateY(0);

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

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

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

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

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

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

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

@ -11,22 +11,27 @@
z-index: var(--z-modal-menu);
.bubble {
backdrop-filter: none !important;
background: none !important;
border-radius: 0;
overflow: visible;
padding: 0;
border: none !important;
box-shadow: none !important;
overflow: visible;
border-radius: 0;
color: var(--color-text);
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
.group {
box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
overflow: hidden;
background: var(--color-background);
border-radius: var(--border-radius-default);
margin-bottom: 0.5rem;
border-radius: var(--border-radius-default);
background: var(--color-background);
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 {
@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;
.info {
pointer-events: none;
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
padding: 0.75rem 1rem;
.AnimatedSticker {
@ -70,31 +94,16 @@
--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
input[type="range"] {
height: 3rem;
position: absolute;
left: -1.5rem;
top: 0;
width: calc(100% + 1.5rem);
margin: 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,
// that's necessary as you can't comma-separate these type of selectors.
@ -111,5 +120,7 @@
@include thumb-styles();
}
}
@include mixins.reset-range();
}
}

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

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

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

@ -3,11 +3,12 @@
.GroupCallTopPane {
@include mixins.header-pane;
cursor: var(--custom-cursor, pointer);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
cursor: var(--custom-cursor, pointer);
justify-content: space-between;
.info {
display: flex;
@ -26,10 +27,11 @@
}
.join {
height: 1.875rem;
border-radius: 1rem;
font-weight: var(--font-weight-medium);
padding: 0 1rem;
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);
&::before, &::after {
content: '';
position: absolute;
inset: 0;
content: '';
display: block;
transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
opacity: 0;
transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
}
&::before {
background: var(--gradient-blue);
transform: rotate(45deg);
background: var(--gradient-blue);
}
&::after {
background: var(--gradient-purple);
transform: rotate(-45deg);
background: var(--gradient-purple);
}
}
.spinner {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.25s ease-in-out opacity;
}
@ -37,8 +43,8 @@
}
.mutedByAdmin::before, .canUnmute::before {
opacity: 1;
transform: rotate(0deg);
opacity: 1;
}
.icon {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,8 +4,8 @@
--spacing: calc(var(--_size) * 0.4);
--spacing-gap: calc(var(--_size) * 0.04);
display: flex;
position: relative;
display: flex;
}
.avatar {
@ -30,18 +30,17 @@
.badge {
position: absolute;
bottom: -1px;
right: -1px;
bottom: -1px;
background-color: var(--color-primary);
color: var(--color-white);
padding: 0rem 0.25rem;
border: 1px solid var(--color-background);
border-radius: 1rem;
font-size: 0.75rem;
line-height: 1rem;
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 {
padding: 0.25em 0.5em;
border-radius: 1em;
font-size: 0.75rem;
line-height: 1;
border-radius: 1em;
padding: 0.25em 0.5em;
background-color: var(--accent-background-active-color);
color: var(--accent-color);
background-color: var(--accent-background-active-color);
filter: brightness(1);
transition: 150ms filter ease-in;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,17 +1,18 @@
.root {
--click-shift-x: 0px;
--click-shift-y: 0px;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-text-secondary); // Fallback before canvas is prepared
--click-shift-x: 0px;
--click-shift-y: 0px;
}
.mask-animation:global(.closing) {
mask-image: url("../../assets/spoilers/mask.svg"), linear-gradient(#ffffff, #ffffff);
-webkit-mask-composite: destination-out;
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-repeat: no-repeat;
mask-size: 0%;
@ -41,6 +42,8 @@
position: absolute;
top: 0;
left: 0;
transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y));
width: 100%;
height: 100%;
@ -48,7 +51,48 @@
background-size: var(--background-size) var(--background-size);
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) {
--background-url: url("../../assets/spoilers/turbulence_2x.png");
@ -57,38 +101,6 @@
@media (-webkit-min-device-pixel-ratio: 3) {
--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 {

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

@ -1,10 +1,12 @@
.MessageOutgoingStatus {
width: 1.1875rem;
height: 1.1875rem;
overflow: hidden;
display: inline-block;
line-height: 1;
width: 1.1875rem;
height: 1.1875rem;
font-size: 1.1875rem;
line-height: 1;
.icon-message-succeeded {
padding-left: 0.125rem;
@ -17,17 +19,21 @@
.MessageOutgoingStatus--failed::before {
content: "";
display: block;
position: absolute;
inset: 0.25rem;
display: block;
border-radius: 50%;
background: white;
}
.icon-message-failed {
background: none;
color: var(--color-error);
z-index: 1;
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 {
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;
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;
}
@ -19,10 +19,11 @@
}
.value {
overflow: hidden;
justify-self: flex-start;
width: 100%; // Grid ellipsis hack
font-weight: var(--font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
}

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

@ -13,10 +13,12 @@
}
.description {
color: var(--color-text-secondary);
font-size: 0.875rem;
text-align: center;
margin: 1rem 0 0;
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 {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 7.5rem;
height: 7.5rem;
margin-right: auto;
margin-bottom: 1.75rem;
@media (min-width: 600px) and (min-height: 450px) {
width: 10rem;
height: 10rem;
margin-bottom: 2.5rem;
}
margin-left: auto;
&.big {
width: 10rem;
@ -20,8 +16,9 @@
.AnimatedSticker {
position: absolute;
left: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
@ -36,4 +33,10 @@
background: url('../../assets/monkey.svg') center;
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 {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
align-items: center;
}
.top {
position: relative;
display: grid;
place-items: center;
position: relative;
}
.badge {
position: absolute;
z-index: 1;
bottom: -0.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
align-items: center;
gap: 0.125rem;
align-items: center;
padding: 0.25rem;
border: 2px solid var(--color-background);
border-radius: 1rem;
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
line-height: 1;
color: var(--color-white);
white-space: nowrap;
padding: 0.25rem;
background-color: var(--color-primary);
color: var(--color-white);
border: 2px solid var(--color-background);
border-radius: 1rem;
}
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-size: 0.875rem;
width: 100%;
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 {
cursor: var(--custom-cursor, pointer);
position: relative;
display: flex;
flex-shrink: 1;
align-items: center;
background: var(--color-chat-hover);
min-width: 0;
height: 2rem;
margin-inline: 0.25rem;
padding-right: 0.75rem;
border-radius: 1rem;
cursor: var(--custom-cursor, pointer);
position: relative;
min-width: 0;
flex-shrink: 1;
background: var(--color-chat-hover);
transition: background-color 0.15s ease;
&.minimized {
@ -44,10 +49,13 @@
.avatar,
.iconWrapper {
flex-shrink: 0;
width: 2rem;
height: 2rem;
opacity: 1;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
@ -55,54 +63,63 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0.375rem;
border-radius: 50%;
background-color: var(--color-primary);
color: white;
background-color: var(--color-primary);
.icon {
font-size: 1.25rem;
position: relative;
top: -1px;
font-size: 1.25rem;
}
}
.name {
margin-left: 0.5rem;
white-space: nowrap;
min-width: 0;
margin-left: 0.5rem;
text-overflow: ellipsis;
white-space: nowrap;
:global(.emoji.emoji-small) {
width: 1.125rem;
height: 1.125rem;
background-size: 1.125rem;
vertical-align: -4px;
background-size: 1.125rem;
}
}
.remove {
position: absolute;
left: 0;
z-index: 1;
top: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-error);
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1.5rem;
color: white;
opacity: 0;
background-color: var(--color-error);
transition: opacity 0.15s ease;
z-index: 1;
}
&.squareAvatar {
--border-radius-forum-avatar: 0.625rem;
border-start-start-radius: 0.625rem;
border-end-start-radius: 0.625rem;
--border-radius-forum-avatar: 0.625rem;
&.minimized, .remove {
border-radius: 0.625rem;
@ -110,8 +127,8 @@
}
&[dir="rtl"] {
padding-left: 1rem;
padding-right: 0;
padding-left: 1rem;
&.minimized {
padding-right: 0;
@ -119,13 +136,13 @@
}
.name {
margin-left: 0;
margin-right: 0.5rem;
margin-left: 0;
}
.remove {
left: auto;
right: 0;
left: auto;
}
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,12 +4,6 @@
max-width: 100%;
}
@media (max-width: 600px) {
.modal-dialog {
width: 20.375rem;
}
}
.modal-header {
padding: 0.5rem;
border-bottom: 1px solid transparent;
@ -23,8 +17,8 @@
.modal-content {
--emoji-size: 4.5rem;
text-align: center;
padding: 0 !important;
text-align: center;
}
&.custom-emoji .modal-content {
@ -37,23 +31,28 @@
.stickers {
position: relative;
overflow-y: auto;
width: 100%;
height: 19rem;
max-height: 50vh;
overflow-y: auto;
padding: 0 0.25rem;
text-align: left;
}
.stickers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem));
justify-content: space-between;
row-gap: 0.25rem;
column-gap: var(--symbol-set-gap-size, 0.625rem);
text-align: initial;
justify-content: space-between;
padding-bottom: 0.25rem;
text-align: initial;
@media (max-width: 600px) {
grid-gap: 0.5rem;
}
@ -75,4 +74,10 @@
height: 22.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 {
z-index: 1;
width: 100%;
height: 100%;
z-index: 1;
&:global(.closing) {
transition-delay: 150ms;
@ -20,6 +20,7 @@
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

@ -1,30 +1,40 @@
.root {
--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);
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 {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 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);
opacity: 0.15;
background-color: var(--topic-button-accent-color);
transition: opacity 0.15s ease-in-out;
}
&:hover::before {

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

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

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

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

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

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

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

@ -1,27 +1,33 @@
.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;
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 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-medium);
margin-bottom: 0.5rem;
color: var(--accent-color);
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 {
overflow: hidden;
margin: 0;
white-space: pre-wrap;
overflow: hidden;
&:hover {
.code-overlay {
@ -30,8 +36,8 @@
}
&.no-word-wrap {
white-space: pre;
padding-bottom: 0.25rem;
white-space: pre;
}
html.theme-light & {
@ -83,8 +89,8 @@
}
.hljs {
display: block;
overflow-x: auto;
display: block;
color: var(--color-text);
}
}
@ -132,8 +138,8 @@
.hljs-comment,
.hljs-quote {
color: var(--color-comment);
font-style: italic;
color: var(--color-comment);
}
.hljs-meta,

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

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

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

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

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

@ -1,9 +1,11 @@
.root {
color: var(--accent-color);
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 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 {
position: absolute;
height: 3.5rem;
width: 3.5rem;
top: -0.125rem;
right: -0.125rem;
width: 3.5rem;
height: 3.5rem;
}
.text {

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

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

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

@ -1,27 +1,32 @@
.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);
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 {
content: "";
position: absolute;
inset: 0;
opacity: 0;
border-radius: 0.625rem;
background-color: var(--color-hover-overlay);
pointer-events: none;
content: "";
position: absolute;
z-index: 1;
inset: 0;
border-radius: 0.625rem;
opacity: 0;
background-color: var(--color-hover-overlay);
}
&:hover::before {
@ -37,20 +42,22 @@
}
.hiddenGift {
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--color-light-shadow);
color: white;
font-size: 1.25rem;
color: white;
background-color: var(--color-light-shadow);
backdrop-filter: blur(0.5rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -5,22 +5,25 @@
.particle {
--custom-emoji-size: var(--particle-size, 1rem);
color: var(--color-primary);
position: absolute;
offset-path: var(--offset-path);
offset-rotate: 0deg;
width: var(--particle-size, 1rem);
height: var(--particle-size, 1rem);
border-radius: 0.25rem;
offset-path: var(--offset-path);
offset-rotate: 0deg;
color: var(--color-primary);
animation: 1.5s particle ease-out;
animation-fill-mode: forwards;
}
@keyframes particle {
0% {
offset-distance: 0%;
transform: scale(1);
offset-distance: 0%;
}
50% {
@ -32,8 +35,8 @@
}
100% {
transform: scale(1);
offset-distance: 100%;
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;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: var(--custom-emoji-size);
height: var(--custom-emoji-size);
z-index: 1;
}
.animated-icon, .effect {

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

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

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

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

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

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

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

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

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

@ -1,21 +1,21 @@
@use '../../styles/mixins';
.modalContent {
padding: 0 !important;
overflow-y: hidden !important;
display: flex;
flex-direction: column;
padding: 0 !important;
}
.root :global(.modal-dialog) {
max-height: 70%;
max-width: 26.25rem;
overflow: hidden;
max-width: 26.25rem;
max-height: 70%;
}
.main {
overflow-y: auto;
scrollbar-gutter: stable;
overflow-y: auto;
padding: 1rem 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 {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
z-index: 2;
opacity: 1;
transition: transform 300ms ease, opacity 300ms ease;
opacity: 1;
&:not(.open) {
transform: translateY(-3rem);
@ -19,15 +21,17 @@
}
#ConnectionStatusOverlay {
height: 2.9375rem;
flex: 0 0 auto;
display: flex;
flex: 0 0 auto;
align-items: center;
height: 2.9375rem;
margin: 0.375rem 0.5rem;
padding: 0 0.75rem;
background: var(--color-yellow);
border-radius: var(--border-radius-default);
background: var(--color-yellow);
&.interactive {
cursor: var(--custom-cursor, pointer);
}
@ -38,20 +42,16 @@
> .state-text {
flex: 1;
color: var(--color-text-lighter);
margin-inline-start: 1.875rem;
padding-bottom: 0.0625rem;
font-size: 0.9375rem;
font-weight: var(--font-weight-medium);
padding-bottom: 0.0625rem;
margin-inline-start: 1.875rem;
color: var(--color-text-lighter);
white-space: nowrap;
}
@media (max-width: 950px) {
> .state-text {
margin-inline-start: 1.25rem;
}
}
.Transition {
width: 100%;
// https://dfmcphee.com/flex-items-and-min-width-0/
@ -64,4 +64,10 @@
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 {
display: flex;
flex-shrink: 0;
align-items: center;
height: var(--header-height);
padding: 0.375rem 0.8125rem 0.5rem 0.8125rem;
display: flex;
align-items: center;
flex-shrink: 0;
background-color: var(--color-background);
h3 {
user-select: none;
overflow: hidden;
margin-right: auto;
margin-bottom: 0;
margin-left: 1.375rem;
font-size: 1.25rem;
font-weight: var(--font-weight-medium);
margin-left: 1.375rem;
margin-right: auto;
user-select: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.SearchInput {
margin-left: 0.625rem;
max-width: calc(100% - 3.25rem);
margin-left: 0.625rem;
@media (max-width: 600px) {
max-width: calc(100% - 3rem);
}
}
@media (max-width: 600px) {
padding: 0.5rem;
}
.Button.smaller {
width: 2.5rem;
height: 2.5rem;
@ -57,8 +58,8 @@
padding: 0.5rem 0.5rem 0.5rem 4.5rem;
.SearchInput {
margin-left: 0.5rem;
max-width: calc(100% - 2.75rem);
margin-left: 0.5rem;
}
.Menu.main-menu .bubble {
@ -66,4 +67,8 @@
--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 & {
transform: none !important;
opacity: 0;
transition: opacity 0.15s;
&.revealed {
@ -26,9 +25,9 @@
transform: translateY(0);
@media (max-width: 600px) {
transform-style: preserve-3d;
// Force rendering in the composite layer to fix the z-index rendering issue
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 {
background-color: var(--color-background-secondary);
margin: -0.5rem -0.5rem 0 -0.5rem !important;
background-color: var(--color-background-secondary);
&::after {
display: none;
}
&:hover {
opacity: 0.85;
}
.button {
border-radius: 0;
padding: 0.375rem !important;
border-radius: 0;
background-color: transparent;
}
@ -35,9 +39,11 @@
.unread-count {
position: absolute;
right: 0.75rem;
background-color: transparent;
color: var(--color-text-secondary);
font-size: 0.8125rem;
color: var(--color-text-secondary);
background-color: transparent;
}
.info {
@ -45,12 +51,8 @@
}
.name {
line-height: 1.25rem !important;
font-size: 0.8125rem !important;
}
&::after {
display: none;
line-height: 1.25rem !important;
}
}
@ -72,9 +74,9 @@
}
.avatarWrapper {
z-index: 1;
flex-shrink: 0;
background-color: var(--background-color);
z-index: 1;
}
.avatar {
@ -87,9 +89,9 @@
}
.chatsPreview {
color: var(--color-text-secondary);
flex-grow: 1;
overflow: hidden;
flex-grow: 1;
color: var(--color-text-secondary);
text-overflow: ellipsis;
}

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

@ -8,19 +8,20 @@
--z-badge: 4;
--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-macos & {
--color-text-meta: var(--color-text-meta-apple);
}
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
-webkit-touch-callout: none;
&.standalone {
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`
@media (min-width: 600px) {
&: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) {
&.selected {
--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) {
.ListItem-button {
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 {
flex-shrink: 0;
min-width: 1.5rem;
height: 1.5rem;
background: var(--color-gray);
border-radius: 0.75rem;
padding: 0 0.4375rem !important;
color: white;
border-radius: 0.75rem;
font-size: 0.875rem !important;
line-height: 1.5625rem;
font-weight: var(--font-weight-medium);
line-height: 1.5625rem;
color: white;
text-align: center;
flex-shrink: 0;
background: var(--color-gray);
body.is-macos & {
line-height: 1.5rem;
}
body.is-ios &:not(.unopened) {
line-height: 1.375rem;
min-width: 1.375rem;
height: 1.375rem;
padding: 0 0.375rem;
line-height: 1.375rem;
}
body.is-ios,
body.is-macos,
&.miniapp {
line-height: 1.5rem !important;
min-width: 1.5rem;
height: 1.5rem !important;
line-height: 1.5rem !important;
}
&.mention,
&.unread:not(.muted),
&.unopened:not(.muted) {
background: var(--color-green);
color: var(--color-white);
background: var(--color-green);
}
&.unopened {
align-self: center;
width: 0.5rem;
height: 0.5rem;
min-width: auto;
height: 0.5rem;
min-height: auto;
padding: 0;
align-self: center;
}
&.pinned {
color: var(--color-list-icon);
background: transparent;
width: 1.5rem;
padding: 0;
color: var(--color-list-icon);
background: transparent;
.icon {
font-size: 1.5rem;

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

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

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

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

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

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

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

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

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

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

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

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

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