1 /***** Roundcube|Mail mail task styles *****/
13 /* border: 1px solid #cccccc; */
23 #messagetoolbar a.button,
24 #messagetoolbar a.buttonPas {
32 background: url(images/mail_toolbar.png) 0 0 no-repeat transparent;
33 opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
36 #messagetoolbar a.buttonPas {
40 #messagetoolbar a.checkmailSel {
41 background-position: 0 -32px;
44 #messagetoolbar a.back {
45 background-position: -32px 0;
48 #messagetoolbar a.backSel {
49 background-position: -32px -32px;
52 #messagetoolbar a.compose {
53 background-position: -64px 0;
56 #messagetoolbar a.composeSel {
57 background-position: -64px -32px;
60 #messagetoolbar a.reply {
61 background-position: -96px 0;
64 #messagetoolbar a.replySel {
65 background-position: -96px -32px;
68 #messagetoolbar a.replyAll {
69 background-position: -128px 0;
72 #messagetoolbar a.replyAllSel {
73 background-position: -128px -32px;
76 #messagetoolbar a.forward {
77 background-position: -160px 0;
80 #messagetoolbar a.forwardSel {
81 background-position: -160px -32px;
84 #messagetoolbar a.delete {
85 background-position: -192px 0;
88 #messagetoolbar a.deleteSel {
89 background-position: -192px -32px;
92 #messagetoolbar a.markmessage {
93 background-position: -256px 0;
96 #messagetoolbar a.messagemenu {
97 background-position: -288px 0;
100 #messagetoolbar a.spellcheck {
101 background-position: -384px 0;
104 #messagetoolbar a.spellcheckSel {
105 background-position: -384px -32px;
108 #messagetoolbar a.attach {
109 background-position: -352px 0;
112 #messagetoolbar a.attachSel {
113 background-position: -352px -32px;
116 #messagetoolbar a.insertsig {
117 background-position: -448px 0;
120 #messagetoolbar a.insertsigSel {
121 background-position: -448px -32px;
124 #messagetoolbar a.savedraft {
125 background-position: -322px 0;
128 #messagetoolbar a.savedraftSel {
129 background-position: -322px -32px;
132 #messagetoolbar a.send {
133 background-position: -416px 0;
136 #messagetoolbar a.sendSel {
137 background-position: -416px -32px;
140 #messagetoolbar select.mboxlist
147 #messagetoolbar select.mboxlist option
152 #messagetoolbar select.mboxlist option[value=""]
157 #messagemenu li a.active:hover,
158 #markmessagemenu li a.active:hover
161 background-color: #c00;
166 background: url(images/messageactions.png) no-repeat 7px 0;
167 background-position: 7px 20px;
170 #messagemenu li a.printlink
172 background-position: 7px 1px;
175 #messagemenu li a.downloadlink
177 background-position: 7px -17px;
180 #messagemenu li a.sourcelink
182 background-position: 7px -35px;
185 #messagemenu li a.openlink
187 background-position: 7px -53px;
190 #messagemenu li a.editlink
192 background-position: 7px -71px;
195 #markmessagemenu li a
197 background: url(images/messageicons.png) no-repeat;
200 #markmessagemenu li a.readlink
202 background-position: 7px -51px;
205 #markmessagemenu li a.unreadlink
207 background-position: 7px -119px;
210 #markmessagemenu li a.flaggedlink
212 background-position: 7px -153px;
215 #markmessagemenu li a.unflaggedlink
217 background-position: 7px -136px;
225 vertical-align: middle;
261 #messagepartcontainer
276 border: 1px solid #999999;
277 background-color: #F9F9F9;
287 border: 1px solid #999999;
288 background-color: #F9F9F9;
300 min-height: 100%; /* Chrome 14 bug */
307 min-height: 100%; /* Chrome 14 bug */
308 border: 1px solid #999999;
309 background-color: #F9F9F9;
326 vertical-align: middle;
330 #partheader table td.title
337 /** mailbox list styles */
339 #mailboxlist-container
346 border: 1px solid #999;
347 background-color: #F9F9F9;
357 list-style-image: none;
358 list-style-type: none;
361 background-color: #FFF;
369 background: url(images/icons/folders.png) 5px 0 no-repeat;
370 border-bottom: 1px solid #EBEBEB;
373 #mailboxlist li ul li:last-child
381 left: 8px !important;
388 #mailboxlist li div.collapsed,
389 #mailboxlist li div.expanded
394 #mailboxlist li div.collapsed
396 background: url(images/icons/collapsed.png) bottom right no-repeat;
399 #mailboxlist li div.expanded
401 background: url(images/icons/expanded.png) bottom right no-repeat;
404 #mailboxlist li.inbox
406 background-position: 5px -18px;
409 #mailboxlist li.drafts
411 background-position: 5px -37px;
416 background-position: 5px -54px;
421 background-position: 5px -73px;
424 #mailboxlist li.trash
426 background-position: 5px -91px;
437 text-decoration: none;
440 #mailboxlist li.unread
445 #mailboxlist li.virtual > a
450 #mailboxlist li.selected,
451 #mailboxlist li.droptarget li.selected
453 background-color: #929292;
456 #mailboxlist li.selected > a,
457 #mailboxlist li.droptarget li.selected a
463 #mailboxlist li.droptarget
465 background-color: #FFFFA6;
468 /* styles for nested folders */
473 border-top: 1px solid #EBEBEB;
475 background-position: 25px 1px;
476 background-color: #FFF;
504 #listcontrols a.button,
505 #listcontrols a.buttonPas
515 background: url(images/mail_footer.png) 0 0 no-repeat transparent;
516 opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
519 #listcontrols a.buttonPas
524 #listcontrols a.all {
525 background-position: -30px 0;
528 #listcontrols a.allsel {
529 background-position: -30px -15px;
532 #listcontrols a.page {
533 background-position: -135px 0;
536 #listcontrols a.pagesel {
537 background-position: -135px -15px;
540 #listcontrols a.unread {
541 background-position: -45px 0;
544 #listcontrols a.unreadsel {
545 background-position: -45px -15px;
548 #listcontrols a.invert {
549 background-position: -60px 0;
552 #listcontrols a.invertsel {
553 background-position: -60px -15px;
556 #listcontrols a.none {
557 background-position: -75px 0;
560 #listcontrols a.nonesel {
561 background-position: -75px -15px;
564 #listcontrols a.expand-all {
565 background-position: -90px 0;
568 #listcontrols a.expand-allsel {
569 background-position: -90px -15px;
572 #listcontrols a.collapse-all {
573 background-position: -105px 0;
576 #listcontrols a.collapse-allsel {
577 background-position: -105px -15px;
580 #listcontrols a.expand-unread {
581 background-position: -120px 0;
584 #listcontrols a.expand-unreadsel {
585 background-position: -120px -15px;
598 #countcontrols a.button,
599 #countcontrols a.buttonPas
605 /** message list styles */
610 background-color: #F9F9F9;
620 #messagelist thead tr td
623 padding: 0 4px 0 2px;
624 vertical-align: middle;
625 border-bottom: 1px solid #999999;
627 background: url(images/listheader.gif) top left repeat-x #CCC;
632 #messagelist thead tr td.sortedASC,
633 #messagelist thead tr td.sortedDESC
635 background-position: 0 -26px;
638 #messagelist thead tr td.sortedASC a
640 background: url(images/icons/sort.gif) right 0 no-repeat;
643 #messagelist thead tr td.sortedDESC a
645 background: url(images/icons/sort.gif) right -14px no-repeat;
648 #messagelist thead tr td a
651 width: auto !important;
654 text-decoration: none;
657 #messagelist thead tr td.size
662 #messagelist thead tr td.subject
667 #messagelist tbody tr td
673 vertical-align: middle;
675 text-overflow: ellipsis;
676 -o-text-overflow: ellipsis;
677 border-bottom: 1px solid #EBEBEB;
681 #messagelist tbody tr td a
684 text-decoration: none;
691 vertical-align: middle;
692 display: inline-block;
695 #messagelist tbody tr td.flag,
696 #messagelist tbody tr td.status,
697 #messagelist tbody tr td.subject span.status
702 #messagelist tr td.flag span,
703 #messagelist tr td.status span,
704 #messagelist tr td.attachment span
710 #messagelist tr td div.collapsed,
711 #messagelist tr td div.expanded,
712 #messagelist tr td.threads div.listmenu,
713 #messagelist tr td.attachment span.attachment,
714 #messagelist tr td.attachment span.report,
715 #messagelist tr td.flag span.flagged,
716 #messagelist tr td.flag span.unflagged,
717 #messagelist tr td.flag span.unflagged:hover,
718 #messagelist tr td.status span.status,
719 #messagelist tr td.status span.msgicon,
720 #messagelist tr td.status span.deleted,
721 #messagelist tr td.status span.unread,
722 #messagelist tr td.status span.unreadchildren,
723 #messagelist tr td.subject span.msgicon,
724 #messagelist tr td.subject span.deleted,
725 #messagelist tr td.subject span.unread,
726 #messagelist tr td.subject span.replied,
727 #messagelist tr td.subject span.forwarded,
728 #messagelist tr td.subject span.unreadchildren
730 display: inline-block;
731 vertical-align: middle;
734 background: url(images/messageicons.png) center no-repeat;
737 #messagelist tr td.attachment span.attachment
739 background-position: 0 -170px;
742 #messagelist tr td.attachment span.report
744 background-position: 0 -255px;
747 #messagelist tr td.flag span.flagged
749 background-position: 0 -153px;
752 #messagelist tr td.flag span.unflagged:hover
754 background-position: 0 -136px;
757 #messagelist tr td.subject span.msgicon,
758 #messagelist tr td.subject span.unreadchildren
760 background-position: 0 -51px;
764 #messagelist tr td.subject span.replied
766 background-position: 0 -85px;
769 #messagelist tr td.subject span.forwarded
771 background-position: 0 -68px;
774 #messagelist tr td.subject span.replied.forwarded
776 background-position: 0 -102px;
779 #messagelist tr td.status span.msgicon,
780 #messagelist tr td.flag span.unflagged,
781 #messagelist tr td.status span.unreadchildren
783 background-position: 0 17px; /* no icon */
786 #messagelist tr td.status span.msgicon:hover
788 background-position: 0 -272px;
791 #messagelist tr td.status span.deleted,
792 #messagelist tr td.subject span.deleted
794 background-position: 0 -187px;
797 #messagelist tr td.status span.status,
798 #messagelist tr td.status span.unread,
799 #messagelist tr td.subject span.unread
801 background-position: 0 -119px;
804 #messagelist tr td div.collapsed
806 background-position: 0 -221px;
810 #messagelist tr td div.expanded
812 background-position: 0 -204px;
816 #messagelist tr td.threads div.listmenu
818 background-position: 0 -238px;
822 #messagelist tbody tr td.subject
827 #messagelist tbody tr td.subject a
830 vertical-align: middle; /* #1487091 */
833 /* thread parent message with unread children */
834 #messagelist tbody tr.unroot td.subject a
836 text-decoration: underline;
839 #messagelist tr td.attachment,
840 #messagelist tr td.threads,
841 #messagelist tr td.status,
842 #messagelist tr td.flag
848 #messagelist tr td.size
855 #messagelist tr td.from,
856 #messagelist tr td.to,
857 #messagelist tr td.cc,
858 #messagelist tr td.replyto
864 #messagelist tr td.date
870 #messagelist tr.message
872 background-color: #FFF;
878 background-color: #F9F9F9;
882 #messagelist tr.unread
885 background-color: #FFFFFF;
888 #messagelist tr.flagged td,
889 #messagelist tr.flagged td a
894 #messagelist tr.selected td
897 background-color: #CC3333;
900 #messagelist tr.unfocused td
903 background-color: #929292;
906 #messagelist tr.selected td a
911 #messagelist tr.unfocused td a
916 #messagelist tr.deleted td,
917 #messagelist tr.deleted td a
934 border: 1px solid #999999;
941 padding: 8px 0 3px 0;
946 /***** tree indicators *****/
954 td span.branch div.tree
958 background: url(images/tree.gif) 0px 0px no-repeat;
961 td span.branch div.l1
963 background-position: 0px 0px; /* L */
966 td span.branch div.l2
968 background-position: -30px 0px; /* | */
971 td span.branch div.l3
973 background-position: -15px 0px; /* |- */
977 /** message view styles */
986 border: 1px solid #999;
987 background-color: #FFF;
994 margin: -14px 8px 0px 8px;
995 border: 1px solid #ccc;
1001 background-color: #EBEBEB;
1004 #messagebody #full-headers,
1005 #messagebody table.headers-table
1009 background-color: #F4F4F4;
1012 table.headers-table tr td
1015 border-bottom:1px solid #FFFFFF;
1018 table.headers-table tr td.header-title
1024 white-space: nowrap;
1025 padding: 0 4px 0 8px;
1028 table.headers-table tr td.header
1033 table.headers-table tr td.subject
1038 table.headers-table tr td.header span
1040 white-space: nowrap;
1046 padding: 0 4px 0 8px;
1048 list-style-image: none;
1049 list-style-type: none;
1050 background: url(images/icons/attachment.png) 4px 2px no-repeat #DFDFDF;
1053 #messageframe #attachment-list
1055 border-bottom: 1px solid #ccc;
1058 .messageheaderbox #attachment-list
1060 border-top: 1px solid #ccc;
1063 #attachment-list:after
1078 padding: 2px 0px 0px 15px;
1079 white-space: nowrap;
1082 #attachment-list li a
1084 text-decoration: none;
1087 #attachment-list li a:hover
1089 text-decoration: underline;
1095 padding-bottom: 10px;
1096 background-color: #FFFFFF;
1100 div.message-htmlpart
1103 border-top: 1px solid #ccc;
1104 /* overflow: hidden; */
1107 #messagebody div:first-child
1113 div.message-htmlpart a
1118 div.message-part pre,
1119 div.message-htmlpart pre,
1120 div.message-part div.pre
1124 font-family: monospace;
1125 white-space: -moz-pre-wrap !important;
1126 white-space: pre-wrap !important;
1130 div.message-part span.sig
1135 div.message-part blockquote
1138 border-left: 2px solid blue;
1139 border-right: 2px solid blue;
1140 background-color: #F6F6F6;
1141 margin: 2px 0px 2px 0px;
1142 padding: 1px 8px 1px 10px;
1145 div.message-part blockquote blockquote
1148 border-left: 2px solid green;
1149 border-right: 2px solid green;
1152 div.message-part blockquote blockquote blockquote
1155 border-left: 2px solid #bb0000;
1156 border-right: 2px solid #bb0000;
1159 body.iframe div.message-htmlpart
1164 div.message-htmlpart div.rcmBody
1169 #remote-objects-message
1174 padding: 10px 10px 6px 46px;
1177 #remote-objects-message a
1183 #remote-objects-message a:hover
1203 border-bottom: 1px solid #ccc;
1204 background-color: #EBEBEB;
1207 .messageheaderbox #full-headers
1221 background: url(images/icons/down_small.gif) no-repeat center;
1226 background: url(images/icons/up_small.gif) no-repeat center;
1237 border: 1px solid #999999;
1244 /** message compose styles */
1265 #compose-div .boxfooter
1272 #compose-div .boxlistcontent
1286 font-family: monospace;
1287 border: 1px solid #999;
1296 #compose-headers td.editfield
1302 #compose-headers td.top
1304 vertical-align: top;
1307 #compose-headers td.title,
1308 #compose-subject td.title
1310 width: 80px !important;
1313 padding-right: 10px;
1314 white-space: nowrap;
1318 #compose-headers td textarea,
1319 #compose-headers td input
1323 border: 1px solid #999;
1326 #compose-headers td textarea
1333 width: 80% !important;
1344 #compose-editorfooter
1352 #compose-editorfooter label
1367 #compose-attachments
1374 border: 1px solid #999;
1375 background-color: #F9F9F9;
1378 #compose-attachments ul
1382 background-color: #FFF;
1383 list-style-image: none;
1384 list-style-type: none;
1387 #compose-attachments ul li
1394 border-bottom: 1px solid #EBEBEB;
1395 white-space: nowrap;
1397 text-overflow: ellipsis;
1398 -o-text-overflow: ellipsis;
1401 #compose-attachments ul li img
1404 vertical-align: middle;
1412 #attachment-form div
1417 #attachment-form div.buttons