Improve styling of the unread marker

client/css/style.css

@@ -701,22 +701,36 @@ button {
 }
 
 #chat .messages {
-	display: table;
-	table-layout: fixed;
 	width: 100%;
 	padding: 10px 0;
-}
-
-#chat .msg {
-	display: table-row;
+	overflow-wrap: break-word;
 	word-wrap: break-word;
+	word-break: break-word;
 }
 
-#chat .unread-marker span {
-	padding: 0;
-	height: 1px;
-	border-color: #455164;
-	background-color: #455164;
+#chat .unread-marker {
+	position: relative;
+	text-align: center;
+	opacity: .5;
+	margin: 0 10px;
+}
+
+#chat .unread-marker:before {
+	position: absolute;
+	z-index: -1;
+	content: "";
+	left: 0;
+	right: 0;
+	top: 50%;
+	border-top: 1px solid #e74c3c;
+}
+
+#chat .unread-marker-text:before {
+	content: "New messages";
+	background-color: white;
+	color: #e74c3c;
+	padding: 0 10px;
+	font: bold 12px Lato;
 }
 
 #chat .unread-marker:last-child {
@@ -751,7 +765,7 @@ button {
 	color: #b1c3ce;
 	padding-right: 10px;
 	text-align: right;
-	width: 134px;
+	max-width: 134px;
 	min-width: 134px;
 }
 
@@ -1645,14 +1659,8 @@ button {
 		padding: 0;
 	}
 
-	#chat .unread-marker .time,
-	#chat .unread-marker .from {
-		display: none;
-	}
-
-	#chat .unread-marker .text {
-		display: block;
-		width: 100%;
+	#chat .unread-marker {
+		margin: 0;
 	}
 }
 

client/themes/crypto.css

@@ -117,6 +117,10 @@ a:hover,
 	font-weight: bold;
 }
 
+#chat .unread-marker-text:before {
+	font: bold 12px Inconsolata-g, monospace;
+}
+
 #form .input {
 	font: 12px Inconsolata-g, monospace;
 }

client/themes/morning.css

@@ -175,6 +175,14 @@ body {
 	color: #99a2b4;
 }
 
+#chat .unread-marker {
+	opacity: 1;
+}
+
+#chat .unread-marker-text:before {
+	background-color: #333c4a;
+}
+
 /* Setup text colors */
 #chat .msg {
 	color: #f3f3f3;

client/themes/zenburn.css

@@ -202,6 +202,14 @@ body {
 	color: #d2d39b;
 }
 
+#chat .unread-marker {
+	opacity: 1;
+}
+
+#chat .unread-marker-text:before {
+	background-color: #3f3f3f;
+}
+
 /* Setup text colors */
 #chat .msg {
 	color: #ffcfaf;

client/views/unread_marker.tpl

@@ -1,5 +1,3 @@
-<div class="msg unread-marker">
-	<span class="time"></span>
-	<span class="from"></span>
-	<span class="text"></span>
+<div class="unread-marker">
+	<span class="unread-marker-text"></span>
 </div>