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

Merge pull request #246 from GuiAworld/UI2

Browse Source 
A bunch of UI improvements & Material You theme update
This commit is contained in:
henk717
2023-01-07 20:35:53 +01:00
committed by GitHub
parent 0342f0db78 75da540c99
commit 285236bbe5
5 changed files with 136 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
static/koboldai.css
View File

@@ -18,6 +18,7 @@
border-color: var(--setting_background);
width: calc(100% - 10px);
-webkit-appearance: none;
padding-top: 1px;
background-color: var(--rangeslider_background_color);
border-radius: 16px;
margin-left: 5px;
@@ -181,6 +182,7 @@ border-top-right-radius: var(--tabs_rounding);
display: flex;
flex-direction: row;
flex-wrap: wrap;
animation: 1s 1 normal grow-backY;
}
#Images {
@@ -221,6 +223,48 @@ border-top-right-radius: var(--tabs_rounding);
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 {
display: grid;
grid-template-areas: "label value"
@@ -748,15 +792,19 @@ border-top-right-radius: var(--tabs_rounding);
/* Theme */
.collapsable_header .material-icons-outlined {
padding-top: 5px;
/*padding-top: 5px;*/
translate: 0 5px;
}
.var_sync_system_theme_list{
padding: 6px 0 9px 0;
margin-left: 10px;
border-radius: 5px;
color: var(--dropdown_text);
background: var(--dropdown_background);
width: 90%;
}
.setting_tile_area#Theme .icon_button{
padding: 5px;
}
#palette_area {
@@ -806,8 +854,8 @@ border-top-right-radius: var(--tabs_rounding);
}
.advanced_theme {
margin: 10px 10px 0 auto;
padding: 2px 4px 2px 4px;
margin: 6px 1px 0 auto;
padding: 4px 8px 4px 8px;
border-radius: var(--radius_alternate_button);
background-color: var(--alternate_button_background);
color: var(--alternate_button_text);
@@ -1037,7 +1085,7 @@ td.server_vars {
.wi_title {
position: relative;
bottom: 4px;
bottom: 2px;
margin-left: 4px;
}
@@ -2200,6 +2248,7 @@ body {
position: fixed;
transition: opacity 0s linear 0.5s;
white-space: normal;
border-radius: var(--radius_tooltip);
opacity: 1;
@@ -2597,14 +2646,16 @@ body {
/* Nothing should be above the context menu (that I can think of) */
z-index: 9999999;
/* TODO: Theme */
background-color: #222f3a;
border: 1px solid #485e6d;
color: var(--context_menu_text);
background-color: var(--context_menu_background);
border: 1px solid var(--context_menu_border);
border-radius: var(--radius_context_menu);
box-shadow: var(--context_menu_shadow);
}
#context-menu > hr {
/* TODO: Theme */
border-top: 2px solid #485e6d;
/* Division Color*/
border-top: 2px solid var(--context_menu_division);
margin: 5px 5px;
}
@@ -2615,8 +2666,9 @@ body {
}
.context-menu-item:hover {
/* TODO: Theme */
background-color: #273b48;
color: var(--context_menu_hover_text);
background-color: var(--context_menu_hover_background);
border-radius: var(--radius_context_menu_hover);
}
.context-menu-item > .material-icons-outlined {
@@ -2680,7 +2732,8 @@ body {
.substitution-card input {
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 {
@@ -2731,9 +2784,12 @@ body {
}
#welcome-logo {
width: 50%;
max-width: 720px;
filter: drop-shadow(5px 5px 5px #222);
width: 56%;
max-width: 720px;
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 {
@@ -3031,24 +3087,26 @@ body {
padding: 5px 0px;
background-color: var(--wi_tag_color);
margin-bottom: 2px;
border-radius:var(--radius_genre_tag);
}
.genre-suggestion.highlighted {
background-color: #151e28;
.genre-suggestion:hover {
filter: brightness(75%);
}
#genre-container {
margin-top: 5px;
max-height: 50vh;
overflow-y: auto;
background-color: #151e28;
/*background-color: #151e28;*/
}
.genre {
display: inline-flex;
align-items: center;
background-color: var(--wi_tag_color);
border-radius: var(--radius_wi_card);
border-radius:var(--radius_genre_tag);
padding: 4px 0px;
margin: 2px 2px;
}
@@ -3065,6 +3123,8 @@ body {
.genre-inner > .x {
font-size: 16px;
transform: translateY(10%);
padding-right: 3px;
cursor: pointer;
opacity: 0.7;
}
@@ -3202,6 +3262,16 @@ button.disabled {
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 {
margin-left: 50%;
transform: translateX(-50%);
@@ -3594,4 +3664,6 @@ select {
.tts_playing {
text-decoration: underline dotted;
}
}

2
static/koboldai.js
View File

@@ -3137,7 +3137,7 @@ function save_preset() {
//--------------------------------------------General UI Functions------------------------------------
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)) {
if (parseInt(element.getAttribute('ui_level')) <= level) {
element.classList.remove("hidden");

8
templates/settings flyout.html
View File

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

4
templates/story flyout.html
View File

@@ -46,13 +46,13 @@
</div>
<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/>
<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>
<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-container">
<span class="genre-suggestion">Animals</span>

47
themes/Material You.css
View File

@@ -1,7 +1,10 @@
/*
Name: Material You
Author: GuiAworld
Description: A theme that demonstrates the power of the Palette system. Based off of Google's Material You.
Version: v2
Description: A theme that demonstrates the power of the Palette system. Based off of Google's Material You.
PS.: Feel free to remix this theme, but please keep the "This theme is based off of Material You by GuiAworld"
-This theme is based off of Material You by GuiAworld-
*/
:root {
@@ -53,8 +56,7 @@
--statusbar_text_color: white;
--scrollbar-color: #9b9b9b80;
/*Buttons*/
/*General*/
/*Buttons -> General*/
--enabled_button_text: var(--on_primary_palette);
--enabled_button_background_color: var(--primary_palette);
--enabled_button_border_color: var(--on_primary_palette);
@@ -63,16 +65,29 @@
--disabled_button_background_color: #495762;
--disabled_button_border_color: #686c68;
/*Home Tab*/
/*Buttons -> Home Tab*/
--button_text: var(--on_primary_palette);
--button_background: var(--primary_palette);
/*Alternate Button*/
/*Buttons -> Alternate Button*/
--alternate_button_text: var(--on_primary_container_palette);
--alternate_button_background: var(--primary_container_palette);
/*Buttons -> Icon Button*/
--icon_button_background: var(--tertiary_palette);
--icon_button_color: var(--on_tertiary_palette);
--icon_button_border_color: var(--on_tertiary_palette);
/*Sequence, AKA Gens Per Action*/
/*Context Menu*/
--context_menu_text: var(--on_tertiary_palette);
--context_menu_background: var(--tertiary_palette);
--context_menu_border: var(--on_tertiary_palette);
--context_menu_division: var(--on_tertiary_palette);
--context_menu_hover_text: var(--on_tertiary_container_palette);
--context_menu_hover_background: var(--tertiary_container_palette);
/*Sequences, AKA Gens Per Action*/
--sequence_area_background: var(--layer1_palette);
--sequence_background: var(--primary_palette);
--sequence_text: var(--on_primary_palette);
@@ -99,14 +114,18 @@
--rangeslider_circle_color: var(--on_primary_palette);
--help_icon: var(--secondary_palette);
/*--tooltip_text: var(--on_secondary_palette);
--tooltip_background: var(--secondary_palette);*/
--tooltip_text: var(--on_secondary_palette);
--tooltip_background: var(--secondary_palette);
--setting_category_help_text_color: #E0E0E0;
--setting_footer_border_color: grey;
--setting_footer_text_color: var(--on_surface_palette);
--setting_footer_background_color: var(--layer1_palette);
/*Substitution Card*/
--substitution_card_input_border: var(--outline_palette);
--substitution_card_input_background: var(--layer4_palette);
/*Palette Card*/
--palette_card_background: var(--primary_palette);
--palette_card_text: var(--on_primary_palette);
@@ -150,11 +169,12 @@
/*Context Bar Colors*/
--context_colors_memory: #3572A5;
--context_colors_authors_notes: #f1e05a;
--context_colors_authors_notes: #21a300;
--context_colors_world_info: #563d7c;
--context_colors_genre: #bd0000;
--context_colors_prompt: #e34c26;
--context_colors_game_text: #c6538c;
--context_colors_submit: #ededed;
--context_colors_game_text: #b13673;
--context_colors_submit: #221f24;
--context_colors_unused: white;
--context_colors_soft_prompt: #000080;
@@ -167,6 +187,7 @@
--left_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--right_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), -25px 0px 20px 0 rgba(0, 0, 0, 0.19);
--context_menu_shadow: var(--wi_card_shadow);
--popup_shadow: 0 0 35px 20px#1b1b1f;
--radius_inputbox: 10px;
--radius_unpinned_menu: 20px;
@@ -178,6 +199,10 @@
--radius_wi_card: 5px;
--radius_palette_card: 5px;
--radius_settings_button: 5px;
--radius_context_menu: 10px;
--radius_context_menu_hover: 5px;
--radius_genre_tag: 5px;
--radius_tooltip: 10px;
--tabs_rounding: 6px;