diff --git a/public/index.html b/public/index.html index 206e6b47b..a1699199c 100644 --- a/public/index.html +++ b/public/index.html @@ -1238,10 +1238,15 @@ ♡ Waifu Mode ♡ + + diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 314d04c30..2abf23b7c 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -83,6 +83,7 @@ let power_user = { waifuMode: false, movingUI: false, + noShadows: false, theme: 'Default (Dark)', }; @@ -107,6 +108,7 @@ const storage_keys = { waifuMode: "TavernAI_waifuMode", movingUI: "TavernAI_movingUI", + noShadows: "TavernAI_noShadows", }; let browser_has_focus = true; @@ -151,6 +153,13 @@ function switchMovingUI() { scrollChatToBottom(); } +function noShadows() { + const noShadows = localStorage.getItem(storage_keys.noShadows); + power_user.noShadows = noShadows === null ? false : noShadows == "true"; + $("body").toggleClass("noShadows", power_user.noShadows); + scrollChatToBottom(); +} + function applyAvatarStyle() { power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); $("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR); @@ -203,11 +212,10 @@ async function applyBlurStrength() { async function applyShadowWidth() { power_user.shadow_width = Number(localStorage.getItem(storage_keys.shadow_width) ?? 2); document.documentElement.style.setProperty('--shadowWidth', power_user.shadow_width); - $("#blur_strength_counter").text(power_user.shadow_width); + $("#shadow_width_counter").text(power_user.shadow_width); } - async function applyFontScale() { power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); document.documentElement.style.setProperty('--fontScale', power_user.font_scale); @@ -262,9 +270,11 @@ applyThemeColor(); applySheldWidth(); applyAvatarStyle(); applyBlurStrength(); +applyShadowWidth(); applyChatDisplay(); switchWaifuMode() switchMovingUI(); +noShadows(); function loadPowerUserSettings(settings, data) { // Load from settings.json @@ -280,9 +290,11 @@ function loadPowerUserSettings(settings, data) { const fastUi = localStorage.getItem(storage_keys.fast_ui_mode); const waifuMode = localStorage.getItem(storage_keys.waifuMode); const movingUI = localStorage.getItem(storage_keys.movingUI); + const noShadows = localStorage.getItem(storage_keys.noShadows); power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true"; power_user.waifuMode = waifuMode === null ? false : waifuMode == "true"; power_user.movingUI = movingUI === null ? false : movingUI == "true"; + power_user.noShadows = noShadows === null ? false : noShadows == "true"; power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT); @@ -303,6 +315,7 @@ function loadPowerUserSettings(settings, data) { $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode); $("#waifuMode").prop("checked", power_user.waifuMode); $("#movingUImode").prop("checked", power_user.movingUI); + $("#noShadowsmode").prop("checked", power_user.noShadows); $("#multigen").prop("checked", power_user.multigen); $("#multigen_first_chunk").val(power_user.multigen_first_chunk); $("#multigen_next_chunks").val(power_user.multigen_next_chunks); @@ -442,6 +455,12 @@ $(document).ready(() => { switchMovingUI(); }); + $("#noShadowsmode").change(function () { + power_user.noShadows = $(this).prop("checked"); + localStorage.setItem(storage_keys.noShadows, power_user.noShadows); + noShadows(); + }); + $("#movingUIreset").on('click', function () { document.getElementById("sheld").style.top = ''; diff --git a/public/style.css b/public/style.css index 2a907d9c1..821cc0b10 100644 --- a/public/style.css +++ b/public/style.css @@ -3425,6 +3425,8 @@ body.waifuMode .expression-holder { z-index: 2; } +/* movingUI*/ + body.movingUI .drag-grabber { display: inline; } @@ -3435,6 +3437,11 @@ body.movingUI #expression-holder { resize: both; } +/*No Text Shadows Mode*/ +body.noShadows * { + text-shadow: none !important; +} + /* ---------- @media queries must always go at the bottom ------------*/ /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/