Get the material items finished

styles/sheets/actor/char-sheet/v2/material/inputs.scss

@@ -0,0 +1,15 @@
+.dotdungeon.material {
+	button {
+		padding: 8px 16px;
+
+		&.outline {
+			border-style: solid;
+			border-color: var(--outline-button-border);
+		}
+
+		&:disabled {
+			opacity: 37%;
+			cursor: default;
+		}
+	}
+}

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

@@ -1,4 +1,4 @@
-@use "../../../../mixins/material" as material;
+@use "../../../../../mixins/material" as material;
 
 .dotdungeon .actor--pc-v2 .active.inventory-page {
 	padding-bottom: 50px;
@@ -93,4 +93,64 @@
 			margin: 0;
 		}
 	}
+
+	.item-list {
+		.material-list {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 8px;
+		}
+	}
+
+	.material {
+		@include material.elevate(1);
+		padding: 8px;
+		gap: 8px;
+		display: grid;
+		grid-template-columns: 1fr min-content 50px min-content;
+		align-items: center;
+		border-radius: 4px;
+
+		&__label {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			justify-self: left;
+			max-width: 100%;
+		}
+
+		&__button {
+			--size: 28px;
+			@include material.elevate(2);
+			transition: all 400ms ease-in-out;
+			color: var(--inventory-material-color);
+			border-width: 0;
+			width: var(--size);
+			height: var(--size);
+
+			&:hover {
+				@include material.elevate(4);
+				color: var(--inventory-material-hover-color);
+			}
+		}
+
+		&__input {
+			@include material.elevate(2);
+			font-family: var(--input-font);
+			text-align: center;
+			border-radius: 4px;
+			transition: all 400ms ease-in-out;
+			color: var(--inventory-material-color);
+
+			&:hover {
+				@include material.elevate(4);
+				color: var(--inventory-material-hover-color);
+			}
+
+			&:focus {
+				@include material.elevate(8);
+				color: var(--inventory-material-focus-color);
+			}
+		}
+	}
 }

styles/sheets/actor/char-sheet/v2/themes/dark.scss

@@ -9,11 +9,17 @@ $on-surface: white;
 $on-primary: $t;
 $on-secondary: $t;
 
+$title-font: 'Pixelify Sans', sans-serif;
+$body-font: sans-serif;
+
 .actor--pc-v2 {
 	--sheet-bg: #{$background};
 	--nav-bg: #{$surface};
 	--nav-button-text: #{$on-surface};
 
+	--tab-font: #{$title-font};
+	--input-font: #{$body-font};
+
 	/* Elevation backgrounds to following Material design */
 	--elevation-0dp-bg: #{$surface};
 	--elevation-1dp-bg: color-mix(in lab, transparent, white 5%);
@@ -36,4 +42,8 @@ $on-secondary: $t;
 	--skill-training-select-bg: #{$surface};
 	--skill-training-select-text-color: #{$on-surface};
 	--skill-roll-button-text-color: #{$on-surface};
+
+	--inventory-material-color: white;
+	--inventory-material-hover-color: white;
+	--inventory-material-focus-color: white;
 }

styles/sheets/actor/char-sheet/v2/v2.scss

@@ -1,6 +1,6 @@
 @use "./themes/dark.scss";
-@use "../../../mixins/material" as material;
-@use "../../../mixins/partials" as partials;
+@use "../../../../mixins/material" as material;
+@use "../../../../mixins/partials" as partials;
 
 @use "./pages/stats.scss";
 @use "./pages/inventory.scss";