X-Git-Url: https://git.donarmstrong.com/?a=blobdiff_plain;f=skins%2Fdefault%2Fmail.css;fp=skins%2Fdefault%2Fmail.css;h=7bb308c06760c700229d94c7cf2f1382d47c3ae3;hb=4212156c5c79d2f58342feb0d3ed1893f177bcab;hp=f74ea99834acbb9fd1c01cacef3eb1f19902cc73;hpb=e8a0682b96f5b7f297e58d101735ba20a0cc3a89;p=roundcube.git diff --git a/skins/default/mail.css b/skins/default/mail.css index f74ea99..7bb308c 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -1,4 +1,4 @@ -/***** RoundCube|Mail mail task styles *****/ +/***** Roundcube|Mail mail task styles *****/ #messagetoolbar @@ -13,7 +13,7 @@ /* border: 1px solid #cccccc; */ } -#messagetoolbar > a +#messagetoolbar a { display: block; float: left; @@ -27,9 +27,9 @@ width: 32px; height: 32px; padding: 0; - margin-right: 10px; + margin: 0 5px; overflow: hidden; - background: url('images/mail_toolbar.png') 0 0 no-repeat transparent; + background: url(images/mail_toolbar.png) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } @@ -137,16 +137,6 @@ background-position: -416px -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: relative; @@ -164,25 +154,19 @@ padding-left: 2px; } -#markmessagemenu, -#searchmenu, -#messagemenu +#searchmenu { - position: absolute; - top: 32px; - left: 90px; - width: auto; - display: none; - background-color: #F9F9F9; - border: 1px solid #CCC; - padding: 1px; - opacity: 0.9; - z-index: 240; + width: 160px; } -#searchmenu +#searchmenu ul.toolbarmenu { - width: 172px; + margin: 0; +} + +#searchmenu ul.toolbarmenu li +{ + margin: 1px 4px 1px; } #messagemenu li a.active:hover, @@ -194,53 +178,58 @@ #messagemenu li a { - background: url('images/messageactions.png') no-repeat 1px 0; - background-position: 0px 20px; + background: url(images/messageactions.png) no-repeat 7px 0; + background-position: 7px 20px; } #messagemenu li a.printlink { - background-position: 1px 1px; + background-position: 7px 1px; } #messagemenu li a.downloadlink { - background-position: 1px -17px; + background-position: 7px -17px; } #messagemenu li a.sourcelink { - background-position: 1px -35px; + background-position: 7px -35px; } #messagemenu li a.openlink { - background-position: 1px -53px; + background-position: 7px -53px; } #messagemenu li a.editlink { - background-position: 1px -71px; + background-position: 7px -71px; +} + +#markmessagemenu li a +{ + background: url(images/messageicons.png) no-repeat; } -#markmessagemenu a.readlink +#markmessagemenu li a.readlink { - background: url('images/icons/dot.png') no-repeat 2px; + background-position: 7px -51px; } -#markmessagemenu a.unreadlink +#markmessagemenu li a.unreadlink { - background: url('images/icons/unread.png') no-repeat 2px; + background-position: 7px -119px; } -#markmessagemenu a.flaggedlink +#markmessagemenu li a.flaggedlink { - background: url('images/icons/flagged.png') no-repeat 2px; + background-position: 7px -153px; } -#markmessagemenu a.unflaggedlink +#markmessagemenu li a.unflaggedlink { - background: url('images/icons/unflagged.png') no-repeat 2px; + background-position: 7px -136px; } #searchfilter @@ -256,55 +245,32 @@ font-size: 11px; } -td.formlinks a, -td.formlinks a:visited -{ - color: #999999; - font-size: 11px; - text-decoration: none; -} - -td.formlinks a, -td.formlinks a:visited -{ - color: #CC0000; -} - -#mainscreen -{ - position: absolute; - top: 85px; - right: 20px; - bottom: 16px; - left: 20px; -} - #mailleftcontainer { position: absolute; - top: 0px; - left: 0px; - bottom: 0px; + top: 0; + left: 0; + bottom: 0; width: 195px; } #mailrightcontainer { position: absolute; - top: 0px; + top: 0; left: 170px; - bottom: 0px; - right: 0px; + bottom: 0; + right: 0; min-width: 600px; } #mailrightcontent { position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 20px; + top: 0; + left: 0; + right: 0; + bottom: 0; } #messagepartcontainer @@ -320,13 +286,11 @@ td.formlinks a:visited { position: absolute; width: 100%; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; - overflow: auto; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden; } #mailpreviewframe @@ -385,29 +349,16 @@ td.formlinks a:visited /** mailbox list styles */ -#mailboxlist-header -{ - display: block; - height: 12px; - margin: 0; - padding: 3px 10px 4px 10px; - background: url('images/listheader.gif') top left repeat-x #CCC; - border-bottom: 1px solid #999; - color: #333333; - font-size: 11px; - font-weight: bold; -} - #mailboxlist-container { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; width: 100%; - bottom: 20px; + bottom: 0; border: 1px solid #999; background-color: #F9F9F9; - overflow: auto; + overflow: hidden; } #mailboxlist @@ -420,6 +371,7 @@ td.formlinks a:visited list-style-type: none; overflow: hidden; white-space: nowrap; + background-color: #FFF; } #mailboxlist li @@ -427,7 +379,7 @@ td.formlinks a:visited display: block; position: relative; font-size: 11px; - background: url('images/icons/folders.png') 5px 1px no-repeat; + background: url(images/icons/folders.png) 5px 0 no-repeat; border-bottom: 1px solid #EBEBEB; } @@ -436,7 +388,7 @@ td.formlinks a:visited position: absolute; left: 8px !important; left: -16px; - top: 2px; + top: 1px; width: 14px; height: 16px; } @@ -449,37 +401,37 @@ td.formlinks a:visited #mailboxlist li div.collapsed { - background: url('images/icons/collapsed.png') bottom right no-repeat; + background: url(images/icons/collapsed.png) bottom right no-repeat; } #mailboxlist li div.expanded { - background: url('images/icons/expanded.png') bottom right no-repeat; + background: url(images/icons/expanded.png) bottom right no-repeat; } #mailboxlist li.inbox { - background-position: 5px -19px; + background-position: 5px -18px; } #mailboxlist li.drafts { - background-position: 5px -40px; + background-position: 5px -37px; } #mailboxlist li.sent { - background-position: 5px -60px; + background-position: 5px -54px; } #mailboxlist li.junk { - background-position: 5px -80px; + background-position: 5px -73px; } #mailboxlist li.trash { - background-position: 5px -100px; + background-position: 5px -91px; } #mailboxlist li a @@ -525,75 +477,58 @@ td.formlinks a:visited #mailboxlist ul { list-style: none; padding: 0; - margin:0; - border-top: 1px solid #EBEBEB; + margin: 0; + border-top: 1px solid #EBEBEB; padding-left: 15px; background-position: 25px 1px; - background-color: #F9F9F9; + background-color: #FFF; color: blue; font-weight: normal; } -#listcontrols, -#mailboxcontrols +#listcontrols { - position: absolute; + position: relative; white-space: nowrap; - left: 0px; - bottom: 0px; - height: 15px; + left: 4px; + line-height: 22px; width: auto; min-width: 300px; } #listcontrols a, -#listcontrols span, -#mailboxcontrols a, -#mailboxcontrols span +#listcontrols span { display: block; float: left; font-size: 11px; } +#listcontrols input +{ + margin-top: 6px; +} + #listcontrols a.button, -#listcontrols a.buttonPas, -#mailboxcontrols a.button, -#mailboxcontrols a.buttonPas +#listcontrols a.buttonPas { display: block; float: left; width: 15px; height: 15px; padding: 0; + margin-top: 4px; margin-right: 2px; overflow: hidden; - background: url('images/mail_footer.png') 0 0 no-repeat transparent; + background: url(images/mail_footer.png) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } -#listcontrols a.buttonPas, -#mailboxcontrols a.buttonPas +#listcontrols a.buttonPas { opacity: 0.35; } -#mailboxcontrols a.expunge { - background-position: 0 0; -} - -#mailboxcontrols a.expungesel { - background-position: 0 -15px; -} - -#mailboxcontrols a.purge { - background-position: -15px 0; -} - -#mailboxcontrols a.purgesel { - background-position: -15px -15px; -} - #listcontrols a.all { background-position: -30px 0; } @@ -602,6 +537,14 @@ td.formlinks a:visited background-position: -30px -15px; } +#listcontrols a.page { + background-position: -135px 0; +} + +#listcontrols a.pagesel { + background-position: -135px -15px; +} + #listcontrols a.unread { background-position: -45px 0; } @@ -626,12 +569,35 @@ td.formlinks a:visited background-position: -75px -15px; } +#listcontrols a.expand-all { + background-position: -90px 0; +} + +#listcontrols a.expand-allsel { + background-position: -90px -15px; +} + +#listcontrols a.collapse-all { + background-position: -105px 0; +} + +#listcontrols a.collapse-allsel { + background-position: -105px -15px; +} + +#listcontrols a.expand-unread { + background-position: -120px 0; +} + +#listcontrols a.expand-unreadsel { + background-position: -120px -15px; +} + #countcontrols { - height: 15px; position: absolute; - bottom: 0; - right: 0; + top: 4px; + right: 4px; min-width: 25em; white-space: nowrap; font-size: 11px; @@ -661,15 +627,12 @@ body.messagelist #messagelist thead tr td { - height: 19px; - padding-top: 0px; - padding-bottom: 0px; - padding-left: 2px; - padding-right: 4px; + height: 20px; + padding: 0 4px 0 2px; vertical-align: middle; border-bottom: 1px solid #999999; color: #333333; - background: url('images/listheader.gif') top left repeat-x #CCC; + background: url(images/listheader.gif) top left repeat-x #CCC; font-size: 11px; font-weight: bold; } @@ -677,17 +640,17 @@ body.messagelist #messagelist thead tr td.sortedASC, #messagelist thead tr td.sortedDESC { - background-position: 0 -20px; + background-position: 0 -22px; } #messagelist thead tr td.sortedASC a { - background: url('images/icons/sort.gif') right 0 no-repeat; + background: url(images/icons/sort.gif) right 0 no-repeat; } #messagelist thead tr td.sortedDESC a { - background: url('images/icons/sort.gif') right -14px no-repeat; + background: url(images/icons/sort.gif) right -14px no-repeat; } #messagelist thead tr td a @@ -699,13 +662,23 @@ body.messagelist text-decoration: none; } +#messagelist thead tr td.size +{ + text-align: left; +} + +#messagelist thead tr td.subject +{ + padding-left: 18px; +} + #messagelist tbody tr td { - height: 16px; - padding: 2px; - padding-right: 4px; + height: 20px; + padding: 0; font-size: 11px; overflow: hidden; + vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; @@ -721,75 +694,188 @@ body.messagelist cursor: inherit; } -#messagelist tbody tr td.subject a +#messagelist td span, +#messagelist td img { - cursor: default; + vertical-align: middle; + display: inline-block; } -#messagelist col +#messagelist tbody tr td.flag, +#messagelist tbody tr td.status, +#messagelist tbody tr td.subject span.status { - display: table-column; - text-align: left; - vertical-align: middle; + cursor: pointer; } -#messagelist thead tr td.icon, -#messagelist thead tr td.flag +#messagelist tr td.flag span, +#messagelist tr td.status span, +#messagelist tr td.attachment span { - width: 22px; - padding: 0; - text-align: center; + width: 15px; } -#messagelist tbody tr td.icon, -#messagelist tbody tr td.flag +#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.flag span.flagged, +#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 { - padding: 2px 3px 2px 3px; vertical-align: middle; + height: 17px; + width: 15px; + background: url(images/messageicons.png) center no-repeat; +} + +#messagelist tr td.attachment span.attachment +{ + background-position: 0 -170px; +} + +#messagelist tr td.attachment span.report +{ + background-position: 0 -255px; +} + +#messagelist tr td.flag span.flagged +{ + background-position: 0 -153px; +} + +#messagelist tr td.flag span.unflagged:hover +{ + background-position: 0 -136px; +} + +#messagelist tr td.subject span.msgicon, +#messagelist tr td.subject span.unreadchildren +{ + background-position: 0 -51px; + margin: 0 2px; +} + +#messagelist tr td.subject span.replied +{ + background-position: 0 -85px; +} + +#messagelist tr td.subject span.forwarded +{ + background-position: 0 -68px; +} + +#messagelist tr td.subject span.replied.forwarded +{ + background-position: 0 -102px; +} + +#messagelist tr td.status span.msgicon, +#messagelist tr td.status span.unreadchildren +{ + background-position: 0 17px; /* 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 +{ + background-position: 0 -119px; +} + +#messagelist tr td div.collapsed +{ + background-position: 0 -221px; cursor: pointer; } -#messagelist tbody tr td.flag img:hover, -#messagelist thead tr td.flag img +#messagelist tr td div.expanded { - background: url(images/icons/unflagged.png) center no-repeat; + background-position: 0 -204px; + cursor: pointer; } -#messagelist tr td.subject +#messagelist tr td.threads div.listmenu +{ + background-position: 0 -238px; + cursor: pointer; +} + +#messagelist tbody tr td.subject { - overflow: hidden; - vertical-align: middle; width: 99%; } -#messagelist tr td.size +#messagelist tbody tr td.subject a { - width: 70px; - text-align: right; + cursor: default; + display: inline-block; vertical-align: middle; } -#messagelist thead tr td.size +/* thread parent message with unread children */ +#messagelist tbody tr.unroot td.subject a { - text-align: left; + text-decoration: underline; +} + +#messagelist tr td.attachment, +#messagelist tr td.threads, +#messagelist tr td.status, +#messagelist tr td.flag +{ + width: 17px; + padding: 0 0 0 2px; +} + +#messagelist tr td.size +{ + width: 60px; + text-align: right; + padding: 0 2px; } #messagelist tr td.from, -#messagelist tr td.to +#messagelist tr td.to, +#messagelist tr td.cc, +#messagelist tr td.replyto { width: 180px; - vertical-align: middle; + padding: 0 2px; } #messagelist tr td.date { width: 118px; - vertical-align: middle; + padding: 0 2px; } #messagelist tr.message { - background-color: #FFFFFF; + background-color: #FFF; } /* @@ -839,31 +925,70 @@ body.messagelist color: #CCCCCC; } -.quota_text { +#listmenu +{ + padding: 6px; +} + +#listmenu legend +{ + color: #999999; +} + +#listmenu fieldset +{ + border: 1px solid #999999; + margin: 0 5px; + float: left; +} + +#listmenu div +{ + padding: 8px 0 3px 0; text-align: center; - font-size: 10px; - color: #666; - border: 1px solid #999; - cursor: default; + clear: both; +} + +/***** tree indicators *****/ + +td span.branch div +{ + float: left; + height: 16px; } -.quota_bg { background-color: white; } -.quota_high { background-color: #F33131; } -.quota_mid { background-color: #F5AD3C; } -.quota_low { background-color: #91E164; } -.quota_text_high { color: white; } -.quota_text_mid { color: #666; } -.quota_text_low { color: #666; } - + +td span.branch div.tree +{ + height: 17px; + width: 15px; + background: url(images/tree.gif) 0px 0px no-repeat; +} + +td span.branch div.l1 +{ + background-position: 0px 0px; /* L */ +} + +td span.branch div.l2 +{ + background-position: -30px 0px; /* | */ +} + +td span.branch div.l3 +{ + background-position: -15px 0px; /* |- */ +} + /** message view styles */ #messageframe { position: absolute; - top: 0px; + top: 0; left: 180px; - right: 0px; - bottom: 20px; + right: 0; + bottom: 0; border: 1px solid #999; background-color: #FFF; overflow: auto; @@ -880,7 +1005,6 @@ table.headers-table { width: 100%; background-color: #EBEBEB; - table-layout: fixed; } #messagebody table.headers-table @@ -902,19 +1026,23 @@ table.headers-table tr td border-bottom:1px solid #FFFFFF; } -table.headers-table td.header-title +table.headers-table tr td.header-title { - width: 80px; + width: 1%; color: #666666; font-weight: bold; text-align: right; white-space: nowrap; - padding-right: 4px; + padding: 0 4px; +} + +table.headers-table tr td.header +{ + width: 99%; } table.headers-table tr td.subject { - width: 90%; font-weight: bold; } @@ -939,12 +1067,12 @@ table.headers-table tr td.more-headers #attachment-list { - margin: 0px; - padding: 0px 0px 0px 72px; + margin: 0; + padding: 0 4px 0 8px; min-height: 16px; list-style-image: none; list-style-type: none; - background: url(images/icons/attachment.png) 60px 2px no-repeat #DFDFDF; + background: url(images/icons/attachment.png) 4px 2px no-repeat #DFDFDF; } #attachment-list:after @@ -983,7 +1111,8 @@ table.headers-table tr td.more-headers background-color: #FFFFFF; } -div.message-part +div.message-part, +div.message-htmlpart { padding: 10px 8px; border-top: 1px solid #ccc; @@ -1081,49 +1210,83 @@ div.message-htmlpart div.rcmBody border: 0; } -/** message compose styles */ +td.show-headers +{ + background: url(images/icons/down_small.gif) no-repeat center; +} -#compose-toolbar +td.hide-headers { - white-space: nowrap; + background: url(images/icons/up_small.gif) no-repeat center; } -#priority-selector, -#receipt-selector +#all-headers { - padding-left: 30px; + 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; } + +/** message compose styles */ + #compose-container { position: absolute; - top: 90px; - left: 205px; - right: 25px; - bottom: 30px; - margin: 0px; + top: 0; + left: 185px; + right: 0; + bottom: 0; + margin: 0; } -#spellcheck-control +#compose-div { - text-align: right; - padding-top: 3px; + position: absolute; + top: 85px; + bottom: 0; + margin: 0; + width: 100%; } -#editor-select +#compose-div .boxfooter { - float: left; + height: 22px; + background: none; + border-top: 0; } -#compose-div +#compose-div .boxlistcontent +{ + bottom: 23px; +} + +#compose-body { position: absolute; - top: 130px; - bottom: 30px; - width: 100%; - vertical-align: top; - padding-top: 2px; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: 0; + font-size: 9pt; + font-family: monospace; + border: 1px solid #999; + resize: none; } #compose-headers @@ -1131,6 +1294,12 @@ div.message-htmlpart div.rcmBody width: 100%; } +#compose-headers td.editfield +{ + padding-right: 8px; + width: 95%; +} + #compose-headers td.top { vertical-align: top; @@ -1140,54 +1309,92 @@ div.message-htmlpart div.rcmBody #compose-subject td.title { width: 80px !important; - color: #666666; font-size: 11px; font-weight: bold; padding-right: 10px; white-space: nowrap; + color: #666; } -#compose-body, #compose-headers td textarea, #compose-headers td input { + resize: none; width: 100%; + border: 1px solid #999; } #compose-headers td textarea { - height: 38px; + height: 32px; +} + +input.from_address +{ + width: 80% !important; } #compose-cc, #compose-bcc, -#compose-replyto +#compose-replyto, +#compose-followupto { display: none; } -#compose-body +.formlinks a, +.formlinks a:visited { - min-height: 100px; - height: 100%; - font-size: 9pt; - font-family: "Courier New", Courier, monospace; + color: #999999; + font-size: 11px; + text-decoration: none; +} + +.formlinks a, +.formlinks a:visited +{ + color: #CC0000; +} + +#compose-editorfooter +{ + position: absolute; + right: 0; + bottom: 0; + text-align: right; +} + +#compose-editorfooter label +{ + font-size: 11px; + font-weight: bold; + color: #666; +} + +#compose-buttons +{ + position: absolute; + left: 0; + bottom: 0; + width: auto; } #compose-attachments { position: absolute; - top: 100px; - left: 20px; + top: 0; + left: 0; + bottom: 0; width: 175px; + border: 1px solid #999; + background-color: #F9F9F9; } #compose-attachments ul { margin: 0px; padding: 0px; - border: 1px solid #CCCCCC; - background-color: #F9F9F9; + background-color: #FFF; list-style-image: none; list-style-type: none; } @@ -1202,6 +1409,8 @@ div.message-htmlpart div.rcmBody border-bottom: 1px solid #EBEBEB; white-space: nowrap; overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; } #compose-attachments ul li img @@ -1210,26 +1419,9 @@ div.message-htmlpart div.rcmBody vertical-align: middle; } -#attachment-title -{ - color: #666666; - font-weight: bold; - font-size: 11px; - background: url(images/icons/attachment.png) top left no-repeat; - padding: 0px 0px 3px 18px; - margin-left: 3px; -} - #attachment-form { - position: absolute; - top: 150px; - left: 20px; - z-index: 200; padding: 6px; - visibility: hidden; - border: 1px solid #CCCCCC; - background-color: #F9F9F9; } #attachment-form div @@ -1242,38 +1434,18 @@ div.message-htmlpart div.rcmBody margin-top: 4px; } -td.show-headers -{ - background: url(images/icons/down_small.gif) no-repeat center; -} - -td.hide-headers +#quota { - 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; + position: absolute; + top: 3px; + right: 8px; + width: 100px; } -font.bold +#quotaimg { - font-weight: bold; + position: absolute; + top: 3px; + right: 6px; + z-index: 101; }