Add no blur mode

public/index.html

@@ -22,6 +22,7 @@
     <script src="scripts/showdown.min.js"></script>
     <script src="scripts/popper.js"></script>
     <script src="scripts/purify.min.js"></script>
+    <script type="module" src="scripts/power-user.js"></script>
     <script type="module" src="scripts/RossAscends-mods.js"></script>
     <script type="module" src="scripts/swiped-events.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
@@ -32,7 +33,6 @@
 
     <script type="module" src="scripts/world-info.js"></script>
     <script type="module" src="scripts/group-chats.js"></script>
-    <script type="module" src="scripts/power-user.js"></script>
     <script type="module" src="scripts/kai-settings.js"></script>
     <script type="module" src="scripts/textgen-settings.js"></script>
     <script type="module" src="scripts/bookmarks.js"></script>
@@ -188,6 +188,17 @@
                     <input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off"><br>
                     <input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
                 </form>
+                <div class="range-block">
+                    <div class="range-block-title">
+                        <h4>Fast UI Mode (no background blur)</h4>
+                    </div>
+                    <div class="range-block-range">
+                        <label for="fast_ui_mode" class="checkbox_label">
+                            <input id="fast_ui_mode" type="checkbox" />
+                            Enabled
+                        </label>
+                    </div>
+                </div>
                 <div id="power-user-options-block">
                     <h3>Power User Options</h3>
                     <div id="power-user-option-checkboxes">

public/scripts/RossAscends-mods.js

@@ -15,6 +15,7 @@ import {
 } from "../script.js";
 
 import {
+    fast_ui_mode,
 	pin_examples,
 } from "./power-user.js";
 
@@ -200,7 +201,8 @@ function RA_checkOnlineStatus() {
 	} else {
 		if (online_status !== undefined && online_status !== "no_connection") {
 			$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
-			$("#send_form").css("background-color", "rgba(0,0,0,0.6)"); //on connect, form BG changes to transprent black
+            const formColor = fast_ui_mode ? "var(--black90a)": "var(--black60a)";
+			$("#send_form").css("background-color", formColor); //on connect, form BG changes to transprent black
 			$("#API-status-top").removeClass("redOverlayGlow");
 			connection_made = true;
 			retry_delay = 100;

public/scripts/power-user.js

@@ -8,6 +8,7 @@ export {
     disable_personality_formatting,
     always_force_name2,
     custom_chat_separator,
+    fast_ui_mode,
 };
 
 let collapse_newlines = false;
@@ -17,6 +18,7 @@ let disable_description_formatting = false;
 let disable_scenario_formatting = false;
 let disable_personality_formatting = false;
 let always_force_name2 = false;
+let fast_ui_mode = false;
 let custom_chat_separator = '';
 
 const storage_keys = {
@@ -28,12 +30,25 @@ const storage_keys = {
     disable_personality_formatting: "TavernAI_disable_personality_formatting",
     always_force_name2: "TavernAI_always_force_name2",
     custom_chat_separator: "TavernAI_custom_chat_separator",
+    fast_ui_mode: "TavernAI_fast_ui_mode",
 };
 
 function collapseNewlines(x) {
     return x.replaceAll(/\n+/g, "\n");
 }
 
+function switchUiMode() {
+    fast_ui_mode = localStorage.getItem(storage_keys.fast_ui_mode) == "true";
+    if (fast_ui_mode) {
+        $("body").addClass("no-blur");
+    }
+    else {
+        $("body").removeClass("no-blur");
+    }
+}
+
+switchUiMode();
+
 function loadPowerUserSettings() {
     collapse_newlines = localStorage.getItem(storage_keys.collapse_newlines) == "true";
     force_pygmalion_formatting = localStorage.getItem(storage_keys.force_pygmalion_formatting) == "true";
@@ -43,6 +58,7 @@ function loadPowerUserSettings() {
     disable_personality_formatting = localStorage.getItem(storage_keys.disable_personality_formatting) == "true";
     always_force_name2 = localStorage.getItem(storage_keys.always_force_name2) == "true";
     custom_chat_separator = localStorage.getItem(storage_keys.custom_chat_separator);
+    fast_ui_mode = localStorage.getItem(storage_keys.fast_ui_mode) == "true";
 
     $("#force-pygmalion-formatting-checkbox").prop("checked", force_pygmalion_formatting);
     $("#collapse-newlines-checkbox").prop("checked", collapse_newlines);
@@ -52,6 +68,7 @@ function loadPowerUserSettings() {
     $("#disable-personality-formatting-checkbox").prop("checked", disable_personality_formatting);
     $("#always-force-name2-checkbox").prop("checked", always_force_name2);
     $("#custom_chat_separator").val(custom_chat_separator);
+    $("#fast_ui_mode").prop("checked", fast_ui_mode);
 }
 
 $(document).ready(() => {
@@ -97,4 +114,10 @@ $(document).ready(() => {
         custom_chat_separator = $(this).val();
         localStorage.setItem(storage_keys.custom_chat_separator, custom_chat_separator);
     });
+
+    $("#fast_ui_mode").change(function () {
+        fast_ui_mode = $(this).prop("checked");
+        localStorage.setItem(storage_keys.fast_ui_mode, fast_ui_mode);
+        switchUiMode();
+    });
 });

public/style.css

@@ -7,6 +7,7 @@
     --black50a: rgba(0, 0, 0, 0.5);
     --black60a: rgba(0, 0, 0, 0.6);
     --black70a: rgba(0, 0, 0, 0.7);
+    --black90a: rgba(0, 0, 0, 0.9);
     --black100: rgba(0, 0, 0, 1);
 
     --white30a: rgba(255, 255, 255, 0.3);
@@ -2961,3 +2962,27 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     }
 }
 
+body.no-blur * {
+    backdrop-filter: unset !important;
+}
+
+
+body.no-blur #chat {
+    background-color: var(--black90a) !important;
+}
+
+body.no-blur .drawer-content {
+    background-color: var(--black90a) !important;
+}
+
+body.no-blur #top-bar {
+    background-color: var(--black90a) !important;
+}
+
+body.no-blur #bg1 {
+    filter: unset;
+}
+
+body.no-blur #bg2 {
+    filter: unset;
+}