diff --git a/.fantasticonrc.js b/.fantasticonrc.cjs similarity index 95% rename from .fantasticonrc.js rename to .fantasticonrc.cjs index cc39496e8..d95a56152 100644 --- a/.fantasticonrc.js +++ b/.fantasticonrc.cjs @@ -1,4 +1,4 @@ -export default { +module.exports = { inputDir: './src/assets/font-icons', outputDir: './src/styles', name: 'icons', diff --git a/.stylelintrc.json b/.stylelintrc.json index e8ccad568..a5fa681c5 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,7 +1,8 @@ { "extends": [ "stylelint-config-recommended-scss", - "@stylistic/stylelint-config" + "@stylistic/stylelint-config", + "stylelint-config-clean-order/error" ], "ignoreFiles": [ "dist/*.css", diff --git a/package-lock.json b/package-lock.json index e49f5b2a2..390f082da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 765f1cc6d..0fcfd0f06 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/get/index.css b/public/get/index.css index 7917ccf43..b4534b094 100644 --- a/public/get/index.css +++ b/public/get/index.css @@ -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; } diff --git a/src/components/App.module.scss b/src/components/App.module.scss index 01bc67249..41c575616 100644 --- a/src/components/App.module.scss +++ b/src/components/App.module.scss @@ -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); + } } diff --git a/src/components/auth/Auth.scss b/src/components/auth/Auth.scss index 4dc074fb2..50ae4d1e9 100644 --- a/src/components/auth/Auth.scss +++ b/src/components/auth/Auth.scss @@ -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); diff --git a/src/components/auth/CountryCodeInput.scss b/src/components/auth/CountryCodeInput.scss index ff975e1ab..e76128553 100644 --- a/src/components/auth/CountryCodeInput.scss +++ b/src/components/auth/CountryCodeInput.scss @@ -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; } } diff --git a/src/components/calls/ActiveCallHeader.scss b/src/components/calls/ActiveCallHeader.scss index 25aa1ab61..414b79a4c 100644 --- a/src/components/calls/ActiveCallHeader.scss +++ b/src/components/calls/ActiveCallHeader.scss @@ -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); diff --git a/src/components/calls/group/GroupCall.module.scss b/src/components/calls/group/GroupCall.module.scss index 09f0b8017..b9eb154a7 100644 --- a/src/components/calls/group/GroupCall.module.scss +++ b/src/components/calls/group/GroupCall.module.scss @@ -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%); } diff --git a/src/components/calls/group/GroupCallParticipant.module.scss b/src/components/calls/group/GroupCallParticipant.module.scss index 72741a8db..cb359f423 100644 --- a/src/components/calls/group/GroupCallParticipant.module.scss +++ b/src/components/calls/group/GroupCallParticipant.module.scss @@ -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 { diff --git a/src/components/calls/group/GroupCallParticipantList.module.scss b/src/components/calls/group/GroupCallParticipantList.module.scss index 6c9b10ede..80fedc7f3 100644 --- a/src/components/calls/group/GroupCallParticipantList.module.scss +++ b/src/components/calls/group/GroupCallParticipantList.module.scss @@ -1,7 +1,7 @@ .root { position: absolute; - width: 100%; top: 0.25rem; + width: 100%; padding-bottom: 5rem; } diff --git a/src/components/calls/group/GroupCallParticipantMenu.scss b/src/components/calls/group/GroupCallParticipantMenu.scss index 50e59fc7c..fbedb996b 100644 --- a/src/components/calls/group/GroupCallParticipantMenu.scss +++ b/src/components/calls/group/GroupCallParticipantMenu.scss @@ -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(); } } diff --git a/src/components/calls/group/GroupCallParticipantVideo.module.scss b/src/components/calls/group/GroupCallParticipantVideo.module.scss index 5bda44e81..d3c24c118 100644 --- a/src/components/calls/group/GroupCallParticipantVideo.module.scss +++ b/src/components/calls/group/GroupCallParticipantVideo.module.scss @@ -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 { diff --git a/src/components/calls/group/GroupCallTopPane.scss b/src/components/calls/group/GroupCallTopPane.scss index 0177ba120..8e1e2c4b4 100644 --- a/src/components/calls/group/GroupCallTopPane.scss +++ b/src/components/calls/group/GroupCallTopPane.scss @@ -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); } } diff --git a/src/components/calls/group/MicrophoneButton.module.scss b/src/components/calls/group/MicrophoneButton.module.scss index b3f7189b3..bba79a12d 100644 --- a/src/components/calls/group/MicrophoneButton.module.scss +++ b/src/components/calls/group/MicrophoneButton.module.scss @@ -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 { diff --git a/src/components/calls/phone/PhoneCall.module.scss b/src/components/calls/phone/PhoneCall.module.scss index 6e6706b60..f3100f7ec 100644 --- a/src/components/calls/phone/PhoneCall.module.scss +++ b/src/components/calls/phone/PhoneCall.module.scss @@ -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 { diff --git a/src/components/calls/phone/PhoneCallButton.module.scss b/src/components/calls/phone/PhoneCallButton.module.scss index 12de885ae..b139f1269 100644 --- a/src/components/calls/phone/PhoneCallButton.module.scss +++ b/src/components/calls/phone/PhoneCallButton.module.scss @@ -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; } diff --git a/src/components/calls/phone/RatePhoneCallModal.module.scss b/src/components/calls/phone/RatePhoneCallModal.module.scss index b98f1ff6d..8f7de7fe0 100644 --- a/src/components/calls/phone/RatePhoneCallModal.module.scss +++ b/src/components/calls/phone/RatePhoneCallModal.module.scss @@ -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; diff --git a/src/components/common/AboutMonetizationModal.module.scss b/src/components/common/AboutMonetizationModal.module.scss index 01a6d958c..403758c4d 100644 --- a/src/components/common/AboutMonetizationModal.module.scss +++ b/src/components/common/AboutMonetizationModal.module.scss @@ -1,7 +1,7 @@ .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .toncoin { diff --git a/src/components/common/AnimatedIconWithPreview.module.scss b/src/components/common/AnimatedIconWithPreview.module.scss index 4faaa222f..a03de22ac 100644 --- a/src/components/common/AnimatedIconWithPreview.module.scss +++ b/src/components/common/AnimatedIconWithPreview.module.scss @@ -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%; diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss index c0075ed66..37297468c 100644 --- a/src/components/common/Audio.scss +++ b/src/components/common/Audio.scss @@ -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; } } } diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss index 414333922..7993b4184 100644 --- a/src/components/common/Avatar.scss +++ b/src/components/common/Avatar.scss @@ -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 { diff --git a/src/components/common/AvatarList.module.scss b/src/components/common/AvatarList.module.scss index 37eaa5884..c78fb8b23 100644 --- a/src/components/common/AvatarList.module.scss +++ b/src/components/common/AvatarList.module.scss @@ -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); } diff --git a/src/components/common/BadgeButton.module.scss b/src/components/common/BadgeButton.module.scss index d32c7ba50..8296afe36 100644 --- a/src/components/common/BadgeButton.module.scss +++ b/src/components/common/BadgeButton.module.scss @@ -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; } diff --git a/src/components/common/Blockquote.module.scss b/src/components/common/Blockquote.module.scss index 22095cdfa..efdbc7a59 100644 --- a/src/components/common/Blockquote.module.scss +++ b/src/components/common/Blockquote.module.scss @@ -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 { diff --git a/src/components/common/CalendarModal.scss b/src/components/common/CalendarModal.scss index f2248f05a..e996a5512 100644 --- a/src/components/common/CalendarModal.scss +++ b/src/components/common/CalendarModal.scss @@ -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; } diff --git a/src/components/common/ChatForumLastMessage.module.scss b/src/components/common/ChatForumLastMessage.module.scss index 743909d95..8c4248a37 100644 --- a/src/components/common/ChatForumLastMessage.module.scss +++ b/src/components/common/ChatForumLastMessage.module.scss @@ -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) { diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss index 7aac0acc5..b67221519 100644 --- a/src/components/common/Composer.scss +++ b/src/components/common/Composer.scss @@ -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 { diff --git a/src/components/common/CountryPickerModal.module.scss b/src/components/common/CountryPickerModal.module.scss index 7d95ae473..4894708d5 100644 --- a/src/components/common/CountryPickerModal.module.scss +++ b/src/components/common/CountryPickerModal.module.scss @@ -23,6 +23,6 @@ .footer { display: flex; - justify-content: flex-end; flex-direction: column; + justify-content: flex-end; } diff --git a/src/components/common/CustomEmoji.module.scss b/src/components/common/CustomEmoji.module.scss index 9f79e3f37..fec46eefe 100644 --- a/src/components/common/CustomEmoji.module.scss +++ b/src/components/common/CustomEmoji.module.scss @@ -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; } diff --git a/src/components/common/CustomEmojiSetsModal.module.scss b/src/components/common/CustomEmojiSetsModal.module.scss index 1eaa9280c..72a1dfdbc 100644 --- a/src/components/common/CustomEmojiSetsModal.module.scss +++ b/src/components/common/CustomEmojiSetsModal.module.scss @@ -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; } diff --git a/src/components/common/DeleteMessageModal.module.scss b/src/components/common/DeleteMessageModal.module.scss index aeab720aa..c11b4bd3a 100644 --- a/src/components/common/DeleteMessageModal.module.scss +++ b/src/components/common/DeleteMessageModal.module.scss @@ -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; } diff --git a/src/components/common/DotAnimation.scss b/src/components/common/DotAnimation.scss index 7220b5d8b..7e3776fed 100644 --- a/src/components/common/DotAnimation.scss +++ b/src/components/common/DotAnimation.scss @@ -3,9 +3,9 @@ align-items: center; .ellipsis { + overflow: hidden; display: flex; width: 1rem; - overflow: hidden; &::after { content: "..."; diff --git a/src/components/common/FakeIcon.scss b/src/components/common/FakeIcon.scss index 41bcc6f00..015d12f2e 100644 --- a/src/components/common/FakeIcon.scss +++ b/src/components/common/FakeIcon.scss @@ -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; } diff --git a/src/components/common/File.scss b/src/components/common/File.scss index 7d0d4346b..d8766a498 100644 --- a/src/components/common/File.scss +++ b/src/components/common/File.scss @@ -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; } } } diff --git a/src/components/common/FullNameTitle.module.scss b/src/components/common/FullNameTitle.module.scss index 54dade8fa..1a8ea9c9f 100644 --- a/src/components/common/FullNameTitle.module.scss +++ b/src/components/common/FullNameTitle.module.scss @@ -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; diff --git a/src/components/common/GifButton.scss b/src/components/common/GifButton.scss index cdcf67818..2e927d46f 100644 --- a/src/components/common/GifButton.scss +++ b/src/components/common/GifButton.scss @@ -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; diff --git a/src/components/common/LastMessageMeta.scss b/src/components/common/LastMessageMeta.scss index aa2295d40..80d38e48d 100644 --- a/src/components/common/LastMessageMeta.scss +++ b/src/components/common/LastMessageMeta.scss @@ -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; diff --git a/src/components/common/LinkField.module.scss b/src/components/common/LinkField.module.scss index 38d8a70ae..b8c6cd748 100644 --- a/src/components/common/LinkField.module.scss +++ b/src/components/common/LinkField.module.scss @@ -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 { diff --git a/src/components/common/ManageUsernames.module.scss b/src/components/common/ManageUsernames.module.scss index bddb89d7c..2d253da67 100644 --- a/src/components/common/ManageUsernames.module.scss +++ b/src/components/common/ManageUsernames.module.scss @@ -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; diff --git a/src/components/common/Media.scss b/src/components/common/Media.scss index 6f1470bc0..84c7ccc4b 100644 --- a/src/components/common/Media.scss +++ b/src/components/common/Media.scss @@ -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; } } diff --git a/src/components/common/MediaSpoiler.module.scss b/src/components/common/MediaSpoiler.module.scss index 7b8893f66..8553ddca3 100644 --- a/src/components/common/MediaSpoiler.module.scss +++ b/src/components/common/MediaSpoiler.module.scss @@ -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 { diff --git a/src/components/common/MessageOutgoingStatus.scss b/src/components/common/MessageOutgoingStatus.scss index cfd1171db..65ce8fbe5 100644 --- a/src/components/common/MessageOutgoingStatus.scss +++ b/src/components/common/MessageOutgoingStatus.scss @@ -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; } } diff --git a/src/components/common/MiniTable.module.scss b/src/components/common/MiniTable.module.scss index 5d0dc8fd2..c2eb749e7 100644 --- a/src/components/common/MiniTable.module.scss +++ b/src/components/common/MiniTable.module.scss @@ -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; } diff --git a/src/components/common/NothingFound.scss b/src/components/common/NothingFound.scss index 0808120ce..f30b26de7 100644 --- a/src/components/common/NothingFound.scss +++ b/src/components/common/NothingFound.scss @@ -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; } } diff --git a/src/components/common/PasswordMonkey.scss b/src/components/common/PasswordMonkey.scss index 767d99f63..169a89b03 100644 --- a/src/components/common/PasswordMonkey.scss +++ b/src/components/common/PasswordMonkey.scss @@ -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; + } } diff --git a/src/components/common/PeerBadge.module.scss b/src/components/common/PeerBadge.module.scss index af13c9d37..0ae249aa1 100644 --- a/src/components/common/PeerBadge.module.scss +++ b/src/components/common/PeerBadge.module.scss @@ -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; } diff --git a/src/components/common/PeerChip.module.scss b/src/components/common/PeerChip.module.scss index 5b028dba1..a1ff9c09f 100644 --- a/src/components/common/PeerChip.module.scss +++ b/src/components/common/PeerChip.module.scss @@ -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; } } } diff --git a/src/components/common/PeerColorWrapper.module.scss b/src/components/common/PeerColorWrapper.module.scss index 97398ace9..4a3288db6 100644 --- a/src/components/common/PeerColorWrapper.module.scss +++ b/src/components/common/PeerColorWrapper.module.scss @@ -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); } } diff --git a/src/components/common/PremiumProgress.module.scss b/src/components/common/PremiumProgress.module.scss index 62531ba5a..2babeac81 100644 --- a/src/components/common/PremiumProgress.module.scss +++ b/src/components/common/PremiumProgress.module.scss @@ -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 { diff --git a/src/components/common/PrivacySettingsNoticeModal.module.scss b/src/components/common/PrivacySettingsNoticeModal.module.scss index aa86b73d5..dd5847457 100644 --- a/src/components/common/PrivacySettingsNoticeModal.module.scss +++ b/src/components/common/PrivacySettingsNoticeModal.module.scss @@ -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 { diff --git a/src/components/common/ProfileInfo.module.scss b/src/components/common/ProfileInfo.module.scss index b09247a23..e05271164 100644 --- a/src/components/common/ProfileInfo.module.scss +++ b/src/components/common/ProfileInfo.module.scss @@ -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; } diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss index ac686ba47..2ec925c3c 100644 --- a/src/components/common/ProfileInfo.scss +++ b/src/components/common/ProfileInfo.scss @@ -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; } } diff --git a/src/components/common/ProfilePhoto.scss b/src/components/common/ProfilePhoto.scss index d33bb00a4..c86a6328c 100644 --- a/src/components/common/ProfilePhoto.scss +++ b/src/components/common/ProfilePhoto.scss @@ -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%; } diff --git a/src/components/common/SliderDots.module.scss b/src/components/common/SliderDots.module.scss index 5e82b1f07..8e52869e0 100644 --- a/src/components/common/SliderDots.module.scss +++ b/src/components/common/SliderDots.module.scss @@ -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 { diff --git a/src/components/common/Sparkles.module.scss b/src/components/common/Sparkles.module.scss index 21afd4888..04e525d88 100644 --- a/src/components/common/Sparkles.module.scss +++ b/src/components/common/Sparkles.module.scss @@ -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; } } diff --git a/src/components/common/StickerButton.scss b/src/components/common/StickerButton.scss index 72867f09a..d390df6df 100644 --- a/src/components/common/StickerButton.scss +++ b/src/components/common/StickerButton.scss @@ -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 { diff --git a/src/components/common/StickerSetCard.scss b/src/components/common/StickerSetCard.scss index 853c12fee..e0f387418 100644 --- a/src/components/common/StickerSetCard.scss +++ b/src/components/common/StickerSetCard.scss @@ -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 { diff --git a/src/components/common/StickerSetModal.scss b/src/components/common/StickerSetModal.scss index adcec8587..8dbd4aaf0 100644 --- a/src/components/common/StickerSetModal.scss +++ b/src/components/common/StickerSetModal.scss @@ -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; + } + } } diff --git a/src/components/common/StickerView.module.scss b/src/components/common/StickerView.module.scss index 565271d71..b3b23d85d 100644 --- a/src/components/common/StickerView.module.scss +++ b/src/components/common/StickerView.module.scss @@ -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%; } diff --git a/src/components/common/TopicChip.module.scss b/src/components/common/TopicChip.module.scss index 6f05c7b18..dc08b71de 100644 --- a/src/components/common/TopicChip.module.scss +++ b/src/components/common/TopicChip.module.scss @@ -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 { diff --git a/src/components/common/TopicDefaultIcon.module.scss b/src/components/common/TopicDefaultIcon.module.scss index f0beb5568..1eacc69ea 100644 --- a/src/components/common/TopicDefaultIcon.module.scss +++ b/src/components/common/TopicDefaultIcon.module.scss @@ -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; diff --git a/src/components/common/UiLoader.module.scss b/src/components/common/UiLoader.module.scss index 6596f2d16..6d547a9a2 100644 --- a/src/components/common/UiLoader.module.scss +++ b/src/components/common/UiLoader.module.scss @@ -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); } diff --git a/src/components/common/VerifiedIcon.scss b/src/components/common/VerifiedIcon.scss index d96af7b60..bd89bccc0 100644 --- a/src/components/common/VerifiedIcon.scss +++ b/src/components/common/VerifiedIcon.scss @@ -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; } diff --git a/src/components/common/WebLink.scss b/src/components/common/WebLink.scss index f7bea14f6..dd2ba954d 100644 --- a/src/components/common/WebLink.scss +++ b/src/components/common/WebLink.scss @@ -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 { diff --git a/src/components/common/code/CodeBlock.scss b/src/components/common/code/CodeBlock.scss index 8c906d987..74a4b17a4 100644 --- a/src/components/common/code/CodeBlock.scss +++ b/src/components/common/code/CodeBlock.scss @@ -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, diff --git a/src/components/common/code/CodeOverlay.module.scss b/src/components/common/code/CodeOverlay.module.scss index 2222e3280..ee3dad3ab 100644 --- a/src/components/common/code/CodeOverlay.module.scss +++ b/src/components/common/code/CodeOverlay.module.scss @@ -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; diff --git a/src/components/common/embedded/EmbeddedMessage.scss b/src/components/common/embedded/EmbeddedMessage.scss index cbda0fd7b..44f8f3751 100644 --- a/src/components/common/embedded/EmbeddedMessage.scss +++ b/src/components/common/embedded/EmbeddedMessage.scss @@ -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; diff --git a/src/components/common/embedded/EmojiIconBackground.module.scss b/src/components/common/embedded/EmojiIconBackground.module.scss index bd622d6ec..c93a19e17 100644 --- a/src/components/common/embedded/EmojiIconBackground.module.scss +++ b/src/components/common/embedded/EmojiIconBackground.module.scss @@ -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); } diff --git a/src/components/common/gift/GiftRibbon.module.scss b/src/components/common/gift/GiftRibbon.module.scss index 175a6952f..0a7ad9a60 100644 --- a/src/components/common/gift/GiftRibbon.module.scss +++ b/src/components/common/gift/GiftRibbon.module.scss @@ -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 { diff --git a/src/components/common/gift/GiftTransferPreview.module.scss b/src/components/common/gift/GiftTransferPreview.module.scss index f7c04932f..a67e6b8d7 100644 --- a/src/components/common/gift/GiftTransferPreview.module.scss +++ b/src/components/common/gift/GiftTransferPreview.module.scss @@ -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; } diff --git a/src/components/common/gift/SavedGift.module.scss b/src/components/common/gift/SavedGift.module.scss index 22e5e9bd9..4583d2a6c 100644 --- a/src/components/common/gift/SavedGift.module.scss +++ b/src/components/common/gift/SavedGift.module.scss @@ -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); } diff --git a/src/components/common/icons/StarIcon.module.scss b/src/components/common/icons/StarIcon.module.scss index b889fe271..91650fd12 100644 --- a/src/components/common/icons/StarIcon.module.scss +++ b/src/components/common/icons/StarIcon.module.scss @@ -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); } diff --git a/src/components/common/pickers/ChatOrUserPicker.scss b/src/components/common/pickers/ChatOrUserPicker.scss index 6d3767606..0e3914f83 100644 --- a/src/components/common/pickers/ChatOrUserPicker.scss +++ b/src/components/common/pickers/ChatOrUserPicker.scss @@ -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 { diff --git a/src/components/common/pickers/PickerItem.module.scss b/src/components/common/pickers/PickerItem.module.scss index 179bc4e83..5b1a6bf39 100644 --- a/src/components/common/pickers/PickerItem.module.scss +++ b/src/components/common/pickers/PickerItem.module.scss @@ -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; } diff --git a/src/components/common/pickers/PickerStyles.module.scss b/src/components/common/pickers/PickerStyles.module.scss index 69bda0cf7..4b7633fa9 100644 --- a/src/components/common/pickers/PickerStyles.module.scss +++ b/src/components/common/pickers/PickerStyles.module.scss @@ -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); } diff --git a/src/components/common/profile/BusinessHours.module.scss b/src/components/common/profile/BusinessHours.module.scss index bdcf1881b..83f78c0b0 100644 --- a/src/components/common/profile/BusinessHours.module.scss +++ b/src/components/common/profile/BusinessHours.module.scss @@ -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 { diff --git a/src/components/common/profile/ChatExtra.module.scss b/src/components/common/profile/ChatExtra.module.scss index f8df4c272..b29bcf679 100644 --- a/src/components/common/profile/ChatExtra.module.scss +++ b/src/components/common/profile/ChatExtra.module.scss @@ -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 { diff --git a/src/components/common/profile/RadialPatternBackground.module.scss b/src/components/common/profile/RadialPatternBackground.module.scss index 623b2a761..b4c084443 100644 --- a/src/components/common/profile/RadialPatternBackground.module.scss +++ b/src/components/common/profile/RadialPatternBackground.module.scss @@ -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; } diff --git a/src/components/common/profile/UserBirthday.module.scss b/src/components/common/profile/UserBirthday.module.scss index 542ce65d7..f5f9dbe0c 100644 --- a/src/components/common/profile/UserBirthday.module.scss +++ b/src/components/common/profile/UserBirthday.module.scss @@ -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; } diff --git a/src/components/common/reactions/CustomEmojiEffect.module.scss b/src/components/common/reactions/CustomEmojiEffect.module.scss index 8ceeaea42..abf216cf3 100644 --- a/src/components/common/reactions/CustomEmojiEffect.module.scss +++ b/src/components/common/reactions/CustomEmojiEffect.module.scss @@ -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); } } diff --git a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss index 4ff5c47c7..9482b114a 100644 --- a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss +++ b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss @@ -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 { diff --git a/src/components/common/reactions/ReactionEmoji.module.scss b/src/components/common/reactions/ReactionEmoji.module.scss index 580ec89c1..83e600fe6 100644 --- a/src/components/common/reactions/ReactionEmoji.module.scss +++ b/src/components/common/reactions/ReactionEmoji.module.scss @@ -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 { diff --git a/src/components/common/reactions/ReactionStaticEmoji.scss b/src/components/common/reactions/ReactionStaticEmoji.scss index 18be5b215..47d5677b9 100644 --- a/src/components/common/reactions/ReactionStaticEmoji.scss +++ b/src/components/common/reactions/ReactionStaticEmoji.scss @@ -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; } } diff --git a/src/components/common/spoiler/Spoiler.scss b/src/components/common/spoiler/Spoiler.scss index 4066a51a0..8eacba846 100644 --- a/src/components/common/spoiler/Spoiler.scss +++ b/src/components/common/spoiler/Spoiler.scss @@ -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 &, diff --git a/src/components/left/ArchivedChats.scss b/src/components/left/ArchivedChats.scss index a2632b57d..78908fbb5 100644 --- a/src/components/left/ArchivedChats.scss +++ b/src/components/left/ArchivedChats.scss @@ -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 { diff --git a/src/components/left/ChatFolderModal.module.scss b/src/components/left/ChatFolderModal.module.scss index f9bf7b0c3..46ef5047e 100644 --- a/src/components/left/ChatFolderModal.module.scss +++ b/src/components/left/ChatFolderModal.module.scss @@ -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); diff --git a/src/components/left/ConnectionStatusOverlay.scss b/src/components/left/ConnectionStatusOverlay.scss index 88832b63d..0e5be5f21 100644 --- a/src/components/left/ConnectionStatusOverlay.scss +++ b/src/components/left/ConnectionStatusOverlay.scss @@ -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; + } + } } diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss index ee59c0bd3..9ee6da32c 100644 --- a/src/components/left/LeftColumn.scss +++ b/src/components/left/LeftColumn.scss @@ -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; + } } diff --git a/src/components/left/NewChatButton.scss b/src/components/left/NewChatButton.scss index dd7585301..24c32c54e 100644 --- a/src/components/left/NewChatButton.scss +++ b/src/components/left/NewChatButton.scss @@ -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; } } diff --git a/src/components/left/main/Archive.module.scss b/src/components/left/main/Archive.module.scss index 2343632a5..39d430e60 100644 --- a/src/components/left/main/Archive.module.scss +++ b/src/components/left/main/Archive.module.scss @@ -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; } diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index fb68c25b9..febb474cd 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -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; - } - } - } } diff --git a/src/components/left/main/ChatBadge.scss b/src/components/left/main/ChatBadge.scss index 16937fdd6..61798b413 100644 --- a/src/components/left/main/ChatBadge.scss +++ b/src/components/left/main/ChatBadge.scss @@ -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; diff --git a/src/components/left/main/ChatCallStatus.module.scss b/src/components/left/main/ChatCallStatus.module.scss index 964ce96d9..cc45c0630 100644 --- a/src/components/left/main/ChatCallStatus.module.scss +++ b/src/components/left/main/ChatCallStatus.module.scss @@ -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); diff --git a/src/components/left/main/EmptyFolder.module.scss b/src/components/left/main/EmptyFolder.module.scss index bbea2601f..9188056b1 100644 --- a/src/components/left/main/EmptyFolder.module.scss +++ b/src/components/left/main/EmptyFolder.module.scss @@ -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 { diff --git a/src/components/left/main/EmptyForum.module.scss b/src/components/left/main/EmptyForum.module.scss index bc46b7c70..e40431d3f 100644 --- a/src/components/left/main/EmptyForum.module.scss +++ b/src/components/left/main/EmptyForum.module.scss @@ -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 { diff --git a/src/components/left/main/ForumPanel.module.scss b/src/components/left/main/ForumPanel.module.scss index 67f3498f9..0953fc6f9 100644 --- a/src/components/left/main/ForumPanel.module.scss +++ b/src/components/left/main/ForumPanel.module.scss @@ -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; } } diff --git a/src/components/left/main/FrozenAccountNotification.module.scss b/src/components/left/main/FrozenAccountNotification.module.scss index 0710354e4..0acdfb862 100644 --- a/src/components/left/main/FrozenAccountNotification.module.scss +++ b/src/components/left/main/FrozenAccountNotification.module.scss @@ -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); } diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index d8e864331..80b9de297 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -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; } } diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss index 9c30b6bc7..4f75235c6 100644 --- a/src/components/left/main/LeftMainHeader.scss +++ b/src/components/left/main/LeftMainHeader.scss @@ -9,9 +9,9 @@ } .DropdownMenu.rtl { - transition: var(--slide-transition) transform; position: absolute; z-index: 2; + transition: var(--slide-transition) transform; &.right-aligned { transform: @@ -34,22 +34,11 @@ .animated-menu-icon { position: absolute; - &, - &::before, - &::after { - width: 1.125rem; - height: 0.125rem; - border-radius: 0.125rem; - background-color: var(--color-text-secondary); - transition: transform 0.25s; - transform: rotate(0); - } - &::before, &::after { + content: ""; position: absolute; left: 0; - content: ""; } &::before { @@ -60,6 +49,20 @@ top: 0.3125rem; } + &, + &::before, + &::after { + transform: rotate(0); + + width: 1.125rem; + height: 0.125rem; + border-radius: 0.125rem; + + background-color: var(--color-text-secondary); + + transition: transform 0.25s; + } + &.state-back { transform: rotate(180deg); @@ -96,10 +99,9 @@ } .Menu .bubble { + overflow-y: auto; min-width: 17rem; max-height: calc(100 * var(--vh) - 3.75rem); - - overflow-y: auto; } .extra-spacing { @@ -118,8 +120,9 @@ } .emoji-status { - overflow: visible; --custom-emoji-size: 1.5rem; + + overflow: visible; color: var(--color-primary); } @@ -140,19 +143,19 @@ transition: opacity var(--layer-transition); &--hidden { - opacity: 0; pointer-events: none; + opacity: 0; } } .left-search-picker-item { - color: var(--color-text-secondary); - font-weight: var(--font-weight-medium); padding-right: 0; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); &[dir="rtl"] { - left: auto; right: -0.125rem; + left: auto; } } @@ -161,12 +164,13 @@ &-test { position: absolute; - left: 2.875rem; + z-index: 1; bottom: 0.0625rem; - color: var(--color-text-secondary); + left: 2.875rem; + font-size: 0.5rem; font-weight: var(--font-weight-medium); - z-index: 1; + color: var(--color-text-secondary); } .account-avatar { @@ -175,9 +179,9 @@ .fullName { margin: 0; + padding-top: 0.1875rem; font-size: 1em; line-height: 1; - padding-top: 0.1875rem; } } } diff --git a/src/components/left/main/StatusPickerMenu.module.scss b/src/components/left/main/StatusPickerMenu.module.scss index f5b8c802d..f4cd521b0 100644 --- a/src/components/left/main/StatusPickerMenu.module.scss +++ b/src/components/left/main/StatusPickerMenu.module.scss @@ -5,6 +5,7 @@ --border-radius-default: 1.25rem; left: 0.5rem; + width: 100%; max-width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); height: var(--symbol-menu-height); @@ -16,13 +17,13 @@ backdrop-filter: blur(25px); } - @media (max-width: 26rem) { - left: 0.5rem !important; - right: 0.5rem !important; - width: calc(100vw - 1rem); - } - :global(.sticker-set-cover), :global(.custom-emoji) { color: var(--color-primary); } + + @media (max-width: 26rem) { + right: 0.5rem !important; + left: 0.5rem !important; + width: calc(100vw - 1rem); + } } diff --git a/src/components/left/main/Topic.module.scss b/src/components/left/main/Topic.module.scss index f89d3a5f7..f40adc187 100644 --- a/src/components/left/main/Topic.module.scss +++ b/src/components/left/main/Topic.module.scss @@ -1,4 +1,8 @@ .root { + + &::after { + left: 0.75rem !important; + } :global(.ListItem-button) { padding: 0.5rem 0.75rem !important; @@ -9,10 +13,9 @@ } :global(.LastMessageMeta) { - padding-top: 0; - margin-top: -0.5rem; margin-right: 0 !important; + padding-top: 0; } } @@ -24,17 +27,13 @@ :global(body.is-ios) &::after { left: 0.75rem !important; } - - &::after { - left: 0.75rem !important; - } } .closed-icon { - color: var(--color-list-icon); - font-size: 0.75rem; margin-top: -0.5rem; margin-right: 0.25rem; + font-size: 0.75rem; + color: var(--color-list-icon); } .topic-icon { diff --git a/src/components/left/main/UnconfirmedSession.module.scss b/src/components/left/main/UnconfirmedSession.module.scss index 61b4a62a9..54c62e4c2 100644 --- a/src/components/left/main/UnconfirmedSession.module.scss +++ b/src/components/left/main/UnconfirmedSession.module.scss @@ -15,16 +15,16 @@ } .info { + margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin-bottom: 0.5rem; } .buttons { display: flex; flex-wrap: wrap; - justify-content: space-around; column-gap: 1rem; + justify-content: space-around; } .button { diff --git a/src/components/left/newChat/NewChat.scss b/src/components/left/newChat/NewChat.scss index abbb1f6bd..a2f402d33 100644 --- a/src/components/left/newChat/NewChat.scss +++ b/src/components/left/newChat/NewChat.scss @@ -1,21 +1,21 @@ .NewChat { - height: 100%; - overflow: hidden; position: relative; + overflow: hidden; + height: 100%; &-inner { - height: calc(100% - var(--header-height)); overflow: hidden; + height: calc(100% - var(--header-height)); &.step-2 { - padding: 0 1.25rem; display: flex; flex-direction: column; + padding: 0 1.25rem; .note, .error { + margin: 1.5rem 0.25rem; font-size: 0.875rem; line-height: 1.25rem; - margin: 1.5rem 0.25rem; } .error { @@ -28,18 +28,17 @@ } .chat-members-heading { - color: var(--color-text-secondary); + margin: 1rem 0.25rem; font-size: 1rem; font-weight: var(--font-weight-medium); - margin: 1rem 0.25rem; + color: var(--color-text-secondary); } .chat-members-list { - margin: 0 -1.25rem; - padding: 0 1rem 1rem; - overflow-x: hidden; flex-grow: 1; + margin: 0 -1.25rem; + padding: 0 1rem 1rem; } } } diff --git a/src/components/left/search/ChatMessage.scss b/src/components/left/search/ChatMessage.scss index 58a01fa4a..ee391e2f6 100644 --- a/src/components/left/search/ChatMessage.scss +++ b/src/components/left/search/ChatMessage.scss @@ -13,20 +13,23 @@ } h3 { - font-size: 1rem; width: auto; + font-size: 1rem; } .subtitle { color: var(--color-text-secondary); .matching-text-highlight { - color: var(--color-text); - background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; display: inline-block; + padding: 0 0.125rem; + border-radius: 0.25rem; + + color: var(--color-text); + + background: #cae3f7; + .theme-dark & { --color-text: #000; } @@ -34,9 +37,9 @@ } .message { + overflow: hidden; flex-grow: 1; color: var(--color-text-secondary); - overflow: hidden; text-overflow: ellipsis; .sender-name { @@ -54,21 +57,26 @@ .media-preview--image { width: 1.25rem; height: 1.25rem; - object-fit: cover; - border-radius: 0.125rem; - vertical-align: -0.25rem; margin-inline-start: 0.125rem; margin-inline-end: 0.25rem; + border-radius: 0.125rem; + + vertical-align: -0.25rem; + + object-fit: cover; } .icon-play { position: relative; + bottom: 0.0625rem; + display: inline-block; - font-size: 0.75rem; - color: #fff; + margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; - bottom: 0.0625rem; + + font-size: 0.75rem; + color: #fff; } } } diff --git a/src/components/left/search/ChatResults.scss b/src/components/left/search/ChatResults.scss index 0f1fb3a09..f30535993 100644 --- a/src/components/left/search/ChatResults.scss +++ b/src/components/left/search/ChatResults.scss @@ -4,8 +4,8 @@ .chatResultsContextMenu { position: absolute; - right: 0.75rem; top: 2.5rem !important; + right: 0.75rem; .bubble { width: auto; @@ -13,8 +13,8 @@ } .dropDownLink { - align-items: center; display: flex; + align-items: center; .Loading { height: 1rem !important; @@ -26,8 +26,8 @@ } .iconContainer { - width: 1rem; flex-shrink: 0; + width: 1rem; margin-inline-start: 0.25rem; } diff --git a/src/components/left/search/DateSuggest.scss b/src/components/left/search/DateSuggest.scss index b2a6a1e4d..837472803 100644 --- a/src/components/left/search/DateSuggest.scss +++ b/src/components/left/search/DateSuggest.scss @@ -1,23 +1,27 @@ .DateSuggest { display: flex; - height: 2rem; flex-direction: row; justify-content: space-between; + + height: 2rem; margin-left: 0.5rem; .date-item { + cursor: var(--custom-cursor, pointer); + display: flex; flex: 1 1 auto; + min-width: 8rem; margin-top: 0.375rem; - cursor: var(--custom-cursor, pointer); + font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); .icon-calendar { - font-size: 1.25rem; margin-right: 0.25rem; + font-size: 1.25rem; } } } diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index bc282c3e3..82331b81b 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -1,14 +1,14 @@ @use "../../../styles/mixins"; .LeftSearch { + overflow: hidden; display: flex; flex-direction: column; height: 100%; - overflow: hidden; & > .Transition { - flex: 1; overflow: hidden; + flex: 1; } .TabList { @@ -16,9 +16,9 @@ } &--content { - padding-top: 0.5rem; overflow-y: auto; height: 100%; + padding-top: 0.5rem; } &--media { @@ -40,12 +40,13 @@ .section-heading { position: relative; + + margin-bottom: 1rem; padding-top: 0.625rem; padding-left: 0.5rem; - margin-bottom: 1rem; - font-weight: var(--font-weight-medium); font-size: 1rem; + font-weight: var(--font-weight-medium); color: var(--color-text-secondary); &-first { @@ -54,14 +55,14 @@ &[dir="rtl"], &[dir="auto"] { - padding-left: 0; - padding-right: 1.25rem; margin: 0 -1.25rem 0 1rem !important; + padding-right: 1.25rem; + padding-left: 0; text-align: initial; &::before { - left: auto; right: 0.625rem; + left: auto; } } @@ -87,30 +88,32 @@ } .content:not(.with-seekline) { - align-self: center; - min-width: 0; - flex-grow: 1; overflow: hidden; + flex-grow: 1; + align-self: center; + + min-width: 0; + text-overflow: ellipsis; overflow-wrap: anywhere; } .message-date { + padding-left: 1rem; font-size: 0.75rem; color: var(--color-text-secondary); - padding-left: 1rem; white-space: nowrap; } .media-list { display: grid; + grid-auto-rows: 1fr; + grid-gap: 0.25rem; + grid-template-columns: repeat(3, 1fr); + padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); - - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 1fr; - grid-gap: 0.25rem; } .Audio { @@ -125,9 +128,9 @@ } .ChatInfo { + margin: -0.0625rem; // Fix for overflow hidden and stories indicator padding: 0.0625rem; - margin: -0.0625rem; .handle { unicode-bidi: plaintext; @@ -163,18 +166,20 @@ } .topic-item { + overflow: hidden; display: flex; align-items: center; + font-size: 1rem; - line-height: 1.6875rem; font-weight: var(--font-weight-medium); - overflow: hidden; + line-height: 1.6875rem; .topic-icon { --custom-emoji-size: 2rem; - margin-inline-end: 0.25rem !important; + width: 2rem; height: 2rem; + margin-inline-end: 0.25rem !important; font-size: 2rem !important; } @@ -204,9 +209,12 @@ .Link { float: right; - color: var(--color-links); - font-weight: var(--font-weight-medium); + margin-right: 0.5rem; + + font-weight: var(--font-weight-medium); + color: var(--color-links); + transition: opacity 0.15s ease-in; &:active, @@ -220,8 +228,8 @@ &[dir="auto"] { .Link { float: left; - margin-left: 1rem; margin-right: 0; + margin-left: 1rem; } } } @@ -233,29 +241,30 @@ } .chat-selection { + overflow-x: auto; + overflow-y: hidden; display: flex; flex-shrink: 0; flex-wrap: nowrap; - justify-content: space-between; align-items: flex-end; + justify-content: space-between; padding-bottom: 0.5rem; padding-inline: 0.25rem; - box-shadow: inset 0 -1px 0 0 var(--color-borders); background-color: var(--color-background); - -webkit-overflow-scrolling: touch; - overflow-x: auto; - overflow-y: hidden; + box-shadow: inset 0 -1px 0 0 var(--color-borders); - .left-search-local-suggestion { - flex-shrink: 0; - } + -webkit-overflow-scrolling: touch; &::after { content: ""; flex-grow: 1; } + + .left-search-local-suggestion { + flex-shrink: 0; + } } .NothingFound { @@ -264,8 +273,8 @@ [dir="rtl"] { .message-date { - padding-left: 0; padding-right: 1rem; + padding-left: 0; } } } diff --git a/src/components/left/search/RecentContacts.scss b/src/components/left/search/RecentContacts.scss index 15ef24bbe..224378329 100644 --- a/src/components/left/search/RecentContacts.scss +++ b/src/components/left/search/RecentContacts.scss @@ -8,14 +8,16 @@ } .top-peers { - height: 6rem; - margin: 0 -1rem; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; - white-space: nowrap; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + height: 6rem; + margin: 0 -1rem; + + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -27,15 +29,18 @@ } .top-peer-item { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: inline-block; + width: 4.5rem; height: 6rem; - padding: 0.625rem 0.25rem; margin-left: 0.5rem; + padding: 0.625rem 0.25rem; border-radius: var(--border-radius-default); - cursor: var(--custom-cursor, pointer); - position: relative; - overflow: hidden; &:first-child { margin-left: 0.5rem; @@ -58,18 +63,21 @@ } .top-peer-name { - text-align: center; - white-space: nowrap; - font-size: 0.75rem; overflow: hidden; + + font-size: 0.75rem; + text-align: center; text-overflow: ellipsis; + white-space: nowrap; .emoji-small { width: 1rem; height: 1rem; - background-size: 1rem; margin-inline-end: 1px; + vertical-align: -3px; + + background-size: 1rem; } } } diff --git a/src/components/left/settings/PrivacyLockedOption.module.scss b/src/components/left/settings/PrivacyLockedOption.module.scss index 6ad89150d..bbd58e505 100644 --- a/src/components/left/settings/PrivacyLockedOption.module.scss +++ b/src/components/left/settings/PrivacyLockedOption.module.scss @@ -3,11 +3,12 @@ } .lock-icon { - font-size: 0.875rem; position: absolute; - left: 1.3125rem; top: 50%; + left: 1.3125rem; transform: translateY(-50%); + + font-size: 0.875rem; color: var(--color-gray); } diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index ff09b8033..5936e65f2 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -4,9 +4,9 @@ height: 100%; > .Transition_slide { + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; } .left-header { @@ -22,8 +22,8 @@ .settings-main-header { display: flex; flex-grow: 1; - justify-content: space-between; align-items: center; + justify-content: space-between; } .settings-more-menu { @@ -31,18 +31,17 @@ width: auto; .MenuItem button { - padding-left: 1rem !important; padding-right: 2rem !important; + padding-left: 1rem !important; } } } .settings-content { + overflow-y: scroll; + height: calc(100% - var(--header-height)); border-top: 1px solid transparent; transition: border-top-color 0.2s ease-in-out; - height: calc(100% - var(--header-height)); - - overflow-y: scroll; &.scrolled { border-top-color: var(--color-borders); @@ -53,9 +52,9 @@ } &.infinite-scroll { + overflow-y: hidden; display: flex; flex-direction: column; - overflow-y: hidden; & > .custom-scroll { flex: 1 1 auto; @@ -84,7 +83,9 @@ display: flex; flex-direction: column; align-items: center; + padding: 0 1.5rem; + text-align: center; &.no-border { @@ -122,24 +123,24 @@ } .settings-range-value { - color: var(--color-primary); display: inline-flex; align-items: center; margin-inline-start: 2rem; + color: var(--color-primary); } .settings-item-simple, .settings-item { - text-align: initial; padding: 0.5rem 0.5rem 1rem; + text-align: initial; @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; } .settings-unlock-button { - margin-inline: 1rem; margin-top: 1rem; + margin-inline: 1rem; } .fluid-container { @@ -148,8 +149,8 @@ } .settings-unlock-button-title { - align-items: center; display: flex; + align-items: center; } .settings-unlock-button-icon { @@ -159,16 +160,18 @@ .settings-item { &.no-border { margin-bottom: 0; - box-shadow: none; border-bottom: none; + box-shadow: none; } &-header { + position: relative; + + padding-inline-start: 1rem; + font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - padding-inline-start: 1rem; - position: relative; } &-slider { @@ -176,10 +179,10 @@ } &-description { + margin: -0.5rem 1rem 1rem; font-size: 0.875rem; line-height: 1.3125; color: var(--color-text-secondary); - margin: -0.5rem 1rem 1rem; .settings-content.two-fa &, .settings-content.password-form &, @@ -188,19 +191,20 @@ } &[dir="rtl"] { - text-align: right; unicode-bidi: plaintext; + text-align: right; } } &-description-larger { - font-size: 1rem; - line-height: 1.3125rem; - color: var(--color-text-secondary); margin-top: 1rem; margin-bottom: 0.75rem; padding-inline-start: 1rem; + font-size: 1rem; + line-height: 1.3125rem; + color: var(--color-text-secondary); + &.premium-info { margin-top: 1rem; } @@ -226,8 +230,8 @@ .date { float: right; - font-size: 0.75rem; margin-left: 1rem; + font-size: 0.75rem; color: var(--color-text-secondary); } } @@ -247,8 +251,8 @@ .ListItem-button { align-items: center; - text-align: left; padding: 0.5rem; + text-align: left; } .Avatar { @@ -262,10 +266,10 @@ } .contact-name { - font-size: 1rem; - line-height: 1rem; margin-bottom: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); + line-height: 1rem; } .contact-phone { @@ -278,8 +282,8 @@ &[dir="rtl"] { .multiline-item .date { float: left; - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } @@ -319,8 +323,8 @@ } .settings-fab-wrapper { - height: calc(100% - var(--header-height)); position: relative; + height: calc(100% - var(--header-height)); .settings-content { height: 100%; @@ -343,8 +347,8 @@ } .ReactionStaticEmoji { - margin-inline-end: 1rem; width: 1.5rem; + margin-inline-end: 1rem; } } diff --git a/src/components/left/settings/SettingsActiveSession.module.scss b/src/components/left/settings/SettingsActiveSession.module.scss index 29bc94686..0e3a12858 100644 --- a/src/components/left/settings/SettingsActiveSession.module.scss +++ b/src/components/left/settings/SettingsActiveSession.module.scss @@ -16,9 +16,10 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper .iconDevice { width: 5rem; height: 5rem; + margin: 0 auto 1rem; + background-repeat: no-repeat; background-size: 5rem; - margin: 0 auto 1rem; } @each $icon in $icons { @@ -26,22 +27,22 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper } .title { - text-align: center; margin-bottom: 0.25rem; + text-align: center; } .note, .date { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); text-align: center; } .box { - background: var(--color-background-secondary); + margin: 1rem 0; padding: 1rem 1rem 0.5rem; border-radius: var(--border-radius-default); - margin: 1rem 0; + background: var(--color-background-secondary); } .actionHeader { diff --git a/src/components/left/settings/SettingsActiveSessions.scss b/src/components/left/settings/SettingsActiveSessions.scss index fb91a5ad0..08b15ea77 100644 --- a/src/components/left/settings/SettingsActiveSessions.scss +++ b/src/components/left/settings/SettingsActiveSessions.scss @@ -9,12 +9,14 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper .SettingsActiveSessions { .icon-device { + flex: 0 0 2rem; + width: 2rem; height: 2rem; + margin-inline-end: 1.25rem !important; + background-repeat: no-repeat; background-size: 2rem; - flex: 0 0 2rem; - margin-inline-end: 1.25rem !important; } .icon-stop { diff --git a/src/components/left/settings/SettingsActiveWebsite.module.scss b/src/components/left/settings/SettingsActiveWebsite.module.scss index d236bf219..10a27a923 100644 --- a/src/components/left/settings/SettingsActiveWebsite.module.scss +++ b/src/components/left/settings/SettingsActiveWebsite.module.scss @@ -7,10 +7,11 @@ .avatar { width: 5rem; height: 5rem; - font-size: 3.5rem; margin: 0 auto 1rem; border-radius: 1rem; + font-size: 3.5rem; + :global(.Avatar__media) { border-radius: 1rem; } @@ -21,16 +22,16 @@ } .note { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); text-align: center; } .box { - background: var(--color-background-secondary); + margin: 1rem 0; padding: 1rem 1rem 0.5rem; border-radius: var(--border-radius-default); - margin: 1rem 0; + background: var(--color-background-secondary); } .action-header { diff --git a/src/components/left/settings/SettingsActiveWebsites.module.scss b/src/components/left/settings/SettingsActiveWebsites.module.scss index 843efa464..334fb7567 100644 --- a/src/components/left/settings/SettingsActiveWebsites.module.scss +++ b/src/components/left/settings/SettingsActiveWebsites.module.scss @@ -2,7 +2,6 @@ width: 2rem; height: 2rem; margin-inline-end: 1.5rem; - border-radius: 0.5rem; :global(.Avatar__media) { border-radius: 0.5rem; @@ -16,6 +15,6 @@ .subtitle { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/left/settings/SettingsGeneralBackground.scss b/src/components/left/settings/SettingsGeneralBackground.scss index 66d07a0bf..8b791ae7b 100644 --- a/src/components/left/settings/SettingsGeneralBackground.scss +++ b/src/components/left/settings/SettingsGeneralBackground.scss @@ -3,9 +3,9 @@ .SettingsGeneralBackground { .settings-wallpapers { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + grid-template-columns: repeat(3, 1fr); @include mixins.side-panel-section; } diff --git a/src/components/left/settings/SettingsGeneralBackgroundColor.scss b/src/components/left/settings/SettingsGeneralBackgroundColor.scss index 20bb8871f..e91acaf6a 100644 --- a/src/components/left/settings/SettingsGeneralBackgroundColor.scss +++ b/src/components/left/settings/SettingsGeneralBackgroundColor.scss @@ -11,32 +11,36 @@ } .color-picker { - margin-top: 1rem; height: 12rem; + margin-top: 1rem; } .hue-picker { - margin: 2rem 0; height: 0.5rem; + margin: 2rem 0; } canvas { + cursor: var(--custom-cursor, pointer); + display: block; + width: 100%; height: 100%; border-radius: var(--border-radius-default); - cursor: var(--custom-cursor, pointer); } .handle { + cursor: var(--custom-cursor, grab); + position: absolute; top: -0.75rem; left: -0.75rem; + width: 1.5rem; height: 1.5rem; border: 0.125rem solid var(--color-white); border-radius: 0.75rem; - cursor: var(--custom-cursor, grab); } .hue-picker .handle { @@ -44,8 +48,8 @@ } .tools { - margin-bottom: 0.625rem; display: flex; + margin-bottom: 0.625rem; .input-group { margin-bottom: 0; @@ -68,9 +72,9 @@ .predefined-colors { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + grid-template-columns: repeat(3, 1fr); @include mixins.side-panel-section; } @@ -87,11 +91,13 @@ // A hack to make a square &:before { - display: block; + pointer-events: none; content: ""; + + display: block; + width: 100%; padding-top: 100%; - pointer-events: none; } } } diff --git a/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss b/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss index c28ee8004..f3a6065ac 100644 --- a/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss +++ b/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss @@ -1,4 +1,4 @@ .fallback-photo { - margin-right: 2rem; transform: scale(1.25); + margin-right: 2rem; } diff --git a/src/components/left/settings/WallpaperTile.scss b/src/components/left/settings/WallpaperTile.scss index a971a7e00..432f850e2 100644 --- a/src/components/left/settings/WallpaperTile.scss +++ b/src/components/left/settings/WallpaperTile.scss @@ -1,42 +1,49 @@ .WallpaperTile { - height: 0; - padding-bottom: 100%; cursor: var(--custom-cursor, pointer); position: relative; + height: 0; + padding-bottom: 100%; + + &::after { + content: ""; + + display: block; + + border: 2px solid var(--color-primary); + + opacity: 0; + + transition: opacity 0.15s ease; + } .media-inner, &::after { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; } .media-inner { - overflow: hidden; transform: scale(1); + overflow: hidden; transition: transform 0.15s ease; img, canvas { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } } - &::after { - content: ""; - display: block; - border: 2px solid var(--color-primary); - opacity: 0; - transition: opacity 0.15s ease; - } - &.selected { &::after { opacity: 1; @@ -48,9 +55,9 @@ } .spinner-container { - height: 100%; display: flex; align-items: center; justify-content: center; + height: 100%; } } diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss index 59a86197a..21236d849 100644 --- a/src/components/left/settings/folders/SettingsFolders.scss +++ b/src/components/left/settings/folders/SettingsFolders.scss @@ -1,14 +1,15 @@ .settings-folders-recommended-item { - width: 100%; display: flex; + gap: 1rem; align-items: center; justify-content: space-between; - gap: 1rem; + + width: 100%; } .settings-folders-blocked-icon { - color: var(--color-text-secondary); margin-left: 0.25rem; + color: var(--color-text-secondary); } .settings-folders-list-item { @@ -22,24 +23,26 @@ width: 100%; .Avatar { - margin-left: -0.25rem; margin-right: 1.5rem; + margin-left: -0.25rem; } .title { display: flex; - justify-content: flex-start; align-items: center; + justify-content: flex-start; h3 { + overflow: hidden; + + margin: 0; + font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.3125; - margin: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-align: left; + text-overflow: ellipsis; + white-space: nowrap; } } @@ -68,22 +71,22 @@ color: var(--color-primary); .icon { - opacity: 1; color: inherit; + opacity: 1; } } &[dir="rtl"] { .Avatar { - margin-left: 1.5rem; margin-right: -0.25rem; + margin-left: 1.5rem; } } } .settings-item .ShowMoreButton { - margin: 0 -1rem; width: calc(100% + 2rem); + margin: 0 -1rem; padding-left: 1rem !important; } @@ -108,8 +111,8 @@ } .Picker { - height: 100%; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + height: 100%; } diff --git a/src/components/main/AppInactive.scss b/src/components/main/AppInactive.scss index 8c7fbbf8c..b9debdfc2 100644 --- a/src/components/main/AppInactive.scss +++ b/src/components/main/AppInactive.scss @@ -1,17 +1,20 @@ #AppInactive { - height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; + height: 100%; + .content { max-width: 28rem; margin: auto; padding: 1.5rem; - text-align: center; - background: var(--color-background); border-radius: var(--border-radius-default); + + text-align: center; + + background: var(--color-background); } .title { @@ -19,8 +22,8 @@ } .description { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } img { diff --git a/src/components/main/GameModal.scss b/src/components/main/GameModal.scss index 10118a545..8a949e188 100644 --- a/src/components/main/GameModal.scss +++ b/src/components/main/GameModal.scss @@ -1,12 +1,14 @@ .GameModal { .modal-dialog { + justify-content: center; + max-width: 80%; height: 100%; - justify-content: center; - background-color: transparent; - border: none; - box-shadow: none; margin: 0; + border: none; + + background-color: transparent; + box-shadow: none; } .modal-header { @@ -26,9 +28,9 @@ @media (max-width: 600px) { .modal-dialog { - background-color: var(--color-background); max-width: 100% !important; border-radius: 0; + background-color: var(--color-background); } .modal-header { diff --git a/src/components/main/LockScreen.module.scss b/src/components/main/LockScreen.module.scss index 8abe7b3a9..94d80c0b5 100644 --- a/src/components/main/LockScreen.module.scss +++ b/src/components/main/LockScreen.module.scss @@ -1,9 +1,9 @@ .container { position: fixed; - left: 0; top: 0; right: 0; bottom: 0; + left: 0; display: flex; align-items: center; @@ -11,14 +11,18 @@ } .wrapper { + z-index: 2; + display: inline-flex; flex-direction: column; - background: var(--color-background); - color: var(--color-text); + max-width: 20rem; padding: 1.5rem 1rem 0; border-radius: var(--border-radius-default); - z-index: 2; + + color: var(--color-text); + + background: var(--color-background); &[dir="rtl"] { text-align: right; diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index 2751945df..f01cdb497 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -1,7 +1,7 @@ #Main { + overflow: hidden; height: 100%; text-align: left; - overflow: hidden; @media (min-width: 1276px) { position: relative; @@ -31,12 +31,14 @@ --left-column-min-width: 16rem; --left-column-max-width: 26.5rem; + position: relative; + + overflow: hidden; + width: 33vw; min-width: var(--left-column-min-width); max-width: var(--left-column-max-width); height: 100%; - overflow: hidden; - position: relative; background-color: var(--color-background); @@ -45,37 +47,39 @@ } @media (min-width: 1276px) { - width: 25vw; --left-column-max-width: 33vw; + + width: 25vw; } @media (max-width: 925px) { position: fixed; - left: 0; top: 0; - height: calc(var(--vh, 1vh) * 100); - width: 26.5rem !important; - + left: 0; transform: translate3d(-5rem, 0, 0); + + width: 26.5rem !important; + height: calc(var(--vh, 1vh) * 100); + transition: transform var(--layer-transition); - body.no-page-transitions & { - transition: none; - } - &::after { + pointer-events: none; content: ''; - display: block; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; bottom: 0; - background: black; + left: 0; + + display: block; + opacity: 0; + background: black; + transition: opacity var(--layer-transition); - z-index: 1; - pointer-events: none; body.no-page-transitions & { transition: none; @@ -97,6 +101,10 @@ } } + body.no-page-transitions & { + transition: none; + } + #Main.left-column-open & { transform: translate3d(0, 0, 0); } @@ -111,31 +119,32 @@ } @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100); - max-width: none; --left-column-max-width: calc(100vw - env(safe-area-inset-left)); - transform: translate3d(-20vw, 0, 0); + left: env(safe-area-inset-left) !important; + transform: translate3d(-20vw, 0, 0); + width: calc(100vw - env(safe-area-inset-left)) !important; + max-width: none; + height: calc(var(--vh, 1vh) * 100); // Fix: when opening the SymbolMenu, the chat list flashes in the background body.is-symbol-menu-open &::before { content: ''; + position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: var(--color-background); z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background: var(--color-background); } } } #RightColumn { - @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100 + 1px); - } #Main.history-animation-disabled & { transition: none; @@ -144,6 +153,10 @@ transition: none; } } + + @media (max-width: 600px) { + height: calc(var(--vh, 1vh) * 100 + 1px); + } } #Main.history-animation-disabled .overlay-backdrop { @@ -153,15 +166,24 @@ #MiddleColumn { border-left: 1px solid var(--color-borders); - @media (max-width: 925px) { - max-width: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; + #Main.history-animation-disabled & { + transition: none; + &:after { + transition: none; + } + } + + @media (max-width: 925px) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; transform: translate3d(0, 0, 0); + + max-width: none; + transition: transform var(--layer-transition); body.no-page-transitions & { @@ -189,12 +211,4 @@ transform: translate3d(-20vw, 0, 0); } } - - #Main.history-animation-disabled & { - transition: none; - - &:after { - transition: none; - } - } } diff --git a/src/components/main/NewContactModal.scss b/src/components/main/NewContactModal.scss index 814bf6ae0..4765d1e0f 100644 --- a/src/components/main/NewContactModal.scss +++ b/src/components/main/NewContactModal.scss @@ -6,19 +6,19 @@ &__new-contact { display: flex; - @media (max-width: 500px) { - flex-direction: column; - } - &-fieldset { flex: 1; margin-inline-start: 1rem; @media (max-width: 500px) { - margin-inline-start: 0; margin-top: 1rem; + margin-inline-start: 0; } } + + @media (max-width: 500px) { + flex-direction: column; + } } &__profile { @@ -36,8 +36,8 @@ } &__phone-number { - font-size: 1.5rem; margin-bottom: 0; + font-size: 1.5rem; } &__help-text { diff --git a/src/components/main/premium/GiveawayModal.module.scss b/src/components/main/premium/GiveawayModal.module.scss index f4158e8fa..d79d10815 100644 --- a/src/components/main/premium/GiveawayModal.module.scss +++ b/src/components/main/premium/GiveawayModal.module.scss @@ -8,62 +8,67 @@ } .root :global(.modal-content) { - padding: 0; overflow: hidden; + padding: 0; } .root :global(.modal-dialog) { - height: min(calc(55vh + 41px + 193px), 90vh); - max-width: 26.25rem; overflow: hidden; + max-width: 26.25rem; + height: min(calc(55vh + 41px + 193px), 90vh); } .button { - font-weight: var(--font-weight-medium); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-medium); } .main { - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + + height: 100%; } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .header-text { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 2.5rem; margin-bottom: 2rem; + margin-inline: 2.5rem; + text-align: center; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } @@ -73,16 +78,16 @@ .close-button { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .premium-header-text { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .primary-footer-text { @@ -90,10 +95,11 @@ } .section { - width: 100%; display: flex; flex-direction: column; gap: 0.5rem; + + width: 100%; padding: 0 0.375rem; border-top: 0.0625rem solid var(--color-borders); } @@ -104,13 +110,15 @@ .footer { position: absolute; - width: 100%; - background: var(--color-background); - border-top: 0.0625rem solid var(--color-borders); - left: 0; - bottom: 0; - padding: 1rem; z-index: 1; + bottom: 0; + left: 0; + + width: 100%; + padding: 1rem; + border-top: 0.0625rem solid var(--color-borders); + + background: var(--color-background); } .options { @@ -147,12 +155,13 @@ .status { display: flex; - align-items: center; gap: 0.8125rem; + align-items: center; justify-content: space-between; + width: 100%; - padding: 0 0.375rem 0 1rem; margin-bottom: 1.3125rem; + padding: 0 0.375rem 0 1rem; } .info { @@ -164,24 +173,27 @@ } .month { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .quantity { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; } .floatingBadge { + position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; + color: var(--color-links); + background-color: rgba(78, 142, 229, 0.1); - position: relative; - z-index: 1; } .floatingBadgeColor { @@ -194,15 +206,15 @@ } .floatingBadgeButtonColor { + margin-left: 0.5rem; padding: 0.25rem 0.375rem 0.25rem 0.1875rem; border-radius: 0.375rem; background-color: white; - margin-left: 0.5rem; } .floatingBadgeIcon { - font-size: 1.125rem; margin-right: 0.1875rem; + font-size: 1.125rem; } .floatingBadgeValue { @@ -221,19 +233,20 @@ } .dateButton { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; padding-right: 1.1875rem; - display: flex; padding-left: 1rem; - justify-content: space-between; - align-items: center; } .title { - color: var(--color-text); - font-size: 1rem; - text-transform: initial; margin: 0; + font-size: 1rem; + color: var(--color-text); + text-transform: initial; } .checkboxSection { @@ -250,8 +263,8 @@ .prizesInput { flex-grow: 1; - margin-left: 1rem; margin-bottom: 0; + margin-left: 1rem; } .subLabelClassName { @@ -269,14 +282,14 @@ } .addChannel { - margin-inline-end: 1.375rem !important; margin-inline-start: 0.3125rem !important; + margin-inline-end: 1.375rem !important; } .removeChannel { + padding: 0.5rem; font-size: 1.5rem; color: var(--color-text-secondary); - padding: 0.5rem; } .starOptions { @@ -286,8 +299,8 @@ @media (max-width: 600px) { .root :global(.modal-dialog) { width: 100%; - height: 100%; max-width: 100% !important; + height: 100%; border-radius: 0; } diff --git a/src/components/main/premium/GiveawayTypeOption.module.scss b/src/components/main/premium/GiveawayTypeOption.module.scss index 366f88404..5a7f928e1 100644 --- a/src/components/main/premium/GiveawayTypeOption.module.scss +++ b/src/components/main/premium/GiveawayTypeOption.module.scss @@ -1,11 +1,13 @@ .wrapper { + cursor: var(--custom-cursor, pointer); + position: relative; + display: block; + + margin-bottom: 0; padding-inline: 3.5rem 1rem; border: none; - margin-bottom: 0; - - cursor: var(--custom-cursor, pointer); line-height: 1.5rem; } @@ -33,37 +35,45 @@ .content { display: flex; + gap: 1.25rem; align-items: center; padding: 0.5rem 0; - gap: 1.25rem; &::before, &::after { content: ""; - display: block; + position: absolute; - inset-inline-start: 1rem; top: 50%; + inset-inline-start: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { inset-inline-start: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } } @@ -76,14 +86,13 @@ } .title { - color: var(--color-text); margin-bottom: 0; + color: var(--color-text); } .link { display: flex; align-items: center; - color: var(--color-links); } diff --git a/src/components/main/premium/PremiumFeatureItem.module.scss b/src/components/main/premium/PremiumFeatureItem.module.scss index ff312dcfa..2943e4b48 100644 --- a/src/components/main/premium/PremiumFeatureItem.module.scss +++ b/src/components/main/premium/PremiumFeatureItem.module.scss @@ -15,24 +15,28 @@ .description { font-size: 0.875rem; + line-height: 1.25rem; color: var(--color-text-secondary); white-space: pre-wrap; - line-height: 1.25rem; } .icon { + align-self: center; + min-width: 2rem; height: 2rem; - align-self: center; - border-radius: 0.625rem; - background: var(--item-color, #000); margin-left: 1rem; + border-radius: 0.625rem; + + background: var(--item-color, #000); } .font-icon { - font-size: 2rem !important; align-self: center; + margin-right: 0 !important; margin-left: 1rem; + + font-size: 2rem !important; color: var(--item-color, #000) !important; } diff --git a/src/components/main/premium/PremiumFeatureModal.module.scss b/src/components/main/premium/PremiumFeatureModal.module.scss index 3fa0f4a23..bac132c97 100644 --- a/src/components/main/premium/PremiumFeatureModal.module.scss +++ b/src/components/main/premium/PremiumFeatureModal.module.scss @@ -3,22 +3,22 @@ } .button { - font-weight: var(--font-weight-semibold); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-semibold); } .button-content { - height: 100%; display: flex; - justify-content: center; align-items: center; + justify-content: center; + height: 100%; } .back-button { - margin: -0.5rem; position: absolute; z-index: 2; + margin: -0.5rem; } .white-back-button { @@ -26,12 +26,14 @@ } .content { - margin: 0 -1rem; - margin-top: -1rem; + scroll-snap-type: x mandatory; + overflow-x: scroll; display: flex; - scroll-snap-type: x mandatory; + width: calc(100% + 2rem); + margin: 0 -1rem; + margin-top: -1rem; } .frame { @@ -44,11 +46,14 @@ } .slide { - width: 100%; - flex: none; - position: relative; scroll-snap-align: center; scroll-snap-stop: always; + + position: relative; + + flex: none; + + width: 100%; margin-bottom: 7.5rem; } @@ -58,9 +63,9 @@ .limits-content { overflow: auto; - padding: 1rem; - margin-top: 3.6875rem; height: calc(var(--vh) * 55 + 41px); + margin-top: 3.6875rem; + padding: 1rem; } .stories { @@ -68,15 +73,19 @@ } .header { - padding-left: 4rem; - font-size: 1.25rem; - font-weight: var(--font-weight-medium); + position: absolute; + + width: 100%; padding-top: 0.875rem; padding-bottom: 0.875rem; + padding-left: 4rem; border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + + font-size: 1.25rem; + font-weight: var(--font-weight-medium); + background: var(--color-background); - width: 100%; + transition: 0.1s ease-out border-bottom-color; } @@ -86,13 +95,15 @@ .preview { position: absolute; - margin: 0 -1rem; - margin-top: -1rem; - background: var(--premium-feature-background); + aspect-ratio: 1; width: 100%; - border-top-right-radius: var(--border-radius-default); + margin: 0 -1rem; + margin-top: -1rem; border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); + + background: var(--premium-feature-background); @supports not (aspect-ratio: 1) { height: 0; @@ -101,30 +112,35 @@ } .title { + margin-top: 1rem; + font-size: 1.25rem; font-weight: var(--font-weight-medium); - text-align: center; color: var(--color-text); - margin-top: 1rem; + text-align: center; } .description { + padding: 0 5%; + font-size: 1rem; font-weight: var(--font-weight-normal); line-height: 1.375rem; - text-align: center; color: var(--color-text-secondary); - padding: 0 5%; + text-align: center; } .footer { - border-top: 0.0625rem solid var(--color-borders); position: absolute; bottom: 0; left: 0; - padding: 0 1rem 1rem 1rem; + width: 100%; + padding: 0 1rem 1rem 1rem; + border-top: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.1s ease-out border-top-color; } diff --git a/src/components/main/premium/PremiumMainModal.module.scss b/src/components/main/premium/PremiumMainModal.module.scss index 22a65379b..33f4dcc8b 100644 --- a/src/components/main/premium/PremiumMainModal.module.scss +++ b/src/components/main/premium/PremiumMainModal.module.scss @@ -26,52 +26,53 @@ } .button { - font-weight: var(--font-weight-semibold); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-semibold); } .main { - padding: 1rem 0.5rem; - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + height: 100%; + padding: 1rem 0.5rem; + @include mixins.adapt-padding-to-scrollbar(0.5rem); } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .status-emoji { --custom-emoji-size: 8rem; - margin: 1rem; cursor: var(--custom-cursor, pointer); + margin: 1rem; } .header-text { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 2rem; + margin-inline: 0.5rem; + text-align: center; } .list { - margin-bottom: 5rem; width: 100%; + margin-bottom: 5rem; } .no-button { @@ -79,17 +80,21 @@ } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } @@ -99,23 +104,23 @@ .close-button { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .premium-header-text { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .footer-text { - color: var(--color-text-secondary); + unicode-bidi: plaintext; margin: 0.5rem; font-size: 0.875rem; - unicode-bidi: plaintext; + color: var(--color-text-secondary); } .primary-footer-text { @@ -124,12 +129,14 @@ .footer { position: absolute; - width: 100%; - background: var(--color-background); - border-top: 0.0625rem solid var(--color-borders); - left: 0; bottom: 0; + left: 0; + + width: 100%; padding: 1rem; + border-top: 0.0625rem solid var(--color-borders); + + background: var(--color-background); } .stickerSetText { @@ -139,8 +146,8 @@ .stickerSetLink { --custom-emoji-size: 1.5rem; - color: var(--color-links); cursor: var(--custom-cursor, pointer); + color: var(--color-links); &:hover { text-decoration: underline; @@ -148,15 +155,15 @@ } .stickerSetLinkIcon { - vertical-align: middle; margin-inline-end: 0.25rem; + vertical-align: middle; } @media (max-width: 600px) { .root :global(.modal-dialog) { width: 100%; - height: 100%; max-width: 100% !important; + height: 100%; border-radius: 0; } diff --git a/src/components/main/premium/PremiumSubscriptionOption.module.scss b/src/components/main/premium/PremiumSubscriptionOption.module.scss index ba058fabd..f4fe68334 100644 --- a/src/components/main/premium/PremiumSubscriptionOption.module.scss +++ b/src/components/main/premium/PremiumSubscriptionOption.module.scss @@ -1,24 +1,29 @@ .wrapper { - position: relative; - display: block; - padding-inline: 4.5rem 1rem; - margin-bottom: 1.5rem; - border-radius: var(--border-radius-default); - background: var(--color-background); - box-shadow: 0 0 0 0.0625rem var(--color-borders-input); - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + margin-bottom: 1.5rem; + padding-inline: 4.5rem 1rem; + border-radius: var(--border-radius-default); + line-height: 1.5rem; + + background: var(--color-background); + box-shadow: 0 0 0 0.0625rem var(--color-borders-input); } .giveawayWrapper { - position: relative; - display: block; - padding-inline: 3.5rem 1rem; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + padding-inline: 3.5rem 1rem; + line-height: 1.5rem; } @@ -46,37 +51,46 @@ display: grid; grid-template-areas: "left_top right" "left_bottom right"; grid-template-columns: 1fr auto; - justify-content: start; - padding: 0.5rem 0; gap: 0.25rem; + justify-content: start; + + padding: 0.5rem 0; &::before, &::after { content: ""; - display: block; + position: absolute; - inset-inline-start: 1rem; top: 50%; + inset-inline-start: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { inset-inline-start: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } } @@ -87,10 +101,11 @@ } .perMonth { - grid-area: left_bottom; - align-self: end; display: flex; + grid-area: left_bottom; flex-direction: row-reverse; + align-self: end; + margin-inline-end: auto; font-size: 0.875rem; @@ -105,23 +120,28 @@ grid-area: right; align-self: center; justify-self: end; + padding-inline-start: 1.5rem; + color: var(--color-text-secondary); } .discount { - color: var(--color-white); - background: var(--color-primary); - border-radius: var(--border-radius-default-small); - padding: 0 0.5rem; unicode-bidi: plaintext; - margin-inline-end: 0.5rem; align-self: baseline; + + margin-inline-end: 0.5rem; + padding: 0 0.5rem; + border-radius: var(--border-radius-default-small); + + color: var(--color-white); + + background: var(--color-primary); } .giveawayDiscount { + padding: 0.1875rem; + border-radius: 0.375rem; font-size: 0.8125rem; font-weight: var(--font-weight-medium); - border-radius: 0.375rem; - padding: 0.1875rem; } diff --git a/src/components/main/premium/StarsGiftingPickerModal.module.scss b/src/components/main/premium/StarsGiftingPickerModal.module.scss index 4a9db49e5..a2e49ab8b 100644 --- a/src/components/main/premium/StarsGiftingPickerModal.module.scss +++ b/src/components/main/premium/StarsGiftingPickerModal.module.scss @@ -21,17 +21,19 @@ } .filter { - padding: 0.375rem 1rem 0.25rem 0.75rem; - margin-bottom: 0.625rem; - background-color: var(--color-background); - box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: 0.625rem solid var(--color-background-secondary); + overflow-y: auto; display: flex; flex-flow: row wrap; - align-items: center; flex-shrink: 0; - overflow-y: auto; + align-items: center; + max-height: 20rem; + margin-bottom: 0.625rem; + padding: 0.375rem 1rem 0.25rem 0.75rem; + border-bottom: 0.625rem solid var(--color-background-secondary); + + background-color: var(--color-background); + box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); } .title { @@ -39,12 +41,14 @@ } .buttons { - width: 100%; - background: var(--color-background); position: absolute; - bottom: 0; z-index: 1; + bottom: 0; + + width: 100%; padding: 0.75rem; + + background: var(--color-background); } .picker { @@ -54,9 +58,10 @@ .avatars { display: flex; flex-direction: row; - justify-content: center; - align-items: center; gap: 1rem; + align-items: center; + justify-content: center; + margin: 1rem; } @@ -66,9 +71,9 @@ .description, .premiumFeatures { - text-align: center; - margin: 0 auto 2rem; max-width: 25rem; + margin: 0 auto 2rem; + text-align: center; } .premiumFeatures { diff --git a/src/components/main/premium/common/PremiumLimitPreview.module.scss b/src/components/main/premium/common/PremiumLimitPreview.module.scss index 0645842f1..cc8cbd865 100644 --- a/src/components/main/premium/common/PremiumLimitPreview.module.scss +++ b/src/components/main/premium/common/PremiumLimitPreview.module.scss @@ -5,16 +5,18 @@ } .title { + unicode-bidi: plaintext; + margin-left: 0.75rem; font-weight: var(--font-weight-medium); color: var(--color-text); - margin-left: 0.75rem; - unicode-bidi: plaintext; } .description { - font-size: 14px; - color: var(--color-text-secondary); + unicode-bidi: plaintext; + margin-bottom: 0.5rem; margin-left: 0.75rem; - unicode-bidi: plaintext; + + font-size: 14px; + color: var(--color-text-secondary); } diff --git a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss index b18f8c04f..b0f735b14 100644 --- a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss +++ b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss @@ -1,7 +1,7 @@ .root :global(.modal-content) { - align-items: flex-start; display: flex; flex-direction: column; + align-items: flex-start; } .root :global(.modal-dialog) { @@ -9,19 +9,21 @@ } .limit-compare { - margin: 2.5rem 0 1.25rem 0; width: 100%; + margin: 2.5rem 0 1.25rem 0; } .limit-badge { - background: var(--color-primary); - padding: 0.75rem 1.25rem; - border-radius: 1.5rem; - margin: 1.5rem 0 1.25rem 0; - align-self: center; display: flex; align-items: center; + align-self: center; justify-content: center; + + margin: 1.5rem 0 1.25rem 0; + padding: 0.75rem 1.25rem; + border-radius: 1.5rem; + + background: var(--color-primary); } .limit-value { @@ -36,17 +38,18 @@ } .dialog-buttons { - width: 100%; display: flex; + gap: 1rem; align-items: flex-end; justify-content: flex-end; + + width: 100%; margin-top: 1rem; - gap: 1rem; } .x2 { - font-size: 1.25rem; margin-inline-start: 0.25rem; + font-size: 1.25rem; } .button-icon { diff --git a/src/components/main/premium/common/PremiumLimitsCompare.module.scss b/src/components/main/premium/common/PremiumLimitsCompare.module.scss index 01db83f39..39e393fab 100644 --- a/src/components/main/premium/common/PremiumLimitsCompare.module.scss +++ b/src/components/main/premium/common/PremiumLimitsCompare.module.scss @@ -1,20 +1,24 @@ .root { - display: flex; position: relative; + display: flex; } .floating-badge { - display: flex; - align-items: center; - justify-content: center; - color: #ffffff; - padding: 0.25rem 0.75rem; - border-radius: 1rem; - background: #7E85FF; position: absolute; top: -1.5rem; left: 50%; transform: translate(-50%, -20px); + + display: flex; + align-items: center; + justify-content: center; + + padding: 0.25rem 0.75rem; + border-radius: 1rem; + + color: #ffffff; + + background: #7E85FF; } .floating-badge-triangle { @@ -55,15 +59,15 @@ } .line { - padding: 0.375rem 0.75rem; - flex-basis: 50%; display: flex; + flex-basis: 50%; + padding: 0.375rem 0.75rem; } .left { - background: #F1F3F5; border-top-left-radius: 10px; border-bottom-left-radius: 10px; + background: #F1F3F5; } .right { diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss index 3ca811acd..542c32e66 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss @@ -1,19 +1,22 @@ .root { + position: relative; + + overflow: hidden; display: flex; align-items: center; justify-content: center; + height: 100%; - overflow: hidden; - position: relative; } .sticker { --x: 0px; --y: 0px; - transition: 0.25s cubic-bezier(0.5, 0.45, 0.28, 1.4) transform, 0.25s ease-in-out opacity; + position: absolute; transform: translate(var(--x), var(--y)) scale(var(--opacity)); opacity: var(--opacity); + transition: 0.25s cubic-bezier(0.5, 0.45, 0.28, 1.4) transform, 0.25s ease-in-out opacity; canvas { width: 100% !important; diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss index 360b0a576..186bef6d3 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss @@ -1,13 +1,13 @@ .root { display: flex; flex-direction: column; - padding-top: 1.5rem; height: 100%; + padding-top: 1.5rem; } .header { - align-self: center; position: relative; + align-self: center; } .circle { @@ -18,25 +18,29 @@ } .title { - font-size: 1.25rem; - font-weight: var(--font-weight-medium); align-self: center; + margin-top: 1rem; margin-bottom: 1rem; + + font-size: 1.25rem; + font-weight: var(--font-weight-medium); } .features { - min-height: 5rem; overflow-y: scroll; - border-top: 0.0625rem solid transparent; - transition: 0.2s ease-in-out border-color; + + min-height: 5rem; margin-inline: 1rem; + border-top: 0.0625rem solid transparent; + + transition: 0.2s ease-in-out border-color; } .mobile { padding: 1rem 0rem 1rem 1rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } .scrolled { diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss index 76486cce2..00c3f094a 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss @@ -1,9 +1,11 @@ .root { + position: relative; + + overflow: hidden; display: flex; justify-content: center; + aspect-ratio: 1; - overflow: hidden; - position: relative; @supports not (aspect-ratio: 1) { height: 0; @@ -12,16 +14,13 @@ } .wrapper { - width: 70%; - position: absolute; - display: flex; - justify-content: center; - align-items: center; --y-static: -40%; --y-dynamic: -10%; --scroll-progress-converted: var(--scroll-progress, 0); --abs-scroll-progress-converted: var(--abs-scroll-progress, 0); + + position: absolute; transform: perspective(200px) translate3d( @@ -30,6 +29,13 @@ 0 ) rotateY(calc(var(--scroll-progress-converted) * 40deg)); + + display: flex; + align-items: center; + justify-content: center; + + width: 70%; + opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4); @supports not (aspect-ratio: 1) { @@ -51,14 +57,16 @@ position: relative; z-index: 1; width: 100%; + -webkit-user-drag: none; } .video { - width: 100%; position: absolute; - bottom: 0; z-index: 0; + bottom: 0; + + width: 100%; padding: 4%; border-radius: 0 0 10% 10%; } diff --git a/src/components/main/visualEffects/ConfettiContainer.module.scss b/src/components/main/visualEffects/ConfettiContainer.module.scss index 6bfb8e062..f101e963c 100644 --- a/src/components/main/visualEffects/ConfettiContainer.module.scss +++ b/src/components/main/visualEffects/ConfettiContainer.module.scss @@ -1,11 +1,12 @@ .root { + pointer-events: none; + position: fixed; + z-index: var(--z-confetti); top: 0; - left: 0; right: 0; bottom: 0; - z-index: var(--z-confetti); + left: 0; - pointer-events: none; overflow: hidden; } diff --git a/src/components/main/visualEffects/SnapEffectContainer.module.scss b/src/components/main/visualEffects/SnapEffectContainer.module.scss index 5d1b41643..d452c2ad9 100644 --- a/src/components/main/visualEffects/SnapEffectContainer.module.scss +++ b/src/components/main/visualEffects/SnapEffectContainer.module.scss @@ -1,17 +1,15 @@ .root { - position: fixed; - inset: 0; pointer-events: none; - + position: fixed; z-index: var(--z-overlay-effects); + inset: 0; } .ghost { position: absolute; - overflow: visible !important; - - animation: scale 1s ease-in forwards !important; transform-origin: bottom; + overflow: visible !important; + animation: scale 1s ease-in forwards !important; } .elementContainer { diff --git a/src/components/main/visualEffects/WaveContainer.module.scss b/src/components/main/visualEffects/WaveContainer.module.scss index 01434ce45..b3e2c08cd 100644 --- a/src/components/main/visualEffects/WaveContainer.module.scss +++ b/src/components/main/visualEffects/WaveContainer.module.scss @@ -1,9 +1,8 @@ .root { - position: fixed; - inset: 0; pointer-events: none; - + position: fixed; z-index: var(--z-overlay-effects); + inset: 0; } .wave { @@ -12,12 +11,11 @@ --wave-pos-left: 0%; position: absolute; - top: var(--wave-pos-top); left: var(--wave-pos-left); - width: var(--wave-width); - aspect-ratio: 1 / 1; + aspect-ratio: 1 / 1; + width: var(--wave-width); border-radius: 50%; background-image: @@ -27,8 +25,8 @@ #FFFFFF06 60%, transparent 68% ); - backdrop-filter: url(#wave-filter); + animation: waveGrow 1.5s ease-in; } diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index 0855dea70..bff7caa35 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -1,29 +1,28 @@ #MediaViewer { position: fixed; + z-index: var(--z-media-viewer); top: 0; left: 0; - width: 100vw; - height: 100%; - background: rgba(0, 0, 0, 0.9); - color: #fff; - z-index: var(--z-media-viewer); display: grid; - grid-template-columns: auto; - grid-template-rows: auto 1fr; grid-column-gap: 0; grid-row-gap: 0; - justify-items: stretch; + grid-template-columns: auto; + grid-template-rows: auto 1fr; align-items: center; + justify-items: stretch; - @media (max-width: 600px) { - background: rgba(0, 0, 0, 1); - } + width: 100vw; + height: 100%; + + color: #fff; + + background: rgba(0, 0, 0, 0.9); // Potential perf improvement &:not(.shown) { - display: block !important; transform: scale(0); + display: block !important; } body.ghost-animating & { @@ -58,37 +57,33 @@ .MediaViewerSlide { position: fixed; + z-index: 1; top: 0; left: 0; + width: 100vw; height: 100vh; padding: 0; - z-index: 1; } } .media-viewer-head { - display: flex; - grid-area: 1 / 1 / 2 / -2; position: relative; z-index: var(--z-media-viewer-head); + + display: flex; + grid-area: 1 / 1 / 2 / -2; + min-width: 0; - background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%); padding: 0.5rem max(1.25rem, env(safe-area-inset-left)); + background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%); + & > .Transition { width: 100%; min-width: 0; } - @media (max-width: 600px) { - padding: 0.5rem max(0.5rem, env(safe-area-inset-left)); - - .media-viewer-close { - margin-right: 1.5rem; - } - } - body.is-electron.is-macos & { -webkit-app-region: drag; } @@ -96,6 +91,14 @@ body.is-electron.is-macos #Main:not(.is-fullscreen) & { padding-left: 5rem; } + + @media (max-width: 600px) { + padding: 0.5rem max(0.5rem, env(safe-area-inset-left)); + + .media-viewer-close { + margin-right: 1.5rem; + } + } } & > .Transition, @@ -106,35 +109,38 @@ & > .Transition, & > .pan-wrapper .Transition { position: relative; - justify-self: center; - text-align: center; - width: 100%; - height: 100%; + + overflow: hidden; display: flex; align-items: center; - overflow: hidden; + justify-self: center; + + width: 100%; + height: 100%; + + text-align: center; } .navigation { + cursor: var(--custom-cursor, pointer); + position: fixed; + z-index: 1; top: 4rem; - width: 10vw; bottom: 0; - border: none; - padding: 0; + + width: 10vw; margin: 0; + padding: 0; + border: none; + appearance: none; + opacity: 0; background: transparent no-repeat; background-size: 1.25rem; - opacity: 0; - transition: opacity 0.15s; outline: none; - cursor: var(--custom-cursor, pointer); - z-index: 1; - @media (max-width: 600px) { - width: 20vw; - } + transition: opacity 0.15s; &:hover, .is-touch-env & { @@ -142,14 +148,13 @@ } &.prev { + left: env(safe-area-inset-left); background-image: url("../../assets/media_navigation_previous.svg"); background-position: 1.25rem calc(50% - 2rem); - left: env(safe-area-inset-left); - &[dir="rtl"] { - left: auto; right: env(safe-area-inset-right); + left: auto; transform: scaleX(-1); } } @@ -173,31 +178,44 @@ background-position-y: center; @media (max-width: 600px) { + pointer-events: none; opacity: 0; transition: opacity 0.15s ease-in; - pointer-events: none; .video-controls-visible & { - opacity: 1; pointer-events: auto; + opacity: 1; } } } + + @media (max-width: 600px) { + width: 20vw; + } } .is-protected { - user-select: none; - -webkit-touch-callout: none; pointer-events: none; + user-select: none; + + -webkit-touch-callout: none; + } + + @media (max-width: 600px) { + background: rgba(0, 0, 0, 1); } } .ghost { + will-change: transform, opacity; + position: absolute; z-index: var(--z-media-viewer); - will-change: transform, opacity; + overflow: hidden; + border-radius: 0; + transition: transform 0.2s ease, opacity 0.2s ease; &.transition-circle { @@ -218,10 +236,12 @@ img, video { + -webkit-user-select: none; + user-select: none; + width: 100%; height: 100%; - user-select: none; - -webkit-user-select: none; + object-fit: cover; } } diff --git a/src/components/mediaViewer/MediaViewerContent.scss b/src/components/mediaViewer/MediaViewerContent.scss index b125e0f26..dea766b56 100644 --- a/src/components/mediaViewer/MediaViewerContent.scss +++ b/src/components/mediaViewer/MediaViewerContent.scss @@ -1,17 +1,19 @@ .MediaViewerContent { position: absolute; + z-index: 1; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; transform: none; + overflow: hidden; - z-index: 1; - padding: 3.25rem 0; - height: 100%; display: inline-flex; - justify-content: center; align-items: center; + justify-content: center; + + height: 100%; + padding: 3.25rem 0; .thumbnail { position: relative; diff --git a/src/components/mediaViewer/MediaViewerFooter.scss b/src/components/mediaViewer/MediaViewerFooter.scss index c58a7b1f7..653a7e5f8 100644 --- a/src/components/mediaViewer/MediaViewerFooter.scss +++ b/src/components/mediaViewer/MediaViewerFooter.scss @@ -1,30 +1,28 @@ .MediaViewerFooter { position: absolute; bottom: 0; - padding: 1rem 0; - width: 100%; - transition: opacity 0.15s; - @media (max-height: 640px) { - padding: 0.5rem 0 0; - } + width: 100%; + padding: 1rem 0; + + transition: opacity 0.15s; &.mobile { background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); &.is-for-video { - opacity: 0; pointer-events: none; padding-bottom: 5rem; + opacity: 0; .video-controls-visible &:not(.is-hidden) { - opacity: 1; pointer-events: auto; + opacity: 1; } } .media-viewer-footer-content { - opacity: 1; z-index: 1; + opacity: 1; } .media-text.multiline::before { display: none; @@ -37,11 +35,15 @@ } .media-viewer-footer-content { + cursor: var(--custom-cursor, pointer); + position: relative; + max-width: var(--messages-container-width); margin: auto; - cursor: var(--custom-cursor, pointer); + opacity: 0.5; + transition: opacity 0.15s; &:hover { @@ -54,18 +56,16 @@ } .media-text { - margin-bottom: 0; overflow: auto; - padding: 0 0.5rem; - text-align: center; - color: rgba(255, 255, 255, 0.9); - font-size: 0.9375rem; - letter-spacing: 0.025rem; - max-height: 4.25rem; - @media (max-height: 640px) { - max-height: 2.75rem; - } + max-height: 4.25rem; + margin-bottom: 0; + padding: 0 0.5rem; + + font-size: 0.9375rem; + color: rgba(255, 255, 255, 0.9); + text-align: center; + letter-spacing: 0.025rem; .emoji:not(.custom-emoji) { width: 0.9375rem; @@ -76,16 +76,23 @@ &.multiline { &::before { content: ""; + position: absolute; - left: -0.75rem; - right: -0.75rem; - top: -0.25rem; - bottom: -0.25rem; - background: rgba(0, 0, 0, 0.75); - border-radius: var(--border-radius-default); z-index: var(--z-below); + top: -0.25rem; + right: -0.75rem; + bottom: -0.25rem; + left: -0.75rem; + + border-radius: var(--border-radius-default); + + background: rgba(0, 0, 0, 0.75); } } + + @media (max-height: 640px) { + max-height: 2.75rem; + } } a { @@ -99,8 +106,12 @@ .media-viewer-button { max-width: 20rem; - margin-top: 0.5rem; height: 2.8125rem; + margin-top: 0.5rem; border-radius: 0.6875rem; } + + @media (max-height: 640px) { + padding: 0.5rem 0 0; + } } diff --git a/src/components/mediaViewer/MediaViewerSlides.scss b/src/components/mediaViewer/MediaViewerSlides.scss index 2ea31047c..ae3b2b09b 100644 --- a/src/components/mediaViewer/MediaViewerSlides.scss +++ b/src/components/mediaViewer/MediaViewerSlides.scss @@ -1,34 +1,39 @@ .MediaViewerSlides { + -ms-touch-action: none; + touch-action: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; display: flex; + + width: 100%; height: 100%; + min-height: -moz-available; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ max-height: 100vh; max-height: -webkit-fill-available; - - min-height: -moz-available; - width: 100%; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; - top: 0; - left: 0; - right: 0; - bottom: 0; } .MediaViewerSlide { + touch-action: none; + position: absolute; + z-index: 0; top: 0; - left: 0; right: 0; bottom: 0; - height: 100%; - flex: 100% 0 0; - z-index: 0; - touch-action: none; + left: 0; transform-origin: 0 0; + flex: 100% 0 0; + + height: 100%; + &--active { z-index: 1; } diff --git a/src/components/mediaViewer/SeekLine.module.scss b/src/components/mediaViewer/SeekLine.module.scss index 59016f768..02ad1f657 100644 --- a/src/components/mediaViewer/SeekLine.module.scss +++ b/src/components/mediaViewer/SeekLine.module.scss @@ -1,12 +1,14 @@ .container { - position: absolute; - left: 1rem; - right: 1rem; - top: 1rem; - height: 1rem; touch-action: none; cursor: var(--custom-cursor, pointer); + position: absolute; + top: 1rem; + right: 1rem; + left: 1rem; + + height: 1rem; + :global(body.is-electron) & { cursor: auto; } @@ -14,18 +16,21 @@ .preview { position: absolute; - left: 0; z-index: 1; bottom: calc(100% + 0.5rem); - border-radius: 0.25rem; + left: 0; + overflow: hidden; + + border-radius: 0.25rem; + background: #000; } .previewCanvas { + display: block; width: 100%; height: 100%; - display: block; } body:global(.is-touch-env) .preview { @@ -34,58 +39,71 @@ body:global(.is-touch-env) .preview { .previewTime { position: absolute; - left: 0; right: 0; bottom: 0; + left: 0; + text-align: center; } .previewTimeText { + padding: 0.25rem 0.5rem; border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; - background: rgba(0, 0, 0, 0.5); + color: rgba(255, 255, 255, 0.8); - padding: 0.25rem 0.5rem; + + background: rgba(0, 0, 0, 0.5); } .track { position: absolute; top: 50%; - height: 5px; - transform: translateY(-50%); - background-color: rgba(255, 255, 255, 0.16); - border-radius: var(--border-radius-default); - left: -0.25rem; right: -0.25rem; + left: -0.25rem; + transform: translateY(-50%); + + height: 5px; + border-radius: var(--border-radius-default); + + background-color: rgba(255, 255, 255, 0.16); } .buffered { position: absolute; - background-color: rgba(255, 255, 255, 0.5); top: 0; left: 0; + height: 100%; border-radius: var(--border-radius-default); + + background-color: rgba(255, 255, 255, 0.5); } .played { - background: var(--color-primary); position: absolute; top: 0; left: 0; + height: 100%; border-radius: var(--border-radius-default); + background: var(--color-primary); + &::after { content: ""; + position: absolute; + top: 50%; + right: 0; + transform: translate(50%, -50%) scale(1); + width: 0.75rem; height: 0.75rem; border-radius: 50%; + background-color: var(--color-primary); - right: 0; - top: 50%; - transform: translate(50%, -50%) scale(1); + transition: transform 0.2s ease; } } diff --git a/src/components/mediaViewer/SenderInfo.scss b/src/components/mediaViewer/SenderInfo.scss index 9754ee50c..61028c98b 100644 --- a/src/components/mediaViewer/SenderInfo.scss +++ b/src/components/mediaViewer/SenderInfo.scss @@ -1,8 +1,11 @@ .SenderInfo { + cursor: var(--custom-cursor, pointer); + display: flex; align-content: center; - cursor: var(--custom-cursor, pointer); + color: rgba(255, 255, 255, 0.5); + transition: 0.15s color; &:hover { @@ -25,16 +28,17 @@ } .title { - line-height: 1.4375rem; - font-weight: var(--font-weight-medium); - white-space: pre; overflow: hidden; + + font-weight: var(--font-weight-medium); + line-height: 1.4375rem; text-overflow: ellipsis; + white-space: pre; } .date { - line-height: 1.25rem; font-size: 0.875rem; + line-height: 1.25rem; letter-spacing: -0.01rem; } } diff --git a/src/components/mediaViewer/VideoPlayer.scss b/src/components/mediaViewer/VideoPlayer.scss index 21178ad62..ada3d759a 100644 --- a/src/components/mediaViewer/VideoPlayer.scss +++ b/src/components/mediaViewer/VideoPlayer.scss @@ -1,8 +1,86 @@ .VideoPlayer { position: relative; + overflow: hidden; display: inline-flex; flex-direction: column; - overflow: hidden; + + video { + display: block; + + width: 100%; + height: 100%; + max-height: calc(100vh - 8.25rem); + margin: auto; + + object-fit: contain; + background: no-repeat 50% 50%; + background-size: contain; + outline: none; + + // Disable fullscreen on double tap on mobile devices + .is-touch-env & { + pointer-events: none; + } + + @media (max-height: 640px) { + max-height: calc(100vh - 10rem); + } + } + + .play-button { + position: absolute; + z-index: 3; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 3.25rem; + height: 3.25rem; + + background-color: rgba(0, 0, 0, 0.5) !important; + body:not(.no-page-transitions) & { + transition: opacity 0.3s ease !important; + } + + .icon-play { + position: relative; + left: 0.125rem; + font-size: 1.75rem; + } + } + + .spinner-container { + position: absolute; + top: 0; + left: 0; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + .buffering { + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); + } + + .ProgressSpinner { + cursor: var(--custom-cursor, pointer); + } + } @media (max-width: 600px) { overflow: visible; @@ -15,73 +93,4 @@ margin-bottom: 0; } } - - video { - display: block; - max-height: calc(100vh - 8.25rem); - margin: auto; - object-fit: contain; - outline: none; - width: 100%; - height: 100%; - background: no-repeat 50% 50%; - background-size: contain; - - @media (max-height: 640px) { - max-height: calc(100vh - 10rem); - } - - // Disable fullscreen on double tap on mobile devices - .is-touch-env & { - pointer-events: none; - } - } - - .play-button { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 3.25rem; - height: 3.25rem; - background-color: rgba(0, 0, 0, 0.5) !important; - z-index: 3; - body:not(.no-page-transitions) & { - transition: opacity 0.3s ease !important; - } - - .icon-play { - font-size: 1.75rem; - position: relative; - left: 0.125rem; - } - } - - .spinner-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - .buffering { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; - } - - .ProgressSpinner { - cursor: var(--custom-cursor, pointer); - } - } } diff --git a/src/components/mediaViewer/VideoPlayerControls.scss b/src/components/mediaViewer/VideoPlayerControls.scss index 4aa2e0206..84af2d5da 100644 --- a/src/components/mediaViewer/VideoPlayerControls.scss +++ b/src/components/mediaViewer/VideoPlayerControls.scss @@ -1,18 +1,23 @@ .VideoPlayerControls { + pointer-events: none; + + position: absolute; + z-index: var(--z-video-player-controls); + bottom: 0; + left: 0; + display: flex; align-items: center; - position: absolute; - left: 0; - bottom: 0; + width: 100%; padding: 2rem 0.5rem 0.5rem; + font-size: 0.875rem; - background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); - transition: opacity 0.3s; - z-index: var(--z-video-player-controls); opacity: 0; - pointer-events: none; + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); + + transition: opacity 0.3s; &.mobile { position: fixed; @@ -27,8 +32,8 @@ } &.active { - opacity: 1; pointer-events: auto; + opacity: 1; } .buttons { @@ -43,9 +48,9 @@ .Button.round { width: 2rem; - padding: 0; - margin: 0.25rem; height: 2rem; + margin: 0.25rem; + padding: 0; @media (max-width: 320px) { margin: 0.125rem; @@ -53,14 +58,15 @@ } .volume-slider { - margin-bottom: 0; - margin-left: -0.75rem; - padding: 0.5rem 0.5rem 0.5rem 0.5rem; - width: 0; --volume-slider-width: 4rem; --slider-color: #fff; --color-borders: rgba(255, 255, 255, 0.5); + + width: 0; + margin-bottom: 0; + margin-left: -0.75rem; + padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width 0.2s ease-in-out; @@ -88,16 +94,16 @@ } .player-time { - color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; + color: rgba(255, 255, 255, 0.5); white-space: nowrap; } .player-file-size { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; margin-left: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; @media (max-width: 320px) { margin: 0.25rem; @@ -107,9 +113,9 @@ .playback-rate-menu { color: var(--color-text); .bubble { + bottom: 4.1875rem; min-width: 3.5rem; margin-right: 5.8125rem; - bottom: 4.1875rem; } &.no-fullscreen, &.no-pip { diff --git a/src/components/middle/ChatLanguageModal.module.scss b/src/components/middle/ChatLanguageModal.module.scss index 49470f836..55806a778 100644 --- a/src/components/middle/ChatLanguageModal.module.scss +++ b/src/components/middle/ChatLanguageModal.module.scss @@ -1,8 +1,8 @@ .root { :global(.modal-content) { - min-height: min(75vh, 32rem); display: flex; flex-direction: column; + min-height: min(75vh, 32rem); } :global(.matching-text-highlight) { diff --git a/src/components/middle/ContactGreeting.module.scss b/src/components/middle/ContactGreeting.module.scss index bec954234..cb71457fe 100644 --- a/src/components/middle/ContactGreeting.module.scss +++ b/src/components/middle/ContactGreeting.module.scss @@ -1,49 +1,58 @@ .root { - width: 100%; - height: 100%; display: flex; flex-direction: column; + gap: 0.5rem; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + text-align: center; - gap: 0.5rem; .wrapper { display: inline-flex; flex-direction: column; align-items: center; - background: var(--pattern-color); + width: 14.5rem; padding: 0.75rem 1rem; border-radius: 1.5rem; + color: #fff; + + background: var(--pattern-color); } .explainer { - background: var(--pattern-color); + max-width: 14.5rem; padding: 0.25rem 0.5rem; border-radius: 1rem; + font-size: 0.875rem; color: #fff; - max-width: 14.5rem; text-wrap: balance; + + background: var(--pattern-color); } .title { - font-weight: var(--font-weight-medium); margin-bottom: 0; + font-weight: var(--font-weight-medium); } .description { - font-size: 0.9375rem; margin-bottom: 0; + font-size: 0.9375rem; } .sticker { - margin: 1rem; - height: 10rem; - width: 10rem; cursor: var(--custom-cursor, pointer); + position: relative; + + width: 10rem; + height: 10rem; + margin: 1rem; } } diff --git a/src/components/middle/EmojiInteractionAnimation.scss b/src/components/middle/EmojiInteractionAnimation.scss index 067a06d0a..efdc7f21b 100644 --- a/src/components/middle/EmojiInteractionAnimation.scss +++ b/src/components/middle/EmojiInteractionAnimation.scss @@ -2,13 +2,16 @@ --start-x: 0; --start-y: 0; --scale: 0; + + pointer-events: none; + position: absolute; + z-index: var(--z-reaction-interaction-effect); top: 0; left: 0; + width: 100%; height: 100%; - pointer-events: none; - z-index: var(--z-reaction-interaction-effect); @keyframes show-interaction { from { @@ -34,8 +37,9 @@ position: absolute; top: var(--start-y); left: var(--start-x); - transform: scale(var(--scale), 0); transform-origin: left top; + transform: scale(var(--scale), 0); + transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99) opacity; } diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss index 394b9acdf..fc4429bcd 100644 --- a/src/components/middle/FloatingActionButtons.module.scss +++ b/src/components/middle/FloatingActionButtons.module.scss @@ -3,18 +3,21 @@ --translate-x: 0; --translate-y: 4.5rem; - position: absolute; - bottom: var(--base-bottom-pos); - right: max(1rem, env(safe-area-inset-right)); - opacity: 0; - transform: translate(var(--translate-x), var(--translate-y)); - transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; - z-index: var(--z-scroll-down-button); pointer-events: none; + position: absolute; + z-index: var(--z-scroll-down-button); + right: max(1rem, env(safe-area-inset-right)); + bottom: var(--base-bottom-pos); + transform: translate(var(--translate-x), var(--translate-y)); + + opacity: 0; + + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; + .hidden { - opacity: 0; pointer-events: none; + opacity: 0; } .reactions { @@ -35,6 +38,29 @@ transition: opacity 0.15s; } + &.revealed { + --translate-y: 0; + + opacity: 1; + + .unread { + pointer-events: auto; + } + + &.no-composer.no-extra-shift { + --translate-y: 4rem; + } + } + + &.hide-scroll-down { + --translate-y: 4rem; + + .unread { + pointer-events: none; + opacity: 0; + } + } + @media (min-width: 1276px) { --translate-x: 0; @@ -63,28 +89,6 @@ } } - &.revealed { - --translate-y: 0; - opacity: 1; - - .unread { - pointer-events: auto; - } - - &.no-composer.no-extra-shift { - --translate-y: 4rem; - } - } - - &.hide-scroll-down { - --translate-y: 4rem; - - .unread { - opacity: 0; - pointer-events: none; - } - } - @media (max-width: 600px) { body.is-symbol-menu-open & { bottom: calc(var(--base-bottom-pos) + var(--symbol-menu-height)); diff --git a/src/components/middle/FrozenAccountPlaceholder.module.scss b/src/components/middle/FrozenAccountPlaceholder.module.scss index 5381f422e..de9634ffa 100644 --- a/src/components/middle/FrozenAccountPlaceholder.module.scss +++ b/src/components/middle/FrozenAccountPlaceholder.module.scss @@ -7,15 +7,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); } diff --git a/src/components/middle/HeaderMenuContainer.scss b/src/components/middle/HeaderMenuContainer.scss index 28fde774f..1d9f71316 100644 --- a/src/components/middle/HeaderMenuContainer.scss +++ b/src/components/middle/HeaderMenuContainer.scss @@ -1,10 +1,11 @@ .HeaderMenuContainer { position: fixed; - top: 0; - left: 0; - right: 0; - height: 100vh; z-index: var(--z-header-menu); + top: 0; + right: 0; + left: 0; + + height: 100vh; .Menu { position: absolute; @@ -15,8 +16,9 @@ } .bubble { - z-index: var(--z-header-menu); --offset-y: calc(100% + 1rem); + + z-index: var(--z-header-menu); } } } diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 919acbf6c..3fc6e9031 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -1,13 +1,13 @@ .MessageList { --action-message-bg: var(--pattern-color); + overflow-x: hidden; + overflow-y: scroll; flex: 1; + width: 100%; margin-bottom: 0.5rem; - overflow-y: scroll; - overflow-x: hidden; - /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: bottom 150ms ease-out, transform var(--layer-transition); @@ -19,27 +19,17 @@ mask-image: linear-gradient(to top, transparent 0, #000 0.5rem); } - @media (pointer: coarse) { - user-select: none; - -webkit-touch-callout: none; - - &.select-mode-active { - user-select: auto; - -webkit-touch-callout: default; - } - } - body.keyboard-visible & { position: relative; bottom: 0; - @media (max-width: 600px) { - bottom: calc(0px - env(safe-area-inset-bottom)); - } - body.keyboard-visible.no-page-transitions & { transition: none !important; } + + @media (max-width: 600px) { + bottom: calc(0px - env(safe-area-inset-bottom)); + } } &.no-avatars .Message > .Avatar { @@ -47,13 +37,14 @@ } .messages-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; max-width: var(--messages-container-width); min-height: 100%; margin: 0 auto; - display: flex; - justify-content: flex-end; - flex-direction: column; padding: 1rem 1rem 0 1.125rem; .force-messages-scroll & { @@ -62,9 +53,9 @@ @media (max-width: 600px) { width: 100vw; - padding: 2.75rem 0.5rem 0; // Patch for an issue on Android when rotating device margin: 0; + padding: 2.75rem 0.5rem 0; } } @@ -88,13 +79,13 @@ .last-in-list { margin-bottom: 5.625rem; - @media (max-width: 600px) { - margin-bottom: 4.25rem; - } - &.ActionMessage { padding-bottom: 0.125rem; } + + @media (max-width: 600px) { + margin-bottom: 4.25rem; + } } &:has(.sponsored-media-preview) { @@ -106,36 +97,41 @@ } } - @media (max-width: 600px) { - &.with-bottom-shift { - margin-bottom: 0; - - .last-in-list { - margin-bottom: 4.25rem; - - body:not(.keyboard-visible) & { - margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); - } - } - } - } - .Message, .ActionMessage { position: relative; - - opacity: 1; transform: scale(1); + opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; + &::before { + content: ""; + + position: absolute; + z-index: 0; + top: -0.1875rem; + right: -50vw; + bottom: -0.1875rem; + left: -50vw; + + opacity: 0; + background: black; + + transition: opacity var(--select-transition); + + body.no-page-transitions & { + transition: none !important; + } + } + &:not(.open) { transform: scale(0.8); opacity: 0; } body.no-message-sending-animations & { - opacity: 1; transform: none; + opacity: 1; transition: none !important; } @@ -149,24 +145,6 @@ transform: none; } - &::before { - content: ""; - position: absolute; - top: -0.1875rem; - bottom: -0.1875rem; - left: -50vw; - right: -50vw; - background: black; - z-index: 0; - - opacity: 0; - transition: opacity var(--select-transition); - - body.no-page-transitions & { - transition: none !important; - } - } - &:not(.last-in-group) { &::before { bottom: -0.1875rem; @@ -217,12 +195,13 @@ } .empty { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; + & > span { max-width: 80%; text-align: left; @@ -232,21 +211,23 @@ .local-action-message, .ActionMessage, .empty { - text-align: center; - user-select: none; --custom-emoji-size: calc(var(--message-text-size, 1rem) + 0.125rem); + + user-select: none; font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); line-height: 1.25; + text-align: center; > span { - background-color: var(--action-message-bg); - color: white; - position: relative; + z-index: 0; + border-radius: var(--border-radius-messages); - z-index: 0; + color: white; + + background-color: var(--action-message-bg); body.is-ios &, body.is-macos & { @@ -255,9 +236,9 @@ } .emoji-small { - vertical-align: text-bottom; width: calc(1.25 * var(--message-text-size, 1rem)); height: calc(1.25 * var(--message-text-size, 1rem)); + vertical-align: text-bottom; background-size: calc(1.25 * var(--message-text-size, 1rem)); } } @@ -275,17 +256,16 @@ } .sticky-date { + pointer-events: none; + + z-index: var(--z-sticky-date); + margin-top: 1rem; margin-bottom: 1rem; - z-index: var(--z-sticky-date); - pointer-events: none; - opacity: 1; - transition: opacity 0.3s ease; - @media (max-width: 600px) { - margin-top: 0.5rem; - margin-bottom: 0.75rem; - } + opacity: 1; + + transition: opacity 0.3s ease; body:not(.is-scrolling-messages) &.stuck { opacity: 0; @@ -306,6 +286,11 @@ span { pointer-events: auto; } + + @media (max-width: 600px) { + margin-top: 0.5rem; + margin-bottom: 0.75rem; + } } &.scrolled:not(.is-animating) .sticky-date { @@ -327,9 +312,44 @@ margin-top: -0.375rem; } + .Transition_slide-from > &, + .Transition_slide-to > & { + scrollbar-color: transparent transparent !important; + + &::-webkit-scrollbar-thumb { + background-color: transparent !important; + } + } + + @media (pointer: coarse) { + user-select: none; + + -webkit-touch-callout: none; + + &.select-mode-active { + user-select: auto; + + -webkit-touch-callout: default; + } + } + + @media (max-width: 600px) { + &.with-bottom-shift { + margin-bottom: 0; + + .last-in-list { + margin-bottom: 4.25rem; + + body:not(.keyboard-visible) & { + margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + } + } + } + } + @media (min-width: 1276px) { - width: 100%; transform: translate3d(0, 0, 0); + width: 100%; transition: transform var(--layer-transition); .messages-container { @@ -364,13 +384,4 @@ transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); } } - - .Transition_slide-from > &, - .Transition_slide-to > & { - scrollbar-color: transparent transparent !important; - - &::-webkit-scrollbar-thumb { - background-color: transparent !important; - } - } } diff --git a/src/components/middle/MessageListAccountInfo.module.scss b/src/components/middle/MessageListAccountInfo.module.scss index cf0fae1cb..31d813540 100644 --- a/src/components/middle/MessageListAccountInfo.module.scss +++ b/src/components/middle/MessageListAccountInfo.module.scss @@ -1,35 +1,40 @@ .root { - width: 100%; - height: 100%; display: flex; flex-direction: column; + + width: 100%; + height: 100%; padding: 0 0.6875rem; } .chatInfo { - max-width: min(80%, 25rem); - min-width: 15.8125rem; + overflow: hidden; display: flex; flex-direction: column; + min-width: 15.8125rem; + max-width: min(80%, 25rem); + border-radius: var(--border-radius-messages); + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); font-weight: var(--font-weight-normal); - border-radius: var(--border-radius-messages); - overflow: hidden; text-align: center; } .chatBackground { - background-color: var(--action-message-bg); - color: white; - padding: 1rem 1.5rem; - margin: 5rem 0 2rem; contain: layout; // Force new stacking context for text blending + + margin: 5rem 0 2rem; + padding: 1rem 1.5rem; + + color: white; + + background-color: var(--action-message-bg); } .botBackground { - background-color: var(--color-background); color: var(--color-text); + background-color: var(--color-background); } .bot-info-description { @@ -38,8 +43,8 @@ } .bot-info-title { - font-weight: var(--font-weight-medium); margin-bottom: 0.25rem; + font-weight: var(--font-weight-medium); } .media { @@ -48,8 +53,8 @@ } .chatInfoTitle { - font-weight: var(--font-weight-semibold); margin: 0 0 0.25rem; + font-weight: var(--font-weight-semibold); } .chatInfoSubtitle { @@ -58,9 +63,10 @@ .chatDescription { display: flex; - justify-content: flex-start; - align-items: center; gap: 0.25rem; + align-items: center; + justify-content: flex-start; + margin: 0; } @@ -77,9 +83,10 @@ .chatNotVerified { display: flex; - justify-content: center; - align-items: center; gap: 0.25rem; + align-items: center; + justify-content: center; + margin-top: 1rem; } @@ -89,8 +96,8 @@ .link { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; &:hover { text-decoration: none; } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 6f4bb525d..2bfc7a75f 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -1,21 +1,29 @@ .MessageSelectToolbar { position: absolute; + z-index: 20; + right: 0.5rem; bottom: 0.5rem; left: 0.5rem; - right: 0.5rem; - width: auto; - z-index: 20; + justify-content: center; + + width: auto; margin: 0; + opacity: 1; - @media (max-width: 600px) { - bottom: calc(0.5rem + env(safe-area-inset-bottom)); + &::before { + z-index: -1; + right: auto; + left: auto; + + width: 100%; + max-width: calc(100% * var(--composer-hidden-scale)); } .mask-image-disabled &::before { - left: auto !important; right: auto !important; + left: auto !important; } .no-composer & { @@ -26,16 +34,6 @@ } } - @media (min-width: 601px) { - left: 1rem; - right: 1rem; - bottom: 1.25rem; - - .no-composer & { - top: -4.75rem; - } - } - & .MessageSelectToolbar-inner { transform: scaleX(1) translateX(0); } @@ -50,8 +48,8 @@ } &:not(.shown) { - opacity: 0; pointer-events: none; + opacity: 0; .shown-inner { transform: scaleX(var(--toolbar-hidden-scale, 1)); @@ -66,33 +64,23 @@ } } - &::before { - z-index: -1; - max-width: calc(100% * var(--composer-hidden-scale)); - width: 100%; - left: auto; - right: auto; - } - &-inner { - width: 100%; - max-width: calc(100% * var(--composer-hidden-scale)); + transform: scaleX(1); + display: flex; align-items: center; - padding: 0.25rem; - background: var(--color-background); + width: 100%; + max-width: calc(100% * var(--composer-hidden-scale)); + padding: 0.25rem; border-radius: var(--border-radius-messages); - box-shadow: 0 1px 2px var(--color-default-shadow); + font-weight: var(--font-weight-medium); - transform: scaleX(1); - transition: transform var(--select-transition), opacity var(--select-transition); + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); - @media (max-width: 600px) { - padding: 0; - max-width: none; - } + transition: transform var(--select-transition), opacity var(--select-transition); > .Button { width: 3rem; @@ -103,43 +91,55 @@ height: 2.875rem; } } + + @media (max-width: 600px) { + max-width: none; + padding: 0; + } } &-count { - margin-left: 1rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; flex-grow: 1; + margin-left: 1rem; + + text-overflow: ellipsis; + white-space: nowrap; + @media (max-width: 600px) { margin-right: 0.5rem; } } &-actions { - margin-left: auto; display: flex; + margin-left: auto; .item { - width: 100%; - background: none; - border: none !important; - box-shadow: none !important; - outline: none !important; - display: flex; - position: relative; - overflow: hidden; - line-height: 1.5rem; - white-space: nowrap; - color: var(--color-text); --ripple-color: rgba(0, 0, 0, 0.08); - cursor: var(--custom-cursor, pointer); - unicode-bidi: plaintext; + cursor: var(--custom-cursor, pointer); + + position: relative; + + unicode-bidi: plaintext; + overflow: hidden; + display: flex; + + width: 100%; padding: 0.6875rem; + border: none !important; border-radius: 50%; + line-height: 1.5rem; + color: var(--color-text); + white-space: nowrap; + + background: none; + outline: none !important; + box-shadow: none !important; + .icon { font-size: 1.5rem; color: var(--color-text-secondary); @@ -153,9 +153,9 @@ } &.disabled { - opacity: 0.5; - cursor: var(--custom-cursor, default); pointer-events: none; + cursor: var(--custom-cursor, default); + opacity: 0.5; } &:not(.disabled):active { @@ -165,10 +165,24 @@ @media (hover: hover) { &:hover, &:focus { - background-color: var(--color-chat-hover); text-decoration: none; + background-color: var(--color-chat-hover); } } } } + + @media (max-width: 600px) { + bottom: calc(0.5rem + env(safe-area-inset-bottom)); + } + + @media (min-width: 601px) { + right: 1rem; + bottom: 1.25rem; + left: 1rem; + + .no-composer & { + top: -4.75rem; + } + } } diff --git a/src/components/middle/MiddleColumn.module.scss b/src/components/middle/MiddleColumn.module.scss index 6cbbc3a77..8f7c455b9 100644 --- a/src/components/middle/MiddleColumn.module.scss +++ b/src/components/middle/MiddleColumn.module.scss @@ -1,22 +1,26 @@ .background { position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; z-index: -1; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -29,8 +33,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -49,14 +53,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -78,15 +74,17 @@ &:not(.customBgImage):not(.customBgColor)::after { 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) & { @@ -94,4 +92,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index fc7e50191..dfd9c54e3 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -1,30 +1,30 @@ #MiddleColumn { - display: flex; - justify-content: center; - height: 100%; position: relative; z-index: 1; - min-width: 0; - @media (max-width: 600px) { - overflow: hidden; - } + display: flex; + justify-content: center; + + min-width: 0; + height: 100%; .messages-layout { --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); + position: relative; + + overflow: hidden; display: flex; flex-direction: column; align-items: center; + width: 100%; height: 100%; - position: relative; - overflow: hidden; > .Transition { + overflow: hidden; width: 100%; height: 100%; - overflow: hidden; > .Transition_slide { display: flex; @@ -63,8 +63,8 @@ } > .Button { - opacity: 1; transform: scale(1); + opacity: 1; /* stylelint-disable plugin/no-low-performance-animation-properties */ transition: border-radius 0.15s, @@ -111,8 +111,8 @@ } > .Button { - opacity: 0 !important; transform: scale(0.5); + opacity: 0 !important; } } } @@ -135,8 +135,8 @@ } &:not(.shown) { - transform: scaleX(var(--composer-hidden-scale, 1)); pointer-events: none; + transform: scaleX(var(--composer-hidden-scale, 1)); .messaging-disabled-inner span { opacity: 0; @@ -147,25 +147,57 @@ width: 100%; padding: 1rem; border-radius: var(--border-radius-messages); - background: var(--color-background); + color: var(--color-text-secondary); text-align: center; + + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); } } .middle-column-footer { + position: relative; + z-index: var(--z-middle-footer); + transform: translate3d(0, 0, 0); + + display: flex; + align-items: flex-end; + width: 100%; max-width: var(--messages-container-width); padding: 0 1rem; - position: relative; - display: flex; - align-items: flex-end; - z-index: var(--z-middle-footer); - transform: translate3d(0, 0, 0); transition: top 200ms, transform var(--layer-transition); + &::before { + content: ""; + + position: absolute; + top: -0.5625rem; + right: 0; + left: 0; + + height: 1px; + + opacity: 0; + background: + linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.4) 2%, + rgba(255, 255, 255, 0.4) 98%, + rgba(255, 255, 255, 0) 100% + ); + + transition: opacity 350ms ease; + + @media (max-width: 600px) { + right: -2%; + left: -2%; + } + } + body.no-page-transitions & { transition: none !important; } @@ -174,25 +206,9 @@ transition: top 200ms !important; } - @media (min-width: 1276px) { - width: calc(100% - var(--right-column-width)); - - #Main.right-column-open & { - transform: translate3d(calc(var(--right-column-width) / -2), 0, 0); - } - } - - @media (max-width: 600px) { - padding: 0 0.5rem; - - body.is-symbol-menu-open & { - transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); - } - } - &:not(.no-composer) { - padding-bottom: 0; top: 0; + padding-bottom: 0; @media (max-width: 600px) { padding-bottom: env(safe-area-inset-bottom); @@ -203,30 +219,6 @@ } } - &::before { - content: ""; - position: absolute; - top: -0.5625rem; - left: 0; - right: 0; - height: 1px; - background: - linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.4) 2%, - rgba(255, 255, 255, 0.4) 98%, - rgba(255, 255, 255, 0) 100% - ); - opacity: 0; - transition: opacity 350ms ease; - - @media (max-width: 600px) { - left: -2%; - right: -2%; - } - } - &.with-notch::before { opacity: 1; } @@ -241,6 +233,26 @@ rgba(127, 127, 127, 0) 100% ); } + + @media (min-width: 1276px) { + width: calc(100% - var(--right-column-width)); + + #Main.right-column-open & { + transform: translate3d(calc(var(--right-column-width) / -2), 0, 0); + } + } + + @media (max-width: 600px) { + padding: 0 0.5rem; + + body.is-symbol-menu-open & { + transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); + } + } + } + + @media (max-width: 600px) { + overflow: hidden; } } @@ -259,17 +271,17 @@ .MessageSelectToolbar, .composer-button, .messaging-disabled { - width: 100%; + position: relative; display: flex; justify-content: center; - position: relative; + width: 100%; } .MessageSelectToolbar-inner, .composer-button { .mask-image-disabled & { - box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); border-radius: var(--border-radius-messages); + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); } } @@ -280,15 +292,27 @@ } .middle-column-footer-button-container { - width: 100%; + position: absolute; + display: flex; justify-content: center; - position: absolute; + + width: 100%; padding-bottom: 1.25rem; .unpin-all-button { - text-transform: capitalize; color: var(--color-primary); + text-transform: capitalize; + + .icon-unpin { + margin-inline-start: -0.4375rem; + margin-inline-end: 0.75rem; + + font-size: 1.5rem; + color: var(--color-text-secondary); + + transition: color 0.15s; + } @media (hover: hover) { &:hover { @@ -306,24 +330,16 @@ } } } - - .icon-unpin { - margin-inline-start: -0.4375rem; - margin-inline-end: 0.75rem; - color: var(--color-text-secondary); - font-size: 1.5rem; - transition: color 0.15s; - } } .composer-button { - height: 3.5rem; transform: scaleX(1); + height: 3.5rem; transition: transform var(--select-transition), background-color 0.15s, color 0.15s; .select-mode-active + .middle-column-footer & { - box-shadow: none; transform: scaleX(var(--unpin-hidden-scale)); + box-shadow: none; } @media (max-width: 600px) { @@ -335,22 +351,24 @@ color: var(--color-primary); } + .mask-image-disabled &::before { + background: unset; + } + @media (max-width: 600px) { margin-left: -0.5rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); } - - .mask-image-disabled &::before { - background: unset; - } } .resize-handle { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 0.25rem; - z-index: var(--z-resize-handle); cursor: ew-resize; + + position: absolute; + z-index: var(--z-resize-handle); + top: 0; + bottom: 0; + left: 0; + + width: 0.25rem; } diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 43c19f4a2..4652a6352 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -1,25 +1,21 @@ @use "../../styles/mixins"; .MiddleHeader { - display: flex; - align-items: center; - width: 100%; - background: var(--color-background); position: relative; z-index: var(--z-middle-header); + + display: flex; + flex-shrink: 0; + align-items: center; + + width: 100%; + height: 3.5rem; padding-top: 0.25rem; + padding-right: max(0.8125rem, env(safe-area-inset-right)); padding-bottom: 0.25rem; padding-left: max(1.4375rem, env(safe-area-inset-left)); - padding-right: max(0.8125rem, env(safe-area-inset-right)); - flex-shrink: 0; - height: 3.5rem; - @media (max-width: 600px) { - position: relative; - - padding-left: max(0.5rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); - } + background: var(--color-background); .Transition { width: 100%; @@ -35,36 +31,38 @@ } .back-button { - margin-left: -0.5rem; - margin-right: 0.5rem; position: relative; - - @media (max-width: 600px) { - margin-left: 0; - } + margin-right: 0.5rem; + margin-left: -0.5rem; .unread-count { - min-width: 1.25rem; - height: 1.25rem; - padding: 0 0.375rem; - border-radius: 0.625rem; - font-size: 0.75rem; - line-height: 1.25rem; - font-weight: var(--font-weight-medium); - text-align: center; + pointer-events: none; position: absolute; top: -0.25rem; right: -0.5rem; - background: var(--color-gray); + min-width: 1.25rem; + height: 1.25rem; + padding: 0 0.375rem; + border-radius: 0.625rem; + + font-size: 0.75rem; + font-weight: var(--font-weight-medium); + line-height: 1.25rem; color: white; - pointer-events: none; + text-align: center; + + background: var(--color-gray); &.active { background: var(--color-primary); } } + + @media (max-width: 600px) { + margin-left: 0; + } } .chat-info-wrapper { @@ -74,10 +72,11 @@ .header-tools { display: flex; + flex-shrink: 0; align-items: center; justify-content: flex-end; + margin-left: auto; - flex-shrink: 0; body.no-page-transitions & { &, @@ -94,6 +93,11 @@ } } + // @optimization + #Main.right-column-animating & { + pointer-events: none; + } + @media (min-width: 1276px) { transform: translate3d(0, 0, 0); transition: transform var(--layer-transition); @@ -102,22 +106,19 @@ transform: translate3d(calc(var(--right-column-width) * -1), 0, 0); } } - - // @optimization - #Main.right-column-animating & { - pointer-events: none; - } } h3 { - font-weight: var(--font-weight-medium); - font-size: 1.125rem; - line-height: 1.375rem; - white-space: pre; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; + overflow: hidden; + + margin: 0; + + font-size: 1.125rem; + font-weight: var(--font-weight-medium); + line-height: 1.375rem; + text-overflow: ellipsis; + white-space: pre; body.is-ios &, body.is-macos & { @@ -126,8 +127,8 @@ } @media (max-width: 600px) { - display: block; overflow: hidden; + display: block; text-overflow: ellipsis; } @@ -145,15 +146,12 @@ // Space for unread story circle padding: 0.0625rem 0 0.0625rem 0.0625rem; - @media (max-width: 600px) { - user-select: none; - } - .info { display: flex; flex-direction: column; - justify-content: center; flex-grow: 1; + justify-content: center; + min-width: 0; } @@ -182,8 +180,8 @@ .status, .typing-status { - display: inline; unicode-bidi: plaintext; + display: inline; @media (min-width: 1275px) { #Main.right-column-open & { @@ -216,18 +214,22 @@ .message-count-transition { height: 1.125rem; } + + @media (max-width: 600px) { + user-select: none; + } } .ChatInfo .Avatar, .topic-header-icon { // TODO For some reason webpack imports `Audio.scss` second time when loading calls bundle width: 2.5rem !important; height: 2.5rem !important; - margin-right: 0.625rem; } .topic-header-icon { --custom-emoji-size: 2.25rem; + font-size: 2.25rem; .emoji-small { @@ -250,14 +252,16 @@ .status, .typing-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; .ellipsis { display: inline-flex; @@ -278,12 +282,13 @@ } .HeaderActions { - flex-shrink: 0; - margin-left: auto; display: flex; + flex-shrink: 0; align-items: center; justify-content: flex-end; + margin-left: auto; + .Button { margin-left: 0.25rem; @@ -306,18 +311,22 @@ .badge { position: absolute; + top: 0; + right: 0; + + flex-shrink: 0; + min-width: 1rem; height: 1rem; - background: var(--color-primary); border-radius: 0.5rem; - color: white; + font-size: 0.75rem; - line-height: 1rem; font-weight: var(--font-weight-medium); + line-height: 1rem; + color: white; text-align: center; - flex-shrink: 0; - right: 0; - top: 0; + + background: var(--color-primary); } } @@ -334,6 +343,12 @@ } } } + + @media (max-width: 600px) { + position: relative; + padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(0.5rem, env(safe-area-inset-left)); + } } @keyframes fade-in { diff --git a/src/components/middle/MiddleHeaderPanes.module.scss b/src/components/middle/MiddleHeaderPanes.module.scss index 5153e8efe..9fb4f91b8 100644 --- a/src/components/middle/MiddleHeaderPanes.module.scss +++ b/src/components/middle/MiddleHeaderPanes.module.scss @@ -1,19 +1,28 @@ .root { position: absolute; + z-index: var(--z-middle-header); top: 3.5rem; left: 0; width: 100%; - z-index: var(--z-middle-header); - /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width var(--layer-transition); - @media (min-width: 1276px) { - :global(#Main.right-column-open) & { - width: calc(100% - var(--right-column-width)); - } + // In case if there are no children, we need to have a shadow + &::before { + pointer-events: none; + content: ''; + + position: absolute; + z-index: -100; // Hide behind the children + top: -2px; + right: 0; + left: 0; + + height: 2px; + + box-shadow: 0 2px 2px var(--color-light-shadow); } /* stylelint-disable-next-line plugin/selector-tag-no-without-class */ @@ -21,16 +30,9 @@ box-shadow: 0 2px 2px var(--color-light-shadow); } - // In case if there are no children, we need to have a shadow - &::before { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - height: 2px; - left: 0; - right: 0; - box-shadow: 0 2px 2px var(--color-light-shadow); - z-index: -100; // Hide behind the children + @media (min-width: 1276px) { + :global(#Main.right-column-open) & { + width: calc(100% - var(--right-column-width)); + } } } diff --git a/src/components/middle/NoMessages.scss b/src/components/middle/NoMessages.scss index bb9d88539..275c77a9f 100644 --- a/src/components/middle/NoMessages.scss +++ b/src/components/middle/NoMessages.scss @@ -1,17 +1,19 @@ .NoMessages { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; + .no-messages-icon { - font-size: 5rem; margin: 0 auto 1rem; + font-size: 5rem; } .topic-icon { --custom-emoji-size: 3rem; + width: 3rem; height: 3rem; font-size: 2rem; @@ -20,45 +22,54 @@ .wrapper { display: inline-flex; flex-direction: column; - background: var(--pattern-color); + max-width: 20rem; padding: 0.75rem 1rem; border-radius: 1.5rem; + color: #fff; + background: var(--pattern-color); + &[dir="rtl"] { text-align: right; } } .title { - font-weight: var(--font-weight-medium); - font-size: 1rem; - margin-bottom: 0.25rem; - text-align: center; unicode-bidi: plaintext; + + margin-bottom: 0.25rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + text-align: center; } .description { - font-size: 0.9375rem; + unicode-bidi: plaintext; + margin: 0; padding: 0; + + font-size: 0.9375rem; list-style: none; - unicode-bidi: plaintext; } .topic-description { - text-align: center; padding: 0 1rem; + text-align: center; } .list-checkmarks { - font-size: 0.9375rem; + unicode-bidi: plaintext; + margin: 0.25rem 0 0; padding: 0; - list-style: none; - unicode-bidi: plaintext; + + font-size: 0.9375rem; line-height: 1.8; + list-style: none; li::before { content: "✓"; diff --git a/src/components/middle/PinnedMessageNavigation.module.scss b/src/components/middle/PinnedMessageNavigation.module.scss index 6a42cd387..d86f038b8 100644 --- a/src/components/middle/PinnedMessageNavigation.module.scss +++ b/src/components/middle/PinnedMessageNavigation.module.scss @@ -1,35 +1,41 @@ .pinned-message-border { position: relative; - height: 2.25rem; - margin: 0.125rem 0; + + overflow: hidden; + width: 0.125rem; min-width: 0.125rem; - overflow: hidden; + height: 2.25rem; + margin: 0.125rem 0; } .pinned-message-border-wrapper-1 { - height: 2.25rem; width: 0.125rem; + height: 2.25rem; border-radius: 0.0625rem; background: var(--color-primary); } .pinned-message-border-wrapper { - background-color: var(--color-primary-opacity-hover); - position: relative; will-change: transform; + position: relative; + background-color: var(--color-primary-opacity-hover); transition: transform 0.25s ease-in-out; } .pinned-message-border-mark { - position: absolute; - left: 0; - top: 0; - width: 0.125rem; - background: var(--color-primary); - border-radius: 0.0625rem; will-change: transform; - transition: transform 0.25s ease-in-out; + + position: absolute; + top: 0; + left: 0; transform: translateY(var(--translate-y)); + + width: 0.125rem; height: var(--height); + border-radius: 0.0625rem; + + background: var(--color-primary); + + transition: transform 0.25s ease-in-out; } diff --git a/src/components/middle/ReactorListModal.scss b/src/components/middle/ReactorListModal.scss index 91e56906f..1bafd922f 100644 --- a/src/components/middle/ReactorListModal.scss +++ b/src/components/middle/ReactorListModal.scss @@ -5,9 +5,10 @@ .modal-content { overflow: hidden; - height: min(92vh, 32rem); display: flex; flex-direction: column; + + height: min(92vh, 32rem); padding: 0.5rem 0 !important; } @@ -22,9 +23,9 @@ } .Reactions { + justify-content: space-between; margin-bottom: 0.5rem; padding: 0 1rem; - justify-content: space-between; &::after { content: ''; @@ -43,9 +44,9 @@ } .reactor-list { - max-height: 100%; overflow: auto; overflow-x: hidden; + max-height: 100%; padding: 0 0.5rem; } @@ -65,10 +66,11 @@ } .status { - color: var(--color-text-secondary); display: flex; align-items: center; + font-size: 0.875rem !important; line-height: 1.25rem; + color: var(--color-text-secondary); } } diff --git a/src/components/middle/RequirementToContactMessage.module.scss b/src/components/middle/RequirementToContactMessage.module.scss index 6a7a57df0..4ad03126f 100644 --- a/src/components/middle/RequirementToContactMessage.module.scss +++ b/src/components/middle/RequirementToContactMessage.module.scss @@ -1,19 +1,24 @@ .root { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + color: var(--color-white); .button { - background: var(--pattern-color); width: auto; - margin-top: 1.0625rem; - text-transform: none; - color: var(--color-white); height: 2.25rem; + margin-top: 1.0625rem; + line-height: 2.25rem; + color: var(--color-white); + text-transform: none; + + background: var(--pattern-color); + transition: filter 150ms ease-in-out; &:not(.disabled):not(:disabled):hover { @@ -27,24 +32,29 @@ display: flex; flex-direction: column; align-items: center; - background: var(--pattern-color); + max-width: 13.5rem; padding: 1.0625rem 0; border-radius: 1.5rem; + background: var(--pattern-color); + &[dir="rtl"] { text-align: right; } } .icons-container { - border-radius: 50%; - width: 8rem; - height: 8rem; + position: relative; + display: flex; align-items: center; justify-content: center; - position: relative; + + width: 8rem; + height: 8rem; + border-radius: 50%; + background: var(--pattern-color); } @@ -53,27 +63,29 @@ } .comments-icon { - font-size: 5rem; position: absolute; top: 0; transform: translateY(1.75rem); + font-size: 5rem; } .description { - white-space: pre; - text-align: center; display: inline-flex; - align-items: center; flex-wrap: wrap; + align-items: center; justify-content: center; - padding: 0 1rem; + margin-top: 0.5rem; + padding: 0 1rem; + + text-align: center; + white-space: pre; } .starIconContainer { - font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; + font-weight: var(--font-weight-medium); } .starIcon { diff --git a/src/components/middle/ScrollDownButton.module.scss b/src/components/middle/ScrollDownButton.module.scss index 0290eeaf8..712382aef 100644 --- a/src/components/middle/ScrollDownButton.module.scss +++ b/src/components/middle/ScrollDownButton.module.scss @@ -1,12 +1,14 @@ .root { + pointer-events: auto; + user-select: none; + + position: relative; + display: flex; flex-direction: column; align-items: center; - position: relative; - transition: opacity 0.2s ease; - user-select: none; - pointer-events: auto; + transition: opacity 0.2s ease; &:not(:first-child) { margin-top: 0.5rem; @@ -18,8 +20,8 @@ } .button { - box-shadow: 0 1px 2px var(--color-default-shadow); color: var(--color-composer-button); + box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-width: 600px) { width: 2.875rem !important; @@ -32,24 +34,25 @@ } .unread-count { - min-width: 1.5rem; - height: 1.5rem; - padding: 0 0.4375rem; - border-radius: 0.75rem; - font-size: 0.875rem; - line-height: 1.5rem; - font-weight: var(--font-weight-medium); - text-align: center; + pointer-events: none; position: absolute; top: -0.3125rem; right: -0.3125rem; - background-color: var(--color-green); + min-width: 1.5rem; + height: 1.5rem; + padding: 0 0.4375rem; border: 1px solid var(--color-background); - color: white; + border-radius: 0.75rem; - pointer-events: none; + font-size: 0.875rem; + font-weight: var(--font-weight-medium); + line-height: 1.5rem; + color: white; + text-align: center; + + background-color: var(--color-green); @media (max-width: 600px) { top: -0.6875rem; diff --git a/src/components/middle/composer/AttachBotIcon.module.scss b/src/components/middle/composer/AttachBotIcon.module.scss index bac195c62..ce5f19ec3 100644 --- a/src/components/middle/composer/AttachBotIcon.module.scss +++ b/src/components/middle/composer/AttachBotIcon.module.scss @@ -1,10 +1,11 @@ .root { - width: 1.5rem; - height: 1.5rem; display: flex; align-items: center; justify-content: center; + width: 1.5rem; + height: 1.5rem; + &.compact { width: 1.25rem; height: 1.25rem; @@ -12,8 +13,8 @@ } .image { - width: 1.75rem; position: absolute; + width: 1.75rem; &.compact { width: 1.5rem; diff --git a/src/components/middle/composer/AttachMenu.scss b/src/components/middle/composer/AttachMenu.scss index 643f0c7ae..2d1ca5a63 100644 --- a/src/components/middle/composer/AttachMenu.scss +++ b/src/components/middle/composer/AttachMenu.scss @@ -11,21 +11,18 @@ position: relative; top: -3.5rem; - @media (max-width: 600px) { - top: -2.875rem; - } - .bubble { - max-height: 20rem; overflow: auto; + max-height: 20rem; } .is-pointer-env & { > .backdrop { position: absolute; top: -1rem; - left: auto; right: 0; + left: auto; + width: 3.5rem; } } @@ -33,6 +30,10 @@ .media-disabled > button { white-space: normal; } + + @media (max-width: 600px) { + top: -2.875rem; + } } } diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss index f13c0e6b9..51c482580 100644 --- a/src/components/middle/composer/AttachmentModal.module.scss +++ b/src/components/middle/composer/AttachmentModal.module.scss @@ -13,18 +13,16 @@ .modal-header-condensed { padding: 0.375rem 1.125rem !important; border-bottom: 1px solid transparent; - transition: border-color 250ms ease-in-out; } .modal-content { + overflow-x: auto; display: flex; flex-direction: column; - padding: 0; // Full height - header - margins max-height: calc(100vh - 3.25rem - 5rem); - - overflow-x: auto; + padding: 0; @media (max-width: 600px) { padding-bottom: env(safe-area-inset-bottom); @@ -33,11 +31,13 @@ .symbol-menu-button { flex-shrink: 0; - background: none !important; + align-self: flex-end; + width: 3.5rem !important; height: 3.5rem !important; padding: 0 !important; - align-self: flex-end; + + background: none !important; } .symbol-menu-button, .mobile-symbol-menu-button { @@ -47,10 +47,10 @@ } .mobile-symbol-menu-button { - margin-left: 0 !important; - margin-right: -1.25rem !important; width: 2.875rem; height: 2.875rem; + margin-right: -1.25rem !important; + margin-left: 0 !important; } } @@ -60,11 +60,12 @@ &.mobile :global { .modal-dialog { - margin: 0; - max-width: 100% !important; align-self: end; - border-bottom-left-radius: 0; + + max-width: 100% !important; + margin: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } } @@ -73,8 +74,8 @@ } &.mobile.symbolMenuOpen :global(.modal-dialog) { - transition: var(--layer-transition); transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0); + transition: var(--layer-transition); @media (max-width: 600px) { transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0); @@ -92,14 +93,14 @@ } .attachments { - max-height: 26rem; - min-height: 5rem; overflow: auto; - flex-shrink: 1; - display: flex; + flex-shrink: 1; flex-wrap: wrap; gap: 0.5rem; + + min-height: 5rem; + max-height: 26rem; margin: 0 0.25rem; padding: 0 0.25rem; @@ -115,7 +116,6 @@ .caption-wrapper { position: relative; padding: 0 0.5rem; - border-top: 1px solid transparent; transition: border-color 250ms ease-in-out; @@ -125,8 +125,8 @@ } .MentionTooltip { - right: 0 !important; z-index: 0; + right: 0 !important; } } } @@ -137,43 +137,43 @@ .caption { display: flex; - align-items: center; gap: 0.5rem; + align-items: center; } .dropTarget { - display: flex; - flex-direction: column; - position: relative; overflow: hidden; + display: flex; + flex-direction: column; } .dropOutlineContainer { pointer-events: none; - overflow: visible !important; position: absolute; - padding-top: 0.5rem; + z-index: 2; left: 0.5rem; + + overflow: visible !important; + width: calc(100% - 1rem); height: calc(100% - 0.5rem); - - background-color: var(--color-background); + padding-top: 0.5rem; opacity: 0; + background-color: var(--color-background); + transition: opacity 0.2s; - z-index: 2; } .dropOutline { fill: none; - stroke: var(--color-primary); - stroke-width: 2; stroke-dasharray: 11, 8; - stroke-linecap: round; stroke-dashoffset: 0; + stroke-linecap: round; + stroke-width: 2; animation: outline 0.5s linear infinite; animation-play-state: paused; @@ -191,12 +191,14 @@ .dropTarget { &::after { content: attr(data-attach-description); + position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + color: var(--color-primary); - z-index: 2; } .caption-wrapper, @@ -210,8 +212,8 @@ } .send-wrapper { - align-self: flex-end; position: relative; + align-self: flex-end; padding-bottom: 0.5rem; } @@ -225,9 +227,9 @@ bottom: 2.25rem; .is-pointer-env & > .backdrop { - width: 100%; top: -2rem; bottom: auto; + width: 100%; height: 3.5rem; } } diff --git a/src/components/middle/composer/AttachmentModalItem.module.scss b/src/components/middle/composer/AttachmentModalItem.module.scss index 02f777b41..35b8101c4 100644 --- a/src/components/middle/composer/AttachmentModalItem.module.scss +++ b/src/components/middle/composer/AttachmentModalItem.module.scss @@ -1,13 +1,13 @@ .root { - flex: 1 calc(50% - 0.5rem); - min-width: 0; position: relative; + overflow: hidden; display: flex; + flex: 1 calc(50% - 0.5rem); align-items: center; + min-width: 0; border-radius: var(--border-radius-default); - overflow: hidden; } .preview { @@ -17,18 +17,22 @@ } .duration { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; -webkit-user-select: none; user-select: none; + + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); } .single .preview { @@ -41,22 +45,22 @@ } .file { - margin: 0.5rem; flex-grow: 1; min-width: 0; + margin: 0.5rem; } .overlay { position: absolute; - bottom: 0.5rem; right: 0.5rem; - background-color: rgba(0, 0, 0, 0.25); - border-radius: var(--border-radius-default); - - display: flex; + bottom: 0.5rem; overflow: hidden; + display: flex; + border-radius: var(--border-radius-default); + + background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); :global(body.no-menu-blur) & { @@ -66,14 +70,16 @@ } .action-item { + cursor: var(--custom-cursor, pointer); + display: block; + padding: 0.3125rem; - color: white; border-radius: var(--border-radius-messages-small); - transition: 0.2s background-color ease-in-out; + color: white; - cursor: var(--custom-cursor, pointer); + transition: 0.2s background-color ease-in-out; &:hover { background-color: rgba(0, 0, 0, 0.15); @@ -85,8 +91,7 @@ } .delete-file { + margin-right: 1rem; font-size: 1.5rem; color: var(--color-text-secondary); - - margin-right: 1rem; } diff --git a/src/components/middle/composer/BotCommandMenu.scss b/src/components/middle/composer/BotCommandMenu.scss index e2fc16edb..5e6087ba7 100644 --- a/src/components/middle/composer/BotCommandMenu.scss +++ b/src/components/middle/composer/BotCommandMenu.scss @@ -1,10 +1,11 @@ .BotCommandMenu { .menu-container { + overflow: auto; + flex-direction: column; + width: calc(100% - 4rem); max-width: 20rem; max-height: 40vh; - overflow: auto; - flex-direction: column; @media (max-width: 600px) { width: calc(100% - 3rem); @@ -15,8 +16,9 @@ > .backdrop { position: absolute; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } diff --git a/src/components/middle/composer/BotKeyboardMenu.scss b/src/components/middle/composer/BotKeyboardMenu.scss index af79b7ce2..8cae8575f 100644 --- a/src/components/middle/composer/BotKeyboardMenu.scss +++ b/src/components/middle/composer/BotKeyboardMenu.scss @@ -8,11 +8,12 @@ } .content { + overflow-y: scroll; display: flex; flex-direction: column; - padding: 0.1875rem 0.625rem; + max-height: 75vh; - overflow-y: scroll; + padding: 0.1875rem 0.625rem; @include mixins.adapt-padding-to-scrollbar(0.625rem); @@ -27,19 +28,22 @@ .Button { flex: 1; + width: auto; height: auto; min-height: 3.0625rem; - border-radius: var(--border-radius-messages-small); border: 2px solid var(--color-primary); - background: var(--color-background); - color: var(--color-primary); + border-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-medium); + color: var(--color-primary); text-transform: none; + background: var(--color-background); + &:hover { - color: #fff; border-color: var(--color-primary-shade); + color: #fff; background: var(--color-primary-shade); } } diff --git a/src/components/middle/composer/ChatCommand.scss b/src/components/middle/composer/ChatCommand.scss index 9bc766f38..8e0986cb0 100644 --- a/src/components/middle/composer/ChatCommand.scss +++ b/src/components/middle/composer/ChatCommand.scss @@ -16,8 +16,8 @@ &.with-avatar { .multiline-item { - padding: 0; display: flex; + padding: 0; } .content-inner { diff --git a/src/components/middle/composer/ChatCommandTooltip.module.scss b/src/components/middle/composer/ChatCommandTooltip.module.scss index e71b15385..95359bef3 100644 --- a/src/components/middle/composer/ChatCommandTooltip.module.scss +++ b/src/components/middle/composer/ChatCommandTooltip.module.scss @@ -1,9 +1,8 @@ .root { + z-index: -1; + flex-direction: column; width: calc(100% - 4rem); max-width: 26rem; - flex-direction: column; - - z-index: -1; @media (max-width: 600px) { width: calc(100% - 3rem); diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.scss b/src/components/middle/composer/ComposerEmbeddedMessage.scss index 82fbb5fa6..0796e5bf7 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.scss +++ b/src/components/middle/composer/ComposerEmbeddedMessage.scss @@ -1,5 +1,6 @@ .ComposerEmbeddedMessage { --accent-color: var(--color-primary); + height: 3.125rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 150ms ease-out, opacity 150ms ease-out; @@ -24,15 +25,19 @@ & .embedded-left-icon { position: relative; + + display: grid; flex-shrink: 0; - background: none !important; + place-content: center; + height: 2.625rem; padding: 0.5625rem 0.75rem 0.5625rem 1rem; - display: grid; - place-content: center; + font-size: 1.5rem; color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { width: 2.875rem; } @@ -40,14 +45,17 @@ & .embedded-cancel { flex-shrink: 0; - background: none !important; + align-self: center; + width: auto; height: 1.5rem; - padding: 0; margin: 0.5625rem 1rem 0.5625rem 0.75rem; - align-self: center; + padding: 0; + color: var(--accent-color, var(--color-primary)); + background: none !important; + @media (max-width: 600px) { margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } @@ -63,8 +71,8 @@ .quote-reply { position: absolute; - right: 0.75rem; top: 0.5rem; + right: 0.75rem; font-size: 0.5rem; @media (max-width: 600px) { diff --git a/src/components/middle/composer/CustomEmojiTooltip.module.scss b/src/components/middle/composer/CustomEmojiTooltip.module.scss index cfcdeb234..85213c3d6 100644 --- a/src/components/middle/composer/CustomEmojiTooltip.module.scss +++ b/src/components/middle/composer/CustomEmojiTooltip.module.scss @@ -1,14 +1,16 @@ .root:global(.composer-tooltip) { - display: flex; - padding: 0; z-index: 1; overflow-x: scroll; overflow-y: hidden; + display: flex; + + padding: 0; .emojiButton { - flex: 0 0 2rem; --custom-emoji-size: 2rem; + + flex: 0 0 2rem; margin: 0.5rem 0 0.5rem 0.25rem; } diff --git a/src/components/middle/composer/CustomSendMenu.scss b/src/components/middle/composer/CustomSendMenu.scss index 8e780975e..20cda208e 100644 --- a/src/components/middle/composer/CustomSendMenu.scss +++ b/src/components/middle/composer/CustomSendMenu.scss @@ -6,8 +6,9 @@ > .backdrop { position: absolute; top: -1rem; - left: auto; right: 0; + left: auto; + width: 3.5rem; } } @@ -22,22 +23,18 @@ &.with-effects .bubble { overflow: initial; - background: none !important; backdrop-filter: none !important; box-shadow: none; } &.with-effects &_items { + padding: 0.25rem 0; + border-radius: var(--border-radius-default); + background: var(--color-background-compact-menu); backdrop-filter: blur(10px); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - padding: 0.25rem 0; - - @media (min-width: 600px) { - margin-inline-end: 2.75rem; - } body.no-menu-blur & { background: var(--color-background); @@ -48,6 +45,10 @@ opacity: 0; transition: 300ms opacity; } + + @media (min-width: 600px) { + margin-inline-end: 2.75rem; + } } .ReactionSelector { diff --git a/src/components/middle/composer/DropArea.scss b/src/components/middle/composer/DropArea.scss index 08820c4bc..6a247b755 100644 --- a/src/components/middle/composer/DropArea.scss +++ b/src/components/middle/composer/DropArea.scss @@ -1,15 +1,16 @@ .DropArea { position: absolute; + z-index: var(--z-drop-area); top: 0; right: 0; left: 0; - height: 100vh; - z-index: var(--z-drop-area); - padding: calc(80px + var(--call-header-height, 0rem)) 20px 20px; display: flex; flex-direction: column; + height: 100vh; + padding: calc(80px + var(--call-header-height, 0rem)) 20px 20px; + #Main.right-column-open & { max-width: calc(100% - var(--right-column-width)); } diff --git a/src/components/middle/composer/DropTarget.scss b/src/components/middle/composer/DropTarget.scss index 5eaf312aa..49fa7ab36 100644 --- a/src/components/middle/composer/DropTarget.scss +++ b/src/components/middle/composer/DropTarget.scss @@ -1,22 +1,21 @@ .DropTarget { - border-radius: var(--border-radius-default); - background: var(--color-background); - padding: 1.25rem; + position: relative; + + display: flex; flex: 1 1 auto; + width: 100%; max-width: 43.75rem; - margin-left: auto; margin-right: auto; margin-bottom: 0.3125rem; + margin-left: auto; + padding: 1.25rem; + border-radius: var(--border-radius-default); - position: relative; - display: flex; color: #a4acb3; - box-shadow: 0 1px 2px var(--color-default-shadow); - @media (max-height: 350px) { - padding: 0.75rem; - } + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); &.hovered { .target-content { @@ -46,12 +45,11 @@ .target-outline { fill: none; - stroke: var(--color-placeholders); - stroke-width: 2; stroke-dasharray: 11, 8; - stroke-linecap: round; stroke-dashoffset: 0; + stroke-linecap: round; + stroke-width: 2; transition: 0.2s stroke; animation: outline 0.5s linear infinite; @@ -60,36 +58,39 @@ .target-content { pointer-events: none; - border-radius: 0.5rem; - flex: 1 1 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - transition: 0.2s color; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + display: flex; + flex: 1 1 100%; + flex-direction: column; + align-items: center; + justify-content: center; + + border-radius: 0.5rem; + + transition: 0.2s color; } .icon { + margin-bottom: 2.25rem; font-size: 6.25rem; line-height: 4.6875rem; - margin-bottom: 2.25rem; @media (max-height: 520px) { + margin-bottom: 1rem; font-size: 4.25rem; line-height: 3.5rem; - margin-bottom: 1rem; } @media (max-height: 450px) { + margin-top: 0.25rem; + margin-bottom: 0.5rem; font-size: 2rem; line-height: 1rem; - margin-bottom: 0.5rem; - margin-top: 0.25rem; } } @@ -112,6 +113,10 @@ } } + @media (max-height: 350px) { + padding: 0.75rem; + } + @keyframes outline { from { stroke-dashoffset: 0; diff --git a/src/components/middle/composer/EmojiButton.scss b/src/components/middle/composer/EmojiButton.scss index 746066f5f..d04b791cc 100644 --- a/src/components/middle/composer/EmojiButton.scss +++ b/src/components/middle/composer/EmojiButton.scss @@ -1,21 +1,21 @@ .EmojiButton { + cursor: var(--custom-cursor, pointer); + display: inline-flex; align-items: center; justify-content: center; + width: 2.25rem; height: 2.25rem; margin: 0.3125rem; border-radius: var(--border-radius-messages-small); - cursor: var(--custom-cursor, pointer); + font-size: 1.875rem; line-height: 2.25rem; background-color: transparent; - transition: background-color 0.15s ease; - @media (max-width: 600px) { - margin: 0.25rem; - } + transition: background-color 0.15s ease; .mac-os-fix & { line-height: inherit; @@ -34,4 +34,8 @@ & > .custom-emoji { --custom-emoji-size: 2rem; } + + @media (max-width: 600px) { + margin: 0.25rem; + } } diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss index de5793de9..93eeb486c 100644 --- a/src/components/middle/composer/EmojiPicker.scss +++ b/src/components/middle/composer/EmojiPicker.scss @@ -7,8 +7,8 @@ height: 100%; &-main { - height: calc(100% - 3rem); overflow-y: auto; + height: calc(100% - 3rem); padding: 0.5rem 0.75rem; @include mixins.adapt-padding-to-scrollbar(0.75rem); @@ -21,10 +21,10 @@ } &-header { - height: 3rem; display: flex; align-items: center; justify-content: space-around; + height: 3rem; &.with-top-border { /* stylelint-disable-next-line plugin/whole-pixel */ @@ -32,14 +32,16 @@ } @media (max-width: 600px) { + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; justify-content: space-between; - white-space: nowrap; + padding: 0.4375rem 0; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -49,19 +51,21 @@ background-color: rgba(0, 0, 0, 0); } + // Spacer to counter last button margin not being accounted in scroll width + &::after { + content: ""; + + display: block; + flex-shrink: 0; + + width: 1px; + height: 1rem; + } + .symbol-set-button { display: inline-flex; vertical-align: middle; } - - // Spacer to counter last button margin not being accounted in scroll width - &::after { - content: ""; - display: block; - flex-shrink: 0; - width: 1px; - height: 1rem; - } } } } diff --git a/src/components/middle/composer/EmojiTooltip.scss b/src/components/middle/composer/EmojiTooltip.scss index 4b9f0bfbc..b57049c9e 100644 --- a/src/components/middle/composer/EmojiTooltip.scss +++ b/src/components/middle/composer/EmojiTooltip.scss @@ -1,9 +1,8 @@ .EmojiTooltip { - display: flex; - padding: 0; - overflow-x: scroll; overflow-y: hidden; + display: flex; + padding: 0; .EmojiButton { flex: 0 0 2.25rem; diff --git a/src/components/middle/composer/GifPicker.scss b/src/components/middle/composer/GifPicker.scss index 3969b04cc..a1f749808 100644 --- a/src/components/middle/composer/GifPicker.scss +++ b/src/components/middle/composer/GifPicker.scss @@ -1,23 +1,25 @@ .GifPicker { + position: relative; + top: 0.1875rem; + + overflow-y: auto; display: grid; - grid-template-columns: repeat(6, 1fr); + grid-auto-flow: dense; grid-auto-rows: 6.25rem; grid-gap: 0.125rem; - grid-auto-flow: dense; + grid-template-columns: repeat(6, 1fr); + height: calc(100% - 0.1875rem); - overflow-y: auto; margin: 0 0.1875rem; padding-bottom: 0.1875rem; border-radius: 1.125rem 1.125rem 0 0; - position: relative; - top: 0.1875rem; .Loading, .picker-disabled { position: absolute; top: 0; + right: 0; bottom: 0; left: 0; - right: 0; } .SymbolMenu.mobile-menu & { diff --git a/src/components/middle/composer/InlineBotTooltip.scss b/src/components/middle/composer/InlineBotTooltip.scss index 2199ac08e..45a200961 100644 --- a/src/components/middle/composer/InlineBotTooltip.scss +++ b/src/components/middle/composer/InlineBotTooltip.scss @@ -5,22 +5,20 @@ } &.gallery { - display: grid; - grid-template-columns: repeat(8, 1fr); - grid-auto-flow: dense; - grid-gap: 1px; - padding: 0; scrollbar-gutter: stable both-edges; - @media (max-width: 600px) { - grid-template-columns: repeat(4, 1fr); - } + display: grid; + grid-auto-flow: dense; + grid-gap: 1px; + grid-template-columns: repeat(8, 1fr); + + padding: 0; .switch-pm { grid-column: 1 / -1; .ListItem-button { - border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } } @@ -37,6 +35,7 @@ position: absolute; top: 0; left: 0; + width: 100% !important; height: 100% !important; @@ -48,6 +47,10 @@ } } } + + @media (max-width: 600px) { + grid-template-columns: repeat(4, 1fr); + } } &:not(.gallery) .GifButton { diff --git a/src/components/middle/composer/MentionTooltip.scss b/src/components/middle/composer/MentionTooltip.scss index ece4b3f59..63a7b3156 100644 --- a/src/components/middle/composer/MentionTooltip.scss +++ b/src/components/middle/composer/MentionTooltip.scss @@ -1,13 +1,8 @@ .MentionTooltip { + z-index: -1; + flex-direction: column; width: calc(100% - 4rem); max-width: 20rem; - flex-direction: column; - - z-index: -1; - - @media (max-width: 600px) { - width: calc(100% - 3rem); - } .ListItem.chat-item-clickable { margin: 0; @@ -19,8 +14,8 @@ } .title { - margin-inline-end: 0.625rem; max-width: 70%; + margin-inline-end: 0.625rem; } .handle { @@ -53,4 +48,8 @@ display: none !important; } } + + @media (max-width: 600px) { + width: calc(100% - 3rem); + } } diff --git a/src/components/middle/composer/PollModal.scss b/src/components/middle/composer/PollModal.scss index 436814079..e6b4a2b3e 100644 --- a/src/components/middle/composer/PollModal.scss +++ b/src/components/middle/composer/PollModal.scss @@ -15,19 +15,20 @@ } .options-header { - color: var(--color-text-secondary); + margin-top: 0.5rem; font-size: 1rem; font-weight: var(--font-weight-medium); - margin-top: 0.5rem; + color: var(--color-text-secondary); } .options-list { + overflow: auto; + overflow-y: scroll; + + max-height: 20rem; margin: 1rem -0.75rem -0.5rem; padding: 0 0.75rem; border-top: 1px solid var(--color-chat-hover); - max-height: 20rem; - overflow: auto; - overflow-y: scroll; @include mixins.adapt-padding-to-scrollbar(0.75rem); @@ -73,9 +74,9 @@ } .poll-error { + margin: -1rem 0 1rem 0.25rem; font-size: smaller; color: var(--color-error); - margin: -1rem 0 1rem 0.25rem; } .input-group:last-child { diff --git a/src/components/middle/composer/SendAsMenu.scss b/src/components/middle/composer/SendAsMenu.scss index b88de88af..ba85e36d5 100644 --- a/src/components/middle/composer/SendAsMenu.scss +++ b/src/components/middle/composer/SendAsMenu.scss @@ -1,18 +1,20 @@ .SendAsMenu { .send-as-title { + margin-block: 0.5rem; + margin-inline-start: 1rem; + font-weight: var(--font-weight-medium); line-height: 1.25rem; overflow-wrap: anywhere; - margin-inline-start: 1rem; - margin-block: 0.5rem; } .menu-container { + overflow: auto; + flex-direction: column; + width: calc(100% - 4rem); max-width: 20rem; max-height: 40vh; - overflow: auto; - flex-direction: column; @media (max-width: 600px) { width: calc(100% - 3rem); @@ -21,11 +23,12 @@ .is-pointer-env & { > .backdrop { - z-index: 2; position: absolute; + z-index: 2; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } @@ -33,32 +36,36 @@ } .SendAsItem { - margin: 0 !important; $border-size: 2px; + margin: 0 !important; + .Avatar.selected { - margin-right: 0.75rem; position: relative; width: calc(2.125rem - #{$border-size * 2}); height: calc(2.125rem - #{$border-size * 2}); + margin-right: 0.75rem; &::before { - display: block; content: ""; + position: absolute; top: #{-$border-size * 2}; left: #{-$border-size * 2}; - border: $border-size solid var(--color-primary); + + display: block; + width: calc(100% + #{$border-size * 4}); height: calc(100% + #{$border-size * 4}); + border: $border-size solid var(--color-primary); border-radius: 50%; } } .ListItem-button { + align-items: center; padding: 0.5625rem 1rem !important; border-radius: 0; - align-items: center; & > .send-as-icon-locked { margin-right: 0.5rem; @@ -71,7 +78,7 @@ .subtitle { font-size: 0.9375rem; - color: var(--color-text-secondary); line-height: 1.3125; + color: var(--color-text-secondary); } } diff --git a/src/components/middle/composer/StickerPicker.module.scss b/src/components/middle/composer/StickerPicker.module.scss index 7db0ef4fd..47c9f8fed 100644 --- a/src/components/middle/composer/StickerPicker.module.scss +++ b/src/components/middle/composer/StickerPicker.module.scss @@ -11,19 +11,19 @@ --symbol-set-gap-size: 0.25rem; position: relative; + + overflow-x: hidden; + overflow-y: auto; + height: 100%; + padding: 0.5rem 0.25rem; + + @include mixins.adapt-padding-to-scrollbar(0.25rem); &.hasHeader { height: calc(100% - 3rem); } - overflow-y: auto; - overflow-x: hidden; - - padding: 0.5rem 0.25rem; - - @include mixins.adapt-padding-to-scrollbar(0.25rem); - &_customEmoji { padding: 0.5rem 0.75rem; @@ -36,14 +36,16 @@ } .header { - height: 3rem; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; - white-space: nowrap; + + height: 3rem; padding: 0 0.375rem; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -56,8 +58,10 @@ // Spacer to counter last button margin not being accounted in scroll width &::after { content: ""; + display: block; flex-shrink: 0; + width: 1px; height: 1rem; } @@ -73,17 +77,16 @@ } :global(.shared-canvas) { - max-width: 1280px; // STICKER_PICKER_MAX_SHARED_COVERS * (STICKER_SIZE_PICKER_HEADER + 10 * 2) z-index: 1; + max-width: 1280px; // STICKER_PICKER_MAX_SHARED_COVERS * (STICKER_SIZE_PICKER_HEADER + 10 * 2) } } .stickerCover { display: inline-grid; - vertical-align: middle; grid-template-areas: "cover"; - justify-content: center; align-items: center; + justify-content: center; width: 2.25rem !important; height: 2.25rem; @@ -91,6 +94,8 @@ padding: 0; border-radius: var(--border-radius-messages-small) !important; + vertical-align: middle; + &:global(.StickerButton) { background-size: 1.875rem; @@ -114,9 +119,10 @@ } .pickerDisabled { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; } diff --git a/src/components/middle/composer/StickerSetCover.module.scss b/src/components/middle/composer/StickerSetCover.module.scss index b0e183d8c..71113742e 100644 --- a/src/components/middle/composer/StickerSetCover.module.scss +++ b/src/components/middle/composer/StickerSetCover.module.scss @@ -2,11 +2,12 @@ --_size: 2rem; --custom-emoji-size: var(--_size); - width: var(--_size); - height: var(--_size); display: flex; align-items: center; justify-content: center; + + width: var(--_size); + height: var(--_size); border-radius: var(--border-radius-messages-small) !important; :global(.AnimatedSticker) { diff --git a/src/components/middle/composer/StickerTooltip.scss b/src/components/middle/composer/StickerTooltip.scss index b9c940d9a..40ca634ce 100644 --- a/src/components/middle/composer/StickerTooltip.scss +++ b/src/components/middle/composer/StickerTooltip.scss @@ -1,7 +1,7 @@ .StickerTooltip { display: grid; - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); grid-auto-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); place-items: center; &.hidden { diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index d0fd9f2cb..326013f9f 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -8,17 +8,19 @@ &.mobile-menu { position: fixed; - left: 0; + z-index: var(--z-symbol-menu-mobile); right: 0; bottom: 0; - background: var(--color-background); - z-index: var(--z-symbol-menu-mobile); + left: 0; + transform: translate3d(0, calc(var(--symbol-menu-height)), 0); - transition: transform var(--layer-transition); padding-right: env(safe-area-inset-right); padding-bottom: 0; padding-left: env(safe-area-inset-left); - transform: translate3d(0, calc(var(--symbol-menu-height)), 0); + + background: var(--color-background); + + transition: transform var(--layer-transition); &.open:not(.in-attachment-modal) { transform: translate3d(0, 0, 0); @@ -52,16 +54,19 @@ } &-footer { - height: var(--symbol-menu-footer-height); + position: relative; + display: flex; align-items: center; justify-content: center; + + height: var(--symbol-menu-footer-height); /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: 0 -0.5px var(--color-borders-alternate); - position: relative; .Button { flex-shrink: 0; + width: 2.125rem !important; height: 2.125rem; margin: 0 0.25rem; @@ -100,15 +105,16 @@ > .backdrop { position: absolute; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } &.attachment-modal-symbol-menu > .backdrop { - bottom: 0; top: auto; + bottom: 0; } } @@ -131,10 +137,13 @@ .bubble { --offset-y: 4rem; - border-radius: 1.25rem; + overflow: hidden; + width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); padding: 0; - overflow: hidden; + border-radius: 1.25rem; + + transition-duration: 200ms !important; body:not(.no-menu-blur) & { background: var(--color-background-compact-menu); @@ -144,8 +153,6 @@ &:not(.open) { transform: scale(0.85) !important; } - - transition-duration: 200ms !important; } .StickerButton.custom-emoji, .sticker-set-cover { @@ -153,18 +160,20 @@ } .picker-disabled { - height: var(--symbol-menu-height); display: flex; align-items: center; justify-content: center; + + height: var(--symbol-menu-height); + color: var(--color-text-secondary); } .symbol-close-button { - display: none; position: absolute; - right: max(0.25rem, env(safe-area-inset-right)); top: max(0.25rem, env(safe-area-inset-top)); + right: max(0.25rem, env(safe-area-inset-right)); + display: none; } @media (orientation: landscape) { @@ -175,10 +184,10 @@ } .symbol-set { - margin-bottom: 0.75rem; position: relative; display: flex; flex-direction: column; + margin-bottom: 0.75rem; &-header { display: flex; @@ -188,48 +197,53 @@ } &-title { + z-index: 1; + + unicode-bidi: plaintext; + overflow: hidden; display: flex; gap: 0.5rem; align-items: center; - font-size: 1rem; - line-height: 1.6875rem; - font-weight: var(--font-weight-medium); margin: 0; padding: 0 0.25rem 0.125rem; - overflow: hidden; - unicode-bidi: plaintext; - z-index: 1; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + line-height: 1.6875rem; &-external { + margin-right: 0.5rem; color: var(--color-text); text-align: start; - margin-right: 0.5rem; } } &-name { overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-align: center; + text-overflow: ellipsis; + white-space: nowrap; } &-amount { + unicode-bidi: plaintext; + font-size: 0.875rem; font-weight: normal; - text-align: left; color: rgba(var(--color-text-secondary-rgb), 0.75); - unicode-bidi: plaintext; + text-align: left; white-space: nowrap; } &-chat { - background-color: var(--color-text-secondary); - color: var(--color-background); - border-radius: 1rem; padding-inline: 0.25rem; + border-radius: 1rem; + + color: var(--color-background); white-space: nowrap; + + background-color: var(--color-text-secondary); } &-add-button { @@ -237,12 +251,16 @@ } &-remove { - right: 0; - position: absolute; - font-size: 1rem; cursor: var(--custom-cursor, pointer); - border-radius: 50%; + + position: absolute; + right: 0; + padding: 0.25rem; + border-radius: 50%; + + font-size: 1rem; + transition: background-color 0.15s; &:active, @@ -259,6 +277,7 @@ &-button { flex-shrink: 0; + width: 2.125rem !important; height: 2.125rem; margin: 0 0.25rem; @@ -276,15 +295,12 @@ .symbol-set-container { display: grid !important; - justify-content: space-between; grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem)); row-gap: 0.25rem; column-gap: var(--symbol-set-gap-size, 0.625rem); - text-align: initial; + justify-content: space-between; - @media (max-width: 600px) { - grid-gap: 0.5rem; - } + text-align: initial; &:not(.shown) { display: block; @@ -298,4 +314,8 @@ > .StickerButton { margin: 0; } + + @media (max-width: 600px) { + grid-gap: 0.5rem; + } } diff --git a/src/components/middle/composer/TextFormatter.scss b/src/components/middle/composer/TextFormatter.scss index 257a34471..5c620aba7 100644 --- a/src/components/middle/composer/TextFormatter.scss +++ b/src/components/middle/composer/TextFormatter.scss @@ -1,37 +1,44 @@ .TextFormatter { - transform: translate(-50%, -3.25rem); z-index: 1; + transform: translate(-50%, -3.25rem); &, &-link-control { position: absolute; - background: var(--color-background); - border-radius: var(--border-radius-messages); + padding: 0.5rem 0.375rem; + border-radius: var(--border-radius-messages); + + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); } &-link-control { - left: 0; - top: 0; - opacity: 0; pointer-events: none; + + top: 0; + left: 0; + + opacity: 0; + transition: opacity 0.3s ease; .Modal & { max-width: 100%; } - @media (max-width: 600px) { - max-width: calc(100vw - var(--text-formatter-left) + 3rem); + input { + width: 100%; + border: none !important; + + color: var(--color-text); + + background-color: var(--color-background); + outline: none !important; } - input { - border: none !important; - outline: none !important; - width: 100%; - color: var(--color-text); - background-color: var(--color-background); + @media (max-width: 600px) { + max-width: calc(100vw - var(--text-formatter-left) + 3rem); } } @@ -50,24 +57,25 @@ } &-link-url-input-wrapper { - width: 20rem; position: relative; + width: 20rem; max-width: 100%; - @media (max-width: 600px) { - max-width: 90vw; - } - &::before, &::after { content: ""; - display: block; + position: absolute; + z-index: 2; top: 0; bottom: 0; + + display: block; + width: 1rem; - z-index: 2; + opacity: 0; + transition: opacity 0.2s ease; } @@ -92,6 +100,10 @@ opacity: 1; } } + + @media (max-width: 600px) { + max-width: 90vw; + } } &-link-url-confirm { @@ -106,29 +118,32 @@ &.link-control-shown { .TextFormatter-link-control { - opacity: 1; pointer-events: auto; + opacity: 1; } } .Button { - width: 2rem; - height: 2rem; - padding: 0.25rem; - font-size: 1.5rem; - margin: 0 0.125rem; - border-radius: var(--border-radius-messages-small); - flex-shrink: 0; cursor: var(--custom-cursor, pointer); + flex-shrink: 0; + + width: 2rem; + height: 2rem; + margin: 0 0.125rem; + padding: 0.25rem; + border-radius: var(--border-radius-messages-small); + + font-size: 1.5rem; + &.active { - background-color: var(--color-primary) !important; color: white; + background-color: var(--color-primary) !important; } &.disabled { - opacity: 0.5; pointer-events: none; + opacity: 0.5; } } } diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss index ccc89d956..ac1784c3d 100644 --- a/src/components/middle/composer/WebPagePreview.scss +++ b/src/components/middle/composer/WebPagePreview.scss @@ -1,5 +1,6 @@ .WebPagePreview { --accent-color: var(--color-primary); + position: relative; height: 3.125rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ @@ -19,9 +20,9 @@ // TODO Remove duplication with `.ComposerEmbeddedMessage` &_inner { - padding-top: 0.5rem; display: flex; align-items: center; + padding-top: 0.5rem; } .ComposerEmbeddedMessage + & { @@ -39,15 +40,18 @@ } & &-left-icon { + display: grid; flex-shrink: 0; - background: none !important; + place-content: center; + height: 2.625rem; padding: 0.5625rem 0.75rem 0.5625rem 1rem; - display: grid; - place-content: center; + font-size: 1.5rem; color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { width: 2.875rem; } @@ -55,23 +59,26 @@ & &-clear { flex-shrink: 0; - background: none !important; + align-self: center; + width: auto; height: 1.5rem; - padding: 0; margin: 0.5625rem 1rem 0.5625rem 0.75rem; - align-self: center; + padding: 0; + color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } } .WebPage { + overflow: hidden; flex-grow: 1; max-width: calc(100% - 3.375rem); - overflow: hidden; &.with-video .media-inner { display: none; @@ -80,13 +87,14 @@ .site-title, .site-name, .site-description { + overflow: hidden; flex: 1; + max-width: 100%; max-height: 1rem; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .site-title { diff --git a/src/components/middle/composer/inlineResults/BaseResult.scss b/src/components/middle/composer/inlineResults/BaseResult.scss index 6bac32ec6..e6fff9832 100644 --- a/src/components/middle/composer/inlineResults/BaseResult.scss +++ b/src/components/middle/composer/inlineResults/BaseResult.scss @@ -2,18 +2,21 @@ padding-bottom: 0.5rem; .thumb { - background-color: var(--color-background-secondary); - flex: 0 0 3rem; - width: 3rem; - height: 3rem; - line-height: 3rem; - border-radius: var(--border-radius-default-tiny); + overflow: hidden; display: inline-flex; + flex: 0 0 3rem; align-content: center; justify-content: center; + + width: 3rem; + height: 3rem; margin-inline-end: 0.5rem; - overflow: hidden; + border-radius: var(--border-radius-default-tiny); + font-size: 1.5rem; + line-height: 3rem; + + background-color: var(--color-background-secondary); img:not(.emoji) { width: 100%; @@ -32,20 +35,21 @@ } .title { + unicode-bidi: plaintext; font-weight: var(--font-weight-medium); text-align: left; - unicode-bidi: plaintext; } .description { - white-space: normal; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; unicode-bidi: plaintext; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + text-align: left; + text-overflow: ellipsis; + white-space: normal; } &[dir="rtl"] .title, &[dir="rtl"] .description { diff --git a/src/components/middle/composer/inlineResults/MediaResult.scss b/src/components/middle/composer/inlineResults/MediaResult.scss index 3a8d6b4e7..35a9adc9a 100644 --- a/src/components/middle/composer/inlineResults/MediaResult.scss +++ b/src/components/middle/composer/inlineResults/MediaResult.scss @@ -1,16 +1,21 @@ .MediaResult { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + height: 0; padding-bottom: 100%; - overflow: hidden; - position: relative; - cursor: var(--custom-cursor, pointer); img { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } } diff --git a/src/components/middle/composer/inlineResults/StickerResult.scss b/src/components/middle/composer/inlineResults/StickerResult.scss index ff994fb98..2ede1f409 100644 --- a/src/components/middle/composer/inlineResults/StickerResult.scss +++ b/src/components/middle/composer/inlineResults/StickerResult.scss @@ -1,12 +1,17 @@ .StickerResult { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + height: 0; padding-bottom: 100%; - overflow: hidden; + background: transparent no-repeat center; background-size: contain; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.15s ease, opacity 0.3s ease !important; - position: relative; .AnimatedSticker, img, @@ -14,6 +19,7 @@ position: absolute; top: 0; left: 0; + width: 100% !important; height: 100% !important; } diff --git a/src/components/middle/message/ActionMessage.module.scss b/src/components/middle/message/ActionMessage.module.scss index c61d40e49..226f0cf9f 100644 --- a/src/components/middle/message/ActionMessage.module.scss +++ b/src/components/middle/message/ActionMessage.module.scss @@ -8,38 +8,42 @@ overflow-wrap: anywhere; :global(.star-amount-icon) { - vertical-align: text-bottom; margin-inline: 0 !important; + vertical-align: text-bottom; } } .contentBox { + position: relative; + z-index: 0; + display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; - max-width: 15rem; + align-items: center; + max-width: 15rem; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-messages); - background-color: var(--action-message-bg); color: white; - position: relative; - z-index: 0; + background-color: var(--action-message-bg); } .textContent { - display: inline-block; - padding: 0.1875rem 0.5rem; - background-color: var(--action-message-bg); - color: white; - border-radius: var(--border-radius-messages); - max-width: 100%; - position: relative; z-index: 0; + + display: inline-block; + + max-width: 100%; + padding: 0.1875rem 0.5rem; + border-radius: var(--border-radius-messages); + + color: white; + + background-color: var(--action-message-bg); } .hasFullContent { @@ -83,17 +87,20 @@ // These two elements should align perfectly .fluidBackground, .textContent { display: inline; - text-wrap: pretty; + padding: 0.1875rem 0.5rem; - box-decoration-break: clone; border-radius: var(--border-radius-messages); + + text-wrap: pretty; + + box-decoration-break: clone; } .fluidBackground { pointer-events: none; + color: black; // Solid color for filter background-color: black; - color: black; } .textContent { @@ -102,8 +109,8 @@ } .info { - font-size: 0.9375rem; position: relative; + font-size: 0.9375rem; } .stickerWrapper { @@ -123,16 +130,21 @@ } .actionButton { - position: relative; - display: inline-block; - border-radius: 1.25rem; - padding: 0.5rem 1.25rem; - background-color: var(--action-message-bg); - font-weight: var(--font-weight-semibold); - transition: opacity 0.15s; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: inline-block; + + padding: 0.5rem 1.25rem; + border-radius: 1.25rem; + + font-weight: var(--font-weight-semibold); + + background-color: var(--action-message-bg); + + transition: opacity 0.15s; + &:hover, &:focus { opacity: 0.8; @@ -158,11 +170,14 @@ &::before { content: ""; + position: absolute; - inset: -0.25rem; - background: var(--action-message-bg); - border-radius: calc(var(--border-radius-messages) + 0.25rem); z-index: -1; + inset: -0.25rem; + + border-radius: calc(var(--border-radius-messages) + 0.25rem); + + background: var(--action-message-bg); } } @@ -175,8 +190,7 @@ .uniqueBackground { position: absolute; - inset: 0; - top: -6rem; + inset: -6rem 0 0 0; } .uniqueValue { diff --git a/src/components/middle/message/BaseStory.module.scss b/src/components/middle/message/BaseStory.module.scss index bf44585e8..99fed2775 100644 --- a/src/components/middle/message/BaseStory.module.scss +++ b/src/components/middle/message/BaseStory.module.scss @@ -1,12 +1,15 @@ .root { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: block !important; + width: 12rem; height: 0; // Aspect-ratio trick https://css-tricks.com/aspect-ratio-boxes/ (192:344) padding-bottom: 179%; - overflow: hidden; - position: relative; - cursor: var(--custom-cursor, pointer); } .preview { @@ -29,6 +32,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 75%; } @@ -47,8 +51,8 @@ } .expiredIcon { + margin-inline-start: 0.3125rem; font-size: 1.25rem; line-height: 0.9375rem; vertical-align: -0.1875rem; - margin-inline-start: 0.3125rem; } diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 78ebdc9a5..53414e8fc 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -2,23 +2,28 @@ --background-color: var(--color-background); --hover-color: var(--color-chat-hover); + cursor: var(--custom-cursor, pointer); + user-select: none; + display: flex; - width: 100%; align-items: center; + + width: 100%; padding: 0.5rem 0.25rem 0.5rem 0.625rem; padding-inline-start: 0.625rem; padding-inline-end: 0.25rem; - background: var(--background-color); border-bottom-right-radius: var(--border-bottom-right-radius); border-bottom-left-radius: var(--border-bottom-left-radius); + font-size: 0.9375rem; font-weight: var(--font-weight-medium); line-height: 2.125rem; color: var(--accent-color); white-space: nowrap; - cursor: var(--custom-cursor, pointer); + + background: var(--background-color); + transition: background-color 0.15s, color 0.15s; - user-select: none; .label { overflow: hidden; @@ -27,15 +32,20 @@ .Message .has-appendix &::before { content: ""; - display: block; + position: absolute; bottom: -0.1875rem; left: -0.5625rem; + + display: block; + width: 0.5625rem; height: 1.25rem; - background-position: bottom left; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); + opacity: 0; + background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); + background-position: bottom left; + transition: opacity 0.15s, filter 0.15s; .theme-dark #root & { @@ -46,26 +56,41 @@ .custom-shape & { position: absolute; right: -3rem; - width: 2.25rem; bottom: 3rem; - height: 3.375rem; - border-radius: 1.375rem; - padding: 0.375rem; + align-items: flex-start; + + width: 2.25rem; + height: 3.375rem; + padding: 0.375rem; + border-radius: 1.375rem; + color: white; + + opacity: 0; background-color: var(--pattern-color); + transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; + + &::after { + content: attr(data-cnt); + + position: absolute; + bottom: -0.0625rem; + left: 0; + + display: block; + + width: 100%; + + font-size: 0.75rem; + text-align: center; + } + .no-action-button & { bottom: 0; } - opacity: 0; - transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; - - @media (pointer: coarse) { - opacity: 1 !important; - } - &:hover { background-color: var(--pattern-color); backdrop-filter: brightness(115%); @@ -79,17 +104,6 @@ opacity: 1; } - &::after { - content: attr(data-cnt); - position: absolute; - bottom: -0.0625rem; - left: 0; - width: 100%; - text-align: center; - font-size: 0.75rem; - display: block; - } - &[data-cnt="0"] { height: 2.25rem; &::after { @@ -99,8 +113,8 @@ .icon-comments-sticker { display: block; - font-size: 1.5rem; margin: 0 auto; + font-size: 1.5rem; } .recent-repliers, @@ -109,22 +123,26 @@ .CommentButton_icon-open { display: none; } + + @media (pointer: coarse) { + opacity: 1 !important; + } } &.as-action-button { position: static; background-color: transparent; - &:hover { - background-color: rgba(255, 255, 255, 0.08); - backdrop-filter: none; - filter: none; - } - &::after { top: 1.5rem; bottom: auto; } + + &:hover { + background-color: rgba(255, 255, 255, 0.08); + filter: none; + backdrop-filter: none; + } } &:hover { @@ -175,9 +193,9 @@ } .icon-comments { + margin-inline-end: 0.875rem; font-size: 1.5625rem; line-height: 2rem; - margin-inline-end: 0.875rem; } .CommentButton_icon-open { @@ -188,16 +206,18 @@ .recent-repliers { display: inline-flex; align-items: center; - margin-inline-end: 0.5rem; margin-inline-start: -0.125rem; + margin-inline-end: 0.5rem; .Avatar { + z-index: 3; + + overflow: hidden; + + margin-inline-end: 0; + border: 2px solid var(--color-background); /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: border 0.15s; - border: 2px solid var(--color-background); - margin-inline-end: 0; - z-index: 3; - overflow: hidden; .emoji { width: 1rem; @@ -223,18 +243,21 @@ &::after { content: ""; + display: inline-block; + width: 0.5rem; height: 0.5rem; - border-radius: 50%; - background: var(--accent-color); margin-inline-start: 0.75rem; + border-radius: 50%; + + background: var(--accent-color); } } &.disabled { - cursor: var(--custom-cursor, default); pointer-events: none; + cursor: var(--custom-cursor, default); } } @@ -247,10 +270,11 @@ } .CommentButton_loading { - position: absolute; --spinner-size: 1.5rem; - flex-shrink: 0; + + position: absolute; right: 0.5rem; + flex-shrink: 0; .CommentButton-custom-shape & { right: 0; @@ -259,12 +283,12 @@ .CommentButton_right { position: relative; - margin-inline-start: auto; - height: 1.5rem; width: 2.5rem; + height: 1.5rem; + margin-inline-start: auto; } .CommentButton_hidden { - opacity: 0; transform: scale(0.4); + opacity: 0; } diff --git a/src/components/middle/message/Contact.module.scss b/src/components/middle/message/Contact.module.scss index 73bf407d2..02135a537 100644 --- a/src/components/middle/message/Contact.module.scss +++ b/src/components/middle/message/Contact.module.scss @@ -5,9 +5,9 @@ } .info-container { + cursor: var(--custom-cursor, pointer); display: flex; padding: 0.5rem 1.5rem 0.5rem 0.125rem; - cursor: var(--custom-cursor, pointer); } .info { @@ -18,9 +18,9 @@ } .name { + max-width: 12.5rem; font-size: 1rem; font-weight: var(--font-weight-medium); - max-width: 12.5rem; } .phone { @@ -30,8 +30,8 @@ .name, .phone { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .divider { @@ -44,20 +44,25 @@ display: flex; .button { - width: auto; - flex: 1; - height: 2rem; - font-weight: var(--font-weight-medium); - background-color: transparent; - color: var(--accent-color); --ripple-color: var(--accent-background-active-color); + + flex: 1; + + width: auto; + height: 2rem; + + font-weight: var(--font-weight-medium); + color: var(--accent-color); + opacity: 1; + background-color: transparent; + transition: 0.25s ease-in-out opacity; &:not(.disabled):not(:disabled):hover { color: var(--accent-color); - background-color: transparent; opacity: 0.75; + background-color: transparent; } } } diff --git a/src/components/middle/message/FactCheck.module.scss b/src/components/middle/message/FactCheck.module.scss index f20d28713..f5a16f506 100644 --- a/src/components/middle/message/FactCheck.module.scss +++ b/src/components/middle/message/FactCheck.module.scss @@ -2,8 +2,8 @@ .root { margin-top: 0.5rem; - font-size: 0.875rem; padding-block: 0.25rem; + font-size: 0.875rem; } .title { @@ -35,15 +35,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 { diff --git a/src/components/middle/message/Game.scss b/src/components/middle/message/Game.scss index 4e2f62fef..755ae1eb1 100644 --- a/src/components/middle/message/Game.scss +++ b/src/components/middle/message/Game.scss @@ -4,28 +4,32 @@ } .description { - line-height: 1.2; margin-bottom: 0.75rem; + line-height: 1.2; } .preview { - position: relative; - max-width: 100%; - margin-bottom: 0.25rem; - margin-top: 0.25rem; cursor: var(--custom-cursor, pointer); + + position: relative; + + max-width: 100%; + margin-top: 0.25rem; + margin-bottom: 0.25rem; } .preview-content { position: absolute; top: 0; left: 0; + + overflow: hidden; + width: 100%; height: 100%; + border-radius: 0.5rem; object-fit: cover; - border-radius: 0.5rem; - overflow: hidden; } .skeleton { diff --git a/src/components/middle/message/Giveaway.module.scss b/src/components/middle/message/Giveaway.module.scss index 3e7de5e1f..8d1c1b49f 100644 --- a/src/components/middle/message/Giveaway.module.scss +++ b/src/components/middle/message/Giveaway.module.scss @@ -26,41 +26,44 @@ left: 50%; transform: translateX(-50%); - background-color: var(--color-primary); - color: white; - border-radius: 1rem; padding: 0.0625rem 0.5rem; border: 1px solid var(--background-color); + border-radius: 1rem; + line-height: 1.25; + color: white; + + background-color: var(--color-primary); :global(.theme-dark .own) & { - background-color: var(--color-text); color: var(--background-color); + background-color: var(--color-text); } } .section { - margin-bottom: 1rem; max-width: 100%; + margin-bottom: 1rem; } .description { - line-height: 1.25; margin-bottom: 0; + line-height: 1.25; } .peers { display: flex; flex-wrap: wrap; - justify-content: center; - align-items: center; gap: 0.5rem; + align-items: center; + justify-content: center; + margin-block: 0.25rem; } .peer { - background-color: var(--accent-background-color); color: var(--accent-color); + background-color: var(--accent-background-color); &:hover, &:active, &:focus { background-color: var(--accent-background-active-color); @@ -78,8 +81,8 @@ .separator { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; } .separator::before, diff --git a/src/components/middle/message/InlineButtons.scss b/src/components/middle/message/InlineButtons.scss index b2bcd7e3d..1bf50692a 100644 --- a/src/components/middle/message/InlineButtons.scss +++ b/src/components/middle/message/InlineButtons.scss @@ -11,12 +11,16 @@ .Button { flex: 1; + width: auto; margin: 0.125rem; - background: var(--pattern-color); border-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-medium); text-transform: none; + + background: var(--pattern-color); + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms; &:hover, @@ -38,17 +42,19 @@ } .corner-icon { - font-size: 0.875rem; position: absolute; - right: 0.1875rem; top: 0.1875rem; + right: 0.1875rem; + display: block; + font-size: 0.875rem; + &.icon-arrow-right { - font-size: 0.75rem; top: 0.125rem; right: 0.125rem; transform: rotate(-45deg); + font-size: 0.75rem; } } } diff --git a/src/components/middle/message/Invoice.scss b/src/components/middle/message/Invoice.scss index 89b90ab01..582197e99 100644 --- a/src/components/middle/message/Invoice.scss +++ b/src/components/middle/message/Invoice.scss @@ -1,8 +1,8 @@ .Invoice { .title { - color: var(--accent-color); - font-weight: var(--font-weight-medium); margin-bottom: 0; + font-weight: var(--font-weight-medium); + color: var(--accent-color); } .info { @@ -30,12 +30,14 @@ .invoice-image { position: relative; + width: 100%; max-width: 100%; max-height: 30rem; - object-fit: cover; - border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--border-bottom-right-radius); + border-bottom-left-radius: var(--border-bottom-left-radius); + + object-fit: cover; .forwarded-message & { border-top-left-radius: var(--border-top-left-radius); @@ -46,12 +48,15 @@ .description-text { position: absolute; top: 0; - padding: 0.25rem 0.5rem; + margin: 0.25rem; - background-color: rgba(0, 0, 0, 0.4); + padding: 0.25rem 0.5rem; border-radius: var(--border-radius-messages-small); - color: var(--color-white); + font-weight: var(--font-weight-medium); + color: var(--color-white); + + background-color: rgba(0, 0, 0, 0.4); } } @@ -76,8 +81,10 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + object-fit: cover; } } diff --git a/src/components/middle/message/InvoiceMediaPreview.module.scss b/src/components/middle/message/InvoiceMediaPreview.module.scss index 463e71c0d..8967788b2 100644 --- a/src/components/middle/message/InvoiceMediaPreview.module.scss +++ b/src/components/middle/message/InvoiceMediaPreview.module.scss @@ -1,44 +1,45 @@ .root { + cursor: var(--custom-cursor, pointer); position: relative; z-index: 0; - overflow: hidden; - cursor: var(--custom-cursor, pointer); } .duration { - z-index: 2; position: absolute; + z-index: 2; top: 0.25rem; left: 0.25rem; - white-space: nowrap; - font-size: 0.75rem; padding: 0 0.375rem; + border-radius: 0.5rem; + + font-size: 0.75rem; + color: #FFFFFF; + white-space: nowrap; background-color: rgba(0, 0, 0, 0.3); - color: #FFFFFF; - border-radius: 0.5rem; } .buy { - display: flex; - align-items: center; - gap: 0.375rem; - - z-index: 2; position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + display: flex; + gap: 0.375rem; + align-items: center; + padding: 0.5rem 0.875rem; + border-radius: 1rem; + + line-height: 1rem; + color: #FFFFFF; + white-space: nowrap; background-color: rgba(0, 0, 0, 0.75); - color: #FFFFFF; - border-radius: 1rem; - white-space: nowrap; - line-height: 1rem; } .spoiler { diff --git a/src/components/middle/message/Location.scss b/src/components/middle/message/Location.scss index bcc3f88fa..08df039e8 100644 --- a/src/components/middle/message/Location.scss +++ b/src/components/middle/message/Location.scss @@ -8,6 +8,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + border-radius: 50%; animation: accuracy-wave 5s ease-out infinite forwards; @@ -34,8 +35,8 @@ } .map-wrapper { - overflow: hidden; position: relative; + overflow: hidden; } .map { @@ -43,30 +44,33 @@ } .pin { + + --pin-color: var(--color-primary); + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); - animation: fade-in 0.3s forwards; - --pin-color: var(--color-primary); + animation: fade-in 0.3s forwards; } .geoLive { &::before { content: ""; + position: absolute; + z-index: 3; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 1rem; height: 1rem; - - background: var(--color-primary); border: 2px solid white; border-radius: 50%; - z-index: 3; + + background: var(--color-primary); } .round-pin { @@ -76,37 +80,41 @@ .direction { position: absolute; + z-index: 2; top: 50%; left: 50%; - transition: transform 0.3s ease-out; - transform: translate(-50%, 0.3125rem) rotate(var(--direction)); transform-origin: bottom; + transform: translate(-50%, 0.3125rem) rotate(var(--direction)); + width: 1.5rem; height: 2rem; - clip-path: polygon(50% 100%, 0 0, 100% 0); - background: radial-gradient(circle, var(--color-primary) -100%, transparent 100%); border-radius: 40%; - z-index: 2; + + background: radial-gradient(circle, var(--color-primary) -100%, transparent 100%); + clip-path: polygon(50% 100%, 0 0, 100% 0); + + transition: transform 0.3s ease-out; } .location-avatar { position: relative; + z-index: 5; + overflow: hidden; + margin-right: 0; margin-bottom: 1.3125rem; - - z-index: 5; } .venue-icon { position: absolute; + z-index: 5; bottom: -0.5rem; left: 50%; transform: translate(-50%, -50%); + width: 3rem; height: 3rem; - - z-index: 5; } .venue, @@ -124,44 +132,48 @@ .location-avatar::after { content: ""; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + background-color: rgba(255, 255, 255, 0.3); } } .round-pin { - fill: var(--pin-color); - position: absolute; - left: 50%; + z-index: 4; bottom: 0; + left: 50%; transform: translate(-50%, 0); + width: 5rem; - z-index: 4; + fill: var(--pin-color); } .location-info { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; + width: 100%; padding: 0.3125rem 0.5rem 0.25rem; &-title { - font-weight: var(--font-weight-medium); grid-area: 1 / 1 / 2 / 2; + font-weight: var(--font-weight-medium); } &-subtitle { - color: var(--color-text-secondary); - line-height: 1.25; - font-size: 0.875rem; grid-area: 2 / 1 / 2 / 2; + font-size: 0.875rem; + line-height: 1.25; + color: var(--color-text-secondary); .Message.own & { color: var(--color-message-meta-own); @@ -170,30 +182,33 @@ } .geo-countdown { - grid-area: 1 / 2 / 3 / 3; position: relative; + grid-area: 1 / 2 / 3 / 3; width: 2rem; height: 2rem; } .geo-countdown-text { - color: var(--accent-color); position: absolute; top: 50%; left: 0; transform: translateY(-50%); + + width: 100%; + font-size: 0.875rem; font-weight: var(--font-weight-medium); line-height: 1; - width: 100%; + color: var(--accent-color); text-align: center; } .geo-countdown-progress { - stroke: var(--accent-color); fill: transparent; - stroke-width: 2; + stroke: var(--accent-color); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 2s, stroke 0.2s; } } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 0d9efc18a..4938f32d4 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -2,10 +2,6 @@ // General styles .Message { - display: flex; - align-items: flex-end; - margin-bottom: 0.375rem; - position: relative; --background-color: var(--color-background); --hover-color: var(--color-reply-hover); @@ -30,6 +26,11 @@ --border-bottom-left-radius: var(--border-radius-messages); --border-bottom-right-radius: var(--border-radius-messages); + position: relative; + display: flex; + align-items: flex-end; + margin-bottom: 0.375rem; + .theme-dark & { --color-reaction: rgb(255, 255, 255, 0.1); --hover-color-reaction: rgb(255, 255, 255, 0.2); @@ -39,14 +40,6 @@ --hover-color-reaction-chosen: #4096ec; } - @media (min-width: 1921px) { - --max-width: calc(30vw - 1rem); - } - - @media (max-width: 600px) { - margin-bottom: 0.25rem; - } - &.is-swiped { transform: translateX(-2.5rem) !important; } @@ -57,8 +50,8 @@ > .Avatar, > .message-content-wrapper { - opacity: 1; transform: scale(1) translateX(0); + opacity: 1; transition: transform var(--select-transition); body.no-page-transitions & { @@ -70,7 +63,6 @@ position: absolute; bottom: 0; left: 0; - margin-right: 0.3125rem; } @@ -78,25 +70,29 @@ --custom-emoji-size: 1.75rem; cursor: var(--custom-cursor, pointer); + position: absolute; + z-index: 1; right: -0.875rem; bottom: -0.5rem; + transform: scale(0.7); + display: flex; align-items: center; justify-content: center; - transform: scale(0.7); + opacity: 0; + transition: transform 0.2s ease-out, opacity 0.2s ease-out; transition-delay: 0.2s; - z-index: 1; &.visible { opacity: 1 !important; } &:hover { - transition-delay: unset; transform: scale(1); + transition-delay: unset; } } @@ -157,15 +153,6 @@ padding-left: 0; } - @media (max-width: 600px) { - padding-left: 2.875rem; - - .no-avatars &, - &.is-thread-top { - padding-left: 0.25rem; - } - } - &.first-in-group:not(.last-in-group) { --border-bottom-left-radius: var(--border-radius-messages-small); } @@ -186,10 +173,18 @@ --border-bottom-left-radius: 0; } } + + @media (max-width: 600px) { + padding-left: 2.875rem; + + .no-avatars &, + &.is-thread-top { + padding-left: 0.25rem; + } + } } &.own { - flex-direction: row-reverse; --background-color: var(--color-background-own); --hover-color: var(--color-reply-own-hover); --color-reaction: var(--color-message-reaction-own); @@ -211,6 +206,8 @@ --color-voice-transcribe: var(--color-voice-transcribe-button-own); --thumbs-background: var(--color-background-own); + flex-direction: row-reverse; + .theme-dark & { --color-reaction: rgb(255, 255, 255, 0.1); --hover-color-reaction: rgb(255, 255, 255, 0.2); @@ -221,10 +218,6 @@ --text-color-reaction-chosen: rgb(62, 62, 62); } - @media (min-width: 1921px) { - --max-width: 30vw; - } - body.is-ios &, body.is-macos & { --color-background-own: var(--color-background-own-apple); @@ -232,10 +225,6 @@ --color-reply-own-active: var(--color-reply-own-active-apple); } - @media (max-width: 600px) { - padding-right: 0.25rem; - } - &.first-in-group:not(.last-in-group) { --border-bottom-right-radius: var(--border-radius-messages-small); } @@ -254,18 +243,27 @@ .message-content.has-appendix { --border-bottom-right-radius: 0; + border-bottom-right-radius: 0; } } + + @media (min-width: 1921px) { + --max-width: 30vw; + } + + @media (max-width: 600px) { + padding-right: 0.25rem; + } } &.is-deleting { > .Avatar, > .message-content-wrapper { - transition: opacity 0.2s ease, transform 0.2s ease-in; - opacity: 0; - transform: scale(0.3) translateX(var(--deleting-translate-x)); transform-origin: bottom; + transform: scale(0.3) translateX(var(--deleting-translate-x)); + opacity: 0; + transition: opacity 0.2s ease, transform 0.2s ease-in; } } @@ -277,26 +275,31 @@ --background-color: var(--pattern-color); .message-content-wrapper { - margin-left: auto; margin-right: auto; + margin-left: auto; } .action-message-story-mention { - background-color: var(--background-color); - color: white; - font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); - padding: 0.75rem 0.5rem; - border-radius: var(--border-radius-messages); - overflow-wrap: anywhere; - text-align: center; user-select: none; + position: relative; z-index: 0; + display: inline-flex; flex-direction: column; - max-width: 9.625rem; align-items: center; + max-width: 9.625rem; + padding: 0.75rem 0.5rem; + border-radius: var(--border-radius-messages); + + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); + color: white; + text-align: center; + overflow-wrap: anywhere; + + background-color: var(--background-color); + body.is-ios &, body.is-macos & { font-size: calc(var(--message-text-size, 1rem) - 0.125rem); @@ -304,27 +307,31 @@ } &.with-preview { - padding: 1.25rem 0.5rem 0.75rem; cursor: var(--custom-cursor, pointer); + padding: 1.25rem 0.5rem 0.75rem; } &.with-preview::before { content: ''; + position: absolute; - left: 50%; top: 1rem; + left: 50%; transform: translateX(-50%); + width: 6rem; height: 6rem; + padding: 0.0625rem; border-radius: 50%; - padding: 0.0625rem; + background: rgba(255, 255, 255, 0.3); /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: 0 0 0 0.03125rem rgba(255, 255, 255, 0.3); - background: rgba(255, 255, 255, 0.3); + mask: linear-gradient(to bottom, #fff 0%, #fff 100%) content-box, linear-gradient(to bottom, #fff 0%, #fff 100%); + mask-composite: exclude; } @@ -341,20 +348,23 @@ } .story-media-wrapper { + overflow: hidden; + width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; border-radius: 50%; - overflow: hidden; } .story-media { - object-fit: cover; - width: 100%; - height: auto; position: relative; top: 50%; transform: translateY(-50%); + + width: 100%; + height: auto; + + object-fit: cover; } .story-title { @@ -365,10 +375,6 @@ .select-mode-active & { cursor: var(--custom-cursor, pointer); - @media (min-width: 600px) { - user-select: none; - } - &:not(.own) { > .Avatar, > .message-content-wrapper { @@ -378,12 +384,13 @@ &:not(.is-album)::after { content: ""; + position: absolute; + z-index: var(--z-message-select-area); top: -0.25rem; + right: -4rem; bottom: -0.25rem; left: -4rem; - right: -4rem; - z-index: var(--z-message-select-area); } &.is-album, @@ -396,6 +403,10 @@ .message-select-control { opacity: 1; } + + @media (min-width: 600px) { + user-select: none; + } } &.is-selected { @@ -429,8 +440,8 @@ } .Audio .message-select-control { - left: 1.0625rem; top: 1.375rem; + left: 1.0625rem; } html.theme-dark &.own .Audio .toggle-play:not(.with-image) + .media-loading { @@ -450,9 +461,9 @@ .message-select-control { position: absolute; + z-index: 2; top: 2rem; left: 2rem; - z-index: 2; } } @@ -521,9 +532,9 @@ } .message-content { - box-shadow: none; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; + box-shadow: none; } .forwarded-message::before { @@ -539,8 +550,8 @@ } .message-content { - border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; } } @@ -552,12 +563,15 @@ &::after { content: ""; + + position: absolute; + width: 1.25rem; height: 1.25rem; - border-radius: 0.6875rem; - background: white; border: 0.125rem rgba(0, 0, 0, 0.2) solid; - position: absolute; + border-radius: 0.6875rem; + + background: white; } } } @@ -567,12 +581,12 @@ .Audio:not(.audio-is-selected), .File:not(.file-is-selected) { .message-select-control:not(.group-select) { - background: var(--background-color); border-color: var(--background-color); + background: var(--background-color); &::after { - background: var(--background-color); border-color: var(--color-message-meta-own); + background: var(--background-color); } } } @@ -591,6 +605,7 @@ &.own { .message-content { --background-color: var(--color-background-own-selected); + background: var(--color-background-own-selected); } } @@ -617,30 +632,33 @@ } .message-select-control { + pointer-events: none; + position: absolute; - left: 0; - bottom: 0.25rem; - width: 1.5rem; - height: 1.5rem; - border: 2px solid white; - border-radius: 50%; z-index: var(--z-message-select-control); + bottom: 0.25rem; + left: 0; display: flex; align-items: center; justify-content: center; - color: white; + width: 1.5rem; + height: 1.5rem; + border: 2px solid white; + border-radius: 50%; + font-size: 1rem; + color: white; opacity: 0; - pointer-events: none; + transition: opacity var(--select-transition); .icon-select { position: absolute; - left: -3px; top: -3px; + left: -3px; font-size: 1.625rem; } @@ -685,8 +703,8 @@ &.is-forwarded { .message-title .icon { - font-size: 0.75rem; margin-right: 0.1875rem; + font-size: 0.75rem; } } } @@ -694,13 +712,15 @@ .message-action-buttons { position: absolute; bottom: 0; - background-color: var(--pattern-color); - border-radius: 1.125rem; display: flex; flex-direction: column; + border-radius: 1.125rem; + opacity: 0; + background-color: var(--pattern-color); + transition: opacity 150ms; @media (pointer: coarse) { @@ -732,14 +752,22 @@ } .bottom-marker { - height: 1px; width: 1px; + height: 1px; visibility: hidden; } .giveaway-result-content { min-width: 17rem; } + + @media (min-width: 1921px) { + --max-width: calc(30vw - 1rem); + } + + @media (max-width: 600px) { + margin-bottom: 0.25rem; + } } // Border-radius styles @@ -752,8 +780,8 @@ .message-content.custom-shape .media-inner video { border-top-left-radius: var(--border-top-left-radius); border-top-right-radius: var(--border-top-right-radius); - border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--border-bottom-right-radius); + border-bottom-left-radius: var(--border-bottom-left-radius); } .media-inner video.full-media { diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 96fb1ba73..990a8416d 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/src/components/middle/message/MessageContextMenu.scss @@ -1,12 +1,12 @@ .MessageContextMenu { + user-select: none; position: absolute; font-size: 1rem; - user-select: none; &_items { overflow: auto; - padding: 0.5rem 0; overscroll-behavior: contain; + padding: 0.5rem 0; &-hidden { opacity: 0; @@ -20,9 +20,9 @@ .bubble { overflow: initial; - padding: 0 !important; display: flex; flex-direction: column; + padding: 0 !important; } &.with-reactions .bubble { @@ -32,20 +32,21 @@ } &.with-reactions &_items { + padding: 0.25rem 0; + border-radius: var(--border-radius-default); + background: var(--color-background-compact-menu); backdrop-filter: blur(10px); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - padding: 0.25rem 0; - - @media (min-width: 600px) { - margin-inline-end: 2.75rem; - } body.no-menu-blur & { background: var(--color-background); backdrop-filter: none; } + + @media (min-width: 600px) { + margin-inline-end: 2.75rem; + } } .backdrop { @@ -60,12 +61,14 @@ &--seen-by-label { position: absolute; top: 50%; - transform: translateY(-50%); - left: 0; right: 0; + left: 0; + transform: translateY(-50%); + overflow: hidden; - text-overflow: ellipsis; + text-align: initial; + text-overflow: ellipsis; } .avatars { diff --git a/src/components/middle/message/MessageEffect.module.scss b/src/components/middle/message/MessageEffect.module.scss index 1da22c34e..667f4a135 100644 --- a/src/components/middle/message/MessageEffect.module.scss +++ b/src/components/middle/message/MessageEffect.module.scss @@ -1,7 +1,7 @@ .anchor { position: absolute; - bottom: 0; right: 0; + bottom: 0; } .mirrorAnchor { @@ -10,10 +10,9 @@ } .root { + pointer-events: none; position: fixed; z-index: var(--z-message-effect); - - pointer-events: none; } .mirror { diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index 8d9fa6f7b..a6c0a3ada 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -1,19 +1,23 @@ .MessageMeta { - position: absolute; - height: 1.25rem; - bottom: 0; - right: 0; - display: flex; - align-items: center; - background: rgba(#999999, 0.6); - border-radius: 0.625rem; - padding: 0 0.25rem; - color: white; - line-height: 1; - cursor: var(--custom-cursor, pointer); user-select: none; + position: absolute; + right: 0; + bottom: 0; + + display: flex; + align-items: center; + + height: 1.25rem; + padding: 0 0.25rem; + border-radius: 0.625rem; + + line-height: 1; + color: white; + + background: rgba(#999999, 0.6); + .message-price, .message-time, .message-imported, @@ -62,7 +66,6 @@ .message-effect-icon { margin-inline-end: 0.25rem; - color: var(--color-text); & > .emoji { width: 1rem !important; @@ -77,9 +80,9 @@ .message-imported, .message-signature { overflow: hidden; - text-overflow: ellipsis; - margin-right: 0.375rem; max-width: 16ch; // Limit long text to 16 characters + margin-right: 0.375rem; + text-overflow: ellipsis; .emoji-small { width: 1rem !important; @@ -88,15 +91,15 @@ } .icon-channelviews { - margin-left: 0.125rem; margin-right: 0.375rem; + margin-left: 0.125rem; font-size: 1.125rem; line-height: inherit; } .icon-reply-filled { - margin-left: 0.125rem; margin-right: 0.375rem; + margin-left: 0.125rem; font-size: 0.75rem; line-height: inherit; } @@ -111,14 +114,18 @@ .Message .invoice:not(.has-reactions).has-photo & { --color-accent-own: white; --color-accent: white; - color: white !important; - opacity: 1; - bottom: 0.25rem; + right: 0.25rem; + bottom: 0.25rem; left: auto; + height: 1.125rem; padding: 0 0.3125rem 0 0.375rem; + color: white !important; + + opacity: 1; + .MessageOutgoingStatus .icon { background: transparent; } @@ -153,10 +160,10 @@ } .MessageOutgoingStatus { - margin-left: -0.1875rem; - font-size: 1.1875rem; - border-radius: 0.625rem; flex-shrink: 0; + margin-left: -0.1875rem; + border-radius: 0.625rem; + font-size: 1.1875rem; .Message.own & { color: var(--color-accent-own); diff --git a/src/components/middle/message/MessagePhoneCall.module.scss b/src/components/middle/message/MessagePhoneCall.module.scss index db472399f..7aead70bf 100644 --- a/src/components/middle/message/MessagePhoneCall.module.scss +++ b/src/components/middle/message/MessagePhoneCall.module.scss @@ -12,10 +12,10 @@ } .info { - margin-inline-end: 0.5rem; + user-select: none; display: flex; flex-direction: column; - user-select: none; + margin-inline-end: 0.5rem; } .reason { @@ -23,9 +23,9 @@ } .arrow { - font-size: 1.125rem; - display: inline-block; transform: rotateZ(-45deg); + display: inline-block; + font-size: 1.125rem; color: #4fae4e; &.incoming { diff --git a/src/components/middle/message/PaidMediaOverlay.module.scss b/src/components/middle/message/PaidMediaOverlay.module.scss index a3499059a..eae3bc3fd 100644 --- a/src/components/middle/message/PaidMediaOverlay.module.scss +++ b/src/components/middle/message/PaidMediaOverlay.module.scss @@ -4,12 +4,12 @@ .buyButton { position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: max-content !important; - z-index: 2; + width: max-content !important; } .boughtStatus { @@ -23,6 +23,6 @@ .buttonText { display: flex; - align-items: center; flex-shrink: 0; + align-items: center; } diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss index 10d637d0d..114b2b0e3 100644 --- a/src/components/middle/message/Poll.scss +++ b/src/components/middle/message/Poll.scss @@ -2,28 +2,24 @@ min-width: 15rem; text-align: initial; - @media (max-width: 600px) { - min-width: 50vw; - } - .poll-question { + margin: 0.125rem 0; font-weight: var(--font-weight-medium); line-height: 1.25rem; - margin: 0.125rem 0; overflow-wrap: anywhere; } .poll-type, .poll-voters-count { - color: var(--secondary-color); font-size: 0.875rem; + color: var(--secondary-color); } .poll-type { - margin-bottom: 0.5rem; display: flex; align-items: center; min-height: 1.375rem; + margin-bottom: 0.5rem; } .poll-voters-count { @@ -34,12 +30,12 @@ .Checkbox, .Radio { min-height: 2.5rem; - padding-left: 2.25rem; padding-bottom: 1.25rem; + padding-left: 2.25rem; &.disabled { - opacity: 1 !important; cursor: var(--custom-cursor, not-allowed); + opacity: 1 !important; } &:hover { @@ -48,15 +44,13 @@ .Checkbox-main, .Radio-main { - .label { - line-height: 1.3125rem; - } &::before { + --color-borders-input: var(--secondary-color); + top: 0.6875rem; left: 0.125rem; background-color: var(--background-color); - --color-borders-input: var(--secondary-color); } &::after { @@ -64,6 +58,9 @@ left: 0.4375rem; background-color: var(--accent-color); } + .label { + line-height: 1.3125rem; + } } input:checked ~ .Radio-main, @@ -137,10 +134,11 @@ } .poll-countdown-progress { - stroke: var(--color-primary); fill: transparent; - stroke-width: 2; + stroke: var(--color-primary); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 2s, stroke 0.2s; } @@ -152,16 +150,21 @@ } .Button { - text-transform: none; font-size: 1rem; + text-transform: none; .Message.own & { - color: var(--accent-color); --color-primary-shade-rgb: var(--color-accent-own); + + color: var(--accent-color); } } > .Button { margin-bottom: 0.1875rem; } + + @media (max-width: 600px) { + min-width: 50vw; + } } diff --git a/src/components/middle/message/PollOption.scss b/src/components/middle/message/PollOption.scss index b7295ccf6..d6a8a2654 100644 --- a/src/components/middle/message/PollOption.scss +++ b/src/components/middle/message/PollOption.scss @@ -13,12 +13,15 @@ .poll-option-share { position: relative; - margin-top: 0.125rem; - width: 1.75rem; - margin-inline-end: 0.5rem; + flex-shrink: 0; - font-weight: var(--font-weight-medium); + + width: 1.75rem; + margin-top: 0.125rem; + margin-inline-end: 0.5rem; + font-size: 0.875rem; + font-weight: var(--font-weight-medium); text-align: right; &.limit-width { @@ -32,14 +35,17 @@ position: absolute; right: 0; bottom: -5px; + width: 1rem; height: 1rem; - background: var(--accent-color); - color: var(--background-color); border-radius: 0.5rem; + font-size: 0.75rem; + color: var(--background-color); text-align: center; + background: var(--accent-color); + &.wrong { background: var(--color-error); } @@ -50,10 +56,11 @@ &.animate { opacity: 0; + animation-name: PollOptionIconAnimate; - animation-delay: 0.09s; animation-duration: 0.3s; animation-fill-mode: forwards; + animation-delay: 0.09s; } } @@ -68,34 +75,39 @@ .poll-option-line { position: relative; + transform-origin: 0 0; + width: 0; - height: 0.25rem; min-width: 0.5rem; - border-radius: 0.125rem; + height: 0.25rem; margin-top: 0.5rem; + border-radius: 0.125rem; + background: var(--accent-color); - transform-origin: 0 0; transition: transform 0.3s; transition-delay: 0.09s; } .poll-line { + position: absolute; + bottom: -5px; + left: -27px; + width: 30px; height: 35px; - position: absolute; - left: -27px; - bottom: -5px; - transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; - stroke-dashoffset: 0; + stroke-dasharray: 0, 200%; + stroke-dashoffset: 0; + + transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; } .poll-line path { - stroke-width: 4px; - stroke-linecap: round; - stroke: var(--accent-color); fill: none; + stroke: var(--accent-color); + stroke-linecap: round; + stroke-width: 4px; } .wrong { diff --git a/src/components/middle/message/RoundVideo.scss b/src/components/middle/message/RoundVideo.scss index 900e089f6..e25337838 100644 --- a/src/components/middle/message/RoundVideo.scss +++ b/src/components/middle/message/RoundVideo.scss @@ -1,8 +1,8 @@ .RoundVideo { + cursor: var(--custom-cursor, pointer); position: relative; width: 15rem; height: 15rem; - cursor: var(--custom-cursor, pointer); &.non-interactive { pointer-events: none; @@ -10,15 +10,17 @@ .video-wrapper { position: absolute; - left: 0; top: 0; + left: 0; + + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 100%; height: 100%; border-radius: 50%; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; } .thumbnail { @@ -26,20 +28,22 @@ } .progress { + pointer-events: none; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; - pointer-events: none; } .progress-circle { - stroke: white; fill: transparent; - stroke-width: 4; - stroke-opacity: 0.35; + stroke: white; stroke-linecap: round; + stroke-opacity: 0.35; + stroke-width: 4; } video::-internal-media-controls-cast-button, @@ -57,14 +61,17 @@ .icon-view-once { position: absolute; - background-color: rgba(0, 0, 0, 0.75); - padding: 0.125rem; - left: 1.625rem; - bottom: 0; - font-size: 1rem; - border-radius: 50%; - color: var(--color-white); z-index: var(--z-badge); + bottom: 0; + left: 1.625rem; + + padding: 0.125rem; + border-radius: 50%; + + font-size: 1rem; + color: var(--color-white); + + background-color: rgba(0, 0, 0, 0.75); } } @@ -72,9 +79,10 @@ position: absolute; top: 0; left: 0; - border-radius: 0.5rem; + width: 1.875rem; height: 1.3125rem; + border-radius: 0.5rem; } .loading-rect { @@ -83,25 +91,30 @@ .transcribe-button { position: absolute; + top: 1.6875rem; + left: 0.1875rem; + width: 1.875rem; height: 1.3125rem; - left: 0.1875rem; - top: 1.6875rem; border-radius: 0.5rem; + background: var(--pattern-color); &:hover { - background: var(--pattern-color) !important; opacity: 0.8; + background: var(--pattern-color) !important; } } .unread::after { content: ""; + display: inline-block; + width: 0.5rem; height: 0.5rem; - background-color: currentColor; - border-radius: 50%; margin-inline-start: 0.125rem; + border-radius: 50%; + + background-color: currentColor; } } diff --git a/src/components/middle/message/SenderGroupContainer.module.scss b/src/components/middle/message/SenderGroupContainer.module.scss index c07dcc2fc..cf4cfe7ca 100644 --- a/src/components/middle/message/SenderGroupContainer.module.scss +++ b/src/components/middle/message/SenderGroupContainer.module.scss @@ -4,13 +4,14 @@ .avatarContainer { position: absolute; - flex-direction: column-reverse; - display: flex; + z-index: 2; top: 0; bottom: 0; - z-index: 2; - transform: translateX(0) scale(1); + + display: flex; + flex-direction: column-reverse; + opacity: 1; transition: opacity 0.2s, transform var(--select-transition); diff --git a/src/components/middle/message/SimilarChannels.module.scss b/src/components/middle/message/SimilarChannels.module.scss index 8d8f4a214..982f5ea67 100644 --- a/src/components/middle/message/SimilarChannels.module.scss +++ b/src/components/middle/message/SimilarChannels.module.scss @@ -1,11 +1,12 @@ .root { - max-width: 45rem; - margin-top: 0.625rem; - position: relative; --more-channel-background: #d8d8d8; --more-channel-background-dark: #8f8f8f; --more-channel-badge: #8f8f8f; --more-channel-badge-overlay: #00000033; + + position: relative; + max-width: 45rem; + margin-top: 0.625rem; } .notch { @@ -19,13 +20,15 @@ } .header { - padding: 0.375rem 0.375rem 0 0.75rem; - display: flex; - justify-content: space-between; - align-items: center; position: sticky; top: 0; left: 0; + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0.375rem 0.375rem 0 0.75rem; } .title { @@ -37,10 +40,11 @@ .close { width: auto; height: auto; - font-size: 1.25rem; padding: 0.125rem; border-radius: 50%; + font-size: 1.25rem; + > .icon { margin-left: 0.0625rem; } @@ -48,13 +52,13 @@ .skeleton { height: 8.5rem; - border-radius: 0.9375rem; margin-top: 0.625rem; + border-radius: 0.9375rem; } .inner { - background: var(--color-background); border-radius: 0.9375rem; + background: var(--color-background); } .is-appearing { @@ -68,71 +72,77 @@ @keyframes channels-appear { from { transform: scale(0) translateY(-50%); - opacity: 0; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 0; + opacity: 0; } to { transform: none; - opacity: 1; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 8.9375rem; + opacity: 1; } } @keyframes channels-disappear { from { transform: none; - opacity: 1; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 8.9375rem; + opacity: 1; } to { transform: scale(0) translateY(-50%); - opacity: 0; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 0; + opacity: 0; } } .channel-list { - padding-bottom: 0.25rem; - padding-left: 0.25rem; - display: flex; overflow-x: auto; overflow-y: hidden; - white-space: nowrap; - border-bottom-left-radius: 0.9375rem; + display: flex; + + padding-bottom: 0.25rem; + padding-left: 0.25rem; border-bottom-right-radius: 0.9375rem; + border-bottom-left-radius: 0.9375rem; + + white-space: nowrap; } .item { - height: 6.375rem; position: relative; + display: flex; flex-direction: column; align-items: center; + + height: 6.375rem; margin-right: 0.5rem; padding: 0.5rem 0.5rem 0.25rem 0.5rem; &:not(:last-child) { &:hover { - background: var(--color-chat-hover); - border-radius: 0.625rem; cursor: pointer; + border-radius: 0.625rem; + background: var(--color-chat-hover); } } } .last-item { - margin: 0; - padding: 0.5rem 0 0.25rem 0; cursor: pointer; - min-width: 5rem; - margin-right: 0.75rem; + align-items: flex-start; + + min-width: 5rem; + margin: 0; + margin-right: 0.75rem; + padding: 0.5rem 0 0.25rem 0; } .avatar { @@ -160,34 +170,41 @@ } .badge { + position: relative; + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; + max-width: 3.75rem; height: 0.9375rem; margin-top: -0.8125rem; - outline: 0.0625rem solid var(--color-background); padding: 0.125rem 0.1875rem 0.125rem 0.25rem; border-radius: 0.625rem; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; + color: var(--color-white); - position: relative; + + outline: 0.0625rem solid var(--color-background); &::before { content: ""; - background-color: var(--more-channel-badge-overlay); + position: absolute; - max-width: 3.75rem; + z-index: -1; + width: 100%; + max-width: 3.75rem; height: 0.9375rem; border-radius: 0.625rem; - z-index: -1; + + background-color: var(--more-channel-badge-overlay); } } .icon { - font-size: 0.4375rem; margin-right: 0.0625rem; + font-size: 0.4375rem; } .members-count { @@ -197,35 +214,39 @@ } .channel-title { - text-align: center; + unicode-bidi: plaintext; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + max-width: 3.4375rem; height: 1.625rem; + margin-top: 0.125rem; + font-size: 0.6875rem; font-weight: var(--font-weight-normal); line-height: 0.8125rem; - max-width: 3.4375rem; - margin-top: 0.125rem; - white-space: normal; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + text-align: center; text-overflow: ellipsis; - unicode-bidi: plaintext; + white-space: normal; } .last-item .channel-title { - color: var(--color-text-secondary); align-self: center; + color: var(--color-text-secondary); } .fake-avatar { - border-radius: 50%; + position: absolute; + z-index: 2; + left: 0.625rem; + width: 3.75rem; height: 3.75rem; - position: absolute; - left: 0.625rem; + border-radius: 50%; + background: var(--more-channel-background); outline: 0.125rem solid var(--color-background); - z-index: 2; :global(.theme-dark) & { background: var(--more-channel-background-dark); @@ -238,6 +259,6 @@ } .last-fake-avatar { - left: 1.25rem; z-index: 1; + left: 1.25rem; } diff --git a/src/components/middle/message/SponsoredMessage.scss b/src/components/middle/message/SponsoredMessage.scss index df7796938..a1b8fade2 100644 --- a/src/components/middle/message/SponsoredMessage.scss +++ b/src/components/middle/message/SponsoredMessage.scss @@ -4,9 +4,9 @@ --border-top-left-radius: var(--border-radius-messages) !important; --border-bottom-left-radius: 0 !important; + z-index: calc(var(--z-sticky-date) + 1); margin-top: -0.5rem; margin-bottom: 0.5rem; - z-index: calc(var(--z-sticky-date) + 1); &::before { display: none; @@ -24,15 +24,16 @@ transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } .message-type { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; + padding-inline-end: 0.25rem; text-transform: capitalize; @@ -43,16 +44,17 @@ } .message-action-buttons { - bottom: auto !important; top: 0; + bottom: auto !important; } .message-content { - padding: 0.5rem; --border-top-left-radius: var(--border-radius-messages); --border-top-right-radius: var(--border-radius-messages); --border-bottom-right-radius: var(--border-radius-messages); + padding: 0.5rem; + @media (max-width: 600px) { max-width: min(29rem, calc(100vw - 4.5rem)) !important; } @@ -76,30 +78,36 @@ font-size: calc(var(--message-text-size, 1rem) - 0.125rem); > .Button { - border-radius: 0 0 0.375rem 0.375rem; - border: none; - background: none; margin-bottom: 0; + border: none; + border-radius: 0 0 0.375rem 0.375rem; + line-height: 1; + background: none; + &::before { content: ''; + position: absolute; top: 0; left: 0; + width: 100%; height: 0.0625rem; - background: var(--accent-color); + opacity: 0.25; + background: var(--accent-color); } } .sponsored-action-icon { position: absolute; - font-size: 0.75rem; top: 0.25rem; right: 0; transform: rotate(-45deg); + + font-size: 0.75rem; } } diff --git a/src/components/middle/message/Sticker.module.scss b/src/components/middle/message/Sticker.module.scss index a5afc3c38..15ab57094 100644 --- a/src/components/middle/message/Sticker.module.scss +++ b/src/components/middle/message/Sticker.module.scss @@ -1,7 +1,7 @@ .root { - overflow: visible !important; - contain: layout; position: relative; + contain: layout; + overflow: visible !important; &:not(.inactive) { cursor: var(--custom-cursor, pointer); @@ -17,7 +17,7 @@ } .effect { + pointer-events: none; position: fixed; z-index: var(--z-message-effect); - pointer-events: none; } diff --git a/src/components/middle/message/TimeMenuItem.module.scss b/src/components/middle/message/TimeMenuItem.module.scss index 644e4d7e0..8a653d3fa 100644 --- a/src/components/middle/message/TimeMenuItem.module.scss +++ b/src/components/middle/message/TimeMenuItem.module.scss @@ -1,10 +1,13 @@ :global(.MenuItem).item { + --color-skeleton-background: #2121211a; + + pointer-events: none; + cursor: var(--custom-cursor, default); + margin-bottom: 0; + font-size: 0.8125rem; font-weight: var(--font-weight-normal); - cursor: var(--custom-cursor, default); - pointer-events: none; - --color-skeleton-background: #2121211a; &:hover, &:focus, &:active { @@ -17,30 +20,34 @@ } .get { - cursor: var(--custom-cursor, pointer); - font-size: 0.6875rem; - 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.6875rem; font-weight: var(--font-weight-medium); - transition: 150ms filter ease-in; + background: var(--color-background-menu-separator); filter: opacity(0.8); + transition: 150ms filter ease-in; + &:hover { filter: brightness(1.1); } } .skeleton { - height: 0.5rem; width: calc(100% - 2rem); + height: 0.5rem; margin: 0.5rem 0; border-radius: 0.25rem; } .transition { - height: 1.5rem; width: auto; + height: 1.5rem; } diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index a5542d736..bbdd8682c 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -1,15 +1,19 @@ .WebPage { - color: var(--color-text); + position: relative; + + overflow: hidden; + + max-width: 29rem; margin-top: 0.25rem; margin-bottom: 0.125rem; padding-block: 0.1875rem; + border-radius: 0.25rem; + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); line-height: 1.125rem; - max-width: 29rem; + color: var(--color-text); + background-color: var(--accent-background-color); - border-radius: 0.25rem; - position: relative; - overflow: hidden; &.with-video { padding-block: 0.375rem; @@ -28,24 +32,28 @@ &--sticker { position: relative; + + overflow: hidden; + width: 100%; height: 100%; - overflow: hidden; border-radius: 0.25rem; } &--stickers { - color: var(--accent-color); border-radius: 0 !important; + color: var(--accent-color); } &.in-preview { + height: 2.625rem; + margin: 0; padding-inline-start: 0.5rem; padding-inline-end: 0.375rem; border-radius: 0.25rem; + background-color: var(--color-primary-tint); - height: 2.625rem; - margin: 0; + transition: background-color 0.2s ease-in; &.with-gift { @@ -89,23 +97,24 @@ transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } .with-gift &--quick-button { - border-top: inherit; margin-top: 0.0625rem; margin-bottom: -0.125rem; + border-top: inherit; } &-text { + position: relative; + display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; - position: relative; &_interactive { cursor: var(--custom-cursor, pointer); @@ -119,8 +128,8 @@ .media-inner { margin: 0 !important; - margin-block-end: 0.1875rem !important; margin-block-start: 0.25rem !important; + margin-block-end: 0.1875rem !important; &, & img, @@ -160,8 +169,8 @@ } .media-inner { - order: 2; flex-shrink: 0; + order: 2; &.square-image { width: 5rem; @@ -170,9 +179,9 @@ margin-bottom: 0 !important; img { - object-fit: cover; width: 100%; height: 100%; + object-fit: cover; } } } @@ -187,24 +196,24 @@ .site-name, .site-description, .site-title { - overflow-wrap: anywhere; max-width: 100%; + overflow-wrap: anywhere; } .site-name { - color: var(--accent-color); - font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; + font-weight: var(--font-weight-semibold); + color: var(--accent-color); } .site-title { - font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; + font-weight: var(--font-weight-semibold); } .site-description { - line-height: 1.25; margin-bottom: 0.125rem; + line-height: 1.25; body.is-ios & { line-height: 1.125rem; diff --git a/src/components/middle/message/WebPageUniqueGift.module.scss b/src/components/middle/message/WebPageUniqueGift.module.scss index 08f8c6765..530066d4c 100644 --- a/src/components/middle/message/WebPageUniqueGift.module.scss +++ b/src/components/middle/message/WebPageUniqueGift.module.scss @@ -1,21 +1,20 @@ .root { + cursor: var(--custom-cursor, pointer); + + position: relative; + display: flex; flex-direction: column; align-items: center; - position: relative; - min-width: 12.5rem; width: 100%; - + min-width: 12.5rem; margin-top: 0; - padding-block: 2rem !important; padding-bottom: 0.75rem; - + padding-block: 2rem !important; border-radius: 0.25rem; font-weight: var(--font-weight-semibold); - - cursor: var(--custom-cursor, pointer); } .backgroundWrapper { @@ -27,14 +26,15 @@ .background { position: absolute; - inset: 0; - top: -1rem; + inset: -1rem 0 0 0; } .stickerWrapper { position: relative; + + overflow: hidden; + width: 7.5rem; height: 7.5rem; - overflow: hidden; margin-block: 0.5rem; } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 84c15d711..617a43d71 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -2,17 +2,17 @@ @use "../../../styles/icons"; @mixin subheader-styles() { - font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - margin-inline-end: 0.5rem; overflow: hidden; - padding-inline: 0.4375rem; + max-width: 10rem; + margin-inline-end: 0.5rem; padding-block: 0.1875rem; + padding-inline: 0.4375rem; border-radius: var(--border-radius-messages-small); - background-color: var(--pattern-color); - max-width: 10rem; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + background-color: var(--pattern-color); box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-width: 600px) { @@ -21,43 +21,22 @@ } .message-content { + position: relative; + max-width: var(--max-width); &.gift { --max-width: 18rem; } - position: relative; - max-width: var(--max-width); - - @media (max-width: 600px) { - max-width: min(29rem, calc(100vw - 6.25rem)); - .MessageList.no-avatars & { - max-width: min(29rem, calc(100vw - 3.75rem)); - } - .Message.own & { - max-width: min(30rem, calc(100vw - 3.75rem)); - } - - &.has-action-button { - max-width: min(29rem, calc(100vw - 7rem)); - - .MessageList.no-avatars & { - max-width: min(29rem, calc(100vw - 4.5rem)); - } - - .Message.own & { - max-width: min(30rem, calc(100vw - 4.5rem)); - } - } - } - img { - -webkit-touch-callout: none; user-select: none; + + -webkit-touch-callout: none; } .emoji { - -webkit-user-drag: none; user-select: text; + + -webkit-user-drag: none; } .content-unsupported { @@ -71,18 +50,20 @@ .text-content, .transcription { - margin: 0; - overflow-wrap: anywhere; - white-space: pre-wrap; - line-height: 1.3125; - text-align: initial; - display: block; - unicode-bidi: plaintext; - border-radius: 0.25rem; position: relative; + unicode-bidi: plaintext; overflow: clip; overflow-clip-margin: 0.5rem; + display: block; + + margin: 0; + border-radius: 0.25rem; + + line-height: 1.3125; + text-align: initial; + overflow-wrap: anywhere; + white-space: pre-wrap; } .transcription { @@ -99,8 +80,8 @@ } &.transcription-error { - color: var(--color-text-meta); font-size: 0.875rem; + color: var(--color-text-meta); } .own &.transcription-error { @@ -109,28 +90,29 @@ } .translation-animation { + pointer-events: none; + position: absolute; top: 0; - left: 0; right: 0; bottom: 0; - - pointer-events: none; + left: 0; } .text-loading { --background-gradient-size: 20rem; --animation-color: var(--color-skeleton-background); - background-image: linear-gradient(to right, transparent 10%, var(--animation-color) 50%, transparent 90%); - background-size: var(--background-gradient-size); - display: inline; - box-decoration-break: clone; - color: transparent; border-radius: 0.25rem; + color: transparent; + + background-image: linear-gradient(to right, transparent 10%, var(--animation-color) 50%, transparent 90%); + background-size: var(--background-gradient-size); + box-decoration-break: clone; + animation: text-loading 1.5s linear infinite; .theme-dark & { @@ -153,15 +135,18 @@ position: relative; top: 0.375rem; bottom: auto !important; + float: right; - line-height: 1.35; + height: calc(var(--message-meta-height, 1rem)); - margin-left: 0.4375rem; margin-right: -0.375rem; + margin-left: 0.4375rem; + + line-height: 1.35; .MessageOutgoingStatus .Transition { - max-height: calc(var(--message-meta-height, 1rem)); overflow: hidden; + max-height: calc(var(--message-meta-height, 1rem)); } html[data-message-text-size="12"] & { @@ -185,8 +170,8 @@ &:dir(rtl) { & > .MessageMeta { float: left; - margin-left: -0.25rem; margin-right: 0.4375rem; + margin-left: -0.25rem; } } } @@ -195,17 +180,20 @@ position: relative; top: 0.375rem; bottom: auto !important; + float: right; - line-height: 1; - height: calc(var(--message-meta-height, 1rem)); - margin-left: auto; - margin-top: -0.5rem; - margin-right: -0.5rem; align-self: flex-end; + height: calc(var(--message-meta-height, 1rem)); + margin-top: -0.5rem; + margin-right: -0.5rem; + margin-left: auto; + + line-height: 1; + .MessageOutgoingStatus .Transition { - max-height: calc(var(--message-meta-height, 1rem)); overflow: hidden; + max-height: calc(var(--message-meta-height, 1rem)); } html[data-message-text-size="12"] & { @@ -230,8 +218,8 @@ &.document:not(.text) { &::after { content: ""; - display: block; clear: both; + display: block; } } @@ -274,10 +262,10 @@ } .matching-text-highlight:not(.is-quote) { + padding: 0 0.125rem; + border-radius: 0.25rem; color: var(--color-text); background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; .theme-dark & { --color-text: #000; @@ -285,33 +273,35 @@ } .matching-text-highlight.is-quote { - background: transparent; border-radius: 0.25rem; + background: transparent; &.animate { color: var(--color-text); + background-color: #cae3f7; animation: quote-highlight 0.5s; animation-delay: 1.5s; - background-color: #cae3f7; .theme-dark & { - animation-name: quote-highlight-dark; color: #000; + animation-name: quote-highlight-dark; } } } .message-title { - white-space: nowrap; + user-select: none; + + unicode-bidi: plaintext; overflow: hidden; - text-overflow: ellipsis; + display: flex; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); font-weight: var(--font-weight-medium); line-height: 1.25rem; color: var(--accent-color); - unicode-bidi: plaintext; - display: flex; - user-select: none; + text-overflow: ellipsis; + white-space: nowrap; .forward-title-container, .message-title-name-container, @@ -340,8 +330,8 @@ } .forward-title { - font-weight: normal; margin-right: 0.25rem; + font-weight: normal; } .forward-avatar { @@ -349,9 +339,9 @@ } & > .interactive { + unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; - unicode-bidi: plaintext; } .sender-hidden { @@ -389,9 +379,10 @@ .StarIcon { --color-fill: var(--accent-color); + + margin-left: 0.25rem; vertical-align: middle; opacity: 0.5; - margin-left: 0.25rem; } .title-spacer { @@ -399,33 +390,39 @@ } .admin-title { - margin-left: 1rem; - text-align: right; - font-weight: var(--font-weight-normal); - font-size: 0.75rem; - color: rgba(var(--color-text-meta-rgb), 0.75); user-select: none; + margin-left: 1rem; + + font-size: 0.75rem; + font-weight: var(--font-weight-normal); + color: rgba(var(--color-text-meta-rgb), 0.75); + text-align: right; + .Message.own & { color: var(--accent-color); } } .sender-boosts { + user-select: none; + display: flex; align-items: center; - font-size: 0.75rem; + margin-top: -0.125rem; margin-inline-start: 0.125rem; - user-select: none; + + font-size: 0.75rem; } } .message-subheader { display: flex; flex-direction: column; - justify-content: flex-start; gap: 0.25rem; + justify-content: flex-start; + padding: 0.125rem 0; } @@ -472,11 +469,14 @@ } .svg-appendix { - overflow: hidden; position: absolute; bottom: -0.0625rem; + + overflow: hidden; + width: 0.5625rem; height: 1.125rem; + font-size: 1rem !important; .corner { @@ -504,6 +504,7 @@ .Message & { .svg-appendix { --background-color: #ccc; + opacity: 1; transition: opacity 500ms ease; } @@ -556,16 +557,19 @@ &:not(.custom-shape) .emoji:not(.custom-emoji) { display: inline-block; + width: 1.25em; height: 1.25em; - background-size: 1.25em; - color: transparent; margin-inline-end: 1px; + + color: transparent; vertical-align: text-bottom; + background-size: 1.25em; + &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } @@ -578,6 +582,7 @@ .custom-emoji { --custom-emoji-size: max(calc(1.25 * var(--message-text-size, 1rem)), 20px); + width: var(--custom-emoji-size); height: var(--custom-emoji-size); } @@ -596,11 +601,11 @@ font-size: inherit !important; .content-inner { - display: flex; - align-items: flex-start; - flex-direction: row-reverse; direction: ltr; + display: flex; + flex-direction: row-reverse; gap: 0.5rem; + align-items: flex-start; & > .message-title { @include subheader-styles(); @@ -609,13 +614,12 @@ position: absolute; top: 0.125rem; left: 100%; - color: white; } .Message.own & { - left: initial; right: 100%; + left: initial; } .admin-title { @@ -632,6 +636,28 @@ margin-top: 0.375rem; } } + + @media (max-width: 600px) { + max-width: min(29rem, calc(100vw - 6.25rem)); + .MessageList.no-avatars & { + max-width: min(29rem, calc(100vw - 3.75rem)); + } + .Message.own & { + max-width: min(30rem, calc(100vw - 3.75rem)); + } + + &.has-action-button { + max-width: min(29rem, calc(100vw - 7rem)); + + .MessageList.no-avatars & { + max-width: min(29rem, calc(100vw - 4.5rem)); + } + + .Message.own & { + max-width: min(30rem, calc(100vw - 4.5rem)); + } + } + } } .message-content:not(.web-page).media { @@ -652,8 +678,8 @@ .WebPage:not(.with-document) { .media-inner { display: flex; - justify-content: center; align-items: center; + justify-content: center; &.interactive { cursor: var(--custom-cursor, pointer); @@ -678,8 +704,8 @@ &.has-subheader .Album, &.is-forwarded .media-inner, &.is-forwarded .Album { - margin-left: -0.5rem; margin-right: -0.5rem; + margin-left: -0.5rem; body.is-ios .Message.own & { margin-left: -0.625rem; @@ -732,8 +758,8 @@ justify-content: center; &:not(.open) { - opacity: 0.5; transform: scale(0); + opacity: 0.5; transition: opacity 0.3s ease, transform 0.3s ease; } } @@ -741,11 +767,15 @@ .icon-large-play, .icon-download { position: absolute; + display: flex; align-items: center; justify-content: center; + color: #fff; + opacity: 0.7; + transition: opacity 150ms; &:hover { @@ -756,9 +786,11 @@ display: flex; align-items: center; justify-content: center; + width: 3.375rem; height: 3.375rem; border-radius: 50%; + background: rgba(black, 0.25); } @@ -782,25 +814,30 @@ .message-media-duration, .message-transfer-progress, .message-paid-media-status { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; user-select: none; + + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + display: flex; align-items: center; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); } .message-media-duration .icon-muted { - vertical-align: -0.1875rem; margin-left: 0.375rem; font-size: 1rem; + vertical-align: -0.1875rem; } .message-media-duration .playback-failed { @@ -814,10 +851,10 @@ } .message-content.custom-shape { - line-height: 1.2; display: flex; flex-wrap: wrap; align-items: flex-end; + line-height: 1.2; &.has-comment-counter { min-height: 5.25rem; @@ -837,16 +874,16 @@ left: 100%; .Message.own & { - left: initial; right: 100%; + left: initial; } } .with-subheader { - display: flex; - align-items: flex-start; - flex-direction: row-reverse; direction: ltr; + display: flex; + flex-direction: row-reverse; + align-items: flex-start; > p { margin-bottom: 0; @@ -858,9 +895,9 @@ } @media (max-width: 340px) { - margin-left: -1rem; z-index: 1; max-width: calc(90vw - 12rem); + margin-left: -1rem; } } @@ -875,15 +912,15 @@ } .media-inner { - line-height: 1; - font-size: 1rem; flex-shrink: 0; + font-size: 1rem; + line-height: 1; .full-media { top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; } } @@ -892,8 +929,8 @@ color: transparent; &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } @@ -918,8 +955,8 @@ } .text-content { - word-break: normal; line-height: var(--emoji-only-size); + word-break: normal; .emoji { width: var(--emoji-only-size); @@ -927,10 +964,10 @@ } .MessageMeta { - text-shadow: none; - bottom: -1.25rem; right: 0; + bottom: -1.25rem; line-height: normal; + text-shadow: none; } } } @@ -972,9 +1009,9 @@ margin-right: 0.5rem; @media (max-width: 340px) { - margin-left: 0; z-index: 1; max-width: calc(90vw - 11.5rem); + margin-left: 0; } } } @@ -997,11 +1034,13 @@ } .text-entity-link { + cursor: var(--custom-cursor, pointer); + + unicode-bidi: initial; + color: var(--color-links) !important; text-decoration: none !important; overflow-wrap: break-word; - cursor: var(--custom-cursor, pointer); - unicode-bidi: initial; &:hover, &:active, @@ -1015,13 +1054,15 @@ } .text-entity-code { - color: var(--color-code); - background: var(--color-code-bg); - white-space: pre-wrap; margin: 0; padding: 1px 2px; border-radius: 4px; + color: var(--color-code); + white-space: pre-wrap; + + background: var(--color-code-bg); + &.clickable { cursor: var(--custom-cursor, pointer); } @@ -1029,15 +1070,19 @@ // Keep this close to `CodeBlock` style to avoid jumps in height .text-entity-pre { - white-space: pre-wrap; - background-color: var(--color-code-bg); - margin: 0; - padding: 0.5rem; - margin-block: 0.25rem; - border-radius: 4px; position: relative; + overflow: hidden; + margin: 0; + margin-block: 0.25rem; + padding: 0.5rem; + border-radius: 4px; + + white-space: pre-wrap; + + background-color: var(--color-code-bg); + &:hover { .code-overlay { opacity: 1; @@ -1045,8 +1090,8 @@ } &.no-word-wrap { - white-space: pre; padding-bottom: 0.25rem; + white-space: pre; } .pre-code { @@ -1059,41 +1104,50 @@ .code-block, .hljs { --color-scrollbar: var(--color-scrollbar-code); + font-family: var(--font-family-monospace); font-size: 0.875rem; } blockquote, .blockquote { - display: inline-block; position: relative; - padding-inline: 0.5rem 1rem; - margin-block: 0.125rem; - border-radius: 0.25rem; + overflow: hidden; - background-color: var(--accent-background-color); - white-space: pre-wrap; + display: inline-block; + + margin-block: 0.125rem; + padding-inline: 0.5rem 1rem; + border-radius: 0.25rem; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + white-space: pre-wrap; + + background-color: var(--accent-background-color); &::before { content: ""; + position: absolute; top: 0; - inset-inline-start: 0; bottom: 0; + inset-inline-start: 0; + width: 3px; + background: var(--bar-gradient, var(--accent-color)); } &::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; + color: var(--accent-color); } } @@ -1105,8 +1159,8 @@ blockquote, .blockquote { @keyframes text-loading { 0% { - background-position-x: 0; opacity: 1; + background-position-x: 0; } 50% { @@ -1114,8 +1168,8 @@ blockquote, .blockquote { } 100% { - background-position-x: var(--background-gradient-size); opacity: 1; + background-position-x: var(--background-gradient-size); } } @@ -1131,12 +1185,12 @@ blockquote, .blockquote { @keyframes quote-highlight-dark { 0% { - background-color: #cae3f7; color: #000; + background-color: #cae3f7; } 100% { - background-color: transparent; color: var(--color-text); + background-color: transparent; } } diff --git a/src/components/middle/message/reactions/ReactionButton.module.scss b/src/components/middle/message/reactions/ReactionButton.module.scss index 0c9517f6e..89a3c1ef0 100644 --- a/src/components/middle/message/reactions/ReactionButton.module.scss +++ b/src/components/middle/message/reactions/ReactionButton.module.scss @@ -5,6 +5,30 @@ --reaction-background-hover: var(--hover-color-reaction); --reaction-text-color: var(--text-color-reaction); + position: relative; + z-index: 1; + + overflow: visible; + display: flex; + flex-direction: row; + gap: 0.125rem; + + width: auto; + height: 1.875rem; + padding: 0 0.375rem 0 0.25rem; + border-radius: 1.75rem; + + font-weight: var(--font-weight-medium); + font-variant-numeric: tabular-nums; + line-height: 1.75rem; + color: var(--reaction-text-color); + text-transform: none; + white-space: nowrap; + + background-color: var(--reaction-background) !important; + + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms !important; + &.chosen { --reaction-background: var(--color-reaction-chosen); --reaction-background-hover: var(--hover-color-reaction-chosen); @@ -15,6 +39,7 @@ --reaction-background: #FFBC2E33 !important; --reaction-background-hover: #FFBC2E55 !important; --reaction-text-color: #E98111 !important; + z-index: 2; &.outside { @@ -30,27 +55,6 @@ --reaction-text-color: #FFFFFF !important; } - display: flex; - flex-direction: row; - height: 1.875rem; - white-space: nowrap; - width: auto; - padding: 0 0.375rem 0 0.25rem; - background-color: var(--reaction-background) !important; - border-radius: 1.75rem; - font-weight: var(--font-weight-medium); - font-variant-numeric: tabular-nums; - text-transform: none; - color: var(--reaction-text-color); - overflow: visible; - position: relative; - line-height: 1.75rem; - z-index: 1; - - gap: 0.125rem; - - transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms !important; - &:hover { --reaction-background: var(--reaction-background-hover) !important; @@ -68,32 +72,35 @@ .tag.tag { position: relative; - margin-right: 1rem; - padding-inline: 0; + justify-content: start; + margin-right: 1rem; + padding-inline: 0; border-radius: 0.375rem; border-top-right-radius: 0; border-bottom-right-radius: 0; - // SVG has problems with backdrop-filter - &:hover { - backdrop-filter: unset; - filter: var(--reaction-background-hover-filter); - } - &::after { content: ''; + position: absolute; - right: -0.5rem; top: 50%; + right: -0.5rem; transform: translateY(-50%); width: 0.375rem; height: 0.375rem; border-radius: 50%; - background-color: var(--text-color-reaction-chosen); + opacity: 0.4; + background-color: var(--text-color-reaction-chosen); + } + + // SVG has problems with backdrop-filter + &:hover { + filter: var(--reaction-background-hover-filter); + backdrop-filter: unset; } .animated-emoji { @@ -102,10 +109,10 @@ } .tail { - height: 100%; position: absolute; - right: -0.9375rem; z-index: -1; + right: -0.9375rem; + height: 100%; .is-safari & { // Safari subpixel rendering be damned. May cause slight overlap, but it's better than a gap. @@ -122,8 +129,8 @@ .tag-text { display: flex; gap: 0.25rem; - font-size: 1rem; margin-inline-end: 0.375rem; + font-size: 1rem; } .counter { @@ -136,15 +143,16 @@ } .paidCounter { + position: absolute; + z-index: 1; + top: -150%; + right: 50%; + transform: translateX(50%); + font-family: var(--font-family-rounded); font-size: 2.5rem; font-variant-numeric: tabular-nums; color: #FFBC2E; - position: absolute; - top: -150%; - right: 50%; - transform: translateX(50%); -webkit-text-stroke: 1px #E58E0D; - z-index: 1; } diff --git a/src/components/middle/message/reactions/ReactionPicker.module.scss b/src/components/middle/message/reactions/ReactionPicker.module.scss index 873a0979f..c346868ad 100644 --- a/src/components/middle/message/reactions/ReactionPicker.module.scss +++ b/src/components/middle/message/reactions/ReactionPicker.module.scss @@ -3,31 +3,32 @@ z-index: var(--z-reaction-picker); @media (max-width: 600px) { - max-width: 100%; - left: 0 !important; right: 0 !important; + left: 0 !important; + max-width: 100%; } } .menuContent { --border-radius-default: 1.25rem; + transform-origin: 9rem 4.625rem !important; + width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); + height: var(--symbol-menu-height); + padding: 0 !important; + :global(body:not(.no-menu-blur)) & { --color-background: var(--color-background-compact-menu); backdrop-filter: blur(25px); } - width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); - height: var(--symbol-menu-height); - padding: 0 !important; - transform-origin: 9rem 4.625rem !important; - &:global(.bubble) { - transform: scale(0.8) !important; - transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; --offset-x: -0.75rem; --offset-y: calc(100% + 0.625rem); + + transform: scale(0.8) !important; + transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; } &:global(.bubble.open) { @@ -35,13 +36,13 @@ } @media (max-width: 600px) { - max-width: min(calc(100% - 1rem), 26.25rem); - left: 50% !important; right: auto !important; + left: 50% !important; + max-width: min(calc(100% - 1rem), 26.25rem); &:global(.bubble) { - transform: scale(0.5) translateX(-50%) !important; transform-origin: 0 3.5rem !important; + transform: scale(0.5) translateX(-50%) !important; } &:global(.bubble.open) { @@ -56,12 +57,12 @@ --color-text-secondary-rgb: 255, 255, 255; --color-default-shadow: rgba(0, 0, 0, 0.3); + transform-origin: 70% 100% !important; + :global(.StickerButton.custom-emoji), :global(.sticker-set-cover) { color: #fff; } - transform-origin: 70% 100% !important; - @media (max-width: 600px) { &:global(.bubble) { transform-origin: 30% 100% !important; @@ -70,8 +71,8 @@ } .onlyReactions { - height: auto; transform-origin: 9rem 1.75rem !important; + height: auto; &:global(.bubble) { --offset-y: calc(100% + 0.1875rem); diff --git a/src/components/middle/message/reactions/ReactionPickerLimited.module.scss b/src/components/middle/message/reactions/ReactionPickerLimited.module.scss index 3cf1d0af3..4783ce968 100644 --- a/src/components/middle/message/reactions/ReactionPickerLimited.module.scss +++ b/src/components/middle/message/reactions/ReactionPickerLimited.module.scss @@ -4,8 +4,10 @@ .wrapper { position: relative; + + overflow-y: auto; + height: auto; max-height: min(18rem, 100%); - overflow-y: auto; padding: 0.5rem 0.25rem; } diff --git a/src/components/middle/message/reactions/ReactionSelector.scss b/src/components/middle/message/reactions/ReactionSelector.scss index d49ee1cf7..f606a9e91 100644 --- a/src/components/middle/message/reactions/ReactionSelector.scss +++ b/src/components/middle/message/reactions/ReactionSelector.scss @@ -1,16 +1,10 @@ .ReactionSelector { position: relative; + top: -0.5rem; + right: 0; + min-width: 3rem; max-width: fit-content; - right: 0; - top: -0.5rem; - - @media (max-width: 600px) { - left: 0; - right: 0; - display: flex; - justify-content: center; - } &__bubble-big, &__bubble-small, @@ -25,18 +19,21 @@ } &__bubble-big { - position: absolute; - display: block; content: ""; + + position: absolute; + z-index: -1; right: 1.125rem; bottom: -0.5rem; + + display: block; + width: 1rem; height: 0.5rem; border-top: 0; - border-left: 0; border-right: 0; + border-left: 0; border-radius: 0 0 1rem 1rem; - z-index: -1; &--isRtl { right: auto; @@ -49,11 +46,14 @@ } &__bubble-small { - position: absolute; - display: block; content: ""; + + position: absolute; right: 1.125rem; bottom: -1.25rem; + + display: block; + width: 0.5rem; height: 0.5rem; border-radius: 50%; @@ -86,6 +86,7 @@ &__hint { padding: 0.25rem 0.5rem; + font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; @@ -93,20 +94,30 @@ } &__reactions { - padding: 0 0.5rem; - height: 2.5rem; - display: flex; cursor: var(--custom-cursor, pointer); + + display: flex; align-items: center; + + height: 2.5rem; + padding: 0 0.5rem; } &__show-more { width: 2rem; height: 2rem; - padding: 0; margin-inline-start: 0.25rem; margin-inline-end: -0.125rem; + padding: 0; border-radius: 50%; + font-size: 1.5rem; } + + @media (max-width: 600px) { + right: 0; + left: 0; + display: flex; + justify-content: center; + } } diff --git a/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss b/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss index abbe5bab0..e33f2d77e 100644 --- a/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss +++ b/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss @@ -1,10 +1,10 @@ .root { --custom-emoji-size: 2rem; - margin-inline-start: 0.25rem; position: relative; min-width: 2rem; min-height: 2rem; + margin-inline-start: 0.25rem; &:first-child { margin-inline-start: 0; @@ -32,13 +32,16 @@ .chosen::before { content: ''; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 2.25rem; height: 2.25rem; border-radius: 50%; + background-color: var(--color-background-compact-menu-hover); } @@ -46,19 +49,22 @@ position: absolute; top: 5%; left: 5%; + width: 90%; height: 90%; } .lock { - font-size: 0.875rem; - padding: 0.125rem; - position: absolute; right: 0; bottom: 0; - background-color: var(--color-background-compact-menu); + + padding: 0.125rem; border-radius: 50%; + + font-size: 0.875rem; + + background-color: var(--color-background-compact-menu); } @keyframes custom-fade-in { diff --git a/src/components/middle/message/reactions/Reactions.scss b/src/components/middle/message/reactions/Reactions.scss index d5025d634..13fd245dc 100644 --- a/src/components/middle/message/reactions/Reactions.scss +++ b/src/components/middle/message/reactions/Reactions.scss @@ -1,13 +1,14 @@ .Reactions { + overflow: visible; display: flex; flex-direction: row; - width: 100%; flex-wrap: wrap; gap: 0.375rem; + + width: 100%; + max-width: calc(var(--max-width) + 2.25rem); margin-top: 0.25rem; margin-bottom: 0.1875rem; - overflow: visible; - max-width: calc(var(--max-width) + 2.25rem); &.is-outside { margin-top: 0.25rem; diff --git a/src/components/middle/panes/AudioPlayer.scss b/src/components/middle/panes/AudioPlayer.scss index 4ecc00a4b..97be6b7c8 100644 --- a/src/components/middle/panes/AudioPlayer.scss +++ b/src/components/middle/panes/AudioPlayer.scss @@ -23,14 +23,14 @@ margin: 0.125rem; &.smaller .icon { - font-size: 1.625rem; margin-top: -0.0625rem; + font-size: 1.625rem; } .icon { position: absolute; - font-size: 1.9375rem; margin-top: -0.0625rem; + font-size: 1.9375rem; &.icon-play { margin-left: 0.125rem; @@ -39,8 +39,8 @@ .icon-play, .icon-pause { - opacity: 1; transform: scale(1); + opacity: 1; transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @@ -48,8 +48,8 @@ &.pause .icon-play, &.loading .icon-play, &.loading .icon-pause { - opacity: 0; transform: scale(0.5); + opacity: 0; } } @@ -61,17 +61,20 @@ .volume-slider-wrapper { position: absolute; - width: 8rem; top: 2.625rem; + width: 8rem; } .volume-slider-spacer { - position: absolute; - transform: translateY(100%); - bottom: 0; - height: 1rem; - width: 8rem; cursor: var(--custom-cursor, default); + + position: absolute; + bottom: 0; + transform: translateY(100%); + + width: 8rem; + height: 1rem; + visibility: hidden; } @@ -81,20 +84,23 @@ } .volume-slider { - opacity: 0; - visibility: hidden; + cursor: var(--custom-cursor, default); position: absolute; - background: var(--color-background); bottom: -1rem; transform: translateY(100%); - transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; + width: 8rem; padding: 0.75rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, default); + + visibility: hidden; + opacity: 0; + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; + .RangeSlider { margin: 0; input[type="range"] { @@ -106,8 +112,8 @@ &:hover .volume-slider, .volume-slider:hover, .volume-slider-spacer:hover + .volume-slider { - opacity: 1; visibility: visible; + opacity: 1; } } @@ -116,11 +122,12 @@ } .playback-backdrop { position: absolute; + z-index: calc(var(--z-menu-backdrop) + 1); top: 0; right: 0; + width: 5rem; height: 4rem; - z-index: calc(var(--z-menu-backdrop) + 1); } .playback-button { @@ -133,14 +140,16 @@ } .playback-button-inner { - transition: 0.15s color ease-out; - font-size: 0.75rem; - font-weight: bold; + padding: 0.125rem 0.25rem; border: 2px solid; border-radius: 0.375rem; - padding: 0.125rem 0.25rem; + + font-size: 0.75rem; + font-weight: bold; font-variant-numeric: tabular-nums; + transition: 0.15s color ease-out; + &.small { transform: scale(0.83); } @@ -152,15 +161,18 @@ } &-content { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; - justify-content: center; flex-direction: column; flex-shrink: 1; + justify-content: center; + max-width: 14rem; padding: 0 0.5rem; - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); border-radius: var(--border-radius-messages-small); &:hover { @@ -171,22 +183,17 @@ max-width: 10rem; } - @media (min-width: 1440px) { - max-width: 24rem; - .right-column-shown & { - max-width: 14rem; - } - } - .AudioPlayer & .title { - display: block; - margin-top: 0.125rem; - font-weight: var(--font-weight-medium); - font-size: 0.875rem !important; - line-height: 1rem; - white-space: nowrap; overflow: hidden; + display: block; + + margin-top: 0.125rem; + + font-size: 0.875rem !important; + font-weight: var(--font-weight-medium); + line-height: 1rem; text-overflow: ellipsis; + white-space: nowrap; body.is-ios & { font-size: 0.9375rem !important; @@ -195,27 +202,36 @@ } .subtitle { - font-size: 0.8125rem !important; - color: var(--color-text-secondary); - line-height: 0.9375rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + margin: 0.125rem 0 0; + font-size: 0.8125rem !important; + line-height: 0.9375rem; + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; + body.is-ios & { font-size: 0.9375rem !important; line-height: 1.125rem; } } + + @media (min-width: 1440px) { + max-width: 24rem; + .right-column-shown & { + max-width: 14rem; + } + } } &.full-width-player { @include mixins.header-pane; .AudioPlayer-content { - max-width: none; flex-grow: 1; + max-width: none; } } @@ -223,8 +239,8 @@ min-width: auto; .icon-check, .icon-placeholder { - margin-left: 0.25rem; margin-right: 0.25rem; + margin-left: 0.25rem; } } } diff --git a/src/components/middle/panes/BotAdPane.module.scss b/src/components/middle/panes/BotAdPane.module.scss index 957d35618..400bc4241 100644 --- a/src/components/middle/panes/BotAdPane.module.scss +++ b/src/components/middle/panes/BotAdPane.module.scss @@ -3,17 +3,19 @@ .root { @include mixins.header-pane; - display: flex; - align-items: center; - gap: 0.5rem; - height: auto; - - line-height: 1.25; - cursor: var(--custom-cursor, pointer); + display: flex; + gap: 0.5rem; + align-items: center; + + height: auto; + // Slight variation from mixins.header-pane padding-left: max(1rem, env(safe-area-inset-left)); + + line-height: 1.25; + transition: background-color 0.2s, transform var(--slide-transition); &:hover { @@ -27,8 +29,8 @@ .info { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; color: var(--accent-color); } diff --git a/src/components/middle/panes/BotVerificationPane.module.scss b/src/components/middle/panes/BotVerificationPane.module.scss index ce615ff97..7100659ee 100644 --- a/src/components/middle/panes/BotVerificationPane.module.scss +++ b/src/components/middle/panes/BotVerificationPane.module.scss @@ -4,15 +4,17 @@ @include mixins.header-pane; display: flex; - height: auto; justify-content: center; + height: auto; padding-inline: 1rem; - color: var(--color-text-secondary); + font-size: 0.875rem; + color: var(--color-text-secondary); } .icon { --custom-emoji-size: 1rem; + padding-inline-end: 0.125rem; } diff --git a/src/components/middle/panes/ChatReportPane.scss b/src/components/middle/panes/ChatReportPane.scss index fc9da0425..fe795fa83 100644 --- a/src/components/middle/panes/ChatReportPane.scss +++ b/src/components/middle/panes/ChatReportPane.scss @@ -13,8 +13,8 @@ } &--Button { - margin-left: 0.25rem; flex: 1 1 50%; + margin-left: 0.25rem; white-space: nowrap; } diff --git a/src/components/middle/panes/HeaderPinnedMessage.module.scss b/src/components/middle/panes/HeaderPinnedMessage.module.scss index e307e6d6f..531b7fc4a 100644 --- a/src/components/middle/panes/HeaderPinnedMessage.module.scss +++ b/src/components/middle/panes/HeaderPinnedMessage.module.scss @@ -1,11 +1,14 @@ @use "../../../styles/mixins"; .root { - display: flex; - align-items: center; - margin-left: auto; cursor: var(--custom-cursor, default); + + display: flex; flex-direction: row-reverse; + align-items: center; + + margin-left: auto; + background: var(--color-background); :global { @@ -19,11 +22,10 @@ } :global(body.no-page-transitions) & { + transition: none !important; :global(.ripple-container) { display: none; } - - transition: none !important; } > :global(.Button) { @@ -52,9 +54,9 @@ height: 3.5rem; .pinnedMessage { + flex: 1; margin-top: 0; margin-bottom: 0; - flex: 1; } .messageText { @@ -72,22 +74,25 @@ } .pinListIconHidden { - opacity: 0; transform: scale(0.6); + opacity: 0; } .pinnedMessage { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; flex-shrink: 1; + align-items: center; + margin-top: -0.25rem; margin-bottom: -0.25rem; padding: 0.25rem; padding-left: 0.375rem; border-radius: var(--border-radius-messages-small); - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); - align-items: center; &:hover:not(.no-hover) { background-color: var(--color-interactive-element-hover); @@ -95,26 +100,27 @@ } .messageTextTransition { - height: 1.125rem; - width: 100%; overflow: hidden; + width: 100%; + height: 1.125rem; } .messageText { overflow: hidden; - margin-inline-start: 0.375rem; - margin-top: 0.125rem; - max-width: 15rem; - min-width: 15rem; flex-grow: 1; + min-width: 15rem; + max-width: 15rem; + margin-top: 0.125rem; + margin-inline-start: 0.375rem; + transition: 0.25s ease-in-out transform; &.withMedia { transform: translateX(2.625rem); - margin-right: 2.625rem; - max-width: calc(15rem - 2.625rem); min-width: calc(15rem - 2.625rem); + max-width: calc(15rem - 2.625rem); + margin-right: 2.625rem; &[dir="rtl"] { transform: translateX(-0.25rem); @@ -132,14 +138,15 @@ } .title { - font-weight: var(--font-weight-medium); - font-size: 0.875rem; - line-height: 1rem; height: 1rem; - color: var(--color-primary); margin-bottom: 0.125rem; - white-space: pre; + + font-size: 0.875rem; + font-weight: var(--font-weight-medium); + line-height: 1rem; + color: var(--color-primary); text-align: initial; + white-space: pre; :global(body.is-ios) & { font-size: 0.9375rem; @@ -147,14 +154,17 @@ } .summary { + --custom-emoji-size: 1.125rem; + + overflow: hidden; + + height: 1.125rem; + margin: 0; + font-size: 0.875rem; line-height: 1.125rem; - height: 1.125rem; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - margin: 0; - --custom-emoji-size: 1.125rem; + white-space: nowrap; :global(body.is-ios) & { font-size: 0.9375rem; @@ -163,37 +173,40 @@ .inlineButton, .inlineButton:global(.Button.tiny) { - display: block; - width: auto; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - border-radius: 1.5rem; - padding: 0 0.75rem; - font-weight: var(--font-weight-medium); - text-transform: none; - height: 2rem; - max-width: 10rem; + display: block; flex-shrink: 1; + + width: auto; + max-width: 10rem; + height: 2rem; + padding: 0 0.75rem; + border-radius: 1.5rem; + + font-weight: var(--font-weight-medium); + text-overflow: ellipsis; + text-transform: none; + white-space: nowrap; } .pictogramTransition { position: absolute; + + overflow: hidden; + width: 2.25rem !important; height: 2.25rem; - margin-inline-start: 0.5rem; margin-top: 0.125rem; - overflow: hidden; + margin-inline-start: 0.5rem; } .pinnedThumb { - width: 100%; - height: 100%; - + overflow: hidden; flex-shrink: 0; + width: 100%; + height: 100%; border-radius: 0.25rem; - overflow: hidden; & + .messageText { max-width: 12rem; @@ -209,10 +222,11 @@ @media (max-width: 600px) { .pinnedMessage { flex-grow: 1; - padding-top: 0; - padding-bottom: 0; + max-width: unset; margin-top: -0.1875rem; + padding-top: 0; + padding-bottom: 0; &::before { top: 0.125rem; diff --git a/src/components/middle/panes/PaidMessageChargePane.module.scss b/src/components/middle/panes/PaidMessageChargePane.module.scss index 2f4c69731..c5d8409ce 100644 --- a/src/components/middle/panes/PaidMessageChargePane.module.scss +++ b/src/components/middle/panes/PaidMessageChargePane.module.scss @@ -5,28 +5,31 @@ display: flex; flex-direction: column; - height: auto; - justify-content: center; align-items: center; + justify-content: center; + height: auto; padding-inline: 1rem; - color: var(--color-text-secondary); + font-size: 0.875rem; + color: var(--color-text-secondary); } .message { - justify-content: center; display: flex; align-items: center; + justify-content: center; + margin-bottom: 0.375rem; + font-size: 1rem; } .messageStars { - font-weight: var(--font-weight-medium); - padding-inline: 0.25rem; display: inline-flex; align-items: center; + padding-inline: 0.25rem; + font-weight: var(--font-weight-medium); } .messageStarIcon { diff --git a/src/components/middle/search/MiddleSearch.module.scss b/src/components/middle/search/MiddleSearch.module.scss index d776fc936..ec313c3c6 100644 --- a/src/components/middle/search/MiddleSearch.module.scss +++ b/src/components/middle/search/MiddleSearch.module.scss @@ -8,13 +8,14 @@ --text-color-reaction-chosen: #FFFFFF; --hover-color-reaction-chosen: var(--color-primary-shade); + pointer-events: none; + position: absolute; + z-index: var(--z-local-search); top: 0; right: 0; bottom: 0; left: 0; - pointer-events: none; - z-index: var(--z-local-search); @media (min-width: 1276px) { :global(#Main.right-column-open) & { @@ -24,34 +25,37 @@ } .header { + pointer-events: auto; + position: absolute; top: 0; left: 0; - width: 100%; - height: 3.5rem; - background-color: var(--color-background); + display: flex; align-items: center; - padding-left: max(1.5rem, env(safe-area-inset-left)); - padding-right: max(0.875rem, env(safe-area-inset-right)); - pointer-events: auto; + width: 100%; + height: 3.5rem; + padding-right: max(0.875rem, env(safe-area-inset-right)); + padding-left: max(1.5rem, env(safe-area-inset-left)); opacity: 0; + background-color: var(--color-background); + transition: opacity 200ms ease-in-out; .active & { opacity: 1; } - @media (max-width: 600px) { - padding-left: max(0.5rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); - } - :global(body.is-electron.is-macos) & { padding-left: 4.5rem; } + + @media (max-width: 600px) { + padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(0.5rem, env(safe-area-inset-left)); + } } // Same as in MiddleHeader.scss @@ -62,14 +66,15 @@ } .input { - border: none; - margin-left: 0.25rem; - margin-right: 0.75rem; flex: 1; - transition-property: background-color, box-shadow, border-radius; - transition-duration: 200ms; + margin-right: 0.75rem; + margin-left: 0.25rem; + border: none; + transition-timing-function: ease-in-out; + transition-duration: 200ms; + transition-property: background-color, box-shadow, border-radius; .mobile & { margin: 0; @@ -86,35 +91,36 @@ } .adaptSearchBorders { - border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .dropdown { - position: absolute; - bottom: 0; - left: 0; - right: 0; - transform: translateY(100%); - max-height: min(24rem, 80vh); pointer-events: all; + position: absolute; + right: 0; + bottom: 0; + left: 0; + transform: translateY(100%); + + overflow: hidden; display: flex; flex-direction: column; - background-color: var(--color-background); - - overflow: hidden; - box-shadow: 0 0 0.625rem 0 var(--color-default-shadow); - clip-path: inset(0 -0.625rem -0.625rem -0.625rem); // Hide top shadow - - border-bottom-left-radius: 1.375rem; + max-height: min(24rem, 80vh); border-bottom-right-radius: 1.375rem; + border-bottom-left-radius: 1.375rem; - transition-behavior: allow-discrete; + background-color: var(--color-background); + clip-path: inset(0 -0.625rem -0.625rem -0.625rem); // Hide top shadow + box-shadow: 0 0 0.625rem 0 var(--color-default-shadow); + + transition-duration: 200ms; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition-property: display, opacity; - transition-duration: 200ms; + + transition-behavior: allow-discrete; .mobile & { position: absolute; @@ -122,11 +128,10 @@ right: 0; bottom: 3.375rem; left: 0; + transform: none; max-height: none; padding: 0; - - transform: none; border-radius: 0; } @@ -141,18 +146,18 @@ } .results { + overflow-y: scroll; display: flex; flex-direction: column; - overflow-y: scroll; padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); } .placeholder { + margin: 0.5rem; color: var(--color-text-secondary); text-align: center; - margin: 0.5rem; } .separator { @@ -161,17 +166,15 @@ } .savedTags { - display: flex; - align-items: center; - gap: 0.375rem; - flex-shrink: 0; - - padding-block: 1rem; - margin-inline: 1rem; - - border-bottom: 1px solid var(--color-borders); - overflow-x: scroll; + display: flex; + flex-shrink: 0; + gap: 0.375rem; + align-items: center; + + margin-inline: 1rem; + padding-block: 1rem; + border-bottom: 1px solid var(--color-borders); } .wrap { @@ -189,25 +192,24 @@ } .hash { - margin-inline-end: -0.5rem; - margin-inline-start: 0.5rem; - display: grid; place-items: center; + + margin-inline-start: 0.5rem; + margin-inline-end: -0.5rem; + font-size: 1.5rem; color: var(--color-text-secondary); } .searchTypes { + overflow-x: scroll; display: flex; flex-shrink: 0; - padding-block: 1rem; margin-inline: 1rem; - + padding-block: 1rem; border-bottom: 1px solid var(--color-borders); - - overflow-x: scroll; } .searchType { @@ -216,16 +218,17 @@ flex-grow: 0 !important; flex-shrink: 0; - color: var(--color-text-secondary); - background-color: var(--color-item-active); - font-weight: var(--font-weight-medium); - margin-bottom: 0; + + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); + + background-color: var(--color-item-active); } .selectedType { - background-color: var(--color-primary); color: var(--color-white) !important; + background-color: var(--color-primary); &:hover { background-color: var(--color-primary-shade); @@ -233,22 +236,24 @@ } .footer { + pointer-events: auto; + position: absolute; bottom: 0; left: 0; - width: 100%; - height: 3.5rem; - background-color: var(--color-background); + transform: translateY(100%); + display: flex; align-items: center; - padding-left: max(1rem, env(safe-area-inset-left)); + + width: 100%; + height: 3.5rem; padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(1rem, env(safe-area-inset-left)); - pointer-events: auto; - + background-color: var(--color-background); box-shadow: 0 -2px 2px var(--color-light-shadow); - transform: translateY(100%); transition: transform 200ms ease-in-out; .active & { @@ -257,14 +262,14 @@ :global { body:not(.keyboard-visible) & { - padding-bottom: 0; height: 3.5rem; + padding-bottom: 0; } @media (max-width: 600px) { body:not(.keyboard-visible) & { - padding-bottom: env(safe-area-inset-bottom); height: calc(3.5rem + env(safe-area-inset-bottom)); + padding-bottom: env(safe-area-inset-bottom); } } } @@ -279,6 +284,7 @@ position: absolute; right: 0.5rem; bottom: 4rem; + display: flex; flex-direction: column; gap: 0.5rem; diff --git a/src/components/middle/search/MiddleSearchResult.module.scss b/src/components/middle/search/MiddleSearchResult.module.scss index 3be756a11..c63d18a5f 100644 --- a/src/components/middle/search/MiddleSearchResult.module.scss +++ b/src/components/middle/search/MiddleSearchResult.module.scss @@ -1,13 +1,33 @@ .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.375rem 0.75rem; border-radius: 0.625rem; + + font-size: 0.875rem; + color: var(--color-text); + outline: none; - color: var(--color-text); - font-size: 0.875rem; - cursor: var(--custom-cursor, pointer); + :global { + .matching-text-highlight { + display: inline-block; + + padding: 0 0.125rem; + border-radius: 0.25rem; + + color: var(--color-text); + + background: #cae3f7; + + :global(.theme-dark) & { + --color-text: #000; + } + } + } @media (hover: hover) { &:hover, @@ -16,27 +36,13 @@ background-color: var(--color-chat-hover); } } - - :global { - .matching-text-highlight { - color: var(--color-text); - background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; - display: inline-block; - - :global(.theme-dark) & { - --color-text: #000; - } - } - } } .info { + overflow: hidden; display: flex; flex-direction: column; flex-grow: 1; - overflow: hidden; } .topRow { @@ -50,9 +56,11 @@ .subtitle { position: relative; - color: var(--color-text-secondary); + overflow: hidden; + + line-height: 1.25; + color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; - line-height: 1.25; } diff --git a/src/components/modals/aboutAds/AboutAdsModal.module.scss b/src/components/modals/aboutAds/AboutAdsModal.module.scss index e514420c3..73a0b13f2 100644 --- a/src/components/modals/aboutAds/AboutAdsModal.module.scss +++ b/src/components/modals/aboutAds/AboutAdsModal.module.scss @@ -3,9 +3,9 @@ } .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .moreButton { diff --git a/src/components/modals/boost/BoostModal.module.scss b/src/components/modals/boost/BoostModal.module.scss index 0199849e8..7279fd621 100644 --- a/src/components/modals/boost/BoostModal.module.scss +++ b/src/components/modals/boost/BoostModal.module.scss @@ -1,9 +1,10 @@ .content { + overflow: hidden; display: flex; flex-direction: column; gap: 1rem; + min-height: 14rem; - overflow: hidden; } .modal { @@ -13,10 +14,9 @@ :global(.modal-title) { overflow: hidden; + padding-left: 0.5rem; text-overflow: ellipsis; white-space: nowrap; - - padding-left: 0.5rem; } } @@ -51,9 +51,10 @@ .avatarContainer { display: flex; - align-self: center; gap: 0.25rem; align-items: center; + align-self: center; + margin-bottom: 0.5rem; } @@ -68,17 +69,21 @@ .boostedMark { position: absolute; - bottom: -0.125rem; + z-index: 10; right: -0.125rem; - font-size: 1.25rem; - background-color: var(--color-background); + bottom: -0.125rem; + padding: 0.125rem; border-radius: 50%; - z-index: 10; + + font-size: 1.25rem; + + background-color: var(--color-background); &::before { background-image: var(--premium-gradient); background-clip: text; + -webkit-text-fill-color: transparent; } } diff --git a/src/components/modals/chatInvite/ChatInviteModal.module.scss b/src/components/modals/chatInvite/ChatInviteModal.module.scss index 6ceb0d874..b67bad464 100644 --- a/src/components/modals/chatInvite/ChatInviteModal.module.scss +++ b/src/components/modals/chatInvite/ChatInviteModal.module.scss @@ -13,15 +13,15 @@ } .participants { - display: flex; overflow-x: scroll; + display: flex; gap: 0.5rem; align-self: stretch; } .participant { - min-width: 4.5rem; width: 4.5rem; + min-width: 4.5rem; margin-inline: auto; } diff --git a/src/components/modals/chatlist/ChatlistModal.module.scss b/src/components/modals/chatlist/ChatlistModal.module.scss index 2cbb633bd..9052b19ff 100644 --- a/src/components/modals/chatlist/ChatlistModal.module.scss +++ b/src/components/modals/chatlist/ChatlistModal.module.scss @@ -1,7 +1,7 @@ .description { - text-align: center; - color: var(--color-text-secondary); margin-bottom: 1rem; + color: var(--color-text-secondary); + text-align: center; } .picker-wrapper { @@ -20,8 +20,8 @@ } .selection-toggle { - color: var(--color-links); cursor: var(--custom-cursor, pointer); + color: var(--color-links); } .foldersWrapper { @@ -30,18 +30,21 @@ } .folders { - display: flex; - justify-content: center; - gap: 0.5rem; - position: relative; + + display: flex; + gap: 0.5rem; + justify-content: center; + margin-bottom: 1rem; &::after { content: ''; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; @@ -66,7 +69,7 @@ .button-badge { position: absolute; - right: -0.25rem; top: 50%; + right: -0.25rem; transform: translate(100%, -50%); } diff --git a/src/components/modals/collectible/CollectibleInfoModal.module.scss b/src/components/modals/collectible/CollectibleInfoModal.module.scss index f9a50f4a1..589e99458 100644 --- a/src/components/modals/collectible/CollectibleInfoModal.module.scss +++ b/src/components/modals/collectible/CollectibleInfoModal.module.scss @@ -11,21 +11,21 @@ } .icon { + display: grid; + flex-shrink: 0; + place-items: center; + width: 5rem; height: 5rem; border-radius: 50%; - display: grid; - place-items: center; - - flex-shrink: 0; background-color: var(--color-primary); } .title, .description { + padding: 0 1rem; text-align: center !important; text-wrap: pretty; - padding: 0 1rem; } .title { diff --git a/src/components/modals/common/TableAboutModal.module.scss b/src/components/modals/common/TableAboutModal.module.scss index 517c9eeea..aaa151c82 100644 --- a/src/components/modals/common/TableAboutModal.module.scss +++ b/src/components/modals/common/TableAboutModal.module.scss @@ -1,12 +1,12 @@ .root :global(.modal-dialog) { - width: 26.25rem; overflow: hidden; + width: 26.25rem; } .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .secondary { @@ -15,17 +15,20 @@ .topIcon { --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); - display: grid; - place-items: center; - flex-shrink: 0; - border-radius: 50%; - background: var(--premium-gradient); - font-size: 4rem; - color: white; + display: grid; + flex-shrink: 0; + place-items: center; + width: 6rem; height: 6rem; margin-bottom: 1rem; + border-radius: 50%; + + font-size: 4rem; + color: white; + + background: var(--premium-gradient); } .listItemIcon { @@ -33,13 +36,13 @@ } .content { + overflow-x: hidden; display: flex; flex-direction: column; align-items: center; - overflow-x: hidden; } .separator { - margin-block: 1rem; width: calc(100% + 2rem); // Hack to cover modal paddings + margin-block: 1rem; } diff --git a/src/components/modals/common/TableInfoModal.module.scss b/src/components/modals/common/TableInfoModal.module.scss index 7ee47bdff..7a1df5ebf 100644 --- a/src/components/modals/common/TableInfoModal.module.scss +++ b/src/components/modals/common/TableInfoModal.module.scss @@ -1,12 +1,13 @@ @use '../../../styles/mixins'; .content { + overflow-x: hidden; display: flex; flex-direction: column; gap: 1rem; - padding-inline: 1rem !important; + max-height: min(92vh, 45rem) !important; - overflow-x: hidden; + padding-inline: 1rem !important; } .title { @@ -14,22 +15,22 @@ } .value { - background-color: var(--color-background); - overflow-wrap: anywhere; min-width: 2rem; + overflow-wrap: anywhere; + background-color: var(--color-background); } .table { + overflow: hidden; display: grid; grid-template-columns: max-content 1fr; - border-radius: 0.3125rem; - border: 1px solid var(--color-borders); - background-color: var(--color-borders); + flex-shrink: 0; gap: 1px; - flex-shrink: 0; + border: 1px solid var(--color-borders); + border-radius: 0.3125rem; - overflow: hidden; + background-color: var(--color-borders); } .noFooter { @@ -37,11 +38,14 @@ } .cell { + position: relative; + display: flex; align-items: center; - padding: 0.25rem 0.5rem; - position: relative; + min-height: 2.5rem; + padding: 0.25rem 0.5rem; + font-size: 0.9375rem; } @@ -55,6 +59,6 @@ .chatItem { width: fit-content; - background-color: var(--color-background); color: var(--color-primary); + background-color: var(--color-background); } diff --git a/src/components/modals/frozenAccount/FrozenAccountModal.module.scss b/src/components/modals/frozenAccount/FrozenAccountModal.module.scss index b7c7c560c..bd55624f3 100644 --- a/src/components/modals/frozenAccount/FrozenAccountModal.module.scss +++ b/src/components/modals/frozenAccount/FrozenAccountModal.module.scss @@ -1,24 +1,25 @@ .header { - margin-top: 0.5rem; - margin-bottom: 0.75rem; display: flex; flex-direction: column; align-items: center; + width: 100%; + margin-top: 0.5rem; + margin-bottom: 0.75rem; } .title { - font-weight: var(--font-weight-medium); - font-size: 1.25rem; - text-align: center; padding-top: 0.5rem; + font-size: 1.25rem; + font-weight: var(--font-weight-medium); + text-align: center; } .footer { - margin-top: 0.5rem; display: flex; - align-self: stretch; flex-direction: column; + align-self: stretch; + margin-top: 0.5rem; } .buttonAppeal { diff --git a/src/components/modals/gift/GiftComposer.module.scss b/src/components/modals/gift/GiftComposer.module.scss index 3d34df497..12fae023a 100644 --- a/src/components/modals/gift/GiftComposer.module.scss +++ b/src/components/modals/gift/GiftComposer.module.scss @@ -1,11 +1,12 @@ @use "../../../styles/mixins"; .root { - height: 100%; + overflow-x: hidden; + overflow-y: scroll; display: flex; flex-direction: column; - overflow-y: scroll; - overflow-x: hidden; + + height: 100%; padding-top: 3.5rem; padding-inline: 0.75rem; @@ -13,11 +14,12 @@ } .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem; padding-left: 4rem; - display: flex; - justify-content: space-between; - align-items: center; } .spacer { @@ -31,10 +33,10 @@ } .balance-container { - margin-left: auto; - align-items: flex-end; display: flex; flex-direction: column; + align-items: flex-end; + margin-left: auto; } .balance-caption { @@ -47,9 +49,9 @@ .balance { display: flex; + align-items: center; font-size: 1rem; font-weight: var(--font-weight-medium); - align-items: center; } .optionsSection { @@ -59,47 +61,44 @@ } .checkboxTitle { - color: var(--color-text); - font-size: 1rem; - text-transform: initial; margin: 0; + font-size: 1rem; + color: var(--color-text); + text-transform: initial; } .actionMessageView { - display: grid; - place-content: center; - height: 22.5rem; - margin-bottom: 0; - margin-top: 0.75rem; - - padding: 0.5rem; - position: relative; - overflow: hidden; - flex: 0 0 auto; + overflow: hidden; + display: grid; + flex: 0 0 auto; + place-content: center; + + height: 22.5rem; + margin-top: 0.75rem; + margin-bottom: 0; + padding: 0.5rem; border-radius: var(--border-radius-default); background-color: var(--theme-background-color); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 100% 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) & { @@ -112,6 +111,10 @@ height: calc(var(--vh, 1vh) * 100); } } + + :global(html.theme-light) & { + background-image: url('../../../assets/chat-bg-br.png'); + } } .messageInput, .limited { @@ -119,15 +122,17 @@ } .footer { - display: flex; - justify-content: space-between; - padding: 1rem; - margin-inline: -0.75rem; // Account for padding - flex-direction: column; - background-color: var(--color-background-secondary); - position: sticky; bottom: 0; + + display: flex; + flex-direction: column; + justify-content: space-between; + + margin-inline: -0.75rem; // Account for padding + padding: 1rem; + + background-color: var(--color-background-secondary); } .switcher { @@ -140,20 +145,21 @@ } .description { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-bottom: 0.5rem; margin-left: 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .main-button { display: flex; - font-weight: var(--font-weight-semibold); font-size: 1rem; + font-weight: var(--font-weight-semibold); } .star { --color-fill: var(--color-white); + width: 1rem; height: 1rem; margin-right: 0.1875rem; @@ -163,21 +169,25 @@ .background { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -190,8 +200,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -206,14 +216,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -235,15 +237,17 @@ &:not(.customBgImage):not(.customBgColor)::after { 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) & { @@ -251,4 +255,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/modals/gift/GiftItem.module.scss b/src/components/modals/gift/GiftItem.module.scss index 699782d7f..6e87069f7 100644 --- a/src/components/modals/gift/GiftItem.module.scss +++ b/src/components/modals/gift/GiftItem.module.scss @@ -1,32 +1,39 @@ .container { + cursor: var(--custom-cursor, pointer); + + position: relative; + display: flex; + flex-basis: 0; flex-direction: column; + flex-grow: 1; align-items: center; justify-content: center; - flex-grow: 1; - flex-basis: 0; + min-width: 0; padding: 0.625rem; padding-top: 0; border-radius: 0.625rem; + background-color: var(--color-background-secondary); - position: relative; - cursor: var(--custom-cursor, pointer); + + &::before { + pointer-events: none; + content: ""; + + position: absolute; + inset: 0; + + border-radius: 0.625rem; + + opacity: 0; + background-color: var(--color-hover-overlay); + } :global(html.theme-dark) & { background-color: var(--color-background); } - &::before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - border-radius: 0.625rem; - background-color: var(--color-hover-overlay); - pointer-events: none; - } - &:hover::before { opacity: 1; } @@ -43,20 +50,21 @@ } .description { - font-size: 0.875rem; - line-height: 1; + overflow: hidden; max-width: 100%; + + font-size: 0.875rem; + line-height: 1; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } .buy { - font-size: 0.6875rem !important; margin-top: 0.625rem; - line-height: 1; + font-size: 0.6875rem !important; font-weight: var(--font-weight-semibold) !important; + line-height: 1; } .star { @@ -69,9 +77,9 @@ } .starsPriceBlock { - color: var(--color-stars); margin-top: 0.5rem; font-size: 0.75rem; + color: var(--color-stars); } .starsPriceIcon { diff --git a/src/components/modals/gift/GiftModal.module.scss b/src/components/modals/gift/GiftModal.module.scss index 12e0a39c4..def4ff5be 100644 --- a/src/components/modals/gift/GiftModal.module.scss +++ b/src/components/modals/gift/GiftModal.module.scss @@ -51,34 +51,40 @@ .starGiftsContainer, .premiumGiftsGallery { display: flex; - justify-content: center; - align-items: center; gap: 0.625rem; + align-items: center; + justify-content: center; + margin-bottom: 0.75rem; } .starGiftsContainer { display: grid; grid-template-columns: repeat(3, 1fr); + margin: 0rem; padding: 0.125rem; padding-top: 0.75rem; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + + overflow: hidden; display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; - overflow: hidden; } .headerSlide { @@ -87,9 +93,9 @@ } .headerText { + margin-bottom: 0; font-size: 1.5rem; font-weight: var(--font-weight-medium); - margin-bottom: 0; } .hiddenHeader { @@ -97,36 +103,38 @@ } .commonHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 4.5rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 4.5rem; - unicode-bidi: plaintext; } .closeButton { position: absolute; + z-index: 3; top: 0.375rem; left: 0.375rem; - z-index: 3; } .balance { position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; } .avatars { - display: flex; position: relative; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 1rem; - padding: 1rem; - margin-top: 1rem; z-index: 1; + + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + justify-content: center; + + margin-top: 1rem; + padding: 1rem; } .logoBackground { @@ -141,10 +149,10 @@ } .description { - text-align: center; - line-height: 1.375; - margin: 0.25rem 1rem 1rem; max-width: 25rem; + margin: 0.25rem 1rem 1rem; + line-height: 1.375; + text-align: center; } .starGiftsDescription { @@ -152,9 +160,9 @@ } .boostIcon { + line-height: 1.5; color: var(--color-primary); vertical-align: middle; - line-height: 1.5; } .optionBottom { @@ -163,10 +171,10 @@ } .secondaryInfo { - text-align: center; + padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--color-text-secondary); - padding: 0.5rem 1rem; + text-align: center; } .footer { @@ -175,6 +183,6 @@ .starGiftsTransition { overflow: hidden; - min-height: calc(100% - 3.5rem); height: auto; + min-height: calc(100% - 3.5rem); } diff --git a/src/components/modals/gift/StarGiftCategoryList.module.scss b/src/components/modals/gift/StarGiftCategoryList.module.scss index 4cda91b08..a767f8872 100644 --- a/src/components/modals/gift/StarGiftCategoryList.module.scss +++ b/src/components/modals/gift/StarGiftCategoryList.module.scss @@ -1,23 +1,25 @@ @use '../../../styles/mixins'; .list { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 0.0625rem; - flex-wrap: nowrap; - background-color: var(--color-background); - overflow-x: auto; - overflow-y: hidden; z-index: 1; - font-size: 0.875rem; - padding-block: 0.25rem; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-shrink: 0; + flex-wrap: nowrap; + gap: 0.0625rem; + align-items: center; justify-content: flex-start; // Prevent first item from being always partially obscured margin-left: -0.5rem; padding-left: 0.5rem; + padding-block: 0.25rem; + + font-size: 0.875rem; + + background-color: var(--color-background); :global(html.theme-dark) & { background-color: #181818; @@ -31,12 +33,14 @@ display: flex; align-items: center; justify-content: center; - white-space: nowrap; + width: auto; padding: 0.375rem 0.75rem; + border-radius: 1rem; + font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - border-radius: 1rem; + white-space: nowrap; &:hover { cursor: pointer; @@ -45,8 +49,8 @@ } .selected-item { - background-color: var(--color-background-secondary); color: var(--color-text-secondary); + background-color: var(--color-background-secondary); } :global(html.theme-dark) { diff --git a/src/components/modals/gift/UniqueGiftHeader.module.scss b/src/components/modals/gift/UniqueGiftHeader.module.scss index 2270a24c4..6b5520d40 100644 --- a/src/components/modals/gift/UniqueGiftHeader.module.scss +++ b/src/components/modals/gift/UniqueGiftHeader.module.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; align-items: center; + width: 100%; height: var(--_height); margin-bottom: 0.5rem; @@ -12,21 +13,21 @@ .radialPattern { position: absolute; - inset: -5%; - top: -5rem; - height: calc(var(--height) * 1.05); - z-index: -1; + inset: -5rem -5% -5% -5%; + height: calc(var(--height) * 1.05); } .amount { display: flex; gap: 0.25rem; + align-items: center; + + margin-bottom: 0.125rem; + font-size: 1.125rem; font-weight: var(--font-weight-medium); line-height: 1.325; - margin-bottom: 0.125rem; - align-items: center; color: white; } @@ -37,8 +38,8 @@ .transition { position: absolute; top: 0; - height: calc(var(--_height) + 1rem); // Account for top modal padding overflow: hidden; + height: calc(var(--_height) + 1rem); // Account for top modal padding } .transitionSlide { @@ -48,20 +49,22 @@ } .title { + margin-top: auto; font-size: 1.25rem; color: white; - margin-top: auto; } .subtitle { max-width: 75%; + font-size: 0.875rem; - transition: color 150ms ease-in; text-align: center; text-wrap: balance; + + transition: color 150ms ease-in; } .title, .subtitle { - margin-bottom: 0; z-index: 1; + margin-bottom: 0; } diff --git a/src/components/modals/gift/info/GiftInfoModal.module.scss b/src/components/modals/gift/info/GiftInfoModal.module.scss index b6726ab76..dd64b03c6 100644 --- a/src/components/modals/gift/info/GiftInfoModal.module.scss +++ b/src/components/modals/gift/info/GiftInfoModal.module.scss @@ -5,8 +5,9 @@ .header { display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; + margin-bottom: 1rem; } @@ -19,30 +20,33 @@ } .headerSplitButton { - display: flex; - flex-direction: row; position: absolute; right: 0.375rem; + display: flex; + flex-direction: row; } .headerButton, .giftResalePriceContainer { - height: 1.75rem; - width: fit-content; - font-size: 1rem; - font-weight: var(--font-weight-medium); - - outline: none !important; - align-items: center; - display: flex; - justify-content: center; - color: white; - border-radius: 1rem; - background-color: rgba(0, 0, 0, 0.2); - backdrop-filter: blur(25px); pointer-events: auto; + + display: flex; + align-items: center; + justify-content: center; + + width: fit-content; + height: 1.75rem; padding: 0.25rem; padding-inline: 0.625rem; + border-radius: 1rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: white; + + background-color: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(25px); + outline: none !important; } .giftResalePriceContainer { @@ -54,10 +58,13 @@ } .headerButton { - position: relative; cursor: var(--custom-cursor, pointer); - flex-shrink: 0; + + position: relative; + overflow: hidden; + flex-shrink: 0; + transition: background-color 0.15s; &:hover { @@ -66,18 +73,18 @@ } .left { - border-bottom-right-radius: 0; border-top-right-radius: 0; + border-bottom-right-radius: 0; } .right { - border-bottom-left-radius: 0; border-top-left-radius: 0; + border-bottom-left-radius: 0; } .description { - text-align: center; color: var(--_color-description, var(--color-text)); + text-align: center; } .footer { @@ -98,15 +105,15 @@ .giftValue { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; line-height: 1; } .uniqueAttribute { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; } /* stylelint-disable-next-line plugin/stylelint-group-selectors */ @@ -119,11 +126,13 @@ } .modalHeader { + position: absolute; z-index: 2; + + display: flex; + width: 100%; padding: 0.375rem; - position: absolute; - display: flex; .modalCloseButton { margin-right: auto; @@ -131,15 +140,14 @@ } .ownerAddress { + cursor: pointer; + overflow: hidden; font-family: var(--font-family-monospace); font-size: 0.875rem; - cursor: pointer; - - overflow: hidden; } .copyIcon { + pointer-events: none; margin-inline-start: 0.25rem; color: var(--color-primary); - pointer-events: none; } diff --git a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss index 4e02123da..e697847d7 100644 --- a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss +++ b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss @@ -1,9 +1,11 @@ .descriptionContainer { - color: var(--color-text-secondary); - font-size: 0.875rem; + display: flex; + margin-bottom: 2rem; margin-inline: 1rem; - display: flex; + + font-size: 0.875rem; + color: var(--color-text-secondary); } .descriptionPrice { diff --git a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss index 011a5f403..dfb197ac9 100644 --- a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss +++ b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss @@ -18,16 +18,17 @@ .radialPattern { position: absolute; - inset-inline-start: -1.5rem; - height: calc(100% + 2rem); - top: -3rem; - width: calc(100% + 3rem); z-index: -1; + top: -3rem; + inset-inline-start: -1.5rem; + + width: calc(100% + 3rem); + height: calc(100% + 2rem); } .lockIcon { - font-size: 1rem; margin-left: 0.25rem; + font-size: 1rem; } .avatar { @@ -35,30 +36,32 @@ } .userTitle { + justify-content: center; + + width: 100%; + margin-top: auto; + padding-top: 1rem; + font-size: 1.25rem; color: white; - margin-top: auto; - width: 100%; - justify-content: center; - padding-top: 1rem; } .status { + padding-bottom: 1rem; font-size: 0.875rem; text-align: center; - padding-bottom: 1rem; } .userTitle, .status { - margin-bottom: 0; z-index: 1; + margin-bottom: 0; } .giftTitle { - font-weight: var(--font-weight-medium); - font-size: 1.5rem; - text-align: center; padding-bottom: 0.5rem; + font-size: 1.5rem; + font-weight: var(--font-weight-medium); + text-align: center; } .infoDescription { @@ -66,7 +69,7 @@ } .footer { - margin-top: 0.5rem; display: flex; align-self: stretch; + margin-top: 0.5rem; } diff --git a/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss b/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss index 6cdfe382a..4c5774a78 100644 --- a/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss +++ b/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: 0.75rem; - align-self: stretch; } diff --git a/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss b/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss index a38df4cf2..aec45b862 100644 --- a/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss +++ b/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss @@ -1,21 +1,21 @@ .header { display: flex; - justify-content: center; - align-items: center; gap: 0.5rem; + align-items: center; + justify-content: center; margin-bottom: 1rem; } .giftPreview { - width: 5.625rem; - height: 5.625rem; position: relative; + overflow: hidden; display: grid; place-items: center; - overflow: hidden; + width: 5.625rem; + height: 5.625rem; border-radius: 0.625rem; } @@ -25,8 +25,8 @@ } .description { - text-wrap: pretty; margin-bottom: 1.5rem; + text-wrap: pretty; } .arrow { diff --git a/src/components/modals/giftcode/GiftCodeModal.module.scss b/src/components/modals/giftcode/GiftCodeModal.module.scss index 022a46fd6..7a8d7b842 100644 --- a/src/components/modals/giftcode/GiftCodeModal.module.scss +++ b/src/components/modals/giftcode/GiftCodeModal.module.scss @@ -1,6 +1,6 @@ .clickable { - color: var(--color-primary); cursor: pointer; + color: var(--color-primary); } .centered { @@ -8,8 +8,8 @@ } .logo { + align-self: center; width: 7.5rem; height: 7.5rem; margin-bottom: 1rem; - align-self: center; } diff --git a/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss b/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss index 9b163ecf6..cb9aa59df 100644 --- a/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss +++ b/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss @@ -6,9 +6,9 @@ .closeButton { position: absolute; + z-index: 1; top: 0.5rem; left: 0.5rem; - z-index: 1; } .contentText { @@ -18,9 +18,9 @@ } .title { - font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0; + font-size: 1.25rem; } .separator { diff --git a/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss b/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss index e6a55c3b2..7a4ba1ddc 100644 --- a/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss +++ b/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss @@ -1,18 +1,22 @@ .root { position: absolute; + z-index: var(--z-modal-confirm); top: 0; left: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; height: 100%; - display: flex; - justify-content: center; - flex-direction: column; - backdrop-filter: blur(2rem); - animation: fade-in-opacity 0.3s ease; + background-color: rgba(0, 0, 0, 0.5); - z-index: var(--z-modal-confirm); - align-items: center; + backdrop-filter: blur(2rem); + transition: opacity 0.3s ease; + animation: fade-in-opacity 0.3s ease; &.closing { opacity: 0; @@ -33,13 +37,14 @@ position: absolute; bottom: 0; left: 0; + width: 100%; margin-bottom: 2rem; } .closeBtn { - margin: 0 auto; width: auto; + margin: 0 auto; } @keyframes fade-in-opacity { diff --git a/src/components/modals/paidReaction/PaidReactionModal.module.scss b/src/components/modals/paidReaction/PaidReactionModal.module.scss index 45a96663e..ca8790f9e 100644 --- a/src/components/modals/paidReaction/PaidReactionModal.module.scss +++ b/src/components/modals/paidReaction/PaidReactionModal.module.scss @@ -6,14 +6,14 @@ } .title { - font-size: 1.5rem; - margin-bottom: 0; margin-top: 1.25rem; + margin-bottom: 0; + font-size: 1.5rem; } .slider { - margin-top: 2rem; flex-shrink: 0; + margin-top: 2rem; } .description { @@ -25,28 +25,29 @@ } .itemInfo { - flex-grow: 1; overflow: hidden; - height: auto; display: flex; flex-direction: column; + flex-grow: 1; + + height: auto; margin-left: 0.5rem; } .itemTitle { - line-height: 1rem; margin-bottom: 0.125rem; + line-height: 1rem; } .itemSubtitle { font-size: 0.9375rem; - color: var(--color-text-secondary); line-height: 1rem; + color: var(--color-text-secondary); } .itemIcon { - margin-left: 0.5rem; margin-right: 0 !important; + margin-left: 0.5rem; } .sendAsPeerButtonAvatar { @@ -54,14 +55,16 @@ } .sendAsPeerMenuButton { - transition: background-color 0.15s; - margin-right: 0.25rem; - border-radius: 1.5rem; - padding: 0.25rem !important; width: auto; height: auto !important; + margin-right: 0.25rem; + padding: 0.25rem !important; + border-radius: 1.5rem; + background-color: var(--color-background-secondary) !important; + transition: background-color 0.15s; + &:global(.active), &:active, &:hover { @@ -70,18 +73,20 @@ } .buttonDownIcon { - margin-left: 0.25rem; margin-right: 0.125rem; + margin-left: 0.25rem; } .sendAsPeerMenuBubble { - max-height: 15rem; - overflow-y: auto !important; right: auto !important; left: 50%; - transform: translateX(-50%) scale(0.85) !important; transform-origin: center !important; + transform: translateX(-50%) scale(0.85) !important; + + overflow-y: auto !important; + max-width: 16rem; + max-height: 15rem; &:global(.open) { transform: translateX(-50%) scale(1) !important; @@ -93,20 +98,22 @@ } .sendAsPeersMenuContainer { - z-index: 3; - display: flex; position: absolute; + z-index: 3; left: 50%; transform: translateX(-50%); + + display: flex; } .headerControlPanel { - display: flex; - align-items: center; position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; + + display: flex; + align-items: center; } .separator { @@ -118,10 +125,10 @@ } .topLabel { - background-image: var(--stars-gradient); - color: var(--color-white); - border-radius: 1rem; padding: 0.25rem 0.75rem; + border-radius: 1rem; + color: var(--color-white); + background-image: var(--stars-gradient); } .top { @@ -145,9 +152,11 @@ } .disclaimer { - font-size: 0.875rem; align-self: center; - color: var(--color-text-secondary); + margin-top: 0.5rem; margin-bottom: 0.125rem; + + font-size: 0.875rem; + color: var(--color-text-secondary); } diff --git a/src/components/modals/paidReaction/StarSlider.module.scss b/src/components/modals/paidReaction/StarSlider.module.scss index f199f0ae0..c875171f1 100644 --- a/src/components/modals/paidReaction/StarSlider.module.scss +++ b/src/components/modals/paidReaction/StarSlider.module.scss @@ -5,16 +5,16 @@ --progress: 0; position: relative; - padding-top: 4rem; overflow-x: hidden; + padding-top: 4rem; @include mixins.reset-range(); } .slider { + cursor: pointer; height: var(--_size) !important; margin-bottom: 0 !important; - cursor: pointer; &::-webkit-slider-runnable-track { height: var(--_size); @@ -29,59 +29,69 @@ } &::-webkit-slider-thumb { - height: var(--_size); width: var(--_size); - background-color: transparent; + height: var(--_size); border: none; + + background-color: transparent; outline: none; box-shadow: none; } &::-moz-range-thumb { - height: var(--_size); width: var(--_size); - background-color: transparent; + height: var(--_size); border: none; + + background-color: transparent; outline: none; box-shadow: none; } } .sparkles { - left: 0; - bottom: 0; - height: var(--_size); - pointer-events: none; --_width: calc(100% - 1rem); - mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem)); + + pointer-events: none; + + bottom: 0; + left: 0; + + height: var(--_size); color: white; + + mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem)); } .progress { - position: absolute; - left: 0; - bottom: 0; - height: var(--_size); pointer-events: none; - border-radius: 1rem; - min-width: var(--_size); + position: absolute; + bottom: 0; + left: 0; + width: calc(var(--_size) + (var(--progress) * (100% - var(--_size)))); + min-width: var(--_size); + height: var(--_size); + border-radius: 1rem; background-image: var(--stars-gradient); &::after { content: ""; + position: absolute; - right: 0.125rem; + z-index: 1; top: 0.125rem; + right: 0.125rem; + width: 1.625rem; height: 1.625rem; border-radius: 50%; + background-color: white; - z-index: 1; } } @@ -89,9 +99,11 @@ --_min-x: 0; --_max-x: 100%; + pointer-events: none; + position: absolute; - left: 0; right: 0; + left: 0; transform: translateX( clamp( @@ -100,11 +112,11 @@ var(--_max-x), ) ); - pointer-events: none; } .floatingBadge { --_speed: 0; + position: absolute; top: -1rem; left: 0; @@ -113,25 +125,25 @@ .floatingBadgeText { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; padding: 0.5rem 1rem; border-radius: 2rem; - background-image: var(--stars-gradient); - - line-height: 1; font-size: 1.5rem; font-weight: var(--font-weight-medium); + line-height: 1; color: white; white-space: nowrap; + + background-image: var(--stars-gradient); } .floatingBadgeTriangle { position: absolute; - left: 50%; - bottom: 0; - transform: translate(-50%, 33%); z-index: -1; + bottom: 0; + left: 50%; + transform: translate(-50%, 33%); } diff --git a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss index d94bc3fda..ea946e31f 100644 --- a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss +++ b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss @@ -16,9 +16,9 @@ .container { padding: 1rem; - background-color: var(--color-background-secondary); - border-bottom-left-radius: var(--border-radius-modal); border-bottom-right-radius: var(--border-radius-modal); + border-bottom-left-radius: var(--border-radius-modal); + background-color: var(--color-background-secondary); } .header { @@ -29,48 +29,37 @@ } .actionMessageView { - display: grid; - place-content: center; - min-height: 22.5rem; - height: 100%; - position: relative; + overflow: hidden; + display: grid; flex: 0 0 auto; + place-content: center; - margin: 0.75rem; width: calc(100% - 1.5rem); - + height: 100%; + min-height: 22.5rem; + margin: 0.75rem; border-radius: var(--border-radius-default); background-color: var(--theme-background-color); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 100% 100%; - :global(.Message) { - padding: 1rem; - } - - :global(.message-content) { - max-width: 20rem; - } - - :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) & { @@ -83,6 +72,18 @@ height: calc(var(--vh, 1vh) * 100); } } + + :global(.Message) { + padding: 1rem; + } + + :global(.message-content) { + max-width: 20rem; + } + + :global(html.theme-light) & { + background-image: url('../../../assets/chat-bg-br.png'); + } } .info { @@ -94,21 +95,25 @@ .background { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -121,8 +126,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -137,14 +142,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -166,15 +163,17 @@ &:not(.customBgImage):not(.customBgColor)::after { 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) & { @@ -182,4 +181,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/modals/reportAd/ReportAdModal.module.scss b/src/components/modals/reportAd/ReportAdModal.module.scss index e05987c9e..c5efe2895 100644 --- a/src/components/modals/reportAd/ReportAdModal.module.scss +++ b/src/components/modals/reportAd/ReportAdModal.module.scss @@ -14,8 +14,8 @@ } .optionText { - width: 100%; overflow: hidden; + width: 100%; text-overflow: ellipsis; white-space: nowrap; } @@ -29,15 +29,15 @@ } .sectionTitle { - color: var(--color-primary); padding-inline: 1rem; + color: var(--color-primary); } .description { margin-top: 0.75rem; margin-bottom: 0; - color: var(--color-text-secondary); padding-inline: 1rem; + color: var(--color-text-secondary); } .title { @@ -54,7 +54,7 @@ } .transition { + overflow: hidden; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 0.25s ease-in-out; - overflow: hidden; } diff --git a/src/components/modals/reportModal/ReportModal.module.scss b/src/components/modals/reportModal/ReportModal.module.scss index 5343debf0..27c09c2fb 100644 --- a/src/components/modals/reportModal/ReportModal.module.scss +++ b/src/components/modals/reportModal/ReportModal.module.scss @@ -24,10 +24,10 @@ } .optionText { - width: 100%; overflow: hidden; - white-space: normal; + width: 100%; word-wrap: break-word; + white-space: normal; } .option { @@ -35,23 +35,24 @@ } .optionButton { - padding-block: 0 !important; padding: 0 0 0 1rem !important; + padding-block: 0 !important; } .sectionTitle { - color: var(--color-primary); - padding-inline: 1rem; margin-top: 0.75rem; - font-weight: var(--font-weight-medium); + padding-inline: 1rem; + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: var(--color-primary); } .description { margin-top: 0.75rem; margin-bottom: 0; - color: var(--color-text-secondary); padding-inline: 1rem; + color: var(--color-text-secondary); } .title { @@ -73,9 +74,9 @@ } .transition { + overflow: hidden; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 0.25s ease-in-out; - overflow: hidden; } .block { @@ -83,6 +84,7 @@ flex-direction: column; align-items: center; justify-content: center; + padding: 0 1rem; } diff --git a/src/components/modals/stars/StarTopupOptionList.module.scss b/src/components/modals/stars/StarTopupOptionList.module.scss index 6b37bba0a..49f44cdfd 100644 --- a/src/components/modals/stars/StarTopupOptionList.module.scss +++ b/src/components/modals/stars/StarTopupOptionList.module.scss @@ -9,19 +9,21 @@ .option { --_background-color: var(--color-background-secondary); + + cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: column; + gap: 0.125rem; align-items: center; justify-content: center; - gap: 0.125rem; padding: 1rem; border-radius: 0.625rem; background-color: var(--_background-color); - transition: background-color 0.25s ease-out; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { --_background-color: var(--color-background-secondary-accent); @@ -38,11 +40,11 @@ .optionTop { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; - font-weight: var(--font-weight-medium); font-size: 1.5rem; + font-weight: var(--font-weight-medium); line-height: 1; } @@ -55,6 +57,7 @@ .stackedStar { @include mixins.filter-outline(0.0625rem, var(--_background-color)); + transition: filter 0.25s ease-out; } diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss index 702eb9753..15ea23347 100644 --- a/src/components/modals/stars/StarsBalanceModal.module.scss +++ b/src/components/modals/stars/StarsBalanceModal.module.scss @@ -9,8 +9,8 @@ } .root :global(.modal-dialog) { - height: min(45rem, 90vh); max-width: 26.25rem; + height: min(45rem, 90vh); } .minimal :global(.modal-dialog) { @@ -24,8 +24,8 @@ } .main { - height: 100%; overflow-y: scroll; + height: 100%; } .container { @@ -34,38 +34,43 @@ } .section { + position: relative; + display: flex; flex-direction: column; align-items: center; padding: 0.5rem; - position: relative; @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; } .sectionTitle { - color: var(--color-primary); - font-weight: var(--font-weight-medium); - font-size: 1rem; align-self: flex-start; + padding: 0.25rem 0.75rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: var(--color-primary); } .tos { - font-size: 0.875rem; - color: var(--color-text-secondary); - background-color: var(--color-background-secondary); padding: 0.5rem 1rem; padding-top: 0; + + font-size: 0.875rem; + color: var(--color-text-secondary); + + background-color: var(--color-background-secondary); } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .logoBackground { @@ -73,44 +78,50 @@ top: 0.75rem; left: 50%; transform: translateX(-50%); + height: 8rem; } .headerHext { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 1rem; - text-wrap: balance; + margin-inline: 0.5rem; + line-height: 1.375; + text-align: center; + text-wrap: balance; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } .starHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .botItem { @@ -123,23 +134,25 @@ .closeButton { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .addStarsButton { - width: 1rem; - height: 1rem; - padding: 0; display: flex; align-items: center; justify-content: center; + + width: 1rem; + height: 1rem; + padding: 0; border-radius: 50%; - transition: opacity 0.15s; opacity: 1; + transition: opacity 0.15s; + &:hover, &:active { opacity: 0.75; @@ -167,18 +180,19 @@ } .balanceBottom { - line-height: 1.5; - font-weight: var(--font-weight-medium); display: flex; - align-items: center; gap: 0.25rem; + align-items: center; + + font-weight: var(--font-weight-medium); + line-height: 1.5; } .modalBalance { position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; } .starButton { @@ -195,36 +209,39 @@ } .paymentImages { + position: relative; + display: grid; grid-auto-columns: 3.5rem; grid-auto-flow: column; place-items: center; + margin-bottom: 1rem; - position: relative; } .paymentPhoto { - outline: 0.25rem solid var(--color-background); z-index: 1; + outline: 0.25rem solid var(--color-background); } .avatarStar { + position: absolute; + z-index: 1; + right: -1rem; + bottom: 0; + font-size: 2rem; @include mixins.filter-outline(1px, var(--color-background)); - - position: absolute; - right: -1rem; - bottom: 0; - z-index: 1; } .paymentImageBackground { - height: 7rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + height: 7rem; } .paymentButton { @@ -261,14 +278,16 @@ } .loadMore { - justify-content: flex-start; gap: 0.75rem; + justify-content: flex-start; } .loadMoreIcon { display: grid; place-items: center; + width: 2.75rem; height: 2.75rem; + font-size: 1.5rem; } diff --git a/src/components/modals/stars/gift/StarsGiftModal.module.scss b/src/components/modals/stars/gift/StarsGiftModal.module.scss index b6055a8a4..9c567195f 100644 --- a/src/components/modals/stars/gift/StarsGiftModal.module.scss +++ b/src/components/modals/stars/gift/StarsGiftModal.module.scss @@ -5,18 +5,19 @@ } .content { + overflow: hidden !important; display: flex; flex-direction: column; padding: 0 !important; - overflow: hidden !important; } .main { - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + + height: 100%; } .headerInfo { @@ -27,10 +28,10 @@ } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .logoBackground { @@ -38,13 +39,14 @@ top: 0.75rem; left: 50%; transform: translateX(-50%); + height: 8rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 1rem; + margin-inline: 0.5rem; + text-align: center; text-wrap: balance; } @@ -58,25 +60,29 @@ } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } .starHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 3.5rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3.5rem; - unicode-bidi: plaintext; } .hiddenHeader { @@ -85,9 +91,9 @@ .closeButton { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .avatar { @@ -100,11 +106,12 @@ } .secondaryInfo { - text-align: center; + margin-top: auto; + padding: 1rem; + font-size: 0.875rem; color: var(--color-text-secondary); - padding: 1rem; - margin-top: auto; + text-align: center; } @media (max-width: 450px) { diff --git a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss index 96234b862..09aee64b9 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss +++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss @@ -1,11 +1,14 @@ @use '../../../../styles/mixins'; .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { @@ -28,9 +31,9 @@ .statusPricing { display: flex; - align-items: center; flex-shrink: 0; gap: 0.25rem; + align-items: center; } .amount { @@ -48,8 +51,8 @@ .subtitle { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; font-size: 0.8125rem; } @@ -69,9 +72,9 @@ .subscriptionStar { position: absolute; + z-index: 1; right: 0; bottom: 0; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } diff --git a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss index a0dddd06f..cd61b7557 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss +++ b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss @@ -5,12 +5,14 @@ } .header { + position: relative; + display: flex; flex-direction: column; - align-items: center; gap: 0.25rem; + align-items: center; + margin-block: 1rem; - position: relative; } .title, .amount { @@ -18,35 +20,37 @@ } .title { - text-align: center; - text-wrap: balance; + margin-top: 1rem; + font-size: 1.5rem; font-weight: var(--font-weight-semibold); - margin-top: 1rem; line-height: 1.25; + text-align: center; + text-wrap: balance; } .amount { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; } .footer { - text-align: center; margin-block: 0.5rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); + text-align: center; } .starsBackground { position: absolute; - height: 7rem; + z-index: -1; top: -0.75rem; left: 50%; transform: translateX(-50%); - z-index: -1; + + height: 7rem; } .avatarWrapper { @@ -55,11 +59,11 @@ .subscriptionStar { position: absolute; - bottom: 0; + z-index: 1; right: 0; + bottom: 0; font-size: 1.75rem; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } diff --git a/src/components/modals/stars/transaction/PaidMediaThumb.module.scss b/src/components/modals/stars/transaction/PaidMediaThumb.module.scss index f864e0ced..afd41a811 100644 --- a/src/components/modals/stars/transaction/PaidMediaThumb.module.scss +++ b/src/components/modals/stars/transaction/PaidMediaThumb.module.scss @@ -1,28 +1,28 @@ .root { + position: relative; + z-index: 2; + display: grid; grid-auto-columns: 0.5rem; grid-auto-rows: 0.5rem; - place-items: center; place-content: center; + place-items: center; height: 5rem; - position: relative; - - z-index: 2; } .preview { - height: 2.75rem; - width: 2.75rem; - grid-auto-columns: 0.25rem; grid-auto-rows: 0.25rem; + width: 2.75rem; + height: 2.75rem; } .count { + z-index: 1; + display: flex; align-items: center; - z-index: 1; font-size: 2rem; line-height: 1; @@ -31,16 +31,19 @@ .thumb { position: relative; - height: 5rem; - width: 5rem; - border-radius: 1rem; + overflow: hidden; + + width: 5rem; + height: 5rem; + border-radius: 1rem; + outline: 0.25rem solid var(--color-background); } .preview .thumb { - height: 2.5rem; width: 2.5rem; + height: 2.5rem; border-radius: 0.5rem; outline-width: 0.125rem; } @@ -51,28 +54,30 @@ .thumb:nth-child(1), .itemCount1 .count { - grid-row: 1; grid-column: 1; + grid-row: 1; } .thumb:nth-child(2), .itemCount2 .count { - grid-row: 2; grid-column: 2; + grid-row: 2; } .thumb:nth-child(3), .itemCount3 .count { - grid-row: 3; grid-column: 3; + grid-row: 3; } .blurry, .full { position: absolute; top: 0; left: 0; - height: 100%; + width: 100%; + height: 100%; + object-fit: cover; } diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss index 0dd933428..902d3a829 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss @@ -1,11 +1,14 @@ @use '../../../../styles/mixins'; .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { @@ -21,9 +24,9 @@ .stars { display: flex; - align-items: center; flex-shrink: 0; gap: 0.25rem; + align-items: center; } .amount { @@ -62,9 +65,9 @@ .subscriptionStar { position: absolute; + z-index: 1; right: 0; bottom: 0; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } @@ -72,13 +75,14 @@ .uniqueGiftBackground { position: absolute; top: 0; - left: 0; right: 0; + left: 0; + aspect-ratio: 1 / 1; border-radius: 0.25rem; } .giftSticker { - margin-inline: 0.25rem; margin-top: 0.25rem; + margin-inline: 0.25rem; } diff --git a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss index 0f8e3813d..50152fe7e 100644 --- a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss @@ -19,8 +19,9 @@ .header { display: flex; flex-direction: column; - align-items: center; gap: 0.25rem; + align-items: center; + margin-block: 1rem; } @@ -31,6 +32,7 @@ .amount { display: flex; gap: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.325; @@ -41,20 +43,22 @@ } .title { - text-align: center; - text-wrap: balance; + margin-top: 1rem; + font-size: 1.5rem; font-weight: var(--font-weight-semibold); - margin-top: 1rem; line-height: 1.25; + text-align: center; + text-wrap: balance; } .tid { - font-family: var(--font-family-monospace); - font-size: 0.875rem; cursor: pointer; overflow: hidden; + + font-family: var(--font-family-monospace); + font-size: 0.875rem; white-space: nowrap; @include mixins.gradient-border-right(3rem, 1rem); @@ -65,12 +69,14 @@ } .refunded { + padding: 0.25em 0.5em; + border-radius: var(--border-radius-messages-small); + font-size: 0.8125rem; line-height: 1; - border-radius: var(--border-radius-messages-small); - padding: 0.25em 0.5em; - background-color: rgba(var(--color-text-green-rgb), 0.2); color: var(--color-success); + + background-color: rgba(var(--color-text-green-rgb), 0.2); } .totalStars { @@ -79,49 +85,52 @@ } .starIcon { - line-height: 1 !important; margin-inline-start: 0 !important; + line-height: 1 !important; } .footer { - text-align: center; margin-block: 0.5rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); + text-align: center; } .starsBackground { position: absolute; - height: 7rem; + z-index: -1; top: -0.75rem; left: 50%; transform: translateX(-50%); - z-index: -1; + + height: 7rem; } .copyIcon { + pointer-events: none; + position: absolute; - right: 0.25rem; top: 50%; + right: 0.25rem; transform: translateY(-50%); margin-inline-start: 0.25rem; + color: var(--color-primary); - pointer-events: none; } .mediaPreview { - margin-block: 1.5rem 1rem; cursor: var(--custom-cursor, pointer); + margin-block: 1.5rem 1rem; } .subtitle { - text-align: center; margin-top: 1rem; + text-align: center; } .starGiftSticker { - height: 150px; - width: 150px; position: relative; + width: 150px; + height: 150px; } diff --git a/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss b/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss index 3da556918..7aa0321e5 100644 --- a/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss +++ b/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss @@ -1,8 +1,8 @@ .content { display: flex; flex-direction: column; - align-items: center; gap: 1rem; + align-items: center; } .topEmoji { @@ -10,8 +10,8 @@ } .description { - text-align: center; margin-bottom: 0; + text-align: center; } .title { diff --git a/src/components/modals/webApp/MinimizedWebAppModal.module.scss b/src/components/modals/webApp/MinimizedWebAppModal.module.scss index ba7d9b9b9..73e45afdc 100644 --- a/src/components/modals/webApp/MinimizedWebAppModal.module.scss +++ b/src/components/modals/webApp/MinimizedWebAppModal.module.scss @@ -1,15 +1,17 @@ .root { + display: flex; + flex-shrink: 0; + align-items: center; + height: 2.5rem; + padding: 0; + padding-inline: 0.5rem; + border-radius: var(--border-radius-default); + font-size: 0.875rem; font-weight: var(--font-weight-medium); - border-radius: var(--border-radius-default); background-color: transparent; - padding: 0; - padding-inline: 0.5rem; - display: flex; - align-items: center; - flex-shrink: 0; } .window-state-button, @@ -37,9 +39,11 @@ } .title { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; - margin-left: 0.5rem; + margin-right: 0.5rem; + margin-left: 0.5rem; + + text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/modals/webApp/MoreAppsTabContent.module.scss b/src/components/modals/webApp/MoreAppsTabContent.module.scss index d6d1267d9..13fd061f4 100644 --- a/src/components/modals/webApp/MoreAppsTabContent.module.scss +++ b/src/components/modals/webApp/MoreAppsTabContent.module.scss @@ -1,14 +1,16 @@ @use "../../../styles/mixins"; .root { - height: 100%; - width: 100%; + z-index: 0; + + overflow-y: scroll; display: flex; flex-direction: column; - z-index: 0; - padding-inline: 1.25rem; + + width: 100%; + height: 100%; padding-top: 1.25rem; - overflow-y: scroll; + padding-inline: 1.25rem; @include mixins.adapt-padding-to-scrollbar(1rem); } @@ -18,32 +20,35 @@ } .section-title { + display: flex; + justify-content: space-between; + + padding: 0.5rem; + padding-bottom: 0.5rem; + padding-block: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); - padding: 0.5rem; - padding-block: 0.25rem; - justify-content: space-between; - display: flex; - padding-bottom: 0.5rem; } .section-content { display: grid; - justify-content: center; - align-items: center; - gap: 0.125rem; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); + gap: 0.125rem; + align-items: center; + justify-content: center; + padding: 0.125rem; padding-bottom: 1.25em; } .showMoreLink { - color: var(--color-links); cursor: pointer; + color: var(--color-links); transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } diff --git a/src/components/modals/webApp/WebAppGridItem.module.scss b/src/components/modals/webApp/WebAppGridItem.module.scss index 2f8f2d352..91daeecfd 100644 --- a/src/components/modals/webApp/WebAppGridItem.module.scss +++ b/src/components/modals/webApp/WebAppGridItem.module.scss @@ -1,10 +1,12 @@ .container { + cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: column; align-items: center; + padding: 0.375rem; border-radius: 0.625rem; - cursor: var(--custom-cursor, pointer); &:hover { background-color: var(--color-background-secondary); @@ -12,12 +14,14 @@ } .user-count-badge { - font-family: var(--font-family-condensed); - font-weight: var(--font-weight-semibold) !important; - font-size: 0.5rem !important; - border-width: 1px !important; bottom: 0 !important; + padding-block: 0.1875rem !important; + border-width: 1px !important; + + font-family: var(--font-family-condensed); + font-size: 0.5rem !important; + font-weight: var(--font-weight-semibold) !important; background: rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(50px); @@ -28,12 +32,12 @@ } .name { - white-space: inherit !important; - max-width: 100% !important; width: 4rem !important; - font-size: 0.625rem !important; - + max-width: 100% !important; height: 1.625rem; + + font-size: 0.625rem !important; font-weight: var(--font-weight-medium); line-height: 0.75rem; + white-space: inherit !important; } diff --git a/src/components/modals/webApp/WebAppModal.module.scss b/src/components/modals/webApp/WebAppModal.module.scss index 4cfa68d3b..6d26ca6d5 100644 --- a/src/components/modals/webApp/WebAppModal.module.scss +++ b/src/components/modals/webApp/WebAppModal.module.scss @@ -8,43 +8,50 @@ --state-transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99); :global { .modal-header { - color: var(--color-header-text); padding: 0.5rem; border-bottom: 1px solid var(--color-dividers); + color: var(--color-header-text); transition: var(--color-transition) background-color, var(--color-transition) color; } .modal-dialog { pointer-events: auto; - height: 75%; - justify-content: center; - border: none; - box-shadow: none; - margin: 0; + overflow: hidden; + justify-content: center; + + height: 75%; + margin: 0; + border: none; + + box-shadow: none; } .resizeHandle { position: absolute; - background: transparent; z-index: var(--z-resize-grip); + background: transparent; &.top, &.bottom { - left: 0; + cursor: ns-resize; + right: 0; + left: 0; + width: 100%; height: 0.5rem; - cursor: ns-resize; } &.left, &.right { + cursor: ew-resize; + top: 0; bottom: 0; + width: 0.5rem; height: 100%; - cursor: ew-resize; } &.top { @@ -72,27 +79,27 @@ } &.topLeft { + cursor: nwse-resize; top: 0; left: 0; - cursor: nwse-resize; } &.topRight { + cursor: nesw-resize; top: 0; right: 0; - cursor: nesw-resize; } &.bottomLeft { + cursor: nesw-resize; bottom: 0; left: 0; - cursor: nesw-resize; } &.bottomRight { - bottom: 0; - right: 0; cursor: nwse-resize; + right: 0; + bottom: 0; } } @@ -101,9 +108,10 @@ } .modal-content { + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + padding: 0; border-bottom-right-radius: var(--border-radius-default); border-bottom-left-radius: var(--border-radius-default); @@ -113,10 +121,10 @@ @media (max-width: 600px) { .modal-dialog { - background-color: var(--color-background); - border-radius: 0; - height: 100%; max-width: 100% !important; + height: 100%; + border-radius: 0; + background-color: var(--color-background); } .modal-content { @@ -131,12 +139,13 @@ :global { .modal-dialog { width: 100%; + max-width: 26.25rem; height: 100%; max-height: min(42.5rem, 85vh); - max-width: 26.25rem; background-color: var(--color-web-app-browser); backdrop-filter: blur(1.5625rem); + box-shadow: var(--modal-shadow); /* stylelint-disable @stylistic/value-list-comma-newline-after */ /* stylelint-disable plugin/no-low-performance-animation-properties */ @@ -144,8 +153,6 @@ max-height var(--state-transition), max-width var(--state-transition), left var(--state-transition), top var(--state-transition), transform 0.2s ease, opacity 0.2s ease; - - box-shadow: var(--modal-shadow); } .modal-header { @@ -155,11 +162,12 @@ } .modal-content { - background-color: var(--color-background); - border-top-right-radius: var(--border-radius-default); - border-top-left-radius: var(--border-radius-default); - box-shadow: var(--modal-shadow); max-height: none; + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); + + background-color: var(--color-background); + box-shadow: var(--modal-shadow); } @media (max-width: 600px) { @@ -170,9 +178,9 @@ } .close-icon { - opacity: 0.75; position: absolute; transform: rotate(-45deg); + opacity: 0.75; &, &::before, @@ -186,9 +194,9 @@ :global { .modal-dialog { cursor: grab !important; + min-width: 0; max-width: 300px; max-height: 2.5rem; - min-width: 0; } } } @@ -207,19 +215,19 @@ } .tabs { - display: flex; - align-items: center; - height: 100%; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; overflow-x: auto; overflow-y: hidden; - white-space: nowrap; + display: flex; + align-items: center; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); - - padding-left: 0.5rem; + height: 100%; padding-right: 0.5rem; + padding-left: 0.5rem; + + white-space: nowrap; @include mixins.gradient-border-horizontal(0.5rem, 0.5rem); @@ -233,42 +241,42 @@ } .tool-bar { - flex-grow: 1; display: flex; + flex-grow: 1; justify-content: flex-end; } .tab-button-wrapper { display: flex; - margin-left: -0.5rem; margin-right: -0.5rem; + margin-left: -0.5rem; } .tab-button { position: relative; z-index: 1; - transition: var(--color-transition) background-color, var(--color-transition) color; - background-color: var(--active-tab-background); - color: var(--color-header-text); - display: flex; align-items: center; justify-content: center; + height: 100%; padding: 0.5rem; - padding-left: 1rem; padding-right: 1rem; + padding-left: 1rem; + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); font-size: 1rem; font-weight: var(--font-weight-medium); + color: var(--color-header-text); text-overflow: ellipsis; - border-top-right-radius: var(--border-radius-default); - border-top-left-radius: var(--border-radius-default); - + background-color: var(--active-tab-background); box-shadow: var(--modal-shadow); + transition: var(--color-transition) background-color, var(--color-transition) color; + &:hover, &:focus { --more-button-opacity: 1; @@ -286,16 +294,17 @@ .tab-right-mask { @include mixins.gradient-border-left(2rem); - opacity: 0; - transition: opacity 0.25s ease-in-out; - position: absolute; - width: 4rem; - height: 100%; right: 0; - background-color: var(--active-tab-background); + width: 4rem; + height: 100%; border-top-right-radius: var(--border-radius-default); + + opacity: 0; + background-color: var(--active-tab-background); + + transition: opacity 0.25s ease-in-out; } .tab-button-curve-path { @@ -308,11 +317,13 @@ position: relative; z-index: 2; - transition: var(--color-transition) background-color, var(--color-transition) color; display: flex; align-items: center; justify-content: center; + margin-top: auto; + + transition: var(--color-transition) background-color, var(--color-transition) color; } .tab-button-right-curve { @@ -333,31 +344,34 @@ } .web-app-tab-more-menu { - z-index: 1; position: absolute; + z-index: 1; } .more-button { - opacity: 0.75; color: var(--color-header-text) !important; + opacity: 0.75; transition: var(--color-transition) color; } .tab-more-button { - z-index: 2; - padding: 0 !important; - width: 1.5rem !important; - height: 1.5rem !important; - font-size: 0.75rem; - opacity: var(--more-button-opacity); - color: white !important; - transition: opacity 0.25s ease-in-out; - background-color: rgba(0, 0, 0, 0.45) !important; - position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + + width: 1.5rem !important; + height: 1.5rem !important; + padding: 0 !important; + + font-size: 0.75rem; + color: white !important; + + opacity: var(--more-button-opacity); + background-color: rgba(0, 0, 0, 0.45) !important; + + transition: opacity 0.25s ease-in-out; } .more-apps-button, @@ -376,19 +390,22 @@ } .tab-close-button { - transition: opacity 0.25s ease-in-out; - opacity: 0; position: absolute; right: 0.5rem; - color: var(--color-header-text) !important; width: 1.5rem !important; height: 1.5rem !important; + + color: var(--color-header-text) !important; + + opacity: 0; + + transition: opacity 0.25s ease-in-out; } .tab-close-icon { - opacity: 0.75; font-size: 1rem !important; + opacity: 0.75; } .state-icon, @@ -407,9 +424,21 @@ } .close-icon { - opacity: 0.75; position: absolute; transform: rotate(-45deg); + opacity: 0.75; + + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } &, &::before, @@ -417,22 +446,12 @@ width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-header-text); + transition: var(--slide-transition) transform, var(--color-transition) background-color; } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.state-back { transform: rotate(180deg); @@ -447,8 +466,9 @@ } .loading-spinner { - position: absolute; pointer-events: none; + + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -461,10 +481,10 @@ } .frame { + z-index: 1; width: 100%; height: 100%; border: 0; - z-index: 1; &.with-button { height: calc(100% - 3.5rem); @@ -473,14 +493,15 @@ .main-button { position: absolute; + z-index: 1; bottom: 0; + transform: translateY(100%); + border-radius: 0; - z-index: 1; - transform: translateY(100%); - transition-property: background-color, color, transform; - transition-duration: 0.25s; transition-timing-function: ease-in-out; + transition-duration: 0.25s; + transition-property: background-color, color, transform; &.visible { transform: translateY(0); diff --git a/src/components/modals/webApp/WebAppModalTabContent.module.scss b/src/components/modals/webApp/WebAppModalTabContent.module.scss index b0d3a28c1..02ff5147e 100644 --- a/src/components/modals/webApp/WebAppModalTabContent.module.scss +++ b/src/components/modals/webApp/WebAppModalTabContent.module.scss @@ -1,30 +1,35 @@ @use "../../../styles/mixins"; .root { - height: 100%; - width: 100%; position: relative; + z-index: 0; + display: flex; flex-direction: column; + + width: 100%; + height: 100%; padding: 0; - z-index: 0; } .multi-tab { position: relative; + z-index: 0; + display: flex; flex-direction: column; + padding: 0; - z-index: 0; } .loadingPlaceholder { - width: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 4rem; + transition: opacity 0.25s ease-in-out; } @@ -47,19 +52,21 @@ } .defaultPlaceholderGrid { - width: 4.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; + + width: 4.5rem; margin: 0 auto; + animation: 2s linear -0.8s infinite fadeOpacityBreath; } .placeholderSquare { - width: 100%; aspect-ratio: 1; - background-color: black; + width: 100%; border-radius: 0.375rem; + background-color: black; } .hide { @@ -67,12 +74,15 @@ } .frame { - transition: opacity 0.25s ease-in-out; - opacity: 1; + z-index: 1; + width: 100%; height: 100%; border: 0; - z-index: 1; + + opacity: 1; + + transition: opacity 0.25s ease-in-out; &.with-button { height: calc(100% - 3.5rem); @@ -92,10 +102,14 @@ --color-transition: 0.15s; --transform-transition: 0.25s ease-in-out; - flex-grow: 1; - margin: 0.5rem; transform: translateY(100%); + + flex-grow: 1; + + margin: 0.5rem; + opacity: 0; + transition: background-color var(--color-transition), color var(--color-transition), @@ -126,16 +140,18 @@ } .buttons-container { + position: relative; + display: flex; justify-content: space-between; - position: relative; + + height: 0rem; + + transition-timing-function: ease-in-out; + transition-duration: 0.25s; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition-property: height; - transition-duration: 0.25s; - transition-timing-function: ease-in-out; - - height: 0rem; &.one-row { align-items: center; @@ -181,8 +197,8 @@ .secondary-button, .main-button { position: absolute; - left: 0rem; right: 0rem; + left: 0rem; } } @@ -210,16 +226,19 @@ .secondary-button, .main-button { transform: translateY(0); + + overflow: hidden; flex-grow: 0; + + width: 0; margin-inline: 0; padding-inline: 0; - width: 0; + white-space: nowrap; - overflow: hidden; &.visible { - margin-inline: 0.5rem; flex-grow: 1; + margin-inline: 0.5rem; } } } @@ -245,31 +264,34 @@ .closeIcon { --color-header-text: white; + position: relative; transform: rotate(-45deg); + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } + &, &::before, &::after { width: 0.875rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-header-text); + transition: var(--slide-transition) transform, var(--color-transition) background-color; } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.state-back { transform: rotate(180deg); @@ -292,17 +314,20 @@ } .headerPanel { + pointer-events: none; + + position: absolute; + z-index: 100; + top: 0; + right: 0; + left: 0; + display: flex; flex-direction: row; - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 100; + justify-content: space-between; + padding: 1rem; padding-inline-end: calc(1rem + var(--scrollbar-width)); - justify-content: space-between; - pointer-events: none; } .icon { @@ -315,53 +340,58 @@ } .headerButton { - height: 1.75rem; + pointer-events: auto; + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: fit-content; + height: 1.75rem; + padding: 0.25rem; + padding-inline: 0.625rem; + border-radius: 1rem; + font-size: 0.875rem; font-weight: var(--font-weight-medium); - position: relative; - cursor: var(--custom-cursor, pointer); - flex-shrink: 0; - overflow: hidden; - - outline: none !important; - align-items: center; - display: flex; - justify-content: center; color: white; - border-radius: 1rem; + background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(25px); - pointer-events: auto; + outline: none !important; &:hover { background-color: rgba(0, 0, 0, 0.1); } - - padding: 0.25rem; - padding-inline: 0.625rem; } .left { - border-bottom-right-radius: 0; border-top-right-radius: 0; + border-bottom-right-radius: 0; } .right { - border-bottom-left-radius: 0; border-top-left-radius: 0; + border-bottom-left-radius: 0; } .buttonCaptionContainer { + height: 100%; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width 0.25s ease-in-out; - height: 100%; } .backButtonCaption { + overflow: hidden; + width: fit-content; max-width: 20rem; - overflow: hidden; - white-space: nowrap; + text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/payment/CardInput.scss b/src/components/payment/CardInput.scss index c6237ab6a..3b6006a33 100644 --- a/src/components/payment/CardInput.scss +++ b/src/components/payment/CardInput.scss @@ -7,9 +7,9 @@ .right-addon { position: absolute; + z-index: 8; top: 0.625rem; right: 1rem; - z-index: 8; img { max-width: 2rem; diff --git a/src/components/payment/Checkout.module.scss b/src/components/payment/Checkout.module.scss index dd5e39fd6..172922266 100644 --- a/src/components/payment/Checkout.module.scss +++ b/src/components/payment/Checkout.module.scss @@ -10,13 +10,11 @@ } .checkout-picture { - margin: 0.25rem 0.75rem 0 0; - - min-width: 0; width: 100%; + min-width: 0; max-width: 8rem; height: auto; - + margin: 0.25rem 0.75rem 0 0; border-radius: 0.5rem; } @@ -30,11 +28,12 @@ } .checkout-description { + margin-bottom: 0.25rem; + font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-text-secondary); overflow-wrap: anywhere; - margin-bottom: 0.25rem; } .price-info { @@ -42,12 +41,14 @@ } .price-info-item { - margin: 1rem 0.5rem; display: flex; flex-direction: row; align-content: space-between; - color: var(--color-text-secondary); + + margin: 1rem 0.5rem; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); &-main { color: var(--color-text); @@ -62,22 +63,26 @@ .tipsList { display: flex; flex-wrap: wrap; - justify-content: space-between; gap: 0.5rem; + justify-content: space-between; } .tipsItem { - border-radius: 1.375rem; - padding: 0 0.75rem; - height: 2.5rem; - min-width: 5rem; - line-height: 2.5rem; - text-align: center; - background: var(--color-primary-opacity); - color: var(--color-primary); - transition: background-color 200ms, color 200ms; cursor: var(--custom-cursor, pointer); + + min-width: 5rem; + height: 2.5rem; + padding: 0 0.75rem; + border-radius: 1.375rem; + font-weight: var(--font-weight-medium); + line-height: 2.5rem; + color: var(--color-primary); + text-align: center; + + background: var(--color-primary-opacity); + + transition: background-color 200ms, color 200ms; &:hover, &:focus { @@ -95,18 +100,20 @@ } .invoice-info { - border-top: 0.0625rem var(--color-borders) solid; padding: 0.5rem; + border-top: 0.0625rem var(--color-borders) solid; } .provider { float: left; - background: no-repeat center; - background-size: 2rem; - border-radius: 1rem; + width: 1.5rem; height: 1.5rem; margin-inline-end: 1.125rem; + border-radius: 1rem; + + background: no-repeat center; + background-size: 2rem; } .provider.stripe { @@ -119,13 +126,14 @@ .checkout-info-item-info { &-title { - font-size: 1rem; - line-height: 1.4375rem; margin-bottom: 0; + + font-size: 1rem; font-weight: var(--font-weight-normal); - overflow-wrap: anywhere; + line-height: 1.4375rem; color: var(--color-text); text-transform: capitalize; + overflow-wrap: anywhere; } &-data { diff --git a/src/components/payment/ConfirmPayment.scss b/src/components/payment/ConfirmPayment.scss index 78198fb6d..a436aa386 100644 --- a/src/components/payment/ConfirmPayment.scss +++ b/src/components/payment/ConfirmPayment.scss @@ -1,9 +1,10 @@ .ConfirmPayment { - display: flex; - height: 100%; - border-bottom-left-radius: var(--border-radius-default-small); - border-bottom-right-radius: var(--border-radius-default-small); overflow: hidden; + display: flex; + + height: 100%; + border-bottom-right-radius: var(--border-radius-default-small); + border-bottom-left-radius: var(--border-radius-default-small); &__content { width: 100%; diff --git a/src/components/payment/PaymentInfo.scss b/src/components/payment/PaymentInfo.scss index 6ccfe154a..d05c49efc 100644 --- a/src/components/payment/PaymentInfo.scss +++ b/src/components/payment/PaymentInfo.scss @@ -2,8 +2,8 @@ padding: 0.5rem 1rem; h5 { - font-size: 1rem; margin: 0 0 1.25rem 0.5rem; + font-size: 1rem; } .inline-inputs { @@ -11,25 +11,25 @@ justify-content: space-between; .input-group { + display: flex; flex: 1 10rem; max-width: 48%; - display: flex; } } .description { - font-size: 0.875rem; - color: var(--color-text-secondary); margin-top: -0.75rem; margin-bottom: 1.25rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .checkbox { margin: -1.125rem 0 0 -0.375rem; .Checkbox { - padding-inline-start: 4.375rem; margin-block: 1rem; + padding-inline-start: 4.375rem; } } } diff --git a/src/components/payment/PaymentModal.scss b/src/components/payment/PaymentModal.scss index ecbdc7c82..a078bfac2 100644 --- a/src/components/payment/PaymentModal.scss +++ b/src/components/payment/PaymentModal.scss @@ -18,19 +18,22 @@ $modalHeaderAndFooterHeight: 8.375rem; .header { position: relative; - border-top-left-radius: var(--border-radius-modal); - border-top-right-radius: var(--border-radius-modal); + + display: flex; + flex-direction: row; + align-items: center; + width: 100%; padding: 0.5rem 1rem 0.25rem; - display: flex; - align-items: center; - flex-direction: row; + border-top-left-radius: var(--border-radius-modal); + border-top-right-radius: var(--border-radius-modal); + background: var(--color-background); h3 { + unicode-bidi: plaintext; margin-bottom: 0; margin-left: 1.5rem; - unicode-bidi: plaintext; text-align: initial; } } @@ -40,38 +43,43 @@ $modalHeaderAndFooterHeight: 8.375rem; } .empty-content { - height: 25rem; - max-height: 90%; display: flex; align-items: center; justify-content: center; + + height: 25rem; + max-height: 90%; } .receipt-content { - height: 25rem; overflow-y: auto; + height: 25rem; } .content { + position: relative; + overflow: auto; overflow-x: hidden; + width: 100%; height: 100%; - position: relative; } .footer { position: relative; bottom: 0; - border-bottom-left-radius: var(--border-radius-modal); - border-bottom-right-radius: var(--border-radius-modal); + width: 100%; padding: 0.75rem 1rem; + border-bottom-right-radius: var(--border-radius-modal); + border-bottom-left-radius: var(--border-radius-modal); + background: var(--color-background); button { - text-transform: none; font-weight: var(--font-weight-medium); + text-transform: none; } .button-text { @@ -84,8 +92,8 @@ $modalHeaderAndFooterHeight: 8.375rem; } .modal-content { - padding: 0; overflow: hidden; + padding: 0; } .ListItem-main-icon { diff --git a/src/components/payment/ReceiptModal.module.scss b/src/components/payment/ReceiptModal.module.scss index 69f350855..6b0843e34 100644 --- a/src/components/payment/ReceiptModal.module.scss +++ b/src/components/payment/ReceiptModal.module.scss @@ -11,17 +11,20 @@ } .header { + position: relative; + display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; + margin-bottom: 1rem; - position: relative; } .amount { display: flex; gap: 0.25rem; + font-size: 1.25rem; font-weight: var(--font-weight-medium); line-height: 1.325; @@ -32,9 +35,9 @@ } .tid { + cursor: pointer; font-family: var(--font-family-monospace); font-size: 0.875rem; - cursor: pointer; } .description { @@ -42,16 +45,17 @@ } .footer { - text-align: center; margin-block: 0.5rem; + text-align: center; } .starsBackground { position: absolute; - height: 8rem; top: -8.5rem; left: 50%; transform: translateX(-50%); + + height: 8rem; } .mediaShift { @@ -64,6 +68,6 @@ } .mediaPreview { - margin-bottom: 2rem; cursor: var(--custom-cursor, pointer); + margin-bottom: 2rem; } diff --git a/src/components/payment/Shipping.scss b/src/components/payment/Shipping.scss index 960ea5b01..44f92684e 100644 --- a/src/components/payment/Shipping.scss +++ b/src/components/payment/Shipping.scss @@ -3,9 +3,9 @@ form { p { - color: var(--color-text-secondary); - font-weight: var(--font-weight-medium); margin: 0.5rem 0 2rem; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); } .Radio { diff --git a/src/components/payment/ShippingInfo.scss b/src/components/payment/ShippingInfo.scss index ffc67c863..0f8873e66 100644 --- a/src/components/payment/ShippingInfo.scss +++ b/src/components/payment/ShippingInfo.scss @@ -2,8 +2,8 @@ padding: 0.5rem 1rem; h5 { + margin: 1rem 0 1.25rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin: 1rem 0 1.25rem; } } diff --git a/src/components/right/AddChatMembers.scss b/src/components/right/AddChatMembers.scss index b850573d1..d441827b9 100644 --- a/src/components/right/AddChatMembers.scss +++ b/src/components/right/AddChatMembers.scss @@ -1,10 +1,10 @@ .AddChatMembers { - height: 100%; - overflow: hidden; position: relative; + overflow: hidden; + height: 100%; &-inner { - height: 100%; overflow: hidden; + height: 100%; } } diff --git a/src/components/right/GifSearch.scss b/src/components/right/GifSearch.scss index 955396831..3b2883061 100644 --- a/src/components/right/GifSearch.scss +++ b/src/components/right/GifSearch.scss @@ -3,21 +3,21 @@ padding: 0.25rem; .gif-container { - height: 100%; overflow: auto; + height: 100%; &.grid { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-auto-flow: dense; grid-auto-rows: 6.25rem; grid-gap: 0.25rem; - grid-auto-flow: dense; + grid-template-columns: repeat(6, 1fr); } } .helper-text { - color: var(--color-text-meta); margin-top: 2rem; + color: var(--color-text-meta); text-align: center; } } diff --git a/src/components/right/ManageTopic.module.scss b/src/components/right/ManageTopic.module.scss index 6c3d7c8e1..d07eeff52 100644 --- a/src/components/right/ManageTopic.module.scss +++ b/src/components/right/ManageTopic.module.scss @@ -1,30 +1,31 @@ @use '../../styles/mixins'; .root { + --topic-icon-size: 5rem; + position: relative; height: 100%; background-color: var(--color-background); - --topic-icon-size: 5rem; } .content { + overflow: auto; display: flex; flex-direction: column; height: 100%; - overflow: auto; } .section { display: flex; - justify-content: center; flex-direction: column; + justify-content: center; @include mixins.side-panel-section; } .general { - box-shadow: none; border-bottom: 0; + box-shadow: none; } .top { @@ -38,12 +39,14 @@ } .iconWrapper { - margin: 1.5rem 0; + --custom-emoji-size: var(--topic-icon-size); + align-self: center; width: var(--topic-icon-size); height: var(--topic-icon-size); - --custom-emoji-size: var(--topic-icon-size); + margin: 1.5rem 0; + font-size: calc(var(--topic-icon-size) - 2rem); } @@ -57,8 +60,8 @@ } .heading { - font-weight: var(--font-weight-medium); font-size: 0.9375rem; + font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } diff --git a/src/components/right/PollAnswerResults.scss b/src/components/right/PollAnswerResults.scss index fca81564b..fc857239c 100644 --- a/src/components/right/PollAnswerResults.scss +++ b/src/components/right/PollAnswerResults.scss @@ -1,20 +1,24 @@ .PollAnswerResults { - border-bottom: 1px solid var(--color-borders); - padding: 0 0.5rem 0.625rem; display: flex; flex-direction: column-reverse; + padding: 0 0.5rem 0.625rem; + border-bottom: 1px solid var(--color-borders); .answer-head { + position: sticky; + z-index: 1; + top: 0; + display: flex; align-items: center; - font-size: 0.9375rem; - line-height: 1.3125rem; - font-weight: var(--font-weight-medium); - color: var(--color-text-secondary); + padding: 1rem 0.75rem 0.5rem 1rem; - position: sticky; - top: 0; - z-index: 1; + + font-size: 0.9375rem; + font-weight: var(--font-weight-medium); + line-height: 1.3125rem; + color: var(--color-text-secondary); + background: var(--color-background); @media (max-width: 600px) { @@ -26,23 +30,23 @@ margin-left: auto; &[dir="auto"] { - margin-left: 0; margin-right: auto; + margin-left: 0; } } .poll-voters { - padding: 0 0.75rem; position: relative; min-height: 3rem; - - @media (max-width: 600px) { - padding: 0 0.25rem; - } + padding: 0 0.75rem; .Spinner { --spinner-size: 1.25rem; } + + @media (max-width: 600px) { + padding: 0 0.25rem; + } } .chat-item-clickable { @@ -52,27 +56,27 @@ &[dir="rtl"] { .ChatInfo .Avatar.size-tiny { - margin-left: 1.75rem; margin-right: 0; + margin-left: 1.75rem; } } } .ShowMoreButton { - margin: 0.25rem 0 0 -0.5rem; width: calc(100% + 1rem); + margin: 0.25rem 0 0 -0.5rem; &[dir="rtl"] { .icon-down { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } } } .icon-down { - vertical-align: middle; margin-right: 2rem; font-size: 1.5rem; + vertical-align: middle; } } diff --git a/src/components/right/PollResults.scss b/src/components/right/PollResults.scss index a9bb10b5d..12b9019e3 100644 --- a/src/components/right/PollResults.scss +++ b/src/components/right/PollResults.scss @@ -1,22 +1,26 @@ .PollResults { - height: 100%; + pointer-events: auto; + position: relative; + display: flex; flex-direction: column; - pointer-events: auto; + + height: 100%; > .Loading { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background: rgba(white, 0.75); } .poll-question { - padding: 0.75rem 1.5rem; flex-shrink: 0; + padding: 0.75rem 1.5rem; font-size: 1.25rem; @media (max-width: 600px) { @@ -25,8 +29,8 @@ } .poll-results-list { - border-top: 1px solid var(--color-borders); - flex-grow: 1; overflow: auto; + flex-grow: 1; + border-top: 1px solid var(--color-borders); } } diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index 12a00fd50..dd345ae23 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -1,14 +1,14 @@ @use '../../styles/mixins'; .Profile { - height: 100%; + overflow-x: hidden; + overflow-y: scroll; display: flex; flex-direction: column; - overflow-x: hidden; - overflow-y: scroll; - + height: 100%; border-top: 1px solid transparent; + transition: border-top-color 0.2s ease-in-out; &.scrolled { @@ -35,8 +35,8 @@ [dir="rtl"] { .Switcher { - margin-left: 0; margin-right: auto; + margin-left: 0; } } } @@ -55,23 +55,26 @@ .nothing-found-gifts { display: flex; + flex-direction: column; align-items: center; justify-content: center; - flex-direction: column; + padding-top: 5rem; .description { - color: var(--color-text-secondary); + unicode-bidi: plaintext; + + margin-block: 1rem; + font-size: 1rem; font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); text-align: center; - margin-block: 1rem; - unicode-bidi: plaintext; } .Link { - color: var(--color-links); font-weight: var(--font-weight-medium); + color: var(--color-links); transition: opacity 0.15s ease-in; &:active, @@ -87,9 +90,9 @@ flex-direction: column-reverse; .TabList { - background: var(--color-background); - top: -1px; z-index: 1; + top: -1px; + background: var(--color-background); } .info .Transition { @@ -106,12 +109,13 @@ .content { &.empty-list { - height: 100%; - padding-top: 5rem; display: flex; align-items: flex-start; justify-content: center; + height: 100%; + padding-top: 5rem; + .Spinner { --spinner-size: 2.75rem; } @@ -123,8 +127,8 @@ &.previewMedia-list, &.gifts-list { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; + grid-template-columns: repeat(3, 1fr); gap: 0.0625rem; } @@ -157,6 +161,7 @@ .media-loading { top: 0; left: 0; + display: flex; align-items: center; justify-content: center; @@ -190,11 +195,13 @@ .show-more-bots, .show-more-channels { + z-index: 1; + width: calc(100% - 1rem); margin: 0 auto; margin-top: -1.8125rem; - z-index: 1; border-radius: var(--border-radius-default-small); + box-shadow: -1rem 0 1rem 1rem var(--color-background), -1rem 0 1rem 0.3125rem var(--color-background); .icon { @@ -203,9 +210,9 @@ } .more-similar { - text-align: center; margin-top: 1rem; font-size: 0.8125rem; + text-align: center; } } } diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 84e501180..6252074fa 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -1,14 +1,16 @@ #RightColumn { position: absolute; + z-index: var(--z-right-column); top: 0; right: 0; + transform: translate3d(var(--right-column-width), 0, 0); + width: var(--right-column-width); height: 100%; padding-right: env(safe-area-inset-right); - transform: translate3d(var(--right-column-width), 0, 0); - background: var(--color-background); border-left: 1px solid var(--color-borders); - z-index: var(--z-right-column); + + background: var(--color-background); transition: transform var(--layer-transition); @@ -17,19 +19,9 @@ transition: none !important; } - @media (max-width: 1275px) { - box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-left: none; - } - - @media (max-width: 600px) { - width: 100vw; - transform: translate3d(110vw, 0, 0); - } - > .Transition { - height: calc(100% - var(--header-height)); overflow: hidden; + height: calc(100% - var(--header-height)); } .panel-content { @@ -42,8 +34,8 @@ } .Management .section > .ChatInfo { - padding: 0 1.5rem; margin: 1rem 0; + padding: 0 1.5rem; text-align: center; .Avatar { @@ -56,15 +48,15 @@ .title { display: flex; - justify-content: center; align-items: center; + justify-content: center; h3 { - font-weight: var(--font-weight-medium); font-size: 1.25rem; + font-weight: var(--font-weight-medium); line-height: 2rem; - white-space: pre-wrap; overflow-wrap: anywhere; + white-space: pre-wrap; } .emoji { @@ -79,22 +71,31 @@ color: #868e96; } } + + @media (max-width: 1275px) { + border-left: none; + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); + } + + @media (max-width: 600px) { + transform: translate3d(110vw, 0, 0); + width: 100vw; + } } #RightColumn-wrapper { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: var(--z-right-column); - overflow: hidden; - visibility: hidden; pointer-events: none; - @media (max-width: 1275px) { - position: fixed; - } + position: absolute; + z-index: var(--z-right-column); + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; + + visibility: hidden; &.is-hidden { display: none; @@ -102,13 +103,14 @@ .overlay-backdrop { position: absolute; + z-index: -1; top: 0; right: 0; bottom: 0; left: 0; - z-index: -1; - background: black; + opacity: 0; + background: black; @media (max-width: 600px) { transition: opacity var(--layer-transition); @@ -125,15 +127,20 @@ } #Main.right-column-open & { - @media (max-width: 600px) { - .overlay-backdrop { - opacity: var(--layer-blackout-opacity); - } - } #RightColumn { pointer-events: auto; transform: translate3d(0, 0, 0); } + + @media (max-width: 600px) { + .overlay-backdrop { + opacity: var(--layer-blackout-opacity); + } + } + } + + @media (max-width: 1275px) { + position: fixed; } } diff --git a/src/components/right/RightHeader.scss b/src/components/right/RightHeader.scss index 1684943c2..4416121e1 100644 --- a/src/components/right/RightHeader.scss +++ b/src/components/right/RightHeader.scss @@ -1,13 +1,11 @@ .RightHeader { - display: flex; - align-items: center; - height: var(--header-height); - padding: 0.5rem 0.8125rem; pointer-events: auto; - @media (max-width: 600px) { - padding: 0.5rem; - } + display: flex; + align-items: center; + + height: var(--header-height); + padding: 0.5rem 0.8125rem; .close-button { flex-shrink: 0; @@ -25,22 +23,22 @@ .title { margin-bottom: 0; + margin-left: 1.375rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin-left: 1.375rem; } .header { margin-left: 1.375rem; .title { - font-size: 1rem; margin-left: 0; + font-size: 1rem; } .subtitle { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } } @@ -74,4 +72,8 @@ padding-left: 5rem; } } + + @media (max-width: 600px) { + padding: 0.5rem; + } } diff --git a/src/components/right/StickerSearch.scss b/src/components/right/StickerSearch.scss index b83690f0d..157287e49 100644 --- a/src/components/right/StickerSearch.scss +++ b/src/components/right/StickerSearch.scss @@ -1,13 +1,14 @@ .StickerSearch { container: stickers / inline-size; + overflow-x: hidden; + overflow-y: scroll; + height: 100%; padding: 0 0.5rem; - overflow-y: scroll; - overflow-x: hidden; .helper-text { - padding: 1rem; margin-bottom: 0.125rem; + padding: 1rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } @@ -25,17 +26,19 @@ } .title { + overflow: hidden; + + margin: 0; + font-size: 1rem; line-height: 1.6875rem; - margin: 0; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .count { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .Button { @@ -43,8 +46,8 @@ margin-left: 1rem; &.is-added { - background: var(--color-chat-hover); color: var(--color-text-secondary); + background: var(--color-chat-hover); &:hover, &:active { @@ -65,8 +68,8 @@ } .Button { - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } diff --git a/src/components/right/management/JoinRequest.scss b/src/components/right/management/JoinRequest.scss index 669ae4605..18d3b6fae 100644 --- a/src/components/right/management/JoinRequest.scss +++ b/src/components/right/management/JoinRequest.scss @@ -8,8 +8,8 @@ } &__top { - display: flex; cursor: var(--custom-cursor, pointer); + display: flex; padding: 0.5rem; border-radius: 0.5rem; @@ -19,23 +19,24 @@ } &__user { + overflow: hidden; display: flex; flex-grow: 1; min-width: 0; - overflow: hidden; } &__user-info { + overflow: hidden; display: flex; flex-direction: column; justify-content: center; - overflow: hidden; + margin-left: 1rem; } &__user-subtitle { - color: var(--color-text-secondary); overflow: hidden; + color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; } @@ -47,17 +48,17 @@ } &__date { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-left: 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); white-space: nowrap; } &__buttons { display: flex; + gap: 0.5rem; justify-content: space-evenly; margin-top: 1rem; - gap: 0.5rem; } &__button { diff --git a/src/components/right/management/Management.scss b/src/components/right/management/Management.scss index c8f2b6c97..bf3365bbd 100644 --- a/src/components/right/management/Management.scss +++ b/src/components/right/management/Management.scss @@ -5,14 +5,14 @@ height: 100%; & > .custom-scroll { - height: 100%; - overflow-y: scroll; overflow-x: hidden; + overflow-y: scroll; + height: 100%; } .personal-photo { - margin-right: 2rem; transform: scale(1.25); + margin-right: 2rem; } .section { @@ -75,11 +75,13 @@ } .section-heading { + position: relative; + + padding-inline-start: 1rem; + font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - padding-inline-start: 1rem; - position: relative; &[dir="auto"] { text-align: initial; @@ -88,9 +90,8 @@ .section-help { padding: 0 1rem; - - color: var(--color-text-secondary); line-height: 1.375rem; + color: var(--color-text-secondary); &[dir="auto"] { text-align: initial; @@ -98,9 +99,9 @@ } .section-info { - color: var(--color-text-secondary); - font-size: 0.875rem; padding: 0 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .invite-link { @@ -121,8 +122,8 @@ } .group-link { - color: var(--color-text); padding-left: 1rem; + color: var(--color-text); } .RangeSlider { @@ -134,29 +135,29 @@ } &__filter { - padding: 0 1rem 0.25rem 0.75rem; - margin-bottom: 0.625rem; - - @include mixins.side-panel-section; - + overflow-y: auto; display: flex; flex-flow: row wrap; flex-shrink: 0; - overflow-y: auto; max-height: 20rem; + margin-bottom: 0.625rem; + padding: 0 1rem 0.25rem 0.75rem; + + @include mixins.side-panel-section; .input-group { + flex-grow: 1; margin-bottom: 0.5rem; margin-left: 0.5rem; - flex-grow: 1; } .form-control { height: 2rem; + padding: 0; border: none; border-radius: 0; - padding: 0; + box-shadow: none; } } @@ -184,13 +185,16 @@ } .link-status-icon { - display: block; - aspect-ratio: 1; - border-radius: 50%; - padding: 0.5rem; position: static !important; - color: white !important; + + display: block; + + aspect-ratio: 1; margin-right: 1rem !important; + padding: 0.5rem; + border-radius: 50%; + + color: white !important; &-gray { background-color: #707579; @@ -216,8 +220,8 @@ .ManageInvite { .link-name { - padding: 0 1rem; margin-bottom: 1rem; + padding: 0 1rem; } .expire-limit { @@ -226,7 +230,6 @@ .usage-limit { margin-top: 1rem; - -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { @@ -265,39 +268,45 @@ .ManageInvite, .ManageInvites { .hint { - font-size: 0.875rem; - margin-bottom: 0; margin-top: 0.5rem; + margin-bottom: 0; + font-size: 0.875rem; } } .DropdownList { - transition: 0.25s ease-in-out transform; - transform: translateY(calc(-100%)); position: absolute; - width: 100%; left: 0; + transform: translateY(calc(-100%)); + + width: 100%; padding: 0 0.5rem 0 3.5rem; + background: var(--color-background); + transition: 0.25s ease-in-out transform; + &--open { transform: translateY(0.025rem); } } .DropdownListTrap { - height: 0; width: 100%; + height: 0; &::before { - position: absolute; - top: 0; - left: 0; - right: 0; - height: calc(var(--before-shift-height) + 2.5rem); - background: var(--color-background); content: ""; + + position: absolute; z-index: 1; + top: 0; + right: 0; + left: 0; + + height: calc(var(--before-shift-height) + 2.5rem); + + background: var(--color-background); } } @@ -308,8 +317,8 @@ } .without-bottom-shadow { - box-shadow: none; padding-bottom: 0; + box-shadow: none; } .part { diff --git a/src/components/right/statistics/BoostStatistics.module.scss b/src/components/right/statistics/BoostStatistics.module.scss index d4aa7811d..c334e4857 100644 --- a/src/components/right/statistics/BoostStatistics.module.scss +++ b/src/components/right/statistics/BoostStatistics.module.scss @@ -1,15 +1,15 @@ @use '../../../styles/mixins'; .root { - overflow-y: scroll; overflow-x: hidden; + overflow-y: scroll; } .noResults { + padding: 0.75rem 0 0 0; + font-size: 0.9375rem; color: var(--color-text-secondary); text-align: center; - font-size: 0.9375rem; - padding: 0.75rem 0 0 0; } .section-header { @@ -30,13 +30,13 @@ .stats { margin-bottom: 0; - border: none; padding: 0.75rem 0 0 0; + border: none; } .down { - font-size: 1.5rem; margin-right: 0.5rem; + font-size: 1.5rem; } .loadMoreSpinner { @@ -45,9 +45,10 @@ .status { display: flex; - align-items: center; gap: 0.5rem; + align-items: center; justify-content: space-between; + width: 100%; } @@ -56,30 +57,32 @@ } .month { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .quantity { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; } .floatingBadge { + position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; + color: var(--color-links); - position: relative; - z-index: 1; } .floatingBadgeButtonColor { + margin-left: 0.5rem; padding: 0 0.5rem 0 0.375rem; border-radius: 1rem; background-color: var(--color-primary-opacity); - margin-left: 0.5rem; } .floatingBadgeWarning { @@ -92,8 +95,8 @@ } .floatingBadgeIcon { - font-size: 0.875rem; margin-right: 0.125rem; + font-size: 0.875rem; } .floatingBadgeValue { @@ -126,8 +129,8 @@ .copy { position: absolute; - right: 0.5rem; - top: 50%; - transform: translate(0, -50%); z-index: 1; + top: 50%; + right: 0.5rem; + transform: translate(0, -50%); } diff --git a/src/components/right/statistics/MonetizationStatistics.module.scss b/src/components/right/statistics/MonetizationStatistics.module.scss index 1fe279298..2dedfefdb 100644 --- a/src/components/right/statistics/MonetizationStatistics.module.scss +++ b/src/components/right/statistics/MonetizationStatistics.module.scss @@ -1,15 +1,14 @@ @use '../../../styles/mixins'; .root { - height: 100%; overflow-x: hidden; overflow-y: hidden; + height: 100%; } .graph { margin-bottom: 1rem; border-bottom: 0.0625rem solid var(--color-borders); - opacity: 1; transition: opacity 0.3s ease; @@ -19,8 +18,8 @@ } &.hidden { - opacity: 0; margin: 0; + opacity: 0; } } @@ -32,6 +31,7 @@ display: flex; flex-direction: column; gap: 0.5rem; + padding: 1rem 0.75rem; border-bottom: 0.0625rem solid var(--color-borders); } @@ -44,7 +44,9 @@ display: flex; flex-direction: column; align-items: center; + margin-bottom: 0.5rem; + line-height: 1.6875rem; } @@ -65,8 +67,8 @@ } .toncoinIcon { - font-size: 1.5rem; margin-inline: 0 0.5rem; + font-size: 1.5rem; color: var(--color-primary); } diff --git a/src/components/right/statistics/Statistics.module.scss b/src/components/right/statistics/Statistics.module.scss index dc9025d82..25031a78d 100644 --- a/src/components/right/statistics/Statistics.module.scss +++ b/src/components/right/statistics/Statistics.module.scss @@ -1,9 +1,10 @@ .root { - height: 100%; overflow-x: hidden; overflow-y: hidden; + height: 100%; border-top: 1px solid transparent; + transition: border-top-color 0.2s ease-in-out; :global(.lovely-chart--container) { @@ -39,9 +40,10 @@ &-title { padding-left: 0.75rem; + font-size: 16px; - color: var(--text-color); line-height: 30px; + color: var(--text-color); text-transform: lowercase; &:first-letter { @@ -57,7 +59,6 @@ .graph { margin-bottom: 1rem; border-bottom: 1px solid var(--color-borders); - opacity: 1; transition: opacity 0.3s ease; @@ -67,41 +68,41 @@ } &.hidden { - opacity: 0; margin: 0; + opacity: 0; } } @keyframes pie-slim-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(-360deg); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(40% at center calc(50% - 7.5px)); } } @keyframes pie-slim-out { 0% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(360deg); + clip-path: circle(40% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(80% at center calc(50% - 7.5px)); } } diff --git a/src/components/right/statistics/StatisticsOverview.module.scss b/src/components/right/statistics/StatisticsOverview.module.scss index c0e8ea143..0d2f94798 100644 --- a/src/components/right/statistics/StatisticsOverview.module.scss +++ b/src/components/right/statistics/StatisticsOverview.module.scss @@ -1,22 +1,25 @@ .root { - padding: 1rem 1.5rem; margin-bottom: 1rem; + padding: 1rem 1.5rem; border-bottom: 0.0625rem solid var(--color-borders); } .header { - margin-bottom: 0.5rem; - font-weight: var(--font-weight-medium); display: flex; align-items: center; justify-content: space-between; + + margin-bottom: 0.5rem; + + font-weight: var(--font-weight-medium); } .title { margin-right: 2rem; + font-size: 1rem; - color: var(--text-color); line-height: 1.875rem; + color: var(--text-color); text-transform: lowercase; &:first-letter { @@ -43,14 +46,14 @@ } .tableValue { - font-weight: var(--font-weight-medium); font-size: 1.25rem; + font-weight: var(--font-weight-medium); } .tableSecondaryValue { + margin-inline-start: 0.25rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin-inline-start: 0.25rem; } .value { diff --git a/src/components/right/statistics/StatisticsPublicForward.module.scss b/src/components/right/statistics/StatisticsPublicForward.module.scss index 0e346b70e..24f1d2bc8 100644 --- a/src/components/right/statistics/StatisticsPublicForward.module.scss +++ b/src/components/right/statistics/StatisticsPublicForward.module.scss @@ -1,10 +1,13 @@ .root { - position: relative; cursor: var(--custom-cursor, pointer); - padding: 0.5rem 0.75rem; + + position: relative; + display: flex; align-items: center; + padding: 0.5rem 0.75rem; + &:hover, &:active { background-color: var(--color-chat-hover); } @@ -20,6 +23,6 @@ } .views { - color: var(--color-text-meta); font-size: 0.8125rem; + color: var(--color-text-meta); } diff --git a/src/components/right/statistics/StatisticsRecentPost.module.scss b/src/components/right/statistics/StatisticsRecentPost.module.scss index d708e7a71..d1709bbb8 100644 --- a/src/components/right/statistics/StatisticsRecentPost.module.scss +++ b/src/components/right/statistics/StatisticsRecentPost.module.scss @@ -1,6 +1,6 @@ .root { - position: relative; cursor: var(--custom-cursor, pointer); + position: relative; padding: 0.5rem 0.75rem; &:hover, &:active { @@ -13,20 +13,24 @@ } .imageContainer { + position: absolute; + top: 0.5rem; + left: 0.5rem; + width: 2.5rem; height: 2.5rem; - position: absolute; - left: 0.5rem; - top: 0.5rem; &::before { content: ""; + position: absolute; + top: -0.25rem; + left: -0.25rem; + width: 2.75rem; height: 2.75rem; - left: -0.25rem; - top: -0.25rem; border-radius: 50%; + background: var(--color-borders-read-story); background-image: linear-gradient( @@ -38,26 +42,31 @@ &::after { content: ""; + position: absolute; + z-index: 0; + top: -0.125rem; + left: -0.125rem; + width: 2.5rem; height: 2.5rem; - left: -0.125rem; - top: -0.125rem; border-radius: 50%; - z-index: 0; + background: var(--color-background); } } .image { + position: absolute; + top: 0.5rem; + left: 0.5rem; + width: 2.5rem; height: 2.5rem; - position: absolute; - left: 0.5rem; - top: 0.5rem; - object-fit: cover; - border-radius: 0.25rem; margin-inline-end: 0.25rem; + border-radius: 0.25rem; + + object-fit: cover; &.round { border-radius: 0.625rem; @@ -68,34 +77,40 @@ } &:global(.Avatar) { - left: 0.375rem; top: 0.375rem; + left: 0.375rem; } &.withStoryCircle { + z-index: 1; top: 0; left: 0; + width: 2.25rem; height: 2.25rem; - z-index: 1; } } .summary { - flex: 1; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + flex: 1; + margin-right: 0.75rem; + text-overflow: ellipsis; + white-space: nowrap; + :global(.icon-play) { position: relative; + bottom: 0.0625rem; + display: inline-block; - font-size: 0.75rem; - color: #fff; + margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; - bottom: 0.0625rem; + + font-size: 0.75rem; + color: #fff; } } @@ -121,9 +136,9 @@ } .metaIcon { + margin-inline-end: 0.125rem; font-size: 0.875rem; vertical-align: -0.125rem; - margin-inline-end: 0.125rem; } .date { diff --git a/src/components/story/MediaStory.module.scss b/src/components/story/MediaStory.module.scss index 143f0df52..1069a33ea 100644 --- a/src/components/story/MediaStory.module.scss +++ b/src/components/story/MediaStory.module.scss @@ -4,19 +4,21 @@ } .wrapper { + cursor: var(--custom-cursor, pointer); + overflow: hidden; // Aspect-ratio trick https://css-tricks.com/aspect-ratio-boxes/ height: 0; padding-bottom: 179%; - overflow: hidden; - cursor: var(--custom-cursor, pointer); } .media { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } @@ -28,9 +30,10 @@ .overlayIcon { position: absolute; + z-index: 1; + font-size: 0.75rem; line-height: 1; - z-index: 1; color: white; filter: drop-shadow(0 0 0.25rem black); @@ -46,13 +49,13 @@ left: 0.25rem; display: flex; - align-items: center; gap: 0.125rem; + align-items: center; } .duration { - bottom: 0.25rem; right: 0.25rem; + bottom: 0.25rem; } .contextMenu { diff --git a/src/components/story/StealthModeModal.module.scss b/src/components/story/StealthModeModal.module.scss index ec6f453dd..bb7e31109 100644 --- a/src/components/story/StealthModeModal.module.scss +++ b/src/components/story/StealthModeModal.module.scss @@ -1,8 +1,8 @@ .root { + position: relative; display: flex; flex-direction: column; align-items: center; - position: relative; } .closeButton { @@ -12,14 +12,16 @@ } .stealthIcon { - width: 5rem; - height: 5rem; - font-size: 3rem; - background-color: var(--color-primary); - border-radius: 50%; - display: grid; place-items: center; + + width: 5rem; + height: 5rem; + border-radius: 50%; + + font-size: 3rem; + + background-color: var(--color-primary); } .title { @@ -29,10 +31,10 @@ } .description { - font-size: 0.875rem; margin-top: 0.5rem; - text-align: center; + font-size: 0.875rem; color: var(--color-text-secondary); + text-align: center; } .listItem { @@ -40,8 +42,8 @@ } .icon { - color: var(--color-primary) !important; margin-right: 1rem !important; + color: var(--color-primary) !important; } .button { diff --git a/src/components/story/StoryFooter.module.scss b/src/components/story/StoryFooter.module.scss index 4f159721e..eb2bfd577 100644 --- a/src/components/story/StoryFooter.module.scss +++ b/src/components/story/StoryFooter.module.scss @@ -1,15 +1,18 @@ .root { position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; + display: flex; align-items: center; - transition: opacity 350ms !important; - color: #fff; margin-bottom: env(safe-area-inset-bottom); + color: #fff; + + transition: opacity 350ms !important; + @media (max-width: 600px) { padding: 0 0.5rem 0.5rem; } @@ -18,8 +21,10 @@ .viewInfo { display: flex; align-items: center; + padding: 0.25rem 0.5rem; border-radius: var(--border-radius-default); + transition: background-color 200ms; } @@ -40,15 +45,15 @@ } .reactionCount { - margin-inline-start: 0.5rem; display: flex; gap: 0.125rem; align-items: center; + margin-inline-start: 0.5rem; } .reactionCountHeart { - color: var(--color-heart); font-size: 1.25rem; + color: var(--color-heart); } .footerItem { @@ -66,8 +71,8 @@ .views { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; } .viewIcon { diff --git a/src/components/story/StoryProgress.module.scss b/src/components/story/StoryProgress.module.scss index dd359c585..f33b326c4 100644 --- a/src/components/story/StoryProgress.module.scss +++ b/src/components/story/StoryProgress.module.scss @@ -1,11 +1,15 @@ .root { --progress-duration: 6s; - flex: 1 1 auto; - background-color: rgba(255, 255, 255, 0.25); - border-radius: 0.125rem; - margin: 0 0.125rem; + position: relative; + overflow: hidden; + flex: 1 1 auto; + + margin: 0 0.125rem; + border-radius: 0.125rem; + + background-color: rgba(255, 255, 255, 0.25); } .viewed { @@ -18,14 +22,17 @@ .inner { position: absolute; - left: 0; top: 0; - width: 100%; - height: 100%; - background: var(--color-white); - border-radius: 0.125rem; + left: 0; transform-origin: 0 50%; transform: translateX(-100%); + + width: 100%; + height: 100%; + border-radius: 0.125rem; + + background: var(--color-white); + animation: progress var(--progress-duration) linear forwards; } diff --git a/src/components/story/StoryRibbon.module.scss b/src/components/story/StoryRibbon.module.scss index 70a96fe99..b08ddbfe3 100644 --- a/src/components/story/StoryRibbon.module.scss +++ b/src/components/story/StoryRibbon.module.scss @@ -1,16 +1,18 @@ .root { - display: flex; - justify-content: space-between; - column-gap: 0.625rem; - padding: 0.25rem 0.5rem 0.5rem 1rem; - overflow-x: auto; - white-space: nowrap; - max-height: 5.5rem; position: relative; z-index: var(--z-story-ribbon); - transition: opacity 0.2s ease-in-out; + overflow-x: auto; + display: flex; + column-gap: 0.625rem; + justify-content: space-between; + max-height: 5.5rem; + padding: 0.25rem 0.5rem 0.5rem 1rem; + + white-space: nowrap; + + transition: opacity 0.2s ease-in-out; animation: fadeIn 0.2s ease-in-out; } @@ -19,19 +21,23 @@ } .peer { - flex: 0 0 3.75rem; - width: 3.75rem; + cursor: var(--custom-cursor, pointer); + display: flex; + flex: 0 0 3.75rem; flex-direction: column; align-items: center; - text-align: center; - font-size: 0.75rem; - background: none; - border: none; - padding: 0; - cursor: var(--custom-cursor, pointer); - color: var(--color-text-secondary); + + width: 3.75rem; margin-inline: auto; + padding: 0; + border: none; + + font-size: 0.75rem; + color: var(--color-text-secondary); + text-align: center; + + background: none; &:focus { outline: none; @@ -43,12 +49,14 @@ } .name { - margin-top: 0.25rem; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; - white-space: nowrap; + overflow: hidden; + max-width: 110%; + margin-top: 0.25rem; + + text-overflow: ellipsis; + white-space: nowrap; &_hasUnreadStory { color: var(--color-text); diff --git a/src/components/story/StorySettings.module.scss b/src/components/story/StorySettings.module.scss index 34ed1538e..d6c773f02 100644 --- a/src/components/story/StorySettings.module.scss +++ b/src/components/story/StorySettings.module.scss @@ -3,19 +3,21 @@ } .modal :global(.modal-content) { - padding: 0; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; - color: var(--color-text); + height: min(38rem, 90vh); + padding: 0; + + color: var(--color-text); } .header { - padding: 1rem 1rem 0.75rem; display: flex; - align-items: center; flex-shrink: 0; + align-items: center; + padding: 1rem 1rem 0.75rem; } .closeButton { @@ -23,18 +25,20 @@ } .headerTitle { - margin-bottom: 0; - height: 100%; - line-height: 1; display: flex; align-items: center; + + height: 100%; + margin-bottom: 0; + + line-height: 1; } .content { - min-height: 0; - border-radius: 0 0 var(--border-radius-default) var(--border-radius-default); overflow: hidden; overflow-y: auto; + min-height: 0; + border-radius: 0 0 var(--border-radius-default) var(--border-radius-default); } .section { @@ -46,10 +50,10 @@ } .title { + padding: 0 0.75rem 0.75rem; font-size: 1rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); - padding: 0 0.75rem 0.75rem; } .list { @@ -58,48 +62,51 @@ } .option { + position: relative; + + overflow: hidden; display: flex; align-items: center; - position: relative; - overflow: hidden; + margin-bottom: 0; padding: 0.4375rem 0 0.4375rem 3.5rem; border-radius: var(--border-radius-default); - @media (hover: hover) { - &:hover, - &:focus { - background-color: var(--color-chat-hover); - } - } - &::before, &::after { content: ""; - display: block; + position: absolute; - left: 1rem; top: 50%; + left: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { left: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } @@ -112,15 +119,24 @@ opacity: 1; } } + + @media (hover: hover) { + &:hover, + &:focus { + background-color: var(--color-chat-hover); + } + } } .input { position: absolute; + z-index: -1; + top: -1rem; + width: 1px; height: 1px; + opacity: 0; - top: -1rem; - z-index: -1; } .icon { @@ -128,13 +144,16 @@ flex: 0 0 2.625rem; align-items: center; justify-content: center; + width: 2.625rem; height: 2.625rem; - border-radius: 50%; - background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); - color: #fff; - font-size: 1.5rem; margin-inline-end: 1rem; + border-radius: 50%; + + font-size: 1.5rem; + color: #fff; + + background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); > :global(.icon-group-filled) { font-size: 1.25rem; @@ -142,16 +161,20 @@ } .action { - width: 100%; - color: #8774E1; cursor: var(--custom-cursor, pointer); - opacity: 0.8; - transition: opacity 200ms; overflow: hidden; + + width: 100%; + + color: #8774E1; text-overflow: ellipsis; white-space: nowrap; + opacity: 0.8; + + transition: opacity 200ms; + > :global(.icon) { font-size: 0.875rem; line-height: 1; @@ -167,26 +190,26 @@ } .optionContent { + overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; - overflow: hidden; } .footer { - background-color: #181818; - flex-grow: 1; display: flex; flex-direction: column; + flex-grow: 1; + background-color: #181818; } .info { - color: var(--color-text-secondary); - font-size: 0.875rem; padding: 0.5rem 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .submit { - padding: 1rem; margin-top: auto; + padding: 1rem; } diff --git a/src/components/story/StoryToggler.module.scss b/src/components/story/StoryToggler.module.scss index eb82ed778..be36de674 100644 --- a/src/components/story/StoryToggler.module.scss +++ b/src/components/story/StoryToggler.module.scss @@ -2,19 +2,23 @@ @value name from "./StoryRibbon.module.scss"; .root { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%); - padding: 0; - margin: 0; - border: none; - background: none; - outline: none !important; - cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: row-reverse; + margin: 0; + padding: 0; + border: none; + + background: none; + outline: none !important; + &[dir="rtl"] { right: auto; left: 0.125rem; @@ -25,8 +29,8 @@ z-index: 1; &:not(:first-child):before { - mask-image: linear-gradient(90deg, #fff 75%, transparent 0); mask-composite: exclude; + mask-image: linear-gradient(90deg, #fff 75%, transparent 0); } &:global(.animating) { @@ -43,17 +47,18 @@ } .ghost { - position: absolute; - transform-origin: top left; --transform-transition: transform 250ms ease; --opacity-transition: opacity 250ms ease; + + position: absolute; + transform-origin: top left; transition: var(--transform-transition), var(--opacity-transition); } .ghostAnimateName { :global(.name) { - transition: var(--opacity-transition); opacity: 0; + transition: var(--opacity-transition); } } diff --git a/src/components/story/StoryViewModal.module.scss b/src/components/story/StoryViewModal.module.scss index 57a3f311e..379328c0a 100644 --- a/src/components/story/StoryViewModal.module.scss +++ b/src/components/story/StoryViewModal.module.scss @@ -1,9 +1,8 @@ .views-list { display: flex; flex-direction: column; - padding-bottom: 0 !important; - height: min(35rem, 80vh); + padding-bottom: 0 !important; } .views-list-loading { @@ -16,15 +15,17 @@ } .centeredInfo { - width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + width: 100%; } .view-reaction { --custom-emoji-size: 1.5rem; + margin-inline-start: 0.25rem; } @@ -34,10 +35,10 @@ } .content { - min-height: 17rem; - overflow-y: scroll; position: relative; + overflow-y: scroll; flex-grow: 1; + min-height: 17rem; } .top-button { @@ -68,9 +69,9 @@ } .icon-sort { + margin-inline-end: 0.25rem; font-size: 1.25rem; color: #FFFFFF; - margin-inline-end: 0.25rem; } .icon-down { @@ -83,8 +84,8 @@ } .bottom-info { - font-size: 0.875rem; margin: 0.25rem 0 0.5rem; + font-size: 0.875rem; } .scrolled { @@ -92,8 +93,8 @@ } .footer { - border-top: 0.0625rem solid var(--color-borders); padding-block: 0.25rem; + border-top: 0.0625rem solid var(--color-borders); } .closeButton { diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss index 75b24269e..603074b3a 100644 --- a/src/components/story/StoryViewer.module.scss +++ b/src/components/story/StoryViewer.module.scss @@ -4,17 +4,17 @@ --color-story-meta: rgb(242, 242, 242); position: fixed; + z-index: var(--z-story-viewer); top: 0; - left: 0; right: 0; bottom: 0; - z-index: var(--z-story-viewer); + left: 0; transform-origin: 50% 50%; // Potential perf improvement &:not(:global(.shown)) { - display: block !important; transform: scale(0); + display: block !important; } &:global(.opacity-transition) { @@ -35,9 +35,9 @@ .fullSize, .backdrop, .captionBackdrop { position: absolute; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; } .captionBackdrop { @@ -45,8 +45,8 @@ } .backdrop { - background-color: rgba(0, 0, 0, 0.9); z-index: 0; + background-color: rgba(0, 0, 0, 0.9); @media (max-width: 600px) { background: rgba(0, 0, 0, 1); @@ -56,17 +56,16 @@ .backdropNonInteractive { position: absolute; top: 50%; - left: 0; right: 0; - + left: 0; transform: translateY(-50%); } .close { position: absolute; - right: 1rem; - top: 1rem; z-index: 3; + top: 1rem; + right: 1rem; @media (max-width: 600px) { display: none; @@ -75,14 +74,16 @@ .wrapper { position: absolute; + z-index: 2; top: 0; left: 50%; - width: 100vw; - height: 100%; - overflow: hidden; transform: translateX(-50%); + + overflow: hidden; + + width: 100vw; max-width: calc(73.5rem * var(--story-viewer-scale)); - z-index: 2; + height: 100%; @media (max-width: 600px) { max-width: 100%; @@ -100,13 +101,16 @@ &::before { pointer-events: none; content: ""; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; + left: 0; + height: 4.5rem; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - z-index: 1; } .content { @@ -120,8 +124,8 @@ .caption, .captionGradient, .captionBackdrop { - transition: opacity 250ms ease-in-out; opacity: 0; + transition: opacity 250ms ease-in-out; } .media:not(.mediaPreview) { opacity: 0 !important; @@ -131,8 +135,8 @@ } .content { - opacity: 1 !important; visibility: visible; + opacity: 1 !important; } .contentInner { @@ -148,6 +152,7 @@ position: absolute; top: 50%; left: 50%; + transform-origin: 0 50%; transform: translate3d( calc(var(--slide-x, -50%) - var(--slide-translate-x, 0px)), @@ -155,7 +160,6 @@ 0 ) scale(var(--slide-translate-scale, 1)); - transform-origin: 0 50%; border-radius: var(--border-radius-default-small); @@ -176,9 +180,9 @@ } .mobileSlide { + transform: translateY(var(--slide-translate-y, 0px)); width: 100%; height: 100%; - transform: translateY(var(--slide-translate-y, 0px)); } .slidePreview { @@ -186,8 +190,8 @@ transition: opacity 200ms ease-in-out; &.slideAnimationToActive::before { - transition: opacity 350ms ease-in-out !important; opacity: 0; + transition: opacity 350ms ease-in-out !important; } .root:global(.not-open) &, @@ -197,20 +201,22 @@ } .activeSlide { - height: calc(var(--slide-media-height) + 3.5rem); z-index: 1; + height: calc(var(--slide-media-height) + 3.5rem); &::before { pointer-events: none; content: ""; + position: absolute; - left: 0; + z-index: 3; top: 0; right: 0; bottom: 3.5rem; - background: rgba(0, 0, 0, 0.5); + left: 0; + opacity: 0; - z-index: 3; + background: rgba(0, 0, 0, 0.5); } .content { @@ -221,99 +227,114 @@ .slideInner { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; } .mediaWrapper { position: absolute; - left: 0; top: 0; - width: 100%; - height: 100%; - background: #000; - border-radius: var(--border-radius-default-small); + left: 0; + overflow: hidden; - @media (max-width: 600px) { - width: calc(100% - 1rem) !important; - height: auto !important; - margin: 0.5rem; - bottom: calc(3.5rem + env(safe-area-inset-bottom)); - } + width: 100%; + height: 100%; + border-radius: var(--border-radius-default-small); + + background: #000; :global(body.ghost-animating) & { visibility: hidden; } + + @media (max-width: 600px) { + bottom: calc(3.5rem + env(safe-area-inset-bottom)); + width: calc(100% - 1rem) !important; + height: auto !important; + margin: 0.5rem; + } } .media { position: absolute; - left: 0; top: 0; + left: 0; - object-fit: cover; width: inherit; height: inherit; border-radius: var(--border-radius-default-small); + object-fit: cover; + transition: opacity 300ms; + :global(body.ghost-animating) .activeSlide & { + visibility: hidden; + } + @media (max-width: 600px) { bottom: 0; width: 100%; height: 100%; } - - :global(body.ghost-animating) .activeSlide & { - visibility: hidden; - } } .content { pointer-events: none; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; + left: 0; + height: 100%; + background: rgba(0, 0, 0, 0.5); + transition: opacity 250ms ease-in-out; - z-index: 1; } .contentInner { position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); - z-index: 2; - text-align: center; + display: flex; flex-direction: column; align-items: center; + max-width: 90%; + + text-align: center; } .name { + overflow: hidden; + + max-width: 100%; margin-top: 0.25rem; - color: var(--color-white); + font-size: 1rem; font-weight: var(--font-weight-medium); - max-width: 100%; - overflow: hidden; + color: var(--color-white); text-overflow: ellipsis; white-space: nowrap; } .forward { position: absolute; + z-index: 2; right: 0.75rem; bottom: 4.25rem; + opacity: 0.5; - z-index: 2; transition: opacity 300ms; @@ -329,55 +350,60 @@ // Shared styles for the header that are also used in ghost animation @mixin story-header { - position: absolute; - width: 100%; content: ""; - left: 0; + + position: absolute; + z-index: 1; top: 0; right: 0; + left: 0; + + width: 100%; height: 5rem; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - z-index: 1; border-radius: var(--border-radius-default-small) var(--border-radius-default-small) 0 0; + + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); } .storyHeader { @include story-header; - @media (max-width: 600px) { - width: auto; - left: 0.5rem; - top: 0.5rem; - right: 0.5rem; - } - :global(body.ghost-animating) & { background: none; } + + @media (max-width: 600px) { + top: 0.5rem; + right: 0.5rem; + left: 0.5rem; + width: auto; + } } .storyIndicators { 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; } .sender { position: absolute; z-index: 2; + top: 1.25rem; right: 0.5rem; left: 1rem; - top: 1.25rem; - display: flex; - color: var(--color-white); + display: flex; align-items: center; + + color: var(--color-white); } .senderInfoTransition { @@ -390,49 +416,59 @@ } .senderMeta { + overflow: hidden; display: flex; flex-direction: column; + margin-left: 0.75rem; + line-height: 1.25rem; - overflow: hidden; } .senderName { + cursor: var(--custom-cursor, pointer); + + overflow: hidden; + + min-width: 0; + font-size: 1rem; font-weight: var(--font-weight-medium); - overflow: hidden; text-overflow: ellipsis; - min-width: 0; white-space: nowrap; - cursor: var(--custom-cursor, pointer); } .storyMetaRow { + overflow: hidden; display: flex; align-items: center; - overflow: hidden; } .storyMeta { - font-size: 0.875rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + + font-size: 0.875rem; color: var(--color-story-meta); + text-overflow: ellipsis; + white-space: nowrap; & + & { margin-left: 0.375rem; &::before { content: ""; - width: 0.25rem; - height: 0.25rem; - border-radius: 50%; - background-color: var(--color-white); - display: inline-block; - margin-inline-end: 0.375rem; + position: relative; top: -0.125rem; + + display: inline-block; + + width: 0.25rem; + height: 0.25rem; + margin-inline-end: 0.375rem; + border-radius: 50%; + + background-color: var(--color-white); } } } @@ -446,9 +482,9 @@ } .actions { - margin-inline-start: auto; display: flex; align-items: center; + margin-inline-start: auto; :global(.Button) { color: white; @@ -466,17 +502,21 @@ } .visibilityButton { - min-width: 1.5rem; - height: 1.5rem; - border-radius: 1.5rem; + cursor: var(--custom-cursor, pointer); + display: inline-flex; align-items: center; justify-content: center; - background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); - color: #fff; - font-size: 0.75rem; - cursor: var(--custom-cursor, pointer); + + min-width: 1.5rem; + height: 1.5rem; margin: 0 0.375rem; + border-radius: 1.5rem; + + font-size: 0.75rem; + color: #fff; + + background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); > :global(.icon + .icon) { margin-left: 0.125rem; @@ -500,10 +540,10 @@ } .buttonMenu > :global(.Button.translucent) { - color: var(--color-white); - opacity: 0.5; width: 2.25rem; height: 2.25rem; + color: var(--color-white); + opacity: 0.5; &:hover { opacity: 1; @@ -511,54 +551,68 @@ } .captionGradient { + pointer-events: none; + position: absolute; + right: 0; bottom: 3.5rem; left: 0; - right: 0; - height: 7rem; + overflow: hidden; - background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%); + + height: 7rem; border-radius: 0 0 var(--border-radius-default-small) var(--border-radius-default-small); - pointer-events: none; + + background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%); } .caption { + pointer-events: none; + position: absolute; - left: 0; - width: 100%; top: 4rem; bottom: calc(4.25rem + env(safe-area-inset-bottom)); + left: 0; + + overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; + + width: 100%; border-radius: 0 0 var(--border-radius-default-small) var(--border-radius-default-small); - overflow: hidden; - pointer-events: none; } .captionInner { + scrollbar-gutter: stable; + position: relative; - overflow-wrap: anywhere; - white-space: pre-wrap; - line-height: 1.25rem; - text-align: initial; + unicode-bidi: plaintext; - padding: 2rem 1rem 0; overflow-x: hidden; overflow-y: scroll; - scrollbar-gutter: stable; + + padding: 2rem 1rem 0; + + line-height: 1.25rem; + text-align: initial; + overflow-wrap: anywhere; + white-space: pre-wrap; @include mixins.adapt-padding-to-scrollbar(2rem); } .captionContent { - width: 100%; - color: var(--color-white); - font-size: var(--message-text-size, 1rem); + pointer-events: all; + display: flex; flex-direction: column; + + width: 100%; min-height: 0; - pointer-events: all; + + font-size: var(--message-text-size, 1rem); + color: var(--color-white); } .captionText :global(.custom-emoji) { @@ -567,6 +621,7 @@ .hasOverflow { --_overflow-shift: 5.75rem; + transform: translateY(calc(100% - var(--_overflow-shift))); } @@ -590,22 +645,25 @@ .captionInner { overflow-y: hidden; - mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 75%, transparent 100%); - mask-position: 100% 100%, 100% calc(var(--_overflow-shift) - 1.25rem); - mask-size: 100% 100%, calc(var(--expand-button-width, 0%) + 4rem) 1.25em; - mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; + + mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 75%, transparent 100%); + mask-position: 100% 100%, 100% calc(var(--_overflow-shift) - 1.25rem); + mask-repeat: no-repeat; + mask-size: 100% 100%, calc(var(--expand-button-width, 0%) + 4rem) 1.25em; } } .captionShowMore { - position: absolute; - bottom: -0.25rem; - right: 0.5rem; - color: var(--color-white); - font-weight: var(--font-weight-medium); cursor: var(--custom-cursor, pointer); + + position: absolute; + right: 0.5rem; + bottom: -0.25rem; + + font-weight: var(--font-weight-medium); + color: var(--color-white); } .composer { @@ -614,19 +672,21 @@ --color-composer-button: #707478; position: absolute; - height: 3rem; + z-index: 3; bottom: 0; left: 0; + + height: 3rem; margin-bottom: 0; - z-index: 3; + transition: transform var(--layer-transition), opacity 0.15s ease; &:global(.Composer) { --base-height: 3rem; @media (max-width: 600px) { - padding: 0 0.5rem 0.5rem; margin-bottom: env(safe-area-inset-bottom); + padding: 0 0.5rem 0.5rem; } } @@ -667,16 +727,19 @@ } .navigate { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 0; bottom: 0; + width: 50%; - background: none; - padding: 0; margin: 0; + padding: 0; border: none; + + background: none; outline: none !important; - cursor: var(--custom-cursor, pointer); } .prev { @@ -688,17 +751,20 @@ } .modal :global(.modal-content) { - padding: 0.5rem !important; max-height: min(35rem, 80vh); + padding: 0.5rem !important; } .thumbnail { position: absolute; top: 0; left: 0; + + display: block; + width: 100%; height: 100%; - display: block; + object-fit: cover; @media (max-width: 600px) { @@ -709,10 +775,13 @@ .ghost { position: absolute; z-index: 1; + overflow: hidden; - transition: transform 200ms ease; + border-radius: var(--border-radius-default-small); + transition: transform 200ms ease; + &:before { @include story-header; } @@ -721,24 +790,30 @@ .ghost2 { position: absolute; z-index: 1; + overflow: hidden; + border-radius: 50%; + opacity: 0; + transition: transform 200ms ease, opacity 200ms ease; } .ghostImage { + -webkit-user-select: none; + user-select: none; + width: 100%; height: 100%; - user-select: none; - -webkit-user-select: none; + object-fit: cover; } .forwardHeader { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; &.clickable { cursor: var(--custom-cursor, pointer); @@ -750,26 +825,26 @@ } .headerTitle { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .forwardInfo { --accent-color: var(--color-white); --accent-background-color: rgba(0, 0, 0, 0.5); + z-index: 1; width: fit-content; max-width: 100%; margin-bottom: 0.5rem; - z-index: 1; } .fromPeer { - display: flex; - align-items: center; - gap: 0.25rem; cursor: var(--custom-cursor, pointer); + display: flex; + gap: 0.25rem; + align-items: center; &:hover { text-decoration: underline; diff --git a/src/components/story/mediaArea/MediaArea.module.scss b/src/components/story/mediaArea/MediaArea.module.scss index 17ba9b2d2..9244bbfe2 100644 --- a/src/components/story/mediaArea/MediaArea.module.scss +++ b/src/components/story/mediaArea/MediaArea.module.scss @@ -1,29 +1,32 @@ .overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: auto; - height: auto; - aspect-ratio: 9 / 16; pointer-events: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + aspect-ratio: 9 / 16; + width: auto; + height: auto; + @media (max-width: 600px) { + top: 50%; right: auto; left: 50%; - top: 50%; + transform: translate(-50%, -50%); + width: var(--media-width, 100%); height: var(--media-height, 100%); - transform: translate(-50%, -50%); } } .mediaArea { - position: absolute; - transform-origin: top left; pointer-events: all; cursor: var(--custom-cursor, pointer); + position: absolute; + transform-origin: top left; } .preview .mediaArea { @@ -37,14 +40,19 @@ .shiny::before { --color-shine: rgb(255, 255, 255, 0.5); + content: ""; + position: absolute; top: 0; display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-shine) 50%, transparent 100%); + animation: wave 1s cubic-bezier(0.4, 0, 0.6, 1) forwards; @keyframes wave { @@ -59,40 +67,44 @@ .light { --background-color: white; + color: black; } .dark { --background-color: black; + color: white; } .reactionBackground { + cursor: var(--custom-cursor, pointer); + width: 100%; height: 100%; - background-color: var(--background-color); border-radius: 50%; + + background-color: var(--background-color); filter: drop-shadow(0 0.125rem 0.25rem var(--color-default-shadow)); - cursor: var(--custom-cursor, pointer); &::before, &::after { - position: absolute; content: ""; - background-color: var(--background-color); + position: absolute; border-radius: 50%; + background-color: var(--background-color); } &::before { - bottom: 5%; right: 5%; + bottom: 5%; width: 30%; height: 30%; } &::after { - bottom: 0; right: -5%; + bottom: 0; width: 10%; height: 10%; } @@ -119,6 +131,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + transition: transform 200ms ease-out; &.withCount { @@ -131,6 +144,7 @@ bottom: 8%; left: 50%; transform: translateX(-50%); + font-weight: var(--font-weight-medium); } @@ -140,21 +154,23 @@ } .weatherInner { - width: auto !important; - height: auto !important; - display: flex; + gap: 0.2em; align-items: center; justify-content: center; - gap: 0.2em; - white-space: nowrap; + + width: auto !important; + height: auto !important; padding: 0 0.2em; - background-color: var(--custom-background-color); border-radius: 0.25em; + + white-space: nowrap; + + background-color: var(--custom-background-color); } .temperature { + margin: 0; font-family: var(--font-family-condensed); font-weight: var(--font-weight-semibold); - margin: 0; } diff --git a/src/components/story/privacy/CloseFriends.module.scss b/src/components/story/privacy/CloseFriends.module.scss index 340f4e9a7..cb54beb8d 100644 --- a/src/components/story/privacy/CloseFriends.module.scss +++ b/src/components/story/privacy/CloseFriends.module.scss @@ -1,11 +1,14 @@ .buttonHolder { - position: absolute; - height: 6rem; - width: 6rem; - bottom: 0; - right: 0; - overflow: hidden; pointer-events: none; + + position: absolute; + right: 0; + bottom: 0; + + overflow: hidden; + + width: 6rem; + height: 6rem; } .active { diff --git a/src/components/ui/AvatarEditable.scss b/src/components/ui/AvatarEditable.scss index cfe9d11e1..b0c03d32b 100644 --- a/src/components/ui/AvatarEditable.scss +++ b/src/components/ui/AvatarEditable.scss @@ -2,22 +2,28 @@ .AvatarEditable { label { - margin-left: auto; - margin-right: auto; - width: 7.5rem; - height: 7.5rem; - margin-bottom: 2rem; + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex !important; align-items: center; justify-content: center; - background-color: var(--color-primary); + + width: 7.5rem; + height: 7.5rem; + margin-right: auto; + margin-bottom: 2rem; + margin-left: auto; border-radius: 50%; - color: white; + font-size: 3rem; - cursor: var(--custom-cursor, pointer); - position: relative; - overflow: hidden; + color: white; + + background-color: var(--color-primary); outline: none !important; + transition: border-radius 200ms; input { @@ -28,14 +34,15 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } .icon { + z-index: var(--z-register-add-avatar); transform: scale(1); transition: transform 0.15s linear; - z-index: var(--z-register-add-avatar); } // @optimization The weirdest workaround for screen animation lag @@ -62,12 +69,16 @@ &::after { content: ""; - display: block; + position: absolute; - left: 0; top: 0; + left: 0; + + display: block; + width: 100%; height: 100%; + background-color: rgba(black, 0.4); } } @@ -75,11 +86,11 @@ &.disabled { pointer-events: none; - .icon { + &::after { display: none; } - &::after { + .icon { display: none; } } diff --git a/src/components/ui/Badge.module.scss b/src/components/ui/Badge.module.scss index 91af7da49..35ea8150f 100644 --- a/src/components/ui/Badge.module.scss +++ b/src/components/ui/Badge.module.scss @@ -1,18 +1,20 @@ .root { + flex-shrink: 0; + min-width: 1.5rem; height: 1.5rem; - border-radius: 0.75rem; padding: 0 0.4375rem; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.5625rem; font-weight: var(--font-weight-medium); + line-height: 1.5625rem; text-align: center; - flex-shrink: 0; } .default { - background: var(--color-gray); color: var(--color-white); + background: var(--color-gray); } .alternate { diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index 0bd1e1535..b31f993a6 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -25,28 +25,35 @@ } .Button { - outline: none !important; + + --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); + + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; + flex-shrink: 0; align-items: center; justify-content: center; + width: 100%; height: 3.5rem; + padding: 0.625rem; border: 0; border-radius: var(--border-radius-default); - background-color: transparent; - background-size: cover; - padding: 0.625rem; - color: white; + line-height: 1.2; - cursor: var(--custom-cursor, pointer); - flex-shrink: 0; - position: relative; - overflow: hidden; - transition: background-color 0.15s, color 0.15s; + color: white; text-decoration: none !important; text-transform: uppercase; - --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); + background-color: transparent; + background-size: cover; + outline: none !important; + + transition: background-color 0.15s, color 0.15s; // @optimization &:active, @@ -72,10 +79,11 @@ } &.primary { - background-color: var(--color-primary); - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: var(--color-primary); + @include active-styles() { background-color: var(--color-primary-shade); } @@ -86,13 +94,14 @@ } &.secondary { - background-color: var(--color-background); - color: rgba(var(--color-text-secondary-rgb), 0.75); --ripple-color: rgba(0, 0, 0, 0.08); + color: rgba(var(--color-text-secondary-rgb), 0.75); + background-color: var(--color-background); + @include active-styles() { - background-color: var(--color-primary); color: white; + background-color: var(--color-primary); } @include no-ripple-styles() { @@ -101,10 +110,11 @@ } &.gray { - background-color: var(--color-background); - color: var(--color-text-secondary); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-text-secondary); + background-color: var(--color-background); + @include active-styles() { color: var(--color-primary); } @@ -115,13 +125,14 @@ } &.danger { - background-color: var(--color-background); - color: var(--color-error); --ripple-color: rgba(var(--color-error-rgb), 0.16); + color: var(--color-error); + background-color: var(--color-background); + @include active-styles() { - background-color: var(--color-error); color: var(--color-white); + background-color: var(--color-error); } @include no-ripple-styles() { @@ -146,14 +157,14 @@ } &.secondary { - background-color: transparent; color: var(--color-text-secondary); + background-color: transparent; } &.danger { @include active-styles() { - background-color: rgba(var(--color-error-rgb), 0.08); color: var(--color-error); + background-color: rgba(var(--color-error-rgb), 0.08); } @include no-ripple-styles() { @@ -176,8 +187,9 @@ &.translucent { --ripple-color: var(--color-interactive-element-hover); - background-color: transparent; + color: var(--color-text-secondary); + background-color: transparent; @include active-styles() { background-color: var(--color-interactive-element-hover); @@ -194,12 +206,13 @@ &.translucent-white { --ripple-color: rgba(255, 255, 255, 0.08); - background-color: transparent; + color: rgba(255, 255, 255, 0.5); + background-color: transparent; @include active-styles() { - background-color: rgba(255, 255, 255, 0.08); color: white; + background-color: rgba(255, 255, 255, 0.08); } @include no-ripple-styles() { @@ -209,8 +222,9 @@ &.translucent-black { --ripple-color: rgba(0, 0, 0, 0.08); - background-color: transparent; + color: rgba(0, 0, 0, 0.8); + background-color: transparent; @include active-styles() { background-color: rgba(0, 0, 0, 0.08); @@ -223,13 +237,14 @@ &.translucent-bordered { --ripple-color: rgba(0, 0, 0, 0.08); - background-color: transparent; - color: var(--accent-color); + border: 1px solid var(--accent-color); + color: var(--accent-color); + background-color: transparent; @include active-styles() { - background-color: var(--accent-color); color: var(--color-white); + background-color: var(--accent-color); } @include no-ripple-styles() { @@ -239,8 +254,9 @@ &.adaptive { --ripple-color: var(--accent-background-active-color); - background-color: var(--accent-background-color); + color: var(--accent-color); + background-color: var(--accent-background-color); @include active-styles() { background-color: var(--accent-background-active-color); @@ -252,13 +268,14 @@ } &.dark { - background-color: rgba(0, 0, 0, 0.75); - color: white; --ripple-color: rgba(255, 255, 255, 0.08); + color: white; + background-color: rgba(0, 0, 0, 0.75); + @include active-styles() { - background-color: rgba(0, 0, 0, 0.85); color: white; + background-color: rgba(0, 0, 0, 0.85); } @include no-ripple-styles() { @@ -267,10 +284,11 @@ } &.green { - background-color: var(--color-green); - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: var(--color-green); + @include active-styles() { background-color: var(--color-green-darker); } @@ -281,10 +299,11 @@ } &.stars { - background-color: #FFB727; - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: #FFB727; + .theme-dark & { background-color: #CF8920; } @@ -308,26 +327,26 @@ &.pill { height: 2.5rem; - border-radius: 1.25rem; padding: 0.3125rem 1rem; + border-radius: 1.25rem; } &.with-icon { - padding-left: 0.75rem; padding-right: 1.25rem; + padding-left: 0.75rem; .icon { - font-size: 1.5rem; margin-right: 0.5rem; + font-size: 1.5rem; } &[dir="rtl"] { - padding-left: 1.25rem; padding-right: 0.75rem; + padding-left: 1.25rem; .icon { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } } } @@ -345,6 +364,7 @@ height: 2.25rem; padding: 0.4375rem; border-radius: var(--border-radius-default-small); + font-size: 0.875rem; font-weight: var(--font-weight-medium); @@ -360,8 +380,8 @@ &.pill { height: 1.875rem; - border-radius: 1rem; padding: 0.3125rem 1rem; + border-radius: 1rem; font-size: 1rem; } } @@ -376,13 +396,13 @@ } &.fluid { - padding-left: 1.75rem; - padding-right: 1.75rem; width: auto; + padding-right: 1.75rem; + padding-left: 1.75rem; &.tiny { - padding-left: 1.375rem; padding-right: 1.375rem; + padding-left: 1.375rem; } &.pill { @@ -395,23 +415,24 @@ } &.pill, &.badge { - border-radius: 1.75rem; - padding-left: 1.75rem; padding-right: 1.75rem; + padding-left: 1.75rem; + border-radius: 1.75rem; text-transform: none; } &.loading { - position: relative; pointer-events: none; + position: relative; .Spinner { - position: absolute; - right: 0.875rem; - top: 50%; - transform: translateY(-50%); --spinner-size: 1.8125rem; + + position: absolute; + top: 50%; + right: 0.875rem; + transform: translateY(-50%); } } @@ -421,13 +442,17 @@ &.shiny::before { content: ""; + position: absolute; top: 0; display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%); + animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes wave { diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss index a7a9bf291..46c4d5f92 100644 --- a/src/components/ui/Checkbox.scss +++ b/src/components/ui/Checkbox.scss @@ -1,19 +1,21 @@ .Checkbox { + cursor: var(--custom-cursor, pointer); + position: relative; - min-height: 3rem; display: flex; align-items: center; - padding-inline-start: 4rem; - text-align: left; - cursor: var(--custom-cursor, pointer); + min-height: 3rem; margin-bottom: 0; + padding-inline-start: 4rem; + + text-align: left; &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } &.disabled { @@ -39,8 +41,8 @@ .Checkbox-main { &::before, &::after { - left: auto; right: 1.1875rem; + left: auto; } } } @@ -52,12 +54,15 @@ } .Spinner { - position: absolute; - left: 0.375rem; - top: 0.125rem; - opacity: 0; - animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; + + position: absolute; + top: 0.125rem; + left: 0.375rem; + + opacity: 0; + + animation: fade-in 0.2s ease forwards; } } @@ -68,12 +73,12 @@ } &::after { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==); opacity: 1; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==); + background-position: -0.125rem -0.125rem; // Compensate for svg having incorrect size background-size: 1.5rem; - background-position: -0.125rem -0.125rem; } } } @@ -88,20 +93,23 @@ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; - align-items: center; flex-grow: 1; + align-items: center; &::before, &::after { + pointer-events: none; content: ""; - display: block; + position: absolute; + top: 50%; + left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) - top: 50%; - transform: translateY(-50%); - pointer-events: none; } &::before { @@ -112,46 +120,50 @@ } &::after { + opacity: 0; /* stylelint-disable-next-line scss/operator-no-unspaced */ background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==); background-size: 0.875rem; - opacity: 0; transition: opacity 0.1s ease; } .label { - overflow-wrap: anywhere; unicode-bidi: plaintext; - text-align: left; line-height: 1.25rem; + text-align: left; + overflow-wrap: anywhere; } .right-icon { grid-column: 2; grid-row: span 2; - margin-left: auto; - margin-right: 0.5rem; - color: var(--color-text-secondary); - font-size: 1.25rem; align-self: center; + + margin-right: 0.5rem; + margin-left: auto; + + font-size: 1.25rem; + color: var(--color-text-secondary); } .subLabel { + unicode-bidi: plaintext; grid-column: 1; grid-row: 2; + + margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - unicode-bidi: plaintext; - margin-top: 0.25rem; } } &.withSubLabel { &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } .Checkbox-main { @@ -164,17 +176,20 @@ &::after { pointer-events: none; content: ""; - display: block; + position: absolute; left: 1.125rem; + + display: block; + width: 1.125rem; height: 1.125rem; } .label { display: flex; - align-items: center; column-gap: 0.6875rem; + align-items: center; } } @@ -192,8 +207,8 @@ &[dir="rtl"] { &.loading { .Spinner { - left: auto; right: 0.375rem; + left: auto; } } @@ -205,35 +220,36 @@ .Checkbox-main { &::before, &::after { - left: auto; right: 1rem; + left: auto; } } } &.nested { display: flex; - justify-content: space-between; - align-items: center; gap: 0.3125rem; + align-items: center; + justify-content: space-between; + margin-block: 0; padding: 0 0 0 4.1875rem; &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } } &.withNestedList { - background-color: var(--color-background); margin: 0; + background-color: var(--color-background); &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } } @@ -253,14 +269,14 @@ } &.avatar { - padding-inline-start: 3.5rem; margin-inline-start: 3.125rem; + padding-inline-start: 3.5rem; } .button { - color: var(--color-text); display: flex; gap: 0.1875rem; + color: var(--color-text); } .group-icon { @@ -274,16 +290,16 @@ } &.onlyInput { - min-height: auto; position: relative; + min-height: auto; padding-inline-start: 0.8125rem; .Checkbox-main { &::before, &::after { - left: 0; - right: 0; top: 0; + right: 0; + left: 0; } } } diff --git a/src/components/ui/CropModal.scss b/src/components/ui/CropModal.scss index cc455ed4e..ca30be331 100644 --- a/src/components/ui/CropModal.scss +++ b/src/components/ui/CropModal.scss @@ -1,7 +1,7 @@ @mixin thumb-styles() { - background: var(--color-primary); cursor: var(--custom-cursor, pointer); transform: scale(1); + background: var(--color-primary); transition: transform 0.25s ease-in-out; &:hover { @@ -11,11 +11,12 @@ .CropModal { .modal-dialog { + position: relative; + width: calc(100% - 2rem); max-width: 35rem; height: calc(100% - 1rem); max-height: 35rem; - position: relative; } .modal-content, @@ -25,15 +26,15 @@ .confirm-button { position: absolute; - bottom: 1rem; right: 1rem; + bottom: 1rem; box-shadow: 0 1px 2px var(--color-default-shadow); } #avatar-crop { + position: relative; max-width: 25rem; margin: 0 auto; - position: relative; &::before { content: ""; diff --git a/src/components/ui/Draggable.module.scss b/src/components/ui/Draggable.module.scss index 51e9881af..aa8d8f0ab 100644 --- a/src/components/ui/Draggable.module.scss +++ b/src/components/ui/Draggable.module.scss @@ -1,7 +1,7 @@ .container { position: absolute; - width: 100%; z-index: 1; + width: 100%; &:has(:global(.ListItem-context-menu)) { z-index: 2; @@ -17,36 +17,39 @@ } .knob { + cursor: grab !important; + position: absolute; top: 50%; transform: translateY(-50%); - width: 2rem; - height: 2rem; display: grid; place-items: center; - color: var(--color-text-secondary); + width: 2rem; + height: 2rem; + font-size: 1.25rem; line-height: 1.75; + color: var(--color-text-secondary); text-align: center; - opacity: 0; - transition: opacity 150ms; - cursor: grab !important; + opacity: 0; + + transition: opacity 150ms; .container:hover & { opacity: 1; } .isDragging & { - opacity: 1; cursor: grabbing !important; + opacity: 1; } @media (pointer: coarse) { - opacity: 1 !important; touch-action: none; + opacity: 1 !important; } } diff --git a/src/components/ui/FloatingActionButton.scss b/src/components/ui/FloatingActionButton.scss index d4f1200fd..eb5ccfde9 100644 --- a/src/components/ui/FloatingActionButton.scss +++ b/src/components/ui/FloatingActionButton.scss @@ -1,10 +1,11 @@ .FloatingActionButton { position: absolute; + z-index: 2; right: 1rem; bottom: 1rem; transform: translateY(5rem); + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); - z-index: 2; body.no-page-transitions & { transition: none !important; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 897b08134..310798aa4 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -5,10 +5,12 @@ body.is-android & { &::after { content: ""; + position: absolute; + right: 0; bottom: 0; left: 4.5rem; - right: 0; + height: 0.0625rem; /* stylelint-disable-next-line plugin/whole-pixel */ @@ -23,10 +25,12 @@ // Conceal above item divider &.selected::before { content: ""; + position: absolute; top: -0.0625rem; - left: 4.5rem; right: 0; + left: 4.5rem; + height: 0.0625rem; /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: inset 0 -0.03125rem 0 0 var(--color-background); @@ -59,40 +63,45 @@ } .ListItem-button { - min-height: 3rem; - background-color: var(--background-color); - border: none !important; - box-shadow: none !important; - outline: none !important; + --ripple-color: rgba(0, 0, 0, 0.08); + + position: relative; + + overflow: hidden; display: flex; align-items: center; + + min-height: 3rem; padding: 0 1rem; - position: relative; - overflow: hidden; - white-space: nowrap; - color: var(--color-text); + border: none !important; border-radius: var(--border-radius-default); - --ripple-color: rgba(0, 0, 0, 0.08); + + color: var(--color-text); text-decoration: none; + white-space: nowrap; + + background-color: var(--background-color); + outline: none !important; + box-shadow: none !important; body.is-ios &, body.is-android & { border-radius: 0; } - @media (max-width: 600px) { - border-radius: 0; - } - > .ListItem-main-icon { + margin-right: 1.75rem; font-size: 1.5rem; color: var(--color-text-secondary); - margin-right: 1.75rem; } > .Switcher { margin-inline-start: auto; } + + @media (max-width: 600px) { + border-radius: 0; + } } &.with-color-transition { @@ -106,15 +115,15 @@ .title, .other-usernames, .subtitle { - text-align: initial; unicode-bidi: plaintext; + text-align: initial; text-overflow: ellipsis; } .other-usernames { display: block; - white-space: normal; line-height: 1.25rem; + white-space: normal; } .username-link { @@ -159,15 +168,6 @@ } } - @media (min-width: 600px) { - &:not(.has-ripple):not(.is-static), - body.no-page-transitions & { - .ListItem-button:active { - --background-color: var(--color-item-active) !important; - } - } - } - &.has-menu-open .ListItem-button { --background-color: var(--color-chat-hover); } @@ -207,8 +207,8 @@ width: auto; .MenuItem button { - padding-left: 1rem !important; padding-right: 2rem !important; + padding-left: 1rem !important; } } } @@ -251,8 +251,8 @@ .title, .subtitle { display: flex; - justify-content: flex-start; align-items: center; + justify-content: flex-start; min-width: 0; } @@ -265,12 +265,14 @@ .last-message, .status, .typing-status { - font-size: 1rem; - margin: 0; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + + margin: 0; + + font-size: 1rem; text-align: initial; + text-overflow: ellipsis; + white-space: nowrap; } h3, @@ -286,8 +288,8 @@ } .status-icon { - vertical-align: text-bottom; margin-inline-end: 0.125rem; + vertical-align: text-bottom; } .contact-phone, @@ -299,8 +301,8 @@ .ChatInfo { display: flex; - align-items: center; flex: 1; + align-items: center; min-width: 0; .info { @@ -310,22 +312,24 @@ } .custom-title { + overflow: hidden; + flex-shrink: 0; + + margin-inline-start: auto; padding-inline-start: 1rem; + font-size: 0.875rem; color: var(--color-text-secondary); - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - margin-inline-start: auto; - flex-shrink: 0; + white-space: nowrap; } .status, .typing-status { + display: inline-block; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-text-secondary); - display: inline-block; &.online { color: var(--color-primary); @@ -333,8 +337,8 @@ &[dir="rtl"], &[dir="auto"] { - text-align: initial; width: 100%; + text-align: initial; } .group-status:only-child, @@ -350,8 +354,8 @@ .last-message, .status, .typing-status { - text-align: initial; unicode-bidi: plaintext; + text-align: initial; } .last-message, @@ -369,8 +373,8 @@ } .Avatar { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } .info > .status { @@ -383,9 +387,9 @@ margin: 0; .ListItem-button { - padding-left: 0; display: flex; align-items: center; + padding-left: 0; } .Avatar { @@ -406,8 +410,8 @@ &[dir="rtl"] { .Checkbox { - padding-left: 0; padding-right: 4rem; + padding-left: 0; } } } @@ -423,11 +427,10 @@ } .multiline-item { - flex-grow: 1; - white-space: initial; overflow: hidden; - + flex-grow: 1; padding: 0.4375rem 0 0.5625rem 0; + white-space: initial; .word-break { overflow-wrap: break-word; @@ -444,26 +447,35 @@ } .title { - line-height: 1.25rem; overflow: hidden; + line-height: 1.25rem; text-overflow: ellipsis; } .subtitle { + margin-top: 0.25rem; font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - margin-top: 0.25rem; &.black { color: var(--color-text); } } } + + @media (min-width: 600px) { + &:not(.has-ripple):not(.is-static), + body.no-page-transitions & { + .ListItem-button:active { + --background-color: var(--color-item-active) !important; + } + } + } } .list-item-ellipsis { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/ui/Loading.scss b/src/components/ui/Loading.scss index 6f7f96f33..3d8300e45 100644 --- a/src/components/ui/Loading.scss +++ b/src/components/ui/Loading.scss @@ -1,8 +1,8 @@ .Loading { display: flex; - height: 100%; align-items: center; justify-content: center; + height: 100%; &.interactive { cursor: var(--custom-cursor, pointer); diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index 08a76fe77..caf88db99 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -1,34 +1,42 @@ .Menu { &.fluid .bubble { - min-width: 13.5rem; width: auto; + min-width: 13.5rem; } .backdrop { position: fixed; - left: -100vw; - right: -100vw; - top: -100vh; - bottom: -100vh; z-index: var(--z-menu-backdrop); + top: -100vh; + right: -100vw; + bottom: -100vh; + left: -100vw; } .bubble { - overflow: hidden; - display: block; - list-style: none; - padding: 0.5rem 0; - margin: 0; + + --offset-y: calc(100% + 0.5rem); + --offset-x: 0; + position: absolute; + z-index: var(--z-menu-bubble); + transform: scale(0.85); + + overflow: hidden; + overscroll-behavior: contain; + display: block; + + min-width: 13.5rem; + margin: 0; + padding: 0.5rem 0; + border-radius: var(--border-radius-default); + + color: var(--color-text); + list-style: none; + background-color: var(--color-background); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - min-width: 13.5rem; - z-index: var(--z-menu-bubble); - overscroll-behavior: contain; - color: var(--color-text); - transform: scale(0.85); transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; &.open { @@ -52,9 +60,6 @@ transition: opacity 0.15s !important; } - --offset-y: calc(100% + 0.5rem); - --offset-x: 0; - &.top { top: var(--offset-y); } @@ -82,17 +87,19 @@ .footer { padding: 0.5rem 0; - background: var(--color-chat-hover); - color: var(--color-text-secondary); + font-size: 0.8125rem; + color: var(--color-text-secondary); text-align: center; + + background: var(--color-chat-hover); } &.compact { .bubble { + padding: 0.25rem 0; background: var(--color-background-compact-menu); backdrop-filter: blur(10px); - padding: 0.25rem 0; body.no-menu-blur & { background: var(--color-background); @@ -110,13 +117,13 @@ } .menu-loading-row { - margin: 0.125rem 1rem; width: calc(100% - 2rem); + margin: 0.125rem 1rem; } &.in-portal { - z-index: var(--z-portal-menu); position: absolute; + z-index: var(--z-portal-menu); } } diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss index 88c85334d..39addde07 100644 --- a/src/components/ui/MenuItem.scss +++ b/src/components/ui/MenuItem.scss @@ -1,72 +1,59 @@ .MenuItem { - width: 100%; - background: none; - border: none !important; - box-shadow: none !important; - outline: none !important; + --ripple-color: rgba(0, 0, 0, 0.08); + + cursor: var(--custom-cursor, pointer); + + position: relative; + + unicode-bidi: plaintext; + overflow: hidden; display: flex; align-items: center; + + width: 100%; padding: 0.75rem 1rem; - position: relative; - overflow: hidden; + border: none !important; + line-height: 1.5rem; - white-space: nowrap; color: var(--color-text); - --ripple-color: rgba(0, 0, 0, 0.08); - cursor: var(--custom-cursor, pointer); - unicode-bidi: plaintext; + white-space: nowrap; + + background: none; + outline: none !important; + box-shadow: none !important; .right-badge { + flex-shrink: 0; + min-width: 1.5rem; height: 1.5rem; margin-left: auto; - background: var(--color-gray); - border-radius: 0.75rem; padding: 0 0.4375rem; - color: white; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.5rem; font-weight: var(--font-weight-medium); + line-height: 1.5rem; + color: white; text-align: center; - flex-shrink: 0; + + background: var(--color-gray); } &.compact .right-badge { - background: none; padding: 0; color: var(--color-text-secondary); + background: none; } &[dir="rtl"] .right-badge { - margin-left: 0; margin-right: auto; - } - - @media (hover: hover) { - &:hover, - &:focus { - background-color: var(--color-chat-hover); - text-decoration: none; - color: inherit; - } - } - - @media (max-width: 600px) { - &:focus, - &:hover, - &:active { - text-decoration: none; - color: inherit; - } - - &:active { - background-color: var(--color-chat-hover); - } + margin-left: 0; } .icon { - font-size: 1.5rem; margin-right: 2rem; + font-size: 1.5rem; color: var(--color-icon-secondary); } @@ -79,8 +66,8 @@ } &.disabled { - opacity: 0.5 !important; cursor: var(--custom-cursor, default) !important; + opacity: 0.5 !important; } &.destructive { @@ -102,45 +89,50 @@ .menu-item-badge { margin-right: 0.25rem; + font-size: 0.75rem; - color: var(--color-primary); font-weight: normal; line-height: normal; + color: var(--color-primary); } &[dir="rtl"] { .icon { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } .menu-item-name { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } > .Switcher { - margin-left: 0; margin-right: auto; + margin-left: 0; } } &.compact { - font-size: 0.875rem; + will-change: transform; + + transform: scale(1); + + width: auto; margin: 0.125rem 0.25rem; padding: 0.25rem; padding-inline-end: 0.75rem; // Icon padding + padding for symmetry border-radius: 0.375rem; - width: auto; + + font-size: 0.875rem; font-weight: var(--font-weight-medium); - transform: scale(1); + transition: 0.15s ease-in-out transform; - will-change: transform; .icon { max-width: 1.25rem; - font-size: 1.25rem; margin-inline: 0.5rem 1.25rem; + font-size: 1.25rem; &::before { max-width: 1.25rem; @@ -151,8 +143,8 @@ &:hover, &:focus, &:active { - background: var(--color-background-compact-menu-hover); text-decoration: none; + background: var(--color-background-compact-menu-hover); } &:active { @@ -173,8 +165,31 @@ &.menu-custom-emoji-sets { margin: 0 0.25rem; padding: 0.5rem 0.75rem; - font-weight: var(--font-weight-normal); + font-size: small; + font-weight: var(--font-weight-normal); line-height: 1.125rem; } + + @media (hover: hover) { + &:hover, + &:focus { + color: inherit; + text-decoration: none; + background-color: var(--color-chat-hover); + } + } + + @media (max-width: 600px) { + &:focus, + &:hover, + &:active { + color: inherit; + text-decoration: none; + } + + &:active { + background-color: var(--color-chat-hover); + } + } } diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index 828b3b5a2..14b83417b 100644 --- a/src/components/ui/Modal.scss +++ b/src/components/ui/Modal.scss @@ -46,12 +46,13 @@ .modal-container { position: fixed; top: 0; + right: 0; bottom: 0; left: 0; - right: 0; + display: flex; - justify-content: center; align-items: center; + justify-content: center; } &.with-balance-bar { @@ -59,18 +60,19 @@ top: 5.5rem; } .modal-dialog { - margin-top: 0; max-height: calc(100vh - 7.5rem); + margin-top: 0; } } .modal-backdrop { position: fixed; + z-index: -1; top: 0; right: 0; bottom: 0; left: 0; - z-index: -1; + background-color: rgba(0, 0, 0, 0.25); } @@ -80,22 +82,25 @@ .modal-dialog { position: relative; + transform: translate3d(0, -1rem, 0); + display: inline-flex; flex-direction: column; + width: 100%; - max-width: 35rem; min-width: 17.5rem; + max-width: 35rem; margin: 2rem auto; + border-radius: var(--border-radius-modal); + background-color: var(--color-background); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-modal); - transform: translate3d(0, -1rem, 0); transition: transform 0.2s ease, opacity 0.2s ease; body.no-page-transitions & { - transition: none; transform: none !important; + transition: none; } @media (max-width: 450px) { @@ -113,17 +118,18 @@ .modal-header, %modal-header { - padding: 1.3125rem 1.375rem 0; display: flex; - align-items: center; flex-shrink: 0; + align-items: center; + padding: 1.3125rem 1.375rem 0; } .modal-title { + overflow: hidden; + flex: 1 1 auto; + font-size: 1.25rem; font-weight: var(--font-weight-medium); - flex: 1 1 auto; - overflow: hidden; text-overflow: ellipsis; &:not(:only-child) { @@ -133,21 +139,23 @@ .modal-header-condensed { @extend %modal-header; + padding: 0.5rem 1.25rem 0 0.9375rem !important; .modal-action-button { - font-size: 0.875rem; - height: 2.25rem; width: auto; - line-height: 1.625rem; - margin-left: auto; - padding-left: 1.25rem; - padding-right: 1.25rem; min-width: 5rem; + height: 2.25rem; + margin-left: auto; + padding-right: 1.25rem; + padding-left: 1.25rem; + + font-size: 0.875rem; + line-height: 1.625rem; &.danger { - background-color: var(--color-error); color: var(--color-white); + background-color: var(--color-error); &:hover, &:focus, @@ -159,11 +167,12 @@ } .modal-content { - width: 100%; - flex-grow: 1; - padding: 1rem 1.5rem 1.1875rem; overflow-y: auto; + flex-grow: 1; + + width: 100%; max-height: 92vh; + padding: 1rem 1.5rem 1.1875rem; b, strong { @@ -178,25 +187,26 @@ } .modal-about { + overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; + text-overflow: ellipsis; - overflow: hidden; } .modal-help { - color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.3; + color: var(--color-text-secondary); } .dialog-buttons { display: flex; flex-direction: row-reverse; - justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem 1rem; + justify-content: flex-start; } .dialog-buttons-column { @@ -220,8 +230,9 @@ .confirm-dialog-button { width: auto; height: auto; - text-align: right; + font-weight: var(--font-weight-semibold); + text-align: right; white-space: pre-wrap; } @@ -231,8 +242,8 @@ .modal-absolute-close-button { position: absolute; + z-index: 1; top: 0.375rem; left: 0.375rem; - z-index: 1; } } diff --git a/src/components/ui/ModalStarBalanceBar.module.scss b/src/components/ui/ModalStarBalanceBar.module.scss index 7750b4ecb..3ef402267 100644 --- a/src/components/ui/ModalStarBalanceBar.module.scss +++ b/src/components/ui/ModalStarBalanceBar.module.scss @@ -1,9 +1,9 @@ .root { position: absolute; + z-index: var(--z-modal); top: 0rem; left: 50%; - background-color: var(--color-background); - color: var(--color-text); + transform: translate(-50%, -1rem); display: flex; flex-direction: column; @@ -11,9 +11,14 @@ padding: 0.5rem 1.25rem; border-radius: 2rem; + font-size: 0.875rem; + color: var(--color-text); white-space: nowrap; - z-index: var(--z-modal); + + background-color: var(--color-background); + + transition: transform 0.2s ease, opacity 0.2s ease; :global(.confirm) & { z-index: var(--z-modal-confirm); @@ -23,13 +28,9 @@ z-index: var(--z-modal-low-priority); } - transform: translate(-50%, -1rem); - - transition: transform 0.2s ease, opacity 0.2s ease; - :global(body:not(.no-page-transitions)) .dots { - transition: none; transform: none !important; + transition: none; } &:not(:global(.open)) { diff --git a/src/components/ui/Notification.scss b/src/components/ui/Notification.scss index a389d3c66..bdd173931 100644 --- a/src/components/ui/Notification.scss +++ b/src/components/ui/Notification.scss @@ -1,9 +1,10 @@ .Notification-container { position: relative; + z-index: var(--z-notification); + width: 22rem; max-width: 100vw; margin: 4.25rem auto 0.25rem; - z-index: var(--z-notification); & ~ & { margin-top: 0.25rem; @@ -13,15 +14,18 @@ .Notification { --color-toast-action: var(--color-primary); - background-color: rgba(32, 32, 32, 0.8); - background-size: 1.5rem; - border-radius: var(--border-radius-default); - padding: 0.9375rem; - color: #fff; - margin: 0 0.5rem; display: flex; align-items: center; + margin: 0 0.5rem; + padding: 0.9375rem; + border-radius: var(--border-radius-default); + + color: #fff; + + background-color: rgba(32, 32, 32, 0.8); + background-size: 1.5rem; + .text-entity-link, .text-entity-link:hover, .text-entity-link:active { @@ -30,15 +34,15 @@ } .content { + flex-grow: 1; + font-size: 0.9375rem; line-height: 1.25; overflow-wrap: anywhere; - font-size: 0.9375rem; - flex-grow: 1; } &.bold-link b { - color: var(--color-primary); cursor: var(--custom-cursor, pointer); + color: var(--color-primary); } .notification-title { @@ -62,11 +66,12 @@ } .notification-button { - color: var(--color-toast-action); - font-weight: var(--font-weight-medium); - text-transform: none; - margin-inline-start: 0.125rem; - height: 2rem; width: auto; + height: 2rem; + margin-inline-start: 0.125rem; + + font-weight: var(--font-weight-medium); + color: var(--color-toast-action); + text-transform: none; } } diff --git a/src/components/ui/ProgressSpinner.scss b/src/components/ui/ProgressSpinner.scss index 6a9f4fe68..933bf3a9d 100644 --- a/src/components/ui/ProgressSpinner.scss +++ b/src/components/ui/ProgressSpinner.scss @@ -1,19 +1,23 @@ .ProgressSpinner { - position: relative; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - z-index: 1; - width: 3.375rem; - height: 3.375rem; - background-color: rgba(0, 0, 0, 0.25); - border-radius: 50%; cursor: var(--custom-cursor, pointer); + position: relative; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 3.375rem; + height: 3.375rem; + border-radius: 50%; + + background-color: rgba(0, 0, 0, 0.25); + &.no-cross { - background: transparent !important; pointer-events: none; + background: transparent !important; } .icon-close { @@ -27,14 +31,17 @@ &::after { content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + width: 0.8125rem; height: 0.8125rem; border-radius: 0.125rem; + background-color: #fff; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); } } @@ -44,9 +51,9 @@ height: auto; &.square { - background-image: none; width: 0.75rem; height: 0.75rem; + background-image: none; } } @@ -65,7 +72,7 @@ &_canvas { display: block; - background-color: transparent !important; color: var(--color-white); + background-color: transparent !important; } } diff --git a/src/components/ui/Radio.scss b/src/components/ui/Radio.scss index de5db44f9..5ac956a9f 100644 --- a/src/components/ui/Radio.scss +++ b/src/components/ui/Radio.scss @@ -1,19 +1,21 @@ .Radio { + cursor: var(--custom-cursor, pointer); + position: relative; - width: 100%; - min-height: 3rem; display: flex; align-items: center; - padding-inline-start: 4.25rem; - text-align: left; - cursor: var(--custom-cursor, pointer); + width: 100%; + min-height: 3rem; margin: 0; + padding-inline-start: 4.25rem; + + text-align: left; &:hover { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } &.disabled { @@ -26,8 +28,8 @@ .Radio-main { &::before, &::after { - left: auto; right: 1.1875rem; + left: auto; } &::after { @@ -72,48 +74,59 @@ &::before, &::after { content: ""; - display: block; + position: absolute; top: 50%; transform: translateY(-50%); + + display: block; } &::before { + left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) + width: 1.25rem; height: 1.25rem; - left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { + left: 1.4375rem; // 1 + ((1.5 - 0.625) / 2) + width: 0.625rem; height: 0.625rem; - left: 1.4375rem; // 1 + ((1.5 - 0.625) / 2) border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } .label { - display: block; - overflow-wrap: anywhere; unicode-bidi: plaintext; - text-align: left; + display: block; + line-height: 1.5rem; + text-align: left; + overflow-wrap: anywhere; } .subLabel { + unicode-bidi: plaintext; display: block; + + margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - unicode-bidi: plaintext; - margin-top: 0.25rem; } .subLabelLink { @@ -138,13 +151,16 @@ } .Spinner { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - opacity: 0; - animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; + + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + + opacity: 0; + + animation: fade-in 0.2s ease forwards; } } @@ -153,13 +169,13 @@ text-align: right; &::before { - left: auto; right: 1.0625rem; + left: auto; } &::after { - left: auto; right: 1.375rem; + left: auto; } } @@ -169,8 +185,8 @@ } &.loading .Spinner { - left: auto; right: 1.0625rem; + left: auto; } &.onlyInput .Radio-main::after { @@ -180,22 +196,24 @@ } &.onlyInput { - min-height: auto; position: relative; + + min-height: auto; margin-block: 0 1.25rem; - line-height: 1.25rem; padding-inline-start: 1.25rem; + line-height: 1.25rem; + .Radio-main { &::before { - left: 0; - right: 0; top: 0; + right: 0; + left: 0; transform: none; } &::after { - left: 0.3125rem; top: 0; + left: 0.3125rem; transform: translateY(50%); } } diff --git a/src/components/ui/RadioGroup.module.scss b/src/components/ui/RadioGroup.module.scss index c60a23e51..610eabca8 100644 --- a/src/components/ui/RadioGroup.module.scss +++ b/src/components/ui/RadioGroup.module.scss @@ -1,10 +1,12 @@ .wrapper { - position: relative; - display: block; - border: none; - margin-bottom: 0; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + margin-bottom: 0; + border: none; + line-height: 1.5rem; } diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss index 6088ec0a6..94260a2a9 100644 --- a/src/components/ui/RangeSlider.scss +++ b/src/components/ui/RangeSlider.scss @@ -1,13 +1,17 @@ @use "../../styles/mixins"; @mixin thumb-styles() { - background: var(--slider-color); - border: none; - height: 0.75rem; - width: 0.75rem; - border-radius: 50%; cursor: var(--custom-cursor, pointer); + transform: scale(1); + + width: 0.75rem; + height: 0.75rem; + border: none; + border-radius: 50%; + + background: var(--slider-color); + transition: transform 0.25s ease-in-out; &:hover { @@ -23,8 +27,9 @@ margin-inline-end: 1rem; &.disabled { - pointer-events: none; --slider-color: var(--color-text-secondary); + + pointer-events: none; } &.readOnly { @@ -51,8 +56,8 @@ &[dir="rtl"] { .value { - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } @@ -63,27 +68,33 @@ &::before { content: ""; + position: absolute; - width: 100%; - left: 0; - top: 0.3125rem; - height: 0.125rem; - background-color: var(--color-borders); - border-radius: 0.125rem; - opacity: 0.5; z-index: -1; + top: 0.3125rem; + left: 0; + + width: 100%; + height: 0.125rem; + border-radius: 0.125rem; + + opacity: 0.5; + background-color: var(--color-borders); } } .slider-fill-track { - position: absolute; - width: 100%; - left: 0; - top: 0.3125rem; - height: 0.125rem; - background-color: var(--slider-color); - border-radius: 0.125rem; pointer-events: none; + + position: absolute; + top: 0.3125rem; + left: 0; + + width: 100%; + height: 0.125rem; + border-radius: 0.125rem; + + background-color: var(--slider-color); } &.bold { @@ -121,16 +132,18 @@ .slider-options { display: grid; - grid-template-rows: auto; grid-auto-columns: 1fr; grid-auto-flow: column; + grid-template-rows: auto; } .slider-option { - font-size: 0.8125rem; - text-align: center; cursor: var(--custom-cursor, pointer); + + font-size: 0.8125rem; color: var(--color-text-secondary); + text-align: center; + transition: color 0.2s ease; &:hover, diff --git a/src/components/ui/RangeSliderWithMarks.module.scss b/src/components/ui/RangeSliderWithMarks.module.scss index 87a911528..eacdcf446 100644 --- a/src/components/ui/RangeSliderWithMarks.module.scss +++ b/src/components/ui/RangeSliderWithMarks.module.scss @@ -1,19 +1,23 @@ @use '../../styles/mixins'; @mixin thumb-styles() { - border: none; - width: 1rem; - height: 1rem; - background: var(--color-links); - border-radius: 50%; cursor: var(--custom-cursor, pointer); + position: absolute; + z-index: 2; left: var(--fill-percentage); transform: scale(1) translate(-45%, -50%); - transition: transform 0.3s ease-in-out; - z-index: 2; + + width: 1rem; + height: 1rem; + border: none; + border-radius: 50%; + -webkit-appearance: none; appearance: none; + background: var(--color-links); + + transition: transform 0.3s ease-in-out; @supports (-moz-appearance: none) { transform: scale(1) translate(calc(-10% + var(--thumb-offset)), 0); @@ -36,25 +40,29 @@ .sliderContainer { --thumb-offset: 0%; --fill-percentage: 0%; + position: relative; width: 100%; } .marksContainer { - width: 100%; pointer-events: none; display: flex; justify-content: space-between; + width: 100%; } .mark { + position: relative; + + display: flex; + justify-content: center; + + width: 0.1875rem; + font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - position: relative; - display: flex; - justify-content: center; - width: 0.1875rem; } .active { @@ -63,13 +71,12 @@ .slider { position: relative; - -webkit-appearance: none; - width: 100%; - height: 0.1875rem; - outline: none; - transition: opacity 0.2s; z-index: 1; + width: 100%; + height: 0.1875rem; + + -webkit-appearance: none; background: linear-gradient( to right, @@ -78,6 +85,9 @@ var(--color-text-secondary) var(--fill-percentage), var(--color-text-secondary) 100% ); + outline: none; + + transition: opacity 0.2s; } .slider::-webkit-slider-thumb { @@ -93,22 +103,26 @@ } .tickMarks { + pointer-events: none; + position: absolute; + z-index: 1; + right: 0; bottom: 0.25rem; left: 0; - right: 0; + display: flex; justify-content: space-between; - pointer-events: none; - z-index: 1; } .tick { position: relative; + width: 0.25rem; height: 0.5rem; - background-color: var(--color-text-secondary); border-radius: 0.1875rem; + + background-color: var(--color-text-secondary); } .filled { diff --git a/src/components/ui/RippleEffect.scss b/src/components/ui/RippleEffect.scss index 402953738..e3420b8f1 100644 --- a/src/components/ui/RippleEffect.scss +++ b/src/components/ui/RippleEffect.scss @@ -7,29 +7,34 @@ opacity: 1; } to { - opacity: 0; transform: scale(2); + opacity: 0; } } .ripple-container { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; body.no-page-transitions & { display: none; } .ripple-wave { - position: absolute; - display: block; - background-color: var(--ripple-color, rgba(0, 0, 0, 0.08)); - border-radius: 50%; - transform: scale(0); - animation: ripple-animation 700ms; pointer-events: none; + + position: absolute; + transform: scale(0); + + display: block; + + border-radius: 50%; + + background-color: var(--ripple-color, rgba(0, 0, 0, 0.08)); + + animation: ripple-animation 700ms; } } diff --git a/src/components/ui/RoundTimer.module.scss b/src/components/ui/RoundTimer.module.scss index 4f2ab2a66..08cac7524 100644 --- a/src/components/ui/RoundTimer.module.scss +++ b/src/components/ui/RoundTimer.module.scss @@ -1,7 +1,7 @@ .root { position: relative; - color: var(--color-toast-action); font-weight: var(--font-weight-medium); + color: var(--color-toast-action); } .svg { @@ -12,10 +12,11 @@ } .circle { - stroke: var(--color-toast-action); fill: transparent; - stroke-width: 2; + stroke: var(--color-toast-action); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 1s linear, stroke 0.2s; @starting-style { diff --git a/src/components/ui/SearchInput.scss b/src/components/ui/SearchInput.scss index df97d0ac8..ecd762780 100644 --- a/src/components/ui/SearchInput.scss +++ b/src/components/ui/SearchInput.scss @@ -1,15 +1,19 @@ .SearchInput { position: relative; - width: 100%; - color: rgba(var(--color-text-secondary-rgb), 0.5); - background-color: var(--color-chat-hover); - border: 2px solid var(--color-chat-hover); - border-radius: 1.375rem; - transition: border-color 0.15s ease; + display: flex; align-items: center; + width: 100%; padding-inline-end: 0.1875rem; + border: 2px solid var(--color-chat-hover); + border-radius: 1.375rem; + + color: rgba(var(--color-text-secondary-rgb), 0.5); + + background-color: var(--color-chat-hover); + + transition: border-color 0.15s ease; &.with-picker-item { display: flex; @@ -32,8 +36,8 @@ &.has-focus { border-color: var(--color-primary); - caret-color: var(--color-primary); background-color: var(--color-background); + caret-color: var(--color-primary); .search-icon { color: var(--color-primary); @@ -43,13 +47,14 @@ input { height: 2.5rem; margin-bottom: 0; - border: none !important; - border-radius: 1.375rem; - background-color: transparent !important; - box-shadow: none !important; padding: calc(0.4375rem - var(--border-width)) calc(0.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(0.75rem - var(--border-width)); + border: none !important; + border-radius: 1.375rem; + + background-color: transparent !important; + box-shadow: none !important; &::placeholder { color: var(--color-placeholders); @@ -57,14 +62,14 @@ } .icon-container-left { - width: 1.5rem; flex-shrink: 0; + width: 1.5rem; margin-inline-start: 0.75rem; } .icon-container-right { - width: 2.5rem; flex-shrink: 0; + width: 2.5rem; margin-inline-start: 0.5rem; } @@ -88,8 +93,9 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 2.5rem; + width: 2.5rem; + height: 2.5rem; .Spinner { --spinner-size: 1.5rem; @@ -100,17 +106,17 @@ font-size: 1rem; } - @media (max-width: 600px) { - input { - height: 2.5rem; - border-radius: 1.25rem; - padding-left: calc(0.75rem - var(--border-width)); - } - } - &[dir="rtl"] { input { direction: rtl; } } + + @media (max-width: 600px) { + input { + height: 2.5rem; + padding-left: calc(0.75rem - var(--border-width)); + border-radius: 1.25rem; + } + } } diff --git a/src/components/ui/Separator.module.scss b/src/components/ui/Separator.module.scss index f68f95086..b020c0656 100644 --- a/src/components/ui/Separator.module.scss +++ b/src/components/ui/Separator.module.scss @@ -1,8 +1,8 @@ .separator { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; &::before, &::after { @@ -21,8 +21,8 @@ &[dir="rtl"] { &:not(:empty)::before { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } &:not(:empty)::after { diff --git a/src/components/ui/ShowMoreButton.scss b/src/components/ui/ShowMoreButton.scss index 052289c8a..eee9b41e6 100644 --- a/src/components/ui/ShowMoreButton.scss +++ b/src/components/ui/ShowMoreButton.scss @@ -1,15 +1,18 @@ .ShowMoreButton { - color: var(--color-text) !important; display: flex; align-items: center; + + padding-left: 0.75rem !important; + + color: var(--color-text) !important; text-align: left; text-transform: none; - padding-left: 0.75rem !important; + opacity: 1 !important; .icon { - font-size: 1.5rem; margin-right: 2rem; + font-size: 1.5rem; color: var(--color-text-secondary); } diff --git a/src/components/ui/Spinner.scss b/src/components/ui/Spinner.scss index 0c1fd78b6..5d7f19e4d 100644 --- a/src/components/ui/Spinner.scss +++ b/src/components/ui/Spinner.scss @@ -2,6 +2,7 @@ --spinner-size: 2rem; position: relative; + display: flex; align-items: center; justify-content: center; @@ -12,11 +13,13 @@ &.with-background { &::before { content: ''; + position: absolute; - left: -0.125rem; top: -0.125rem; - bottom: -0.125rem; right: -0.125rem; + bottom: -0.125rem; + left: -0.125rem; + border-radius: 50%; } @@ -79,17 +82,17 @@ .Spinner__inner { position: absolute; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; background-repeat: no-repeat; background-size: 100%; animation-name: spin; animation-duration: 1s; - animation-iteration-count: infinite; animation-timing-function: linear; + animation-iteration-count: infinite; } @keyframes spin { diff --git a/src/components/ui/Switcher.scss b/src/components/ui/Switcher.scss index 694342d59..40d8cef1d 100644 --- a/src/components/ui/Switcher.scss +++ b/src/components/ui/Switcher.scss @@ -1,7 +1,7 @@ .Switcher { + position: relative; display: inline-flex; align-items: center; - position: relative; margin: 0; &.disabled { @@ -26,37 +26,49 @@ } input { - height: 0; - width: 0; - visibility: hidden; position: absolute; z-index: var(--z-below); + + width: 0; + height: 0; + + visibility: hidden; opacity: 0; } .widget { cursor: var(--custom-cursor, pointer); - text-indent: -999px; + + position: relative; + + display: inline-block; + width: 2.125rem; height: 0.875rem; - background-color: var(--color-gray); - display: inline-block; border-radius: 0.5rem; - position: relative; + + text-indent: -999px; + + background-color: var(--color-gray); + transition: background-color 150ms; } .widget:after { content: ""; + position: absolute; top: -0.125rem; left: 0; + width: 1.125rem; height: 1.125rem; - background-color: var(--color-background); - border-radius: 0.75rem; - transition: transform 200ms; border: 0.125rem solid var(--color-gray); + border-radius: 0.75rem; + + background-color: var(--color-background); + + transition: transform 200ms; } input:checked + .widget { diff --git a/src/components/ui/Tab.scss b/src/components/ui/Tab.scss index d23b1cdca..b333a2961 100644 --- a/src/components/ui/Tab.scss +++ b/src/components/ui/Tab.scss @@ -1,18 +1,21 @@ .Tab { display: flex; - justify-content: center; flex: 1 1 auto; - appearance: none; - background: none; + justify-content: center; + width: auto; margin: 0; - border: none; padding: 0.625rem 1.125rem; - font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); + border: none; border-top-left-radius: var(--border-radius-messages-small); border-top-right-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + + appearance: none; + background: none; + &, &:active, &:focus { @@ -46,26 +49,32 @@ .Tab_inner { position: relative; + display: flex; - align-items: center; - white-space: nowrap; - height: 1.5rem; // Emoji-only titles ignore line-height on Windows gap: 1px; // Prevent custom emoji sticking to the text + align-items: center; + + height: 1.5rem; // Emoji-only titles ignore line-height on Windows + + white-space: nowrap; } .badge { + flex-shrink: 0; + min-width: 1.25rem; height: 1.25rem; margin-inline-start: 0.3125rem; - background: var(--color-gray); - border-radius: 0.75rem; padding: 0 0.3125rem; - color: white; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.3125rem; font-weight: var(--font-weight-medium); + line-height: 1.3125rem; + color: white; text-align: center; - flex-shrink: 0; + + background: var(--color-gray); body.is-ios &, body.is-macos & { @@ -82,21 +91,25 @@ bottom: -0.625rem; left: 50%; transform: translateX(-50%); + font-size: 0.75rem; } .platform { + pointer-events: none; + position: absolute; + right: -0.5rem; bottom: -0.625rem; left: -0.5rem; - right: -0.5rem; - opacity: 0; - background-color: var(--color-primary); + transform-origin: left; + + box-sizing: content-box; height: 0.1875rem; border-radius: 0.1875rem 0.1875rem 0 0; - pointer-events: none; - box-sizing: content-box; - transform-origin: left; + + opacity: 0; + background-color: var(--color-primary); &.animate { transition: transform var(--slide-transition); diff --git a/src/components/ui/TabList.scss b/src/components/ui/TabList.scss index f060a2720..957191be2 100644 --- a/src/components/ui/TabList.scss +++ b/src/components/ui/TabList.scss @@ -1,22 +1,24 @@ .TabList { + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + position: sticky; top: 0; - flex-shrink: 0; - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: nowrap; - box-shadow: 0 2px 2px var(--color-light-shadow); - background-color: var(--color-background); + overflow-x: auto; overflow-y: hidden; - - font-size: 1rem; + display: flex; + flex-shrink: 0; + flex-wrap: nowrap; + align-items: flex-end; + justify-content: space-between; padding-inline: 0.5rem; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + font-size: 1rem; + + background-color: var(--color-background); + box-shadow: 0 2px 2px var(--color-light-shadow); &::-webkit-scrollbar { height: 0; diff --git a/src/components/ui/Toggle.module.scss b/src/components/ui/Toggle.module.scss index df970c045..0d761ef3d 100644 --- a/src/components/ui/Toggle.module.scss +++ b/src/components/ui/Toggle.module.scss @@ -3,8 +3,8 @@ --widget-height: 0.375rem; --thumb-size: 1.125rem; - display: inline-flex; position: relative; + display: inline-flex; } .widget { @@ -15,15 +15,19 @@ &::after { content: ""; + position: absolute; top: 0; left: 0; + width: var(--thumb-size); height: var(--thumb-size); - background-color: var(--color-background); - border-radius: calc(var(--thumb-size) / 2); - transition: transform 200ms; border: 0.125rem solid var(--color-gray); + border-radius: calc(var(--thumb-size) / 2); + + background-color: var(--color-background); + + transition: transform 200ms; :global(body.no-page-transitions) & { transition: none !important; @@ -49,22 +53,29 @@ position: absolute; top: 0; left: 0; + transform: translateY(-50%); + + overflow: hidden; + width: var(--widget-width); height: var(--widget-height); border-radius: 0.25rem; - overflow: hidden; + background-color: var(--color-gray); - transform: translateY(-50%); &::after { content: ""; + position: absolute; top: 0; left: 0; + width: var(--widget-width); height: var(--widget-height); border-radius: 0.25rem; + background-color: var(--color-primary); + transition: transform 200ms; :global(body.no-page-transitions) & { diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss index 68ba77f54..d902b2c5e 100644 --- a/src/components/ui/Transition.scss +++ b/src/components/ui/Transition.scss @@ -1,13 +1,11 @@ .Transition { position: relative; - width: 100%; height: 100%; &_slide { width: 100%; height: 100%; - animation-fill-mode: forwards !important; &-from, @@ -46,7 +44,6 @@ &-slide { > .Transition_slide-to { transform: translateX(100%); - animation: slide-in var(--slide-transition); } @@ -58,7 +55,6 @@ &-slideBackwards { > .Transition_slide-to { transform: translateX(-100%); - animation: slide-out-backwards var(--slide-transition); } @@ -70,7 +66,6 @@ &-slideRtl { > .Transition_slide-to { transform: translateX(-100%); - animation: slide-in var(--slide-transition); } @@ -82,7 +77,6 @@ &-slideRtlBackwards { > .Transition_slide-to { transform: translateX(100%); - animation: slide-out-backwards var(--slide-transition); } @@ -94,7 +88,6 @@ &-slideVertical { > .Transition_slide-to { transform: translateY(100%); - animation: slide-vertical-in var(--slide-transition); } @@ -106,7 +99,6 @@ &-slideVerticalBackwards { > .Transition_slide-to { transform: translateY(-100%); - animation: slide-vertical-out-backwards var(--slide-transition); } @@ -118,7 +110,6 @@ &-slideVerticalFade { > .Transition_slide-to { transform: translateY(100%); - animation: slide-vertical-fade-in var(--slide-transition); } @@ -130,7 +121,6 @@ &-slideVerticalFadeBackwards { > .Transition_slide-to { transform: translateY(-100%); - animation: slide-vertical-fade-out-backwards var(--slide-transition); } @@ -141,20 +131,16 @@ &-slideFade { > .Transition_slide-from { - transform: translateX(0); transform-origin: left; - + transform: translateX(0); opacity: 1; - animation: fade-out-opacity var(--slide-transition), slide-fade-out-move var(--slide-transition); } > .Transition_slide-to { - transform: translateX(1.5rem); transform-origin: left; - + transform: translateX(1.5rem); opacity: 0; - animation: fade-in-opacity var(--slide-transition), slide-fade-in-move var(--slide-transition); } } @@ -162,9 +148,7 @@ &-slideFadeBackwards { > .Transition_slide-from { transform: translateX(0); - opacity: 1; - animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move var(--slide-transition); @@ -172,9 +156,7 @@ > .Transition_slide-to { transform: translateX(-1.5rem); - opacity: 0; - animation: fade-out-backwards-opacity var(--slide-transition), slide-fade-out-backwards-move var(--slide-transition); @@ -186,16 +168,13 @@ > .Transition_slide { z-index: 0; - background: var(--background-color); } > .Transition_slide-to { - transform: translateX(1.5rem); transform-origin: left; - + transform: translateX(1.5rem); opacity: 0; - animation: fade-in-opacity var(--slide-transition), slide-fade-in-move-android var(--slide-transition); } } @@ -205,15 +184,12 @@ > .Transition_slide { z-index: 0; - background: var(--background-color); } > .Transition_slide-from { transform: translateX(0); - opacity: 1; - animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move-android var(--slide-transition); @@ -222,17 +198,14 @@ &-zoomFade { > .Transition_slide-from { - transform: scale(1); transform-origin: center; - + transform: scale(1); opacity: 1; - animation: fade-out-opacity 0.15s ease; } > .Transition_slide-to { transform-origin: center; - opacity: 0; // We can omit `transform: scale(1.1);` here because `opacity` is 0. // We need to for proper position calculation in `InfiniteScroll`. @@ -244,13 +217,11 @@ &-zoomFadeBackwards { > .Transition_slide-from { transform: scale(1); - animation: fade-in-backwards-opacity 0.1s ease, zoom-fade-in-backwards-move 0.15s ease; } > .Transition_slide-to { transform: scale(0.95); - animation: fade-out-backwards-opacity 0.15s ease, zoom-fade-out-backwards-move 0.15s ease; } } @@ -270,13 +241,11 @@ &-fadeBackwards { > .Transition_slide-from { opacity: 1; - animation: fade-out-opacity 0.15s ease; } > .Transition_slide-to { opacity: 0; - animation: fade-in-opacity 0.15s ease; } } @@ -292,7 +261,6 @@ > .Transition_slide-to { opacity: 0; - animation: fade-in-opacity 250ms ease; } } @@ -300,13 +268,11 @@ &-semiFadeBackwards { > .Transition_slide-from { opacity: 1; - animation: fade-in-backwards-opacity 250ms ease; } > .Transition_slide-to { opacity: 1; - animation: none !important; } } @@ -322,7 +288,6 @@ > .Transition_slide-to { transform: translateX(100%); - animation: slide-in var(--layer-transition); } @@ -342,9 +307,7 @@ > .Transition_slide-to { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); - animation: slide-layers-out-backwards var(--layer-transition-behind); animation-duration: 450ms; } @@ -360,11 +323,9 @@ } > .Transition_slide-from { - transform: scale(1); transform-origin: center; - + transform: scale(1); opacity: 1; - animation: push-out 0.25s ease-in-out; .custom-scroll { @@ -378,7 +339,6 @@ > .Transition_slide-to { transform: translateX(100%); - animation: slide-in-200 0.25s ease-in-out; } } @@ -390,9 +350,7 @@ > .Transition_slide-to { transform: scale(0.7); - opacity: 0; - animation: push-out-backwards 0.25s ease-in-out; } @@ -404,7 +362,6 @@ &-reveal { > .Transition_slide-to { clip-path: inset(0 100% 0 0); - animation: reveal-in 350ms ease-in; } } @@ -412,13 +369,11 @@ &-revealBackwards { > .Transition_slide-from { clip-path: inset(0 0 0 0); - animation: reveal-in-backwards 350ms ease-out; } > .Transition_slide-to { clip-path: none; - animation: none; } } @@ -535,12 +490,10 @@ @keyframes slide-vertical-fade-in { 0% { transform: translateY(100%); - opacity: 0; } 100% { transform: translateY(0); - opacity: 1; } } @@ -548,12 +501,10 @@ @keyframes slide-vertical-fade-out { 0% { transform: translateY(0); - opacity: 1; } 100% { transform: translateY(-100%); - opacity: 0; } } @@ -561,12 +512,10 @@ @keyframes slide-vertical-fade-in-backwards { 0% { transform: translateY(0); - opacity: 1; } 100% { transform: translateY(100%); - opacity: 0; } } @@ -574,12 +523,10 @@ @keyframes slide-vertical-fade-out-backwards { 0% { transform: translateY(-100%); - opacity: 0; } 100% { transform: translateY(0); - opacity: 1; } } @@ -668,12 +615,10 @@ @keyframes slide-layers-out { 0% { transform: translateX(0); - opacity: 1; } 100% { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); } } @@ -681,12 +626,10 @@ @keyframes slide-layers-out-backwards { 0% { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); } 100% { transform: translateX(0); - opacity: 1; } } @@ -694,12 +637,10 @@ @keyframes push-out { 0% { transform: scale(1); - opacity: 1; } 100% { transform: scale(0.7); - opacity: 0; } } @@ -707,12 +648,10 @@ @keyframes push-out-backwards { 0% { transform: scale(0.7); - opacity: 0; } 100% { transform: scale(1); - opacity: 1; } } diff --git a/src/components/ui/placeholder/PlaceholderChatInfo.module.scss b/src/components/ui/placeholder/PlaceholderChatInfo.module.scss index 3e787eb90..c2dbbf75c 100644 --- a/src/components/ui/placeholder/PlaceholderChatInfo.module.scss +++ b/src/components/ui/placeholder/PlaceholderChatInfo.module.scss @@ -5,10 +5,10 @@ } .avatar { + flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; - flex-shrink: 0; } .info { @@ -39,8 +39,8 @@ var(--color-skeleton-foreground), var(--color-skeleton-background) ); - background-size: 100vw 100vh; background-attachment: fixed; + background-size: 100vw 100vh; animation: slide 3s infinite linear; } diff --git a/src/components/ui/placeholder/Skeleton.scss b/src/components/ui/placeholder/Skeleton.scss index b50827e04..b5d550b0b 100644 --- a/src/components/ui/placeholder/Skeleton.scss +++ b/src/components/ui/placeholder/Skeleton.scss @@ -1,9 +1,12 @@ .Skeleton { position: relative; - background-color: var(--color-skeleton-background); + + overflow: hidden; + width: 100%; height: 100%; - overflow: hidden; + + background-color: var(--color-skeleton-background); &.inline { display: inline-block; @@ -21,10 +24,14 @@ &.pulse::before { content: ""; + display: block; + width: 100%; height: 100%; + background-color: var(--color-skeleton-foreground); + animation: skeleton-pulse 2s ease-in-out 0.5s infinite; @keyframes skeleton-pulse { @@ -42,11 +49,16 @@ &.wave::before { content: ""; - display: block; + position: absolute; + + display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%); + animation: skeleton-wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes skeleton-wave { diff --git a/src/hooks/animations/useTransitionActiveKey.ts b/src/hooks/animations/useTransitionActiveKey.ts index 1eea4a4b9..7c0a42a84 100644 --- a/src/hooks/animations/useTransitionActiveKey.ts +++ b/src/hooks/animations/useTransitionActiveKey.ts @@ -10,7 +10,7 @@ export function useTransitionActiveKey(deps: unknown[], noAnimation?: boolean): useMemo(() => { if (!noAnimation) activeKey.current += 1; // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps - }, [...deps, noAnimation]); + }, [...deps]); return activeKey.current; } diff --git a/src/lib/lovely-chart/styles/_animations.scss b/src/lib/lovely-chart/styles/_animations.scss index cf1fbb0e5..ca6275998 100644 --- a/src/lib/lovely-chart/styles/_animations.scss +++ b/src/lib/lovely-chart/styles/_animations.scss @@ -30,8 +30,8 @@ @keyframes lovely-chart--animation-fadeIn { from { - opacity: 0; transform: scale3d(0.5, 0.5, 1); + opacity: 0; } 40% { @@ -39,15 +39,15 @@ } to { - opacity: 1; transform: scale3d(1, 1, 1); + opacity: 1; } } @keyframes lovely-chart--animation-fadeOut { from { - opacity: 1; transform: scale3d(1, 1, 1); + opacity: 1; } 60% { @@ -55,8 +55,8 @@ } to { - opacity: 0; transform: scale3d(0.5, 0.5, 1); + opacity: 0; } } @@ -109,9 +109,9 @@ } .lovely-chart--state-animated { - animation-fill-mode: forwards; - animation-timing-function: ease-out; animation-duration: 200ms; + animation-timing-function: ease-out; + animation-fill-mode: forwards; &.lovely-chart--state-hidden { animation-name: lovely-chart--animation-fadeOut; diff --git a/src/lib/lovely-chart/styles/_buttons.scss b/src/lib/lovely-chart/styles/_buttons.scss index 798af4a9f..ececd2105 100644 --- a/src/lib/lovely-chart/styles/_buttons.scss +++ b/src/lib/lovely-chart/styles/_buttons.scss @@ -1,17 +1,20 @@ .lovely-chart--button { - border: 1px solid #E6ECF0; - padding: 7px 7px; - display: inline-block; - border-radius: 18px; - text-align: center; - text-decoration: none; - margin: 0 6px 8px 0; // transition: background-color 300ms ease-out, border-color 300ms ease-out; position: relative; + display: inline-block; + + margin: 0 6px 8px 0; + padding: 7px 7px; + border: 1px solid #E6ECF0; border-color: var(--text-color); - background-color: transparent; + border-radius: 18px; + color: var(--text-color); + text-align: center; + text-decoration: none; + + background-color: transparent; &.lovely-chart--state-checked { background-color: var(--text-color); @@ -22,8 +25,8 @@ } .lovely-chart--button-label { - color: #ffffff; transform: translateX(6px); + color: #ffffff; } } @@ -33,24 +36,31 @@ } .lovely-chart--button-check { - display: inline-block; position: absolute; top: 7px; left: 7px; + + display: inline-block; + width: 20px; height: 20px; + opacity: 0; + transition: opacity 300ms ease-out; &::after { + content: ''; + position: absolute; top: 50%; left: 50%; - content: ''; + width: 12px; height: 12px; - margin-left: -6px; margin-top: -6px; + margin-left: -6px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -256 1792 1792' version='1.1'%0A%3E%3Cg transform='matrix(1,0,0,-1,7.5932203,1217.0847)' id='g3003'%3E%3Cpath d='m 1671,970 q 0,-40 -28,-68 L 919,178 783,42 Q 755,14 715,14 675,14 647,42 L 511,178 149,540 q -28,28 -28,68 0,40 28,68 l 136,136 q 28,28 68,28 40,0 68,-28 l 294,-295 656,657 q 28,28 68,28 40,0 68,-28 l 136,-136 q 28,-28 28,-68 z' style='fill:white'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100%; } @@ -58,9 +68,12 @@ .lovely-chart--button-label { display: inline-block; + + padding: 0 13px; + font-weight: 300; line-height: 20px; color: inherit; - padding: 0 13px; + transition: transform 300ms ease-out, color 300ms ease-out; } diff --git a/src/lib/lovely-chart/styles/_common.scss b/src/lib/lovely-chart/styles/_common.scss index a606dee17..294d6ae11 100644 --- a/src/lib/lovely-chart/styles/_common.scss +++ b/src/lib/lovely-chart/styles/_common.scss @@ -1,11 +1,15 @@ .lovely-chart--container { + -webkit-user-select: none; + user-select: none; + + position: relative; + + overflow: hidden; + font: 300 13px '-apple-system', 'HelveticaNeue', Helvetica, Arial, sans-serif; color: #222222; - position: relative; text-align: left; - overflow: hidden; - user-select: none; - -webkit-user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // &.lovely-chart--state-invisible > * { @@ -38,107 +42,110 @@ @keyframes lovely-chart--animation-pie-transition-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } } @media (max-width: 480px) { @keyframes lovely-chart--animation-pie-transition-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } } } @keyframes lovely-chart--animation-pie-transition-out { 0% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(360deg); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } } @media (max-width: 480px) { @keyframes lovely-chart--animation-pie-transition-out { 0% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(360deg); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } } } .lovely-chart--spinner { + position: relative; width: 16px; height: 16px; - position: relative; + + &::after { + content: ''; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23D2D5D7' d='M9.9 0.2l-0.2 1c3 0.8 5.3 3.5 5.3 6.8 0 3.9-3.1 7-7 7s-7-3.1-7-7c0-3.3 2.3-6 5.3-6.8l-0.2-1c-3.5 0.9-6.1 4.1-6.1 7.8 0 4.4 3.6 8 8 8s8-3.6 8-8c0-3.7-2.6-6.9-6.1-7.8z' data-original='%23444444' class='active-path' data-old_color='%23444444'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-size: 100%; + + animation: lovely-chart--animation-spin 1s infinite linear; + } &.lovely-chart--size-big { width: 64px; height: 64px; } - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23D2D5D7' d='M9.9 0.2l-0.2 1c3 0.8 5.3 3.5 5.3 6.8 0 3.9-3.1 7-7 7s-7-3.1-7-7c0-3.3 2.3-6 5.3-6.8l-0.2-1c-3.5 0.9-6.1 4.1-6.1 7.8 0 4.4 3.6 8 8 8s8-3.6 8-8c0-3.7-2.6-6.9-6.1-7.8z' data-original='%23444444' class='active-path' data-old_color='%23444444'/%3E%3C/g%3E%3C/svg%3E%0A"); - background-size: 100%; - animation: lovely-chart--animation-spin 1s infinite linear; - } } diff --git a/src/lib/lovely-chart/styles/_header.scss b/src/lib/lovely-chart/styles/_header.scss index 34a568e61..8abc97f5b 100644 --- a/src/lib/lovely-chart/styles/_header.scss +++ b/src/lib/lovely-chart/styles/_header.scss @@ -1,23 +1,23 @@ .lovely-chart--header { height: 30px; - font-weight: bold; margin: 0 10px; + font-weight: bold; &-title, &-caption { - color: var(--text-color); line-height: 30px; + color: var(--text-color); // transition: color 300ms ease; &.lovely-chart--state-hidden { - opacity: 0; pointer-events: none; + opacity: 0; } } &-title { - font-size: 16px; float: left; margin: 0 1rem; + font-size: 16px; text-transform: lowercase; &:first-letter { @@ -26,24 +26,28 @@ } &-caption { + float: right; font-size: 12px; text-align: right; - float: right; } &-zoom-out-control { + cursor: var(--custom-cursor, pointer); + display: flex; align-items: center; + color: var(--zoom-out-text); - cursor: var(--custom-cursor, pointer); text-transform: none; &::before { content: ''; + display: inline-block; - margin-right: 6px; + width: 16px; height: 16px; + margin-right: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' width='512px' height='512px'%3E%3Cg%3E%3Cg%3E%3Cpath d='M497.938,430.063l-112-112c-0.367-0.367-0.805-0.613-1.18-0.965C404.438,285.332,416,248.035,416,208 C416,93.313,322.695,0,208,0S0,93.313,0,208s93.305,208,208,208c40.035,0,77.332-11.563,109.098-31.242 c0.354,0.375,0.598,0.813,0.965,1.18l112,112C439.43,507.313,451.719,512,464,512c12.281,0,24.57-4.688,33.938-14.063 C516.688,479.203,516.688,448.797,497.938,430.063z M64,208c0-79.406,64.602-144,144-144s144,64.594,144,144 c0,79.406-64.602,144-144,144S64,287.406,64,208z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3Cpath d='M272,176H144c-17.672,0-32,14.328-32,32s14.328,32,32,32h128c17.672,0,32-14.328,32-32S289.672,176,272,176z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; diff --git a/src/lib/lovely-chart/styles/_minimap.scss b/src/lib/lovely-chart/styles/_minimap.scss index 0baa9e662..0df4f4716 100644 --- a/src/lib/lovely-chart/styles/_minimap.scss +++ b/src/lib/lovely-chart/styles/_minimap.scss @@ -1,9 +1,13 @@ .lovely-chart--minimap { position: relative; + + overflow: hidden; + margin: 0 10px 16px 10px; border-radius: 6px; - overflow: hidden; + opacity: 1; + transition: opacity 400ms ease; &.lovely-chart--state-hidden { @@ -16,14 +20,17 @@ } .lovely-chart--minimap-ruler { + -webkit-user-select: none; + user-select: none; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + white-space: nowrap; - user-select: none; - -webkit-user-select: none; } .lovely-chart--minimap-mask { @@ -38,12 +45,16 @@ &::after { content: ''; - display: block; + position: absolute; top: 0; - bottom: 0; right: -5px; + bottom: 0; + + display: block; + width: 5px; + background: var(--minimap-mask); // transition: background-color 300ms ease-out; } @@ -52,55 +63,67 @@ .lovely-chart--minimap-slider { display: inline-block; + box-sizing: border-box; width: 33.3%; - height: 100%; min-width: 16px; + height: 100%; &-inner { - box-sizing: border-box; - border-top: 1px solid var(--minimap-slider); - border-bottom: 1px solid var(--minimap-slider); + cursor: var(--custom-cursor, grab); + float: left; + + box-sizing: border-box; width: calc(100% - 16px); height: 100%; + border-top: 1px solid var(--minimap-slider); + border-bottom: 1px solid var(--minimap-slider); + background: transparent !important; - cursor: var(--custom-cursor, grab); // transition: border-color 300ms ease-out; } &-handle { + cursor: var(--custom-cursor, ew-resize); + + position: relative; + width: 8px; height: 100%; - position: relative; + background: var(--minimap-mask); - cursor: var(--custom-cursor, ew-resize); // transition: background-color 300ms ease-out; &::before, &::after { content: ''; - display: block; position: absolute; + display: block; } &::before { - background: var(--minimap-slider); top: 0; - bottom: 0; right: 0; + bottom: 0; left: 0; + + background: var(--minimap-slider); // transition: background-color 300ms ease-out; } &-pin { - display: block; + pointer-events: none; + position: absolute; - background: #ffffff; - width: 2px; - height: 8px; top: calc(50% - 4px); left: calc(50% - 1px); - pointer-events: none; + + display: block; + + width: 2px; + height: 8px; + + background: #ffffff; } &:first-child { @@ -123,19 +146,19 @@ @media (pointer: coarse) { &:after { + z-index: 1; top: -10px; bottom: -10px; - z-index: 1; } &:first-child:after { - left: -26px; right: 0; + left: -26px; } &:last-child:after { - left: 0; right: -26px; + left: 0; } } } diff --git a/src/lib/lovely-chart/styles/_tools.scss b/src/lib/lovely-chart/styles/_tools.scss index a404adebe..472af46fa 100644 --- a/src/lib/lovely-chart/styles/_tools.scss +++ b/src/lib/lovely-chart/styles/_tools.scss @@ -1,4 +1,5 @@ .lovely-chart--tools { + padding: 0 10px 16px 10px; opacity: 1; transition: opacity 400ms ease; @@ -9,6 +10,4 @@ &.lovely-chart--state-transparent { opacity: 0; } - - padding: 0 10px 16px 10px; } diff --git a/src/lib/lovely-chart/styles/_tooltip.scss b/src/lib/lovely-chart/styles/_tooltip.scss index 3bcb0d09a..08c842f6d 100644 --- a/src/lib/lovely-chart/styles/_tooltip.scss +++ b/src/lib/lovely-chart/styles/_tooltip.scss @@ -5,27 +5,34 @@ } .lovely-chart--tooltip-balloon { + pointer-events: none; + cursor: var(--custom-cursor, pointer); + position: absolute; top: 5px; left: 0; + + overflow: auto; + min-width: 130px; max-height: 320px; - overflow: auto; - -webkit-overflow-scrolling: touch; - border-radius: 8px; padding: 8px 10px; - white-space: nowrap; - background: var(--tooltip-background); + border-radius: 8px; + color: var(--text-color); - box-shadow: 0 1px 2px 1px rgba(211, 211, 211, 0.8); + white-space: nowrap; + opacity: 0; + background: var(--tooltip-background); + box-shadow: 0 1px 2px 1px rgba(211, 211, 211, 0.8); + transition: opacity 200ms ease-out; - cursor: var(--custom-cursor, pointer); - pointer-events: none; + + -webkit-overflow-scrolling: touch; &.lovely-chart--state-shown { - opacity: 1; pointer-events: auto; + opacity: 1; } &.lovely-chart--state-inactive { @@ -51,22 +58,26 @@ } .lovely-chart--tooltip-title { - font-size: 12px; - font-weight: bold; position: relative; padding-bottom: 5px; + font-size: 12px; + font-weight: bold; &::after { content: ''; - display: block; + position: absolute; - right: 0; top: 0; + right: 0; + + display: block; + width: 12px; height: 12px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 451.846 451.847' style='enable-background:new 0 0 451.846 451.847;' xml:space='preserve' class=''%3E%3Cg%3E%3Cg%3E%3Cpath d='M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z' data-original='%23000000' class='active-path' data-old_color='%23757B84' fill='%23D2D5D7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 75%; } } @@ -78,16 +89,18 @@ .lovely-chart--tooltip-dataset-value { float: right; - font-weight: bold; margin-left: 5px; + font-weight: bold; } } .lovely-chart--percentage-title { display: inline-block; - font-weight: bold; + width: 35px; margin-right: 5px; + + font-weight: bold; text-align: right; &.lovely-chart--transition ~ .lovely-chart--dataset-title { diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 6c226b097..fe9eed1d4 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -2,16 +2,16 @@ // Common styles for all media-type components across the app. .media-inner { - position: relative; user-select: none; + position: relative; video.full-media, img.full-media, img.thumbnail, canvas.thumbnail { + display: block; width: 100%; height: 100%; - display: block; object-fit: cover; } @@ -31,9 +31,9 @@ left: 0; &.with-blurred-bg { - border-radius: 0 !important; left: 50%; transform: translateX(-50%); + border-radius: 0 !important; } } @@ -50,26 +50,31 @@ --_color: var(--color-primary); position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; - height: 0.25rem; - background-color: rgba(255 255 255 / 0.3); - .theme-dark & { - --_color: white; - } + height: 0.25rem; + + background-color: rgba(255 255 255 / 0.3); &::before { content: ""; + position: absolute; top: 0; left: 0; + width: var(--_progress); height: 100%; - background-color: var(--_color); border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125; + + background-color: var(--_color); + } + + .theme-dark & { + --_color: white; } } } @@ -78,28 +83,30 @@ position: absolute; transform: rotate(-45deg); + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } + &, &::before, &::after { width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-text-secondary); + transition: transform var(--slide-transition); } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.no-transition { &, &::before, @@ -128,19 +135,23 @@ // Used by ChatList and ContactList components .chat-list { - background: var(--color-background); - height: 100%; - padding: 0.5rem; - - @include mixins.adapt-padding-to-scrollbar(0.5rem); - overflow-x: hidden; overflow-y: scroll; + height: 100%; + padding: 0.5rem; + + background: var(--color-background); + + /* stylelint-disable-next-line no-duplicate-selectors */ + & { + @include mixins.adapt-padding-to-scrollbar(0.5rem); + } + &.forum-panel-open { .info { - opacity: 0; transform: translateX(-20%); + opacity: 0; } .Chat[dir="rtl"] .info { @@ -152,19 +163,13 @@ } } - @media (min-width: 600px) { - &.forum-panel-open .selected-forum .Avatar { - transform: none; - } - } - .scroll-container { position: relative; } .no-results { - color: var(--color-text-meta); margin-top: 2rem; + color: var(--color-text-meta); text-align: center; } @@ -182,15 +187,10 @@ } } - @media (max-width: 600px) { - padding-left: 0; - padding-right: 0; - } - body.is-ios &, body.is-android & { - padding-left: 0; padding-right: 0; + padding-left: 0; .ListItem::after { opacity: 1; @@ -203,6 +203,17 @@ } } } + + @media (min-width: 600px) { + &.forum-panel-open .selected-forum .Avatar { + transform: none; + } + } + + @media (max-width: 600px) { + padding-right: 0; + padding-left: 0; + } } // Used by Avatar and ProfilePhoto components @@ -227,8 +238,8 @@ .with-story-ribbon { --story-ribbon-height: 5.5rem; - height: calc(100% - var(--extra-height, 0px) + var(--story-ribbon-height)) !important; transform: translateY(calc(var(--story-ribbon-height) * -1)); + height: calc(100% - var(--extra-height, 0px) + var(--story-ribbon-height)) !important; &.open, &.closing { transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 62a1e0a3a..d0607d5ab 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -2,8 +2,8 @@ $icons-font: "icons"; @font-face { font-family: $icons-font; - src: url("./icons.woff2") format("woff2"), url("./icons.woff") format("woff"); font-weight: normal; font-style: normal; font-display: block; + src: url("./icons.woff2") format("woff2"), url("./icons.woff") format("woff"); } diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index cc3f6d8d5..11179bd4a 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -2,10 +2,13 @@ position: absolute; right: 0.75rem; bottom: -0.5625rem; + padding: 0 0.25rem; border-radius: 0.25rem; - color: var(--color-text-secondary); + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-background); } @@ -14,33 +17,41 @@ margin-bottom: 1.125rem; label { - display: block; + pointer-events: none; + cursor: var(--custom-cursor, text); + position: absolute; - left: 1rem; top: 0.6875rem; + left: 1rem; + transform-origin: left center; + + display: block; + padding: 0 0.3125rem; - background-color: var(--color-background); + font-size: 1rem; font-weight: var(--font-weight-normal); color: var(--color-placeholders); - transition: transform 0.15s ease-out, color 0.15s ease-out; - cursor: var(--custom-cursor, text); - pointer-events: none; - transform-origin: left center; white-space: nowrap; + + background-color: var(--color-background); + + transition: transform 0.15s ease-out, color 0.15s ease-out; } &.with-arrow { &::after { content: ""; + position: absolute; - height: 0.75rem; - width: 0.75rem; - border-left: 1px var(--color-text-secondary) solid; - border-bottom: 1px var(--color-text-secondary) solid; - transform: rotate(-45deg); - right: 2rem; top: 1rem; + right: 2rem; + transform: rotate(-45deg); + + width: 0.75rem; + height: 0.75rem; + border-bottom: 1px var(--color-text-secondary) solid; + border-left: 1px var(--color-text-secondary) solid; } } @@ -70,8 +81,8 @@ } &.disabled { - opacity: 0.5; pointer-events: none; + opacity: 0.5; } &[dir="rtl"] { @@ -80,16 +91,16 @@ } label { - left: auto; right: 0.75rem; + left: auto; } &.with-arrow { &::after { - border-left: none; - border-right: 1px var(--color-text-secondary) solid; right: auto; left: 2rem; + border-right: 1px var(--color-text-secondary) solid; + border-left: none; } } @@ -105,21 +116,44 @@ .form-control { --border-width: 1px; + display: block; + width: 100%; height: 3rem; padding: calc(0.75rem - var(--border-width)) calc(1.1875rem - var(--border-width)) 0.6875rem; border: var(--border-width) solid var(--color-borders-input); border-radius: var(--border-radius-default); - color: var(--color-text); - background-color: var(--color-background); - outline: none; - transition: border-color 0.15s ease; - overflow-wrap: anywhere; - -webkit-appearance: none; font-size: 1rem; line-height: 1.25rem; + color: var(--color-text); + overflow-wrap: anywhere; + + -webkit-appearance: none; + background-color: var(--color-background); + outline: none; + + transition: border-color 0.15s ease; + + // Hide hint for Safari password strength meter + &::-webkit-strong-password-auto-fill-button { + position: absolute; + + overflow: hidden !important; + + width: 0 !important; + min-width: 0 !important; + max-width: 0 !important; + + opacity: 0; + clip: rect(0, 0, 0, 0); + } + + &::-ms-clear, + &::-ms-reveal { + display: none; + } &[dir] { text-align: initial; @@ -166,24 +200,9 @@ &:-webkit-autofill-strong-password-viewable, &:-webkit-autofill-and-obscured { box-shadow: inset 0 0 0 10rem var(--color-background); + -webkit-text-fill-color: var(--color-text); } - - // Hide hint for Safari password strength meter - &::-webkit-strong-password-auto-fill-button { - opacity: 0; - width: 0 !important; - overflow: hidden !important; - max-width: 0 !important; - min-width: 0 !important; - clip: rect(0, 0, 0, 0); - position: absolute; - } - - &::-ms-clear, - &::-ms-reveal { - display: none; - } } select.form-control { @@ -194,10 +213,13 @@ select.form-control { textarea.form-control { resize: none; + overflow: hidden; - line-height: 1.3125rem; + padding-top: calc(0.8125rem - var(--border-width)); padding-bottom: calc(1rem - var(--border-width)); + + line-height: 1.3125rem; } .input-group.password-input { @@ -208,20 +230,24 @@ textarea.form-control { } .toggle-password { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 0; right: 0; - width: 3rem; - height: 3rem; + display: flex; align-items: center; justify-content: center; - cursor: var(--custom-cursor, pointer); - outline: none !important; - color: var(--color-text-secondary); - opacity: 0.7; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + color: var(--color-text-secondary); + + opacity: 0.7; + outline: none !important; &:hover, &:focus { @@ -231,13 +257,13 @@ textarea.form-control { &[dir="rtl"] { .form-control { - padding-left: 3.375rem; padding-right: calc(0.9rem - var(--border-width)); + padding-left: 3.375rem; } .toggle-password { - left: 0; right: auto; + left: 0; } } } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index e0cd079f2..79d8f2c96 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -79,24 +79,24 @@ @mixin reset-range() { input[type="range"] { - -webkit-appearance: none; display: block; + width: 100%; height: 0.75rem; margin-bottom: 0.5rem; + + -webkit-appearance: none; background: transparent; - &:focus { - outline: none; - } - &::-ms-track { - width: 100%; cursor: var(--custom-cursor, pointer); - background: transparent; + width: 100%; border-color: transparent; + color: transparent; + + background: transparent; } &::-webkit-slider-thumb { @@ -114,51 +114,64 @@ &::-moz-range-track, &::-moz-range-progress { cursor: var(--custom-cursor, pointer); } + + &:focus { + outline: none; + } } } @mixin header-pane { position: absolute; top: 0; + transform: translateY(-100%); + width: 100%; height: 2.875rem; - transform: translateY(-100%); - transition: transform var(--slide-transition); - padding-top: 0.375rem; + padding-right: max(0.5rem, env(safe-area-inset-right)); padding-bottom: 0.375rem; padding-left: max(0.75rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); + background-color: var(--color-background); + transition: transform var(--slide-transition); + &::before { content: ""; - display: block; + position: absolute; top: -0.1875rem; - left: 0; right: 0; + left: 0; + + display: block; + height: 0.125rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); } // Some panels might unmount without animation, so we provide same background above panel to make it less noticeable &::after { content: ""; + position: absolute; - top: -100%; - left: 0; - right: 0; - height: inherit; - background-color: inherit; z-index: -1; + top: -100%; + right: 0; + left: 0; + + height: inherit; + + background-color: inherit; } } @mixin side-panel-section { + border-bottom: 0.625rem solid var(--color-background-secondary); background-color: var(--color-background); box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: 0.625rem solid var(--color-background-secondary); &:last-child { border-bottom: none; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index cb0e3e799..ea79ee85e 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -306,6 +306,16 @@ $color-message-story-mention-to: #74bcff; --middle-header-panes-height: 0px; + body.is-ios { + --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1); + --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1); + --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); + } + + body.is-android { + --slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1); + } + @media (min-width: 1276px) and (max-width: 1920px) { --right-column-width: 25vw; } @@ -319,14 +329,4 @@ $color-message-story-mention-to: #74bcff; --symbol-menu-width: 100vw; --symbol-menu-height: 17.6875rem; } - - body.is-ios { - --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1); - --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1); - --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); - } - - body.is-android { - --slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1); - } } diff --git a/src/styles/icons.woff b/src/styles/icons.woff index c92f0ac3f..c0bd67fb6 100644 Binary files a/src/styles/icons.woff and b/src/styles/icons.woff differ diff --git a/src/styles/icons.woff2 b/src/styles/icons.woff2 index ff82ee93f..fdab72768 100644 Binary files a/src/styles/icons.woff2 and b/src/styles/icons.woff2 differ diff --git a/src/styles/index.scss b/src/styles/index.scss index 518a012f0..ba18a31e0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -12,22 +12,6 @@ html, body { - width: 100%; - height: 100%; - background-color: var(--color-background); - font-family: var(--font-family); - margin: 0; - padding: 0; - font-size: 16px; - color: var(--color-text); - font-weight: var(--font-weight-normal); - line-height: 1.5; - text-align: left; - overflow: hidden; - overscroll-behavior: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - user-select: none; --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -37,17 +21,39 @@ body { --font-family-condensed: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif; --font-weight-semibold: 500; // Note: Roboto is naturally quite bold, so 500 works well as default + user-select: none; + + overflow: hidden; + overscroll-behavior: none; + + width: 100%; + height: 100%; + margin: 0; + padding: 0; + + font-family: var(--font-family); + font-size: 16px; + font-weight: var(--font-weight-normal); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + color: var(--color-text); + text-align: left; + + background-color: var(--color-background); + @media (max-width: 600px) { height: calc(var(--vh, 1vh) * 100); } } noscript { - width: 100%; - height: 100%; display: grid; align-content: center; justify-items: center; + + width: 100%; + height: 100%; .nojs-video { pointer-events: none; &::-webkit-media-controls { @@ -90,11 +96,13 @@ body.is-electron { body.cursor-grabbing { --custom-cursor: grabbing; + cursor: grabbing !important; } body.cursor-ew-resize { --custom-cursor: ew-resize; + cursor: ew-resize !important; } @@ -102,21 +110,22 @@ body.cursor-ew-resize { .full-height { height: 100%; - @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100); - } - &.is-auth { background: var(--color-background); } + + @media (max-width: 600px) { + height: calc(var(--vh, 1vh) * 100); + } } #middle-column-portals, #portals { position: absolute; top: 0; - left: 0; right: 0; + left: 0; + height: 0; } @@ -153,26 +162,30 @@ body.cursor-ew-resize { */ .visually-hidden { position: absolute !important; + z-index: -1; + + overflow: hidden; + width: 0; height: 0; - overflow: hidden; + clip: rect(0, 0, 0, 0); - z-index: -1; } .custom-scroll, .custom-scroll-x { - scrollbar-width: thin; + // Fix scroll lock on iOS + pointer-events: auto; scrollbar-color: transparent transparent; + scrollbar-width: thin; + transition: scrollbar-color 0.3s ease; -webkit-overflow-scrolling: touch; - // Fix scroll lock on iOS - pointer-events: auto; &::-webkit-scrollbar-thumb { - background-color: transparent; border-radius: 0.375rem; + background-color: transparent; // `box-shadow` prevents repaint on macOS when hovering out of scrollable container box-shadow: 0 0 1px rgba(255, 255, 255, 0.01); } @@ -211,25 +224,28 @@ body:not(.is-ios) { } .emoji-small { - background: no-repeat; - background-size: var(--emoji-size); - color: transparent; + overflow: hidden; display: inline-block; + flex-shrink: 0; + width: var(--emoji-size); height: var(--emoji-size); margin-inline-end: 1px; - overflow: hidden; - flex-shrink: 0; + + color: transparent; + + background: no-repeat; + background-size: var(--emoji-size); &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } .div-button { - outline: none !important; cursor: var(--custom-cursor, pointer); + outline: none !important; } .opacity-transition { @@ -262,31 +278,38 @@ body:not(.is-ios) { } .protector { + user-select: none; + position: absolute; - left: 0; + z-index: 2; top: 0; right: 0; bottom: 0; - z-index: 2; - user-select: none; + left: 0; + -webkit-touch-callout: none; } .for-ios-autocapitalization-fix { position: fixed; - font-size: 16px; - opacity: 0; - bottom: 1rem; z-index: -1; + bottom: 1rem; + + font-size: 16px; + + opacity: 0; } .emoji-test-element { - opacity: 0; - display: inline; - white-space: nowrap; position: absolute; bottom: 0; left: 0; + + display: inline; + + white-space: nowrap; + + opacity: 0; } .star-currency-icon { @@ -296,9 +319,9 @@ body:not(.is-ios) { // Increase specificity to override the default icon style .star-amount-icon.star-amount-icon { - line-height: inherit; // Vertical centring margin-inline-start: 0.375em; // Prevent sticking to the text without using `white-space: pre` margin-inline-end: 0.2em; // Prevent sticking to the text without using `white-space: pre` + line-height: inherit; // Vertical centring } .shared-canvas-container { @@ -307,13 +330,15 @@ body:not(.is-ios) { .shared-canvas, .absolute-video-container { + pointer-events: none; + position: absolute; + z-index: 1; top: 0; left: 0; - z-index: 1; + width: 100%; height: 100%; - pointer-events: none; } @keyframes grow-icon { diff --git a/src/styles/print.scss b/src/styles/print.scss index 966edf40d..ab303fb39 100644 --- a/src/styles/print.scss +++ b/src/styles/print.scss @@ -32,28 +32,30 @@ .messages-layout, .Transition, .Transition > .Transition_slide { - height: auto !important; + position: static !important; + transform: none !important; + overflow: visible !important; display: block !important; - position: static !important; - margin: 0 !important; - padding: 0 !important; + width: 100% !important; max-width: 100% !important; - transform: none !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; } .messages-container { - max-width: 100rem !important; width: 100% !important; + max-width: 100rem !important; } .MessageList .sticky-date > span, .MessageList .local-action-message > span, .MessageList .ActionMessage > span, .MessageList .empty > span { - background: var(--color-background-own) !important; color: var(--color-text) !important; + background: var(--color-background-own) !important; } .hide-on-print { diff --git a/src/styles/reboot.css b/src/styles/reboot.css index fe20e9dc3..56b21ad5d 100644 --- a/src/styles/reboot.css +++ b/src/styles/reboot.css @@ -10,6 +10,7 @@ html { line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -41,9 +42,9 @@ body, blockquote { } hr { + overflow: visible; box-sizing: content-box; height: 0; - overflow: visible; } h1, @@ -59,10 +60,10 @@ h6 { abbr[title], abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; cursor: help; border-bottom: 0; + text-decoration: underline; + text-decoration: underline dotted; } address { @@ -129,6 +130,7 @@ a { color: var(--color-links); text-decoration: none; background-color: transparent; + -webkit-text-decoration-skip: objects; } @@ -158,15 +160,16 @@ samp { } pre { + overflow: auto; margin-top: 0; margin-bottom: 1rem; - overflow: auto; + -ms-overflow-style: scrollbar; } img { - vertical-align: middle; border-style: none; + vertical-align: middle; } svg:not(:root) { @@ -190,11 +193,13 @@ table { } caption { + caption-side: bottom; + padding-top: 0.75rem; padding-bottom: 0.75rem; + color: #868e96; text-align: left; - caption-side: bottom; } th { @@ -256,23 +261,25 @@ input[type="month"] { } textarea { - overflow: auto; resize: vertical; + overflow: auto; } fieldset { min-width: 0; - padding: 0; margin: 0; + padding: 0; border: 0; } legend { display: block; + width: 100%; max-width: 100%; - padding: 0; margin-bottom: 0.5rem; + padding: 0; + font-size: 1.5rem; line-height: inherit; color: inherit; @@ -289,8 +296,8 @@ progress { } [type="search"] { - outline-offset: -2px; -webkit-appearance: none; + outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, diff --git a/tsconfig.json b/tsconfig.json index 02554afdf..a3592ac6b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,7 +31,7 @@ "webpack-electron.config.ts", "babel.config.js", "eslint.config.mjs", - ".fantasticonrc.js", + ".fantasticonrc.cjs", "playwright.config.ts", "jest.config.js", ".github/workflows/*.js"