css: Don't add unread indicator to the date row of first unread row.

Fixes #23030

If the first unread `.message_row` has a date_row, we don't show
unread indicator on it.

static/styles/dark_theme.css

@@ -401,6 +401,20 @@ body.dark-theme {
         border-color: hsla(0, 0%, 0%, 0.2);
     }
 
+    .recipient_row {
+        .message_row.unread {
+            .date_row {
+                background-color: hsl(212, 28%, 18%);
+            }
+        }
+
+        .message_row.unread ~ .message_row.unread {
+            .date_row {
+                background-color: transparent;
+            }
+        }
+    }
+
     .top-navbar-border {
         border-color: hsla(0, 0%, 0%, 0.6);
     }

static/styles/zulip.css

@@ -3067,3 +3067,25 @@ div.topic_edit_spinner .loading_indicator_spinner {
         }
     }
 }
+
+.recipient_row {
+    /* See https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107
+       for details on how this works */
+    .message_row.unread {
+        .date_row {
+            position: relative;
+            z-index: 1;
+            background-color: hsl(0, 0%, 100%);
+        }
+    }
+
+    /* Select all but the first .message_row.unread,
+       and remove the properties set from the previous rule. */
+    .message_row.unread ~ .message_row.unread {
+        .date_row {
+            position: unset;
+            z-index: 0;
+            background-color: transparent;
+        }
+    }
+}