From 250a605f5623c4b8a59f43be1c1d2d7b5a53dc47 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 27 Apr 2016 11:18:58 +0000
Subject: [PATCH] Implement colored mail labels similar to other apps with
 border color v-bar

---
 mail/templates/default/app.css   |  62 ++++++-----------
 mail/templates/mobile/app.css    | 115 ++++++++++---------------------
 mail/templates/pixelegg/app.css  | 115 ++++++++++---------------------
 mail/templates/pixelegg/app.less |  56 +++++----------
 4 files changed, 106 insertions(+), 242 deletions(-)

diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 6622af4c1d..02f3c87b94 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -17,7 +17,9 @@ tr.mail div {
 	cursor: default;
 	white-space: nowrap;
 }
-
+tr.mail {
+	border-left: 6px solid white;
+}
 tr.mail a {
 	cursor: pointer;
 	white-space: nowrap;
@@ -35,56 +37,32 @@ tr.unseen a {
 	font-weight: bold;
 }
 
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-	color: #ff0080 !important;
+tr.mail.labelone {
+	border-left:6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-	color: #ff8000 !important;
+tr.mail.labeltwo {
+	border-left:6px solid  #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-	color: #008000 !important;
+tr.mail.labelthree {
+	border-left:6px solid  #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-	color: #0000ff !important;
+tr.mail.labelfour {
+	border-left: 6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-	color: #8000ff !important;
+tr.mail.labelfive {
+	border-left: 6px solid #8000ff !important;
 }
 
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-	color: #ff0000 !important;
+tr.mail.flagged {
+	border-left: 6px solid #ff0000 !important;
 }
 
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-	color: #ac0000 !important;
+tr.mail.prio_high {
+	border-left: 6px solid #ac0000 !important;
 }
 
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-	color: silver;
+tr.mail.deleted  {
+	border-left: 6px solid silver;
 	text-decoration : line-through;
 }
 
@@ -663,7 +641,7 @@ div.mailPreviewHeaders div.mail_extraEmails {
 }
 #mail-index_mail-index-header_right {
   display: inline-flex;
-} 
+}
 div.mailPreviewHeaders div.mail_extraEmails.visible,
 div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible {
 	position: absolute;
diff --git a/mail/templates/mobile/app.css b/mail/templates/mobile/app.css
index 79c9a666b4..18d2144014 100644
--- a/mail/templates/mobile/app.css
+++ b/mail/templates/mobile/app.css
@@ -50,6 +50,9 @@ tr.mail div {
   cursor: default;
   white-space: nowrap;
 }
+tr.mail {
+  border-left: 6px solid white;
+}
 tr.mail a {
   cursor: pointer;
   white-space: nowrap;
@@ -65,53 +68,29 @@ tr.unseen a {
   color: #003075;
   font-weight: bold;
 }
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-  color: #ff0080 !important;
+tr.mail.labelone {
+  border-left: 6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-  color: #ff8000 !important;
+tr.mail.labeltwo {
+  border-left: 6px solid  #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-  color: #008000 !important;
+tr.mail.labelthree {
+  border-left: 6px solid  #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-  color: #0000ff !important;
+tr.mail.labelfour {
+  border-left: 6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-  color: #8000ff !important;
+tr.mail.labelfive {
+  border-left: 6px solid #8000ff !important;
 }
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-  color: #ff0000 !important;
+tr.mail.flagged {
+  border-left: 6px solid #ff0000 !important;
 }
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-  color: #ac0000 !important;
+tr.mail.prio_high {
+  border-left: 6px solid #ac0000 !important;
 }
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-  color: silver;
+tr.mail.deleted {
+  border-left: 6px solid silver;
   text-decoration: line-through;
 }
 span.status_img {
@@ -1731,53 +1710,29 @@ tr.unseen a {
   color: #003075;
   font-weight: bold;
 }
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-  color: #ff0080 !important;
+tr.mail.labelone {
+  border-left: 6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-  color: #ff8000 !important;
+tr.mail.labeltwo {
+  border-left: 6px solid #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-  color: #008000 !important;
+tr.mail.labelthree {
+  border-left: 6px solid #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-  color: #0000ff !important;
+tr.mail.labelfour {
+  border-left: 6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-  color: #8000ff !important;
+tr.mail.labelfive {
+  border-left: 6px solid #8000ff !important;
 }
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-  color: #ff0000 !important;
+tr.mail.flagged {
+  border-left: 6px solid #ff0000 !important;
 }
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-  color: #ac0000 !important;
+tr.mail.prio_high {
+  border-left: 6px solid #ac0000 !important;
 }
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-  color: silver;
+tr.mail.deleted {
+  border-left: 6px solid silver;
   text-decoration: line-through;
 }
 span.status_img {
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 5d6773bfc8..a761e4f70f 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -38,6 +38,9 @@ tr.mail div {
   cursor: default;
   white-space: nowrap;
 }
+tr.mail {
+  border-left: 6px solid white;
+}
 tr.mail a {
   cursor: pointer;
   white-space: nowrap;
@@ -53,53 +56,29 @@ tr.unseen a {
   color: #003075;
   font-weight: bold;
 }
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-  color: #ff0080 !important;
+tr.mail.labelone {
+  border-left: 6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-  color: #ff8000 !important;
+tr.mail.labeltwo {
+  border-left: 6px solid  #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-  color: #008000 !important;
+tr.mail.labelthree {
+  border-left: 6px solid  #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-  color: #0000ff !important;
+tr.mail.labelfour {
+  border-left: 6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-  color: #8000ff !important;
+tr.mail.labelfive {
+  border-left: 6px solid #8000ff !important;
 }
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-  color: #ff0000 !important;
+tr.mail.flagged {
+  border-left: 6px solid #ff0000 !important;
 }
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-  color: #ac0000 !important;
+tr.mail.prio_high {
+  border-left: 6px solid #ac0000 !important;
 }
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-  color: silver;
+tr.mail.deleted {
+  border-left: 6px solid silver;
   text-decoration: line-through;
 }
 span.status_img {
@@ -1719,53 +1698,29 @@ tr.unseen a {
   color: #003075;
   font-weight: bold;
 }
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-  color: #ff0080 !important;
+tr.mail.labelone {
+  border-left: 6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-  color: #ff8000 !important;
+tr.mail.labeltwo {
+  border-left: 6px solid #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-  color: #008000 !important;
+tr.mail.labelthree {
+  border-left: 6px solid #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-  color: #0000ff !important;
+tr.mail.labelfour {
+  border-left: 6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-  color: #8000ff !important;
+tr.mail.labelfive {
+  border-left: 6px solid #8000ff !important;
 }
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-  color: #ff0000 !important;
+tr.mail.flagged {
+  border-left: 6px solid #ff0000 !important;
 }
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-  color: #ac0000 !important;
+tr.mail.prio_high {
+  border-left: 6px solid #ac0000 !important;
 }
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-  color: silver;
+tr.mail.deleted {
+  border-left: 6px solid silver;
   text-decoration: line-through;
 }
 span.status_img {
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index 2b18fdd065..ce1abb9770 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -937,56 +937,32 @@ tr.unseen a {
     font-weight: bold;
 }
 
-tr.labelone div,
-tr.labelone span,
-tr.labelone time,
-tr.labelone a {
-    color: #ff0080 !important;
+tr.mail.labelone {
+    border-left:6px solid #ff0080 !important;
 }
-tr.labeltwo div,
-tr.labeltwo span,
-tr.labeltwo time,
-tr.labeltwo a {
-    color: #ff8000 !important;
+tr.mail.labeltwo {
+    border-left:6px solid #ff8000 !important;
 }
-tr.labelthree div,
-tr.labelthree span,
-tr.labelthree time,
-tr.labelthree a {
-    color: #008000 !important;
+tr.mail.labelthree {
+    border-left:6px solid #008000 !important;
 }
-tr.labelfour div,
-tr.labelfour span,
-tr.labelfour time,
-tr.labelfour a {
-    color: #0000ff !important;
+tr.mail.labelfour {
+    border-left:6px solid #0000ff !important;
 }
-tr.labelfive div,
-tr.labelfive span,
-tr.labelfive time,
-tr.labelfive a {
-    color: #8000ff !important;
+tr.mail.labelfive {
+    border-left:6px solid #8000ff !important;
 }
 
-tr.flagged div,
-tr.flagged span,
-tr.flagged time,
-tr.flagged a {
-    color: #ff0000 !important;
+tr.mail.flagged {
+    border-left:6px solid #ff0000 !important;
 }
 
-tr.prio_high div,
-tr.prio_high span,
-tr.prio_high time,
-tr.prio_high a {
-    color: #ac0000 !important;
+tr.mail.prio_high {
+    border-left:6px solid #ac0000 !important;
 }
 
-tr.deleted div,
-tr.deleted span,
-tr.deleted time,
-tr.deleted a {
-    color: silver;
+tr.mail.deleted {
+    border-left:6px solid silver;
     text-decoration : line-through;
 }