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

Merge remote-tracking branch 'ross/main'

Browse Source
This commit is contained in:
SillyLossy
2023-03-01 10:54:51 +02:00
parent 335f311474 dac14985f4
commit a73ad9d53f
3 changed files with 290 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/send3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 17 KiB

169
public/index.html
View File

@@ -241,7 +241,7 @@
//console.log(online_status);
if(online_status == 'no_connection'){
$("#send_textarea").attr('placeholder', "Not connected to API!"); //Input bar placeholder tells users they are not connected
$("#send_form").css("background-color", "rgba(255,0,0,0.3)"); //entire input form area is red when not connected
$("#send_form").css("background-color", "rgba(100,0,0,0.7)"); //entire input form area is red when not connected
$("#send_but").css("display", "none"); //send button is hidden when not connected
@@ -256,7 +256,7 @@
is_get_status_novel = false;
}else{
$("#send_textarea").attr('placeholder', 'Type a message...'); //on connect, placeholder tells user to type message
$("#send_form").css("background-color", "rgba(0,0,0,0.3)"); //on connect, form BG changes to transprent black
$("#send_form").css("background-color", "rgba(0,0,0,0.7)"); //on connect, form BG changes to transprent black
$("#send_but").css("display", "inline"); //on connect, send button shows up
@@ -833,28 +833,30 @@
tokens_already_generated = 0;
message_already_generated = name2+': ';
if(online_status != 'no_connection' && this_chid != undefined){
if(type != 'regenerate'){
if(type !== 'regenerate'){
var textareaText = $("#send_textarea").val();
//console.log('Not a Regenerate call, so posting normall with input of: ' +textareaText);
$("#send_textarea").val('').trigger('input');
}else{
//console.log('Regenerate call detected')
var textareaText = "";
if(chat[chat.length-1]['is_user']){//If last message from You
}else{
//console.log('about to remove last msg')
chat.length = chat.length-1;
count_view_mes-=1;
//console.log('removing last msg')
$('#chat').children().last().remove();
}
}
//$("#send_textarea").attr("disabled","disabled");
if (isHelpRequest(textareaText)) {
sendSystemMessage(system_message_types.HELP);
return;
}
//$("#send_textarea").blur();
$( "#send_but" ).css("display", "none");
$( "#loading_mes" ).css("display", "inline-block");
@@ -1071,7 +1073,6 @@
//arrMes[arrMes.length-1] = '<START>\n'+arrMes[arrMes.length-1];
let mesExmString = '';
for(let iii = 0; iii < mesExamplesArray.length; iii++){//mesExamplesArray It need to make from end to start
mesExmString = mesExmString+mesExamplesArray[iii];
if(encode(JSON.stringify(worldInfoString+storyString+mesExmString+chatString+anchorTop+anchorBottom+charPersonality+promptBias)).length+120 < this_max_context){ //example of dialogs
if(!is_pygmalion){
@@ -1200,6 +1201,7 @@
mesSendString = '\nThen the roleplay chat between '+name1+' and '+name2+' begins.\n'+mesSendString;
}else{
mesSendString = '<START>\n'+mesSendString;
//mesSendString = mesSendString;
}
finalPromt = worldInfoBefore+storyString+worldInfoAfter+mesExmString+mesSendString+generatedPromtCache+promptBias;
@@ -1480,18 +1482,15 @@
select_selected_character(this_chid);
}
//hotkey to send input with shift+enter (normal enter keypress generates a new line in the chat input box)
//problem for mobile: default iOS keyboard function is to make AutoCapitalization happen on new lines.
//AutoCapitization effectively presses the virtual Shift key when it thinks a new line/sentence is happening.
//iOS result: First Enter press will make a new line, but the second will act like shift+enter, sending the prompt to AI.
//hotkey to send input with enter (shift+enter generates a new line in the chat input box)
//this is not ideal for touch device users with virtual keyboards.
//ideally we would detect if the user is using a virtual keyboard, and disable this shortcut for them.
//because mobile users' hands are always near the screen, tapping the send button is better for them.
//caveat: people on an iPad using a Bluetooth keyboard will need to be treated as PC users for this purpose.
//because mobile users' hands are always near the screen, tapping the send button is better for them, and enter should always make a new line.
//note: CAI seems to have this handled. PC: shift+enter = new line, enter = send. iOS: shift+enter AND enter both make new lines, and only the send button sends.
//maybe a way to simulate this would be to disable the eventListener for people iOS.
$("#send_textarea").keydown(function (e) {
if(e.which === 13 && e.shiftKey && is_send_press == false) {
if(e.which === 13 && !e.shiftKey && !e.ctrlKey && is_send_press == false) {
is_send_press = true;
e.preventDefault();
Generate();
@@ -1499,6 +1498,22 @@
}
});
//RossAscends: Lets add some hotkeys
document.addEventListener('keydown', (event) => {
//console.log(event.key);
if(event.ctrlKey && event.key == "Enter") { // Ctrl+Enter for Regeneration Last Response
//console.log('both CTRL and Enter were pressed');
if(is_send_press == false){
is_send_press = true;
Generate('regenerate');
//console.log('confirmed keypress was caught '+ event.key);
}
}else if(event.ctrlKey && event.key == "ArrowUp") { //Ctrl+UpArrow for Connect to last server
document.getElementById('api_button').click();
}
});
//menu buttons
var selected_button_style = { color: "#bcc1c8" };
var deselected_button_style = { color: "#565d66" };
@@ -1889,7 +1904,7 @@
switch(popup_type){
case 'char_not_selected':
$("#dialogue_popup_ok").css("background-color", "#191b31CC");
$("#dialogue_popup_ok").text("Ok");
$("#dialogue_popup_cancel").css("display", "none");
break;
@@ -1897,12 +1912,12 @@
case 'world_imported':
case 'new_chat':
$("#dialogue_popup_ok").css("background-color", "#191b31CC");
$("#dialogue_popup_ok").text("Yes");
break;
case 'del_world':
default:
$("#dialogue_popup_ok").css("background-color", "#791b31");
$("#dialogue_popup_ok").text("Delete");
}
@@ -2201,7 +2216,8 @@
}
});
$( "body" ).click(function() { // this makes the input bar's option menu disappear when clicked away from
$(document).on('click', function(event) { // this makes the input bar's option menu disappear when clicked away from
if($("#options").css('opacity') == 1.0){
$('#options').transition({
opacity: 0.0,
@@ -2210,14 +2226,34 @@
complete: function() {
$("#options").css('display', 'none');
}
});
})
}
});
$( "#options_button" ).click(function() {
// RossAscends: Added functionality that will close the RightNav panels when User clicks outside them
var NavToggle = document.getElementById("nav-toggle");
var PanelPin = document.getElementById("rm_button_panel_pin");
$('document').ready(function(){
$("html").click(function(e){
if (NavToggle.checked === true && PanelPin.checked === false) {
if ($(e.target).attr('id') !== "nav-toggle") {
if (document.querySelector('#right-nav-panel').contains(e.target) === false){
document.getElementById('nav-toggle').click();
}
}
};
});
});
//-------------------------------------------------------------------------------------------------------------
$( "#options_button" ).click(function() { // this is the options button click function, shows the options menu if closed
if($("#options").css('display') === 'none' && $("#options").css('opacity') == 0.0){
$("#options").css('display', 'block');
$('#options').transition({
opacity: 1.0,
opacity: 1.0, // the manual setting of CSS via JS is what allows the click-away feature to work
duration: 100,
easing: animation_rm_easing,
complete: function() {
@@ -2240,47 +2276,6 @@
callPopup('<h3>Start new chat?</h3>');
}
});
//RossAscends: Lets add some hotkeys
document.addEventListener('keydown', (event) => {
if(event.ctrlKey && event.key == "Enter") { // Ctrl+Enter for Regeneration Last Response
if(is_send_press == false){
is_send_press = true;
Generate('regenerate');
}
}else if(event.ctrlKey && event.key == "ArrowUp") { //Ctrl+UpArrow for Connect to last server
document.getElementById('api_button').click();
}
});
//-----------------------------------------------
// Now let's add functionality that will close the BG menu and/or RightNav panels when User clicks outside them
// COULDN'T GET THIS TO WORK BUT CODE LEFT FOR FUTURE REFERENCE
// general function to deetct which elements are being clicked on.
//$('body').on('click', function(e){
// alert( 'Class is '+ $(e.target).attr('class') + '. ID is '+ $(e.target).attr('id'));
//});
//general function to watch the status of the nav-toggle checkbox
//var checkb = document.getElementById("nav-toggle");
//checkb.addEventListener('change', function(e) {
// alert(checkb.checked, checkb.value);
//});
//$('document').ready(function(){
// $("body").click(function(e){
// if (e.target.parentNode.classList.contains('.nav') == false){
// alert('triggered!');
// document.getElementById('nav-toggle').click();
// };
//});
//});
//---------------------------------------------------
$( "#option_regenerate" ).click(function() {
if(is_send_press == false){
@@ -2288,7 +2283,7 @@
Generate('regenerate');
}
});
// this function hides the input form, and shows the delete/cancel buttons fro deleting messages from chat
// this function hides the input form, and shows the delete/cancel buttons for deleting messages from chat
$( "#option_delete_mes" ).click(function() {
if(this_chid != undefined && !is_send_press){
$('#dialogue_del_mes').css('display','block');
@@ -3746,7 +3741,7 @@
<div id="scenario_div">
<h4>Scenario</h4>
<h5>Circumstances and context of the dialogue (<a href="/notes/12" target="_blank">?</a>)</h5>
<input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" size="40" value="" autocomplete="off" form="form_create">
<input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off" form="form_create">
</div>
<div id="mes_example_div">
@@ -3873,8 +3868,6 @@
<div id="select_chat_popup_text">
<img id="select_chat_cross" src="img/cross.png" style="position: absolute; right: 15px; top:14px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<!--<h3 style="margin: 0px;margin-left: 5px;margin-top: 5px;">Select chat</h3>-->
</div>
<div id="select_chat_import">
@@ -3915,16 +3908,11 @@
</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">
<!-- derp derp derp -->
<div id="update-notification">
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
</div>
<!-- derp derp derp derp -->
</div>
<div id="bg_menu_content">
<form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<label class="input-file">
@@ -3936,24 +3924,23 @@
</div>
</div>
<input type="checkbox" id="nav-toggle" hidden>
<nav class="nav">
<label for="nav-toggle" class="nav-toggle" onclick></label>
<input type="checkbox" id="nav-toggle">
<nav id="right-nav-panel">
<div class="right_menu_button" id="rm_button_characters"><h2>Characters</h2></div>
<div class="right_menu_button" id="rm_button_settings"><h2>Settings</h2></div>
<div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"></div>
<div id="rm_ch_create_block" class="right_menu">
<div id="rm_ch_create_block" class="right_menu" style="display: none;">
<div id="rm_button_back" class="right_menu_button"><h2 style="color: rgb(188, 193, 200, 0.5);">&#8656;</h2></div>
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="name_div">
<h4>Name</h4><h5>Character name</h5>
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" size="35" value="" autocomplete="off">
<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">
@@ -4017,7 +4004,7 @@
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>API url</h4><h5>Example: http://127.0.0.1:5000/api </h5>
<input id="api_url_text" name="api_url" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
<input id="api_url_text" name="api_url" class="text_pole" maxlength="500" value="" autocomplete="off">
<input id="api_button" type="submit" value="Connect">
<img id="api_loading" src="img/load.svg" >
</form>
@@ -4051,7 +4038,8 @@
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>API key</h4><h5>Where to get (<a href="/notes/6" target="_blank">?</a>)</h5>
<input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
<input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" value="" autocomplete="off">
<Br>
<input id="api_button_novel" type="submit" value="Connect">
<img id="api_loading_novel" src="img/load.svg" >
</form>
@@ -4090,7 +4078,8 @@
</form>
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Name</h4>
<input id="your_name" name="your_name" class="text_pole" maxlength="35" size="16" value="" autocomplete="off">
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off">
<br>
<input id="your_name_button" type="submit" value="Change">
</form>
<hr>
@@ -4186,7 +4175,6 @@
<div id="chat"></div>
<div id="form_sheld">
<div id="dialogue_del_mes">
<!-- <div id="dialogue_del_mes_text"><h3></h3></div> -->
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>
@@ -4194,18 +4182,18 @@
<div id="options_button">
<div id="options">
<div class="options-content">
<a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png" width="20" height="20">Start new chat</a>
<a id="option_select_chat"><img src="img/book6.png" width="20" height="20" style="opacity: 0.0;"><img src="img/book6.png" style="width: 21px;height: 21px;position: absolute;top: 59px;left: 15px; opacity: 0.5;">Select chats</a><!--<img src="img/book6.png" style="width: 21px;height: 21px;position: absolute;top: 14px;left: 16px; opacity: 0.5;">Select chat</a>-->
<a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png"><span>Start new chat</span></a>
<a id="option_select_chat"><img src="img/book6.png"><span>View Past Chats</span></a>
<hr>
<a id="option_delete_mes"><img src="img/del_mes.png" width="20" height="20">Delete message</a>
<a id="option_regenerate"><img src="img/regenerate.png" width="20" height="20">Regenerate</a>
<a id="option_delete_mes"><img src="img/del_mes.png"><span>Delete messages</span></a>
<a id="option_regenerate"><img src="img/regenerate.png"><span>Regenerate</span></a>
</div>
</div>
</div>
<!-- <div contenteditable="true" id="send_textarea">Type a message...</div> -->
<textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<script type="text/javascript">
//this script makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height)
$('#send_textarea').on('input', function () {
this.style.height = '40px';
this.style.height =
@@ -4214,22 +4202,11 @@
</script>
<div id="send_but_sheld">
<div id="loading_mes"></div>
<!--
<div id="online_status">
<div id="online_status_indicator"></div>
<div id="online_status_text">Not connected</div>
</div>
-->
<input id="send_but" type="button">
</div>
</form>
<!-- <div id="online_status">
<div id="online_status_indicator"></div><div id="online_status_text">No connection...</div>
</div> -->
</div>
</div>
</body>

491
public/style.css
View File

@@ -18,12 +18,12 @@ body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
/*backdrop-filter: blur(2px);*/
/*-webkit-backdrop-filter: blur(2px);*/
scrollbar-width: thin;
scrollbar-color: gray #191b31;
font-family: "Noto Sans", "Noto Color Emoji", sans-serif; /*add in custom font universally */
font-size:1rem;
font-size:15px; /*1rem*/
color: rgb(229, 224, 216);
-webkit-font-smoothing: antialiased;
}
@@ -89,8 +89,6 @@ code {
background-attachment: fixed;
filter: blur(2px);
background-size: cover;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0.0;
position: absolute;
width: 100%;
@@ -175,14 +173,14 @@ code {
#send_form {
display: grid;
align-items: center;
grid-template-columns: 50px auto 50px;
grid-template-columns: 40px auto 40px;
width: 100%;
margin: 0 auto 0 auto;
border: 1px solid rgba(0,0,0,.3);
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
border-radius: 0 0px 40px 40px;
background-color:rgba(255,0,0,0.3);
border: 1px solid rgba(0,0,0,.5);
/*backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);*/
border-radius: 0 0px 20px 20px;
background-color:rgba(100,0,0,0.7);
}
#send_but_sheld {
@@ -212,10 +210,12 @@ code {
border: none;
cursor: pointer;
transition: 0.3s;
filter:brightness(0.7);
filter:brightness(0.5);
}
#send_but:hover {filter:brightness(150%)}
#send_but:hover {
filter:brightness(150%);
}
#loading_mes{
display: none;
@@ -241,7 +241,7 @@ code {
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
padding-left: 20px;
padding-left: 10px;
padding-top: 10px;
}
@@ -254,32 +254,29 @@ code {
}
#options_button:hover {
color: #f4f4f4;
color: #fff;
}
#options{
border-radius: 5px;
opacity: 0.0;
display: none;
bottom: 196px;
bottom: 200px; /*sets vertical position of the options menu to the left of input bar */
position: relative;
z-index:1990;
}
.options-content {
overflow: hidden;
display: block;
position: absolute;
background-color: rgba(0,0,0,1);
backdrop-filter: brightness(0.3) blur(10px);
-webkit-backdrop-filter: brightness(0.3) blur(10px);
border: 1px solid rgba(0,0,0,0.3);
border: 1px solid #666;
border-radius: 15px;
box-shadow: 0px 0px 5px #000;
min-width: 205px;
text-shadow: #000 0 0 3px;
min-width: 200px;
z-index: 2000;
}
@@ -289,23 +286,28 @@ code {
padding: 0px;
border-top: 1px solid #ffffff11;
}
.nav hr{
#right-nav-panel hr{
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}
.options-content a {
color: #ffffff55;
color: color: rgb(229, 224, 216);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.options-content img {
opacity: 0.5;
margin-right: 5px;
/* opacity: 0.5; */
margin-right: 10px;
height: 1.25rem;
vertical-align: middle;
}
.options-content span {vertical-align:middle;}
/* Изменяем цвет ссылки при наведении */
.options-content a:hover {background-color: #ffffff11}
.options-content a:hover {
background-color: #333;
}
.mes {
@@ -419,6 +421,8 @@ width: 100%;
text-shadow: #000 0 0 3px;
}
#send_textarea::placeholder{color:#ccc}
#rm_ch_create_block textarea {
font-size: 15px;
}
@@ -451,6 +455,8 @@ width: 100%;
size: 10;
font-size: 11pt;
padding: 7px;
width:90%;
margin-bottom:5px;
}
@@ -532,9 +538,66 @@ input[type=button] {
padding-left: 4px;
padding-right: 4px;
margin-top:0px;
}
.right_menu_button:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
background-color: rgba(0,0,0,0.05);
}
#rm_button_panel_pin_div {
height: 1.65rem;
width: 24px;
margin-top: -10px;
margin-right: 30px;
float: right;
}
#rm_button_panel_pin {
/*position: absolute;
right: 13px;
top: 12px;*/
padding: 0px;
margin: 0px;
cursor: pointer;
height: 0;
width: 0;
z-index: 3001;
}
#rm_button_panel_pin:hover::after {
filter: grayscale(1) brightness(150%);
}
#rm_button_panel_pin::after {
content: '\01F513'; /*open lock emoji*/
filter:grayscale(1);
line-height: 20px;
font-size: 15px;
padding: 0;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 20px;
height: 20px;
margin-top: 0;
margin-left: 0;
border-radius: 5px;
background: rgba(0, 0, 0, 0.3);
color: #666;
-webkit-transition: all 0.275s;
transition: all 0.275s;
}
#rm_button_panel_pin:checked::after {
content: '\01F512'; /*closed lock emoji*/
line-height: 20px;
font-size: 15px;
}
#character_import_button{
cursor: pointer;
display: inline-block;
@@ -598,11 +661,7 @@ input[type=button] {
}
}
.right_menu_button:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
background-color: rgba(0,0,0,0.05);
}
#rm_ch_create_block{
display: none;
@@ -635,17 +694,25 @@ display: none;
/*margin-right: 4px;*/
display:block;
}
#api_button{
#api_button, #api_button_novel {
cursor: pointer;
color:#ffffffaa;
padding-left: 7px;
color: #fff;
opacity:0.7;
padding: 10px;
margin-left: 10px;
margin-top: 5px;
margin-top: 10px;
margin: 10px;
font-size: 1rem;
height: 2.5rem;
transition: 0.3s;
}
#api_button_novel{
/*#api_button_novel{
cursor: pointer;
color:#ffffffaa;
}
}*/
#api_button:hover, #api_button_novel:hover{background-color:green;}
#api_loading{
width: 25px;
height: 25px;
@@ -1025,22 +1092,25 @@ width: 103px;
margin-right: auto;
}
#delete_button{
opacity: 0.51;/* 0.5 */
opacity: 0.7;
cursor: pointer;
display: block;
float: right;
margin-top: 25px;
margin-right: 10px;
margin-right: 25px;
margin-bottom: 30px;
color: red;
font-size: 1rem;
}
#export_button{
opacity: 0.51;
opacity: 0.7;
cursor: pointer;
display: block;
float:right;
display: inline;
margin-top: 25px;
margin-right: 16px;
margin-left: 10px;
margin-bottom:30px;
color: #fff;
font-size: 1rem;
}
#result_info{
margin-left: 10px;
@@ -1525,11 +1595,16 @@ width: 103px;
color: #757575;
}
/* STLYES FOR THE CHAT MESSAGE DELETION CHECKBOXES */
/* --------------------------------------------------------------------------------------*/
/* checkboxes default to being hidden unless called by the delete mesasges option menu button, which uses JS to force them to be display:block*/
.del_checkbox{
display: none;
opacity: 0.7;
}
/*this hides the replacement for input form until Delete Messages mode is called*/
#dialogue_del_mes{
display: none;
}
@@ -1537,8 +1612,7 @@ width: 103px;
display: block;
}
input[type='checkbox'] {
input[type='checkbox'] :not(#nav-toggle){
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -1555,7 +1629,8 @@ input[type='checkbox'] {
right: 5px; /*and centers it in the checkbox column*/
}
input[type='checkbox']::before {
/* the checkbox starts with a size 0 background of a checkmark */
input[type='checkbox']::before :not(#nav-toggle) {
content: '';
color: #fff;
position: absolute;
@@ -1577,10 +1652,12 @@ input[type='checkbox']::before {
background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNWMtNC41IDQuNS0xMC43NSA3LTE3IDdzLTEyLjUtMi41LTE3LTdsLTEyNC41LTEyNC41Yy00LjUtNC41LTctMTAuNzUtNy0xN3MyLjUtMTIuNSA3LTE3bDM0LTM0YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=");
}
input[type='checkbox']:checked::before {
/* when the checkbox is checked, the background image is grown to normal size to fill the background of the 'checkbox'*/
input[type='checkbox']:checked::before :not(#nav-toggle) {
-webkit-transform: scale(1);
transform: scale(1);
}
/*---------------------------------------------------------------------------------------------------------*/
select {
color: rgba(255,255,255,0.7);
@@ -1592,8 +1669,6 @@ select {
font-size: 15px;
border: 1px solid rgba(255,255,255,0.5);
border-radius:10px;
margin-top: 5px;
margin-bottom: 45px;
}
@@ -1608,10 +1683,8 @@ select {
border-radius:10px;
background-color: rgba(0,0,0,0.3);
box-shadow:none;
}
.option_select_right_menu{
width:284px;
margin-left: 10px;
@@ -1689,7 +1762,6 @@ input[type="range"] {
height: 7px;
background: rgba(255, 255, 255, 0.6);
border-radius: 15px;
/* background-image: linear-gradient(#ff4500, #ff4500); */
background-size: 70% 100%;
background-repeat: no-repeat;
}
@@ -1697,16 +1769,16 @@ input[type="range"] {
opacity: 0.85;
}
.nav h5 a{
#right-nav-panel h5 a{
color: #936f4a;
}
.nav h5 a:hover{
#right-nav-panel h5 a:hover{
color: #998e6b;
}
.nav h4 a{
#right-nav-panel h4 a{
color: #936f4a;
}
.nav h4 a:hover{
#right-nav-panel h4 a:hover{
color: #998e6b;
}
@@ -1744,13 +1816,12 @@ input[type="range"] {
color: rgba(255,255,255,0.3);
cursor:pointer;
margin-right: 4px;
/*opacity:0.07;*/
transition: 0.3s ease-in-out;
height:20px;
width:20px;
}
.mes_edit:after {content: "\270e";}
.mes_edit:after {content: "\270e";} /*unicode pencil*/
.mes_edit:hover{color:white;}
@@ -1770,7 +1841,6 @@ input[type="range"] {
.mes_edit_cancel{
display: none;
float:right;
/* right:8px; */
margin-right: 4px;
cursor:pointer;
opacity:0.5;
@@ -1784,7 +1854,6 @@ input[type="range"] {
padding: 0px;
margin: 0px;
border: none;
/* border-radius: 15px;*/
border-color: transparent;
outline: none;
box-shadow: 0 0 3px rgba(255,255,255,0.5);
@@ -1794,10 +1863,20 @@ input[type="range"] {
}
#your_name_button {
opacity: 0.5;
margin-left: 10px;
cursor: pointer;
color: #fff;
opacity: 0.7;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
margin: 10px;
font-size: 1rem;
height: 2.5rem;
transition: 0.3s;
}
#your_name_button:hover{background-color:green;}
#form_change_name{
margin-bottom: 15px;
}
@@ -1824,7 +1903,7 @@ label.checkbox :checked + span {
margin: 0px;
}
label.checkbox :checked + span:after {
content: '\2714';
content: '\2714'; /*unicode 'heavy checkmark'*/
font-size: 18px;
position: absolute;
top: -3px;
@@ -1847,8 +1926,6 @@ label.checkbox :checked + span:after {
grid-template-columns: auto auto;
}
#shadow_character_popup{
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
@@ -1865,8 +1942,8 @@ label.checkbox :checked + span:after {
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
grid-template-rows: 50px 100px 100px 40px auto 45px 45px;
max-width: 802px; /* 802 instead of 800 to cover #chat's scrollbars entirely */
height: 90vh; /* imperfect calculation designed to match the chat height, which is auto-set to (100% - form_sheld height) */
max-width: 800px;
height: calc(100vh - 50px);
position: absolute;
z-index: 2065;
margin-left: auto;
@@ -1877,7 +1954,7 @@ label.checkbox :checked + span:after {
box-shadow: 0 0 2px rgb(0 0 0 / 50%);
padding: 4px;
border: 1px solid rgba(0,0,0,0.3);
/*border-radius: 0 0 40px 40px;*/
border-radius: 0 0 20px 20px;
}
#character_popup h5 a{
color: #936f4a;
@@ -2013,8 +2090,6 @@ label.checkbox :checked + span:after {
margin-left: 5px;
margin-top: 30px;
scrollbar-width: thin;
/* width: 900px; */
/* height: 80%; */
overflow: hidden;
overflow-y: scroll;
max-width:430px;
@@ -2062,28 +2137,21 @@ label.checkbox :checked + span:after {
width:30px;
}
#advanced_div{
font-size: 14px;
font-size: 1rem;
background-repeat: no-repeat;
background-size: 28px;
background-position: 92px 5px;
/* background-image: url('img/book5.png'); */
width: 92%;
height: 40px;
margin-left: 10px;
font-weight: bold;
color: #ffffffbb;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: rgba(0,0,0,0.3);
opacity: 1.0;
/*font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/
opacity: 0.7;
}
#advanced_book_logo{
width: 35px;
@@ -2124,42 +2192,6 @@ body {
height: 100%;
}
/*body {
color: rgb(229, 224, 216);
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background-color: #f1f1f1;
}*/
main {
max-width: 1024px;
margin: 0 auto
}
article {
margin: 0 1em;
padding: 0 22px;
-webkit-transition: -webkit-transform .3s;
-moz-transition: : -moz-transform .3s;
transition: transform .3s;
}
header {
margin: 0;
padding: 0;
text-align: center;
}
footer {
font-size: 14px;
text-align: center
}
p {
margin-bottom: 16px;
margin-top:0;
@@ -2187,7 +2219,6 @@ h1 {
}
h2 {
font-size: 1.5rem;
line-height: 1.75rem;
margin-top: 5px;
@@ -2222,7 +2253,6 @@ a {
padding: .5rem 1rem;
font-size: 1rem;
font-weight: 400;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
.btn {
@@ -2245,13 +2275,12 @@ a {
background-color: transparent;
}
/* Right nav panel */
/* default position is 450px to the right, off screen*/
/* it is position:fixed, so it's never affected by the location/size of any other element */
/* Right nav */
.nav {
#right-nav-panel{
width: 450px;
/*min-width: 450px;*/
height: 100%;
position: fixed;
top: 0;
@@ -2270,62 +2299,60 @@ a {
border-left: 1px solid rgba(0,0,0,0.3);
}
.nav-toggle {
border-radius: 5px;
/* this is the class of the visible LABEL for the hidden #nav-toggle div checkbox*/
/* it is displaced 455px to the left of the #right-nav-paneldiv, this keeps it on screen while the #right-nav-panel is held off screen to the right */
#nav-toggle {
position: absolute;
right: 455px;
top: 5px;
padding: 5px;
backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);
border: 1px solid rgba(255,255,255,0.5);
color: rgba(255,255,255,0.5);
right: 13px;
top: 12px;
padding: 0px;
margin: 0px;
cursor: pointer;
font-size: 1.25rem;
line-height: 1rem;
height:30px;
z-index: 2001;
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
height: 0;
width: 0;
z-index: 3001;
}
.nav-toggle:after {
content: '\2630';
text-decoration: none;
}
.nav-toggle:hover {
#nav-toggle:hover::after {
color: #f4f4f4;
}
[id='nav-toggle'] {
position: absolute;
display: none;
#nav-toggle::after {
content: '\2630';
line-height: 30px;
font-size: 2em;
padding: 0;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 30px;
height: 30px;
margin-top: -8px;
margin-left: -24px;
border: 1px solid #666;
border-radius: 5px;
background: rgba(0, 0, 0, 0.3);
color: #666;
-webkit-transition: all 0.275s;
transition: all 0.275s;
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
left: auto;
right: 5px;
top: 5px;
}
[id='nav-toggle']:checked ~ .nav {
right: 0;
box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.50);
overflow-y: auto;
}
[id='nav-toggle']:checked ~ main > article {
-webkit-transform: translateX(-450px);
-moz-transform: translateX(-450px);
transform: translateX(-450px);
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
#nav-toggle:checked::after {
content: '\2715';
line-height: 30px;
font-size: 2em;
}
/* this affects the #right-nav-panel div ONLY WHEN the nav-toggle checkbox is checked*/
/* the #right-nav-panel is moved to the right edge of the screen*/
/* this is what causes the panel movement */
#nav-toggle:checked ~ #right-nav-panel{
right: 0px;
box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.50);
overflow-y: auto;
}
body {
@@ -2359,130 +2386,8 @@ body {
}
#sheld {}
.nav {
#right-nav-panel{
width: 100%;
box-shadow: none
}
}
.nav > ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.nav > ul > li {
line-height: 2.5;
opacity: 0;
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
transition: opacity .5s .1s, transform .5s .1s;
}
[id='nav-toggle']:checked ~ .nav > ul > li {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.nav > ul > li:nth-child(2) {
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
transition: opacity .5s .2s, transform .5s .2s;
}
.nav > ul > li:nth-child(3) {
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
transition: opacity .5s .3s, transform .5s .3s;
}
.nav > ul > li:nth-child(4) {
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
transition: opacity .5s .4s, transform .5s .4s;
}
.nav > ul > li:nth-child(5) {
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
transition: opacity .5s .5s, transform .5s .5s;
}
.nav > ul > li:nth-child(6) {
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
transition: opacity .5s .6s, transform .5s .6s;
}
.nav > ul > li:nth-child(7) {
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
transition: opacity .5s .7s, transform .5s .7s;
}
.nav > ul > li > a {
display: inline-block;
position: relative;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 1.2em;
color: #dadada;
width: 100%;
text-decoration: none;
-webkit-transition: color .5s ease, padding .5s ease;
-moz-transition: color .5s ease, padding .5s ease;
transition: color .5s ease, padding .5s ease;
}
.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
color: white;
padding-left: 15px;
}
.nav > ul > li > a:before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 100%;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}
.nav > ul > li > a:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #3bc1a0;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
.nav > ul > li > a:hover:before {
width: 0%;
background: #3bc1a0;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
.nav > ul > li > a:hover:after {
width: 0%;
background: transparent;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}