Style unread messages differently than read messages: Closes #6260

Adds a darker border and shadow to unread messages that animates to
the same intensity of read messages after 3 seconds.

src/client/views/conversation-viewer.vala

@@ -314,7 +314,17 @@ public class ConversationViewer : Gtk.Box {
 
         // Add classes according to the state of the email.
         update_flags(email);
-
+        
+        // Add animation class after other classes set, to avoid initial animation.
+        Idle.add(() => {
+            try {
+                div_message.get_class_list().add("animate");
+            } catch (Error error) {
+                debug("Could not enable animation class: %s", error.message);
+            }
+            return false;
+        });
+        
         // Attach to the click events for hiding/showing quotes, opening the menu, and so forth.
         bind_event(web_view, ".email", "contextmenu", (Callback) on_context_menu, this);
         bind_event(web_view, ".quote_container > .hider", "click", (Callback) on_hide_quote_clicked);

theming/message-viewer.css

@@ -74,11 +74,11 @@ pre {
 }
 
 .email {
-    border: 1px rgba(0,0,0,0.4) solid;
+    border: 1px rgba(0,0,0,1) solid;
     background-color: white;
     color: black;
     font-size: small;
-    box-shadow: 0 3px 11px rgba(0,0,0,0.21);
+    box-shadow: 0 3px 11px rgba(0,0,0,1);
     display: inline-block;
     word-wrap: break-word;
     width: 100%;
@@ -98,6 +98,14 @@ pre {
 .email.starred .unstarred {
     display: none;
 }
+.email.read {
+    border-color: rgba(0,0,0,0.4);
+    box-shadow: 0 3px 11px rgba(0,0,0,0.21);
+}
+.email.animate {
+    -webkit-transition: border-color 3s ease;
+    -webkit-transition: box-shadow 3s ease;
+}
 .email_box {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;