mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
66f7d55f76 | ||
|
64b1485070 | ||
|
|
25759ebe0b | ||
|
|
c101368109 | ||
|
|
e4c3c552d7 | ||
|
|
8f531832e5 | ||
|
|
915de0b41a |
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable-no">
|
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
|
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
|
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
|
||||||
@@ -751,7 +751,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</h4>
|
</h4>
|
||||||
<select id="horde_model">
|
<select id="horde_model">
|
||||||
<option>-- Not connected to Horde --</option>
|
<option>-- Horde models not loaded --</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div id="online_status2">
|
<div id="online_status2">
|
||||||
@@ -1084,9 +1084,20 @@
|
|||||||
<div id="power-user-options-block">
|
<div id="power-user-options-block">
|
||||||
<h3>Power User Options</h3>
|
<h3>Power User Options</h3>
|
||||||
<div id="power-user-option-checkboxes">
|
<div id="power-user-option-checkboxes">
|
||||||
|
<label for="swipes-checkbox">
|
||||||
|
<input id="swipes-checkbox" type="checkbox" />
|
||||||
|
Swipes
|
||||||
|
</label>
|
||||||
|
|
||||||
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
|
<label for="play_message_sound" class="checkbox_label">
|
||||||
Auto-load Last Chat
|
<input id="play_message_sound" type="checkbox" />
|
||||||
|
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
|
||||||
|
<span>
|
||||||
|
Play a sound on new message
|
||||||
|
<a href="/notes/message_sound" class="notes-link" target="_blank">
|
||||||
|
<span class="note-link-span">?</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
|
<label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
|
||||||
@@ -1094,8 +1105,8 @@
|
|||||||
No Blur Effect
|
No Blur Effect
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label for="swipes-checkbox"><input id="swipes-checkbox" type="checkbox" />
|
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
|
||||||
Swipes
|
Auto-load Last Chat
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
30
public/notes/message_sound.html
Normal file
30
public/notes/message_sound.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Message Sound</title>
|
||||||
|
<link rel="stylesheet" href="/css/notes.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main">
|
||||||
|
<div id="content">
|
||||||
|
<h2>Message Sound</h2>
|
||||||
|
<p>To play your own custom sound on receiving a new message from bot, replace the following MP3 file in your TavernAI folder:</p>
|
||||||
|
<code>
|
||||||
|
public/sounds/message.mp3
|
||||||
|
</code>
|
||||||
|
<small>
|
||||||
|
Plays at 80% volume.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -41,6 +41,7 @@ import {
|
|||||||
import {
|
import {
|
||||||
collapseNewlines,
|
collapseNewlines,
|
||||||
loadPowerUserSettings,
|
loadPowerUserSettings,
|
||||||
|
playMessageSound,
|
||||||
power_user,
|
power_user,
|
||||||
} from "./scripts/power-user.js";
|
} from "./scripts/power-user.js";
|
||||||
|
|
||||||
@@ -71,6 +72,7 @@ import {
|
|||||||
loadHordeSettings,
|
loadHordeSettings,
|
||||||
generateHorde,
|
generateHorde,
|
||||||
checkHordeStatus,
|
checkHordeStatus,
|
||||||
|
getHordeModels,
|
||||||
adjustHordeGenerationParams,
|
adjustHordeGenerationParams,
|
||||||
} from "./scripts/horde.js";
|
} from "./scripts/horde.js";
|
||||||
|
|
||||||
@@ -1114,6 +1116,11 @@ async function Generate(type, automatic_trigger, force_name2) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isHordeGenerationNotAllowed()) {
|
||||||
|
is_send_press = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (selected_group && !is_group_generating) {
|
if (selected_group && !is_group_generating) {
|
||||||
generateGroupWrapper(false, type = type);
|
generateGroupWrapper(false, type = type);
|
||||||
return;
|
return;
|
||||||
@@ -1796,6 +1803,7 @@ async function Generate(type, automatic_trigger, force_name2) {
|
|||||||
//getMessage = getMessage.replace(/^\s+/g, '');
|
//getMessage = getMessage.replace(/^\s+/g, '');
|
||||||
if (getMessage.length > 0) {
|
if (getMessage.length > 0) {
|
||||||
({ type, getMessage } = saveReply(type, getMessage, this_mes_is_name));
|
({ type, getMessage } = saveReply(type, getMessage, this_mes_is_name));
|
||||||
|
playMessageSound();
|
||||||
generate_loop_counter = 0;
|
generate_loop_counter = 0;
|
||||||
} else {
|
} else {
|
||||||
++generate_loop_counter;
|
++generate_loop_counter;
|
||||||
@@ -2192,6 +2200,7 @@ function changeMainAPI() {
|
|||||||
if (main_api == "kobold" && horde_settings.use_horde) {
|
if (main_api == "kobold" && horde_settings.use_horde) {
|
||||||
is_get_status = true;
|
is_get_status = true;
|
||||||
getStatus();
|
getStatus();
|
||||||
|
getHordeModels();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2276,27 +2285,6 @@ async function getSettings(type) {
|
|||||||
changeMainAPI();
|
changeMainAPI();
|
||||||
}
|
}
|
||||||
|
|
||||||
novelai_setting_names = data.novelai_setting_names;
|
|
||||||
novelai_settings = data.novelai_settings;
|
|
||||||
novelai_settings.forEach(function (item, i, arr) {
|
|
||||||
novelai_settings[i] = JSON.parse(item);
|
|
||||||
});
|
|
||||||
let arr_holder = {};
|
|
||||||
|
|
||||||
$("#settings_perset_novel").empty();
|
|
||||||
|
|
||||||
novelai_setting_names.forEach(function (item, i, arr) {
|
|
||||||
arr_holder[item] = i;
|
|
||||||
$("#settings_perset_novel").append(`<option value=${i}>${item}</option>`);
|
|
||||||
});
|
|
||||||
novelai_setting_names = {};
|
|
||||||
novelai_setting_names = arr_holder;
|
|
||||||
|
|
||||||
nai_settings.preset_settings_novel = settings.preset_settings_novel;
|
|
||||||
$(
|
|
||||||
`#settings_perset_novel option[value=${novelai_setting_names[nai_settings.preset_settings_novel]}]`
|
|
||||||
).attr("selected", "true");
|
|
||||||
|
|
||||||
//Load KoboldAI settings
|
//Load KoboldAI settings
|
||||||
koboldai_setting_names = data.koboldai_setting_names;
|
koboldai_setting_names = data.koboldai_setting_names;
|
||||||
koboldai_settings = data.koboldai_settings;
|
koboldai_settings = data.koboldai_settings;
|
||||||
@@ -2304,7 +2292,7 @@ async function getSettings(type) {
|
|||||||
koboldai_settings[i] = JSON.parse(item);
|
koboldai_settings[i] = JSON.parse(item);
|
||||||
});
|
});
|
||||||
|
|
||||||
arr_holder = {};
|
let arr_holder = {};
|
||||||
|
|
||||||
$("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on refresh
|
$("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on refresh
|
||||||
$("#settings_perset").append(
|
$("#settings_perset").append(
|
||||||
@@ -2320,6 +2308,39 @@ async function getSettings(type) {
|
|||||||
koboldai_setting_names = arr_holder;
|
koboldai_setting_names = arr_holder;
|
||||||
preset_settings = settings.preset_settings;
|
preset_settings = settings.preset_settings;
|
||||||
|
|
||||||
|
if (preset_settings == "gui") {
|
||||||
|
selectKoboldGuiPreset();
|
||||||
|
} else {
|
||||||
|
if (typeof koboldai_setting_names[preset_settings] !== "undefined") {
|
||||||
|
$(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`)
|
||||||
|
.attr("selected", "true");
|
||||||
|
} else {
|
||||||
|
preset_settings = "gui";
|
||||||
|
selectKoboldGuiPreset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
novelai_setting_names = data.novelai_setting_names;
|
||||||
|
novelai_settings = data.novelai_settings;
|
||||||
|
novelai_settings.forEach(function (item, i, arr) {
|
||||||
|
novelai_settings[i] = JSON.parse(item);
|
||||||
|
});
|
||||||
|
arr_holder = {};
|
||||||
|
|
||||||
|
$("#settings_perset_novel").empty();
|
||||||
|
|
||||||
|
novelai_setting_names.forEach(function (item, i, arr) {
|
||||||
|
arr_holder[item] = i;
|
||||||
|
$("#settings_perset_novel").append(`<option value=${i}>${item}</option>`);
|
||||||
|
});
|
||||||
|
novelai_setting_names = {};
|
||||||
|
novelai_setting_names = arr_holder;
|
||||||
|
|
||||||
|
nai_settings.preset_settings_novel = settings.preset_settings_novel;
|
||||||
|
$(
|
||||||
|
`#settings_perset_novel option[value=${novelai_setting_names[nai_settings.preset_settings_novel]}]`
|
||||||
|
).attr("selected", "true");
|
||||||
|
|
||||||
//Load AI model config settings (temp, context length, anchors, and anchor order)
|
//Load AI model config settings (temp, context length, anchors, and anchor order)
|
||||||
|
|
||||||
amount_gen = settings.amount_gen;
|
amount_gen = settings.amount_gen;
|
||||||
@@ -2376,21 +2397,6 @@ async function getSettings(type) {
|
|||||||
|
|
||||||
//Enable GUI deference settings if GUI is selected for Kobold
|
//Enable GUI deference settings if GUI is selected for Kobold
|
||||||
if (main_api === "kobold") {
|
if (main_api === "kobold") {
|
||||||
if (preset_settings == "gui") {
|
|
||||||
$("#settings_perset option[value=gui]")
|
|
||||||
.attr("selected", "true")
|
|
||||||
.trigger("change");
|
|
||||||
} else {
|
|
||||||
if (typeof koboldai_setting_names[preset_settings] !== "undefined") {
|
|
||||||
$(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`)
|
|
||||||
.attr("selected", "true");
|
|
||||||
} else {
|
|
||||||
preset_settings = "gui";
|
|
||||||
$("#settings_perset option[value=gui]")
|
|
||||||
.attr("selected", "true")
|
|
||||||
.trigger("change");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//Load User's Name and Avatar
|
//Load User's Name and Avatar
|
||||||
@@ -2448,6 +2454,12 @@ async function getSettings(type) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectKoboldGuiPreset() {
|
||||||
|
$("#settings_perset option[value=gui]")
|
||||||
|
.attr("selected", "true")
|
||||||
|
.trigger("change");
|
||||||
|
}
|
||||||
|
|
||||||
async function saveSettings(type) {
|
async function saveSettings(type) {
|
||||||
//console.log('Entering settings with name1 = '+name1);
|
//console.log('Entering settings with name1 = '+name1);
|
||||||
jQuery.ajax({
|
jQuery.ajax({
|
||||||
@@ -3060,6 +3072,15 @@ function sortCharactersList(field, order) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isHordeGenerationNotAllowed() {
|
||||||
|
if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
|
||||||
|
callPopup('GUI Settings preset is not supported for Horde. Please select another preset.', 'text');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
window["TavernAI"].getContext = function () {
|
window["TavernAI"].getContext = function () {
|
||||||
return {
|
return {
|
||||||
chat: chat,
|
chat: chat,
|
||||||
@@ -3109,6 +3130,10 @@ $(document).ready(function () {
|
|||||||
closeMessageEditor();
|
closeMessageEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isHordeGenerationNotAllowed()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const swipe_duration = 120;
|
const swipe_duration = 120;
|
||||||
const swipe_range = 700;
|
const swipe_range = 700;
|
||||||
//console.log(swipe_range);
|
//console.log(swipe_range);
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ export {
|
|||||||
checkHordeStatus,
|
checkHordeStatus,
|
||||||
loadHordeSettings,
|
loadHordeSettings,
|
||||||
adjustHordeGenerationParams,
|
adjustHordeGenerationParams,
|
||||||
|
getHordeModels,
|
||||||
}
|
}
|
||||||
|
|
||||||
let models = [];
|
let models = [];
|
||||||
@@ -154,6 +155,16 @@ async function getHordeModels() {
|
|||||||
option.selected = horde_settings.model === model.name;
|
option.selected = horde_settings.model === model.name;
|
||||||
$('#horde_model').append(option);
|
$('#horde_model').append(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if previously selected is no longer available
|
||||||
|
if (horde_settings.model && !models.find(m => m.name == horde_settings.model)) {
|
||||||
|
horde_settings.model = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if no models preselected - select a first one in dropdown
|
||||||
|
if (!horde_settings.model) {
|
||||||
|
horde_settings.model = $('#horde_model').find(":selected").val();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadHordeSettings(settings) {
|
function loadHordeSettings(settings) {
|
||||||
@@ -182,9 +193,6 @@ $(document).ready(function () {
|
|||||||
// Trigger status check
|
// Trigger status check
|
||||||
changeMainAPI();
|
changeMainAPI();
|
||||||
saveSettingsDebounced();
|
saveSettingsDebounced();
|
||||||
if (main_api === 'kobold' && horde_settings.use_horde) {
|
|
||||||
await getHordeModels();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#horde_model").on("change", function () {
|
$("#horde_model").on("change", function () {
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { saveSettingsDebounced } from "../script.js";
|
|||||||
export {
|
export {
|
||||||
loadPowerUserSettings,
|
loadPowerUserSettings,
|
||||||
collapseNewlines,
|
collapseNewlines,
|
||||||
|
playMessageSound,
|
||||||
power_user,
|
power_user,
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -35,6 +36,7 @@ let power_user = {
|
|||||||
avatar_style: avatar_styles.ROUND,
|
avatar_style: avatar_styles.ROUND,
|
||||||
chat_display: chat_styles.DEFAULT,
|
chat_display: chat_styles.DEFAULT,
|
||||||
sheld_width: sheld_width.DEFAULT,
|
sheld_width: sheld_width.DEFAULT,
|
||||||
|
play_message_sound: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const storage_keys = {
|
const storage_keys = {
|
||||||
@@ -53,6 +55,18 @@ const storage_keys = {
|
|||||||
sheld_width: "TavernAI_sheld_width"
|
sheld_width: "TavernAI_sheld_width"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function playMessageSound() {
|
||||||
|
if (!power_user.play_message_sound) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const audio = document.getElementById('audio_message_sound');
|
||||||
|
audio.volume = 0.8;
|
||||||
|
audio.pause();
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
function collapseNewlines(x) {
|
function collapseNewlines(x) {
|
||||||
return x.replaceAll(/\n+/g, "\n");
|
return x.replaceAll(/\n+/g, "\n");
|
||||||
}
|
}
|
||||||
@@ -129,6 +143,7 @@ function loadPowerUserSettings(settings) {
|
|||||||
$("#custom_chat_separator").val(power_user.custom_chat_separator);
|
$("#custom_chat_separator").val(power_user.custom_chat_separator);
|
||||||
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
|
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
|
||||||
$("#multigen").prop("checked", power_user.multigen);
|
$("#multigen").prop("checked", power_user.multigen);
|
||||||
|
$("#play_message_sound").prop("checked", power_user.play_message_sound);
|
||||||
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
|
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
|
||||||
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
|
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
|
||||||
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
|
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
|
||||||
@@ -199,10 +214,16 @@ $(document).ready(() => {
|
|||||||
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
|
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
|
||||||
applyChatDisplay();
|
applyChatDisplay();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(`input[name="sheld_width"]`).on('input', function (e) {
|
$(`input[name="sheld_width"]`).on('input', function (e) {
|
||||||
power_user.sheld_width = Number(e.target.value);
|
power_user.sheld_width = Number(e.target.value);
|
||||||
localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
|
localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
|
||||||
console.log("sheld width changing now");
|
console.log("sheld width changing now");
|
||||||
applySheldWidth();
|
applySheldWidth();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("#play_message_sound").on('input', function () {
|
||||||
|
power_user.play_message_sound = !!$(this).prop('checked');
|
||||||
|
saveSettingsDebounced();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
BIN
public/sounds/message.mp3
Normal file
BIN
public/sounds/message.mp3
Normal file
Binary file not shown.
220
public/style.css
220
public/style.css
@@ -58,7 +58,7 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
/*fallback for JS load*/
|
/*fallback for JS load*/
|
||||||
height: 100svh;
|
height: 100svh;
|
||||||
/*defaults as 100%, then reassigned via JS as pixels*/
|
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
|
||||||
height: var(--doc-height);
|
height: var(--doc-height);
|
||||||
background-color: var(--greyCAIbg);
|
background-color: var(--greyCAIbg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@@ -1018,7 +1018,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-settings-block h4, #user-settings-block h3 {
|
#user-settings-block h4,
|
||||||
|
#user-settings-block h3 {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3149,149 +3150,9 @@ label[for="extensions_autoconnect"] {
|
|||||||
|
|
||||||
/* ---------- @media queries must always go at the bottom ------------*/
|
/* ---------- @media queries must always go at the bottom ------------*/
|
||||||
|
|
||||||
@media screen and (max-width: 450px) {
|
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
|
||||||
/*styles for mobile phones (tested on iPhone 13 Pro)*/
|
|
||||||
|
|
||||||
body {
|
@media (max-width: 1000px) {
|
||||||
font-size: 16px;
|
|
||||||
position: fixed;
|
|
||||||
touch-action: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-content {
|
|
||||||
min-width: unset;
|
|
||||||
width: 100svw;
|
|
||||||
max-height: calc(100svh - 45px);
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 5px;
|
|
||||||
border: 1px solid var(--grey30);
|
|
||||||
}
|
|
||||||
|
|
||||||
#select_chat_popup {
|
|
||||||
align-items: start;
|
|
||||||
height: min-content;
|
|
||||||
align-content: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-settings-holder {
|
|
||||||
width: 100svw;
|
|
||||||
position: fixed;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#bg1,
|
|
||||||
#bg2 {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sheld,
|
|
||||||
#character_popup,
|
|
||||||
#world_popup {
|
|
||||||
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
|
|
||||||
height: calc(100svh - 45px);
|
|
||||||
width: 100svw;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-left: 0px;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#character_popup,
|
|
||||||
#world_popup,
|
|
||||||
#send_form {
|
|
||||||
border: 1px solid var(--grey30);
|
|
||||||
}
|
|
||||||
|
|
||||||
#chat {
|
|
||||||
border-left: 1px solid var(--grey30);
|
|
||||||
border-right: 1px solid var(--grey30);
|
|
||||||
border-bottom: 1px solid var(--grey30);
|
|
||||||
align-items: start;
|
|
||||||
align-content: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sheld,
|
|
||||||
#character_popup {
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mes-text {
|
|
||||||
padding-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right-nav-panel,
|
|
||||||
#left-nav-panel {
|
|
||||||
height: calc(100svh - 45px);
|
|
||||||
min-width: 0px;
|
|
||||||
width: 100svw;
|
|
||||||
max-width: 100svw;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-left: 1px solid var(--grey30);
|
|
||||||
border-right: 1px solid var(--grey30);
|
|
||||||
border-bottom: 1px solid var(--grey30);
|
|
||||||
border-radius: 0 0 20px 20px;
|
|
||||||
top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right-nav-panel h4 {
|
|
||||||
margin: 5px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#form_create {
|
|
||||||
grid-template-rows:
|
|
||||||
[avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#result_info {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar_div {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#character_popup {
|
|
||||||
width: calc(100svw - 5px);
|
|
||||||
border-radius: 0 0 0 20px;
|
|
||||||
margin-top: -35px;
|
|
||||||
height: calc(100svh - 30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#send_textarea {
|
|
||||||
/*larger input bar for mobile screens, easier to tap*/
|
|
||||||
font-size: 1.25rem;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
min-height: calc(2rem + 0.75rem + 2px);
|
|
||||||
max-height: 200px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
height: 40px;
|
|
||||||
resize: vertical;
|
|
||||||
display: block;
|
|
||||||
background-color: rgba(255, 0, 0, 0);
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 6px 0 6px 0;
|
|
||||||
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
text-shadow: #000 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#rm_ch_create_block textarea {
|
|
||||||
/*without this the text areas display far too large*/
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#talkativeness_hint span {
|
|
||||||
min-width: 33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*for debug purposes*/
|
|
||||||
/* div {border: 1px solid purple;} */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.mes img.img_extra {
|
.mes img.img_extra {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
@@ -3305,7 +3166,7 @@ label[for="extensions_autoconnect"] {
|
|||||||
|
|
||||||
.drawer-content {
|
.drawer-content {
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
width: 100svw;
|
width: 100%;
|
||||||
max-height: calc(100svh - 45px);
|
max-height: calc(100svh - 45px);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -3333,11 +3194,9 @@ label[for="extensions_autoconnect"] {
|
|||||||
#sheld,
|
#sheld,
|
||||||
#character_popup,
|
#character_popup,
|
||||||
#world_popup {
|
#world_popup {
|
||||||
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
|
|
||||||
height: calc(100svh - 45px);
|
height: calc(100svh - 45px);
|
||||||
width: 100svw;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-left: 0px;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3367,9 +3226,9 @@ label[for="extensions_autoconnect"] {
|
|||||||
#right-nav-panel,
|
#right-nav-panel,
|
||||||
#left-nav-panel {
|
#left-nav-panel {
|
||||||
height: calc(100svh - 45px);
|
height: calc(100svh - 45px);
|
||||||
min-width: 0px;
|
min-width: 100%;
|
||||||
width: 100svw;
|
width: 100%;
|
||||||
max-width: 100svw;
|
max-width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-left: 1px solid var(--grey30);
|
border-left: 1px solid var(--grey30);
|
||||||
border-right: 1px solid var(--grey30);
|
border-right: 1px solid var(--grey30);
|
||||||
@@ -3396,10 +3255,10 @@ label[for="extensions_autoconnect"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#character_popup {
|
#character_popup {
|
||||||
width: calc(100svw - 5px);
|
width: 100%;
|
||||||
border-radius: 0 0 0 20px;
|
border-radius: 0 0 20px 20px;
|
||||||
margin-top: -35px;
|
margin-top: 0px;
|
||||||
height: calc(100svh - 30px);
|
height: calc(100% - 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -3485,3 +3344,54 @@ body.no-blur #dialogue_popup,
|
|||||||
body.no-blur #select_chat_popup {
|
body.no-blur #select_chat_popup {
|
||||||
background-color: var(--black90a) !important;
|
background-color: var(--black90a) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*this part only only applies to iOS devices*/
|
||||||
|
@supports (-webkit-touch-callout: none) {
|
||||||
|
body {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-bar {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sheld {
|
||||||
|
margin: unset;
|
||||||
|
padding: unset;
|
||||||
|
width: unset;
|
||||||
|
height: unset;
|
||||||
|
min-width: unset;
|
||||||
|
max-width: unset;
|
||||||
|
min-height: unset;
|
||||||
|
max-height: unset;
|
||||||
|
|
||||||
|
width: 100svw !important;
|
||||||
|
height: calc(100svh - 40px) !important;
|
||||||
|
padding-right: max(env(safe-area-inset-right), 5px) !important;
|
||||||
|
padding-left: max(env(safe-area-inset-left), 5px) !important;
|
||||||
|
padding-bottom: max(env(safe-area-inset-bottom), 15px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#character_popup,
|
||||||
|
#world_popup,
|
||||||
|
#left-nav-panel,
|
||||||
|
#right-nav-panel,
|
||||||
|
.drawer-content {
|
||||||
|
width: unset;
|
||||||
|
height: unset;
|
||||||
|
min-width: unset;
|
||||||
|
max-width: unset;
|
||||||
|
min-height: unset;
|
||||||
|
max-height: unset;
|
||||||
|
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
max-height: calc(100svh - env(safe-area-inset-bottom));
|
||||||
|
max-width: min(calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left)), calc(100% - 5px));
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user