rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

A bunch of UI improvements.

Browse Source
This commit is contained in:
GuiAworld
2023-01-06 22:00:33 -03:00
parent 075296325f
commit f3d3e55fec
4 changed files with 101 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
static/koboldai.css
View File

@@ -17,7 +17,8 @@
overflow: hidden; overflow: hidden;
border-color: var(--setting_background); border-color: var(--setting_background);
width: calc(100% - 10px); width: calc(100% - 10px);
-webkit-appearance: none; /*-webkit-appearance: none; Looks WAAAAAYYY better without it -GuiAworld*/
padding-top: 1px;
background-color: var(--rangeslider_background_color); background-color: var(--rangeslider_background_color);
border-radius: 16px; border-radius: 16px;
margin-left: 5px; margin-left: 5px;
@@ -181,6 +182,7 @@ border-top-right-radius: var(--tabs_rounding);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
animation: 1s 1 normal grow-backY;
} }
#Images { #Images {
@@ -221,6 +223,48 @@ border-top-right-radius: var(--tabs_rounding);
width: calc(50% - 4px); width: calc(50% - 4px);
} }
/*Couldn't find a way to give this settings a specific class, so bruteforce it is. Well, until someone smarter than me can fix this. -GuiAworld*/
#img_gen_art_guide_card {
grid-template-areas:
"label value"
"item item"
"minlabel maxlabel";
grid-template-rows: 20px 30px 5px;
grid-template-columns: 338px 30px;
flex-grow: 2;
width: 99%;
}
#user_img_gen_art_guide {
width: 358px;
margin-left: 5px;
margin-right: 5px;
color: var(--dropdown_text);
background: var(--dropdown_background);
border-color: var(--dropdown_text);
padding: 4px 0 3px 5px;
border-radius: 5px;
}
#img_gen_negative_prompt_card {
grid-template-areas:
"label value"
"item item"
"minlabel maxlabel";
grid-template-rows: 20px 30px 5px;
grid-template-columns: 338px 30px;
flex-grow: 2;
width: 99%;
}
#user_img_gen_negative_prompt {
width: 358px;
margin-left: 5px;
margin-right: 5px;
color: var(--dropdown_text);
background: var(--dropdown_background);
border-color: var(--dropdown_text);
padding: 4px 0 3px 5px;
border-radius: 5px;
}
.setting_container_sp { .setting_container_sp {
display: grid; display: grid;
grid-template-areas: "label value" grid-template-areas: "label value"
@@ -748,15 +792,19 @@ border-top-right-radius: var(--tabs_rounding);
/* Theme */ /* Theme */
.collapsable_header .material-icons-outlined { .collapsable_header .material-icons-outlined {
padding-top: 5px; /*padding-top: 5px;*/
translate: 0 5px;
} }
.var_sync_system_theme_list{ .var_sync_system_theme_list{
padding: 6px 0 9px 0; padding: 6px 0 9px 0;
margin-left: 10px;
border-radius: 5px; border-radius: 5px;
color: var(--dropdown_text); color: var(--dropdown_text);
background: var(--dropdown_background); background: var(--dropdown_background);
width: 90%;
}
.setting_tile_area#Theme .icon_button{
padding: 5px;
} }
#palette_area { #palette_area {
@@ -806,8 +854,8 @@ border-top-right-radius: var(--tabs_rounding);
} }
.advanced_theme { .advanced_theme {
margin: 10px 10px 0 auto; margin: 6px 1px 0 auto;
padding: 2px 4px 2px 4px; padding: 4px 8px 4px 8px;
border-radius: var(--radius_alternate_button); border-radius: var(--radius_alternate_button);
background-color: var(--alternate_button_background); background-color: var(--alternate_button_background);
color: var(--alternate_button_text); color: var(--alternate_button_text);
@@ -1037,7 +1085,7 @@ td.server_vars {
.wi_title { .wi_title {
position: relative; position: relative;
bottom: 4px; bottom: 2px;
margin-left: 4px; margin-left: 4px;
} }
@@ -2200,6 +2248,7 @@ body {
position: fixed; position: fixed;
transition: opacity 0s linear 0.5s; transition: opacity 0s linear 0.5s;
white-space: normal; white-space: normal;
border-radius: var(--radius_tooltip);
opacity: 1; opacity: 1;
@@ -2597,14 +2646,16 @@ body {
/* Nothing should be above the context menu (that I can think of) */ /* Nothing should be above the context menu (that I can think of) */
z-index: 9999999; z-index: 9999999;
/* TODO: Theme */ color: var(--context_menu_text);
background-color: #222f3a; background-color: var(--context_menu_background);
border: 1px solid #485e6d; border: 1px solid var(--context_menu_border);
border-radius: var(--radius_context_menu);
box-shadow: var(--context_menu_shadow);
} }
#context-menu > hr { #context-menu > hr {
/* TODO: Theme */ /* Division Color*/
border-top: 2px solid #485e6d; border-top: 2px solid var(--context_menu_division);
margin: 5px 5px; margin: 5px 5px;
} }
@@ -2615,8 +2666,9 @@ body {
} }
.context-menu-item:hover { .context-menu-item:hover {
/* TODO: Theme */ color: var(--context_menu_hover_text);
background-color: #273b48; background-color: var(--context_menu_hover_background);
border-radius: var(--radius_context_menu_hover);
} }
.context-menu-item > .material-icons-outlined { .context-menu-item > .material-icons-outlined {
@@ -2680,7 +2732,8 @@ body {
.substitution-card input { .substitution-card input {
padding-left: 2px; padding-left: 2px;
border-color: var(--setting_background); border-color: var(--substitution_card_input_border);
background-color: var(--substitution_card_input_background);
} }
#new-sub-card { #new-sub-card {
@@ -2731,9 +2784,12 @@ body {
} }
#welcome-logo { #welcome-logo {
width: 50%; width: 56%;
max-width: 720px; max-width: 720px;
filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px rgb(0 0 0));
box-shadow: 0px 0px 84px 20px rgb(12 12 12 / 35%), inset 0px 0px 100px 100px rgb(0 0 0 / 18%);
border-radius: 18%;
padding: 5px;
} }
#welcome-logo-container { #welcome-logo-container {
@@ -3031,24 +3087,26 @@ body {
padding: 5px 0px; padding: 5px 0px;
background-color: var(--wi_tag_color); background-color: var(--wi_tag_color);
margin-bottom: 2px; margin-bottom: 2px;
border-radius:var(--radius_genre_tag);
} }
.genre-suggestion.highlighted { .genre-suggestion:hover {
background-color: #151e28; filter: brightness(75%);
} }
#genre-container { #genre-container {
margin-top: 5px;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
background-color: #151e28; /*background-color: #151e28;*/
} }
.genre { .genre {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: var(--wi_tag_color); background-color: var(--wi_tag_color);
border-radius: var(--radius_wi_card); border-radius:var(--radius_genre_tag);
padding: 4px 0px; padding: 4px 0px;
margin: 2px 2px; margin: 2px 2px;
} }
@@ -3065,6 +3123,8 @@ body {
.genre-inner > .x { .genre-inner > .x {
font-size: 16px; font-size: 16px;
transform: translateY(10%);
padding-right: 3px;
cursor: pointer; cursor: pointer;
opacity: 0.7; opacity: 0.7;
} }
@@ -3202,6 +3262,16 @@ button.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
.icon_button {
background-color: var(--icon_button_background);
color: var(--icon_button_color);
border: 1px solid var(--icon_button_border_color);
border-radius: var(--radius_button);
margin-top: 1px;
transform: translateY(-3%);
padding: 1px;
}
.force_center { .force_center {
margin-left: 50%; margin-left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -3594,4 +3664,6 @@ select {
.tts_playing { .tts_playing {
text-decoration: underline dotted; text-decoration: underline dotted;
} }

2
static/koboldai.js
View File

@@ -3137,7 +3137,7 @@ function save_preset() {
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
function set_ui_level(level) { function set_ui_level(level) {
for (classname of ['setting_container', 'setting_container_single', 'setting_container_single_wide', 'biasing', 'palette_area']) { for (classname of ['setting_container', 'setting_container_single', 'setting_container_single_wide', 'biasing', 'palette_area', 'advanced_theme']) {
for (element of document.getElementsByClassName(classname)) { for (element of document.getElementsByClassName(classname)) {
if (parseInt(element.getAttribute('ui_level')) <= level) { if (parseInt(element.getAttribute('ui_level')) <= level) {
element.classList.remove("hidden"); element.classList.remove("hidden");

8
templates/settings flyout.html
View File

@@ -361,7 +361,7 @@
<div id="substitution-container"></div> <div id="substitution-container"></div>
<div id="new-sub-card" class="cursor" tooltip="Add Substitution"> <div id="new-sub-card" class="cursor" tooltip="Add Substitution">
<span class="material-icons-outlined"> <span class="material-icons-outlined icon_button">
add add
</span> </span>
</div> </div>
@@ -384,8 +384,8 @@
</div> </div>
<div class="setting_tile_area" id="Theme"> <div class="setting_tile_area" id="Theme">
<select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);"> <select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);">
</select><span class="material-icons-outlined cursor" tooltip="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span> </select><span class="material-icons-outlined cursor icon_button" tooltip="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
<div id="palette_area" class="palette_area" ui_level=2> <div id="palette_area" class="palette_area" ui_level=1>
<b style="font-size: 20px;">Palette</b> <b style="font-size: 20px;">Palette</b>
<div id="save_theme_area" > <div id="save_theme_area" >
<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/> <input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
@@ -448,7 +448,7 @@
</table> </table>
</div> </div>
</div> </div>
<div class="advanced_theme cursor" onclick='openPopup("advanced_theme_editor");'> <div class="advanced_theme cursor" ui_level="2" onclick='openPopup("advanced_theme_editor");'>
<span>Advanced Theme</h4> <span>Advanced Theme</h4>
</div> </div>
</div> </div>

4
templates/story flyout.html
View File

@@ -46,13 +46,13 @@
</div> </div>
<label for="authors_notes_template">Template:</label><br/> <label for="authors_notes_template">Template:</label><br/>
<input autocomplete="off" id=authors_notes_template type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/> <input autocomplete="off" id=authors_notes_template type=text placeholder="[Author's note: <|>]" class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
<label for="authors_notes">Author's Notes:</label><br/> <label for="authors_notes">Author's Notes:</label><br/>
<textarea autocomplete="off" rows=16 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" oninput="autoResize(this)" onchange='sync_to_server(this);'></textarea><br/> <textarea autocomplete="off" rows=16 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" oninput="autoResize(this)" onchange='sync_to_server(this);'></textarea><br/>
<h4 class="section_header">Genre</h4> <h4 class="section_header">Genre</h4>
<div class="help_text">Styles the AI will attempt to imitate. Effectiveness depends on model.</div> <div class="help_text">Styles the AI will attempt to imitate. Effectiveness depends on model.</div>
<input id="genre-input" class="fullwidth" autocomplete="off" spellcheck="false"> <input id="genre-input" class="fullwidth" placeholder="Search for a Genre" autocomplete="off" spellcheck="false">
<div id="genre-suggestion-super-container"> <div id="genre-suggestion-super-container">
<div id="genre-suggestion-container"> <div id="genre-suggestion-container">
<span class="genre-suggestion">Animals</span> <span class="genre-suggestion">Animals</span>