Merge pull request #239 from MightyAlex200/united

Clean up the CSS

static/koboldai.css

@@ -16,10 +16,12 @@
     input[type='range'] {
       overflow: hidden;
 	  border-color: var(--setting_background);
-      width: 100%;
+      width: calc(100% - 10px);
       -webkit-appearance: none;
       background-color: var(--rangeslider_background_color);
 	  border-radius: 16px;
+	  margin-left: 5px;
+	  margin-right: 5px;
     }
 	 
     input[type='range']::-webkit-slider-runnable-track {
@@ -179,9 +181,12 @@ border-top-right-radius: var(--tabs_rounding);
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	width: 100%;
 }
 
+#Images {
+	padding-left: 10px;
+	padding-right: 10px;
+}
 
 .dynamic-setting-container {
 	background-color: var(--setting_background);
@@ -213,6 +218,7 @@ border-top-right-radius: var(--tabs_rounding);
 	border-radius: var(--radius_settings_background);
 	padding: 2px;
 	margin: 2px;
+	width: calc(50% - 4px);
 }
 
 .setting_container_sp {
@@ -229,6 +235,11 @@ border-top-right-radius: var(--tabs_rounding);
 	margin: 2px;
 }
 
+#biasing {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
 .setting_container.var_sync_alt_system_alt_gen[system_alt_gen="true"] {
 	display: none;
 }
@@ -250,6 +261,7 @@ border-top-right-radius: var(--tabs_rounding);
 	border-radius: var(--radius_settings_background);
 	padding: 2px;
 	margin-top: 5px;
+	flex-grow: 1;
 }
 
 #story_menu_author .setting_tile_area{
@@ -269,6 +281,7 @@ border-top-right-radius: var(--tabs_rounding);
 	border-radius: var(--radius_settings_background);
 	padding: 2px;
 	margin: 2px;
+	width: calc(50% - 4px);
 }
 .setting_container_single .setting_item{
 	font-size: calc(0.93em + var(--font_size_adjustment));
@@ -287,6 +300,7 @@ border-top-right-radius: var(--tabs_rounding);
 	border-radius: var(--radius_settings_background);
 	padding: 1px;
 	margin: 2px;
+	width: calc(100% - 8px);
 }
 .setting_container_single_wide .setting_item{
 	font-size: calc(0.93em + var(--font_size_adjustment));
@@ -343,6 +357,10 @@ border-top-right-radius: var(--tabs_rounding);
 	overflow: hidden;
 }
 
+.setting_item .toggle {
+	margin-left: 5px;
+}
+
 .setting_item_input {
 	width:95%;
 }
@@ -453,7 +471,7 @@ border-top-right-radius: var(--tabs_rounding);
 .SideMenu .flyout_menu_contents {
 	overflow-x: hidden;
 	overflow-y: auto;
-	height: calc(100vh - 40px);
+	height: calc(100vh - 34px);
 }
 
 .settings_footer {
@@ -544,6 +562,9 @@ border-top-right-radius: var(--tabs_rounding);
 	border-radius: var(--radius_settings_button);
 	border-style:solid;
 	height: 35px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .settings_button > .material-icons-outlined {
@@ -551,13 +572,6 @@ border-top-right-radius: var(--tabs_rounding);
 	top: 2px;
 }
 
-
-.settings_button > .button_label {
-	position: relative;
-	bottom: 3px;
-	right: 4px;
-}
-
 .settings_button > .material-icons-outlined {
 	position: relative;
 	top: 1px;
@@ -565,8 +579,7 @@ border-top-right-radius: var(--tabs_rounding);
 }
 
 .Model_Info .settings_button {
-	transform: translateY(7%);
-	margin: -5px;
+	margin: 5px;
 }
 
 #import_story_button {
@@ -752,7 +765,7 @@ border-top-right-radius: var(--tabs_rounding);
 	border: 2px solid var(--palette_card_text);
 	border-radius: var(--radius_palette_card);
 	box-shadow: var(--palette_card_shadow);
-	margin: 5px;
+	margin-top: 5px;
 	padding: 5px 0 10px 0;
 	background: var(--palette_card_background);
 	color: var(--palette_card_text);
@@ -2293,6 +2306,7 @@ body {
 	opacity: 0.7;
 	font-size: small;
 	float: right;
+	padding-right: 10px;
 }
 
 .debug-dump-log {
@@ -2437,6 +2451,13 @@ body {
 }
 
 /* Substitutions */
+#Substitutions {
+	margin-left: 10px;
+	margin-right: 10px;
+	justify-content: center;
+	width: auto;
+}
+
 #Substitutions > .help_text > .helpicon {
 	position: relative;
 	margin-left: 1px;
@@ -3020,6 +3041,11 @@ button.disabled {
 	padding: 5px 7px 5px 7px;
 }
 
+textarea.fullwidth {
+	border-style: solid;
+	resize: vertical;
+}
+
 .rawtext {
 	white-space: pre-wrap;
 }
@@ -3322,8 +3348,19 @@ input[type='range'] {
 
 select {
   outline: none;
+  border: 1px solid;
 }
 
+@-moz-document url-prefix() {
+	select, .presets {
+		padding-left: 5px; /* Add padding to the left side of the select element */
+	}
+	select {
+		padding-top: 0;
+	}
+}
+  
+
 [system_experimental_features="false"] {
 	display: none;
 }

templates/settings flyout.html

@@ -37,20 +37,21 @@
 			<div id="text_runningmodel">
 					<b class="noselect">1) Model: </b>
 			</div>
-			<div style="text-align: center;">
+			<div style="display: flex; justify-content: center;">
 				<button class="settings_button" onclick="socket.emit('load_model_button', {});">
 					<span class="material-icons-outlined cursor" tooltip="Load Model" style="font-size: 1.4em;">folder_open</span>
 					<span class="button_label">Load Model</span>
 				</button>
 				<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
-				{% if not on_colab %}
+			</div>
+			{% if not on_colab %}
+				<div style="text-align: center;">
 					<div class="horde_trigger var_sync_alt_model_model">
 						<input type=checkbox data-size="mini" data-onstyle="success" data-toggle="toggle" class='var_sync_system_horde_share' onchange='sync_to_server(this)'> Share with Horde 
 						<span class="helpicon material-icons-outlined" tooltip="Shares your GPU with other KoboldAI users. Does not share data/stories.">help_icon</span>
-						</div>
-					
-				{% endif %}
-			</div>
+					</div>	
+				</div>
+			{% endif %}
 		</div>
 		<div id="Story_Info">
 			<hr/>