mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
- added toggle for sheld width
- both nav panels conform to sheld width on change - left nav now has a lock - sheldWidth defaults to 800 - narrowed top_bar to match sheldWidth - nav panels fill the vertical space where top_bar used to be - removed bottom gap on wide screens for all large panels and popups - reverted menu_button styles - FastUI now changes send_form styling dynamically - bg selector drawer width is now sheld-100px - bg thumbnails display ay 160px width
This commit is contained in:
RossAscends
@ -175,7 +175,6 @@
|
||||
<div class="online_status_text4">Not connected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="openai_api" style="display: none;position: relative;">
|
||||
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
|
||||
<h4>API key </h4>
|
||||
@ -197,7 +196,6 @@
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="poe_api">
|
||||
<div class="inline-drawer">
|
||||
<div class="inline-drawer-toggle inline-drawer-header">
|
||||
@ -297,6 +295,21 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sheld-width" class="range-block" title="Adjust width of chat display on PCs and other wide screens">
|
||||
<div class="range-block-title">
|
||||
<h4>Chat Width (PC)</h4>
|
||||
</div>
|
||||
<div class="range-block-range">
|
||||
<label>
|
||||
<input name="sheld_width" type="radio" value="0" />
|
||||
800px
|
||||
</label>
|
||||
<label>
|
||||
<input name="sheld_width" type="radio" value="1" />
|
||||
1000px
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="power-user-options-block">
|
||||
<h3>Power User Options</h3>
|
||||
@ -321,9 +334,16 @@
|
||||
|
||||
<div id="ai-config-button" class="drawer" style="z-index:3002;">
|
||||
<div class="drawer-toggle drawer-header">
|
||||
<div class="drawer-icon icon-sliders closedIcon" title="AI Response Configuration"></div>
|
||||
<div id="leftNavDrawerIcon" class="drawer-icon icon-sliders closedIcon" title="AI Response Configuration"></div>
|
||||
</div>
|
||||
<div id="left-nav-panel" class="drawer-content fillLeft closedDrawer widthFreeExpand">
|
||||
<div class="right_menu_button" id="lm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
|
||||
<input type="checkbox" id="lm_button_panel_pin">
|
||||
<label for="lm_button_panel_pin">
|
||||
<img class="unchecked svg_icon" alt="" src="img/lock-open-solid.svg" />
|
||||
<img class="checked svg_icon" alt="" src="img/lock-solid.svg" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="drawer-content fillLeft closedDrawer widthFreeExpand">
|
||||
<div class="flex-container">
|
||||
<div id="respective-presets-block" class="width100p">
|
||||
<div id="kobold_api-presets">
|
||||
|
||||
@ -24,9 +24,11 @@ import { oai_settings } from "./openai.js";
|
||||
import { poe_settings } from "./poe.js";
|
||||
|
||||
var NavToggle = document.getElementById("nav-toggle");
|
||||
var PanelPin = document.getElementById("rm_button_panel_pin");
|
||||
var RPanelPin = document.getElementById("rm_button_panel_pin");
|
||||
var LPanelPin = document.getElementById("lm_button_panel_pin");
|
||||
var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
|
||||
var RightNavPanel = document.getElementById("right-nav-panel");
|
||||
var LeftNavPanel = document.getElementById("left-nav-panel")
|
||||
var AdvancedCharDefsPopup = document.getElementById("character_popup");
|
||||
var ConfirmationPopup = document.getElementById("dialogue_popup");
|
||||
var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox");
|
||||
@ -207,6 +209,7 @@ function RA_checkOnlineStatus() {
|
||||
if (online_status !== undefined && online_status !== "no_connection") {
|
||||
$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
|
||||
const formColor = power_user.fast_ui_mode ? "var(--black90a)" : "var(--black60a)";
|
||||
/* console.log("RA-AC -- connected, coloring input as " + formColor); */
|
||||
$("#send_form").css("background-color", formColor); //on connect, form BG changes to transprent black
|
||||
$("#API-status-top").removeClass("redOverlayGlow");
|
||||
connection_made = true;
|
||||
@ -294,9 +297,9 @@ $("document").ready(function () {
|
||||
$("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
|
||||
|
||||
//toggle pin class when lock toggle clicked
|
||||
$(PanelPin).on("click", function () {
|
||||
SaveLocal("NavLockOn", $(PanelPin).prop("checked"));
|
||||
if ($(PanelPin).prop("checked") == true) {
|
||||
$(RPanelPin).on("click", function () {
|
||||
SaveLocal("NavLockOn", $(RPanelPin).prop("checked"));
|
||||
if ($(RPanelPin).prop("checked") == true) {
|
||||
console.log('adding pin class to right nav');
|
||||
$(RightNavPanel).addClass('pinnedOpen');
|
||||
} else {
|
||||
@ -310,34 +313,82 @@ $("document").ready(function () {
|
||||
}
|
||||
}
|
||||
});
|
||||
$(LPanelPin).on("click", function () {
|
||||
SaveLocal("LNavLockOn", $(LPanelPin).prop("checked"));
|
||||
if ($(LPanelPin).prop("checked") == true) {
|
||||
console.log('adding pin class to Left nav');
|
||||
$(LeftNavPanel).addClass('pinnedOpen');
|
||||
} else {
|
||||
console.log('removing pin class from Left nav');
|
||||
$(LeftNavPanel).removeClass('pinnedOpen');
|
||||
|
||||
// read the state of Nav Lock and apply to rightnav classlist
|
||||
$(PanelPin).prop('checked', LoadLocalBool("NavLockOn"));
|
||||
if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
|
||||
$(LeftNavPanel).slideToggle(200, "swing");
|
||||
$(leftNavDrawerIcon).toggleClass('openIcon closedIcon');
|
||||
$(LeftNavPanel).toggleClass('openDrawer closedDrawer');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// read the state of right Nav Lock and apply to rightnav classlist
|
||||
$(RPanelPin).prop('checked', LoadLocalBool("NavLockOn"));
|
||||
if (LoadLocalBool("NavLockOn") == true) {
|
||||
//console.log('setting pin class via local var');
|
||||
$(RightNavPanel).addClass('pinnedOpen');
|
||||
}
|
||||
if ($(PanelPin).prop('checked' == true)) {
|
||||
if ($(RPanelPin).prop('checked' == true)) {
|
||||
console.log('setting pin class via checkbox state');
|
||||
$(RightNavPanel).addClass('pinnedOpen');
|
||||
}
|
||||
// read the state of left Nav Lock and apply to leftnav classlist
|
||||
$(LPanelPin).prop('checked', LoadLocalBool("LNavLockOn"));
|
||||
if (LoadLocalBool("LNavLockOn") == true) {
|
||||
//console.log('setting pin class via local var');
|
||||
$(LeftNavPanel).addClass('pinnedOpen');
|
||||
}
|
||||
if ($(LPanelPin).prop('checked' == true)) {
|
||||
console.log('setting pin class via checkbox state');
|
||||
$(LeftNavPanel).addClass('pinnedOpen');
|
||||
}
|
||||
|
||||
//save state of nav being open or closed
|
||||
//save state of Right nav being open or closed
|
||||
$("#rightNavDrawerIcon").on("click", function () {
|
||||
if (!$("#rightNavDrawerIcon").hasClass('openIcon')) {
|
||||
SaveLocal('NavOpened', 'true');
|
||||
} else { SaveLocal('NavOpened', 'false'); }
|
||||
});
|
||||
|
||||
//save state of Left nav being open or closed
|
||||
$("#leftNavDrawerIcon").on("click", function () {
|
||||
if (!$("#leftNavDrawerIcon").hasClass('openIcon')) {
|
||||
SaveLocal('LNavOpened', 'true');
|
||||
} else { SaveLocal('LNavOpened', 'false'); }
|
||||
});
|
||||
|
||||
//auto-open R nav if locked and previously open
|
||||
|
||||
if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) {
|
||||
console.log("RA -- clicking right nav to open");
|
||||
$("#rightNavDrawerIcon").click();
|
||||
} else {
|
||||
console.log('didnt see reason to open nav on load: ' +
|
||||
console.log('didnt see reason to open right nav on load: ' +
|
||||
LoadLocalBool("NavLockOn")
|
||||
+ ' nav open pref' +
|
||||
LoadLocalBool("NavOpened" == true));
|
||||
}
|
||||
|
||||
//auto-open L nav if locked and previously open
|
||||
|
||||
if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) {
|
||||
console.log("RA -- clicking left nav to open");
|
||||
$("#leftNavDrawerIcon").click();
|
||||
} else {
|
||||
console.log('didnt see reason to open left nav on load: ' +
|
||||
LoadLocalBool("LNavLockOn")
|
||||
+ ' L-nav open pref' +
|
||||
LoadLocalBool("LNavOpened" == true));
|
||||
}
|
||||
|
||||
//save AutoConnect and AutoLoadChat prefs
|
||||
$(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).prop("checked")); });
|
||||
$(AutoLoadChatCheckbox).on("change", function () { SaveLocal("AutoLoadChatEnabled", $(AutoLoadChatCheckbox).prop("checked")); });
|
||||
|
||||
@ -16,6 +16,11 @@ const chat_styles = {
|
||||
BUBBLES: 1,
|
||||
}
|
||||
|
||||
const sheld_width = {
|
||||
DEFAULT: 0,
|
||||
w1000px: 1,
|
||||
}
|
||||
|
||||
let power_user = {
|
||||
collapse_newlines: false,
|
||||
force_pygmalion_formatting: false,
|
||||
@ -29,6 +34,7 @@ let power_user = {
|
||||
fast_ui_mode: true,
|
||||
avatar_style: avatar_styles.ROUND,
|
||||
chat_display: chat_styles.DEFAULT,
|
||||
sheld_width: sheld_width.DEFAULT,
|
||||
};
|
||||
|
||||
const storage_keys = {
|
||||
@ -43,7 +49,8 @@ const storage_keys = {
|
||||
fast_ui_mode: "TavernAI_fast_ui_mode",
|
||||
multigen: "TavernAI_multigen",
|
||||
avatar_style: "TavernAI_avatar_style",
|
||||
chat_display: "TavernAI_chat_display"
|
||||
chat_display: "TavernAI_chat_display",
|
||||
sheld_width: "TavernAI_sheld_width"
|
||||
};
|
||||
|
||||
function collapseNewlines(x) {
|
||||
@ -54,6 +61,7 @@ function switchUiMode() {
|
||||
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
|
||||
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
|
||||
$("body").toggleClass("no-blur", power_user.fast_ui_mode);
|
||||
$("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode);
|
||||
}
|
||||
|
||||
function applyAvatarStyle() {
|
||||
@ -66,9 +74,21 @@ function applyChatDisplay() {
|
||||
$("body").toggleClass("bubblechat", power_user.chat_display === chat_styles.BUBBLES);
|
||||
}
|
||||
|
||||
function applySheldWidth() {
|
||||
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? chat_styles.DEFAULT);
|
||||
$("body").toggleClass("w1000px", power_user.sheld_width === sheld_width.w1000px);
|
||||
let r = document.documentElement;
|
||||
if (power_user.sheld_width === 1) {
|
||||
r.style.setProperty('--sheldWidth', '1000px');
|
||||
} else {
|
||||
r.style.setProperty('--sheldWidth', '800px');
|
||||
}
|
||||
}
|
||||
|
||||
applyAvatarStyle();
|
||||
switchUiMode();
|
||||
applyChatDisplay();
|
||||
applySheldWidth();
|
||||
|
||||
// TODO delete in next release
|
||||
function loadFromLocalStorage() {
|
||||
@ -97,6 +117,7 @@ function loadPowerUserSettings(settings) {
|
||||
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
|
||||
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
|
||||
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
|
||||
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
|
||||
|
||||
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
|
||||
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
|
||||
@ -110,6 +131,7 @@ function loadPowerUserSettings(settings) {
|
||||
$("#multigen").prop("checked", power_user.multigen);
|
||||
$(`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="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
@ -177,4 +199,10 @@ $(document).ready(() => {
|
||||
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
|
||||
applyChatDisplay();
|
||||
});
|
||||
$(`input[name="sheld_width"]`).on('input', function (e) {
|
||||
power_user.sheld_width = Number(e.target.value);
|
||||
localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
|
||||
console.log("sheld width changing now");
|
||||
applySheldWidth();
|
||||
});
|
||||
});
|
||||
113
public/style.css
113
public/style.css
@ -33,9 +33,11 @@
|
||||
--greyCAIbg: rgb(36, 36, 37);
|
||||
--ivory: rgb(220, 220, 210);
|
||||
|
||||
--sheldWidth: 1000px;
|
||||
--sheldWidth: 800px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -154,7 +156,10 @@ code {
|
||||
/*TOPPER margin*/
|
||||
|
||||
#top-bar {
|
||||
width: 100vw;
|
||||
width: var(--sheldWidth);
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
@ -163,6 +168,7 @@ code {
|
||||
box-shadow: 0 2px 20px 0 var(--black70a);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: var(--black70a);
|
||||
/* border-radius: 0 0 20px 20px; */
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
z-index: 3000;
|
||||
}
|
||||
@ -170,20 +176,20 @@ code {
|
||||
#sheld {
|
||||
display: grid;
|
||||
grid-template-rows: auto min-content;
|
||||
height: calc(100svh - 40px);
|
||||
height: calc(100svh - 42px);
|
||||
overflow-x: hidden;
|
||||
max-width: var(--sheldWidth);
|
||||
max-width: 800px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 35px;
|
||||
top: 41px;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
|
||||
}
|
||||
|
||||
#chat {
|
||||
margin-top: 5px;
|
||||
/* margin-top: 5px; */
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 0;
|
||||
overflow-y: scroll;
|
||||
@ -205,7 +211,7 @@ code {
|
||||
#form_sheld {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
margin: 1px auto 10px auto;
|
||||
margin: 1px auto 0 auto;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@ -420,7 +426,8 @@ code {
|
||||
}
|
||||
|
||||
#avatars-style .range-block-range,
|
||||
#chat-display .range-block-range {
|
||||
#chat-display .range-block-range,
|
||||
#sheld-width .range-block-range {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -651,27 +658,33 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
|
||||
#rm_button_panel_pin {
|
||||
#rm_button_panel_pin,
|
||||
#lm_button_panel_pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rm_button_panel_pin:checked+label {
|
||||
#rm_button_panel_pin:checked+label,
|
||||
#lm_button_panel_pin:checked+label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#rm_button_panel_pin:checked+label .checked {
|
||||
#rm_button_panel_pin:checked+label .checked,
|
||||
#lm_button_panel_pin:checked+label .checked {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#rm_button_panel_pin:checked+label .unchecked {
|
||||
#rm_button_panel_pin:checked+label .unchecked,
|
||||
#lm_button_panel_pin:checked+label .unchecked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rm_button_panel_pin:not(:checked)+label .checked {
|
||||
#rm_button_panel_pin:not(:checked)+label .checked,
|
||||
#lm_button_panel_pin:not(:checked)+label .checked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rm_button_panel_pin:not(:checked)+label .unchecked {
|
||||
#rm_button_panel_pin:not(:checked)+label .unchecked,
|
||||
#lm_button_panel_pin:not(:checked)+label .unchecked {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -787,10 +800,6 @@ img[src*="user-slash-solid.svg"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#api_button,
|
||||
#api_button_novel,
|
||||
#api_button_textgenerationwebui {}
|
||||
|
||||
#textgenerationwebui_api pre {
|
||||
display: inline;
|
||||
}
|
||||
@ -922,9 +931,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
justify-content: center;
|
||||
width: calc(var(--sheldWidth) - 100px);
|
||||
max-width: 100vw;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bg_example {
|
||||
@ -1030,9 +1039,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#advanced_div {
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
#rm_characters_block .form_create_bottom_buttons_block {
|
||||
justify-content: space-evenly !important;
|
||||
@ -1189,12 +1195,12 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
||||
background-color: var(--black50a);
|
||||
border: 1px solid var(--white30a);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
width: min-content;
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
transition: 0.3s;
|
||||
/* font-size: 15px; */
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.menu_button:hover {
|
||||
@ -1335,7 +1341,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(50px);
|
||||
-webkit-backdrop-filter: blur(50px);
|
||||
max-width: 800px;
|
||||
max-width: var(--sheldWidth);
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
@ -1581,7 +1587,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
|
||||
}
|
||||
|
||||
/* the checkbox starts with a size 0 background of a checkmark */
|
||||
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
|
||||
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin)::after {
|
||||
content: '';
|
||||
color: var(--white100);
|
||||
position: absolute;
|
||||
@ -1602,15 +1608,13 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
|
||||
}
|
||||
|
||||
/* when the checkbox is checked, the background image is grown to normal size to fill the background of the 'checkbox'*/
|
||||
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after {
|
||||
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):checked::after {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/*---------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
#title_api {}
|
||||
|
||||
.option_select_right_menu {
|
||||
width: 284px;
|
||||
margin-bottom: 35px;
|
||||
@ -1924,8 +1928,8 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
grid-template-rows: 50px 100px 100px 100px auto;
|
||||
grid-gap: 10px;
|
||||
max-width: 800px;
|
||||
height: calc(100vh - 50px);
|
||||
max-width: var(--sheldWidth);
|
||||
height: calc(100vh - 40px);
|
||||
position: absolute;
|
||||
z-index: 3002;
|
||||
margin-left: auto;
|
||||
@ -2019,9 +2023,9 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
#select_chat_popup {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 800px;
|
||||
max-width: var(--sheldWidth);
|
||||
height: min-content;
|
||||
max-height: calc(100vh - 55px);
|
||||
max-height: calc(100vh - 40px);
|
||||
min-height: 100px;
|
||||
position: absolute;
|
||||
z-index: 2066;
|
||||
@ -2590,9 +2594,9 @@ a {
|
||||
#right-nav-panel {
|
||||
width: calc((100vw - var(--sheldWidth) - 2px) /2);
|
||||
/* min-width: 450px; */
|
||||
height: calc(100vh - 55px);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
@ -2654,14 +2658,6 @@ a {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/* this is what causes the panel movement */
|
||||
#nav-toggle:checked~#right-nav-panel {
|
||||
/* right: 0;
|
||||
box-shadow: -5px 0 20px 0 var(--black70a); */
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
|
||||
|
||||
#right-nav-panel>div:not(#right-nav-panel-tabs) {
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
@ -2774,7 +2770,7 @@ label[for="extensions_autoconnect"] {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
height: 40px;
|
||||
max-width: 800px;
|
||||
max-width: var(--sheldWidth);
|
||||
color: white;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
@ -2915,20 +2911,21 @@ label[for="extensions_autoconnect"] {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.fillRight, .fillLeft {
|
||||
.fillRight,
|
||||
.fillLeft {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.fillLeft {
|
||||
max-width: calc((100vw - var(--sheldWidth) - 2px) /2);
|
||||
max-height: calc(100vh - 55px);
|
||||
height: calc(100vh - 55px);
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
padding: 0 10px;
|
||||
padding: 10px 10px 0 10px;
|
||||
border-radius: 0 0 20px 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -3085,7 +3082,7 @@ label[for="extensions_autoconnect"] {
|
||||
#character_popup,
|
||||
#world_popup {
|
||||
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
|
||||
height: calc(100svh - 55px);
|
||||
height: calc(100svh - 40px);
|
||||
width: calc(100vw - 10px);
|
||||
margin: 0 auto;
|
||||
margin-left: 5px;
|
||||
@ -3194,7 +3191,7 @@ label[for="extensions_autoconnect"] {
|
||||
/*bubble chat style*/
|
||||
|
||||
body.bubblechat #chat {
|
||||
margin-top: 5px;
|
||||
/* margin-top: 5px; */
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 0;
|
||||
overflow-y: scroll;
|
||||
@ -3204,7 +3201,7 @@ body.bubblechat #chat {
|
||||
scrollbar-width: thin;
|
||||
transition: all 1s ease-in-out;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
/* border-radius: 20px; */
|
||||
z-index: 3;
|
||||
border: none;
|
||||
backdrop-filter: unset;
|
||||
@ -3249,12 +3246,20 @@ body.bubblechat ::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
body.w1000px #sheld {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
|
||||
/*FastUI blur removal*/
|
||||
|
||||
body.no-blur * {
|
||||
backdrop-filter: unset !important;
|
||||
}
|
||||
|
||||
#send_form.no-blur-sendtextarea {
|
||||
background-color: var(--black90a) !important;
|
||||
}
|
||||
|
||||
body.no-blur #bg1,
|
||||
body.no-blur #bg2 {
|
||||
filter: unset;
|
||||
|
||||
Reference in New Issue
Block a user