Implement colored mail labels similar to other apps with border color v-bar

This commit is contained in:
Hadi Nategh 2016-04-27 11:18:58 +00:00
parent bf0d1c47a0
commit 250a605f56
4 changed files with 106 additions and 242 deletions

View File

@ -17,7 +17,9 @@ tr.mail div {
cursor: default; cursor: default;
white-space: nowrap; white-space: nowrap;
} }
tr.mail {
border-left: 6px solid white;
}
tr.mail a { tr.mail a {
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@ -35,56 +37,32 @@ tr.unseen a {
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left:6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left:6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left:6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left: 6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left: 6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left: 6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left: 6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left: 6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration : line-through; text-decoration : line-through;
} }
@ -663,7 +641,7 @@ div.mailPreviewHeaders div.mail_extraEmails {
} }
#mail-index_mail-index-header_right { #mail-index_mail-index-header_right {
display: inline-flex; display: inline-flex;
} }
div.mailPreviewHeaders div.mail_extraEmails.visible, div.mailPreviewHeaders div.mail_extraEmails.visible,
div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible { div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible {
position: absolute; position: absolute;

View File

@ -50,6 +50,9 @@ tr.mail div {
cursor: default; cursor: default;
white-space: nowrap; white-space: nowrap;
} }
tr.mail {
border-left: 6px solid white;
}
tr.mail a { tr.mail a {
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@ -65,53 +68,29 @@ tr.unseen a {
color: #003075; color: #003075;
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left: 6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left: 6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left: 6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left: 6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left: 6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left: 6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left: 6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left: 6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration: line-through; text-decoration: line-through;
} }
span.status_img { span.status_img {
@ -1731,53 +1710,29 @@ tr.unseen a {
color: #003075; color: #003075;
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left: 6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left: 6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left: 6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left: 6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left: 6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left: 6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left: 6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left: 6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration: line-through; text-decoration: line-through;
} }
span.status_img { span.status_img {

View File

@ -38,6 +38,9 @@ tr.mail div {
cursor: default; cursor: default;
white-space: nowrap; white-space: nowrap;
} }
tr.mail {
border-left: 6px solid white;
}
tr.mail a { tr.mail a {
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@ -53,53 +56,29 @@ tr.unseen a {
color: #003075; color: #003075;
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left: 6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left: 6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left: 6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left: 6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left: 6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left: 6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left: 6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left: 6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration: line-through; text-decoration: line-through;
} }
span.status_img { span.status_img {
@ -1719,53 +1698,29 @@ tr.unseen a {
color: #003075; color: #003075;
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left: 6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left: 6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left: 6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left: 6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left: 6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left: 6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left: 6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left: 6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration: line-through; text-decoration: line-through;
} }
span.status_img { span.status_img {

View File

@ -937,56 +937,32 @@ tr.unseen a {
font-weight: bold; font-weight: bold;
} }
tr.labelone div, tr.mail.labelone {
tr.labelone span, border-left:6px solid #ff0080 !important;
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
} }
tr.labeltwo div, tr.mail.labeltwo {
tr.labeltwo span, border-left:6px solid #ff8000 !important;
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
} }
tr.labelthree div, tr.mail.labelthree {
tr.labelthree span, border-left:6px solid #008000 !important;
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
} }
tr.labelfour div, tr.mail.labelfour {
tr.labelfour span, border-left:6px solid #0000ff !important;
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
} }
tr.labelfive div, tr.mail.labelfive {
tr.labelfive span, border-left:6px solid #8000ff !important;
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
} }
tr.flagged div, tr.mail.flagged {
tr.flagged span, border-left:6px solid #ff0000 !important;
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
} }
tr.prio_high div, tr.mail.prio_high {
tr.prio_high span, border-left:6px solid #ac0000 !important;
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
} }
tr.deleted div, tr.mail.deleted {
tr.deleted span, border-left:6px solid silver;
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration : line-through; text-decoration : line-through;
} }