rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-09 08:38:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Restyle custom CSS input

Browse Source
This commit is contained in:
Cohee 2023-09-22 21:49:30 +03:00
parent 654a34f932
commit ec6b6ab8d4
2 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/index.html
View File

@ -2941,13 +2941,13 @@
Reset MovingUI Reset MovingUI
</div> </div>
<div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn"> <div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn">
<h4> <h4>
<span data-i18n="Custom CSS">Custom CSS</span> <span data-i18n="Custom CSS">Custom CSS</span>
</h4> </h4>
<div class="flex-container flexnowrap alignitemscenter"> <div class="flex-container flexnowrap alignitemscenter">
<textarea id="customCSS" class="margin0 margin-r5"></textarea> <textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace"></textarea>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p"> <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">

14
public/scripts/power-user.js
View File

@ -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) ?? ""); 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 var removeImport = /@import[^;]+;/gm
power_user.custom_css = power_user.custom_css.replace(removeImport, ""); 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); localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
toastr.warning('@import not allowed in Custom CSS. @import lines removed.') toastr.warning('@import not allowed in Custom CSS. @import lines removed.')
} }
@ -578,8 +574,7 @@ async function applyCustomCSS()
$("#customCSS").val(power_user.custom_css); $("#customCSS").val(power_user.custom_css);
var styleId = "custom-style"; var styleId = "custom-style";
var style = document.getElementById(styleId); var style = document.getElementById(styleId);
if (!style) if (!style) {
{
style = document.createElement("style"); style = document.createElement("style");
style.setAttribute("type", "text/css"); style.setAttribute("type", "text/css");
style.setAttribute("id", styleId); style.setAttribute("id", styleId);
@ -1933,8 +1928,7 @@ $(document).ready(() => {
saveSettingsDebounced(); saveSettingsDebounced();
}); });
$("#customCSS").on('change', () => $("#customCSS").on('change', () => {
{
power_user.custom_css = $('#customCSS').val(); power_user.custom_css = $('#customCSS').val();
localStorage.setItem(storage_keys.custom_css, power_user.custom_css); localStorage.setItem(storage_keys.custom_css, power_user.custom_css);
saveSettingsDebounced(); saveSettingsDebounced();