diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts index 0c4f08f77..f86c7d972 100644 --- a/src/components/chat/chat.ts +++ b/src/components/chat/chat.ts @@ -221,7 +221,11 @@ export default class Chat extends EventListenerBase<{ if(patternRenderer) { const setOpacityTo = isDarkPattern ? gradientCanvas : patternCanvas; - setOpacityTo.style.setProperty('--opacity-max', '' + (Math.abs(intensity) * (isDarkPattern ? .5 : 1))); + let opacityMax = Math.abs(intensity) * (isDarkPattern ? .5 : 1); + if(isDarkPattern) { + opacityMax = Math.max(0.3, opacityMax); + } + setOpacityTo.style.setProperty('--opacity-max', '' + opacityMax); } const promise = new Promise((resolve) => { diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index fdd57fb51..d8b1474e3 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/src/components/sidebarLeft/tabs/generalSettings.ts @@ -356,13 +356,23 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable { lastActive.classList.remove('active'); } + let active: HTMLElement; themesMap.forEach((item) => { applyThemeOnItem(item); if(item.theme.id === currentTheme.id) { item.container.classList.add('active'); + active = item.container; } }); + + if(active) { + scrollable.scrollIntoViewNew({ + element: active, + position: 'center', + axis: 'x' + }); + } }); form.append(dayRow.container, nightRow.container, systemRow.container); diff --git a/src/helpers/themeController.ts b/src/helpers/themeController.ts index 51de843c4..454106dca 100644 --- a/src/helpers/themeController.ts +++ b/src/helpers/themeController.ts @@ -13,7 +13,8 @@ import {changeColorAccent, ColorRgb, getAccentColor, getAverageColor, getHexColo type AppColorName = 'primary-color' | 'message-out-primary-color' | 'surface-color' | 'danger-color' | 'primary-text-color' | - 'secondary-text-color' | 'message-out-background-color'; + 'secondary-text-color' | 'message-out-background-color' | + 'saved-color'; type AppColor = { rgb?: boolean, light?: boolean, @@ -53,6 +54,9 @@ const appColorMap: {[name in AppColorName]: AppColor} = { lightFilled: true, dark: true, darkFilled: true + }, + 'saved-color': { + lightFilled: true } }; @@ -67,7 +71,8 @@ const colorMap: { 'surface-color': '#ffffff', 'danger-color': '#df3f40', 'primary-text-color': '#000000', - 'secondary-text-color': '#707579' + 'secondary-text-color': '#707579', + 'saved-color': '#359AD4' }, night: { 'primary-color': '#8774E1', @@ -75,7 +80,8 @@ const colorMap: { 'surface-color': '#212121', 'danger-color': '#ff595a', 'primary-text-color': '#ffffff', - 'secondary-text-color': '#aaaaaa' + 'secondary-text-color': '#aaaaaa', + 'saved-color': '#8774E1' } }; @@ -284,6 +290,13 @@ export class ThemeController { darkenAlpha: 0.04 }); + applyAppColor({ + name: 'saved-color', + hex: newAccentHex, + lightenAlpha: 0.64, + mixColor: [255, 255, 255] + }) + if(!themeSettings.message_colors?.length) { return; } diff --git a/src/scss/partials/_themes.scss b/src/scss/partials/_themes.scss index da4e34551..b825dec30 100644 --- a/src/scss/partials/_themes.scss +++ b/src/scss/partials/_themes.scss @@ -34,6 +34,7 @@ position: relative; display: flex; justify-content: center; + cursor: pointer; // transform: scale(1); // @include animation-level(2) { @@ -81,6 +82,7 @@ width: 100%; height: 100%; border-radius: inherit; + pointer-events: none; } } @@ -108,6 +110,7 @@ border-radius: 1.75rem; background-color: #fff; position: absolute; + pointer-events: none; &.is-out { top: .5rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index d8a2b23d8..9daf24db6 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -143,9 +143,12 @@ $chat-input-inner-padding-handhelds: .25rem; @include avatar-color("cyan", #53edd6, #28c9b7); @include avatar-color("blue", #5BCBE3, #359AD4); @include avatar-color("pink", #FF8AAC, #D95574); - @include avatar-color("saved", #69BFFA, #3D9DE0); + // @include avatar-color("saved", #69BFFA, #3D9DE0); @include avatar-color("archive", #B8C2CC, #9EAAB5); + --peer-avatar-saved-top: var(--light-filled-saved-color); + --peer-avatar-saved-bottom: var(--saved-color); + --avatar-color-top: var(--peer-avatar-saved-top); --avatar-color-bottom: var(--peer-avatar-saved-bottom); --avatar-border-radius-forum: 37%;