Implement the most basic version of a dice pool configuration

templates/css/common.css

@@ -11,6 +11,7 @@
 
 .ripcrypt {
 	.window-content {
+		flex: initial;
 		padding: 0;
 		margin: 0;
 	}

templates/css/components/rc-border.css

@@ -0,0 +1,37 @@
+:host {
+	display: flex;
+	flex-direction: column;
+	--vertical-displacement: 10px;
+}
+
+.rc-border {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+
+	padding: var(--padding, 4px);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--border-color);
+	border-radius: 8px;
+	position: relative;
+	margin-top: var(--margin-top, var(--vertical-displacement));
+	padding-top: var(--padding-top, var(--vertical-displacement));
+
+	.title {
+		position: absolute;
+		top: calc(-1 * var(--vertical-displacement));
+		left: 50%;
+		height: minmax(var(--title-height, 20px), auto);
+		transform: translateX(-50%);
+		background: var(--title-background, var(--border-color));
+		padding: 4px 6px;
+		box-sizing: border-box;
+		width: max-content;
+		max-width: 75%;
+		min-width: 50px;
+		border-radius: 4px;
+	}
+}

templates/css/elements/button.css

@@ -1,9 +1,20 @@
 .ripcrypt > .window-content button {
 	all: revert;
+	outline: none;
+	border: none;
 	padding: 2px 4px;
 	background: var(--button-background);
 	color: var(--button-text);
 
+	&:hover:not(:disabled) {
+		cursor: pointer;
+		outline: none;
+	}
+
+	&:disabled {
+		opacity: 0.6;
+	}
+
 	&.icon {
 		padding: 0;
 		border-radius: 50%;
@@ -11,14 +22,5 @@
 		border: none;
 		width: 20px;
 		height: 20px;
-
-		&:hover:not(:disabled) {
-			cursor: pointer;
-			outline: none;
-		}
-
-		&:disabled {
-			opacity: 0.6;
-		}
 	}
 }