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

Dark Theme: Add default background pattern

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-03-19 21:19:24 +01:00
parent 6d7727cccf
commit 59611d6192
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/chat-bg-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

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

@ -81,9 +81,16 @@
body:not(.initial) & { body:not(.initial) & {
background-image: url('../../assets/chat-bg.jpg'); background-image: url('../../assets/chat-bg.jpg');
} }
.theme-dark body.initial & {
background-image: url('../../assets/chat-bg-dark.png');
background-position: top left;
background-size: 650px;
background-repeat: repeat;
}
} }
&.with-right-column::before { html.theme-light body.animation-level-2 &.with-right-column::before {
transform: scale(0.67); transform: scale(0.67);
} }

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

@ -39,6 +39,13 @@
background-image: url("../../assets/chat-bg-mobile.jpg"); background-image: url("../../assets/chat-bg-mobile.jpg");
} }
} }
.theme-dark & {
background-image: url('../../assets/chat-bg-dark.png');
background-position: top left;
background-size: 650px;
background-repeat: repeat;
}
} }
.custom-bg-color:not(.custom-bg-image) &::after { .custom-bg-color:not(.custom-bg-image) &::after {
@ -64,12 +71,12 @@
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
} }
body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after { html.theme-light 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 #MiddleColumn:not(.custom-bg-image) &::after { html.theme-light 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;
} }
@ -148,7 +155,7 @@
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s,
color 0.15s; color 0.15s;
body.animation-level-0 & { body.animation-level-0 & {
transition: none !important; transition: none !important;
@ -281,11 +288,11 @@
right: 0; right: 0;
height: 1px; height: 1px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 2%,
rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0.4) 98%,
rgba(255, 255, 255, 0) 100% rgba(255, 255, 255, 0) 100%
); );
opacity: 0; opacity: 0;
transition: opacity 350ms ease; transition: opacity 350ms ease;
@ -302,11 +309,11 @@
html.theme-dark &::before { html.theme-dark &::before {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0) 0%,
rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 2%,
rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0.4) 98%,
rgba(127, 127, 127, 0) 100% rgba(127, 127, 127, 0) 100%
); );
} }
} }