diff --git a/src/assets/chat-bg-br.png b/src/assets/chat-bg-br.png new file mode 100644 index 000000000..279a75988 Binary files /dev/null and b/src/assets/chat-bg-br.png differ diff --git a/src/assets/chat-bg-dark.png b/src/assets/chat-bg-dark.png deleted file mode 100644 index 16bea0451..000000000 Binary files a/src/assets/chat-bg-dark.png and /dev/null differ diff --git a/src/assets/chat-bg-mobile.jpg b/src/assets/chat-bg-mobile.jpg deleted file mode 100644 index 0010170ab..000000000 Binary files a/src/assets/chat-bg-mobile.jpg and /dev/null differ diff --git a/src/assets/chat-bg-pattern-dark.png b/src/assets/chat-bg-pattern-dark.png new file mode 100644 index 000000000..dbcb7c159 Binary files /dev/null and b/src/assets/chat-bg-pattern-dark.png differ diff --git a/src/assets/chat-bg-pattern-light.png b/src/assets/chat-bg-pattern-light.png new file mode 100644 index 000000000..2fd268c01 Binary files /dev/null and b/src/assets/chat-bg-pattern-light.png differ diff --git a/src/assets/chat-bg.jpg b/src/assets/chat-bg.jpg deleted file mode 100644 index e5a88c966..000000000 Binary files a/src/assets/chat-bg.jpg and /dev/null differ diff --git a/src/components/common/UiLoader.scss b/src/components/common/UiLoader.scss index 87c571d9f..2f2d98cac 100644 --- a/src/components/common/UiLoader.scss +++ b/src/components/common/UiLoader.scss @@ -19,7 +19,6 @@ z-index: var(--z-ui-loader-mask); display: flex; - @media (min-width: 600px) { display: grid; grid-template-columns: auto 1fr; @@ -64,62 +63,7 @@ z-index: 1; overflow: hidden; - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: var(--theme-background-color); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - z-index: -1; - transform-origin: left center; - - .theme-light & { - background-image: url('../../assets/chat-bg.jpg'); - - @media (max-width: 600px) { - background-image: url("../../assets/chat-bg-mobile.jpg"); - } - } - } - - .theme-dark &:not(.custom-bg-image)::before { - background-image: url('../../assets/chat-bg-dark.png'); - background-position: top left; - background-size: 650px; - background-repeat: repeat; - } - - &.custom-bg-image::before { - background-image: var(--custom-background) !important; - filter: none; - transform: scale(1.1); - } - - &.custom-bg-image.blurred::before { - filter: blur(12px); - } - - &.custom-bg-color:not(.custom-bg-image)::before { - opacity: 0; - } - - html.theme-light body.animation-level-2 &.with-right-column::before { - transform: scale(0.67); - } - - @media screen and (min-width: 1276px) { - &::before { - margin: -16rem -5rem -20rem 0; - } - } - @media (max-width: 1275px) { - flex: 3; border-right: none; } diff --git a/src/components/common/UiLoader.tsx b/src/components/common/UiLoader.tsx index a6280b2c9..aa175273b 100644 --- a/src/components/common/UiLoader.tsx +++ b/src/components/common/UiLoader.tsx @@ -136,8 +136,8 @@ const UiLoader: FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const className = buildClassName( - 'middle', + const middleClassName = buildClassName( + 'middle bg-layers', transitionClassNames, customBackground && 'custom-bg-image', backgroundColor && 'custom-bg-color', @@ -161,7 +161,7 @@ const UiLoader: FC = ({ style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined} />
{isRightColumnShown &&
} diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index 2dbacbb18..1f7a2bec1 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -6,85 +6,6 @@ right: 0; overflow: hidden; z-index: -1; - background-color: var(--theme-background-color); - - body:not(.animation-level-0) #root & { - transition: background-color 0.2s; - } - - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - 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-image 0.2s; - } - - body.animation-level-0 & { - transition: none; - } - - .theme-light & { - background-image: url("../../assets/chat-bg.jpg"); - - @media (max-width: 600px) { - background-image: url("../../assets/chat-bg-mobile.jpg"); - } - } - - .theme-dark #MiddleColumn:not(.custom-bg-image) & { - 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 { - opacity: 0; - } - - .custom-bg-image &::after { - background-image: var(--custom-background) !important; - filter: none; - transform: scale(1.1); - } - - .custom-bg-image.blurred &::after { - filter: blur(12px); - } - - @media screen and (min-width: 1276px) { - body.animation-level-2 &::after { - margin: -16rem -5rem -20rem 0; - overflow: hidden; - transform: scale(1); - transform-origin: left center; - transition: transform var(--layer-transition); - } - - html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after { - transform: scale(0.67) !important; - } - } - - html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after { - @media screen and (min-width: 1921px) { - transform: scale(0.8) !important; - } - - @media screen and (min-width: 2600px) { - transform: scale(0.95) !important; - } - } } #MiddleColumn { diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index dd59c9351..c53db5d25 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -313,10 +313,15 @@ const MiddleColumn: FC = ({ const className = buildClassName( renderingHasTools && 'has-header-tools', + MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled', + ); + + const bgClassName = buildClassName( + 'bg-layers with-transition', customBackground && 'custom-bg-image', backgroundColor && 'custom-bg-color', customBackground && isBackgroundBlurred && 'blurred', - MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled', + isRightColumnShown && 'with-right-column', ); const messagingDisabledClassName = buildClassName( @@ -383,6 +388,7 @@ const MiddleColumn: FC = ({ >
diff --git a/src/config.ts b/src/config.ts index df9b4d92f..08788f0aa 100644 --- a/src/config.ts +++ b/src/config.ts @@ -200,10 +200,10 @@ export const DEFAULT_LANG_CODE = 'en'; export const DEFAULT_LANG_PACK = 'android'; export const LANG_PACKS = ['android', 'ios', 'tdesktop', 'macos'] as const; export const FEEDBACK_URL = 'https://bugs.telegram.org/?tag_ids=41&sort=time'; -export const LIGHT_THEME_BG_COLOR = '#A2AF8E'; +export const LIGHT_THEME_BG_COLOR = '#99BA92'; export const DARK_THEME_BG_COLOR = '#0F0F0F'; -export const DARK_THEME_PATTERN_COLOR = '#0a0a0a8c'; -export const DEFAULT_PATTERN_COLOR = 'rgba(90, 110, 70, 0.6)'; +export const DEFAULT_PATTERN_COLOR = '#4A8E3A8C'; +export const DARK_THEME_PATTERN_COLOR = '#0A0A0A8C'; // Group calls export const GROUP_CALL_VOLUME_MULTIPLIER = 100; diff --git a/src/styles/_bg.scss b/src/styles/_bg.scss new file mode 100644 index 000000000..7112ef7d4 --- /dev/null +++ b/src/styles/_bg.scss @@ -0,0 +1,84 @@ +.bg-layers { + background-color: var(--theme-background-color); + + body:not(.animation-level-0) &.with-transition { + transition: background-color 0.2s; + } + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + + html.theme-light &:not(.custom-bg-image)::before { + background-image: url('../assets/chat-bg-br.png'); + } + + &:not(.custom-bg-image).custom-bg-color::before { + display: none; + } + + &.custom-bg-image::before { + background-image: var(--custom-background) !important; + transform: scale(1.1); + } + + body:not(.animation-level-0) &.custom-bg-image.with-transition::before { + transition: background-image var(--layer-transition); + } + + &.custom-bg-image.blurred::before { + filter: blur(12px); + } + + @media screen and (min-width: 1276px) { + body.animation-level-2 &::before { + overflow: hidden; + transform: scale(1); + transform-origin: left center; + } + } + + html.theme-light body.animation-level-2 &:not(.custom-bg-image).with-right-column::before { + transition: transform var(--layer-transition); + + @media screen and (min-width: 1276px) { + transform: scaleX(0.67) !important; + } + + @media screen and (min-width: 1921px) { + transform: scaleX(0.8) !important; + } + + @media screen and (min-width: 2600px) { + transform: scaleX(0.95) !important; + } + } + + &:not(.custom-bg-image):not(.custom-bg-color)::after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + background-image: url('../assets/chat-bg-pattern-light.png'); + background-position: top left; + background-size: 510px auto; + background-repeat: repeat; + mix-blend-mode: overlay; + + html.theme-dark & { + background-image: url('../assets/chat-bg-pattern-dark.png'); + mix-blend-mode: unset; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 386c84ab2..1a5e109b1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,6 +5,7 @@ @import "forms"; @import "icons"; @import "common"; +@import "bg"; @import "../assets/fonts/roboto.css"; @import "./print";