Files
SillyTavern/public/style.css
Ash 7b87227cd2 Update 1.2.0 Theme of update: Characters
1) Character files now represent images, all data about the characters is located within the image file. This makes it easy to exchange characters.

You do not need to redesign your old characters in the new format, the conversion will happen automatically, old character files will not be deleted

2) Import function for characters is available, you can also import characters in the old TavernAI .json format, and you can also import characters from the Pygmalion notebook format

3) Export function for characters is available

4) The chat structure has been completely redesigned, now chats are located in the public/chats folder, chats now represent jsonl files, messages can be read one line at a time from such a file, this will help for future optimization when there are many messages

5) A new menu for selecting saved TavernAI chats is now available

Importing TavernAI chats is now available

Importing chats from CAI is now available

6) Additional advanced settings have been added for characters. A "Scenario" field has been added, as well as a "Dialogue Examples" field

7) Full support for the Pygmalion format has been added

A indicator now appears when special formatting for Pygmalion is enabled

8) Many other minor bugs have been fixed

To update an old version to version 1.2.0, you simply need to copy files with replacement.
2023-01-24 17:30:40 +04:00

1394 lines
27 KiB
CSS

@font-face {
font-family: "My Custom Font";
src: url(fonts/Comic_CAT.otf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
body {
margin: 0;
background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
backdrop-filter: blur(2px);
scrollbar-width: thin;
scrollbar-color: gray #191b31;
}
#bg1{
background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
filter: blur(2px);
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
}
#bg2{
background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-attachment: fixed;
filter: blur(2px);
background-size: cover;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
opacity: 0.0;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#sheld {
display: grid;
grid-template-rows: auto 145px;
background: #191b3133;
height: 100vh;
overflow: auto;
overflow-x: hidden;
overflow-y: hidden;
max-width:800px;
margin-left: auto;
margin-right: auto;
//border-right: 0.1px solid gray;
//border-left: 0.1px solid gray;
//box-shadow: 0 0 2px rgba(200,200,200,0.1);
}
#chat {
scrollbar-width: thin;
//width: 900px;
//height: 80%;
overflow: hidden;
overflow-y: scroll;
background: #191b3100;
//white-space:nowrap;
//margin-left: 30%; /* Отступ слева */
//width: 40%; /* Ширина слоя */
//padding: 10px; /* Поля вокруг текста */
}
::-webkit-scrollbar {
width: .60em;
//background-color: blue;
}
::-webkit-scrollbar-track {
background-color: #191b31;
}
::-webkit-scrollbar-thumb {
background: gray;
border-radius: 1px;
box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}
#form_sheld {
//box-shadow: 0 0 2px rgba(200,200,200,0.5);
box-shadow: 0 0 2px rgba(200,200,200,0.1);
white-space:nowrap;
background: #191b31A0;
//height: 10%;
//margin-left: 30%; /* Отступ слева */
//width: 95%; /* Ширина слоя */
//padding: 10px; /* Поля вокруг текста */
//background: red;
//margin-left: auto;
//margin-right: auto;
}
#send_form {
display: grid;
grid-template-columns: 35px auto 60px;
//background: green;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#send_textarea{
//width:100%;
font-size: 11pt;
height: 89px;
resize: none;
display:inline-block;
background-color: #13152c;
outline: none !important;
border:0px solid grey;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
padding: 10px;
color: #e6e6e6;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 18px;
margin-left: 10px;
margin-top: 10px;
}
#send_but_sheld{
//display:inline-block;
//height: 100%;
//margin-left: 17px;
//background: blue;
}
#send_but{
//visibility: visible;
width: 100%;
margin: 0 auto;
margin-left: 4px;
display: block;
height: 100%;
background: url('img/send3.png') no-repeat top left;
background-size: 26px auto;
background-position: center center;
outline: none;
border: none;
cursor: pointer;
}
#loading_mes{
display: none;
width: 100%;
height: 100%;
margin: 0 auto;
margin-left: 2px;
//visibility: collapse;
background: url('img/load.svg') no-repeat top left;
background-size: 45px 45px;
background-position: center center;
}
#options_button{
margin-top: 0px;
cursor: pointer;
//opacity: 0.5;
position: block;
width:40px;
height: 40px;
background-image: url('img/options2.png');
background-size: contain;
background-repeat: no-repeat;
//background-size: 20px;
}
#options{
border-radius: 5px;
opacity: 0.0;
display: none;
width: 200px;
height: 100px;
bottom: 196px;
position: relative;
//background-color: blue;
z-index:1990;
}
.options-content {
overflow: hidden;
display: block;
position: absolute;
background-color: #191b31F3;
min-width: 205px;
z-index: 1;
//bottom: 1px;
}
/* Ссылки внутри выпадающего блока */
.options-content hr {
margin: 0px;
padding: 0px;
border-top: 1px solid #ffffff11;
}
.nav 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;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.options-content img {
opacity: 0.5;
margin-right: 5px;
}
/* Изменяем цвет ссылки при наведении */
.options-content a:hover {background-color: #ffffff05}
.mes {
display: grid;
grid-template-columns: fit-content(60px) 60px auto;
border-radius: 5px;
box-shadow: 0 0 2px rgba(200,200,200,0.1);
padding: 4px;
background: #191b31CC;
//box-shadow: 0 0 2px rgba(200,200,200,0.5);
//display: inline-block;
vertical-align: top;
width: 100%;
//height:60px;
//background: red;
//font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: rgb(229, 224, 216);
font-size: 18px;
//background: blue;
margin-bottom: 26px;
}
.avatar {
//box-shadow: 0 0 2px rgba(200,200,200,0.5);
//background: #13152c;
width: 67px;
height: 103px;
border-style: none;
padding:6px;
padding-bottom:20px;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 10px;
}
.mes_block{
padding-top: 4px;
padding-left: 35px;
}
.ch_name{
//background: green;
font-weight:bolder;
}
.mes_text{
//background: olive;
font-weight:lighter;
padding-top: 3px;
margin-bottom: 10px;
padding-right: 40px;
max-width: 720px;
word-wrap: break-word;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
.mes_text::after {
content: "▋";
animation: blink 1s steps(1) infinite;
opacity: 0.7;
display: none;
}
@keyframes blink {
60% {
visibility: hidden;
}
}
.mes_text i{
//color: rgb(229, 224, 216, 0.5);
}
br {
display: block;
margin: 3px 0;
}
textarea{
width:100%;
font-size: 11pt;
height: 400px;
resize: none;
display:block;
background-color: #13152c;
outline: none !important;
border:0px solid grey;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
padding: 10px;
color: #cacaca;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 18px;
margin-left: 10px;
margin-top: 10px;
}
#rm_ch_create_block textarea {
font-size: 11pt;
}
#description_textarea{
width: 92%;
height: 200px;
margin-top: 0px;
}
#character_name_pole{
width: 92%;
}
#firstmessage_textarea{
width: 92%;
height: 140px;
margin-top: 0px;
}
.text_pole{
border:0px solid grey;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
background-color: #13152c;
//padding: 10px;
margin-left: 10px;
padding: 10px;
color: #ffffffaa;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 18px;
size: 10;
font-size: 11pt;
padding: 7px;
}
.right_menu{
//padding: 15px 20px;
max-height: 86%;
overflow: hidden;
overflow-y: auto;
scrollbar-width: thin;
}
.right_menu h3 {
margin: 0px;
padding: 0px;
margin-left: 10px;
}
.right_menu h4 {
margin: 0px;
padding: 0px;
margin-left: 10px;
margin-bottom: 1px;
}
.right_menu h5 {
color: #757575;
margin: 0px;
padding: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
input::file-selector-button {
font-weight: bold;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: #191b31;
cursor: pointer;
}
input[type=submit] {
font-weight: bold;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: #191b31;
}
input[type=button] {
font-weight: bold;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: #191b31;
}
.right_menu_button{
display:inline-block;
//box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
text-align: center;
padding-left: 4px;
padding-right: 4px;
margin-top:3px;
}
#character_import_button{
cursor: pointer;
display: inline-block;
margin-left: 15px;//274px;
margin-top: 6px;//10px;
}
#character_import_button h2{
margin-top: auto;
margin-bottom: auto;
font-size: 17px;
color: rgb(188, 193, 200, 0.5);
}
.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;
}
#rm_api_block{
display: none;
padding-bottom: 5px;
//visibility: hidden;
}
#api_url_text{
margin-right: 4px;
}
#api_button{
cursor: pointer;
color:#ffffffaa;
}
#api_button_novel{
cursor: pointer;
color:#ffffffaa;
}
#api_loading{
width: 25px;
height: 25px;
display: none;
}
#api_loading_novel{
width: 25px;
height: 25px;
display: none;
}
#rm_characters_block{
display: block;
//visibility: hidden;
}
.character_select{
padding: 0px;
border-radius: 10px;
cursor:pointer;
display: grid;
grid-template-columns: 67px auto;
}
.character_select .avatar{
height: 100px;
}
.character_select .ch_name{
margin-left: 10px;
margin-top: 5px;
}
.character_select:hover{
background-color: #ffffff11;
}
#avatar_url_div{
display: none;
}
#selected_chat_div{
display: none;
}
#create_date_div{
display: none;
}
#last_mes_div{
display: none;
}
#rm_button_selected_ch{
}
#bg_menu{
margin-top: 5px;
margin-left: 2px;
cursor:pointer;
position: absolute;
z-index: 2050;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#site_logo{
opacity: 0.4;
display: inline-block;
width: 130px;
height: 20px;
vertical-align: top;
margin-left: 1px;
}
#bg_menu_button{
display: inline-block;
opacity: 0.4;
//transition: 0.5s
cursor: pointer;
width: 20px;
//background: #191b3188;
text-align: center;
height: 20px;
color: #ffffff88;
}
#bg_menu_button img{
width: 20px;
height: 20px;
margin-bottom: 6px;
}
#bg_menu_content{
margin-top: 0px;
margin-left: 6px;
opacity: 0.0;
//padding-top: 10px;
cursor:auto;
display: block;
width: 122px;//114px;
height: 0px;
background: #191b3100;
overflow: hidden;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #ffffff11 #191b3111;
}
#bg_menu_content::-webkit-scrollbar-track {
background-color: #191b3111;
}
#bg_menu_content::-webkit-scrollbar-thumb {
background: #ffffff11;
border-radius: 1px;
box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}
.bg_example {
//box-shadow: 0 0 2px rgba(200,200,200,0.5);
//background: #13152c;
width: 103px;
height: 83px;
border-style: none;
padding:6px;
padding-bottom:20px;
position: relative;
margin-left: 3px;
}
.bg_example_img {
cursor: pointer;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 10px;
}
.bg_example_cross {
width:12px;
height:12px;
position: absolute;
float: right;
right: 10px;
top: 10px;
cursor: pointer;
opacity: 0.4;
}
.bg_example_but_load {
margin-left: 3px;
//box-shadow: 0 0 2px rgba(200,200,200,0.5);
//background: #13152c;
width: 103px;
height: 83px;
border-style: none;
padding:6px;
padding-bottom:20px;
}
.bg_example_but_load img {
cursor: pointer;
width: 91px;
height: 57px;
object-fit: cover;
object-position: center center;
border-radius: 10px;
opacity: 0.1;
}
#add_bg_button{
margin-bottom: 2px;
}
.avatar_div{
margin-top: 16px;
}
.avatar_div .avatar{
margin-left: 4px;
display: inline-block;
}
#add_avatar_button{
vertical-align: top;
display: inline-block;
margin-top: 52px;
}
#description_div{
margin-top: 6px;
}
#first_message_div{
margin-top: 20px;
}
#advanced_div{
margin-top: 20px;
cursor: pointer;
}
#create_button{
opacity: 0.8;
margin-left: 9px;
margin-top: 8px;
margin-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
#rm_info_block{
display: none;
width: 100%;
height: 80%;
justify-content: center;
flex-direction: column;
}
#rm_info_panel{
font-size: 20px;
display: block;
text-align: center;
}
#rm_info_button{
width: 100px;
margin-top: 10px;
font-size: 20px;
display: block;
cursor: pointer;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#rm_info_avatar{
width: 69px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#delete_button{
opacity: 0.51;//0.5
cursor: pointer;
display: block;
float:right;
margin-top: 25px;
margin-right: 10px;
color: #ffffff68;//66
}
#export_button{
opacity: 0.51;
cursor: pointer;
display: block;
float:right;
margin-top: 25px;
margin-right: 16px;
color: #ffffff68;
}
#result_info{
margin-left: 10px;
size: 10px;
color: #ffffff33;
}
.input-file {
display: block;
}
.input-file-btn {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
text-decoration: none;
font-size: 14px;
vertical-align: middle;
color: rgb(255 255 255);
text-align: center;
border-radius: 4px;
background-color: #419152;
line-height: 22px;
height: 40px;
width:89px;
padding: 10px 20px;
box-sizing: border-box;
border: none;
margin: 0;
transition: background-color 0.2s;
}
.input-file input[type=file] {
//position: absolute;
z-index: -1;
opacity: 0;
display: block;
width: 0;
height: 0;
}
#form_bg_download{
margin-bottom: 2px;
}
/* Focus */
#dialogue_popup{
width:300px;
height: 150px;
position: absolute;
z-index: 2060;
background-color: blue;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top: 36vh;
box-shadow: 0 0 2px rgba(200,200,200,0.1);
padding: 4px;
background: #191b31CC;
border-radius: 10px;
}
#dialogue_popup_ok{
display: inline-block;
margin-right: 20px;
background-color: #791b31;
cursor: pointer;
}
#dialogue_popup_cancel{
display: inline-block;
margin-left: 20px;
cursor: pointer;
}
#dialogue_del_mes{
width:300px;
height: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 4px;
}
#dialogue_del_mes_ok{
display: inline-block;
margin-right: 20px;
background-color: #791b31;
cursor: pointer;
}
#dialogue_del_mes_cancel{
display: inline-block;
margin-left: 20px;
cursor: pointer;
}
.menu_button{
font-weight: bold;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: #191b31;
}
#dialogue_del_mes .menu_button{
font-weight: bold;
font-size: 20px;
min-width: 100px;
min-height: 40px;
}
#shadow_popup{
background-color: #00000066;
display: none;
opacity: 0.0;
position: absolute;
width: 100%;
height: 100vh;
z-index: 2095;
}
#bgtest{
display: none;
width:100vw;
height: 100vh;
position: absolute;
z-index: -100;
background-color: red;
}
#online_status{
opacity: 0.3;
position: absolute;
//left: 4px;
bottom: 0px;
margin-left: 9px;
margin-bottom: 15px;
}
#online_status_indicator{
border-radius: 7px;
width: 14px;
height: 14px;
background-color: red;
display: inline-block;
}
#online_status_text{
margin-left: 4px;
display: inline-block;
}
#online_status2{
opacity: 0.5;
margin-top: 2px;
margin-left: 10px;
margin-bottom: 30px;
}
#online_status_indicator2{
border-radius: 7px;
width: 14px;
height: 14px;
background-color: red;
display: inline-block;
}
#online_status_text2{
margin-left: 4px;
display: inline-block;
}
#online_status3{
opacity: 0.5;
margin-top: 2px;
margin-left: 10px;
margin-bottom: 30px;
}
#online_status_indicator3{
border-radius: 7px;
width: 14px;
height: 14px;
background-color: red;
display: inline-block;
}
#online_status_text3{
margin-left: 4px;
display: inline-block;
}
.del_checkbox{
display: none;
opacity: 0.5;
accent-color: #ffffff;
//background-color: green;
width: 20px;
height: 20px;
}
#dialogue_del_mes{
display: none;
}
.for_checkbox{
display: block;
}
select {
//font-size: .9rem;
//border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
color: #ffffff66;
padding: 5px 10px;
width:95%;
height: 34px;
margin-left: 3px;
background-color: rgba(255, 255, 255, 0.09);
font-size: 15px;
border: 0;
outline: 0;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
margin-top: 5px;
margin-bottom: 45px;
}
#title_api{
margin-left: 3px;
}
#settings_perset{
width:284px;
margin-left: 10px;
margin-bottom: 35px;
color: #ffffff9d;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
background-color:#13152c;
}
.option_select_right_menu{
width:284px;
margin-left: 10px;
margin-bottom: 35px;
color: #ffffff9d;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
background-color:#13152c;
}
#user_avatar_block{
margin-left: 6px;
display: grid;
grid-template-columns: auto auto auto;
}
#user_avatar_block .avatar{
cursor: pointer;
margin-bottom: 30px;
width: 90px;
height: 126px;
}
#user_avatar_block .avatar img{
width: 90px;
height: 126px;
}
#temp{
margin-left: 10px;
margin-bottom: 20px;
}
#temp_counter{
margin-bottom: 0px;
}
#amount_gen{
margin-left: 10px;
margin-bottom: 20px;
}
#amount_gen_counter{
margin-bottom: 0px;
}
#max_context{
margin-left: 10px;
margin-bottom: 20px;
}
#max_context_counter{
margin-bottom: 0px;
}
#range_block input{
margin-left: 10px;
margin-bottom: 20px;
}
#range_block_novel input{
margin-left: 10px;
margin-bottom: 20px;
}
input[type="range"] {
-webkit-appearance: none;
margin-right: 15px;
width: 200px;
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;
}
#rm_api_block h4{
opacity: 0.85;
}
.nav h5 a{
color: #936f4a;
}
.nav h5 a:hover{
color: #998e6b;
}
.nav h4 a{
color: #936f4a;
}
.nav h4 a:hover{
color: #998e6b;
}
#tips_popup{
width:500px;
height: 600px;
position: absolute;
z-index: 2060;
background-color: blue;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top: 15vh;
box-shadow: 5px 5px -5px -5px rgba(200,200,200,0.1);
padding: 4px;
background: #191b31EE;
border-radius: 10px;
}
#shadow_tips_popup{
display: none;
opacity: 0.0;
position: absolute;
width: 100%;
height: 100vh;
z-index: 2055;
background-color: #00000066;
}
.mes_edit{
display: inline-block;
float:right;
//right:8px;
cursor:pointer;
margin-right: 4px;
opacity:0.07;
}
.mes_edit_done{
display: none;
float:right;
right:8px;
cursor:pointer;
margin-right: 15px;
opacity:0.5;
}
.mes_edit_done img{
width: 23px;
height: 23px;
}
.mes_edit_cancel{
display: none;
float:right;
//right:8px;
margin-right: 4px;
cursor:pointer;
opacity:0.5;
}
.mes_edit_cancel img{
width: 23px;
height: 23px;
}
.edit_textarea{
padding: 0px;
margin: 0px;
border: none;
border-color: transparent;
outline: none;
box-shadow: none;
background-color: transparent;
}
#your_name{
outline: none;
//box-shadow: 0 2px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0);
border: none;
background: transparent;
border: 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
#your_name_button {
opacity: 0.5;
margin-left: 10px;
cursor: pointer;
}
#form_change_name{
margin-bottom: 15px;
}
.checkbox{
display: block;
}
label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
display:inline-block;
border:1px solid #BBBBBB33;
border-radius:3px;
width:20px;
height:20px;
background:rgba(19,21,44,0.75);
vertical-align:middle;
margin:0px;
position: relative;
transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
background:rgba(19,21,44,0.75);
width:20px;
height:20px;
margin: 0px;
}
label.checkbox :checked + span:after {
content: '\2714';
font-size: 18px;
position: absolute;
top: -3px;
left: 2px;
color: #99a1a7;
}
#anchor_order{
width:284px;
margin-left: 10px;
margin-bottom: 15px;
color: #ffffff9d;
box-shadow: 0 0 2px rgba(200,200,200,0.5);
background-color:#13152c;
}
#anchor_checkbox{
margin-left: 10px;
float: left;
display: grid;
grid-template-rows: 30px auto;
grid-template-columns: auto auto;
}
#shadow_character_popup{
display: block;
opacity: 1.0;
position: absolute;
width: 100%;
height: 100vh;
z-index: 2058;
}
#character_popup{
display: none;
grid-template-rows: 50px 100px 100px 40px auto 45px 45px;
max-width:800px;
height: 83vh;
position: absolute;
z-index: 2065;
background-color: blue;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
//text-align: center;
margin-top: 0px;
box-shadow: 0 0 2px rgba(200,200,200,0.1);
padding: 4px;
background: #191b31F5;
border-radius: 1px;
}
#character_popup h5 a{
color: #936f4a;
}
#character_popup h5 a:hover{
color: #998e6b;
}
#character_popup h4 a{
color: #936f4a;
}
#character_popup h4 a:hover{
color: #998e6b;
}
#character_popup h3{
//margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#character_popup h4{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#character_popup h5{
margin-top: 0px;
margin-bottom: 3px;
margin-left: 0px;
color: #757575;
}
#character_popup_text{
margin-left: 36px;
}
#personality_div{
margin-left: 36px;
margin-top: 20px;
}
#personality_textarea{
width: 92%;
//height: 65px;
margin-top: 0px;
margin-left: 0px;
}
#scenario_div{
padding-top: 10px;
margin-left: 36px;
}
#mes_example_div{
margin-left: 36px;
max-height: 100%;
}
#scenario_pole{
width: 92%;
margin-left: 0px;
}
#mes_example_textarea{
margin-left: 36px;
width: 88%;
height: 100%;
margin-top: 0px;
}
#character_popup_ok{
cursor: pointer;
display: none;//grid;
place-items: center;
height: 40px;
margin-top: 15px;
margin-left: 36px;//36px;329px;/
//margin-right: auto;
width: 110px;//80px
text-align: center;
}
#shadow_select_chat_popup{
display: none;
opacity: 1.0;
position: absolute;
width: 100%;
height: 100vh;
z-index: 2059;
background-color: #00000066;
}
#select_chat_popup{
display: block;
grid-template-rows: 50px 100px 100px auto 45px;
max-width:450px;
height: 440px;
position: absolute;
z-index: 2066;
background-color: blue;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
//text-align: center;
margin-top: 21vh;
box-shadow: 0 0 2px rgba(200,200,200,0.1);
padding: 4px;
background: #191b31F0;
border-radius: 5px;
}
#select_chat_popup a{
color: #936f4a;
}
#select_chat_popup a:hover{
color: #998e6b;
}
#chat_import_button a{
color: #d5c9be;
}
#chat_import_button a:hover{
color: #998e6b;
}
#export_div{
cursor:pointer;
}
#load_select_chat_div{
position: absolute;
bottom: 154px;
left: 174px;
}
#load_select_chat_div img{
width: 80px;
height: 80px;
}
#select_chat_div{
margin-left: 5px;
margin-top: 30px;
scrollbar-width: thin;
//width: 900px;
//height: 80%;
overflow: hidden;
overflow-y: scroll;
max-width:430px;
height: 350px;
}
#select_chat_div hr{
margin: 0px;
}
#chat_import_button{
margin-top: 15px;
margin-left: 13px;
cursor:pointer;
}
.select_chat_block{
border-radius: 5px;
margin-right: 10px;
cursor:pointer;
display: grid;
grid-template-columns: 60px auto;
grid-template-rows: 26px auto;
}
.select_chat_block:hover {
background-color: #ffffff07;
}
.select_chat_block[highlight]{
background-color: #ffffff09;//#c2b07a12;
}
.select_chat_block .avatar{
grid-row: span 2;
}
.select_chat_block_filename{
opacity:0.5;
}
.select_chat_block_mes{
margin-right: 6px;
}
#advanced_div{
font-size: 14px;
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;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
border-radius: 3px;
background-color: #191b3133;
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;
}
#advanced_book_logo{
width: 35px;
height: 35px;
display: inline-block;
position: absolute;
top:19px;
}
#character_popup_text_h3{
display: inline-block;
margin-left: 38px;
}
#export_character_div{
display: grid;
grid-template-columns: 340px auto;
}