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 #103 from GuiAworld/UI2

Browse Source 
New Theme Vars and UI changes
This commit is contained in:
ebolam
2022-09-03 18:28:17 -04:00
committed by GitHub
parent 7155a63cd6 27f0ff6598
commit 70b897a758
4 changed files with 76 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
static/koboldai.css
View File

@@ -205,13 +205,17 @@ input[type="range"]::-ms-fill-upper {
"item item" "item item"
"minlabel maxlabel"; "minlabel maxlabel";
grid-template-rows: 20px 23px 20px; grid-template-rows: 20px 23px 20px;
grid-template-columns: 288px 60px; grid-template-columns: 310px 60px;
row-gap: 0.2em; row-gap: 0.2em;
background-color: var(--setting_background); background-color: var(--setting_background);
color: var(--setting_text); color: var(--setting_text);
border-radius: var(--radius_settings_background); border-radius: var(--radius_settings_background);
padding: 3px; padding: 3px;
margin: 2px; margin-top: 5px;
}
#story_menu_author .setting_tile_area{
padding: 0;
} }
@@ -482,7 +486,7 @@ input[type="range"]::-ms-fill-upper {
.settings_button { .settings_button {
color: var(--button_text); color: var(--button_text);
background: var(--button_background); background: var(--button_background);
border-color: white; border-color: var(--button_text);
border-width: 1px; border-width: 1px;
border-radius: var(--radius_settings_button); border-radius: var(--radius_settings_button);
border-style:solid; border-style:solid;
@@ -683,6 +687,13 @@ input[type="range"]::-ms-fill-upper {
#palette_area { #palette_area {
width: 100%; width: 100%;
text-align: center; text-align: center;
border: 2px solid var(--palette_card_text);
border-radius: var(--radius_palette_card);
box-shadow: var(--palette_card_shadow);
margin: 5px;
padding: 5px 0 10px 0;
background: var(--palette_card_background);
color: var(--palette_card_text);
} }
#save_theme_area { #save_theme_area {
@@ -693,6 +704,10 @@ input[type="range"]::-ms-fill-upper {
#save_theme_name { #save_theme_name {
width: 88%; width: 88%;
margin: 0 0 5px -25px; margin: 0 0 5px -25px;
background-color: var(--palette_card_background);
filter: brightness(90%);
border-color: var(--palette_card_text);
color: var(--palette_card_text);
} }
#palette_area .material-icons-outlined { #palette_area .material-icons-outlined {
@@ -705,17 +720,22 @@ input[type="range"]::-ms-fill-upper {
} }
#Palette_Table{ #Palette_Table{
width: 100%; width: 100%;
color: var(--palette_card_text);
} }
.Theme_Input { #Palette .Theme_Input {
width: 100%; width: 100%;
background-color: var(--palette_card_background);
border-color: var(--palette_card_text);
border-width: 0px;
} }
.advanced_theme { .advanced_theme {
margin: 10px 10px 0 auto; margin: 10px 10px 0 auto;
padding: 2px 4px 2px 4px; padding: 2px 4px 2px 4px;
border-radius: var(--radius_wi_card); border-radius: var(--radius_alternate_button);
background-color: var(--wi_tag_color); background-color: var(--alternate_button_background);
color: var(--alternate_button_text);
} }
.advanced_theme:hover { .advanced_theme:hover {
filter: brightness(85%); filter: brightness(85%);
@@ -943,8 +963,9 @@ td.server_vars {
.wi_add_button{ .wi_add_button{
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 4px 4px 4px 4px; padding: 4px 4px 4px 4px;
border-radius: var(--radius_wi_card); border-radius: var(--radius_alternate_button);
background-color: var(--wi_tag_color); background-color: var(--alternate_button_background);
color: var(--alternate_button_text);
} }
.wi_add_button .material-icons-outlined{ .wi_add_button .material-icons-outlined{
@@ -963,6 +984,7 @@ td.server_vars {
border: 2px outset var(--wi_card_border_color); border: 2px outset var(--wi_card_border_color);
background-color: var(--wi_card_bg_color); background-color: var(--wi_card_bg_color);
color:var(--wi_card_text_color); color:var(--wi_card_text_color);
box-shadow: var(--wi_card_shadow);
margin: 10px; margin: 10px;
} }
@@ -1530,8 +1552,8 @@ body {
} }
#error_message.popup { #error_message.popup {
background-color: var(--error_palette); background-color: var(--error);
color: var(--on_error_palette); color: var(--error_text);
height: 30vh; height: 30vh;
top: 35vh; top: 35vh;
overflow: hidden; overflow: hidden;
@@ -1539,22 +1561,22 @@ body {
#error_message .title { #error_message .title {
width: 100%; width: 100%;
background-color: var(--error_container_palette); background-color: var(--error_title);
color: var(--on_error_container_palette); color: var(--error_title_text);
text-align: center; text-align: center;
font-size: calc(1.3em + var(--font_size_adjustment)); font-size: calc(1.3em + var(--font_size_adjustment));
} }
#error_message.popup .btn-primary { #error_message.popup .btn-primary {
background-color: var(--error_palette); background-color: var(--error);
color: var(--on_error_palette); color: var(--error_text);
border-color: var(--on_error_palette); border-color: var(--error_text);
} }
#error_message .popup_load_cancel{ #error_message .popup_load_cancel{
background-color: var(--error_container_palette); background-color: var(--error_title);
color: var(--on_error_container_palette); color: var(--error_title_text);
} }
@@ -1564,8 +1586,8 @@ body {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
background-color: var(--error_container_palette); background-color: var(--error);
color: var(--on_error_container_palette); color: var(--error_text);
} }
.breadcrumbitem { .breadcrumbitem {
@@ -1689,7 +1711,7 @@ body {
width: 50%; width: 50%;
height: 75%; height: 75%;
padding-bottom: 10px; padding-bottom: 10px;
background-color: var(--layer1_palette); background-color: var(--popup_background_color);
} }
#context-viewer-header { #context-viewer-header {
@@ -1698,7 +1720,7 @@ body {
padding: 5px; padding: 5px;
background-color: var(--background); background-color: var(--popup_background_color);
margin-bottom: 3px; margin-bottom: 3px;
} }
@@ -1874,6 +1896,7 @@ input {
color: var(--enabled_button_text); color: var(--enabled_button_text);
background-color: var(--enabled_button_background_color); background-color: var(--enabled_button_background_color);
border-color: var(--enabled_button_border_color); border-color: var(--enabled_button_border_color);
border-radius: var(--radius_button);
} }
.action_button:hover { .action_button:hover {

6
templates/settings flyout.html
View File

@@ -273,14 +273,14 @@
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span> <span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
</div> </div>
<div class="setting_tile_area" id="Palette"> <div class="setting_tile_area" id="Palette">
<table id="Palette_Table" border=1> <table id="Palette_Table" border=1 style="border-color: var(--palette_table_border);">
<tr> <tr>
<td></td> <td style="border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent;"></td>
<td colspan=2><b>Main</b></td> <td colspan=2><b>Main</b></td>
<td colspan=2><b>Alternative</b></td> <td colspan=2><b>Alternative</b></td>
</tr> </tr>
<tr> <tr>
<td></td> <td style="border-top-color: transparent; border-left-color: transparent;"></td>
<td>Background</td> <td>Background</td>
<td>Text</td> <td>Text</td>
<td>Background</td> <td>Background</td>

39
themes/Material You.css
View File

@@ -21,11 +21,6 @@
--tertiary_container_palette: #2f4f00; --tertiary_container_palette: #2f4f00;
--on_tertiary_container_palette: #c3f18c; --on_tertiary_container_palette: #c3f18c;
--error_palette: #ffb4ab;
--on_error_palette: #690005;
--error_container_palette: #93000a;
--on_error_container_palette: #ffdad6;
--background_palette: #1b1b1f; --background_palette: #1b1b1f;
--on_background_palette:#e3e2e6; --on_background_palette:#e3e2e6;
--layer1_palette: #212126; --layer1_palette: #212126;
@@ -58,13 +53,24 @@
--scrollbar-color: #9b9b9b80; --scrollbar-color: #9b9b9b80;
/*Buttons*/ /*Buttons*/
/*General*/
--enabled_button_text: var(--on_primary_palette); --enabled_button_text: var(--on_primary_palette);
--enabled_button_background_color: var(--primary_palette); --enabled_button_background_color: var(--primary_palette);
--enabled_button_border_color: var(--on_primary_palette); --enabled_button_border_color: var(--on_primary_palette);
--disabled_button_text: #303030; --disabled_button_text: #303030;
--disabled_button_background_color: #495762; --disabled_button_background_color: #495762;
--disabled_button_border_color: #686c68; --disabled_button_border_color: #686c68;
/*Home Tab*/
--button_text: var(--on_primary_palette);
--button_background: var(--primary_palette);
/*Alternate Button*/
--alternate_button_text: var(--on_primary_container_palette);
--alternate_button_background: var(--primary_container_palette);
/*Sequence, AKA Gens Per Action*/ /*Sequence, AKA Gens Per Action*/
--sequence_area_background: var(--layer1_palette); --sequence_area_background: var(--layer1_palette);
--sequence_background: var(--primary_palette); --sequence_background: var(--primary_palette);
@@ -81,9 +87,6 @@
--setting_background: var(--surface_palette); --setting_background: var(--surface_palette);
--setting_text: var(--on_surface_palette); --setting_text: var(--on_surface_palette);
--button_text: var(--setting_text);
--button_background: var(--setting_background);
--sample_order_select_color: var(--primary_palette); --sample_order_select_color: var(--primary_palette);
--sample_order_select_color_text: var(--on_primary_palette); --sample_order_select_color_text: var(--on_primary_palette);
@@ -95,14 +98,19 @@
--rangeslider_circle_color: var(--on_primary_palette); --rangeslider_circle_color: var(--on_primary_palette);
--help_icon: var(--secondary_palette); --help_icon: var(--secondary_palette);
--tooltip_text: var(--on_secondary_palette); /*--tooltip_text: var(--on_secondary_palette);
--tooltip_background: var(--secondary_palette); --tooltip_background: var(--secondary_palette);*/
--setting_category_help_text_color: #E0E0E0; --setting_category_help_text_color: #E0E0E0;
--setting_footer_border_color: grey; --setting_footer_border_color: grey;
--setting_footer_text_color: var(--on_surface_palette); --setting_footer_text_color: var(--on_surface_palette);
--setting_footer_background_color: var(--layer1_palette); --setting_footer_background_color: var(--layer1_palette);
/*Palette Card*/
--palette_card_background: var(--primary_palette);
--palette_card_text: var(--on_primary_palette);
--palette_table_border: var(--on_primary_palette);
/*World Info*/ /*World Info*/
--wi_card_border_color: var(--on_primary_palette); --wi_card_border_color: var(--on_primary_palette);
--wi_card_border_color_to_ai: var(--on_secondary_palette); --wi_card_border_color_to_ai: var(--on_secondary_palette);
@@ -134,6 +142,11 @@
--popup_cancel_button_color: var(--primary_palette); --popup_cancel_button_color: var(--primary_palette);
--popup_cancel_button_color_text: var(--on_primary_palette); --popup_cancel_button_color_text: var(--on_primary_palette);
--error: #ffb4ab;
--error_text: #690005;
--error_title: #93000a;
--error_title_text: #ffdad6;
/*Context Bar Colors*/ /*Context Bar Colors*/
--context_colors_memory: #3572A5; --context_colors_memory: #3572A5;
--context_colors_authors_notes: #f1e05a; --context_colors_authors_notes: #f1e05a;
@@ -147,6 +160,8 @@
/*Parameters*/ /*Parameters*/
--scrollbar-size: 6px; --scrollbar-size: 6px;
--light_shadow_value: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19); --light_shadow_value: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--palette_card_shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0px 11px 20px 8px rgb(0 0 0 / 19%);
--wi_card_shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0px 11px 20px 8px rgb(0 0 0 / 19%);
--left_menu_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19); --left_menu_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
--left_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 25px 0px 20px 0 rgba(0, 0, 0, 0.19); --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_light_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0px 0px 20px 0 rgba(0, 0, 0, 0.19);
@@ -156,9 +171,11 @@
--radius_unpinned_menu: 20px; --radius_unpinned_menu: 20px;
--radius_sequence: 10px; --radius_sequence: 10px;
--radius_settings_background: 5px; --radius_settings_background: 5px;
--radius_buttons: 5px; --radius_button: 5px;
--radius_alternate_button: 5px;
--radius_item_popup: 2px; --radius_item_popup: 2px;
--radius_wi_card: 5px; --radius_wi_card: 5px;
--radius_palette_card: 5px;
--radius_settings_button: 5px; --radius_settings_button: 5px;