diff --git a/static/koboldai.js b/static/koboldai.js index a8c81f1a..144aed7e 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -2670,8 +2670,18 @@ function calc_token_usage( } function Change_Theme(theme) { - var css = document.getElementById("CSSTheme"); - css.setAttribute("href", "/themes/"+theme+".css"); + const oldCSS = $el("#CSSTheme"); + if (oldCSS) oldCSS.remove(); + + const css = $e( + "link", + document.head, + { + id: "CSSTheme", + rel: "stylesheet", + href: `/themes/${theme}.css` + } + ); // We must wait for the style to load before we read it css.onload = function() { diff --git a/themes/Darkness.css b/themes/Darkness.css index 23146ddb..6b84ba0a 100644 --- a/themes/Darkness.css +++ b/themes/Darkness.css @@ -351,13 +351,13 @@ span.material-icons-outlined.cursor.search_icon { } .true-t + label::before { - color: #999 !important; filter: brightness(85%); + color: #999 !important; } .true-t:checked + label::before { - color: #e0e0e0 !important; filter: brightness(100%); + color: #e0e0e0 !important; } /* Import */ @@ -368,7 +368,9 @@ a { .form-control { border: none; + border-radius: 0px; color: #e0e0e0 !important; + transform: translateX(5px)!important; background-color: #333333 !important; } @@ -381,8 +383,8 @@ a { /* Lists */ .settings_select, .var_sync_system_theme_list { - border-color: #535353 !important; border-radius:5px !important; + border-color: #535353 !important; } /* Palette */ @@ -393,10 +395,12 @@ a { /* Popup */ +.popup .model_item { + border: 1px solid #333333; +} + .popup .item { - border: solid #000; - border-width: 1 1px; - border-color: #333333 !important; + border: 1px solid #333333; } .popup .action_button { @@ -410,22 +414,28 @@ a { } .popup .action_button:hover { - background-color: #424243 !important; filter: brightness(100%) !important; + background-color: #424243 !important; } .popup_load_cancel_button:hover { + outline: none !important; color: #e0e0e0 !important; border-color: #535353 !important; background-color: #424243 !important; - outline: none !important; +} + +.popup .action_button:focus { + outline: none; + box-shadow: none; } .popup_load_cancel_button:focus { + outline: none; + box-shadow: none; color: #e0e0e0 !important; border-color: #535353 !important; background-color: #424243 !important; - outline: none; } .popup .action_button:active { @@ -433,8 +443,8 @@ a { } .popup_load_cancel_button:active { - filter: brightness(60%) !important; outline: none !important; + filter: brightness(60%) !important; } #error_message.popup .btn-primary { diff --git a/themes/Monochrome.css b/themes/Monochrome.css index 4e1b7b2c..fe17da6b 100644 --- a/themes/Monochrome.css +++ b/themes/Monochrome.css @@ -218,13 +218,13 @@ } .bias_phrase input { - border-color: #2f3b4b !important; border-radius:2px !important; + border-color: #2f3b4b !important; } .substitution-card input { - border-color: #2f3b4b !important; border-radius:2px !important; + border-color: #2f3b4b !important; } .sequence { @@ -246,8 +246,8 @@ .action_button:focus { color: #e0e0e0; - box-shadow: none; outline: none !important; + box-shadow: none !important; } .settings_button { @@ -270,8 +270,8 @@ .toggle-off.btn { color: #eedcb8 !important; - background-color: #131c22 !important; border-color: #131c22 !important; + background-color: #131c22 !important; } .toggle-off.btn:hover { @@ -357,13 +357,13 @@ span.helpicon.material-icons-outlined:hover:not(::after) { } .true-t + label::before { - color: #999 !important; filter: brightness(85%); + color: #999 !important; } .true-t:checked + label::before { - color: #e0e0e0 !important; filter: brightness(100%); + color: #e0e0e0 !important; } /* Import */ @@ -374,7 +374,9 @@ a { .form-control { border: none; + border-radius: 0px; color: #e0e0e0 !important; + transform: translateX(5px)!important; background-color: #25323d !important; } @@ -395,8 +397,8 @@ a { /* Lists */ .settings_select, .var_sync_system_theme_list { - border-color: #2f3b4b !important; border-radius:2px !important; + border-color: #2f3b4b !important; } .settings_footer { @@ -411,7 +413,7 @@ a { /* Popup */ -.popup_list_area .model_item .model{ +.popup .model_item { border: 1px solid #2f3b4b; } @@ -446,9 +448,21 @@ a { .popup_load_cancel_button:hover { color: #e0e0e0 !important; - background-color: #30435b !important; - border-color: #ffffff00 !important; filter: brightness(120%) !important; + border-color: #ffffff00 !important; + background-color: #30435b !important; +} + +.popup .action_button:focus { + outline: none !important; + box-shadow: none !important; + color: #e0e0e0 !important; +} + +.popup_load_cancel_button:focus { + outline: none !important; + box-shadow: none !important; + color: #e0e0e0 !important; } /* Tabs */ @@ -500,9 +514,9 @@ a { } .world_info_text { + border-color: #2f3b4b !important; filter: brightness(100%) !important; background-color: #1d2835 !important; - border-color: #2f3b4b !important; } .world_info_title:hover { diff --git a/themes/Nostalgia.css b/themes/Nostalgia.css index 4b376edf..a37fd328 100644 --- a/themes/Nostalgia.css +++ b/themes/Nostalgia.css @@ -316,13 +316,13 @@ } .true-t + label::before { - color: #999 !important; filter: brightness(85%); + color: #999 !important; } .true-t:checked + label::before { - color: #fff !important; filter: brightness(100%); + color: #fff !important; } /* Import */ @@ -332,9 +332,11 @@ a { } .form-control { - background-color: #404040 !important; - color: #ffffff !important; border: none; + border-radius: 0px; + color: #ffffff !important; + transform: translateX(5px)!important; + background-color: #404040 !important; } /* Lines */ @@ -346,8 +348,8 @@ a { /* Lists */ .settings_select, .var_sync_system_theme_list { - border-color: #376590 !important; border-radius: 5px !important; + border-color: #376590 !important; } /* Palette */ @@ -384,11 +386,11 @@ a { } .popup_load_cancel_button:focus { - background-color: #337ab7 !important; - border-color: #ffffff !important; - outline: none !important; - box-shadow: none; color: #ffffff + outline: none !important; + box-shadow: none !important; + border-color: #ffffff !important; + background-color: #337ab7 !important; } #error_message.popup .btn-primary { diff --git a/themes/Unicorn.css b/themes/Unicorn.css index af004ebf..80da55b4 100644 --- a/themes/Unicorn.css +++ b/themes/Unicorn.css @@ -259,9 +259,9 @@ } .action_button:focus { - color: #f2f1f1 !important; - outline: none !important; box-shadow: none; + outline: none !important; + color: #f2f1f1 !important; } .settings_button { @@ -278,14 +278,14 @@ .btn-success { color: #f2f1f1 !important; - background-color: #e26771 !important; border-color: #e26771 !important; + background-color: #e26771 !important; } .toggle-off.btn { color: #f2f1f1 !important; - background-color: #828282 !important; border-color: #828282 !important; + background-color: #828282 !important; } .advanced_theme:hover { @@ -379,13 +379,13 @@ } .true-t + label::before { - color: #999 !important; filter: brightness(85%); + color: #999 !important; } .true-t:checked + label::before { - color: #e26771 !important; filter: brightness(100%); + color: #e26771 !important; } .oi[folder] { @@ -416,9 +416,10 @@ a:hover, a:focus { } .form-control { - border: 1px solid #c9c9c9 !important; + border-radius: 0px; color: #3d3d3d !important; - transform: translateX(6px)!important; + transform: translateX(5px)!important; + border: 1px solid #c9c9c9 !important; background-color: #f0f0f0 !important; } @@ -435,8 +436,8 @@ a:hover, a:focus { /* Lists */ .settings_select, .var_sync_system_theme_list { - border-color: #c9c9c9 !important; border-radius: 10px !important; + border-color: #c9c9c9 !important; } /* Palette */ @@ -447,11 +448,9 @@ a:hover, a:focus { /* Popup */ -.popup_list_area .model_item .model{ +.popup .model_item { border: 1px solid #c9c9c9; - border-radius: 10px; } - .popup .popup_load_cancel { border: 1px solid #c9c9c9 !important; } @@ -583,8 +582,8 @@ a:hover, a:focus { } .world_info_title:focus { - color: #e26771 !important; outline: none !important; + color: #e26771 !important; } .WI_Folder_Header .title:focus {