From b1ab1451ec7412ed759e819200c9439499534c44 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Fri, 22 Sep 2023 16:54:51 +0900 Subject: [PATCH] separate chat and menu background color selection --- public/css/toggle-dependent.css | 17 ----------------- public/index.html | 12 ++++++------ public/scripts/power-user.js | 15 +++++++++++++++ public/style.css | 5 +++-- 4 files changed, 24 insertions(+), 25 deletions(-) diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css index cfc801786..9dac7e9d8 100644 --- a/public/css/toggle-dependent.css +++ b/public/css/toggle-dependent.css @@ -257,28 +257,11 @@ body.no-blur #bg_custom { } -body:not(.bubblechat).no-blur #chat, body.no-blur #top-bar, body.no-blur #send_form { background-color: var(--SmartThemeBlurTintColor) !important; } - -/* body.no-blur #options, -body.no-blur .ui-widget-content, -body.no-blur #floatingPrompt, -body.no-blur #extensionsMenu, -body.no-blur .list-group, -body.no-blur #character_popup, -body.no-blur #world_popup, -body.no-blur #dialogue_popup, -body.no-blur #select_chat_popup, -body.no-blur .drawer-content, -body.no-blur .select2-results__options { - background-color: black !important; -} - */ - /* wAIfu mode*/ body.waifuMode #top-bar { diff --git a/public/index.html b/public/index.html index 4bafe9c99..ac49649d3 100644 --- a/public/index.html +++ b/public/index.html @@ -2721,13 +2721,13 @@ Text Shadow - +
+ + Chat Background +
- UI Background + UI Background
@@ -4545,4 +4545,4 @@ - + \ No newline at end of file diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 613f6b0db..4a88da9af 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -123,6 +123,7 @@ let power_user = { italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`, quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`, blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`, + chat_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeChatTintColor').trim()}`, user_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUserMesBlurTintColor').trim()}`, bot_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBotMesBlurTintColor').trim()}`, shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`, @@ -223,6 +224,7 @@ const storage_keys = { italics_text_color: "TavernAI_italics_text_color", quote_text_color: "TavernAI_quote_text_color", blur_tint_color: "TavernAI_blur_tint_color", + chat_tint_color: "TavernAI_chat_tint_color", user_mes_blur_tint_color: "TavernAI_user_mes_blur_tint_color", bot_mes_blur_tint_color: "TavernAI_bot_mes_blur_tint_color", blur_strength: "TavernAI_blur_strength", @@ -515,6 +517,9 @@ async function applyThemeColor(type) { if (type === 'blurTint') { document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); } + if (type === 'chatTint') { + document.documentElement.style.setProperty('--SmartThemeChatTintColor', power_user.chat_tint_color); + } if (type === 'userMesBlurTint') { document.documentElement.style.setProperty('--SmartThemeUserMesBlurTintColor', power_user.user_mes_blur_tint_color); } @@ -574,6 +579,7 @@ async function applyTheme(name) { { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' }, { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' }, { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' }, + { key: 'chat_tint_color', selector: '#chat-tint-color-picker', type: 'chatTint' }, { key: 'user_mes_blur_tint_color', selector: '#user-mes-blur-tint-color-picker', type: 'userMesBlurTint' }, { key: 'bot_mes_blur_tint_color', selector: '#bot-mes-blur-tint-color-picker', type: 'botMesBlurTint' }, { key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' }, @@ -892,6 +898,7 @@ function loadPowerUserSettings(settings, data) { $("#quote-color-picker").attr('color', power_user.quote_text_color); //$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color); $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color); + $("#chat-tint-color-picker").attr('color', power_user.chat_tint_color); $("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color); $("#bot-mes-blur-tint-color-picker").attr('color', power_user.bot_mes_blur_tint_color); $("#shadow-color-picker").attr('color', power_user.shadow_color); @@ -1229,6 +1236,7 @@ async function saveTheme() { quote_text_color: power_user.quote_text_color, //fastui_bg_color: power_user.fastui_bg_color, blur_tint_color: power_user.blur_tint_color, + chat_tint_color: power_user.chat_tint_color, user_mes_blur_tint_color: power_user.user_mes_blur_tint_color, bot_mes_blur_tint_color: power_user.bot_mes_blur_tint_color, shadow_color: power_user.shadow_color, @@ -1934,6 +1942,13 @@ $(document).ready(() => { saveSettingsDebounced(); }); + $("#chat-tint-color-picker").on('change', (evt) => { + power_user.chat_tint_color = evt.detail.rgba; + applyThemeColor('chatTint'); + saveSettingsDebounced(); + }); + + $("#user-mes-blur-tint-color-picker").on('change', (evt) => { power_user.user_mes_blur_tint_color = evt.detail.rgba; applyThemeColor('userMesBlurTint'); diff --git a/public/style.css b/public/style.css index 3bae47b6a..579d8a556 100644 --- a/public/style.css +++ b/public/style.css @@ -47,6 +47,7 @@ --SmartThemeQuoteColor: rgb(225, 138, 36); /* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */ --SmartThemeBlurTintColor: rgba(23, 23, 23, 1); + --SmartThemeChatTintColor: rgba(23, 23, 23, 1); --SmartThemeUserMesBlurTintColor: rgba(0, 0, 0, 0.3); --SmartThemeBotMesBlurTintColor: rgba(60, 60, 60, 0.3); --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px); @@ -485,7 +486,7 @@ hr { border-left: 1px solid var(--SmartThemeBorderColor); border-right: 1px solid var(--SmartThemeBorderColor); backdrop-filter: blur(var(--SmartThemeBlurStrength)); - background-color: var(--SmartThemeBlurTintColor); + background-color: var(--SmartThemeChatTintColor); -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor); scrollbar-width: thin; @@ -3619,4 +3620,4 @@ a { height: 100vh; z-index: 9999; } -} +} \ No newline at end of file