From 86011739f10578442d1464745115d831d629d799 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 1 Feb 2024 08:27:23 -0800
Subject: feat(input): prettier inputs

---
 src/lib/Settings/Categories/Cache.svelte   | 10 ++++++----
 src/lib/Settings/Categories/Display.svelte |  8 ++++----
 src/styles/input.css                       | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/lib/Settings/Categories/Cache.svelte b/src/lib/Settings/Categories/Cache.svelte
index 04b0f232..c59897e1 100644
--- a/src/lib/Settings/Categories/Cache.svelte
+++ b/src/lib/Settings/Categories/Cache.svelte
@@ -13,14 +13,15 @@
 
 <p />
 
-<span>Re-cache AniList media lists every</span>
+Re-cache AniList media lists every
 <input
 	type="number"
+	class="no-shadow"
 	bind:value={$settings.cacheMinutes}
 	min="1"
 	max="60"
 	placeholder="30"
-	size="3"
+	size="1"
 	on:change={() =>
 		($settings.cacheMinutes < 1 && ($settings.cacheMinutes = 1)) ||
 		($settings.cacheMinutes > 60 && ($settings.cacheMinutes = 60))}
@@ -29,14 +30,15 @@ minutes
 
 <br />
 
-<span>Re-cache manga data every</span>
+Re-cache manga data every
 <input
 	type="number"
+	class="no-shadow"
 	bind:value={$settings.cacheMangaMinutes}
 	min="5"
 	max="1440"
 	placeholder="120"
-	size="4"
+	size="2"
 	on:change={() =>
 		($settings.cacheMangaMinutes < 5 && ($settings.cacheMangaMinutes = 5)) ||
 		($settings.cacheMangaMinutes > 1440 && ($settings.cacheMangaMinutes = 1440))}
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 9cd8364e..a87a9886 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -226,11 +226,11 @@
 	&nbsp;
 	<input
 		type="number"
+		class="no-shadow"
 		bind:value={$settings.displayCoverWidth}
-		min="1"
-		max="60"
+		min="50"
 		placeholder="116.609"
-		size="6"
+		size="3"
 		on:change={() => {
 			if ($settings.displayCoverWidth === null) {
 				$settings.displayCoverWidth = 116.609;
@@ -241,7 +241,7 @@
 			$settings.displayCoverWidth < 50 && ($settings.displayCoverWidth = 50);
 		}}
 	/>
-	Cover width
+	Cover width (px)
 	<br />
 {:else}
 	<br />
diff --git a/src/styles/input.css b/src/styles/input.css
index 381f2ebe..fb7be86f 100644
--- a/src/styles/input.css
+++ b/src/styles/input.css
@@ -21,6 +21,16 @@ select {
 		background-color: var(--base07);
 		/* color: var(--base05); */
 	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='number'] {
+		appearance: textfield;
+	}
 }
 
 input[type='text'],
@@ -139,3 +149,7 @@ button:disabled:active {
 .button-action {
 	background-color: var(--base0E);
 }
+
+.no-shadow {
+	box-shadow: none;
+}
-- 
cgit v1.2.3