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

[Refactoring] Middle Column: Simplify background (#1582)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-24 01:25:54 +01:00
parent 5cf5c140f8
commit f974f86c6d
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/middle/MiddleColumn.scss
View File

@ -6,20 +6,28 @@
right: 0; right: 0;
overflow: hidden; overflow: hidden;
z-index: -1; z-index: -1;
background-color: var(--theme-background-color);
&::before,
&::after { &::after {
content: ""; content: "";
display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: var(--theme-background-color); background-color: var(--theme-background-color);
} background-position: center;
background-repeat: no-repeat;
background-size: cover;
body:not(.animation-level-0) #root & {
transition: transform var(--layer-transition), background .2s !important;
}
body.animation-level-0 & {
transition: none;
}
&::after {
.theme-light & { .theme-light & {
background-image: url('../../assets/chat-bg.jpg'); background-image: url('../../assets/chat-bg.jpg');
@ -27,31 +35,19 @@
background-image: url('../../assets/chat-bg-mobile.jpg'); background-image: url('../../assets/chat-bg-mobile.jpg');
} }
} }
background-position: center;
background-repeat: no-repeat;
background-size: cover;
body:not(.animation-level-0) #root & {
transition: transform var(--layer-transition), opacity .2s !important;
}
body.animation-level-0 & {
transition: none;
}
} }
.custom-bg-color:not(.custom-bg-image) > &::after { .custom-bg-color:not(.custom-bg-image) &::after {
opacity: 0; opacity: 0;
} }
.custom-bg-image > &::after { .custom-bg-image &::after {
background-image: var(--custom-background) !important; background-image: var(--custom-background) !important;
filter: none; filter: none;
transform: scale(1.1); transform: scale(1.1);
} }
.custom-bg-image.blurred > &::after { .custom-bg-image.blurred &::after {
filter: blur(12px); filter: blur(12px);
} }
@ -64,12 +60,12 @@
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
} }
body.animation-level-2 #Main.right-column-open &::after { body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
transform: scale(0.67) !important; transform: scale(0.67) !important;
} }
} }
body.animation-level-2 #Main.right-column-open &::after { body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
@media screen and (min-width: 1921px) { @media screen and (min-width: 1921px) {
transform: scale(0.8) !important; transform: scale(0.8) !important;
} }