/** * Roundcube webmail styles for the Email section * * Copyright (c) 2011, The Roundcube Dev Team * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com * * The contents are subject to the Creative Commons Attribution-ShareAlike * License. It is allowed to copy, distribute, transmit and to adapt the work * by keeping credits to the original autors in the README file. * See http://creativecommons.org/licenses/by-sa/3.0/ for details. * * $Id$ */ #mailview-left { position: absolute; top: 0; left: 0; width: 240px; bottom: 0; } #mailview-right { position: absolute; top: 0; left: 252px; right: 0; bottom: 0; } #mailview-top { position: absolute; top: 42px; left: 0; width: 100%; bottom: 28px; } #mailview-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; } #mailviewsplitter { right: 30px; width: 30px; left: auto !important; } #mailboxcontainer, #messagelistcontainer { position: absolute; top: 42px; left: 0; width: 100%; bottom: 0; } #messagelistcontainer { top: 0; bottom: 32px; overflow: auto; } #messagelistfooter { position: absolute; bottom: 0; left: 0; right: 0; height: 26px; padding: 2px; } #messagelistfooter.rightalign { text-align: right; } #messagelistfooter #countcontrols { display: inline-block; } #messagelistfooter #listcontrols { display: inline-block; margin-right: 2em; } a.iconbutton.listmode { width: 26px; height: 20px; background-position: 0 -477px; } a.iconbutton.threadmode { width: 26px; height: 20px; background-position: 0 -497px; } a.iconbutton.listmode.selected { background-position: -26px -477px; } a.iconbutton.threadmode.selected { background-position: -26px -497px; } #mailboxlist li.mailbox { position: relative; background-repeat: no-repeat; background-position: 6px 2px; } #mailboxlist li.mailbox a { padding-left: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url(images/listicons.png); background-repeat: no-repeat; background-position: 6px 3px; } #mailboxlist li.mailbox.selected > a { background-position: 6px -21px; } #mailboxlist li.inbox > a { background-position: 6px -189px; } #mailboxlist li.inbox.selected > a { background-position: 6px -213px; } #mailboxlist li.drafts > a { background-position: 6px -238px; } #mailboxlist li.drafts.selected > a { background-position: 6px -262px; } #mailboxlist li.sent > a { background-position: 6px -286px; } #mailboxlist li.sent.selected > a { background-position: 6px -310px; } #mailboxlist li.junk > a { background-position: 6px -334px; } #mailboxlist li.junk.selected > a { background-position: 6px -358px; } #mailboxlist li.trash > a { background-position: 6px -382px; } #mailboxlist li.trash.selected > a { background-position: 6px -406px; } #mailboxlist li.archive > a { background-position: 6px -1699px; } #mailboxlist li.archive.selected > a { background-position: 6px -1723px; } #mailboxlist li.virtual > a { color: #aaa; } #mailboxlist li.mailbox ul { padding: 0; border-top: 1px solid #bbd3da; } #mailboxlist li.mailbox ul li { padding-left: 26px; } #mailboxlist li.mailbox ul li a { background-position: 6px -93px; } #mailboxlist li.mailbox ul li.selected a { background-position: 6px -117px; } #mailboxlist li.mailbox ul li:last-child { border-bottom: 0; } #mailboxlist li.mailbox div.collapsed, #mailboxlist li.mailbox div.expanded { position: absolute; top: 14px; left: 20px; width: 14px; height: 14px; background: url(images/listicons.png) -3px -144px no-repeat; cursor: pointer; } #mailboxlist li.mailbox div.expanded { background-position: -3px -168px; } #mailboxlist li.mailbox ul li div.collapsed, #mailboxlist li.mailbox ul li div.expanded { left: 45px; top: 15px; } #mailboxlist li.mailbox .unreadcount { position: absolute; top: 4px; right: 6px; width: 2.8em; padding: 2px; background: #82acb5; background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f)); background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%); background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%); background: linear-gradient(top, #82acb5 0%, #6a939f 100%); box-shadow: inset 0 1px 1px 0 #536d72; -o-box-shadow: inset 0 1px 1px 0 #536d72; -webkit-box-shadow: inset 0 1px 1px 0 #536d72; -moz-box-shadow: inset 0 1px 1px 0 #536d72; border-radius: 9px; color: #fff; text-align: center; font-weight: bold; text-shadow: none; } #mailboxlist li.mailbox.selected .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)); background: -o-linear-gradient(top, #005d76 0%, #004558 100%); background: -ms-linear-gradient(top, #005d76 0%, #004558 100%); background: linear-gradient(top, #005d76 0%, #004558 100%); box-shadow: inset 0 1px 1px 0 #003645; -o-box-shadow: inset 0 1px 1px 0 #003645; -webkit-box-shadow: inset 0 1px 1px 0 #003645; -moz-box-shadow: inset 0 1px 1px 0 #003645; } #searchfilter { width: 16em; } #mailview-left select.mailboxlist { position: relative; top: 10px; width: 100%; } #messagetoolbar { position: absolute; top: -6px; right: 0; left: 15em; height: 40px; white-space: nowrap; } #messagetoolbar.fullwidth { left: 0; } #mailtoolbar { text-align: right; } #mailpreviewtoggle { display: block; position: absolute; top: 4px; right: 2px; width: 20px; height: 18px; background: url(images/buttons.png) -3px -458px no-repeat; } #mailpreviewtoggle.enabled { background-position: -28px -458px; } /*** message list ***/ #messagelist tr td.attachment, #messagelist tr td.threads, #messagelist tr td.status, #messagelist tr td.flag, #messagelist tr td.priority { width: 20px; padding: 4px 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 { width: 26px; } #messagelist tr td.threads { width: 26px; } .chrome #messagelist tr td.threads { width: 30px; } #messagelist tr td.flag, #messagelist tr td.status, #messagelist tr td.threads { border-left: 0; } #messagelist tr td.size { width: 60px; text-align: right; } #messagelist tr td.from, #messagelist tr td.to, #messagelist tr td.cc, #messagelist tr td.replyto { width: 180px; } #messagelist tr td.date { width: 118px; } #messagelist tr.message { /* background-color: #fff; */ } #messagelist tr.unread { font-weight: bold; /* background-color: #fff; */ } #messagelist tr.flagged td, #messagelist tr.flagged td a { color: #f30; } #messagelist thead tr td.sortedASC a, #messagelist thead tr td.sortedDESC a { color: #004458; text-decoration: underline; background: url(images/listicons.png) right -912px no-repeat; } #messagelist thead tr td.sortedASC a { background-position: right -944px; } #messagelist td img { vertical-align: middle; display: inline-block; } #messagelist tbody tr td.flag, #messagelist tbody tr td.status, #messagelist tbody tr td.subject span.status { cursor: pointer; } #messagelist tr td.flag span, #messagelist tr td.status span, #messagelist tr td.attachment span, #messagelist tr td.priority span { display: block; width: 20px; } #messagelist tr td div.collapsed, #messagelist tr td div.expanded, #messagelist tr td.threads div.listmenu, #messagelist tr td.attachment span.attachment, #messagelist tr td.attachment span.report, #messagelist tr td.priority span.priority, #messagelist tr td.priority span.prio1, #messagelist tr td.priority span.prio2, #messagelist tr td.priority span.prio3, #messagelist tr td.priority span.prio4, #messagelist tr td.priority span.prio5, #messagelist tr td.flag span.flagged, #messagelist tr td.flag span.unflagged, #messagelist tr td.flag span.unflagged:hover, #messagelist tr td.status span.status, #messagelist tr td.status span.msgicon, #messagelist tr td.status span.deleted, #messagelist tr td.status span.unread, #messagelist tr td.status span.unreadchildren, #messagelist tr td.subject span.msgicon, #messagelist tr td.subject span.deleted, #messagelist tr td.subject span.unread, #messagelist tr td.subject span.replied, #messagelist tr td.subject span.forwarded, #messagelist tr td.subject span.unreadchildren { display: inline-block; vertical-align: middle; height: 18px; width: 20px; padding: 0; background: url(images/listicons.png) -100px 0 no-repeat; } #messagelist tbody tr td.attachment span.attachment { background-position: 0 -998px; } #messagelist thead tr td.attachment span.attachment { background-position: -24px -997px; } /* #messagelist tr td.attachment span.report { background-position: 0 -255px; } #messagelist tr td.priority span.priority { background-position: 0 -309px; } #messagelist tr td.priority span.prio5 { background-position: 0 -358px; } #messagelist tr td.priority span.prio4 { background-position: 0 -340px; } #messagelist tr td.priority span.prio3 { background-position: 0 -324px; } #messagelist tr td.priority span.prio2 { background-position: 0 -309px; } #messagelist tr td.priority span.prio1 { background-position: 0 -290px; } */ #messagelist tbody tr td.flag span.flagged { background-position: 0 -1036px; } #messagelist thead tr td.flag span.flagged { background-position: -24px -1036px; } #messagelist tr td.flag span.unflagged:hover, #messagelist tr td.status span.msgicon:hover { background-position: 0 -1056px; } #messagelist tr td.subject span.msgicon, #messagelist tr td.subject span.unreadchildren { background-position: 0 -1056px; margin: 0 1px 0 0; width: 24px; } #messagelist tr td.subject span.replied { background-position: 0 -1076px; } #messagelist tr td.subject span.forwarded { background-position: 0 -1096px; } #messagelist tr td.subject span.replied.forwarded { background-position: 0 -1116px; } #messagelist tr td.status span.msgicon, #messagelist tr td.flag span.unflagged, #messagelist tr td.status span.unreadchildren { background-position: 0 1056px; /* no icon */ } /* #messagelist tr td.status span.msgicon:hover { background-position: 0 -272px; } #messagelist tr td.status span.deleted, #messagelist tr td.subject span.deleted { background-position: 0 -187px; } */ #messagelist tr td.status span.status, #messagelist tr td.status span.unread, #messagelist tr td.subject span.unread, #messagelist tr td.status span.unread:hover { background-position: 0 -1016px; } #messagelist thead tr td.status span.status { background-position: -24px -1016px; } #messagelist tr td div.collapsed { background-position: 0 -1136px; cursor: pointer; } #messagelist tr td div.expanded { background-position: 0 -1156px; cursor: pointer; } #messagelist tr td.threads div.listmenu { background-position: 0 -976px; cursor: pointer; width: 26px; } #messagelist tbody tr td.subject { width: 99%; } #messagelist tbody tr td.subject a { cursor: default; vertical-align: middle; /* #1487091 */ } /* thread parent message with unread children */ #messagelist tbody tr.unroot td.subject a { text-decoration: underline; } /**** tree indicators ****/ #messagelist tbody tr td span.branch div { float: left; height: 18px; } #messagelist tbody tr td span.branch div.tree { height: 18px; width: 15px; /* background: url(images/tree.gif) 0px 0px no-repeat; */ } #listoptions ul.proplist { min-width: 16em; } /**** message view ****/ #mailpreviewframe { display: none; position: absolute; top: 0; left: 0; width: 100%; bottom: 28px; } #messagecontframe { border: 0; border-radius: 4px 4px 0 0; } #messagecontent { position: absolute; top: 140px; left: 0; width: 100%; bottom: 0; overflow: auto; border-radius: 4px 4px 0 0; } #messageheader, #partheader, #composeheaders { position: relative; padding: 3px 0; background: #fff; 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%); background: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%); background: linear-gradient(top, #fff 0%, #e9e9e9 100%); } h2.subject { font-size: 15px; margin: 0 15em 0 0; padding: 4px 8px 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } h3.subject { font-size: 14px; margin: 0 8em 0 0; padding: 8px 8px 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .headers-table td { color: #666; padding: 2px 8px; } .headers-table td.header { font-weight: bold; } .headers-table td.header a { color: #666; text-decoration: none; } .headers-table td.header a:hover { text-decoration: underline; } .headers-table td.subject { color: #333; font-size: 110%; font-weight: bold; } .headers-table td.header span { white-space: nowrap; } .rcmaddcontact { position: relative; top: 1px; margin-left: 0.5em; } .rcmaddcontact imp { width: 20px; height: 13px; } #messagepreviewheader { margin: 0 8px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; } #messagepreviewheader .headers-table { margin: 0 -8px; } #messagepreviewheader h3.subject { padding-left: 0; } #messagepreviewheader #countcontrols, #messageheader #countcontrols { position: absolute; top: 8px; right: 8px; width: 18em; text-align: right; white-space: nowrap; } #messageheader .pagenav .countdisplay { min-width: 0; padding-right: 0.5em; white-space: nowrap; } #messagecontent .leftcol, #messagepreview .leftcol { margin-right: 250px; } #messagecontent .rightcol, #messagepreview .rightcol { float: right; /* position: absolute; top: 10px; right: 10px; height: 90%; */ width: 230px; margin: 8px; min-height: 200px; background: #f0f0f0; padding: 8px; } #messagebody { margin: 8px; } #message-objects div, #messagebody span.part-notice { margin: 8px; } #message-objects div.notice, #message-buttons div.notice { display: block; color: #960; border: 1px solid #ffdf0e; background-color: #fef893; background-position: 5px -24px; padding: 6px 12px 4px 30px; } #message-objects div a.button, #messagebody span.part-notice a.button { margin-left: 10px; } div.message-part, div.message-htmlpart { padding: 10px 2px; border-top: 2px solid #f0f0f0; } #messagebody div:first-child { border-top: 0; } div.message-part pre, div.message-htmlpart pre, div.message-part div.pre { margin: 0px; padding: 0px; font-family: monospace; white-space: -moz-pre-wrap !important; white-space: pre-wrap !important; white-space: pre; } div.message-part span.sig { color: #666666; } div.message-part blockquote { color: blue; border-left: 2px solid blue; border-right: 2px solid blue; background-color: #F6F6F6; margin: 2px 0px 2px 0px; padding: 1px 8px 1px 10px; } div.message-part blockquote blockquote { color: green; border-left: 2px solid green; border-right: 2px solid green; } div.message-part blockquote blockquote blockquote { color: #990000; border-left: 2px solid #bb0000; border-right: 2px solid #bb0000; } #messagebody > hr { color: #fff; background: #fff; border: 0; border-bottom: 2px solid #f0f0f0; } #messagebody > p > img { 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; left: 0px; right: 0px; bottom: 0px; } #messagepartframe { border: 0; } /*** message composition ***/ #composeview-left { position: absolute; top: 0; left: 0; width: 250px; bottom: 0; } #composeview-right { position: absolute; top: 0; left: 262px; right: 0; bottom: 0; } #compose-contacts { position: absolute; top: 42px; left: 0; width: 100%; bottom: 0; } #compose-content { position: absolute; top: 42px; left: 0; width: 100%; bottom: 28px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; } #composeheaders { border-radius: 4px 4px 0 0; -webkit-box-shadow: 0 2px 3px 0 #999; -moz-box-shadow: 0 2px 3px 0 #999; box-shadow: 0 2px 3px 0 #999; } #composebuttons { position: absolute; top: 8px; right: 8px; width: auto; white-space: nowrap; z-index: 100; } .compose-headers { width: 99%; margin: 4px 0; } .compose-headers td { padding: 4px 4px 4px 8px; } .compose-headers td.title { width: 11%; white-space: nowrap; } .compose-headers td.title label { float: left; } .compose-headers td.title a.iconbutton { float: right; position: relative; top: -2px; width: 15px; } .compose-headers td.editfield { width: 90%; padding-left: 4px; } .compose-headers td.editfield a.iconlink { margin-left: 0.5em; } .compose-headers td.formlinks { padding: 0 4px; } .compose-headers td.top { vertical-align: top; padding-top: 10px; } .compose-headers td textarea, .compose-headers td input { width: 100%; resize: none; } #compose-cc, #compose-bcc, #compose-replyto, #compose-followupto { display: none; } #composeoptionsbox { padding: 4px 8px 0 8px; background: #d2d2d2; border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: 0 2px 3px 0 #999; -moz-box-shadow: 0 2px 3px 0 #999; box-shadow: 0 2px 3px 0 #999; white-space: nowrap; } #composeoptions { display: none; padding: 2px 0; white-space: normal; } .composeoption { padding-right: 22px; white-space: nowrap; } #composeoptions .composeoption { display: inline-block; padding: 4px 28px 4px 0; } #composeoptions .composeoption:last-child { padding-right: 4px; } #composeoptionstoggle { display: inline-block; position: relative; top: -1px; left: 6px; width: 20px; height: 18px; background: url(images/buttons.png) -3px -458px no-repeat; text-decoration: none; } #composeoptionstoggle.enabled { background-position: -28px -458px; } #composeview-bottom { position: relative; width: 100%; height: 200px; } #composebodycontainer { position: absolute; top: 0; left: 0; right: 260px; bottom: 0; } #composebody { position: absolute; top: 24px; left: 0; bottom: 0; width: 99%; border: 0; padding: 8px 0 8px 8px; box-shadow: none; resize: none; font-family: monospace; font-size: 9pt; outline: none; } #composebody:active, #composebody:focus { } #compose-attachments { position: absolute; right: 0; top: 1px; bottom: 0; width: 240px; background: #f0f0f0; 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 { margin: 6px 8px; text-align: right; } .defaultSkin table.mceLayout, .defaultSkin table.mceLayout tr.mceLast td { border: 0 !important; } #composebody_toolbargroup { border-bottom: 1px solid #ddd; }