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;