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

- added color pickers

Browse Source 
- updated CSS to reflect live changes
This commit is contained in:
RossAscends
2023-04-12 05:31:10 +09:00
parent af114e5255
commit 401535d539
4 changed files with 231 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/index.html
View File

@ -47,6 +47,7 @@
<script type="module" src="scripts/horde.js"></script>
<script type="module" src="scripts/poe.js"></script>
<script type="module" src="scripts/RossAscends-mods.js"></script>
<script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>
<title>Tavern.AI</title>
</head>
@ -1106,6 +1107,27 @@
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
</div>
<div id="color-picker-block" class="range-block">
<div class="range-block-title">
Main Text Color
</div>
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<div class="range-block-title">
Italics Text Color
</div>
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<div class="range-block-title">
FastUI BG Color
</div>
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<div class="range-block-title"></div>
Blur Tint Color
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
</div>
<hr>
<div id="power-user-options-block">
<h3>Power User Options</h3>

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

@ -1,6 +1,7 @@
import { saveSettingsDebounced, characters } from "../script.js";
import { delay } from "./utils.js";
export {
loadPowerUserSettings,
collapseNewlines,
@ -43,6 +44,11 @@ let power_user = {
sort_field: 'name',
sort_order: 'asc',
font_scale: 1,
main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
};
const storage_keys = {
@ -60,6 +66,11 @@ const storage_keys = {
chat_display: "TavernAI_chat_display",
sheld_width: "TavernAI_sheld_width",
font_scale: "TavernAI_font_scale",
main_text_color: "TavernAI_main_text_color",
italics_text_color: "TavernAI_italics_text_color",
fastui_bg_color: "TavernAI_fastui_bg_color",
blur_tint_color: "TavernAI_blur_tint_color",
};
const chat = document.getElementById('chat');
@ -116,6 +127,40 @@ function applySheldWidth() {
}
}
function applyThemeColor(type) {
const $MainTextColorPicker = document.getElementById('main-text-color-picker');
const $ItalicsTextColorPicker = document.getElementById('italics-color-picker');
const $FastUIBGColorPicker = document.getElementById('fastui-bg-color-picker');
const $BlurTintColorPicker = document.getElementById('blur-tint-color-picker');
if (type === 'main') {
$MainTextColorPicker.color = `${power_user.main_text_color}`;
document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color);
console.log($MainTextColorPicker.color);
return
}
if (type === 'italics') {
$ItalicsTextColorPicker.color = `${power_user.italics_text_color}`;
document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);
console.log($ItalicsTextColorPicker.color);
return
}
if (type === 'fastUIBG') {
$FastUIBGColorPicker.color = `${power_user.fastui_bg_color}`;
document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color);
console.log($FastUIBGColorPicker.color);
return
}
if (type === 'blurTint') {
$BlurTintColorPicker.color = `${power_user.blur_tint_color}`;
document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
console.log($BlurTintColorPicker.color);
return
}
}
async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
@ -137,6 +182,7 @@ switchUiMode();
applyChatDisplay();
applySheldWidth();
applyFontScale();
applyThemeColor();
// TODO delete in next release
function loadFromLocalStorage() {
@ -185,6 +231,12 @@ function loadPowerUserSettings(settings) {
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
$("#font_scale").val(power_user.font_scale);
$("#font_scale_counter").html(power_user.font_scale);
$("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_text_color);
$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
$("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
$(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
sortCharactersList();
}
@ -286,6 +338,30 @@ $(document).ready(() => {
applyFontScale();
});
$("#main-text-color-picker").on('change', (evt) => {
power_user.main_text_color = evt.detail.rgba;
applyThemeColor('main');
saveSettingsDebounced();
});
$("#italics-color-picker").on('change', (evt) => {
power_user.italics_text_color = evt.detail.rgba;
applyThemeColor('italics');
saveSettingsDebounced();
});
$("#fastui-bg-color-picker").on('change', (evt) => {
power_user.fastui_bg_color = evt.detail.rgba;
applyThemeColor('fastUIBG');
saveSettingsDebounced();
});
$("#blur-tint-color-picker").on('change', (evt) => {
power_user.blur_tint_color = evt.detail.rgba;
applyThemeColor('blurTint');
saveSettingsDebounced();
});
$("#play_message_sound").on('input', function () {
power_user.play_message_sound = !!$(this).prop('checked');
saveSettingsDebounced();

113
public/scripts/toolcool-color-picker.js Normal file
View File

File diff suppressed because one or more lines are too long

39
public/style.css
View File

@ -35,6 +35,13 @@
--greyCAIbg: rgb(36, 36, 37);
--ivory: rgb(220, 220, 210);
/*Default Theme, will be changed by ToolCool Color Picker*/
--SmartThemeBodyColor: rgb(220, 220, 210);
--SmartThemeEmColor: rgb(175, 175, 175);
--SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
--SmartThemeBlurTintColor: rgba(255, 255, 255, 0.5);
--sheldWidth: 800px;
/*base variable calculated in rems*/
--fontScale: 1;
@ -42,8 +49,6 @@
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
@ -70,7 +75,7 @@ body {
background-size: cover;
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
font-size: var(--mainFontSize);
color: var(--ivory);
color: var(--SmartThemeBodyColor);
}
::-webkit-scrollbar {
@ -94,7 +99,6 @@ body {
.mes_text li tt {
min-width: 80px;
display: inline-block;
color: var(--grey50) !important;
text-align: right;
}
@ -111,7 +115,7 @@ body {
.mes_text i,
.mes_text em {
color: var(--white60a);
color: var(--SmartThemeEmColor);
font-weight: 500;
}
@ -173,7 +177,7 @@ code {
border-bottom: 1px solid var(--black70a);
box-shadow: 0 2px 20px 0 var(--black70a);
backdrop-filter: blur(10px);
background-color: var(--black70a);
background-color: var(--SmartThemeBlurTintColor);
/* border-radius: 0 0 20px 20px; */
-webkit-backdrop-filter: blur(10px);
z-index: 3000;
@ -205,7 +209,7 @@ code {
border-left: 1px solid var(--grey30a);
border-right: 1px solid var(--grey30a);
backdrop-filter: blur(10px);
background-color: var(--black60a);
background-color: var(--SmartThemeBlurTintColor);
-webkit-backdrop-filter: blur(10px);
text-shadow: #000 0 0 3px;
scrollbar-width: thin;
@ -377,7 +381,7 @@ code {
padding: 20px 10px 0 10px;
margin-top: 0;
width: 100%;
color: var(--ivory, white);
color: var(--SmartThemeBodyColor);
}
.last_mes {
@ -558,7 +562,6 @@ select {
font-size: var(--mainFontSize);
}
#send_textarea {
/* font-size: 1rem;
line-height: 1.5rem;
@ -1888,8 +1891,6 @@ input[type="range"]::-webkit-slider-thumb {
#anchor_order {
margin-bottom: 15px;
color: var(--white70a);
background-color: var(--black50a);
}
#anchor_checkbox,
@ -2039,7 +2040,7 @@ input[type="range"]::-webkit-slider-thumb {
/* margin-top: 40px; */
box-shadow: 0px 0px 20px black;
padding: 10px;
background-color: var(--black50a);
background-color: var(--SmartThemeBlurTintColor);
border-radius: 20px;
overflow-y: auto;
border: 1px solid var(--grey30);
@ -2686,7 +2687,7 @@ a {
padding: 0;
margin-bottom: 5px;
backdrop-filter: blur(10px);
background-color: var(--black50a);
background-color: var(--SmartThemeBlurTintColor);
-webkit-backdrop-filter: blur(10px);
z-index: 3000;
border: 0;
@ -2942,7 +2943,7 @@ label[for="extensions_autoconnect"] {
.drawer-content {
background-color: var(--black50a);
background-color: var(--SmartThemeBlurTintColor);
color: white;
border-radius: 20px;
padding: 10px;
@ -3004,7 +3005,7 @@ label[for="extensions_autoconnect"] {
}
.wide50p {
width: 50%;
width: 50% !important;
}
@ -3106,7 +3107,7 @@ label[for="extensions_autoconnect"] {
.world_entry_thin_controls {
flex-direction: column;
}
.world_entry_form_control.world_entry_form_horizontal {
flex-direction: column;
align-items: flex-start;
@ -3268,7 +3269,7 @@ label[for="extensions_autoconnect"] {
body.bubblechat .mes {
padding: 10px;
border-radius: 20px;
background-color: var(--black30a);
background-color: var(--SmartThemeBlurTintColor);
margin-bottom: 5px;
border: 1px solid var(--white30a);
}
@ -3284,7 +3285,7 @@ body.no-blur * {
}
#send_form.no-blur-sendtextarea {
background-color: var(--black90a);
background-color: var(--SmartThemeFastUIBGColor);
}
#send_form.no-connection {
@ -3310,7 +3311,7 @@ body.no-blur #character_popup,
body.no-blur #world_popup,
body.no-blur #dialogue_popup,
body.no-blur #select_chat_popup {
background-color: var(--black90a) !important;
background-color: var(--SmartThemeFastUIBGColor) !important;
}
/*this part only only applies to iOS devices*/