Added better home screen and new vars for settings buttons

static/koboldai.css

@@ -447,6 +447,8 @@ input[type="range"]::-ms-fill-upper {
 }
 
 .story_title {
+	display: flex;
+	justify-content: space-between;
 	font-size: calc(1.8em + var(--font_size_adjustment));
 	text-align: center;
 	border-bottom: 1px;
@@ -463,9 +465,10 @@ input[type="range"]::-ms-fill-upper {
 }
 
 .story_title_icons {
-	font-size: calc(18px + var(--font_size_adjustment));
+	display: flex;
-	padding: 10px 0 0 0;
+	width: 100%;
-	margin-left: 125px;
+	padding: 10px;
+	justify-content: space-between;
 }
 
 .settings_menu {
@@ -473,6 +476,20 @@ input[type="range"]::-ms-fill-upper {
 	padding-top: 7px;
 }
 
+.settings_button {
+	color: var(--button_text);
+	background: var(--button_background);
+	border-color: white;
+	border-width: 1px;
+	border-radius: var(--radius_settings_button);
+	border-style:solid;
+	height: 35px;
+}
+
+.settings_button[story_gamesaved="true"] {
+	filter: brightness(40%);
+}
+
 .settings_select {
 	color: var(--dropdown_text);
 	background: var(--dropdown_background);

templates/settings flyout.html

@@ -45,12 +45,13 @@
 				</span>
 			</div>
 			<div id="text_runningmodel">
-					<b>Running Model: </b>
+					<b>1) Model: </b>
-			</div>
-			<div class="Model_Icon">
-				<span class="material-icons-outlined cursor" title="Load Model" onclick="socket.emit('load_model_button', {});">folder_open</span>
 			</div>
 			<div style="text-align: center;">
+				<button class="settings_button" onclick="socket.emit('load_model_button', {});">
+					<span class="material-icons-outlined cursor" title="Load Model" style="font-size: 1.4em;">folder_open</span>
+					<span> Load Model</span>
+				</button>
 				<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
 			</div>
 		</div>
@@ -61,16 +62,29 @@
 					<span>
 						<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
 					</span>
-				</div>
+					<span>
-				<div id="text_storyname">
-					<b>Story Name: </b>
-				</div>
-				<div class="story_title_icons">
-					<span class="material-icons-outlined cursor" title="New Story" onclick="socket.emit('new_story', '');">description</span>
-					<span class="material-icons-outlined cursor" title="Load Story" onclick="socket.emit('load_story_list', '');">folder_open</span>
-					<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>save</span>
 						<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
 						<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+					</span>
+				</div>
+				<div id="text_storyname">
+					<b>2) Story: </b>
+				</div>
+				<div class="story_title_icons">
+					<button class="settings_button" onclick="socket.emit('new_story', '');">
+						<span class="material-icons-outlined cursor" title="New Story">description</span>
+						<span> New Story</span>
+					</button>
+					<button class="settings_button" onclick="socket.emit('load_story_list', '');">
+						<span class="material-icons-outlined cursor" title="Load Story">folder_open</span>
+						<span> Load Story</span>
+					</button>
+					<button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>
+						<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
+						<span> Save Story</span>
+					</button>
+					
+					
 				</div>
 			</div>
 			<hr/>

themes/Darkness.css

@@ -69,6 +69,9 @@
 	--setting_background: #242424;
     --setting_text: #e0e0e0;
 	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
+
 	--sample_order_select_color: #1d434a;
 	--sample_order_select_color_text: #e0e0e0;
 
@@ -143,6 +146,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 5px;
 	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;
 
 
 

themes/Gruvbox Dark.css

@@ -116,6 +116,9 @@
 	--setting_background: var(--gruvbox-dark0-soft);
     --setting_text: var(--gruvbox-light0);
 	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
+
 	--sample_order_select_color: var(--gruvbox-dark2);
 	--sample_order_select_color_text: var(--gruvbox-light2);
 
@@ -177,6 +180,7 @@
 	--radius_buttons: 0px;
 	--radius_item_popup: 0px;
 	--radius_wi_card: 0px;
+	--radius_settings_button: 5px;
 
 	/* Variables */
 	--flyout_menu_closed_width: 0px;

themes/Material You.css

@@ -81,6 +81,9 @@
 	--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);
 
@@ -156,6 +159,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;
 
 
 

themes/Monochrome.css

@@ -69,6 +69,9 @@
 	--setting_background: #273141;
     --setting_text: #e0e0e0;
 	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
+
 	--sample_order_select_color: #244c65;
 	--sample_order_select_color_text: #e0e0e0;
 
@@ -142,6 +145,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;
 
 
 

themes/Unicorn.css

@@ -82,6 +82,9 @@
 	--setting_background: #e1c5c5;
     --setting_text: #421d1d;
 	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
+
 	--sample_order_select_color: #dc6872;
 	--sample_order_select_color_text: #f2f1f1;
 
@@ -157,6 +160,7 @@
 	--radius_buttons: 10px;
 	--radius_item_popup: 5px;
 	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;