From 93876b81896a56a708e0ff8f9e17651d5caa8d98 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Sun, 18 Jun 2023 23:56:56 +0900 Subject: [PATCH 1/2] themes upgrade, user/bot messages get unique color --- public/index.html | 16 +++++++--- public/scripts/power-user.js | 60 +++++++++++++++++++++++++++--------- public/style.css | 44 ++++++++++++++------------ 3 files changed, 82 insertions(+), 38 deletions(-) diff --git a/public/index.html b/public/index.html index 060673853..60ad41306 100644 --- a/public/index.html +++ b/public/index.html @@ -2062,15 +2062,23 @@
- Shadow Color + Text Shadow
-
+
- Blur Tint + UI Background +
+
+ + User Message +
+
+ + AI Message
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index e41493864..0a4f1d592 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -110,14 +110,16 @@ let power_user = { main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`, italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`, quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`, - fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`, + //fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`, blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').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()}`, waifuMode: false, movingUI: false, noShadows: false, - theme: 'Default (Dark)', + theme: 'Default (Dark) 1.7.1', auto_swipe: false, auto_swipe_minimum_length: 0, @@ -166,8 +168,10 @@ const storage_keys = { main_text_color: "TavernAI_main_text_color", italics_text_color: "TavernAI_italics_text_color", quote_text_color: "TavernAI_quote_text_color", - fastui_bg_color: "TavernAI_fastui_bg_color", + //fastui_bg_color: "TavernAI_fastui_bg_color", blur_tint_color: "TavernAI_blur_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", shadow_color: "TavernAI_shadow_color", shadow_width: "TavernAI_shadow_width", @@ -317,12 +321,18 @@ async function applyThemeColor(type) { if (type === 'quote') { document.documentElement.style.setProperty('--SmartThemeQuoteColor', power_user.quote_text_color); } - if (type === 'fastUIBG') { - document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); - } + /* if (type === 'fastUIBG') { + document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); + } */ if (type === 'blurTint') { document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); } + if (type === 'userMesBlurTint') { + document.documentElement.style.setProperty('--SmartThemeUserMesBlurTintColor', power_user.user_mes_blur_tint_color); + } + if (type === 'botMesBlurTint') { + document.documentElement.style.setProperty('--SmartThemeBotMesBlurTintColor', power_user.bot_mes_blur_tint_color); + } if (type === 'shadow') { document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color); } @@ -362,8 +372,10 @@ async function applyTheme(name) { { key: 'main_text_color', selector: '#main-text-color-picker', type: 'main' }, { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' }, { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' }, - { key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' }, + //{ key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' }, { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' }, + { 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' }, { key: 'blur_strength', @@ -450,6 +462,10 @@ async function applyTheme(name) { if (selector) $(selector).attr('color', power_user[key]); if (type) await applyThemeColor(type); if (action) await action(); + } else { + if (selector) { $(selector).attr('color', 'rgba(0,0,0,0)') }; + console.debug(`Empty theme key: ${key}`); + power_user[key] = ''; } } @@ -557,8 +573,10 @@ function loadPowerUserSettings(settings, data) { $("#main-text-color-picker").attr('color', power_user.main_text_color); $("#italics-color-picker").attr('color', power_user.italics_text_color); $("#quote-color-picker").attr('color', power_user.quote_text_color); - $("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color); + //$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color); $("#blur-tint-color-picker").attr('color', power_user.blur_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); for (const theme of themes) { @@ -777,8 +795,10 @@ async function saveTheme() { main_text_color: power_user.main_text_color, italics_text_color: power_user.italics_text_color, quote_text_color: power_user.quote_text_color, - fastui_bg_color: power_user.fastui_bg_color, + //fastui_bg_color: power_user.fastui_bg_color, blur_tint_color: power_user.blur_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, shadow_width: power_user.shadow_width, font_scale: power_user.font_scale, @@ -1058,11 +1078,11 @@ $(document).ready(() => { saveSettingsDebounced(); }); - $("#fastui-bg-color-picker").on('change', (evt) => { - power_user.fastui_bg_color = evt.detail.rgba; - applyThemeColor('fastUIBG'); - saveSettingsDebounced(); - }); + /* $("#fastui-bg-color-picker").on('change', (evt) => { + power_user.fastui_bg_color = evt.detail.rgba; + applyThemeColor('fastUIBG'); + saveSettingsDebounced(); + }); */ $("#blur-tint-color-picker").on('change', (evt) => { power_user.blur_tint_color = evt.detail.rgba; @@ -1070,6 +1090,18 @@ $(document).ready(() => { saveSettingsDebounced(); }); + $("#user-mes-blur-tint-color-picker").on('change', (evt) => { + power_user.user_mes_blur_tint_color = evt.detail.rgba; + applyThemeColor('userMesBlurTint'); + saveSettingsDebounced(); + }); + + $("#bot-mes-blur-tint-color-picker").on('change', (evt) => { + power_user.bot_mes_blur_tint_color = evt.detail.rgba; + applyThemeColor('botMesBlurTint'); + saveSettingsDebounced(); + }); + $("#shadow-color-picker").on('change', (evt) => { power_user.shadow_color = evt.detail.rgba; applyThemeColor('shadow'); diff --git a/public/style.css b/public/style.css index 79423606d..0b3d84f84 100644 --- a/public/style.css +++ b/public/style.css @@ -30,8 +30,6 @@ --crimson70a: rgba(100, 0, 0, 0.7); --okGreen70a: rgba(0, 100, 0, 0.7); --cobalt30a: rgba(100, 100, 255, 0.3); - --sienna: rgb(210, 100, 40); - --orangered: rgb(255, 90, 0); --greyCAIbg: rgb(36, 36, 37); --ivory: rgb(220, 220, 210); --golden: rgba(212, 175, 55, 1); @@ -39,10 +37,12 @@ /*Default Theme, will be changed by ToolCool Color Picker*/ --SmartThemeBodyColor: rgb(220, 220, 210); - --SmartThemeEmColor: rgb(175, 175, 175); - --SmartThemeQuoteColor: rgb(220, 220, 210); - --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); - --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5); + --SmartThemeEmColor: rgb(145, 145, 145); + --SmartThemeQuoteColor: rgb(225, 138, 36); + /* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */ + --SmartThemeBlurTintColor: rgba(23, 23, 23, 1); + --SmartThemeUserMesBlurTintColor: rgba(0, 0, 0, 0.3); + --SmartThemeBotMesBlurTintColor: rgba(60, 60, 60, 0.3); --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px); --SmartThemeShadowColor: rgba(0, 0, 0, 0.5); @@ -2287,16 +2287,15 @@ input[type="range"]::-webkit-slider-thumb { width: calc(var(--mainFontSize) + 0.2rem); height: calc(var(--mainFontSize) + 0.2rem); display: inline-block; - opacity: 0.7; + opacity: 0.5; margin: 0 5px; text-align: center; box-shadow: 0 0 3px black; + transition: all 250ms; } .note-link-span:hover { - color: var(--white100); - background-color: var(--orangered); opacity: 1; } @@ -3629,7 +3628,6 @@ label[for="extensions_autoconnect"] { #extensions_settings .inline-drawer-toggle.inline-drawer-header, #extensions_settings2 .inline-drawer-toggle.inline-drawer-header { - /* background-color: var(--SmartThemeBlurTintColor); */ background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%); margin-bottom: 5px; border-radius: 10px; @@ -4090,11 +4088,15 @@ toolcool-color-picker { body.bubblechat .mes { padding: 10px; border-radius: 10px; - background-color: var(--SmartThemeBlurTintColor); + background-color: var(--SmartThemeBotMesBlurTintColor); margin-bottom: 5px; border: 1px solid var(--white30a); } +body.bubblechat .mes[is_user="true"] { + background-color: var(--SmartThemeUserMesBlurTintColor); +} + body.w1000px #sheld { max-width: 1000px !important; } @@ -4105,8 +4107,6 @@ body.no-blur * { backdrop-filter: unset !important; } - - body.no-blur #send_form.no-connection { background-color: rgba(100, 0, 0, 0.9) !important; } @@ -4117,19 +4117,23 @@ body.no-blur #bg_custom { } -body.no-blur .drawer-content, body:not(.bubblechat).no-blur #chat, -body.bubblechat.no-blur .mes, 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 .options-content, -body.no-blur #send_form, -body.no-blur .list-group, -body.no-blur .ui-widget-content { - background-color: var(--SmartThemeFastUIBGColor) !important; +body.no-blur .drawer-content { + background-color: black !important; } /* wAIfu mode*/ From 84d9113ed338be96f2a3bbe4aa46c2131d9b3903 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Sun, 18 Jun 2023 23:58:08 +0900 Subject: [PATCH 2/2] new base themes --- public/themes/Default (Dark) 1.7.1.json | 21 +++++++++++++++++++++ public/themes/Ross v2.json | 21 +++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 public/themes/Default (Dark) 1.7.1.json create mode 100644 public/themes/Ross v2.json diff --git a/public/themes/Default (Dark) 1.7.1.json b/public/themes/Default (Dark) 1.7.1.json new file mode 100644 index 000000000..5ccbc2d99 --- /dev/null +++ b/public/themes/Default (Dark) 1.7.1.json @@ -0,0 +1,21 @@ +{ + "name": "Default (Dark) 1.7.1", + "blur_strength": 10, + "main_text_color": "rgba(220, 220, 210, 1)", + "italics_text_color": "rgba(145, 145, 145, 1)", + "quote_text_color": "rgba(225, 138, 36, 1)", + "blur_tint_color": "rgba(23, 23, 23, 1)", + "user_mes_blur_tint_color": "rgba(0, 0, 0, 0.9)", + "bot_mes_blur_tint_color": "rgba(0, 0, 0, 0.9)", + "shadow_color": "rgba(0, 0, 0, 1)", + "shadow_width": 2, + "font_scale": 1, + "fast_ui_mode": true, + "waifuMode": false, + "avatar_style": 0, + "chat_display": 0, + "noShadows": true, + "sheld_width": 0, + "timer_enabled": false, + "hotswap_enabled": true +} \ No newline at end of file diff --git a/public/themes/Ross v2.json b/public/themes/Ross v2.json new file mode 100644 index 000000000..1634c4922 --- /dev/null +++ b/public/themes/Ross v2.json @@ -0,0 +1,21 @@ +{ + "name": "Ross v2", + "blur_strength": 10, + "main_text_color": "rgba(230, 230, 220, 1)", + "italics_text_color": "rgba(145, 145, 145, 1)", + "quote_text_color": "rgba(73, 179, 255, 0.91)", + "blur_tint_color": "rgba(0, 0, 0, 0.5)", + "user_mes_blur_tint_color": "rgba(51, 51, 51, 0.2)", + "bot_mes_blur_tint_color": "rgba(97, 97, 97, 0.43)", + "shadow_color": "rgba(0, 0, 0, 0.5)", + "shadow_width": 2, + "font_scale": 0.95, + "fast_ui_mode": false, + "waifuMode": false, + "avatar_style": 1, + "chat_display": 1, + "noShadows": false, + "sheld_width": 1, + "timer_enabled": true, + "hotswap_enabled": true +} \ No newline at end of file