rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Border Color Control

Browse Source
This commit is contained in:
RossAscends
2023-09-16 15:42:26 +09:00
parent 57de6229f9
commit 124658a006
11 changed files with 98 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/scripts/extensions/backgrounds/style.css
View File

@@ -6,7 +6,7 @@
background-attachment: fixed;
background-size: cover;
border-radius: 20px;
border: 1px solid var(--black50a);
border: 1px solid var(--SmartThemeBorderColor);
box-shadow: 0 0 7px var(--black50a);
margin: 5px;
}

6
public/scripts/extensions/quick-reply/style.css
View File

@@ -1,7 +1,7 @@
#quickReplyBar {
outline: none;
padding: 5px 0;
border-bottom: 1px solid var(--black30a);
border-bottom: 1px solid var(--SmartThemeBorderColor);
margin: 0;
transition: 0.3s;
opacity: 0.7;
@@ -28,7 +28,7 @@
#quickReplies div {
color: var(--SmartThemeBodyColor);
background-color: var(--black50a);
border: 1px solid var(--white30a);
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px;
padding: 3px 5px;
width: min-content;
@@ -44,4 +44,4 @@
opacity: 1;
filter: brightness(1.2);
cursor: pointer;
}
}

4
public/scripts/extensions/regex/style.css
View File

@@ -12,9 +12,9 @@
.regex-script-label {
align-items: center;
border: 1px solid rgba(128, 128, 128, 0.5);
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px;
padding: 0 5px;
margin-top: 1px;
margin-bottom: 1px;
}
}

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

@@ -126,6 +126,8 @@ let power_user = {
user_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUserMesBlurTintColor').trim()}`,
bot_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBotMesBlurTintColor').trim()}`,
shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
border_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBorderColor').trim()}`,
waifuMode: false,
movingUI: false,
@@ -227,6 +229,7 @@ const storage_keys = {
blur_strength: "TavernAI_blur_strength",
shadow_color: "TavernAI_shadow_color",
shadow_width: "TavernAI_shadow_width",
border_color: "TavernAI_border_color",
waifuMode: "TavernAI_waifuMode",
movingUI: "TavernAI_movingUI",
@@ -522,6 +525,9 @@ async function applyThemeColor(type) {
if (type === 'shadow') {
document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color);
}
if (type === 'border') {
document.documentElement.style.setProperty('--SmartThemeBorderColor', power_user.border_color);
}
}
async function applyBlurStrength() {
@@ -572,6 +578,7 @@ async function applyTheme(name) {
{ key: 'user_mes_blur_tint_color', selector: '#user-mes-blur-tint-color-picker', type: 'userMesBlurTint' },
{ key: 'bot_mes_blur_tint_color', selector: '#bot-mes-blur-tint-color-picker', type: 'botMesBlurTint' },
{ key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
{ key: 'border_color', selector: '#border-color-picker', type: 'border' },
{
key: 'blur_strength',
action: async () => {
@@ -890,6 +897,7 @@ function loadPowerUserSettings(settings, data) {
$("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
$("#bot-mes-blur-tint-color-picker").attr('color', power_user.bot_mes_blur_tint_color);
$("#shadow-color-picker").attr('color', power_user.shadow_color);
$("#border-color-picker").attr('color', power_user.border_color);
$("#ui_mode_select").val(power_user.ui_mode).find(`option[value="${power_user.ui_mode}"]`).attr('selected', true);
for (const theme of themes) {
@@ -1227,6 +1235,7 @@ async function saveTheme() {
bot_mes_blur_tint_color: power_user.bot_mes_blur_tint_color,
shadow_color: power_user.shadow_color,
shadow_width: power_user.shadow_width,
border_color: power_user.border_color,
font_scale: power_user.font_scale,
fast_ui_mode: power_user.fast_ui_mode,
waifuMode: power_user.waifuMode,
@@ -1945,6 +1954,12 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$("#border-color-picker").on('change', (evt) => {
power_user.border_color = evt.detail.rgba;
applyThemeColor('border');
saveSettingsDebounced();
});
$("#themes").on('change', function () {
const themeSelected = String($(this).find(':selected').val());
power_user.theme = themeSelected;