From a34592b397f9da2744352b24309ae01618f88bf5 Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Fri, 10 Feb 2023 01:15:22 +0900 Subject: [PATCH] CSS/JS/HTML edits Grey CSS, expandable input bar, online indicator moved to under send button --- public/index.html | 91 ++++++-- public/style.css | 544 +++++++++++++++++++++++++++++----------------- 2 files changed, 415 insertions(+), 220 deletions(-) diff --git a/public/index.html b/public/index.html index e19a7131c..b6e597c63 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,17 @@ + + + + + + + + + + + @@ -37,7 +48,7 @@ create_date: 0, mes: '\n*You went inside. The air smelled of fried meat, tobacco and a hint of wine. A dim light was cast by candles, and a fire crackled in the fireplace. It seems to be a very pleasant place. Behind the wooden bar is an elf waitress, she is smiling. Her ears are very pointy, and there is a twinkle in her eye. She wears glasses and a white apron. As soon as she noticed you, she immediately came right up close to you.*\n\n' + ' Hello there! How is your evening going?\n' + - '\n@@@TavernAI v'+VERSION+'@@@
Cloud




' + '\n@@@TavernAI v'+VERSION+'@@@
Cloud




' }]; var chat_create_date = 0; @@ -136,6 +147,29 @@ var css_send_form_display = $('
').css('display'); var colab_ini_step = 1; + + // VARIABLES DONE NOW THE REAL CODE + // + // + // + + // Dealing with Textarea Height + + //function textAreaAdjust(element) { + // element.style.height = "1px"; + // element.style.height = (25+element.scrollHeight)+"px"; + //} + //function calcHeight(value) { + // let numberOfLineBreaks = (value.match(/\n/g) || []).length; + // // min-height + lines x line-height + padding + border + // let newHeight = 25 + numberOfLineBreaks * 25 + 6 + 1; + // return newHeight; + //} + //let textarea = document.querySelector(".resize-ta"); + //textarea.addEventListener("keyup", () => { + //textarea.style.height = calcHeight(textarea.value) + "px"; + //}); + setInterval(function() { switch(colab_ini_step){ case 0: @@ -157,6 +191,9 @@ } }, 500); ///////////// + + + getSettings("def"); getLastVersion(); @@ -184,7 +221,7 @@ is_get_status_novel = false; }else{ $("#online_status_indicator").css("background-color", "black"); - $("#online_status").css("opacity", 0.0); + $("#online_status").css("display", "none"); $("#online_status_text").html(""); $("#online_status_indicator2").css("background-color", "green"); $("#online_status_text2").html(online_status); @@ -578,7 +615,7 @@ //$("#send_textarea").blur(); $( "#send_but" ).css("display", "none"); - $( "#loading_mes" ).css("display", "block"); + $( "#loading_mes" ).css("display", "inline-block"); var storyString = ""; @@ -1035,7 +1072,7 @@ getMessage = $.trim(getMessage); chat[chat.length-1]['mes'] = getMessage; addOneMessage(chat[chat.length-1]); - $( "#send_but" ).css("display", "block"); + $( "#send_but" ).css("display", "inline"); $( "#loading_mes" ).css("display", "none"); saveChat(); }else{ @@ -1043,7 +1080,7 @@ Generate('force_name2'); } }else{ - $( "#send_but" ).css("display", "block"); + $( "#send_but" ).css("display", "inline"); $( "#loading_mes" ).css("display", "none"); } }, @@ -1051,7 +1088,7 @@ $("#send_textarea").removeAttr('disabled'); is_send_press = false; - $( "#send_but" ).css("display", "block"); + $( "#send_but" ).css("display", "inline"); $( "#loading_mes" ).css("display", "none"); console.log(exception); console.log(jqXHR); @@ -2741,6 +2778,7 @@ }); });      + Tavern.AI @@ -3036,38 +3074,53 @@
-
- +

