Add number inputs into the supported structures, and redesign the sheet to make it actually look good

templates/Apps/AllItemSheetV1/content.hbs

@@ -1,17 +1,17 @@
 <div class="AllItemSheetV1">
-	<div>
-		{{#if meta.editable}}
-			<label for="{{meta.idp}}-name">Name</label>
-			<input
-				type="text"
-				id="{{meta.idp}}-name"
-				name="name"
-				value="{{item.name}}"
-			>
-		{{else}}
-			<span class="label">Name</span>
-			<span class="value">{{item.name}}</span>
-		{{/if}}
-	</div>
+	{{#if meta.editable}}
+		<label for="{{meta.idp}}-name">Name</label>
+		<input
+			type="text"
+			id="{{meta.idp}}-name"
+			class="name"
+			name="name"
+			value="{{item.name}}"
+		>
+	{{else}}
+		<span class="label">Name</span>
+		<span class="value">{{item.name}}</span>
+	{{/if}}
+	<hr>
 	{{{ rc-formFields formFields }}}
 </div>

templates/Apps/AllItemSheetV1/style.css

@@ -1,32 +1,42 @@
 .ripcrypt .AllItemSheetV1 {
 	--input-height: 1rem;
+	--input-underline: none;
 	--col-gap: 8px;
+	--row-gap: 8px;
 
 	--string-tags-tag-text: var(--header-text);
 	--string-tags-tag-background: var(--header-background);
 	--string-tags-add-text: white;
 	--string-tags-add-background: var(--accent-1);
+	--string-tags-input-text: white;
+	--string-tags-input-background: var(--accent-1);
 
 	display: grid;
-	grid-template-rows: minmax(0, 1fr);
-	grid-auto-rows: minmax(0, 1fr);
+	grid-template-columns: auto minmax(0, 1fr);
 	column-gap: var(--col-gap);
+	row-gap: var(--row-gap);
 
+	padding: 8px;
 	background: var(--base-background);
 	color: var(--base-text);
 
-	> :nth-child(odd) {
-		background: var(--alt-row-background);
-		color: var(--alt-row-text);
+	> [data-input-type] {
+		display: contents;
+	}
 
-		--string-tags-tag-text: var(--header-text);
-		--string-tags-tag-background: var(--header-background);
-		--string-tags-add-text: var(--button-text);
-		--string-tags-add-background: var(--button-background);
+	hr {
+		background: var(--accent-1);
+		grid-column: 1 / -1;
+		height: 1px;
+		width: 90%;
+		margin: 0 auto;
 	}
 
 	label, .label {
+		display: flex;
+		align-items: center;
 		box-sizing: border-box;
+
 		padding: 2px 4px;
 		text-transform: uppercase;
 		font-size: var(--font-size-14);
@@ -35,15 +45,17 @@
 		font-weight: bold;
 	}
 
-	[data-input-type="string-set"] {
+	input, .value, [data-tag-count] {
+		border-radius: 4px;
 		padding: 2px 4px;
-		display: flex;
-		flex-direction: row;
-		column-gap: var(--col-gap);
-		grid-row: span 2;
-
-		label, .label {
-			padding: 0;
-		}
+	}
+	input {
+		background: var(--accent-2);
+	}
+	.value, [data-tag-count="0"] {
+		border: 2px solid var(--accent-2);
+	}
+	[data-tag-count="0"] {
+		justify-content: start;
 	}
 }