small things

hakusoda · May 3, 2024 · 6ae57fe · 6ae57fe
1 parent 1103f69
commit 6ae57fe
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -28,10 +28,10 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.7",
 		"@sveltejs/package": "^2.3.1",
-		"sass": "^1.75.0",
+		"sass": "^1.76.0",
 		"svelte-preprocess": "^5.1.4",
 		"typescript": "^5.4.5",
-		"vite": "^5.2.10"
+		"vite": "^5.2.11"
 	},
 	"dependencies": {
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -22,7 +22,6 @@
 		'button',
 		`button--size-${size}`,
 		`button--colour-${colour}`,
-		'focusable',
 		(circle && 'button--circle') as string
 	]);
 

diff --git a/src/components/ContextMenu/Root.svelte b/src/components/ContextMenu/Root.svelte
@@ -33,7 +33,7 @@
 		arrow.style.left = `${rect1.x - left + rect1.width / 2}px`;
 		content.style.top = `${top}px`;
 		content.style.left = `${left}px`;
-		content.style.display = '';
+		content.style.removeProperty('display');
 	};
 
 	const clickHandler = ({ target }: MouseEvent) => {

diff --git a/src/components/NumberInput.svelte b/src/components/NumberInput.svelte
@@ -1,48 +1,70 @@
 <script lang="ts">
-	export let min: string | number | null = null;
-	export let max: string | number | null = null;
-	export let step: string | number | null = null;
-	export let value = 0;
+	export let min: string | number | null | undefined = null;
+	export let max: string | number | null | undefined = null;
+	export let step: string | number | null | undefined = null;
+	export let value: number | null | undefined = 0;
 	export let string = '0';
 	export let placeholder = '';
-	$: string = value.toString();
+	export let no_controls = false;
+	$: string = value ? value.toString() : '0';
 
 	let interval: number | undefined = undefined;
 	const startInterval = (step: number) => {
 		clearInterval(interval);
-		interval = setInterval(() => value += step, 100);
+		interval = setInterval(() => value! += step, 100);
 	};
 	const stopInterval = () => (interval = undefined, clearInterval(interval));
 
+	const inc = (increment: number) => value = (value ?? 0) + increment;
 	$: stepNum = Number(step ?? 1);
 </script>
 
-<div class="number-input">
-	<button type="button" on:click={() => value += stepNum}>
-		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-			<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
-		</svg>
-	</button>
+<div class="number_input" class:no_controls>
+	{#if !no_controls}
+		<button type="button" on:click={() => inc(stepNum)}>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+				<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+			</svg>
+		</button>
+	{/if}
 	<input {min} {max} {step} type="number" {placeholder} bind:value/>
-	<button type="button" on:click={() => value -= stepNum}>
-		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-			<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
-		</svg>
-	</button>
+	{#if !no_controls}
+		<button type="button" on:click={() => inc(-stepNum)}>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+				<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
+			</svg>
+		</button>
+	{/if}
 </div>
 
 <style lang="scss">
-	.number-input {
+	.number_input {
 		width: fit-content;
 		color: var(--color-primary);
 		height: 40px;
 		display: inline-flex;
 		position: relative;
 		font-size: 14px;
+		transition: box-shadow .5s;
 		background: var(--background-secondary);
 		font-weight: 500;
 		font-family: var(--font-primary);
 		border-radius: 20px;
+		&.no_controls {
+			box-shadow: inset 0 0 0 1px var(--border-primary);
+			&:hover {
+				box-shadow: inset 0 0 0 1px var(--border-secondary);
+			}
+			input {
+				min-width: 192px;
+				clip-path: none;
+				box-shadow: none;
+				text-align: unset;
+				&:hover {
+					box-shadow: none;
+				}
+			}
+		}
 		&::placeholder {
 			color: var(--color-tertiary);
 		}
@@ -94,7 +116,7 @@
 			}
 		}
 		&:has(input:focus) {
-			animation: 1s infinite alternate basic-focus;
+			animation: forwards awesome_focus ease-out .25s;
 		}
 	}
 </style>
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let type: 'text' | 'email' | 'number' | 'password' | 'tel' | 'url' = 'text';
-	export let value = '';
+	export let value: string | null | undefined = '';
 	export let multiline = false;
 	export let placeholder = '';
 	

diff --git a/src/styles/components/menu.scss b/src/styles/components/menu.scss
@@ -5,91 +5,98 @@
 	z-index: 1000;
 	display: block;
 	padding: 16px 0;
+	overflow: auto;
 	position: relative;
-	overflow: hidden auto;
-	font-size: 14px;
 	min-width: max-content;
+	background: hsl(250 3% 20%);
 	max-height: calc(100vh - 64px);
-	background: center / 200px repeat, var(--grain);
-	box-shadow: inset 0 0 0 1px #ffffff1a, 0 0 16px 4px #00000040;
-	border-radius: 24px;
+	box-shadow: 0 0 0 1px hsl(250 6.3% 21%), 0 0 8px 4px #00000040;
+	border-radius: 16px;
 	transform-origin: top center;
+	&:before {
+		top: 0;
+		left: 0;
+		mask: linear-gradient(to bottom, #fff, transparent 24px);
+		width: 100%;
+		height: 100%;
+		content: '';
+		position: absolute;
+		box-shadow: inset 0 0 0 1px hsl(250 3% 35%);
+		border-radius: 16px;
+		pointer-events: none;
+	}
 
 	-webkit-user-select: none;
 	user-select: none;
 
-	-webkit-backdrop-filter: blur(32px);
-	backdrop-filter: blur(32px);
 	.search {
 		width: -moz-available;
 		width: -webkit-fill-available;
 		color: #fff;
 		border: none;
 		height: 32px;
-		margin: 0 16px;
+		margin: 0 16px 16px;
 		outline: none;
 		padding: 0 16px;
-		font-size: .9em;
-		background: none;
-		box-shadow: inset 0 0 0 1px #ffffff40;
+		font-size: 13px;
+		background: hsl(250 3% 30%);
+		box-shadow: inset 0 0 0 1px #ffffff1a, 0 0 4px 0 #00000060;
 		font-family: var(--font-primary);
-		border-radius: 12px;
-		margin-bottom: 8px;
+		border-radius: 4px;
 		&::placeholder {
 			color: #ffffff80;
 		}
 	}
 	p {
-		color: #ffffff80;
+		color: hsl(250 5% 60%);
 		margin: 0 28px 4px;
-		font-size: 16px;
+		font-size: 13px;
 		text-align: start;
-		font-weight: 600;
+		font-weight: 500;
 		line-height: 100%;
-		font-variant-caps: all-small-caps;
 		&:first-child {
 			margin-top: 4px;
 		}
 		&:not(:first-child) {
-			margin-top: 8px;
+			margin-top: 16px;
 		}
 	}
 	button, a {
 		gap: 12px;
 		width: -moz-available;
 		width: -webkit-fill-available;
-		color: #ffffffe6;
+		color: var(--color-primary);
 		height: 32px;
 		border: none;
 		cursor: pointer;
 		margin: 0 16px;
 		display: flex;
 		outline: none;
 		padding: 0 12px;
-		font-size: inherit;
+		font-size: 13px;
 		min-width: max-content;
 		background: none;
 		box-sizing: border-box;
 		transition: color .25s, background .25s, box-shadow .25s;
-		font-weight: 500;
+		font-weight: 450;
 		align-items: center;
 		font-family: inherit;
-		border-radius: 8px;
+		border-radius: 4px;
 		text-decoration: none !important;
 		.indicator {
 			margin-left: auto;
 		}
 		&:focus {
-			animation: 1s infinite alternate basic-focus;
+			animation: forwards awesome_focus ease-out .25s;
 		}
 		&:hover, &:focus, &.hover {
 			color: var(--menu-color-hover);
 			background: var(--menu-background-hover);
-			box-shadow: inset 0 0 0 1px #ffffff1a;
+			box-shadow: inset 0 0 0 1px #ffffff1a, 0 0 4px 0 #00000060;
 			text-decoration: none;
 		}
 		&.selected {
-			font-weight: 600;
+			font-weight: 500;
 		}
 		&.hidden {
 			display: none;

diff --git a/src/styles/themes/base.scss b/src/styles/themes/base.scss
@@ -16,18 +16,18 @@
 	font-family: var(--font-primary);
 }
 
-.focusable {
+.focusable, .menu_content .search {
 	outline: none;
 	&:focus {
-		animation: 1s infinite alternate basic-focus;
+		animation: forwards awesome_focus ease-out .25s;
 	}
 }
 
-@keyframes basic-focus {
+@keyframes awesome_focus {
 	0% {
-		box-shadow: 0 0 0 2px var(--border-tertiary);
+		box-shadow: 0 0 0 32px transparent;
 	}
 	100% {
-		box-shadow: 0 0 0 2px var(--border-secondary);
+		box-shadow: 0 0 0 2px hsla(260, 80%, 80%, .75);
 	}
 }
diff --git a/yarn.lock b/yarn.lock
@@ -184,11 +184,11 @@ __metadata:
     "@sveltejs/kit": "npm:^2.5.7"
     "@sveltejs/package": "npm:^2.3.1"
     "@sveltejs/vite-plugin-svelte": "npm:^3.1.0"
-    sass: "npm:^1.75.0"
+    sass: "npm:^1.76.0"
     svelte: "npm:^4.2.15"
     svelte-preprocess: "npm:^5.1.4"
     typescript: "npm:^5.4.5"
-    vite: "npm:^5.2.10"
+    vite: "npm:^5.2.11"
   languageName: unknown
   linkType: soft
 
@@ -1798,16 +1798,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.75.0":
-  version: 1.75.0
-  resolution: "sass@npm:1.75.0"
+"sass@npm:^1.76.0":
+  version: 1.76.0
+  resolution: "sass@npm:1.76.0"
   dependencies:
     chokidar: "npm:>=3.0.0 <4.0.0"
     immutable: "npm:^4.0.0"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 1564ab2c8041c99a330cec93127fe8abcf65ac63eecb471610ed7f3126a2599a58b788a3a98eb8719f7f40b9b04e00c92bc9e11a9c2180ad582b8cba9fb030b0
+  checksum: 976baf2c378e104f8d4ffca5375c8aa6f3d24f59d5c0a5db8d68a51f89edce45dedc25cfcd304b309fc8568d146de9e2c6cd189395e97bb2840d39feb13932ff
   languageName: node
   linkType: hard
 
@@ -2152,9 +2152,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.2.10":
-  version: 5.2.10
-  resolution: "vite@npm:5.2.10"
+"vite@npm:^5.2.11":
+  version: 5.2.11
+  resolution: "vite@npm:5.2.11"
   dependencies:
     esbuild: "npm:^0.20.1"
     fsevents: "npm:~2.3.3"
@@ -2188,7 +2188,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: d50630ac8de807a6185cd9b5763b3969b2950a454cf6a4482f3780f183865e8d6f7e3aa57dd70ede1c493aaa861efb25b43562287efbcf8b471b7f3b88857a33
+  checksum: 664b8d68e4f5152ae16bd2041af1bbaf11c43630ac461835bc31ff7d019913b33e465386e09f66dc1037d7aeefbb06939e0173787c063319bc2bd30c3b9ad8e4
   languageName: node
   linkType: hard