- + -
+ + + +
+ +
+ +
+
+
No connection...
+
+ + + +
+
-
+
- - - - - + \ No newline at end of file diff --git a/public/style.css b/public/style.css index f5f5a6693..9a1a60768 100644 --- a/public/style.css +++ b/public/style.css @@ -4,13 +4,16 @@ @font-face { font-family: "My Custom Font"; src: url(fonts/Comic_CAT.otf) format("truetype"); + font-family: "Noto Sans", "Noto Color Emoji", sans-serif; } -p.customfont { - font-family: "My Custom Font", Verdana, Tahoma; +.customfont { + font-family: "Noto Sans", "Noto Color Emoji", sans-serif; } + body { margin: 0; - background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png); + + background-color: rgb(36, 37, 37); background-size: auto 100%; background-repeat: no-repeat; background-attachment: fixed; @@ -18,7 +21,10 @@ body { 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; + color: rgb(229, 224, 216); + -webkit-font-smoothing: antialiased; } .mes_text i { color: grey !important; @@ -50,9 +56,12 @@ code { white-space: pre-wrap; word-wrap: break-word; } + +/* #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-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png); + background: url(backgrounds/tavern.png); + background-size: auto 100%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; @@ -63,7 +72,8 @@ code { z-index: -2; } #bg2{ - background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png); + //background: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(backgrounds/tavern.png); + background: url(backgrounds/tavern.png); background-size: auto 100%; background-repeat: no-repeat; background-attachment: fixed; @@ -76,34 +86,39 @@ code { width: 100%; height: 100%; z-index: -1; -} +} +*/ + #sheld { display: grid; - grid-template-rows: auto 145px; - background: #191b3133; + grid-template-rows: [chat] auto [inputform] min-content; /*minmax(10px, 10vh); + /*background: #191b3133;*/ height: 100vh; overflow: auto; overflow-x: hidden; - overflow-y: 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; /* Поля вокруг текста */ */ + border-bottom: 1px solid #333; + margin-top:40px; + + /*optional dark mode with blur and borders*/ + /* + background: #00000050; + border-bottom:1px solid #00000070; + border-left:1px solid #00000070; + border-right:1px solid #00000070; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + */ } ::-webkit-scrollbar { @@ -112,7 +127,7 @@ code { } ::-webkit-scrollbar-track { - background-color: #191b31; + /*background-color: #191b31;*/ } ::-webkit-scrollbar-thumb { @@ -121,109 +136,114 @@ code { 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; */ + padding: 10px 0 10px 0; + width:90%; + margin: 0 auto 0 auto; + background-color:rgb(36,37,37); + /*border:1px solid red;*/ } + +/*#form_sheld * {border:1px solid red;!important}*/ + #send_form { display: grid; - grid-template-columns: 35px auto 60px; - /* background: green; */ + grid-template-columns: 40px auto 40px; width: 100%; - margin-left: auto; - margin-right: auto; + margin: 0 auto 0 auto; + border: 1px solid #333; + border-radius: 40px; + /*padding:10px;*/ } #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; + font-size: 1rem; + line-height: 1.5rem; + min-height: calc(1.5em + 0.75rem + 2px); + max-height: 50vh; + word-wrap: breakword; + height: 40px; + resize: vertical; + display: block; + background-color: rgb(36,37,37); + border: 0px; + box-shadow: none !important; /*0 0 0px rgb(200 200 200 / 50%);*/ + padding:6px 0 6px 0; + font-family: "Noto Sans", sans-serif; + margin: 0; } #send_but_sheld{ - /* display:inline-block; */ - /* height: 100%; */ - /* margin-left: 17px; */ - /* background: blue; */ + + padding: 0; + border: 0; + height: 40px; + width: 40px; + position: relative; + top: 50%; + transform: translate(0%,-50%); + } #send_but{ - /* visibility: visible; */ - width: 100%; - margin: 0 auto; - margin-left: 4px; - display: block; - height: 100%; + + width: 40px; + height: 40px; + margin: 0; + display: inline; + padding:1px; background: url('img/send3.png') no-repeat top left; background-size: 26px auto; background-position: center center; outline: none; + outline: none; border: none; cursor: pointer; } #loading_mes{ display: none; - width: 100%; - height: 100%; + width: 40px; + height: 40px; margin: 0 auto; - margin-left: 2px; - /* visibility: collapse; */ + /*margin-left: 2px;*/ background: url('img/load.svg') no-repeat top left; - background-size: 45px 45px; + background-size: 26px 26px; background-position: center center; } + #options_button{ - margin-top: 0px; cursor: pointer; - /* opacity: 0.5; */ - position: block; + position: relative; + top: 50%; + transform: translateY(-50%); width:40px; - height: 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; */ + //background-color: blue; z-index:1990; } + + .options-content { overflow: hidden; display: block; position: absolute; - background-color: #191b31F3; + background-color: rgb(37, 38, 38); + border: 1px solid #444; min-width: 205px; z-index: 1; - /* bottom: 1px; */ + //bottom: 1px; } /* Ссылки внутри выпадающего блока */ @@ -241,6 +261,7 @@ code { text-decoration: none; display: block; } + .options-content img { opacity: 0.5; margin-right: 5px; @@ -254,56 +275,39 @@ code { 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; */ + padding: 5px; + padding-left: 15px; 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; + width: 60px; + height: 60px; + border-style: none; } .avatar img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - border-radius: 10px; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; + border-radius: 50%; } + + .mes_block{ - padding-top: 4px; - padding-left: 35px; + padding-top: 0px; + padding-left: 20px; } .ch_name{ - /* background: green; */ + font-weight:bolder; } .mes_text{ - /* background: olive; */ - - font-weight:lighter; - padding-top: 3px; - margin-bottom: 10px; + font-weight:400; padding-right: 40px; max-width: 720px; word-wrap: break-word; @@ -334,22 +338,21 @@ br { textarea{ width:100%; font-size: 11pt; - height: 400px; - resize: none; + resize: vertical; /*none;*/ display:block; - background-color: #13152c; + background-color: rgb(40, 42, 42); 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; + font-size: 15px; /*18px;*/ + font-family: "Noto Sans", "Noto Color Emoji", sans-serif; margin-left: 10px; margin-top: 10px; } #rm_ch_create_block textarea { - font-size: 11pt; + font-size: 15px; } #description_textarea{ @@ -369,14 +372,10 @@ textarea{ } .text_pole{ - border:0px solid grey; box-shadow: 0 0 2px rgba(200,200,200,0.5); - background-color: #13152c; - /* padding: 10px; */ - + background-color: rgb(36, 37, 37); 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; @@ -388,7 +387,7 @@ textarea{ .right_menu{ - /* padding: 15px 20px; */ + max-height: 86%; overflow: hidden; overflow-y: auto; @@ -413,6 +412,7 @@ textarea{ padding: 0px; margin-left: 10px; margin-bottom: 5px; + font-size:0.75rem; } input:focus, textarea:focus, select:focus{ @@ -425,7 +425,7 @@ input::file-selector-button { padding: 0.5em; border: thin solid rgba(200,200,200,0.2); border-radius: 3px; - background-color: #191b31; + background-color: rgb(36,37,37); cursor: pointer; } input[type=submit] { @@ -434,7 +434,7 @@ input[type=submit] { padding: 0.5em; border: thin solid rgba(200,200,200,0.2); border-radius: 3px; - background-color: #191b31; + background-color: rgb(36, 37, 37); } input[type=button] { font-weight: bold; @@ -442,17 +442,16 @@ input[type=button] { padding: 0.5em; border: thin solid rgba(200,200,200,0.2); border-radius: 3px; - background-color: #191b31; + background-color: rgb(36, 37, 37); } .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; + margin-top:0px; } @@ -484,11 +483,15 @@ input[type=button] { /* visibility: hidden; */ } #api_url_text{ - margin-right: 4px; + /*margin-right: 4px;*/ + display:block; } #api_button{ cursor: pointer; color:#ffffffaa; + padding-left: 7px; + margin-left: 10px; + margin-top: 5px; } #api_button_novel{ cursor: pointer; @@ -506,23 +509,89 @@ input[type=button] { display: none; } + +/* RossAscends: doubling the API status/form CSS to place it on bottom below SHELD form*/ + +#api_loading-bottom{ + width: 25px; + height: 25px; + display: none; +} +#api_loading_novel-bottom{ + width: 25px; + height: 25px; + display: none; +} + +#online_status-bottom{ + opacity: 0.3; + /*width:100%;*/ + bottom: 0px; + left:45px; + display:block; +} + +#bottom-status-and-indicator-group{ + display:inline-block; + margin-left:45px; +} + +#online_status_indicator-bottom{ + border-radius: 7px; + width: 14px; + height: 14px; + background-color: red; + display: inline-block; +} +#online_status_text-bottom{ + margin-left: 4px; + font-size: 0.75rem; + display: inline-block; +} + +#connection-form-bottom{ /*the form*/ + float:right; + margin-right:45px; + display:inline-block; +} + +#api_url_text-bottom{ + font-size: 0.75rem; + padding:1px; + +} +#api_button-bottom{ + cursor: pointer; + color:#ffffffaa; + font-size:0.75rem; + padding:1px; + +} +#api_button_novel-bottom{ + cursor: pointer; + color:#ffffffaa; +} + +/*RossAscends: done doubling API css*/ + #rm_characters_block{ display: block; /* visibility: hidden; */ } .character_select{ - padding: 0px; + padding: 5px; border-radius: 10px; cursor:pointer; display: grid; grid-template-columns: 67px auto; } .character_select .avatar{ - height: 100px; + /*height: 100px;*/ } .character_select .ch_name{ margin-left: 10px; margin-top: 5px; + transform: translateY(25%); } .character_select:hover{ background-color: #ffffff11; @@ -543,8 +612,17 @@ input[type=button] { #rm_button_selected_ch{ } + +/*LEFT SIDE BG MENU*/ + +#logo_block{ + margin-top: 10px; + height:26px; + z-index:2000; +} + #bg_menu{ - margin-top: 5px; + margin-top: 0px; margin-left: 2px; cursor:pointer; position: absolute; @@ -557,6 +635,21 @@ input[type=button] { } +/*TOPPER margin*/ + +#bg2:after{ + content: "BLANK SPACE"; + width:100vw; + display: inline-block; + height:40px; + position:fixed; + background-color: #242525; + color:#242525; + border-bottom:1px solid #444; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + z-index:2000; +} + #site_logo{ opacity: 0.4; display: inline-block; @@ -571,7 +664,7 @@ input[type=button] { /* transition: 0.5s */ cursor: pointer; width: 20px; - /* background: #191b3188; */ + /* background: #191b3188; */ text-align: center; height: 20px; color: #ffffff88; @@ -583,15 +676,15 @@ input[type=button] { margin-bottom: 6px; } #bg_menu_content{ - margin-top: 0px; - margin-left: 6px; + margin-top: 5px; + margin-left: 0px; opacity: 0.0; /* padding-top: 10px; */ cursor:auto; display: block; width: 122px;/* 114px; */ height: 0px; - background: #191b3100; + background: #00000040;/*rgb(36,37,37);*/ overflow: hidden; overflow-y: hidden; @@ -599,7 +692,7 @@ input[type=button] { scrollbar-color: #ffffff11 #191b3111; } #bg_menu_content::-webkit-scrollbar-track { - background-color: #191b3111; + /*background-color: #191b3111;*/ } #bg_menu_content::-webkit-scrollbar-thumb { @@ -675,6 +768,8 @@ input[type=button] { vertical-align: top; display: inline-block; margin-top: 52px; + background-color: rgb(36, 37, 37); + border: 1px solid #444; } #description_div{ margin-top: 6px; @@ -764,7 +859,7 @@ input[type=button] { color: rgb(255 255 255); text-align: center; border-radius: 4px; - background-color: #419152; + background-color: rgb(36,37,37); line-height: 22px; height: 40px; width:89px; @@ -802,7 +897,8 @@ input[type=button] { margin-top: 36vh; box-shadow: 0 0 2px rgba(200,200,200,0.1); padding: 4px; - background: #191b3100; + background: rgb(36,37,37); + background-color: rgb(36, 37, 37); border-radius: 10px; } #dialogue_popup{ @@ -820,7 +916,7 @@ input[type=button] { margin-top: 36vh; box-shadow: 0 0 2px rgba(200,200,200,0.1); padding: 4px; - background: #191b31CC; + background-color: rgb(36, 37, 37); border-radius: 10px; } #dialogue_popup_ok{ @@ -835,8 +931,7 @@ input[type=button] { cursor: pointer; } #dialogue_del_mes{ - width:300px; - height: 150px; + width:100%; margin-left: auto; margin-right: auto; @@ -849,13 +944,13 @@ input[type=button] { #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{ @@ -864,16 +959,16 @@ input[type=button] { padding: 0.5em; border: thin solid rgba(200,200,200,0.2); border-radius: 3px; - background-color: #191b31; + background-color: rgb(36,37,37); } #dialogue_del_mes .menu_button{ font-weight: bold; font-size: 20px; - min-width: 100px; - min-height: 40px; + } #shadow_popup{ background-color: #00000066; + backdrop-filter: blur(50px); display: none; opacity: 0.0; position: absolute; @@ -902,22 +997,51 @@ input[type=button] { #online_status{ opacity: 0.3; - position: absolute; - /* left: 4px; */ - bottom: 0px; - margin-left: 9px; - margin-bottom: 15px; + /*position: relative;*/ + bottom: 48px; + margin-bottom: 0px; + float: right; + display: inline; + right: 3px; + } #online_status_indicator{ - border-radius: 7px; + /*big style over the send button*/ + + opacity: 0.5; + bottom: 0px; + height: 40px; + width: 40px; + background: red; + border-radius: 50%; + float: right; + display:inline; + + + + /*small left default*/ + /*border-radius: 7px; width: 14px; height: 14px; background-color: red; - display: inline-block; + display: inline-block;*/ + } + +#online_status_indicator:hover{ + + border:2px solid yellow; + opacity: 1; + } + + #online_status_text{ - margin-left: 4px; - display: inline-block; + display: inline; + font-size: 0.75rem; + vertical-align: middle; + margin-right: 60px; + position: relative; + top: 10px; } #online_status2{ opacity: 0.5; @@ -975,7 +1099,7 @@ select { width:95%; height: 34px; margin-left: 3px; - background-color: rgba(255, 255, 255, 0.09); + background-color: rgba(40, 42, 42, 1); font-size: 15px; border: 0; outline: 0; @@ -992,21 +1116,23 @@ select { margin-bottom: 35px; color: #ffffff9d; box-shadow: 0 0 2px rgba(200,200,200,0.5); - background-color:#13152c; + background-color: rgb(36, 37, 37); } + .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; + background-color: rgb(36, 37, 37); } #user_avatar_block{ margin-left: 6px; display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: auto auto; + margin-top: 10px; } #user_avatar_block .avatar{ cursor: pointer; @@ -1015,8 +1141,8 @@ select { height: 126px; } #user_avatar_block .avatar img{ - width: 90px; - height: 126px; + width: 90px; + height: 90px; } #temp{ margin-left: 10px; @@ -1090,7 +1216,7 @@ input[type="range"] { margin-top: 15vh; box-shadow: 5px 5px -5px -5px rgba(200,200,200,0.1); padding: 4px; - background: #191b31EE; + background: rgb(36,37,37); border-radius: 10px; } #shadow_tips_popup{ @@ -1130,6 +1256,7 @@ input[type="range"] { cursor:pointer; opacity:0.5; } + .mes_edit_cancel img{ width: 23px; height: 23px; @@ -1141,8 +1268,9 @@ input[type="range"] { border-color: transparent; outline: none; box-shadow: none; - background-color: transparent; + background-color: rgb(40, 42, 42); } + #your_name{ outline: none; /* box-shadow: 0 2px 0px rgba(255, 255, 255, 0.1); */ @@ -1198,7 +1326,7 @@ label.checkbox :checked + span:after { margin-bottom: 15px; color: #ffffff9d; box-shadow: 0 0 2px rgba(200,200,200,0.5); - background-color:#13152c; + background-color: rgb(36, 37, 37); } #anchor_checkbox{ margin-left: 10px; @@ -1209,7 +1337,10 @@ label.checkbox :checked + span:after { } + #shadow_character_popup{ + background-color: #00000066; + backdrop-filter: blur(50px); display: block; opacity: 1.0; position: absolute; @@ -1219,6 +1350,8 @@ label.checkbox :checked + span:after { } #character_popup{ display: none; + background-color: #00000066; + backdrop-filter: blur(50px); grid-template-rows: 50px 100px 100px 40px auto 45px 45px; max-width:800px; height: 83vh; @@ -1233,7 +1366,7 @@ label.checkbox :checked + span:after { margin-top: 0px; box-shadow: 0 0 2px rgba(200,200,200,0.1); padding: 4px; - background: #191b31F5; + background-color: rgb(36, 37, 37); border-radius: 1px; } #character_popup h5 a{ @@ -1299,15 +1432,17 @@ label.checkbox :checked + span:after { height: 100%; margin-top: 0px; } + #character_popup_ok{ cursor: pointer; - display: none;/* grid; */ + display: none; place-items: center; height: 40px; margin-top: 15px; - margin-left: 36px;/* 36px;329px;/ */ - /* margin-right: auto; */ - width: 110px;/* 80px */ + margin-left: 36px; + background-color: #00000066; + backdrop-filter: blur(50px); + width: 110px; text-align: center; } @@ -1320,6 +1455,7 @@ label.checkbox :checked + span:after { z-index: 2059; background-color: #00000066; } + #select_chat_popup{ display: block; grid-template-rows: 50px 100px 100px auto 45px; @@ -1336,7 +1472,7 @@ label.checkbox :checked + span:after { margin-top: 21vh; box-shadow: 0 0 2px rgba(200,200,200,0.1); padding: 4px; - background: #191b31F0; + background-color: rgb(36, 37, 37); border-radius: 5px; } #select_chat_popup a{ @@ -1409,7 +1545,19 @@ label.checkbox :checked + span:after { } .select_chat_block_mes{ margin-right: 6px; + font-size:0.75rem; } + +.select_chat_block .avatar { + height:30px; + width:30px; + } + + + + + + #advanced_div{ font-size: 14px; background-repeat: no-repeat; @@ -1424,9 +1572,9 @@ label.checkbox :checked + span:after { padding: 0.5em; border: thin solid rgba(200,200,200,0.2); border-radius: 3px; - background-color: #191b3133; + background-color: rgb(39, 40, 40); 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; + /*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; @@ -1467,12 +1615,12 @@ body { height: 100%; } -body { +/*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; - /* font: 1em 'Open Sans', sans-serif; */ + background-color: #f1f1f1; -} +}*/ @@ -1505,6 +1653,7 @@ footer { p { margin-bottom: 16px; + margin-top:0; } hr { @@ -1531,8 +1680,9 @@ h1 { h2 { color: #565d66; - font-size: 26px; - line-height: 26px; + font-size: 1.5rem; + line-height: 1.75rem; + margin-top: 5px; } a { @@ -1595,7 +1745,7 @@ a { .nav { width: 450px; - min-width: 450px; + /*min-width: 450px;*/ height: 100%; position: fixed; top: 0; @@ -1606,13 +1756,12 @@ 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; - background: #16a085; - - z-index: 2000; + z-index: 2050; box-shadow: 0 0 2px rgba(200,200,200,0.1); white-space:nowrap; - background: #191b31A0; + background: #222; + border-left: 1px solid #333; } @@ -1621,26 +1770,18 @@ a { .nav-toggle { border-radius: 5px; - position: absolute; - - right: 450px; - - top: 1em; - - padding: 0.5em; - - background: inherit; - + right: 455px; + top: 5px; + padding: 5px; + background: #333; + border: 1px solid #444; color: #dadada; - cursor: pointer; - - font-size: 1.2em; - line-height: 1; - + 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; @@ -1651,6 +1792,7 @@ a { .nav-toggle:after { content: '\2630'; text-decoration: none; + } @@ -1670,8 +1812,8 @@ a { [id='nav-toggle']:checked ~ .nav > .nav-toggle { left: auto; - right: 2px; - top: 1em; + right: 5px; + top: 5px; } @@ -1760,6 +1902,7 @@ body { -moz-transition: opacity 0.8s, -moz-transform 0.8s; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; } +} .nav h22 a { color: #dadada; @@ -1909,4 +2052,3 @@ body { -webkit-transition: width 0s ease; transition: width 0s ease; } -