Fix/improve unread mark

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -174,6 +174,12 @@ blockquote {
 }
 
 .first-unread {
+	&.message {
+		padding-top: 20px;
+	}
+	&.sequential.message {
+		padding-top: 20px;
+	}
 	.body {
 		&::before {
 			content: "";
@@ -181,21 +187,24 @@ blockquote {
 			height: 1px;
 			position: absolute;
 			right: 0px;
-			left: 20px;
+			left: 0px;
 			top: 0px;
 			.transition(background-color, .5s, linear);
+			height: 16px;
 		}
 		&::after {
 			content: "unread messages";
 			display: block;
 			position: absolute;
 			right: 0px;
-			top: -4px;
+			top: 0px;
 			text-transform: uppercase;
-			font-size: 8px;
-			line-height: 10px;
+			font-size: 12px;
+			line-height: 16px;
 			padding: 0 5px;
 			.transition(color, .5s, linear);
+			left: 0;
+			text-align: center;
 		}
 	}
 }

packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less

@@ -329,6 +329,28 @@ blockquote:before {
  * Message content
  */
 
+.first-unread {
+	.body {
+		&::before {
+			background: @primary-background-color;
+		}
+		&::after {
+			color: @content-background-color;
+		}
+	}
+}
+
+.first-unread-opaque {
+	.body {
+		&::before {
+			background: @component-color;
+		}
+		&::after {
+			color: @primary-font-color;
+		}
+	}
+}
+
 .message {
 	.body {
 		color: @primary-font-color;