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;
 	}
 }

templates/css/elements/input.css

@@ -15,5 +15,9 @@
 		&[type="number"] {
 			border-bottom: var(--input-underline);
 		}
+
+		&::placeholder {
+			color: var(--input-placeholder-text);
+		}
 	}
 }

templates/css/elements/span.css

@@ -2,4 +2,8 @@
 	&.small {
 		font-size: var(--font-size-10)
 	}
+
+	&:empty::before {
+		content: "\200b";
+	}
 }

templates/css/elements/string-tags.css

@@ -5,16 +5,14 @@
 	grid-template-columns: 1fr min-content;
 	grid-template-rows: repeat(2, minmax(0, 1fr));
 
-	padding: 2px;
 	border: var(--string-tags-border);
 
 	.tags {
 		grid-column: 1 / -1;
 	}
 
-	.tag {
-		background: var(--tag-background, var(--header-background));
-		color: var(--tag-text, var(--header-text));
+	input[type="text"] {
+		border-radius: 4px;
 		padding: 2px 4px;
 	}
 
@@ -25,4 +23,14 @@
 		width: 30px;
 		border-radius: 4px;
 	}
+
+	&:has(.tags.input-element-tags:empty) {
+		grid-template-rows: auto;
+	}
+}
+
+.ripcrypt .tag {
+	background: var(--tag-background, var(--header-background));
+	color: var(--tag-text, var(--header-text));
+	padding: 2px 4px;
 }

templates/css/themes/dark.css

@@ -19,10 +19,14 @@
 	--input-underline: 2px dashed var(--accent-3);
 	--input-background: inherit;
 	--input-text: white;
+	--input-placeholder-text: rgba(255,255,255, 0.5);
 
 	--button-background: black;
 	--button-text: var(--accent-3);
 
+	--col-gap: 2px;
+	--row-gap: 0px;
+
 	/* Additional Variables */
 	--string-tags-border: inherit;
 	--string-tags-tag-background: inherit;