Merge branch 'UI2' of https://github.com/ebolam/KoboldAI into UI2

static/koboldai.js

@@ -2670,8 +2670,18 @@ function calc_token_usage(
 }
 
 function Change_Theme(theme) {
-	var css = document.getElementById("CSSTheme");
+	const oldCSS = $el("#CSSTheme");
-    css.setAttribute("href", "/themes/"+theme+".css");
+	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() {

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: 1px solid #333333;
-	border-width: 1 1px;
-	border-color: #333333 !important;
 }
 
 .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 {

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 {

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 {

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 {