Adds gear and spells as items.

Adds custom roll logic, inclusing chat message.

source/style/Character-sheet.less

@@ -53,6 +53,10 @@
 		width: 5rem;
 	}
 
+	input.fixed {
+		width: 5rem;
+	}
+
 	.new-skill {
 		font-style: italic;
 		background: rgba(0, 0, 0, 0.3);
@@ -62,4 +66,16 @@
 			background: rgba(255, 255, 255, 0.5);
 		}
 	}
+
+	button.roll-button {
+		background: url(/icons/svg/d20-black.svg) no-repeat;
+		background-size: 24px 24px;
+		width: 26px;
+		height: 26px;
+	}
+
+	span.spell-process {
+		color:rgb(93, 93, 93);
+		font-style: italic;
+	}
 }

source/style/roll.less

@@ -0,0 +1,76 @@
+.m5-roll {
+	.roll-title {
+		text-align: center;
+		vertical-align: middle;
+		padding: 0.3rem 0 0.1rem 0;
+		font-weight: bold;
+		font-size: 1.3rem;
+	}
+
+	.roll-spell-details {
+		text-align: right;
+		padding-right: 1rem;
+		font-weight: bold;
+	}
+
+	.roll-result {
+		text-align: right;
+		padding-right: 1rem;
+		font-weight: bold;
+
+		display: flex;
+		flex-direction: row;
+
+		.roll-total {
+			width: 100%;
+		}
+
+		.roll-detail {
+			width: 100%;
+			margin-left: -100%;
+		}
+	}
+
+	.roll-row:not( :hover ) {
+		.roll-total {
+			visibility: visible;
+		}
+		.roll-detail {
+			visibility: hidden;
+		}
+	}
+
+	.roll-row:hover {
+		.roll-total {
+			visibility: hidden;
+		}
+		.roll-detail {
+			visibility: visible;
+		}
+	}
+
+	.roll-ew-result-fumble {
+		background-color: rgb(202, 54, 54, 0.5);
+		color: rgb(255, 255, 255);
+	}
+
+	.roll-ew-result-critical {
+		background-color: rgb(202, 197, 54, 0.5);
+		color: rgb(0, 0, 0);
+	}
+
+	.roll-ew-result-high {
+		background-color: rgb(54, 138, 202, 0.5);
+		color: rgb(255, 255, 255);
+	}
+
+	.roll-ew-result-fail {
+		background-color: rgb(117, 63, 131, 0.5);
+		color: rgb(255, 255, 255);
+	}
+
+	.roll-ew-result-pass {
+		background-color: rgb(54, 202, 88, 0.5);
+		color: rgb(0, 0, 0);
+	}
+}