From 27f0ff659882c17958d86681985ee4a7c052da16 Mon Sep 17 00:00:00 2001 From: GuiAworld Date: Sat, 3 Sep 2022 16:09:41 -0300 Subject: [PATCH] New Theme Vars and UI changes --- static/koboldai.css | 65 +++++++++++++++++++++++----------- templates/settings flyout.html | 6 ++-- templates/story flyout.html | 2 +- themes/Material You.css | 39 ++++++++++++++------ 4 files changed, 76 insertions(+), 36 deletions(-) diff --git a/static/koboldai.css b/static/koboldai.css index 5f0f187e..f646d0ac 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -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 { diff --git a/templates/settings flyout.html b/templates/settings flyout.html index fa891b83..6b6f2281 100644 --- a/templates/settings flyout.html +++ b/templates/settings flyout.html @@ -273,14 +273,14 @@ save
- +
- + - + diff --git a/templates/story flyout.html b/templates/story flyout.html index b5191d41..78ba829c 100644 --- a/templates/story flyout.html +++ b/templates/story flyout.html @@ -64,7 +64,7 @@ folderroot - + post_add Add World Info Entry diff --git a/themes/Material You.css b/themes/Material You.css index 48054cf3..af12265f 100644 --- a/themes/Material You.css +++ b/themes/Material You.css @@ -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;
Main Alternative
Background Text Background