Added custom CSS box to UI Theme settings (#1166)

* Added custom CSS box to UI Theme settings

* Update index.html

Merged against release instead of staging. Whoops.

* Added an import stripper regex so that imports will be removed and show a toastr to inform the user.

* Moved import remove code to applyCustomCSS. Updated localStorage. Not re-running saveSettingsDebounced()

public/index.html

@@ -2940,6 +2940,14 @@
                             <div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
                                 Reset MovingUI
                             </div>
+                            <div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn">
+								<h4>
+									<span data-i18n="Custom CSS">Custom CSS</span>
+								</h4>
+								<div class="flex-container flexnowrap alignitemscenter">
+									<textarea id="customCSS" class="margin0 margin-r5"></textarea>
+								</div>
+							</div>
                         </div>
                     </div>
                     <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">

public/scripts/power-user.js

@@ -129,6 +129,8 @@ let power_user = {
     shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
     border_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBorderColor').trim()}`,
 
+    custom_css: '',
+
 
     waifuMode: false,
     movingUI: false,
@@ -231,6 +233,8 @@ const storage_keys = {
     shadow_width: "TavernAI_shadow_width",
     border_color: "TavernAI_border_color",
 
+    custom_css: "TavernAI_custom_css",
+
     waifuMode: "TavernAI_waifuMode",
     movingUI: "TavernAI_movingUI",
     noShadows: "TavernAI_noShadows",
@@ -557,6 +561,33 @@ async function applyThemeColor(type) {
     }
 }
 
+async function applyCustomCSS()
+{
+    power_user.custom_css = String(localStorage.getItem(storage_keys.custom_css) ?? "");
+
+    if (power_user.custom_css.includes("@import"))
+    {
+        var removeImport = /@import[^;]+;/gm
+        power_user.custom_css = power_user.custom_css.replace(removeImport, "");
+        toastr.warning(power_user.custom_css);
+        $('#customCSS').val(power_user.custom_css);
+        localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
+        toastr.warning('@import not allowed in Custom CSS. @import lines removed.')
+    }
+
+    $("#customCSS").val(power_user.custom_css);
+    var styleId = "custom-style";
+    var style = document.getElementById(styleId);
+    if (!style)
+    {
+        style = document.createElement("style");
+        style.setAttribute("type", "text/css");
+        style.setAttribute("id", styleId);
+        document.head.appendChild(style);
+    }
+    style.innerHTML = power_user.custom_css;
+}
+
 async function applyBlurStrength() {
     power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1);
     document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength);
@@ -615,6 +646,13 @@ async function applyTheme(name) {
                 await applyBlurStrength();
             }
         },
+        {
+            key: 'custom_css',
+            action: async () => {
+                localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
+                await applyCustomCSS();
+            }
+        },
         {
             key: 'shadow_width',
             action: async () => {
@@ -781,6 +819,7 @@ applyChatWidth('forced');
 applyAvatarStyle();
 applyBlurStrength();
 applyShadowWidth();
+applyCustomCSS();
 switchMovingUI();
 noShadows();
 switchHotswap();
@@ -1284,6 +1323,7 @@ async function saveTheme() {
         expand_message_actions: power_user.expand_message_actions,
 
         hotswap_enabled: power_user.hotswap_enabled,
+        custom_css: power_user.custom_css,
 
 
     };
@@ -1893,6 +1933,14 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#customCSS").on('change', () =>
+    {
+        power_user.custom_css = $('#customCSS').val();
+        localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
+        saveSettingsDebounced();
+        applyCustomCSS();
+    });
+
     $("#movingUImode").change(function () {
         power_user.movingUI = $(this).prop("checked");
         localStorage.setItem(storage_keys.movingUI, power_user.movingUI);