From d4da8570bdb9a6abb76df6c796aa8c432eddbcb2 Mon Sep 17 00:00:00 2001
From: Allen Rabinovich <allenr@humbughq.com>
Date: Mon, 8 Jul 2013 14:25:07 -0700
Subject: [PATCH] Change the unread message style to a top-left corner marker
 and a full messagebox diagonal overlay gradient

(imported from commit dd171437bdd40219584774bc38c77798fa1568e2)
---
 zephyr/static/styles/zephyr.css | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 022b329e68..b77459cb75 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -632,12 +632,28 @@ background-color: #feffe0;
 }
 
 .mention .messagebox {
-background-color: #ffe4e0;
+    background-color: #ffe4e0;
 }
 
 .unread .messagebox {
-    background-image: -webkit-linear-gradient(left, rgba(180,180,180,0.3) 0, rgba(255,255,255,0.0) 35px);
-    background-image: linear-gradient(to right, rgba(180,180,180,0.3) 0, rgba(255,255,255,0.0) 35px);
+    background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.03) 75%, rgba(0,0,0,0.08) 100%); /* FF3.6+ */
+    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.08)), color-stop(25%,rgba(0,0,0,0.03)), color-stop(75%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0.08))); /* Chrome,Safari4+ */
+    background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.03) 25%,rgba(0,0,0,0.03) 75%,rgba(0,0,0,0.08) 100%); /* Chrome10+,Safari5.1+ */
+    background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.03) 25%,rgba(0,0,0,0.03) 75%,rgba(0,0,0,0.08) 100%); /* Opera 11.10+ */
+    background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.03) 25%,rgba(0,0,0,0.03) 75%,rgba(0,0,0,0.08) 100%); /* IE10+ */
+    background-image: linear-gradient(135deg, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.03) 25%,rgba(0,0,0,0.03) 75%,rgba(0,0,0,0.08) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#14000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+    position: relative;
+}
+
+.unread .messagebox:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-width: 8px 8px 0px 0;
+    border-style: solid;
+    border-color: #db1f1f transparent;
 }
 
 .selected_message.mention .messagebox, .selected_message.mention .message_data {