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

CountCharTokens() + create_form to grid +CSS tweaks

Browse Source 
1. Added a new utility function CountCharTokens() to replace the token counting routine from before. It also works unsaved new characters.

1.5 - moved #result_info to the top under avatar.

2. put create_form into a grid display so the two textareas can automatically resize to fill as much space as possible.

3. CSS - standardized background shadings, and replaced backdrop filters with RGBA background-colors for most divs. increased the strangth of some box-shadows on large UI divs
This commit is contained in:
RossAsscends
2023-03-08 04:53:00 +09:00
parent 16b4503d8f
commit c21317d69e
2 changed files with 230 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
public/index.html
View File

@@ -128,8 +128,8 @@
var preset_settings = 'gui';
var user_avatar = 'you.png';
var temp = 0.5;
var amount_gen = 80;
var max_context = 2048;//2048;
var amount_gen = 80; //default max length of AI generated responses
var max_context = 2048;
var rep_pen = 1;
var rep_pen_size = 100;
@@ -212,8 +212,8 @@
function QuickRefresh(){
clearChat();
//characters.length = 0 //if this could be enabled it would allow the GetCharacters function to detect files added or removed from the char dir on each panel load
console.log('quickRefresh() -- active_character -- '+active_character);
console.log('quickRefresh() -- this_chid -- '+this_chid);
//console.log('quickRefresh() -- active_character -- '+active_character);
//console.log('quickRefresh() -- this_chid -- '+this_chid);
getSettings("def");
getCharacters();
getUserAvatars();
@@ -226,6 +226,24 @@
};
}
//RossAscends: a utility function for counting characters, even works for unsaved characters.
function CountCharTokens(){
$('#result_info').html('');
if (selected_button == 'create'){
var count_tokens = encode(JSON.stringify(create_save_description+create_save_personality+create_save_scenario+create_save_mes_example)).length;
console.log('This unsaved character has '+count_tokens+' tokens in the defs.');
}else{
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
console.log(characters[this_chid].name+' has '+count_tokens+' tokens in the defs.');
}
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
}
}
$('#characloud_url').click(function(){
window.open('https://boosty.to/tavernai', '_blank');
});
@@ -350,7 +368,7 @@
//console.log('printCharacters() entered');
$("#rm_print_characters_block").empty();
console.log('printCharacters() -- sees '+characters.length+' characters.');
//console.log('printCharacters() -- sees '+characters.length+' characters.');
characters.forEach(function(item, i, arr) {
var this_avatar = default_avatar;
@@ -359,7 +377,7 @@
} //RossAscends: changed 'prepend' to 'append' to make alphabetical sorting display correctly.
$("#rm_print_characters_block").append('<div class=character_select chid='+i+' id="CharID'+i+'"><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
//console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
});
}
@@ -889,6 +907,8 @@
}
function runGenerate(cycleGenerationPromt = ''){
generatedPromtCache+=cycleGenerationPromt;
if(generatedPromtCache.length == 0){
chatString = "";
@@ -945,6 +965,7 @@
//Send story string
var mesSendString = '';
var mesExmString = '';
function setPromtString(){
mesSendString = '';
mesExmString = '';
@@ -955,17 +976,22 @@
mesSendString+=mesSend[j];
}
}
function checkPromtSize(){
setPromtString();
let thisPromtContextSize = encode(JSON.stringify(storyString+mesExmString+mesSendString+anchorTop+anchorBottom+charPersonality+generatedPromtCache)).length+120;
if(thisPromtContextSize > this_max_context){
if(count_exm_add > 0){
if(thisPromtContextSize > this_max_context){ //if the prepared prompt is larger than the max context size...
if(count_exm_add > 0){ // ..and we have example mesages..
//console.log('Context size: '+thisPromtContextSize+' -- too big, removing example message');
//mesExamplesArray.length = mesExamplesArray.length-1;
count_exm_add--;
checkPromtSize();
}else if(mesSend.length > 0){
mesSend.shift();
checkPromtSize();
count_exm_add--; // remove the example messages...
checkPromtSize(); // and try agin...
}else if(mesSend.length > 0){ // if the chat history is longer than 0
//console.log('Context size: '+thisPromtContextSize+' -- too big, removing oldest chat message');
mesSend.shift(); // remove the first (oldest) chat entry..
checkPromtSize(); // and check size again..
}else{
//end
}
@@ -975,6 +1001,7 @@
if(generatedPromtCache.length > 0){
//console.log('Generated Prompt Cache length: '+generatedPromtCache.length);
checkPromtSize();
}else{
setPromtString();
@@ -991,26 +1018,35 @@
var generate_data;
if(main_api == 'kobold'){
var generate_data = {prompt: finalPromt, gui_settings: true,max_length: amount_gen,temperature: temp, max_context_length: max_context};
if(preset_settings != 'gui'){
if(preset_settings != 'gui'){ //if we aren't using the kobold GUI settings...
var this_settings = koboldai_settings[koboldai_setting_names[preset_settings]];
var this_amount_gen = parseInt(amount_gen);
if(is_pygmalion){
if(tokens_already_generated === 0){
if(parseInt(amount_gen) >= 50){
this_amount_gen = 50;
var this_amount_gen = parseInt(amount_gen); // how many tokens the AI will be requested to generate
if(is_pygmalion){ // if we are using a pygmalion model...
if(tokens_already_generated === 0){ // if nothing has been generated yet..
if(parseInt(amount_gen) >= 50){ // if the max gen setting is > 50...(
this_amount_gen = 50; // then only try to make 50 this cycle..
}else{
this_amount_gen = parseInt(amount_gen);
this_amount_gen = parseInt(amount_gen); // otherwise, make as much as the max amount request.
}
//console.log('Max Gen Amount: '+parseInt(amount_gen));
}else{ // if we already recieved some generated text...
if(parseInt(amount_gen) - tokens_already_generated < tokens_cycle_count){ // if the remaining tokens to be made is less than next potential cycle count
this_amount_gen = parseInt(amount_gen) - tokens_already_generated; // subtract already generated amount from the desired max gen amount
//console.log('Remaining tokens to be requested: '+this_amount_gen);
}else{
if(parseInt(amount_gen) - tokens_already_generated < tokens_cycle_count){
this_amount_gen = parseInt(amount_gen) - tokens_already_generated;
this_amount_gen = tokens_cycle_count; // otherwise make the standard cycle amont (frist 50, and 30 after that)
}
}
//console.log('Upcoming token request amt: '+this_amount_gen);
}else{
this_amount_gen = tokens_cycle_count;
}
}
//console.log('non-pyg model or GUI Settings are being used -- skipping request split');
}
generate_data = {prompt: finalPromt,
gui_settings: false,
sampler_order: this_settings.sampler_order,
@@ -1076,7 +1112,10 @@
dataType: "json",
contentType: "application/json",
success: function(data){
tokens_already_generated += this_amount_gen;
tokens_already_generated += this_amount_gen; // add new gen amt to any prev gen counter..
//console.log('Tokens requested in total: '+tokens_already_generated);
//$("#send_textarea").focus();
//$("#send_textarea").removeAttr('disabled');
is_send_press = false;
@@ -1089,16 +1128,22 @@
var getMessage = data.output;
}
//Pygmalion run again
//Pygmalion run again // to make it continue generating so long as it's under max_amount and hasn't signaled
// an end to the character's response via typing "You:" or adding "<endoftext>"
if(is_pygmalion){
if_typing_text = false;
message_already_generated +=getMessage;
if(message_already_generated.indexOf('You:') === -1 && message_already_generated.indexOf('<|endoftext|>') === -1 && tokens_already_generated < parseInt(amount_gen) && getMessage.length > 0){
runGenerate(getMessage);
//console.log('AI Response so far: '+message_already_generated);
if( message_already_generated.indexOf('You:') === -1 && //if there is no 'You:' in the response msg
message_already_generated.indexOf('<|endoftext|>') === -1 && //if there is no <endoftext> stamp in the response msg
tokens_already_generated < parseInt(amount_gen) && //if the gen'd msg is less than the max response length..
getMessage.length > 0){ //if we actually have gen'd text at all...
runGenerate(getMessage); //generate again with the 'GetMessage' argument..
return;
}
getMessage = message_already_generated;
}
//Formating
getMessage = $.trim(getMessage);
@@ -1135,10 +1180,10 @@
addOneMessage(chat[chat.length-1]);
$( "#send_but" ).css("display", "inline");
$( "#loading_mes" ).css("display", "none");
//console.log('/savechat called by /Generate');
//let final_message_length = encode(JSON.stringify(getMessage)).length;
//console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)');
saveChat();
}else{
//console.log('run force_name2 protocol');
Generate('force_name2');
}
}else{
@@ -1223,9 +1268,7 @@
chat_create_date = humanizedISO8601DateTime();
}
//console.log(chat);
//console.log('getChatResults called by /getchat');
getChatResult();
//console.log('savechat called by /getchat');
saveChat();
},
error: function (jqXHR, exception) {
@@ -1340,6 +1383,7 @@
});
function select_rm_create(){
menu_type = 'create';
//console.log('select_rm_Create() -- selected button: '+selected_button);
if(selected_button == 'create'){
if(create_save_avatar != ''){
@@ -1347,6 +1391,7 @@
read_avatar_load($("#add_avatar_button").get(0));
}
}
$( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "none");
$( "#rm_ch_create_block" ).css("display", "block");
@@ -1359,6 +1404,7 @@
complete: function() { }
});
$( "#rm_info_block" ).css("display", "none");
$( "#delete_button_div" ).css("display", "none");
$( "#delete_button" ).css("display", "none");
$( "#export_button" ).css("display", "none");
@@ -1389,6 +1435,7 @@
$("#name_div").css("display", "block");
$("#form_create").attr("actiontype", "createcharacter");
CountCharTokens();
}
function select_rm_characters(){
QuickRefresh();
@@ -1485,14 +1532,8 @@
clearChat();
chat.length = 0;
getChat();
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
//RossAscends: added token counter to load when a character is selected, instead of waiting for an edit.
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
}
console.log('Clicked on '+characters[this_chid].name+' Active_Character set to: '+active_character+' (ChID:'+this_chid+')');
//console.log('Clicked on '+characters[this_chid].name+' Active_Character set to: '+active_character+' (ChID:'+this_chid+')');
}
}else{ //if clicked on character that was already selected
selected_button = 'character_edit';
@@ -1888,12 +1929,7 @@
$('#create_button').attr('value','Save');
//console.log('/editcharacters -- this_chid -- '+this_chid);
if(this_chid != undefined && this_chid != 'invalid-safety-id'){ //added check to avoid trying to load tokens in case of character deletion
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
}
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
CountCharTokens();
}
},
error: function (jqXHR, exception) {
@@ -1921,8 +1957,10 @@
});
$('#description_textarea').on('keyup paste cut', function(){//change keyup paste cut
if(menu_type == 'create'){
create_save_description = $('#description_textarea').val();
CountCharTokens();
}else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
@@ -1932,6 +1970,7 @@
if(menu_type == 'create'){
create_save_personality = $('#personality_textarea').val();
CountCharTokens();
}else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
@@ -1940,6 +1979,7 @@
if(menu_type == 'create'){
create_save_scenario = $('#scenario_pole').val();
CountCharTokens();
}else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
@@ -1948,6 +1988,7 @@
if(menu_type == 'create'){
create_save_mes_example = $('#mes_example_textarea').val();
CountCharTokens();
}else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
@@ -1956,6 +1997,7 @@
if(menu_type == 'create'){
create_save_first_message = $('#firstmessage_textarea').val();
CountCharTokens();
}else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
@@ -2338,7 +2380,9 @@
novelai_settings[i] = JSON.parse(item);
});
var arr_holder = {};
$("#settings_perset_novel").empty();
$("#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>');
@@ -2357,7 +2401,10 @@
koboldai_settings[i] = JSON.parse(item);
});
var arr_holder = {};
$("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on QuickRefresh
$("#settings_perset").append('<option value="gui">GUI KoboldAI Settings</option>'); //adding in the GUI settings, since it is not loaded dynamically
koboldai_setting_names.forEach(function(item, i, arr) {
arr_holder[item] = i;
$('#settings_perset').append('<option value='+i+'>'+item+'</option>');
@@ -3046,11 +3093,14 @@
</div>
<div>
<h3 id="character_popup_text_h3">Create character</h3>
<h3 id="character_popup_text_h3"></h3> - Advanced Defininitions
</div>
</div>
<img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<div id="personality_div">
<hr>
<h4>Personality summary</h4><h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off">
</div>
@@ -3118,7 +3168,10 @@
</div>
</div>
<div id="bg_menu">
<div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo">
<div id="logo_block">
<div id="bg_menu_button"><img src="img/tri.png">
</div>
<img src="img/logo.png" id="site_logo">
<div id="update-notification">
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
</div>
@@ -3147,31 +3200,35 @@
<div id="rm_ch_create_block" class="right_menu" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="avatar-and-name-block">
<div id="name_div">
<h4>Name</h4><h5>Character name</h5>
<h4>Character Name</h4>
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value="" autocomplete="off">
</div>
<div id="avatar_div" class="avatar_div">
<div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
</div>
<label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
Change Avatar
</label>
</div>
<div id="result_info" style="width: 100px;">&nbsp;</div>
</div>
<hr>
<div id="description_div">
<h4>Description</h4><h5>Description of personality and other characteristics <a href="/notes/1" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="description_textarea" name="description" placeholder=""></textarea>
</div>
<textarea id="description_textarea" name="description" placeholder=""></textarea>
<div id="first_message_div">
<h4>First message</h4><h5>First message from the character <a href="/notes/3" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="firstmessage_textarea" name="first_mes" placeholder=""></textarea>
</div>
<textarea id="firstmessage_textarea" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes -->
<div id="hidden-divs">
<div id="avatar_url_div">
<input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
@@ -3184,11 +3241,11 @@
<div id="last_mes_div">
<input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
</div>
<!-- now back to normal divs for display purposes-->
<input id="advanced_div" class="menu_button" type="button" value="Advanced Edit">
<div id="result_info" style="width: 100px;">&nbsp;</div>
<hr>
<div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button">Go Back</div>
<input id="delete_button" class="menu_button" type="button" value="Delete">

136
public/style.css
View File

@@ -62,8 +62,6 @@ body {
}
::-webkit-scrollbar-track {
/*background-color: var(--black50a);*/
/*-webkit-box-shadow: inset 0 0 6px var(--black30a);*/
-webkit-border-radius: 10px;
border-radius: 10px;
}
@@ -133,9 +131,10 @@ code {
position:fixed;
color:var(--black30a);
border-bottom:1px solid var(--black70a);
box-shadow: 0 4px 8px 0 var(--black30a), 0 6px 20px 0 var(--black30a);
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
box-shadow:0 2px 20px 0 var(--black70a);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
z-index:2001;
}
@@ -160,8 +159,9 @@ code {
border-bottom:1px solid var(--black30a);
border-left:1px solid var(--black30a);
border-right:1px solid var(--black30a);
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
/*border-radius: 0 0 40px 40px;*/
text-shadow: #000 0 0 3px;
@@ -179,9 +179,8 @@ code {
grid-template-columns: 40px auto 40px;
width: 100%;
margin: 0 auto 0 auto;
border: 1px solid var(--black50a);
/*backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);*/
border: 1px solid var(--black30a);
border-radius: 0 0 20px 20px;
background-color:var(--crimson70a);
}
@@ -190,14 +189,8 @@ code {
padding: 0;
border: 0;
height: 40px;
/* width: 40px; */
position: relative;
/* border-radius: 0 40px 40px 0; */
/* background-color: var(--black30a); */
background-position: center;
/* display: grid; */
/* vertical-align: middle; */
/* padding-top: 377%; */
}
#send_but{
width: 40px;
@@ -271,8 +264,9 @@ code {
overflow: hidden;
display: block;
position: absolute;
backdrop-filter: brightness(0.3) blur(10px);
-webkit-backdrop-filter: brightness(0.3) blur(10px);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
border: 1px solid #666;
border-radius: 15px;
box-shadow:00 5px #000;
@@ -287,7 +281,7 @@ code {
padding:0;
border-top: 1px solid var(--white30a);
}
#right-nav-panel hr{
#right-nav-panel hr, #personality_div hr {
background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
}
.options-content a {
@@ -380,19 +374,16 @@ br {
textarea{
width: 100%;
resize: vertical;
display: block;
background-color: var(--black30a);
outline: none;
border: 1px solid var(--white30a);
border-radius: 10px;
box-shadow: 0 0 2px var(--black50a);
color: var(--white70a);
font-size: 15px;
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
padding-left: 10px;
padding-top: 10px;
padding: 5px 10px;
}
#send_textarea{
@@ -421,7 +412,7 @@ width: 100%;
#description_textarea{
height: 200px;
height: -webkit-fill-available;
}
@@ -431,8 +422,7 @@ width: 100%;
}
#firstmessage_textarea{
height: 140px;
margin-top:0;
height: -webkit-fill-available;
}
.text_pole{
@@ -463,7 +453,7 @@ width: 100%;
.right_menu h5 {
color: var(--white50a);
margin:0;
padding:5px 0;
padding-bottom:5px;
font-size:0.75rem;
}
@@ -546,7 +536,6 @@ input[type=submit] {
height: 20px;
margin-top: -25px;
margin-left: 0;
background: var(--black30a);
-webkit-transition: all 0.275s;
transition: all 0.275s;
}
@@ -745,8 +734,9 @@ select option:not(:checked) { /* works to color unselected items */
display: block;
width: 122px;
height:0;
backdrop-filter: brightness(30%) blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(30%);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
}
@@ -758,8 +748,9 @@ width: 103px;
/* padding-bottom: 20px; */
position: relative;
margin-left: 3px;
backdrop-filter: blur(1px) brightness(50%);
-webkit-backdrop-filter: blur(1px) brightness(50%);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(1px);
}
.bg_example_img {
@@ -808,8 +799,23 @@ width: 103px;
margin-bottom: 2px;
}
#form_create {
display: grid;
height: 90vh;
grid-template-rows: [avatar] min-content
[hr] min-content
[descriptionHeader] min-content
[description] auto
[firstmessageHeader] min-content
[firstMessage] auto
[hidden] min-content
[advanced] min-content
[tokenCounter] min-content
[formButtons] min-content;
}
.avatar_div{
margin-top: 16px;
/*margin-top: 16px;*/
vertical-align: middle;
display: grid;
grid-template-columns: min-content min-content;
@@ -870,8 +876,9 @@ width: 103px;
#form_bg_download{
margin-bottom: 2px;
backdrop-filter: brightness(30%) blur(20px);
-webkit-backdrop-filter: brightness(30%) blur(20px);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
}
/* Focus */
#colab_popup{
@@ -888,8 +895,9 @@ width: 103px;
margin-top: 36vh;
box-shadow: 0 0 2px var(--black50a);
padding: 4px;
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
}
#dialogue_popup{
@@ -905,7 +913,7 @@ width: 103px;
margin-top: 36vh;
box-shadow: 0 0 5px 5px var(--fullred);
padding: 4px;
background-color: var(--black50a);
background-color: var(--black30a);
border-radius: 10px;
}
#dialogue_popup_ok{
@@ -973,8 +981,8 @@ width: 103px;
}
#colab_shadow_popup{
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: none;
opacity: 1.0;
position: absolute;
@@ -1099,7 +1107,6 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
width:284px;
margin-bottom: 35px;
color: var(--white70a);
box-shadow: 0 0 2px var(--black50a);
background-color: var(--black30a);
}
#user_avatar_block{
@@ -1174,8 +1181,9 @@ input[type="range"] {
margin-top: 15vh;
box-shadow: 5px 5px var(--black30a);
padding: 4px;
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
padding-top: 30px;
}
@@ -1228,13 +1236,10 @@ input[type="range"] {
height: 23px;
}
.edit_textarea{
padding:0;
padding:5px;
margin:0;
border: none;
border-color: var(--transparent);
outline: none;
box-shadow: 0 0 3px var(--white50a);
background-color: var(--black30a);
background-color: var(--black50a);
font-size: 15px;
line-height:1.25rem;
}
@@ -1257,8 +1262,9 @@ input[type="range"] {
}
#shadow_character_popup{
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
display: none;
opacity: 1.0;
position: absolute;
@@ -1270,7 +1276,7 @@ input[type="range"] {
display: none;
background-color: var(--black30a);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(30px);
grid-template-rows: 50px 100px 100px auto;
grid-gap: 10px;
max-width: 800px;
@@ -1282,11 +1288,11 @@ input[type="range"] {
left: 0;
right: 0;
margin-top: 40px;
box-shadow: 0 0 2px var(--black50a);
box-shadow: 0 0 20px var(--black70a);
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
padding-bottom: 30px;
border: 1px solid var(--black30a);
border-radius: 0 0 20px 20px;
}
@@ -1295,6 +1301,7 @@ input[type="range"] {
margin-top:0;
margin-bottom:0;
margin-left:0;
display: inline;
}
#character_popup h4{
@@ -1350,8 +1357,9 @@ input[type="range"] {
height: 40px;
margin-top: 15px;
margin-left: 36px;
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
width: 110px;
text-align: center;
}
@@ -1363,8 +1371,8 @@ input[type="range"] {
width: 100%;
height: 100vh;
z-index: 2059;
backdrop-filter: blur(10px) brightness(1);
-webkit-backdrop-filter: blur(10px) brightness(1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#select_chat_popup{
@@ -1380,7 +1388,7 @@ input[type="range"] {
left: 0;
right: 0;
margin-top: 6vh;
box-shadow: 0 0 10px var(--black50a);
box-shadow: 0px 0px 20px var(--black30a);
padding: 10px;
background-color: var(--black70a);
border-radius: 20px;
@@ -1477,7 +1485,7 @@ p {
}
hr {
margin: 10px 0;
margin: 5px 0;
height: 1px;
border: 0;
}
@@ -1525,8 +1533,9 @@ a {
-webkit-transition: right 0.14s ease-in-out 0.02s;
-moz-transition: right 0.14s ease-in-out 0.02s;
transition: right 0.14s ease-in-out 0.02s;
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
backdrop-filter: blur(10px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
z-index: 2050;
white-space:nowrap;
border-left: 1px solid var(--black30a);
@@ -1567,7 +1576,7 @@ a {
height: 30px;
margin-top: -8px;
margin-left: -24px;
border: 1px solid var(--white50a);
border: 1px solid var(--white30a);
border-radius: 5px;
background: var(--black30a);
color: var(--white50a);
@@ -1584,7 +1593,6 @@ a {
/* this is what causes the panel movement */
#nav-toggle:checked ~ #right-nav-panel{
right:0;
box-shadow: -5px 0 10px 0 var(--black50a);
box-shadow: -5px 0 20px 0 var(--black70a);
overflow-y: auto;
border-left: 1px solid var(--white30a);
}