Merge pull request #197 from LightSaveUs/UI2

Additional Visual Improvements

static/koboldai.css

@@ -375,7 +375,7 @@ border-top-right-radius: var(--tabs_rounding);
 
 .search_icon {
 	position: absolute;
-	top:10px;
+	top:8px;
 	color: var(--text);
 	left: calc(var(--flyout_menu_width) - 133px);
 	z-index:50;
@@ -686,17 +686,17 @@ border-top-right-radius: var(--tabs_rounding);
 
 .bias_header_phrase {
 	grid-area: phrase;
-	font-size: calc(0.9em + var(--font_size_adjustment));
+	font-size: calc(1.1em + var(--font_size_adjustment));
 }
 
 .bias_header_score {
 	grid-area: percent;
-	font-size: calc(0.9em + var(--font_size_adjustment));
+	font-size: calc(1.1em + var(--font_size_adjustment));
 }
 
 .bias_header_max {
 	grid-area: max;
-	font-size: calc(0.9em + var(--font_size_adjustment));
+	font-size: calc(1.1em + var(--font_size_adjustment));
 }
 
 /* Theme */
@@ -1361,7 +1361,7 @@ body {
 #themetext{
 	height: 100%;
 	width: 100%;
-	padding: 5px;
+	padding: 10px;
 	grid-area: textarea;
 	border-radius: var(--radius_inputbox);
 }
@@ -1853,17 +1853,14 @@ body {
 #context-viewer-header > h3 {
 	margin: 0px;
 	margin-top: 3px;
+	margin-right: 5px;
 }
 
 #context-container {
 	overflow-y: auto;
 	height: 100%;
 	flex-grow: 1;
-	padding: 0px 10px;
+	padding: 15px 12px 15px 12px;
-
-	/* HACK: This is a visually ugly hack to avoid cutting of token tooltips on
-	the first line. */
-	padding-top: 15px;
 }
 
 .context-symbol {
@@ -2376,7 +2373,7 @@ body {
 	grid-area: textarea;
 	background-color: var(--input_background);
 	color: var(--input_text);
-	padding: 5px;
+	padding: 10px;
 	resize: none;
 	border-color: white;
 	border-width: 1px;

templates/settings flyout.html

@@ -153,7 +153,7 @@
 								<li class="sample_order cursor" onclick="select_sample(this);">Typical Sampling</li>
 								<li class="sample_order cursor" onclick="select_sample(this);">Temperature</li>
 							</ul>
-							<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
+							<div style="display:flex;flex-direction:column;margin-top: 25px;">
 								<div class="material-icons-outlined cursor" onclick="move_sample('up');">arrow_upward</div>
 								<div class="material-icons-outlined cursor" onclick="move_sample('down');">arrow_downward</div>
 								

templates/story flyout.html

@@ -52,7 +52,7 @@
 		</div>
 	</div>
 	<div id="story_menu_wi" class="story_category_area tab-target tab-target-story hidden">
-		<h4 class="section_header" style="margin-left: 10px;">World Info</h4>
+		<h4 class="section_header" style="margin-left: 12px;">World Info</h4>
 		<span class="help_text" style="margin-left: 20px;">
 			Lore information, which the AI recalls by certain words.
 			<span class="helpicon material-icons-outlined" title="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>

themes/Darkness.css

@@ -1,7 +1,7 @@
 /*
 	Name: Darkness
 	Author: LightSaveUs
-	Version: 0.3.2
+	Version: 0.3.3
 	Description: A theme inspired by the AI Dungeon interface.
 */
 
@@ -276,6 +276,22 @@ span.material-icons-outlined.cursor.search_icon {
 	filter: brightness(100%) !important;
 }
 
+.substitution-card > .card-left > .material-icons-outlined {
+	color: #999 !important;
+}
+
+.substitution-card > .card-left > .material-icons-outlined:hover {
+	color: #e0e0e0 !important;
+}
+
+.true-t + label::before {
+	color: #999 !important;
+}
+
+.true-t:checked + label::before {
+	color: #e0e0e0 !important;
+}
+
 /* Import */
 
 a {
@@ -284,7 +300,7 @@ a {
 
 .form-control {
 	border: none;
-    color: #555 !important;
+    color: #148883 !important;
     background-color: #424243 !important;
 }
 

themes/Monochrome.css

@@ -1,7 +1,7 @@
 /*
 	Name: Monochrome
 	Author: LightSaveUs
-	Version: 0.6.1
+	Version: 0.6.2
 	Description: A theme inspired by the NovelAI interface.
 */
 
@@ -242,6 +242,10 @@
 	filter: brightness(120%) !important;
 }
 
+#new-sub-card:hover {
+	filter: brightness(120%) !important;
+}
+
 /* Context Menu */
 
 #context-menu {
@@ -288,6 +292,22 @@ span.helpicon.material-icons-outlined:hover {
 	transform: scale(1) !important;
 }
 
+.substitution-card > .card-left > .material-icons-outlined {
+	color: #999 !important;
+}
+
+.substitution-card > .card-left > .material-icons-outlined:hover {
+	color: #e0e0e0 !important;
+}
+
+.true-t + label::before {
+	color: #999 !important;
+}
+
+.true-t:checked + label::before {
+	color: #e0e0e0 !important;
+}
+
 /* Import */
 
 a {
@@ -296,6 +316,7 @@ a {
 
 .form-control {
 	border: none;
+	color: #e0e0e0 !important;
     background-color: #25323d !important;
 }
 

themes/Nostalgia.css

@@ -1,7 +1,7 @@
 /*
 	Name: Nostalgia
 	Author: LightSaveUs
-	Version: 0.2.2
+	Version: 0.2.3
 	Description: A theme inspired by the previous KoboldAI interface.
 */
 
@@ -259,6 +259,24 @@
 	background-color: #212122 !important;
 }
 
+/* Icons */
+
+.substitution-card > .card-left > .material-icons-outlined {
+	color: #999 !important;
+}
+
+.substitution-card > .card-left > .material-icons-outlined:hover {
+	color: #fff !important;
+}
+
+.true-t + label::before {
+	color: #999 !important;
+}
+
+.true-t:checked + label::before {
+	color: #fff !important;
+}
+
 /* Import */
 
 a {
@@ -267,6 +285,7 @@ a {
 
 .form-control {
     background-color: #404040 !important;
+	color: #3bf723 !important;
 	border: none;
 }
 

themes/Unicorn.css

@@ -1,7 +1,7 @@
 /*
 	Name: Unicorn
 	Author: LightSaveUs
-	Version: 0.3.3
+	Version: 0.3.4
 	Description: A theme inspired by the DreamilyAI interface.
 */
 
@@ -302,6 +302,23 @@ span.material-icons-outlined.cursor.search_icon {
 	filter: brightness(100%) !important;
 }
 
+
+.substitution-card > .card-left > .material-icons-outlined {
+	color: #999 !important;
+}
+
+.substitution-card > .card-left > .material-icons-outlined:hover {
+	color: #464646 !important;
+}
+
+.true-t + label::before {
+	color: #999 !important;
+}
+
+.true-t:checked + label::before {
+	color: #dc6872 !important;
+}
+
 /* Import */
 
 a {
@@ -310,6 +327,7 @@ a {
 
 .form-control {
 	border: none;
+	color: #e26771 !important;
 	transform: translateX(6px)!important;
     background-color: #e2e2e2 !important;
 }