Finish the primary design of the item tab, still awaiting an equipped toggle

module/apps/PlayerSheet.mjs

@@ -243,11 +243,6 @@ export class PlayerSheet extends
 
 		totalWeight = toPrecision(totalWeight, 2);
 		ctx.totalWeight = totalWeight + weightUnit;
-		console.log({
-			totalWeight,
-			carryCapacity: this.actor.system.carryCapacity,
-			percent: Math.round(totalWeight / this.actor.system.carryCapacity * 100),
-		});
 		ctx.carryCapacityPercent = Math.round(totalWeight / this.actor.system.carryCapacity * 100);
 	};
 

styles/Apps/PlayerSheet.css

@@ -37,12 +37,37 @@
 		}
 	}
 
+	.items-tab {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.inventory-summary {
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+		align-items: center;
+		background: var(--inventory-summary-background);
+		color: var(--inventory-summary-color);
+		padding: 6px;
+		border-radius: 4px;
+
+		input {
+			width: 75px;
+			text-align: center;
+			background: var(--inventory-input-background);
+			color: var(--inventory-input-color);
+			text-align: center;
+		}
+	}
+
 	.item-list-header {
 		display: flex;
 		flex-direction: row;
 		gap: 8px;
 		border-radius: 6px 6px 0 0;
-		padding: 4px;
+		padding: 6px 6px 4px;
 		margin-bottom: 2px;
 		background: var(--item-list-header-background);
 		color: var(--item-list-header-color);

styles/elements/headers.css

@@ -1,5 +1,14 @@
 .taf > .window-content {
 	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-body);
+		color: currentColor;
 		margin: 0;
 	}
+
+	h1 { font-size: 1.25rem; }
+	h2 { font-size: 1.20rem; }
+	h3 { font-size: 1.15rem; }
+	h4 { font-size: 1.1rem; }
+	h5 { font-size: 1.1rem; }
+	h6 { font-size: 1.1rem; }
 }

styles/elements/input.css

@@ -1,4 +1,6 @@
 .taf > .window-content input {
+	border: none;
+
 	&.large {
 		--input-height: 2.5rem;
 		font-size: 1.75rem;

styles/themes/dark.css

@@ -7,6 +7,11 @@
 	--tab-button-active-border: rebeccapurple;
 	--tab-button-hover-bg: var(--color-cool-3);
 
+	--inventory-summary-background: #171e26;
+	--inventory-summary-color: white;
+	--inventory-input-background: #2b3642;
+	--inventory-input-color: white;
+
 	--item-list-header-background: #171e26;
 	--item-list-header-color: white;
 	--item-card-background: #1d262f;

templates/PlayerSheet/item-lists.hbs

@@ -1,25 +1,35 @@
 <div
-	class="tab {{ifThen tabActive "active" ""}}"
+	class="tab items-tab {{ifThen tabActive "active" ""}}"
 	data-group="primary"
 	data-tab="items"
 >
-	<section>
-		Total Weight: {{totalWeight}}
-		/
+	<section class="inventory-summary">
+		<h3 class="grow">
+			Carrying Capacity:
+		</h3>
+		<div>
+			({{carryCapacityPercent}}% Used)
+		</div>
+		<input
+			type="text"
+			value="{{totalWeight}}"
+			disabled
+		>
+		<div aria-hidden="true">
+			/
+		</div>
 		<input
 			type="number"
 			name="system.carryCapacity"
 			value="{{system.carryCapacity}}"
 		>
-
-		({{ carryCapacityPercent }}%)
 	</section>
 	{{#each itemGroups as | group |}}
 		<section>
 			<div class="item-list-header">
-				<div class="grow">
+				<h3 class="grow">
 					{{ group.name }}
-				</div>
+				</h3>
 				<span class="weight">
 					{{ group.weight }}
 				</span>