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

App: Update default pattern image (#6586)

Browse Source
This commit is contained in:
Alexander Zinchuk 2026-01-13 01:14:33 +01:00
parent d67efa3f99
commit 195fce1865
8 changed files with 4694 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 201 KiB

BIN
src/assets/chat-bg-pattern-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 266 KiB

4648
src/assets/pattern.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

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

@ -1,3 +1,5 @@
@use "../styles/mixins";
.bg {
height: 100%;
@ -6,26 +8,9 @@
background-position: center;
background-size: 100% 100%;
@include mixins.chat-pattern-background("../assets/pattern.svg");
&::before {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@media (max-width: 600px) {
bottom: auto;
height: calc(var(--vh, 1vh) * 100);

45
src/components/modals/gift/GiftComposer.module.scss
View File

@ -86,31 +86,7 @@
background-position: center;
background-size: 100% 100%;
&::before {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../../../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@media (max-width: 600px) {
bottom: auto;
height: calc(var(--vh, 1vh) * 100);
}
}
@include mixins.chat-pattern-background("../../../assets/pattern.svg");
:global(html.theme-light) & {
background-image: url('../../../assets/chat-bg-br.png');
@ -248,24 +224,7 @@
}
&:not(.customBgImage):not(.customBgColor)::after {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../../../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@include mixins.chat-pattern-styles("../../../assets/pattern.svg");
}
@media screen and (min-width: 1276px) {

45
src/components/modals/preparedMessage/PreparedMessageModal.module.scss
View File

@ -47,31 +47,7 @@
background-position: center;
background-size: 100% 100%;
&::before {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../../../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@media (max-width: 600px) {
bottom: auto;
height: calc(var(--vh, 1vh) * 100);
}
}
@include mixins.chat-pattern-background("../../../assets/pattern.svg");
:global(.Message) {
padding: 1rem;
@ -162,24 +138,7 @@
}
&:not(.customBgImage):not(.customBgColor)::after {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../../../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@include mixins.chat-pattern-styles("../../../assets/pattern.svg");
}
@media screen and (min-width: 1276px) {

35
src/styles/_mixins.scss
View File

@ -221,3 +221,38 @@
view-transition-name: var(--_vtn);
}
}
@mixin chat-pattern-styles($path) {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.6;
background-image: url($path);
background-repeat: repeat;
background-position: center;
background-size: 430px auto;
mix-blend-mode: soft-light;
:global(html.theme-dark) & {
opacity: 0.3;
background: linear-gradient(135deg, #4f5bd5 0%, #962fbf 25%, #dd6cb9 50%, #fec496 100%) !important;
background-image: none;
mix-blend-mode: unset;
mask-image: url($path);
mask-position: center;
mask-repeat: repeat;
mask-size: 430px auto;
}
}
@mixin chat-pattern-background($path) {
&::before {
@include chat-pattern-styles($path);
}
}

21
src/styles/_patternBackground.module.scss
View File

@ -1,3 +1,5 @@
@use "./mixins";
.background {
position: absolute;
z-index: -1;
@ -69,24 +71,7 @@
}
&:not(.customBgImage):not(.customBgColor)::after {
content: "";
position: absolute;
top: 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;
mix-blend-mode: overlay;
:global(html.theme-dark) & {
background-image: url('../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
@include mixins.chat-pattern-styles("../assets/pattern.svg");
}
@media screen and (min-width: 1276px) {