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="0"]
162 #searchmenu ul.toolbarmenu
167 #searchmenu ul.toolbarmenu li
172 #messagemenu li a.active:hover,
173 #markmessagemenu li a.active:hover
176 background-color: #c00;
181 background: url(images/messageactions.png) no-repeat 7px 0;
182 background-position: 7px 20px;
185 #messagemenu li a.printlink
187 background-position: 7px 1px;
190 #messagemenu li a.downloadlink
192 background-position: 7px -17px;
195 #messagemenu li a.sourcelink
197 background-position: 7px -35px;
200 #messagemenu li a.openlink
202 background-position: 7px -53px;
205 #messagemenu li a.editlink
207 background-position: 7px -71px;
210 #markmessagemenu li a
212 background: url(images/messageicons.png) no-repeat;
215 #markmessagemenu li a.readlink
217 background-position: 7px -51px;
220 #markmessagemenu li a.unreadlink
222 background-position: 7px -119px;
225 #markmessagemenu li a.flaggedlink
227 background-position: 7px -153px;
230 #markmessagemenu li a.unflaggedlink
232 background-position: 7px -136px;
240 vertical-align: middle;
276 #messagepartcontainer
291 border: 1px solid #999999;
292 background-color: #F9F9F9;
302 border: 1px solid #999999;
303 background-color: #F9F9F9;
321 border: 1px solid #999999;
322 background-color: #F9F9F9;
339 vertical-align: middle;
343 #partheader table td.title
350 /** mailbox list styles */
352 #mailboxlist-container
359 border: 1px solid #999;
360 background-color: #F9F9F9;
370 list-style-image: none;
371 list-style-type: none;
374 background-color: #FFF;
382 background: url(images/icons/folders.png) 5px 0 no-repeat;
383 border-bottom: 1px solid #EBEBEB;
386 #mailboxlist li ul li:last-child
394 left: 8px !important;
401 #mailboxlist li div.collapsed,
402 #mailboxlist li div.expanded
407 #mailboxlist li div.collapsed
409 background: url(images/icons/collapsed.png) bottom right no-repeat;
412 #mailboxlist li div.expanded
414 background: url(images/icons/expanded.png) bottom right no-repeat;
417 #mailboxlist li.inbox
419 background-position: 5px -18px;
422 #mailboxlist li.drafts
424 background-position: 5px -37px;
429 background-position: 5px -54px;
434 background-position: 5px -73px;
437 #mailboxlist li.trash
439 background-position: 5px -91px;
450 text-decoration: none;
453 #mailboxlist li.unread
458 #mailboxlist li.virtual > a
463 #mailboxlist li.selected,
464 #mailboxlist li.droptarget li.selected
466 background-color: #929292;
469 #mailboxlist li.selected > a,
470 #mailboxlist li.droptarget li.selected a
476 #mailboxlist li.droptarget
478 background-color: #FFFFA6;
481 /* styles for nested folders */
486 border-top: 1px solid #EBEBEB;
488 background-position: 25px 1px;
489 background-color: #FFF;
517 #listcontrols a.button,
518 #listcontrols a.buttonPas
528 background: url(images/mail_footer.png) 0 0 no-repeat transparent;
529 opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
532 #listcontrols a.buttonPas
537 #listcontrols a.all {
538 background-position: -30px 0;
541 #listcontrols a.allsel {
542 background-position: -30px -15px;
545 #listcontrols a.page {
546 background-position: -135px 0;
549 #listcontrols a.pagesel {
550 background-position: -135px -15px;
553 #listcontrols a.unread {
554 background-position: -45px 0;
557 #listcontrols a.unreadsel {
558 background-position: -45px -15px;
561 #listcontrols a.invert {
562 background-position: -60px 0;
565 #listcontrols a.invertsel {
566 background-position: -60px -15px;
569 #listcontrols a.none {
570 background-position: -75px 0;
573 #listcontrols a.nonesel {
574 background-position: -75px -15px;
577 #listcontrols a.expand-all {
578 background-position: -90px 0;
581 #listcontrols a.expand-allsel {
582 background-position: -90px -15px;
585 #listcontrols a.collapse-all {
586 background-position: -105px 0;
589 #listcontrols a.collapse-allsel {
590 background-position: -105px -15px;
593 #listcontrols a.expand-unread {
594 background-position: -120px 0;
597 #listcontrols a.expand-unreadsel {
598 background-position: -120px -15px;
611 #countcontrols a.button,
612 #countcontrols a.buttonPas
618 /** message list styles */
623 background-color: #F9F9F9;
633 #messagelist thead tr td
636 padding: 0 4px 0 2px;
637 vertical-align: middle;
638 border-bottom: 1px solid #999999;
640 background: url(images/listheader.gif) top left repeat-x #CCC;
645 #messagelist thead tr td.sortedASC,
646 #messagelist thead tr td.sortedDESC
648 background-position: 0 -22px;
651 #messagelist thead tr td.sortedASC a
653 background: url(images/icons/sort.gif) right 0 no-repeat;
656 #messagelist thead tr td.sortedDESC a
658 background: url(images/icons/sort.gif) right -14px no-repeat;
661 #messagelist thead tr td a
664 width: auto !important;
667 text-decoration: none;
670 #messagelist thead tr td.size
675 #messagelist thead tr td.subject
680 #messagelist tbody tr td
686 vertical-align: middle;
688 text-overflow: ellipsis;
689 -o-text-overflow: ellipsis;
690 border-bottom: 1px solid #EBEBEB;
694 #messagelist tbody tr td a
697 text-decoration: none;
702 #messagelist td span,
705 vertical-align: middle;
706 display: inline-block;
709 #messagelist tbody tr td.flag,
710 #messagelist tbody tr td.status,
711 #messagelist tbody tr td.subject span.status
716 #messagelist tr td.flag span,
717 #messagelist tr td.status span,
718 #messagelist tr td.attachment span
723 #messagelist tr td div.collapsed,
724 #messagelist tr td div.expanded,
725 #messagelist tr td.threads div.listmenu,
726 #messagelist tr td.attachment span.attachment,
727 #messagelist tr td.attachment span.report,
728 #messagelist tr td.flag span.flagged,
729 #messagelist tr td.flag span.unflagged:hover,
730 #messagelist tr td.status span.status,
731 #messagelist tr td.status span.msgicon,
732 #messagelist tr td.status span.deleted,
733 #messagelist tr td.status span.unread,
734 #messagelist tr td.status span.unreadchildren,
735 #messagelist tr td.subject span.msgicon,
736 #messagelist tr td.subject span.deleted,
737 #messagelist tr td.subject span.unread,
738 #messagelist tr td.subject span.replied,
739 #messagelist tr td.subject span.forwarded,
740 #messagelist tr td.subject span.unreadchildren
742 vertical-align: middle;
745 background: url(images/messageicons.png) center no-repeat;
748 #messagelist tr td.attachment span.attachment
750 background-position: 0 -170px;
753 #messagelist tr td.attachment span.report
755 background-position: 0 -255px;
758 #messagelist tr td.flag span.flagged
760 background-position: 0 -153px;
763 #messagelist tr td.flag span.unflagged:hover
765 background-position: 0 -136px;
768 #messagelist tr td.subject span.msgicon,
769 #messagelist tr td.subject span.unreadchildren
771 background-position: 0 -51px;
775 #messagelist tr td.subject span.replied
777 background-position: 0 -85px;
780 #messagelist tr td.subject span.forwarded
782 background-position: 0 -68px;
785 #messagelist tr td.subject span.replied.forwarded
787 background-position: 0 -102px;
790 #messagelist tr td.status span.msgicon,
791 #messagelist tr td.status span.unreadchildren
793 background-position: 0 17px; /* no icon */
796 #messagelist tr td.status span.msgicon:hover
798 background-position: 0 -272px;
801 #messagelist tr td.status span.deleted,
802 #messagelist tr td.subject span.deleted
804 background-position: 0 -187px;
807 #messagelist tr td.status span.status,
808 #messagelist tr td.status span.unread,
809 #messagelist tr td.subject span.unread
811 background-position: 0 -119px;
814 #messagelist tr td div.collapsed
816 background-position: 0 -221px;
820 #messagelist tr td div.expanded
822 background-position: 0 -204px;
826 #messagelist tr td.threads div.listmenu
828 background-position: 0 -238px;
832 #messagelist tbody tr td.subject
837 #messagelist tbody tr td.subject a
840 display: inline-block;
841 vertical-align: middle;
844 /* thread parent message with unread children */
845 #messagelist tbody tr.unroot td.subject a
847 text-decoration: underline;
850 #messagelist tr td.attachment,
851 #messagelist tr td.threads,
852 #messagelist tr td.status,
853 #messagelist tr td.flag
859 #messagelist tr td.size
866 #messagelist tr td.from,
867 #messagelist tr td.to,
868 #messagelist tr td.cc,
869 #messagelist tr td.replyto
875 #messagelist tr td.date
881 #messagelist tr.message
883 background-color: #FFF;
889 background-color: #F9F9F9;
893 #messagelist tr.unread
896 background-color: #FFFFFF;
899 #messagelist tr.flagged td,
900 #messagelist tr.flagged td a
905 #messagelist tr.selected td
908 background-color: #CC3333;
911 #messagelist tr.unfocused td
914 background-color: #929292;
917 #messagelist tr.selected td a
922 #messagelist tr.unfocused td a
927 #messagelist tr.deleted td,
928 #messagelist tr.deleted td a
945 border: 1px solid #999999;
952 padding: 8px 0 3px 0;
957 /***** tree indicators *****/
965 td span.branch div.tree
969 background: url(images/tree.gif) 0px 0px no-repeat;
972 td span.branch div.l1
974 background-position: 0px 0px; /* L */
977 td span.branch div.l2
979 background-position: -30px 0px; /* | */
982 td span.branch div.l3
984 background-position: -15px 0px; /* |- */
988 /** message view styles */
997 border: 1px solid #999;
998 background-color: #FFF;
1003 div.messageheaderbox
1005 margin: -14px 8px 0px 8px;
1006 border: 1px solid #ccc;
1012 background-color: #EBEBEB;
1015 #messagebody #full-headers,
1016 #messagebody table.headers-table
1020 background-color: #F4F4F4;
1023 table.headers-table tr td
1026 border-bottom:1px solid #FFFFFF;
1029 table.headers-table tr td.header-title
1035 white-space: nowrap;
1036 padding: 0 4px 0 8px;
1039 table.headers-table tr td.header
1044 table.headers-table tr td.subject
1052 padding: 0 4px 0 8px;
1054 list-style-image: none;
1055 list-style-type: none;
1056 background: url(images/icons/attachment.png) 4px 2px no-repeat #DFDFDF;
1059 #messageframe #attachment-list
1061 border-bottom: 1px solid #ccc;
1064 .messageheaderbox #attachment-list
1066 border-top: 1px solid #ccc;
1069 #attachment-list:after
1084 padding: 2px 0px 0px 15px;
1085 white-space: nowrap;
1088 #attachment-list li a
1090 text-decoration: none;
1093 #attachment-list li a:hover
1095 text-decoration: underline;
1101 padding-bottom: 10px;
1102 background-color: #FFFFFF;
1106 div.message-htmlpart
1109 border-top: 1px solid #ccc;
1110 /* overflow: hidden; */
1113 #messagebody div:first-child
1119 div.message-htmlpart a
1124 div.message-part pre,
1125 div.message-htmlpart pre,
1126 div.message-part div.pre
1130 font-family: monospace;
1131 white-space: -moz-pre-wrap !important;
1132 white-space: pre-wrap !important;
1136 div.message-part span.sig
1141 div.message-part blockquote
1144 border-left: 2px solid blue;
1145 border-right: 2px solid blue;
1146 background-color: #F6F6F6;
1147 margin: 2px 0px 2px 0px;
1148 padding: 1px 8px 1px 10px;
1151 div.message-part blockquote blockquote
1154 border-left: 2px solid green;
1155 border-right: 2px solid green;
1158 div.message-part blockquote blockquote blockquote
1161 border-left: 2px solid #bb0000;
1162 border-right: 2px solid #bb0000;
1165 body.iframe div.message-htmlpart
1170 div.message-htmlpart div.rcmBody
1175 #remote-objects-message
1180 padding: 10px 10px 6px 46px;
1183 #remote-objects-message a
1189 #remote-objects-message a:hover
1209 border-bottom: 1px solid #ccc;
1210 background-color: #EBEBEB;
1213 .messageheaderbox #full-headers
1227 background: url(images/icons/down_small.gif) no-repeat center;
1232 background: url(images/icons/up_small.gif) no-repeat center;
1243 border: 1px solid #999999;
1250 /** message compose styles */
1271 #compose-div .boxfooter
1278 #compose-div .boxlistcontent
1292 font-family: monospace;
1293 border: 1px solid #999;
1302 #compose-headers td.editfield
1308 #compose-headers td.top
1310 vertical-align: top;
1313 #compose-headers td.title,
1314 #compose-subject td.title
1316 width: 80px !important;
1319 padding-right: 10px;
1320 white-space: nowrap;
1324 #compose-headers td textarea,
1325 #compose-headers td input
1329 border: 1px solid #999;
1332 #compose-headers td textarea
1339 width: 80% !important;
1351 .formlinks a:visited
1355 text-decoration: none;
1359 .formlinks a:visited
1364 #compose-editorfooter
1372 #compose-editorfooter label
1387 #compose-attachments
1394 border: 1px solid #999;
1395 background-color: #F9F9F9;
1398 #compose-attachments ul
1402 background-color: #FFF;
1403 list-style-image: none;
1404 list-style-type: none;
1407 #compose-attachments ul li
1414 border-bottom: 1px solid #EBEBEB;
1415 white-space: nowrap;
1417 text-overflow: ellipsis;
1418 -o-text-overflow: ellipsis;
1421 #compose-attachments ul li img
1424 vertical-align: middle;
1432 #attachment-form div
1437 #attachment-form div.buttons