Better icon selection for preview headers toggle

thomascube

2012-02-29 feb59b0a202ee58f7e30e3522868cecb10eebc21

 skins/larry/mail.css

@@ -1,7 +1,7 @@
/**
 * Roundcube webmail styles for the Email section
 *
 * Copyright (c) 2011, The Roundcube Dev Team
 * Copyright (c) 2012, The Roundcube Dev Team
 * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
@@ -184,7 +184,13 @@
   color: #aaa;
}

#mailboxlist li.recent > a {
   color: #017cb4;
}

#mailboxlist li.mailbox ul {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: 1px solid #bbd3da;
}
@@ -197,7 +203,7 @@
   background-position: 6px -93px;
}

#mailboxlist li.mailbox ul li.selected a {
#mailboxlist li.mailbox ul li.selected > a {
   background-position: 6px -117px;
}

@@ -209,9 +215,9 @@
#mailboxlist li.mailbox div.expanded {
   position: absolute;
   top: 13px;
   left: 20px;
   width: 14px;
   height: 14px;
   left: 19px;
   width: 13px;
   height: 13px;
   background: url(images/listicons.png) -3px -144px no-repeat;
   cursor: pointer;
}
@@ -220,9 +226,18 @@
   background-position: -3px -168px;
}

#mailboxlist li.mailbox.selected > div.collapsed {
   background-position: -23px -144px;
}

#mailboxlist li.mailbox.selected > div.expanded {
   background-position: -23px -168px;
}


#mailboxlist li.mailbox ul li div.collapsed,
#mailboxlist li.mailbox ul li div.expanded {
   left: 45px;
   left: 43px;
   top: 14px;
}

@@ -249,7 +264,7 @@
   text-shadow: none;
}

#mailboxlist li.mailbox.selected .unreadcount {
#mailboxlist li.mailbox.selected > a .unreadcount {
   background: #005d76;
   background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
@@ -315,11 +330,11 @@
   padding: 2px 3px;
}

.chrome #messagelist tr td.attachment,
.chrome #messagelist tr td.threads,
.chrome #messagelist tr td.status,
.chrome #messagelist tr td.flag,
.chrome #messagelist tr td.priority {
.webkit #messagelist tr td.attachment,
.webkit #messagelist tr td.threads,
.webkit #messagelist tr td.status,
.webkit #messagelist tr td.flag,
.webkit #messagelist tr td.priority {
   width: 26px;
}

@@ -327,13 +342,12 @@
   width: 26px;
}

.chrome #messagelist tr td.threads {
.webkit #messagelist tr td.threads {
   width: 30px;
}

#messagelist tr td.flag,
#messagelist tr td.status,
#messagelist tr td.threads {
#messagelist tr td.threads,
#messagelist tr td.threads + td {
   border-left: 0;
}

@@ -477,9 +491,12 @@
   background-position: -24px -1036px;
}

#messagelist tr td.flag span.unflagged:hover,
#messagelist tr td.status span.msgicon:hover {
   background-position: 0 -1056px;
   background-position: -23px -1056px;
}

#messagelist tr td.flag span.unflagged:hover {
   background-position: -23px -1076px;
}

#messagelist tr td.subject span.msgicon,
@@ -605,7 +622,7 @@
#composeheaders {
   position: relative;
   padding: 3px 0;
   background: #fff;
   background: #f9f9f9;
   background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9));
   background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
@@ -682,24 +699,33 @@
   padding-right: 12px;
}

#messagepreviewheader .iconlink {
   text-indent: -1000px;
   padding: 1px 1px 1px 20px;
#previewheaderstoggle {
    width: 16px;
    height: 16px;
    padding: 0;
    margin-top: 5px;
    position: absolute;
    outline: none;
}

#messagepreviewheader .iconlink.add {
   background-position: -5px -359px;
#previewheaderstoggle.iconlink.add {
   background-position: -32px -227px;
}

#messagepreviewheader .iconlink.delete {
   background-position: -5px -339px;
#previewheaderstoggle.iconlink.remove {
   background-position: -32px -242px;
}

#full-headers {
   position: relative;
   color: #666;
   text-align: center;
   background-color: #EBEBEB;
   background-color: #f9f9f9;
   background: -moz-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#e9e9e9));
   background: -o-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
   background: -ms-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
   background: linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
}

div.more-headers {
@@ -726,11 +752,11 @@
   -moz-box-shadow: 0px 3px 4px 0px rgba(80, 80, 80, 0.6);
   box-shadow: 0px 3px 4px 0px rgba(80, 80, 80, 0.6);
   background: #fff;
   background: -moz-linear-gradient(top, #f3f3f3 0%, #fff 8px, #fff 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(8px,#fff), color-stop(100%,#fff));
   background: -o-linear-gradient(top, #f3f3f3 0%, #fff 8px, #fff 100%);
   background: -ms-linear-gradient(top, #f3f3f3 0%, #fff 8px, #fff 100%);
   background: linear-gradient(top,  #f3f3f3 0%, #fff 8px, #fff 100%);
   background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 8%, #fff 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(8%,#fff), color-stop(100%,#fff));
   background: -o-linear-gradient(top, #f0f0f0 0%, #fff 8%, #fff 100%);
   background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 8%, #fff 100%);
   background: linear-gradient(top,  #f0f0f0 0%, #fff 8%, #fff 100%);
}

#all-headers .ui-resizable-s {
@@ -757,7 +783,7 @@
}

#messagepreviewheader .headers-table {
   margin: 0 -8px;
   margin-left: 8px;
}

#messagepreviewheader h3.subject {
@@ -883,67 +909,6 @@
   max-width: 80%;
}

#attachment-list {
   list-style: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

#attachment-list li {
   display: block;
   position: relative;
   background: url(images/filetypes.png) 0 0 no-repeat;
   margin-bottom: 1px;
}

#attachment-list li.pdf {
   background-position: 0 -26px;
}

#attachment-list li.doc,
#attachment-list li.msword {
   background-position: 0 -52px;
}

#attachment-list li.xls,
#attachment-list li.msexcel {
   background-position: 0 -78px;
}

#attachment-list li.zip,
#attachment-list li.gz {
   background-position: 0 -104px;
}

#attachment-list li.image {
   background-position: 0 -130px;
}

#attachment-list li.audio {
   background-position: 0 -156px;
}

#attachment-list li.video {
   background-position: 0 -182px;
}

#attachment-list li a,
#compose-attachments ul li {
   display: block;
   color: #333;
   font-weight: bold;
   padding: 8px 4px 3px 30px;
   text-shadow: 0px 1px 1px #fff;
   text-decoration: none;
   white-space: nowrap;
}

#attachment-list li a:hover {
   text-decoration: underline;
}

#messagepartcontainer {
   position: absolute;
   top: 60px;
@@ -996,6 +961,11 @@
   border-bottom: 4px solid #c7e3ef;
}

#compose-contacts .scroller {
   top: 65px;
   border-top: 1px solid #fff;
}

#contacts-table {
   table-layout: fixed;
}
@@ -1013,6 +983,10 @@
   overflow: hidden;
   padding-left: 36px;
   text-overflow: ellipsis;
}

#contacts-table tr:first-child td {
   border-top: 0;
}

#compose-contacts li.addressbook a {
@@ -1210,27 +1184,6 @@
   border-left: 1px solid #ddd;
   padding: 8px;
   overflow: auto;
}

#attachment-list li.uploading {
   background: url(images/ajaxloader.gif) 2px 6px no-repeat;
}

#attachment-list li a.delete,
#attachment-list li a.cancelupload {
   position: absolute;
   top: 6px;
   right: 0;
   width: 24px;
   height: 18px;
   padding: 0;
   text-decoration: none;
   text-indent: -1000px;
   background: url(images/buttons.png) -7px -337px no-repeat;
}

#attachment-list li a.cancelupload {
   background-position: -7px -377px;
}

#spellcheck-control {