rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-03 12:47:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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()
This commit is contained in:
Randall Fitzgerald 2023-09-22 14:13:58 -04:00 committed by GitHub
parent 3d1312c13a
commit 654a34f932
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -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">

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

@ -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);