RC-26 | Name input

Apps/HeroSummaryCardV1/content.hbs

@@ -9,7 +9,13 @@
 			Player
 		</div>
 	</div>
-	<input id="{{meta.idp}}-name" class="hero_name row-alt" value="Hugo">
+	<input
+		id="{{meta.idp}}-name"
+		type="text"
+		class="hero_name row-alt"
+		value="{{actor.name}}"
+		name="name"
+	>
 
 	{{!-- * Armour --}}
 	<div class="armour"></div>

Apps/HeroSummaryCardV1/style.css

@@ -16,17 +16,6 @@
 		padding: 2px 4px;
 	}
 
-	input {
-		box-sizing: border-box;
-		border: none;
-
-		&[type="text"],
-		&[type="number"] {
-			padding: 2px 4px;
-			border-bottom: 2px dashed blueviolet;
-		}
-	}
-
 	.hero_name {
 		grid-column: span 3;
 		margin-left: calc(var(--col-gap) * -1);

Apps/common.css

@@ -5,8 +5,22 @@
 	}
 
 	.HeroSummaryCardV1 {
-		height: 270px;
+		/* height: 270px; */
 		width: 680px;
 		--col-gap: 2px;
 	}
+
+	input {
+		all: initial;
+		box-sizing: border-box;
+		border: none;
+		outline: none;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+
+		&[type="text"] {
+			border-bottom: 2px dashed purple;
+		}
+	}
 }