diff --git a/src/assets/chat-bg-pattern-dark.png b/src/assets/chat-bg-pattern-dark.png deleted file mode 100644 index 9324c7113..000000000 Binary files a/src/assets/chat-bg-pattern-dark.png and /dev/null differ diff --git a/src/assets/chat-bg-pattern-light.png b/src/assets/chat-bg-pattern-light.png deleted file mode 100644 index fa4893aa7..000000000 Binary files a/src/assets/chat-bg-pattern-light.png and /dev/null differ diff --git a/src/assets/pattern.svg b/src/assets/pattern.svg new file mode 100644 index 000000000..2b185d722 --- /dev/null +++ b/src/assets/pattern.svg @@ -0,0 +1,4648 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/App.module.scss b/src/components/App.module.scss index 41c575616..2b6ef51e6 100644 --- a/src/components/App.module.scss +++ b/src/components/App.module.scss @@ -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); diff --git a/src/components/modals/gift/GiftComposer.module.scss b/src/components/modals/gift/GiftComposer.module.scss index fedc23cfb..ce03aa714 100644 --- a/src/components/modals/gift/GiftComposer.module.scss +++ b/src/components/modals/gift/GiftComposer.module.scss @@ -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) { diff --git a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss index ea946e31f..22fe89894 100644 --- a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss +++ b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss @@ -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) { diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 5f815c3ee..238049d4f 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -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); + } +} diff --git a/src/styles/_patternBackground.module.scss b/src/styles/_patternBackground.module.scss index 841ea8953..82e42d88c 100644 --- a/src/styles/_patternBackground.module.scss +++ b/src/styles/_patternBackground.module.scss @@ -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) {