X-Git-Url: https://git.donarmstrong.com/?a=blobdiff_plain;f=skins%2Fdefault%2Fmail.css;h=48e48efd86156a5d493a07e7fdc0f5c2f31adaf8;hb=a1b6217b1a1265c2be08b10df1f43d5e9c96b6fe;hp=aa3f64313f7ebb33c66337bd1d17c634306120b1;hpb=479250def7bf8cfe884ab549f6354c49c4d05132;p=roundcube.git diff --git a/skins/default/mail.css b/skins/default/mail.css index aa3f643..48e48ef 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -4,31 +4,147 @@ #messagetoolbar { position: absolute; - top: 45px; - left: 200px; - right: 200px; + top: 47px; + left: 205px; + right: 10px; height: 35px; + min-width: 650px; white-space: nowrap; /* border: 1px solid #cccccc; */ } -#messagetoolbar a +#messagetoolbar > a { + display: block; + float: left; padding-right: 10px; } -#messagetoolbar select +#messagetoolbar a.button, +#messagetoolbar a.buttonPas { + display: block; + float: left; + width: 32px; + height: 32px; + padding: 0; + margin-right: 10px; + overflow: hidden; + background: url('images/mail_toolbar.png') 0 0 no-repeat transparent; + opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ +} + +#messagetoolbar a.buttonPas { + opacity: 0.35; +} + +#messagetoolbar a.checkmailSel { + background-position: 0 -32px; +} + +#messagetoolbar a.back { + background-position: -32px 0; +} + +#messagetoolbar a.backSel { + background-position: -32px -32px; +} + +#messagetoolbar a.compose { + background-position: -64px 0; +} + +#messagetoolbar a.composeSel { + background-position: -64px -32px; +} + +#messagetoolbar a.reply { + background-position: -96px 0; +} + +#messagetoolbar a.replySel { + background-position: -96px -32px; +} + +#messagetoolbar a.replyAll { + background-position: -128px 0; +} + +#messagetoolbar a.replyAllSel { + background-position: -128px -32px; +} + +#messagetoolbar a.forward { + background-position: -160px 0; +} + +#messagetoolbar a.forwardSel { + background-position: -160px -32px; +} + +#messagetoolbar a.delete { + background-position: -192px 0; +} + +#messagetoolbar a.deleteSel { + background-position: -192px -32px; +} + +#messagetoolbar a.markmessage { + background-position: -256px 0; +} + +#messagetoolbar a.messagemenu { + width: 36px; + background-position: -288px 0; +} + +#messagetoolbar a.spellcheck { + background-position: -386px 0; +} + +#messagetoolbar a.spellcheckSel { + background-position: -386px -32px; +} + +#messagetoolbar a.attach { + background-position: -354px 0; +} + +#messagetoolbar a.attachSel { + background-position: -354px -32px; +} + +#messagetoolbar a.savedraft { + background-position: -322px 0; +} + +#messagetoolbar a.savedraftSel { + background-position: -322px -32px; +} + +#messagetoolbar a.send { + background-position: -418px 0; +} + +#messagetoolbar a.sendSel { + background-position: -418px -32px; +} + + +#messagetoolbar select, +#compose-container select { font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; + height: 21px; } #messagetoolbar select.mboxlist { - position: absolute; - left: 375px; - top: 10px; + position: relative; + margin: 0 8px; + top: 6px; } #messagetoolbar select.mboxlist option @@ -41,13 +157,15 @@ padding-left: 2px; } -#markmessagemenu +#markmessagemenu, +#searchmenu, +#messagemenu { position: absolute; top: 32px; left: 90px; width: auto; - visibility: hidden; + display: none; background-color: #F9F9F9; border: 1px solid #CCC; padding: 1px; @@ -55,6 +173,11 @@ z-index: 240; } +#searchmenu +{ + width: 172px; +} + ul.toolbarmenu { margin: 0; @@ -67,30 +190,125 @@ ul.toolbarmenu li font-size: 11px; white-space: nowrap; min-width: 130px; - width: auto !important; - width: 130px; } ul.toolbarmenu li a { display: block; color: #a0a0a0; - padding: 2px 8px 3px 12px; + padding: 2px 8px 3px 22px; text-decoration: none; + min-height: 14px; } -ul.toolbarmenu li a.active:hover +ul.toolbarmenu li a.active, +ul.toolbarmenu li a.active:active, +ul.toolbarmenu li a.active:visited { - background-color: #ddd; + color: #333; } -#listcontrols +ul.toolbarmenu li input { + vertical-align: middle; +} + +ul.toolbarmenu li hr +{ + color: #ccc; + width: 130px; + height: 1px; + margin: 2px 1px 2px 1px; +} + +ul.toolbarmenu li img +{ + float: left; + margin: 0 2px; +} + +ul.toolbarmenu li.separator_below +{ + border-bottom: 1px solid #ccc; + margin-bottom: 2px; + padding-bottom: 2px; +} + +ul.toolbarmenu li.separator_above +{ + border-top: 1px solid #ccc; + margin-top: 2px; + padding-top: 2px; +} + +#messagemenu li a.active:hover, +#markmessagemenu li a.active:hover +{ + color: #fff; + background-color: #c00; +} + +#messagemenu li a +{ + background: url('images/messageactions.png') no-repeat 1px 0; + background-position: 0px 20px; +} + +#messagemenu li a.printlink +{ + background-position: 1px 1px; +} + +#messagemenu li a.downloadlink +{ + background-position: 1px -17px; +} + +#messagemenu li a.sourcelink +{ + background-position: 1px -35px; +} + +#messagemenu li a.openlink +{ + background-position: 1px -53px; +} + +#messagemenu li a.editlink +{ + background-position: 1px -71px; +} + +#markmessagemenu a.readlink +{ + background: url('images/icons/dot.png') no-repeat 2px; +} + +#markmessagemenu a.unreadlink +{ + background: url('images/icons/unread.png') no-repeat 2px; +} + +#markmessagemenu a.flaggedlink +{ + background: url('images/icons/flagged.png') no-repeat 2px; +} + +#markmessagemenu a.unflaggedlink +{ + background: url('images/icons/unflagged.png') no-repeat 2px; +} + +#searchfilter +{ + white-space: nowrap; position: absolute; - left: 200px; - bottom: 20px; - height: 16px; - width: 500px; + right: 190px; + vertical-align: middle; +} + +#searchfilter label +{ font-size: 11px; } @@ -114,9 +332,6 @@ td.formlinks a:visited #mailboxcontrols a.active, #mailboxcontrols a.active:active, #mailboxcontrols a.active:visited, -ul.toolbarmenu li a.active, -ul.toolbarmenu li a.active:active, -ul.toolbarmenu li a.active:visited, td.formlinks a, td.formlinks a:visited { @@ -129,13 +344,18 @@ td.formlinks a:visited text-decoration: underline; } +#listcontrols +{ + padding-right: 2em; +} + #messagecountbar { position: absolute; - bottom: 16px; - right: 30px; + bottom: 0px; + right: 0px; width: 300px; - height: 20px; + height: 16px; text-align: right; white-space: nowrap; } @@ -146,6 +366,42 @@ td.formlinks a:visited color: #333333; } +#mainscreen +{ + position: absolute; + top: 85px; + right: 20px; + bottom: 16px; + left: 20px; +} + +#mailleftcontainer +{ + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + width: 195px; +} + +#mailrightcontainer +{ + position: absolute; + top: 0px; + left: 170px; + bottom: 0px; + right: 0px; +} + +#mailrightcontent +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 20px; +} + #messagepartcontainer { position: absolute; @@ -158,42 +414,35 @@ td.formlinks a:visited #mailcontframe { position: absolute; - top: 85px; - left: 200px; - right: 30px; - bottom: 40px; + width: 100%; + top: 0px; + bottom: 0px; border: 1px solid #999999; background-color: #F9F9F9; overflow: auto; - /* css hack for IE */ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); + overflow-y: auto; + overflow-x: hidden; } #mailpreviewframe { position: absolute; - top: 305px; - left: 200px; - right: 30px; - bottom: 40px; + width: 100%; + top: 205px; + bottom: 0px; border: 1px solid #999999; background-color: #F9F9F9; - /* css hack for IE */ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-135-document.getElementById('mailcontframe').offsetHeight)+'px'); } #messagecontframe { - position: absolute; + position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; - /* css hack for IE */ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-135-document.getElementById('mailcontframe').offsetHeight)+'px'); + width: 100%; + height: 100%; } #messagepartframe @@ -202,8 +451,6 @@ td.formlinks a:visited height: 100%; border: 1px solid #999999; background-color: #F9F9F9; - /* css hack for IE */ - height: expression(parseInt(document.getElementById('messagepartcontainer').offsetHeight)+'px'); } @@ -212,6 +459,7 @@ td.formlinks a:visited position: absolute; top: 10px; left: 220px; + right: 20px; height: 40px; } @@ -238,8 +486,7 @@ td.formlinks a:visited height: 12px; margin: 0; padding: 3px 10px 4px 10px; - background-color: #EBEBEB; - background-image: url(images/listheader_aqua.gif); + background: url('images/listheader.gif') top left repeat-x #CCC; border-bottom: 1px solid #999; color: #333333; font-size: 11px; @@ -249,20 +496,18 @@ td.formlinks a:visited #mailboxlist-container { position: absolute; - top: 85px; - left: 20px; - width: 160px; - bottom: 40px; + top: 0px; + left: 0px; + width: 100%; + bottom: 20px; border: 1px solid #999; background-color: #F9F9F9; overflow: auto; - /* css hack for IE */ - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); } #mailboxlist { - width: 100%; + position:relative; height: auto; margin: 0px; padding: 0px; @@ -274,41 +519,70 @@ td.formlinks a:visited #mailboxlist li { + display: block; + position: relative; font-size: 11px; - background: url(images/icons/folder-closed.png) no-repeat; - background-position: 10px 1px; + background: url('images/icons/folders.png') 5px 1px no-repeat; border-bottom: 1px solid #EBEBEB; } +#mailboxlist li div +{ + position: absolute; + left: 8px !important; + left: -16px; + top: 2px; + width: 14px; + height: 16px; +} + +#mailboxlist li div.collapsed, +#mailboxlist li div.expanded +{ + cursor: pointer; +} + +#mailboxlist li div.collapsed +{ + background: url('images/icons/collapsed.png') bottom right no-repeat; +} + +#mailboxlist li div.expanded +{ + background: url('images/icons/expanded.png') bottom right no-repeat; +} + #mailboxlist li.inbox { - background-image: url(images/icons/folder-inbox.png); + background-position: 5px -19px; } #mailboxlist li.drafts { - background-image: url(images/icons/folder-drafts.png); + background-position: 5px -40px; } #mailboxlist li.sent { - background-image: url(images/icons/folder-sent.png); + background-position: 5px -60px; } #mailboxlist li.junk { - background-image: url(images/icons/folder-junk.png); + background-position: 5px -80px; } #mailboxlist li.trash { - background-image: url(images/icons/folder-trash.png); + background-position: 5px -100px; } #mailboxlist li a { + cursor: default; display: block; - padding-left: 32px; + position: relative; + padding-left: 25px; padding-top: 2px; padding-bottom: 2px; text-decoration: none; @@ -319,6 +593,11 @@ td.formlinks a:visited font-weight: bold; } +#mailboxlist li.virtual > a +{ + color: #666; +} + #mailboxlist li.selected, #mailboxlist li.droptarget li.selected { @@ -350,18 +629,52 @@ td.formlinks a:visited font-weight: normal; } +#mailfooter +{ + position: absolute; + left: 0px; + bottom: 0px; + height: 16px; + width: 100%; +} + +#mailfooter table tr td +{ + white-space: nowrap; + vertical-align: bottom; +} #mailboxcontrols { position: absolute; - left: 20px; - width: 170px; - bottom: 20px; + left: 0px; + bottom: 0px; height: 16px; - overflow: hidden; + width: auto; font-size: 11px; } +#listcontrols, +#countcontrols, +#quotabox +{ + white-space: nowrap; + font-size: 11px; +} + +#countcontrols +{ + min-width: 25em; +} + +#countcontrols a.button, +#countcontrols a.buttonPas, +#messagecountbar a.button, +#messagecountbar a.buttonPas +{ + float: right; +} + /** message list styles */ @@ -376,17 +689,11 @@ body.messagelist width: 100%; display: table; table-layout: fixed; - /* css hack for IE */ - width: expression(parseInt(document.getElementById('mailcontframe').clientWidth)+'px'); } -/* safari hack \*/ -html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: auto; } -/**/ - #messagelist thead tr td { - height: 20px; + height: 19px; padding-top: 0px; padding-bottom: 0px; padding-left: 2px; @@ -394,8 +701,7 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au vertical-align: middle; border-bottom: 1px solid #999999; color: #333333; - background-color: #EBEBEB; - background-image: url(images/listheader_aqua.gif); + background: url('images/listheader.gif') top left repeat-x #CCC; font-size: 11px; font-weight: bold; } @@ -403,17 +709,17 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au #messagelist thead tr td.sortedASC, #messagelist thead tr td.sortedDESC { - background-image: url(images/listheader_dark.gif); + background-position: 0 -20px; } #messagelist thead tr td.sortedASC a { - background: url(images/sort_asc.gif) top right no-repeat; + background: url('images/icons/sort.gif') right 0 no-repeat; } #messagelist thead tr td.sortedDESC a { - background: url(images/sort_desc.gif) top right no-repeat; + background: url('images/icons/sort.gif') right -14px no-repeat; } #messagelist thead tr td a @@ -434,8 +740,9 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + -o-text-overflow: ellipsis; border-bottom: 1px solid #EBEBEB; - cursor: pointer; + cursor: default; } #messagelist tbody tr td a @@ -443,6 +750,12 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au color: #000; text-decoration: none; white-space: nowrap; + cursor: inherit; +} + +#messagelist tbody tr td.subject a +{ + cursor: default; } #messagelist col @@ -452,16 +765,33 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au vertical-align: middle; } -#messagelist tr td.icon +#messagelist thead tr td.icon, +#messagelist thead tr td.flag +{ + width: 22px; + padding: 0; + text-align: center; +} + +#messagelist tbody tr td.icon, +#messagelist tbody tr td.flag { - width: 16px; + padding: 2px 3px 2px 3px; vertical-align: middle; + cursor: pointer; +} + +#messagelist tbody tr td.flag img:hover, +#messagelist thead tr td.flag img +{ + background: url(images/icons/unflagged.png) center no-repeat; } #messagelist tr td.subject { overflow: hidden; vertical-align: middle; + width: 99%; } #messagelist tr td.size @@ -471,6 +801,11 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au vertical-align: middle; } +#messagelist thead tr td.size +{ + text-align: left; +} + #messagelist tr td.from, #messagelist tr td.to { @@ -502,6 +837,12 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au background-color: #FFFFFF; } +#messagelist tr.flagged td, +#messagelist tr.flagged td a +{ + color: #CC0000; +} + #messagelist tr.selected td { color: #FFFFFF; @@ -524,18 +865,12 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au color: #FFFFFF; } -#messagelist tr.deleted td a -{ - color: #CCCCCC; -} - #messagelist tr.deleted td, #messagelist tr.deleted td a { color: #CCCCCC; } - #quotadisplay { color: #666666; @@ -546,27 +881,35 @@ html>body*#messagelist[id$="messagelist"]:not([class="none"]) { table-layout: au { vertical-align: middle; margin-left: 4px; - border: 1px solid #666666; + border: 1px solid #999; } /** message view styles */ - #messageframe { position: absolute; - top: 85px; - left: 200px; - right: 30px; - bottom: 40px; + top: 0px; + left: 180px; + right: 0px; + bottom: 20px; + border: 1px solid #999; + background-color: #FFF; + overflow: auto; + z-index: 1; +} + +#printmessageframe +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; border: 1px solid #999; background-color: #FFF; overflow: auto; - /* css hack for IE */ - /* margin-bottom: 10px; */ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); } div.messageheaderbox @@ -590,6 +933,11 @@ table.headers-table border: 1px solid #ccc; } +#messageframe table.headers-table +{ + border-bottom: 1px solid #ccc; +} + table.headers-table tr td { font-size: 11px; @@ -608,20 +956,37 @@ table.headers-table td.header-title table.headers-table tr td.subject { - width: 95%; + width: 90%; font-weight: bold; } +table.headers-table tr td.all +{ + width: 100%; + color: #666666; + text-align: left; + padding-right: 10px; + text-align: center; + padding: 2px 6px 4px 6px; + border-bottom: 0; +} + +table.headers-table tr td.more-headers +{ + cursor: pointer; + width: 100%; + height: 8px; + border-bottom: 0; +} + #attachment-list { margin: 0px; - padding: 0px 0px 0px 68px; - min-height: 18px; + padding: 0px 0px 0px 72px; + min-height: 16px; list-style-image: none; list-style-type: none; - background: url(images/icons/attachment.png) 52px 1px no-repeat #DFDFDF; - /* css hack for IE */ - height: expression(Math.min(18, parseInt(this.clientHeight))+'px'); + background: url(images/icons/attachment.png) 60px 2px no-repeat #DFDFDF; } #attachment-list:after @@ -639,7 +1004,8 @@ table.headers-table tr td.subject float: left; height: 18px; font-size: 11px; - padding: 2px 10px 0px 10px; + padding: 2px 0px 0px 15px; + white-space: nowrap; } #attachment-list li a @@ -655,7 +1021,6 @@ table.headers-table tr td.subject #messagebody { position:relative; - min-height: 300px; padding-bottom: 10px; background-color: #FFFFFF; } @@ -672,18 +1037,27 @@ div.message-part border-top: 0; } -div.message-part a +div.message-part a, +div.message-htmlpart a { color: #0000CC; } +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; - font-family: monospace; +} + +div.message-part span.sig +{ + color: #666666; } div.message-part blockquote @@ -710,13 +1084,22 @@ div.message-part blockquote blockquote blockquote border-right: 2px solid #bb0000; } +body.iframe div.message-htmlpart +{ + margin: 8px; +} + +div.message-htmlpart div.rcmBody +{ + margin: 8px; +} + #remote-objects-message { display: none; - height: 20px; + margin: 8px; min-height: 20px; - margin: 8px 8px 0px 8px; - padding: 10px 10px 6px 46px; + padding: 10px 10px 6px 46px; } #remote-objects-message a @@ -730,60 +1113,65 @@ div.message-part blockquote blockquote blockquote color: #333333; } +#messageviewlink +{ + position: absolute; + top: 8px; + right: 10px; + width: 15px; + height: 15px; + border: 0; +} /** message compose styles */ +#compose-toolbar +{ + white-space: nowrap; +} + #priority-selector, #receipt-selector { padding-left: 30px; + white-space: nowrap; } #compose-container { position: absolute; top: 90px; - left: 200px; - right: 40px; - bottom: 40px; - padding: 0px; + left: 205px; + right: 25px; + bottom: 30px; margin: 0px; - /* css hack for IE */ - width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-130)+'px'); } -/* -#compose-headers +#spellcheck-control { - position: absolute; - top: 70px; - left: 200px; - height: 84px; - border-top: 1px solid #cccccc; - overflow: auto; + text-align: right; + padding-top: 3px; } -#compose-headers td +#editor-select { - padding-top: 1px; - padding-bottom: 1px; - border-right: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; + float: left; } -*/ -#compose-headers +#compose-div { + position: absolute; + top: 130px; + bottom: 30px; width: 100%; + vertical-align: top; + padding-top: 2px; } -/* -#compose-headers td +#compose-headers { width: 100%; } -*/ #compose-headers td.top { @@ -806,7 +1194,6 @@ div.message-part blockquote blockquote blockquote #compose-headers td input { width: 100%; - width: expression('99%'); } #compose-headers td textarea @@ -823,10 +1210,8 @@ div.message-part blockquote blockquote blockquote #compose-body { - margin-top: 5px; - margin-bottom: 10px; - height: 90%; - min-height: 280px; + min-height: 100px; + height: 100%; font-size: 9pt; font-family: "Courier New", Courier, monospace; } @@ -836,7 +1221,7 @@ div.message-part blockquote blockquote blockquote position: absolute; top: 100px; left: 20px; - width: 160px; + width: 170px; } #compose-attachments ul @@ -861,6 +1246,12 @@ div.message-part blockquote blockquote blockquote overflow: hidden; } +#compose-attachments ul li img +{ + padding-right: 2px; + vertical-align: middle; +} + #attachment-title { background: url(images/icons/attachment.png) top left no-repeat; @@ -873,14 +1264,54 @@ div.message-part blockquote blockquote blockquote top: 150px; left: 20px; z-index: 200; - padding: 8px; + padding: 6px; visibility: hidden; border: 1px solid #CCCCCC; background-color: #F9F9F9; } -#attachment-form input.button +#attachment-form div +{ + padding: 2px; +} + +#attachment-form div.buttons { - margin-top: 8px; + margin-top: 4px; } +td.show-headers +{ + background: url(images/icons/down_small.gif) no-repeat center; +} + +td.hide-headers +{ + background: url(images/icons/up_small.gif) no-repeat center; +} + +#all-headers +{ + height: 150px; + display: none; +} + +#headers-source +{ + margin: 0 5px; + padding: 0.5em; + height: 145px; + background: white; + overflow: auto; + font-size: 11px; + white-space: nowrap; + border: 1px solid #999999; + display: none; + text-align: left; + color: #333; +} + +font.bold +{ + font-weight: bold; +}