Merge pull request #61 from GuiAworld/UI2

A bunch of tweaks

static/koboldai.css

@@ -76,7 +76,7 @@ input[type="range"]::-ms-fill-upper {
 	position: relative;
 }
 .tabrow.nomenu_icon {
-	padding-left: 10px;
+	padding-left: 25px;
 }
 .tabrow span {
 	cursor: pointer;
@@ -89,11 +89,11 @@ input[type="range"]::-ms-fill-upper {
 						  supported by Chrome, Edge, Opera and Firefox */
 	border: 1px solid #888;
 	background: var(--tab_color);
-	background: -o-linear-gradient(top, #337ab70 50%, #28507 100%);
+	/*background: -o-linear-gradient(top, #337ab70 50%, #28507 100%);
 	background: -ms-linear-gradient(top, #337ab70 50%, #28507 100%);
 	background: -moz-linear-gradient(top, #337ab70 50%, #28507 100%);
 	background: -webkit-linear-gradient(top, #337ab70 50%, #28507 100%);
-	background: linear-gradient(top, #337ab70 50%, #28507 100%);
+	background: linear-gradient(top, #337ab70 50%, #28507 100%);*/
 	display: inline-block;
 	position: relative;
 	z-index: 0;
@@ -102,7 +102,7 @@ input[type="range"]::-ms-fill-upper {
 	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #AAA;
 	text-shadow: 0 1px #AAA;
 	margin: 0 -5px;
-	padding: 0 20px;
+	padding: 0 17px;
 }
 .tabrow span.selected {
 	background: #FFF;
@@ -203,7 +203,7 @@ input[type="range"]::-ms-fill-upper {
 	grid-template-areas: "label"
 						 "item";
 	grid-template-rows: 20px auto;
-	grid-template-columns: 167px;
+	grid-template-columns: 177px;
 	row-gap: 0.2em;
 	background-color: var(--setting_background);
 	color: var(--text);
@@ -269,6 +269,8 @@ input[type="range"]::-ms-fill-upper {
 .setting_item_input {
 	width:95%;
 }
+
+
 /*-----------------------------------------------*/
 .helpicon {
 	color: var(--help_icon);
@@ -349,7 +351,7 @@ input[type="range"]::-ms-fill-upper {
 	top: 0;
 	left: 0;
 	background-color: var(--flyout_background_pinned);
-	box-shadow: var(--light_shadow_value);
+	box-shadow: var(--left_menu_light_shadow);
 	overflow-x: hidden;
 	transition: 0.5s;
 	border-radius: 0px;
@@ -585,6 +587,58 @@ input[type="range"]::-ms-fill-upper {
 	font-size: small;
 }
 
+/* Theme */
+
+.collapsable_header .material-icons-outlined {
+	padding-top: 5px;
+} 
+
+.var_sync_system_theme_list{
+	padding: 6px 0 9px 0;
+	margin-left: 5px;
+	border-radius: 5px;
+	color: var(--dropdown_text);
+	background: var(--dropdown_background);
+}
+
+#palette_area {
+	width: 100%;
+	text-align: center;
+}
+
+#save_theme_area {
+	width: 100%;
+}
+
+#save_theme_name {
+	width: 88%;
+	margin: 0 0 5px -25px;
+}
+
+#palette_area .material-icons-outlined {
+	position: absolute;
+}
+
+#Palette {
+	width: 100%;
+}
+#Palette_Table{
+	width: 100%;
+}
+
+.Theme_Input {
+	width: 100%;
+}
+
+.advanced_theme {
+	margin: 10px 10px 0 auto;
+	padding: 2px 4px 2px 4px;
+	border-radius: var(--radius_wi_card);
+	background-color: var(--wi_tag_color);
+}
+.advanced_theme:hover {
+	filter: brightness(85%);
+}
 
 /*----------------RIGHT FLYOUT MENU------------------*/
 .right_menu_icon {
@@ -617,7 +671,7 @@ input[type="range"]::-ms-fill-upper {
 	overflow-x: hidden;
 	overflow-y: hidden;
 	transition: 0.5s;
-	padding-top: 35px;
+	padding-top: 8px;
 	border-radius: var(--radius_unpinned_menu) 0px 0px var(--radius_unpinned_menu);
 	
 }
@@ -699,6 +753,10 @@ td.server_vars {
 	scrollbar-color: var(--scrollbar-color);
 }
 
+#story_menu_wi{
+	margin-top: 10px;
+}
+
 .story_category_area {
 	padding-bottom: 10px;
 	overflow-y: scroll;
@@ -1203,7 +1261,7 @@ body {
 		width: 80%;
 		height: 80vh;
 		border-radius: 15px;
-		box-shadow: 0 0 35px 20px#1b1b1f;
+		box-shadow: var(--popup_shadow);
 		background-color: var(--popup_background_color);
 		display: flex;
 		flex-direction: column;
@@ -1220,7 +1278,7 @@ body {
 		width: 50%;
 		height: 80vh;
 		border-radius: 15px;
-		box-shadow: 0 0 35px 20px#1b1b1f;
+		box-shadow: var(--popup_shadow);
 		background-color: var(--popup_background_color);
 		display: flex;
 		flex-direction: column;

templates/settings flyout.html

@@ -238,27 +238,29 @@
 			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
 		</div>
 		<div class="setting_tile_area" id="Theme">
-			<select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
+			<select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);">
 			</select><span class="material-icons-outlined cursor" title="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
 			<div class="collapsable_header" onclick="toggle_setting_category(this);">
 				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">navigate_next</span> Palette</h4>
 			</div>
-			<div class="hidden">
-				<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
-				<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
+			<div id="palette_area" class="hidden">
+				<div id="save_theme_area" >
+					<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
+					<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
+				</div>
 				<div class="setting_tile_area" id="Palette">
-					<table border=1>
+					<table id="Palette_Table" border=1>
 						<tr>
-							<th></th>
-							<th colspan=2>Main</th>
-							<th colspan=2>Alternative</th>
+							<td></td>
+							<td colspan=2><b>Main</b></td>
+							<td colspan=2><b>Alternative</b></td>
 						</tr>
 						<tr>
-							<th></th>
-							<th>Background</th>
-							<th>Text</th>
-							<th>Background</th>
-							<th>Text</th>
+							<td></td>
+							<td>Background</td>
+							<td>Text</td>
+							<td>Background</td>
+							<td>Text</td>
 						</tr>
 						<tr>
 							<td>Primary</td>
@@ -292,8 +294,8 @@
 					
 				</div>
 			</div>
-			<div class="collapsable_header" onclick='document.getElementById("advanced_theme_editor").classList.remove("hidden");'>
-				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">navigate_next</span> Advanced Theme</h4>
+			<div class="advanced_theme cursor" onclick='document.getElementById("advanced_theme_editor").classList.remove("hidden");'>
+				<span>Advanced Theme</h4>
 			</div>
 		</div>
 	</div>

themes/Material You.css

@@ -118,9 +118,11 @@
     /*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);
+	--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);
 	--right_menu_strong_shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), -25px 0px 20px 0 rgba(0, 0, 0, 0.19);
+	--popup_shadow: 0 0 35px 20px#1b1b1f;
 	--radius_inputbox: 10px;
 	--radius_unpinned_menu: 20px;
 	--radius_sequence: 10px;