From ec6b6ab8d4b1660be009923917bb43c286522ffd Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 22 Sep 2023 21:49:30 +0300
Subject: [PATCH] Restyle custom CSS input

---
 public/index.html            | 14 +++++++-------
 public/scripts/power-user.js | 14 ++++----------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/public/index.html b/public/index.html
index b508cc697..b4ad0ac67 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2941,13 +2941,13 @@
                                 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>
+                                <h4>
+                                    <span data-i18n="Custom CSS">Custom CSS</span>
+                                </h4>
+                                <div class="flex-container flexnowrap alignitemscenter">
+                                    <textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace"></textarea>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 4dd84b1c3..c25929b11 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -561,16 +561,12 @@ async function applyThemeColor(type) {
     }
 }
 
-async function applyCustomCSS()
-{
+async function applyCustomCSS() {
     power_user.custom_css = String(localStorage.getItem(storage_keys.custom_css) ?? "");
 
-    if (power_user.custom_css.includes("@import"))
-    {
+    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.')
     }
@@ -578,8 +574,7 @@ async function applyCustomCSS()
     $("#customCSS").val(power_user.custom_css);
     var styleId = "custom-style";
     var style = document.getElementById(styleId);
-    if (!style)
-    {
+    if (!style) {
         style = document.createElement("style");
         style.setAttribute("type", "text/css");
         style.setAttribute("id", styleId);
@@ -1933,8 +1928,7 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
-    $("#customCSS").on('change', () =>
-    {
+    $("#customCSS").on('change', () => {
         power_user.custom_css = $('#customCSS').val();
         localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
         saveSettingsDebounced();