Implemented using a single image to display all icons via CSS positioning of the image in a div.

1 files changed, 78 insertions, 16 deletions

diff --git a/roundcubemail/skins/default/mail.css b/roundcubemail/skins/default/mail.css
index bb614dbd7..658eed68d 100644
--- a/roundcubemail/skins/default/mail.css
+++ b/roundcubemail/skins/default/mail.css
@@ -312,8 +312,6 @@ td.formlinks a:visited
   display: block;
   position: relative;
   font-size: 11px;
-  background: url(images/icons/folder-closed.png) no-repeat;
-  background-position: 5px 1px;
   border-bottom: 1px solid #EBEBEB;
 }
 
@@ -327,6 +325,56 @@ td.formlinks a:visited
   height: 16px;
 }
 
+#mailboxlist li div.icon-holder {
+  position: static;
+  height: 16px;
+  width: 16px;
+  margin: 2px 4px 2px 4px;
+  overflow: hidden;
+  float: left;
+}
+
+div.icon-holder {
+  position: static;
+  height: 16px;
+  width: 16px;
+  overflow: hidden;
+}
+div.icon-holder.attachment {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -16px;
+}
+div.icon-holder.unflagged {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -32px;
+}
+div.icon-holder.flagged {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -32px;
+}
+div.icon-holder.replied {
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -48px;
+}
+div.icon-holder.forwarded {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -48px;
+}
+div.icon-holder.forwardedreplied {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -48px;
+}
+div.icon-holder.unread {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -64px -16px;
+}
+div.icon-holder.message {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -64px 0;
+}
+div.icon-holder.delete {
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -32px;
+}
+div.icon-holder.deleted {
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -32px;
+}
+div.icon-holder.rename {
+  background: #ffffff url(images/icons/rc_icons.png) no-repeat scroll -48px -48px;
+}
+
+
 #mailboxlist li div.collapsed,
 #mailboxlist li div.expanded
 {
@@ -343,29 +391,38 @@ td.formlinks a:visited
   background: url(images/icons/expanded.png) bottom right no-repeat;
 }
 
-#mailboxlist li.inbox
+#mailboxlist li.inbox div.icon-holder
 {
-  background-image: url(images/icons/folder-inbox.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll;
 }
 
-#mailboxlist li.drafts
+#mailboxlist li.drafts div.icon-holder
 {
-  background-image: url(images/icons/folder-drafts.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px 0;
 }
 
-#mailboxlist li.sent
+#mailboxlist li.sent div.icon-holder
 {
-  background-image: url(images/icons/folder-sent.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px 0;
 }
 
-#mailboxlist li.junk
+#mailboxlist li.junk div.icon-holder
 {
-  background-image: url(images/icons/folder-junk.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px 0;
 }
 
-#mailboxlist li.trash
+#mailboxlist li.trash div.icon-holder
 {
-  background-image: url(images/icons/folder-trash.png);
+  background: url(images/icons/rc_icons.png) no-repeat scroll 0 -16px;
+}
+
+#mailboxlist li div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll -16px -16px;
+}
+#mailboxlist li.selected > div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -16px;
 }
 
 #mailboxlist li a
@@ -373,7 +430,6 @@ td.formlinks a:visited
   cursor: default;
   display: block;
   position: relative;
-  padding-left: 25px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
@@ -547,10 +603,16 @@ body.messagelist
   cursor: pointer;
 }
 
-#messagelist tbody tr td.flag img:hover,
-#messagelist thead tr td.flag img
+#messagelist tbody tr.flagged td.flag div.icon-holder
+{
+  background: url(images/icons/rc_icons.png) no-repeat scroll -32px -32px;
+}
+
+#messagelist tbody tr.flagged td.flag div.icon-holder:hover,
+#messagelist tbody tr td.flag div:hover,
+#messagelist thead tr td.flag div 
 {
-  background: url(images/icons/unflagged.png) center no-repeat;
+  background: url(images/icons/rc_icons.png) no-repeat scroll -48px -32px;
 }
 
 #messagelist tr td.subject