Get the aura display finished for the Craft Card (closes #23)

templates/Apps/HeroCraftCardV1/content.hbs

@@ -10,13 +10,16 @@
 		<rc-svg
 			class="caster-silhouette"
 			name="caster-silhouette.v1"
-			var:fill="var(--accent-2)"
+			var:fill="var(--accent-1)"
 		></rc-svg>
 		<div class="aura-values">
 			<div class="dual-pill">
 				<span class="label">Aura</span>
-				<span class="value">4</span>
-				<span class="value">6</span>
+				<div class="values">
+					<span class="value"></span>
+					<span class="slash" aria-hidden="true"></span>
+					<span class="value"></span>
+				</div>
 			</div>
 		</div>
 	</div>

templates/Apps/HeroCraftCardV1/style.css

@@ -72,6 +72,39 @@
 		bottom: -10px;
 	}
 
+	.aura-values {
+		grid-row: 1;
+		grid-column: -3 / -1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 3;
+
+		.dual-pill {
+			border-radius: 999px;
+			background: var(--accent-1);
+			display: flex;
+			flex-direction: row;
+			gap: 0.25rem;
+			align-items: center;
+			padding-left: 8px;
+			margin-left: 1rem;
+			margin-bottom: 1.2rem;
+		}
+
+		.values {
+			border-radius: 999px;
+			margin: 2px;
+			background: var(--base-background);
+			color: var(--base-text);
+			padding: 0.125rem 0.5rem;
+			display: flex;
+			flex-direction: row;
+			gap: 0.5rem;
+			--slash-color: var(--accent-1);
+		}
+	}
+
 	.craft-list {
 		display: grid;
 		grid-template-rows: subgrid;

templates/css/elements/span.css

@@ -10,6 +10,13 @@
 		overflow: hidden;
 	}
 
+	&.slash {
+		width: 2px;
+		background: var(--slash-color, currentColor);
+		border-radius: 999px;
+		transform: rotate(var(--slash-rotation, 15deg));
+	}
+
 	/* Makes it so that spans are never less than the font size */
 	&:empty::before {
 		content: "\200b";