Start work on a custom chat message implementation

templates/css/chatmessage.css

@@ -0,0 +1,15 @@
+.ripcrypt.chat-message {
+	position: relative;
+	background: var(--base-background);
+	color: var(--base-text);
+
+	.author {
+		position: absolute;
+		text-align: center;
+		top: 0;
+		left: 50%;
+		transform: translateY(-50%) translateX(-50%);
+		background: var(--title-background);
+		color: var(--title-text);
+	}
+}

templates/css/common.css

@@ -23,4 +23,6 @@
 	label, input, select {
 		cursor: pointer;
 	}
-}
+}
+
+@import url("./chatmessage.css");

templates/css/themes/dark.css

@@ -7,6 +7,9 @@
 	--base-text: white;
 	--base-background: black;
 
+	--title-text: white;
+	--title-background: var(--accent-3);
+
 	--section-header-text: white;
 	--section-header-background: var(--accent-1);