Implement the dice list form and tweak some design variables

styles/_vars.scss

@@ -8,7 +8,7 @@ $background: #f2f2f2;
 $colour-confirm: #048A81;
 $text-on-confirm: white;
 
-$colour-neutral: #007ACC;
+$colour-neutral: darkblue;
 $text-on-neutral: white;
 
 $colour-danger: #960200;

styles/dialog/DiceList.scss

@@ -1,3 +1,54 @@
-.dotdungeon.dialog--dice-list {
-	padding: 4px;
+.dotdungeon:has(.dialog--dice-list) {
+	max-width: 275px;
+	min-width: 275px;
+}
+
+.dotdungeon .dialog--dice-list {
+	padding: 8px;
+
+	.dice {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.die {
+		align-items: center;
+		border: 2px solid;
+		border-radius: 4px;
+		display: grid;
+		gap: 4px;
+		grid-template-rows: 40px;
+		grid-template-columns: 1fr 15px 1fr 15px 1fr 15px 1fr;
+		padding: 4px;
+		text-align: center;
+
+		label {
+			font-size: 0.8125rem;
+		}
+
+		.large { font-size: 1.2rem; }
+
+		.count { grid-column: 1; }
+		.sides { grid-column: 3; }
+		.repeat { grid-column: 5; }
+
+		button { grid-column: 7; }
+
+		input {
+			height: 100%;
+			font-size: 1.1rem;
+		}
+	}
+
+	.actions {
+		margin-top: 8px;
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+
+		button {
+			flex-grow: 1;
+		}
+	}
 }

styles/global/buttons.scss

@@ -8,7 +8,10 @@
 		border-color: transparent;
 		border-width: 2px;
 		border-radius: 4px;
-		transition: 400ms;
+		transition:
+			background-color 400ms ease-in-out,
+			color 400ms ease-in-out,
+			border-color 400ms ease-in-out;
 		padding: 4px 8px;
 		display: inline-flex;
 		justify-content: center;

styles/mixins/_partials.scss

@@ -4,12 +4,12 @@
 	border-width: 2px;
 	border-radius: 4px;
 	border-style: solid;
-	border-color: rgba(0,0,0, 0.4);
-	background-color: rgba(0,0,0, 0.1);
+	border-color: black;
 	font-family: $input-font;
+	box-shadow: none;
 
 	&:focus,
 	&:active {
-		border-color: rgba(0,0,0, 1);
+		transform: scale(103%);
 	}
 }

styles/root.scss

@@ -7,6 +7,8 @@
 @use "./global/icons.scss";
 @use "./global/buttons.scss";
 
+@use "./dialog/DiceList.scss";
+
 @use "./sheets/partials/stat.scss";
 @use "./sheets/partials/skill.scss";
 @use "./sheets/partials/panel.scss";