Add the bytes panel to the page. (closes #108)

styles/generic.scss

@@ -38,8 +38,8 @@
 	input[type="text"],
 	input[type="number"],
 	textarea {
+		@include fvtt_reset;
 		padding: 5px 7px;
-		@include input-generic;
 	}
 
 	textarea {

styles/sheets/actor/char-sheet/pages/inventory.scss

@@ -1,12 +1,14 @@
+@use "../../../../mixins/material" as material;
+
 .dotdungeon .actor--pc-v2 .active.inventory-page {
 	padding-bottom: 50px;
 	height: 100%;
 }
 
-.dotdungeon .actor--pc-v2 .active.inventory-page .tab[data-tab="player"] {
+.dotdungeon .actor--pc-v2 .inventory-page .active.tab[data-tab="player"] {
 	display: grid;
 	gap: 16px;
-	grid-template-columns: 1fr 3fr;
+	grid-template-columns: 1fr 2fr;
 	grid-template-rows: 1fr repeat(3, min-content);
 	height: 100%;
 	color: white;
@@ -17,4 +19,40 @@
 		display: flex;
 		flex-direction: column;
 	}
+
+	.panel {
+		padding: 8px;
+		border-radius: 4px;
+	}
+
+	.bytes-panel {
+		display: grid;
+		grid-template-columns: 1fr min-content 50px min-content;
+		gap: 8px;
+		align-items: center;
+
+		label {
+			justify-self: left;
+		}
+
+		input {
+			@include material.elevate(3);
+			border: none;
+			border-radius: 4px;
+			text-align: center;
+			color: white;
+
+			&:hover {
+				@include material.elevate(6);
+				background: hsl( from currentColor / 50% ); // probably gonna need color-mix
+			}
+
+			&:focus-visible {
+				border-width: 2px;
+				border-color: currentColor;
+				background: var(--elevation-8dp-bg);
+			}
+
+		}
+	}
 }

styles/sheets/partials/panel.scss

@@ -2,7 +2,7 @@
 @use "../../mixins/foundry" as *;
 @use "../../vars" as *;
 
-.dotdungeon .panel {
+.dotdungeon .actor--pc-mvp .panel {
 	display: grid;
 	grid-template-rows: min-content 1fr;
 

templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs

@@ -1,17 +1,46 @@
 <div class="tab" data-group="inventory" data-tab="player">
-	<div class="e-1dp">
+	<div class="e-1dp panel containers-panel">
 		<h2>Containers</h2>
 	</div>
-	<div class="e-1dp item-list">
+	<div class="e-1dp panel item-list">
 		<h2>Item list</h2>
 	</div>
-	<div class="e-1dp">
+	<div class="e-1dp panel capacity-panel">
 		<h2>Capacity</h2>
 	</div>
-	<div class="e-1dp">
-		<h2>Bytes</h2>
+	<div class="e-1dp panel bytes-panel">
+		<label
+			for="{{meta.idp}}-player-inventory-bytes-input"
+		>
+			Bytes
+		</label>
+		<button
+			type="button"
+			class="equal-padding"
+			data-decrement="system.bytes"
+			aria-label="Decrease byte count by one"
+		>
+			<div aria-hidden="true" class="icon icon--14">
+				{{{ icons.minus }}}
 			</div>
-	<div class="e-1dp">
+		</button>
+		<input
+			type="number"
+			id="{{meta.idp}}-player-inventory-bytes-input"
+			value="{{system.bytes}}"
+		>
+		<button
+			type="button"
+			class="equal-padding"
+			data-increment="system.bytes"
+			aria-label="Increase byte count by one"
+		>
+			<div aria-hidden="true" class="icon icon--14">
+				{{{ icons.create }}}
+			</div>
+		</button>
+	</div>
+	<div class="e-1dp panel filter-panel">
 		<h2>Show</h2>
 	</div>
 </div>