Fixed scrollbar CSS issues, and light mode being a random combination…

… of colors
Ecdar · Dec 15, 2023 · 4368a69 · 4368a69
1 parent 126fd77
commit 4368a69
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json
@@ -95,7 +95,7 @@
 				0.39901960784,
 				0.43823529411
 			],
-			"--engine-ui-underline-color": ["display-p3", 1, 1, 1],
+			"--engine-ui-underline-color": ["display-p3", 0, 0, 0],
 			"--engine-ui-error-underline-color": [
 				"display-p3",
 				0.82745098039,
@@ -110,23 +110,24 @@
 			],
 			"--engine-ui-scrollbar-thumb-background-color": [
 				"display-p3",
-				0.5608,
-				0.498,
-				0.4353
+				0.3,
+				0.3,
+				0.3
+			],
+			"--engine-ui-scrollbar-thumb-hover-background-color": [
+				"display-p3",
+				0.1,
+				0.1,
+				0.1
 			],
 			"--engine-ui-scrollbar-thumb-color": [
 				"display-p3",
 				0.7137,
 				0.6941,
 				0.6706
 			],
-			"--engine-ui-text-color": ["display-p3", 1, 1, 1],
-			"--engine-ui-background-color": [
-				"display-p3",
-				0.2862745098,
-				0.34901960784,
-				0.38823529411
-			],
+			"--engine-ui-text-color": ["display-p3", 0, 0, 0],
+			"--engine-ui-background-color": ["display-p3", 0.95, 0.95, 0.95],
 			"--engine-ui-checkbox-color": [
 				"display-p3",
 				0.2862745098,
@@ -272,6 +273,12 @@
 					0.95,
 					0.95
 				],
+				"--engine-ui-scrollbar-thumb-hover-background-color": [
+					"display-p3",
+					0.6,
+					0.6,
+					0.6
+				],
 				"--engine-ui-scrollbar-thumb-color": ["display-p3", 0, 0, 0],
 				"--engine-ui-background-color": [
 					"display-p3",

diff --git a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts
@@ -38,6 +38,7 @@ export const ColorVariables = z
 		"--engine-ui-error-underline-color": ColorAttribute,
 		"--engine-ui-input-text-placeholder-color": ColorAttribute,
 		"--engine-ui-scrollbar-thumb-background-color": ColorAttribute,
+		"--engine-ui-scrollbar-thumb-hover-background-color": ColorAttribute,
 		"--engine-ui-scrollbar-thumb-color": ColorAttribute,
 		"--engine-ui-text-color": ColorAttribute,
 		"--engine-ui-background-color": ColorAttribute,

diff --git a/src/lib/components/engineUI/EnginePanel.svelte b/src/lib/components/engineUI/EnginePanel.svelte
@@ -12,6 +12,7 @@
 	{#each $tempEngines as engine, index}
 		{#if engine.address != "-1"}
 			<EngineSeperate
+				id={index}
 				currentEngine={engine}
 				{tempEngines}
 				bind:this={engineSeperateArray[index]}
@@ -24,7 +25,7 @@
 	h2 {
 		margin-bottom: 0.3em;
 		padding: 0.15em;
-		background-color: var(--console-selectedtab-color);
+		background-color: var(--engine-ui-background-color);
 		width: fit-content;
 		text-shadow: 0.05em 0.05em 0.05em grey;
 		color: var(--engine-ui-text-color);
@@ -43,19 +44,19 @@
 	}
 
 	.engines::-webkit-scrollbar-track {
-		box-shadow: inset 0 0 1em var(--console-unselectedtab-color);
-		background: var(--console-unselectedtab-color);
+		box-shadow: inset 0 0 1em var(--engine-ui-background-color);
+		background: var(--engine-ui-background-color);
 	}
 
 	.engines::-webkit-scrollbar-thumb {
 		background: var(--engine-ui-scrollbar-thumb-background-color);
 		border-radius: 4em;
-		border: 0.3em solid var(--engine-ui-scrollbar-thumb-color);
+		border: 0.3em solid var(--engine-ui-background-color);
 		border-top: 0;
 		border-bottom: 0;
 	}
 
 	.engines::-webkit-scrollbar-thumb:hover {
-		background: var(--engine-ui-scrollbar-thumb-color);
+		background: var(--engine-ui-scrollbar-thumb-hover-background-color);
 	}
 </style>
diff --git a/src/lib/components/engineUI/EngineSeperate.svelte b/src/lib/components/engineUI/EngineSeperate.svelte
@@ -40,6 +40,8 @@
 		validatePort();
 	};
 
+	export let id: number;
+
 	/**
 	 * Delete an engine by setting the adress of the engine to -1 and removing it from the view
 	 * Deletion should not be permanent if the change is not saved in EngineUI
@@ -153,6 +155,7 @@
 					click={deleteEngine}
 					size={24}
 					id="delete-button"
+					color={"var(--engine-ui-text-color)"}
 				/>
 				<SvgButton
 					icon={Close}
@@ -161,6 +164,7 @@
 					}}
 					size={24}
 					id="delete-button"
+					color={"var(--engine-ui-text-color)"}
 				/>
 			</div>
 		</div>
@@ -188,6 +192,7 @@
 			click={() => {
 				showDeleteDialog = true;
 			}}
+			color={"var(--engine-ui-text-color)"}
 		/>
 	</div>
 	<p id="ip">IP Address:</p>
@@ -206,16 +211,17 @@
 		/>
 	</div>
 	<div id="local-button" class="unselectable" tabindex="-1">
-		<label for="checkbox-button-for-label">
+		<label for={"checkbox-button-for-label-" + id}>
 			<!--for attribute automatically works on nested element-->
 			Use Bundle
 			<SvgButton
-				id="checkbox-button-for-label"
+				id={"checkbox-button-for-label-" + id}
 				icon={currentEngine.useBundle
 					? Check_box
 					: Check_box_outline_blank}
 				click={toggleUseBundle}
 				size={18}
+				color={"var(--engine-ui-text-color)"}
 			/></label
 		>
 	</div>

diff --git a/src/lib/components/engineUI/EngineUI.svelte b/src/lib/components/engineUI/EngineUI.svelte
@@ -209,6 +209,7 @@
 					id="close-unsaved-changes-modal"
 					click={forceCloseDialogContainer}
 					size={24}
+					color={"var(--engine-ui-text-color)"}
 				/>
 				<SvgButton
 					icon={Close}
@@ -217,6 +218,7 @@
 						showUnsavedChanges = false;
 					}}
 					size={24}
+					color={"var(--engine-ui-text-color)"}
 				/>
 			</div>
 		</div>
@@ -238,6 +240,7 @@
 					}}
 					id="close-incorrect-information-modal"
 					size={24}
+					color={"var(--engine-ui-text-color)"}
 				/>
 			</div>
 		</div>

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
@@ -59,6 +59,7 @@
 	dialog {
 		color: var(--text-color);
 		background-color: var(--background-color);
+		overflow-y: hidden;
 	}
 	dialog::backdrop {
 		background-color: var(--modal-background-color);