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

39
themes/Material You.css
View File

@@ -21,11 +21,6 @@
--tertiary_container_palette: #2f4f00;
--on_tertiary_container_palette: #c3f18c;
--error_palette: #ffb4ab;
--on_error_palette: #690005;
--error_container_palette: #93000a;
--on_error_container_palette: #ffdad6;
--background_palette: #1b1b1f;
--on_background_palette:#e3e2e6;
--layer1_palette: #212126;
@@ -58,13 +53,24 @@
--scrollbar-color: #9b9b9b80;
/*Buttons*/
/*General*/
--enabled_button_text: var(--on_primary_palette);
--enabled_button_background_color: var(--primary_palette);
--enabled_button_border_color: var(--on_primary_palette);
--disabled_button_text: #303030;
--disabled_button_background_color: #495762;
--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_area_background: var(--layer1_palette);
--sequence_background: var(--primary_palette);
@@ -81,9 +87,6 @@
--setting_background: var(--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_text: var(--on_primary_palette);
@@ -95,14 +98,19 @@
--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);
/*Palette Card*/
--palette_card_background: var(--primary_palette);
--palette_card_text: var(--on_primary_palette);
--palette_table_border: var(--on_primary_palette);
/*World Info*/
--wi_card_border_color: var(--on_primary_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_text: var(--on_primary_palette);
--error: #ffb4ab;
--error_text: #690005;
--error_title: #93000a;
--error_title_text: #ffdad6;
/*Context Bar Colors*/
--context_colors_memory: #3572A5;
--context_colors_authors_notes: #f1e05a;
@@ -147,6 +160,8 @@
/*Parameters*/
--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);
--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_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);
@@ -156,9 +171,11 @@
--radius_unpinned_menu: 20px;
--radius_sequence: 10px;
--radius_settings_background: 5px;
--radius_buttons: 5px;
--radius_button: 5px;
--radius_alternate_button: 5px;
--radius_item_popup: 2px;
--radius_wi_card: 5px;
--radius_palette_card: 5px;
--radius_settings_button: 5px;