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

Composer: same alignment for EmbededMessage and WebPage (#4014)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-12-04 14:39:37 +01:00
parent 1ae6261f84
commit 761acbf073
7 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -610,7 +610,7 @@
}
@media (min-width: 600px) {
left: 0.75rem;
left: 0.5rem;
}
}
@ -699,7 +699,7 @@
padding-right: 0;
@media (min-width: 600px) {
padding-left: 0.75rem;
padding-left: 0.5rem;
}
}
}

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

@ -190,6 +190,8 @@
&.inside-input {
flex-grow: 1;
margin: 0;
border-radius: 0.25rem;
.embedded-thumb {
margin-left: 0.125rem;

17
src/components/middle/composer/ComposerEmbeddedMessage.scss
View File

@ -19,17 +19,14 @@
&_inner {
display: flex;
align-items: center;
padding-right: 0.625rem;
padding-top: 0.1875rem;
margin-top: 0.5rem;
}
& .embedded-left-icon {
flex-shrink: 0;
background: none !important;
width: 3.5rem;
height: 2.875rem;
margin: 0 -0.0625rem 0 0;
padding: 0;
height: 2.625rem;
padding: 0.5625rem 0.75rem 0.5625rem 1rem;
display: grid;
place-content: center;
font-size: 1.5rem;
@ -43,15 +40,15 @@
& .embedded-cancel {
flex-shrink: 0;
background: none !important;
width: 2.25rem;
height: 2.875rem;
margin: 0 -0.0625rem 0 0.75rem;
width: auto;
height: 1.5rem;
padding: 0;
margin: 0.5625rem 1rem 0.5625rem 0.75rem;
align-self: center;
color: var(--accent-color, var(--color-primary));
@media (max-width: 600px) {
width: 1.75rem;
margin: 0.5625rem 0.75rem 0.5625rem 0.5rem;
}
}

28
src/components/middle/composer/WebPagePreview.scss
View File

@ -1,5 +1,6 @@
.WebPagePreview {
height: 2.625rem;
margin-top: 0.5rem;
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: height 150ms ease-out, opacity 150ms ease-out;
@ -19,15 +20,11 @@
&_inner {
display: flex;
align-items: center;
padding-right: 0.625rem;
padding-top: 0.1875rem;
}
--accent-color: var(--color-primary);
.ComposerEmbeddedMessage + & {
margin-top: 0.75rem;
body.no-message-composer-animations & {
transition: opacity 150ms ease-out;
}
@ -36,14 +33,12 @@
& &-left-icon {
flex-shrink: 0;
background: none !important;
width: 3.5rem;
height: 2.875rem;
margin: 0 -0.0625rem 0 0;
padding: 0;
height: 2.625rem;
padding: 0.5625rem 0.75rem 0.5625rem 1rem;
display: grid;
place-content: center;
font-size: 1.5rem;
color: var(--color-primary);
color: var(--accent-color);
@media (max-width: 600px) {
width: 2.875rem;
@ -53,28 +48,23 @@
& &-clear {
flex-shrink: 0;
background: none !important;
width: 2.25rem;
height: 2.875rem;
margin: 0 -0.0625rem 0 0;
width: auto;
height: 1.5rem;
padding: 0;
margin: 0.5625rem 1rem 0.5625rem 0.75rem;
align-self: center;
color: var(--accent-color);
@media (max-width: 600px) {
width: 1.75rem;
margin: 0.5625rem 0.75rem 0.5625rem 0.5rem;
}
}
.WebPage {
flex-grow: 1;
margin: 0.1875rem 0 0.1875rem 0.125rem;
max-width: calc(100% - 3.375rem);
overflow: hidden;
&::before {
top: 0.125rem;
bottom: 0.0625rem;
}
&.with-video .media-inner {
display: none;
}

9
src/components/middle/message/WebPage.scss
View File

@ -10,6 +10,15 @@
position: relative;
overflow: hidden;
&.in-preview {
border-radius: 0.25rem;
background-color: var(--color-primary-tint);
height: 2.625rem;
margin: 0;
padding: 0.125rem 0.25rem 0.125rem 0.625rem;
transition: background-color 0.2s ease-in;
}
&::before {
content: "";
display: block;

1
src/styles/_variables.scss
View File

@ -102,6 +102,7 @@ $color-message-story-mention-to: #74bcff;
--color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
--color-primary-opacity: rgba(var(--color-primary), 0.25);
--color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
--color-primary-tint: rgba(var(--color-primary), 0.1);
--color-green: #{$color-green};
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};

1
src/styles/themes.json
View File

@ -2,6 +2,7 @@
"--color-primary": ["#3390EC", "#8774E1"],
"--color-primary-opacity": ["#50A2E940", "#8378DB80"],
"--color-primary-opacity-hover": ["#50A2E926", "#8378DBA0"],
"--color-primary-tint": ["#3390ec1a", "#8774e11a"],
"--color-primary-shade": ["#4a95d6", "#7b71c6"],
"--color-background": ["#FFFFFF", "#212121"],
"--color-background-compact-menu": ["#FFFFFFBB", "#212121DD"],