Adds status bars to character sheet

2022-07-24 13:30:37 +02:00
parent b3e2771e91
commit 53216fbbb7
4 changed files with 103 additions and 8 deletions
@@ -90,6 +90,47 @@
 		flex: 1 1 auto;
 	}

+	.health-bar {
+		height: 2rem;
+		background-color: rgba(0, 0, 0, 0.8);
+		display: flex;
+		flex-direction: row;
+		gap: 1px;
+		padding: 1px;
+		//align-items: stretch;
+
+		input {
+			flex: 0 0 3rem;
+			text-align: center;
+			height: 100%;
+			background-color: rgba(109, 108, 102, 1);
+			color: rgba(255, 255, 255, 1);
+			font-weight: bold;
+			border-radius: 0;
+		}
+
+		.lp-bar-item-empty,
+		.ap-bar-item-empty {
+			flex-grow: 1;
+			background-color: rgb(201, 201, 201);
+		}
+
+		.lp-bar-item {
+			flex-grow: 1;
+			background-color: rgb(57, 234, 139);
+		}
+
+		.ap-bar-item {
+			flex-grow: 1;
+			background-color: rgb(57, 163, 234);
+		}
+
+		.negative-bar-item {
+			flex-grow: 1;
+			background-color: rgb(234, 57, 57);
+		}
+	}
+
 	.attributes {
 		display: flex;
 		flex-direction: row;