Add a helper application to manage attributes on characters

styles/Apps/AttributeManager.css

@@ -0,0 +1,33 @@
+.taf.AttributeManager {
+	.attributes {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.attribute {
+		display: grid;
+		grid-template-columns: 1fr auto auto;
+		align-items: center;
+		gap: 8px;
+		padding: 8px;
+		border: 1px solid rebeccapurple;
+		border-radius: 4px;
+
+		label {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+
+	.controls {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+
+		button {
+			flex-grow: 1;
+		}
+	}
+}

styles/Apps/PlayerSheet.css

@@ -1,17 +1,10 @@
 .taf.PlayerSheet {
-	> .window-content {
-		padding: 0.5rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
 	.sheet-header, fieldset, .content {
 		border-radius: 8px;
 		border: 1px solid rebeccapurple;
 	}
 
-	.window-content > header {
+	.sheet-header {
 		display: flex;
 		flex-direction: row;
 		align-items: center;

styles/Apps/common.css

@@ -0,0 +1,8 @@
+.taf {
+	> .window-content {
+		padding: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+}

styles/main.css

@@ -9,4 +9,6 @@
 @import url("./elements/prose-mirror.css") layer(elements);
 
 /* Apps */
+@import url("./Apps/common.css") layer(apps);
 @import url("./Apps/PlayerSheet.css") layer(apps);
+@import url("./Apps/AttributeManager.css") layer(apps);