From a3644638aaf0418598196a870204e0b632a4c8ad Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Fri, 17 Apr 2015 06:28:40 -0400 Subject: [PATCH] Allow preference sections to define CSS class names --- skins/larry/mail.css | 607 ++++++++++++++++++++---------------------------------- 1 files changed, 229 insertions(+), 378 deletions(-) diff --git a/skins/larry/mail.css b/skins/larry/mail.css index f63083e..effc35f1 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -14,7 +14,7 @@ position: absolute; top: 0; left: 0; - width: 220px; + width: 200px; bottom: 0; z-index: 2; } @@ -22,7 +22,7 @@ #mailview-right { position: absolute; top: 0; - left: 232px; + left: 212px; right: 0; bottom: 0; z-index: 3; @@ -34,22 +34,23 @@ #mailview-top { position: absolute; - top: 42px; + top: 0; left: 0; - width: 100%; - bottom: 28px; + right: 0; + bottom: 0px; } -#mailview-top.fullheight { - border-radius: 4px 4px 0 0; +html.ie #mailview-top { + overflow: visible; /* fixes display issues of fixed list header in IE */ } #mailview-bottom { + display: none; position: absolute; left: 0; bottom: 0; - width: 100%; - height: 27px; + right: 0; + height: 0; border-radius: 4px; border-top: none; } @@ -58,16 +59,10 @@ border-radius: 0 0 4px 4px; } -#folderlist-header { - width: 100%; - height: 12px; - top: 32px; -} - #mailboxcontainer, #messagelistcontainer { position: absolute; - top: 42px; + top: 0; left: 0; width: 100%; bottom: 0; @@ -77,6 +72,12 @@ top: 0; bottom: 30px; overflow: auto; +} + +/* Real browsers accept this (not IE) */ +html>/**/body #messagelist { + overflow: auto; + overflow-x: hidden; } #messagelistfooter { @@ -92,12 +93,9 @@ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6)); background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); - background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); + background: linear-gradient(to bottom, #ebebeb 0%, #c6c6c6 100%); border-radius: 0 0 4px 4px; -} - -#mailview-top.fullheight #messagelistfooter { - border-radius: 0; + white-space: nowrap; } #messagelistfooter.rightalign { @@ -139,182 +137,41 @@ background-position: -26px -497px; } -#mailboxlist li.mailbox { - position: relative; - background-repeat: no-repeat; - background-position: 6px 2px; -} - #mailboxlist > li:first-child { - border-radius: 4px 4px 0 0; border-top: 0; } -#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; +html.mozilla #mailboxlist > li:first-child { + border-radius: 4px 4px 0 0; } -#mailboxlist li.mailbox.unread > a { +.folderlist li.mailbox.unread > a { padding-right: 36px; } -#mailboxlist li.mailbox.selected > a { - background-position: 6px -21px; -} - -#mailboxlist li.mailbox.inbox > a { - background-position: 6px -189px; -} - -#mailboxlist li.mailbox.inbox.selected > a { - background-position: 6px -213px; -} - -#mailboxlist li.mailbox.drafts > a { - background-position: 6px -238px; -} - -#mailboxlist li.mailbox.drafts.selected > a { - background-position: 6px -262px; -} - -#mailboxlist li.mailbox.sent > a { - background-position: 6px -286px; -} - -#mailboxlist li.mailbox.sent.selected > a { - background-position: 6px -310px; -} - -#mailboxlist li.mailbox.junk > a { - background-position: 6px -334px; -} - -#mailboxlist li.mailbox.junk.selected > a { - background-position: 6px -358px; -} - -#mailboxlist li.mailbox.trash > a { - background-position: 6px -382px; -} - -#mailboxlist li.mailbox.trash.selected > a { - background-position: 6px -406px; -} - -#mailboxlist li.mailbox.archive > a { - background-position: 6px -1699px; -} - -#mailboxlist li.mailbox.archive.selected > a { - background-position: 6px -1723px; -} - -#mailboxlist li.unread { +.folderlist li.unread { font-weight: bold; } -#mailboxlist li.virtual > a { - color: #aaa; -} - -#mailboxlist li.recent > a { +.folderlist li.recent > a { color: #017cb4; } -#mailboxlist li.mailbox div.treetoggle { - top: 13px; - left: 19px; -} - -#mailboxlist li.mailbox ul li:last-child { - border-bottom: 0; -} - -/* nested mailboxes */ - -#mailboxlist li.mailbox ul { - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid #bbd3da; -} - -#mailboxlist li.mailbox ul li a { - padding-left: 52px; /* 36 + 1 x 16 */ - background-position: 22px -93px; /* 6 + 1 x 16 */ -} -#mailboxlist li.mailbox ul li.selected > a { - background-position: 22px -117px; -} -#mailboxlist li.mailbox ul li div.treetoggle { - left: 33px; - top: 14px; -} - -#mailboxlist li.mailbox ul ul li.mailbox a { - padding-left: 68px; /* 2x */ - background-position: 38px -93px; -} -#mailboxlist li.mailbox ul ul li.selected > a { - background-position: 38px -117px; -} -#mailboxlist li.mailbox ul ul li div.treetoggle { - left: 48px; -} - -#mailboxlist li.mailbox ul ul ul li.mailbox a { - padding-left: 84px; /* 3x */ - background-position: 54px -93px; -} -#mailboxlist li.mailbox ul ul ul li.selected > a { - background-position: 54px -117px; -} -#mailboxlist li.mailbox ul ul ul li div.treetoggle { - left: 64px; -} - -#mailboxlist li.mailbox ul ul ul ul li.mailbox a { - padding-left: 100px; /* 4x */ - background-position: 70px -93px; -} -#mailboxlist li.mailbox ul ul ul ul li.selected > a { - background-position: 70px -117px; -} -#mailboxlist li.mailbox ul ul ul ul li div.treetoggle { - left: 80px; -} - -/* indent folders on levels > 4 */ -#mailboxlist li.mailbox ul ul ul ul ul li { - padding-left: 16px; -} -#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle { - left: 96px; -} - -#mailboxlist li.mailbox .unreadcount { +.folderlist li.mailbox .unreadcount { position: absolute; top: 3px; right: 6px; min-width: 1.8em; + line-height: 15px; padding: 2px 4px; 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%); + background: linear-gradient(to bottom, #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; @@ -322,30 +179,26 @@ text-shadow: none; } -#mailboxlist li.mailbox.selected > a .unreadcount { +.folderlist li.mailbox.selected > a .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%); + background: linear-gradient(to bottom, #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; } -#mailboxlist li.mailbox.recent > a .unreadcount { +.folderlist li.mailbox.recent > a .unreadcount { background: #017cb4; background: -moz-linear-gradient(top, #017cb4 0%, #006ca4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#017cb4), color-stop(100%,#006ca4)); background: -o-linear-gradient(top, #017cb4 0%, #006ca4 100%); background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%); - background: linear-gradient(top, #017cb4 0%, #006ca4 100%); + background: linear-gradient(to bottom, #017cb4 0%, #006ca4 100%); box-shadow: inset 0 1px 1px 0 #005080; - -o-box-shadow: inset 0 1px 1px 0 #005080; -webkit-box-shadow: inset 0 1px 1px 0 #005080; - -moz-box-shadow: inset 0 1px 1px 0 #005080; } #searchfilter { @@ -378,12 +231,6 @@ right: 0; } -#messagetoolbar .toolbarselect { - position: absolute; - bottom: 6px; - right: 3px; -} - #messagesearchtools { position: absolute; right: 0; @@ -393,7 +240,7 @@ #mailpreviewtoggle { display: block; position: absolute; - top: 6px; + top: 7px; right: 4px; width: 20px; height: 18px; @@ -407,141 +254,150 @@ /*** message list ***/ -#messagelist thead td:first-child { +table.messagelist { + z-index: 1; +} + +table.messagelist.fixedcopy { + z-index: 2; +} + +.messagelist thead th:first-child { border-radius: 4px 0 0 0; /* for Chrome */ } -#messagelist tr td.attachment, -#messagelist tr td.threads, -#messagelist tr td.status, -#messagelist tr td.flag, -#messagelist tr td.priority { +.messagelist tr > .attachment, +.messagelist tr > .threads, +.messagelist tr > .status, +.messagelist tr > .flag, +.messagelist tr > .priority { width: 20px; - padding: 2px 3px; + padding: 2px 3px !important; } -.webkit #messagelist tr td.attachment, -.webkit #messagelist tr td.threads, -.webkit #messagelist tr td.status, -.webkit #messagelist tr td.flag, -.webkit #messagelist tr td.priority { +.messagelist tr > .threads { width: 26px; } -#messagelist tr td.threads { - width: 26px; -} - -.webkit #messagelist tr td.threads { - width: 30px; -} - -#messagelist tr td.threads, -#messagelist tr td.threads + td { +.messagelist tr > .threads + td, +.messagelist tr > .threads + th { border-left: 0; } -#messagelist tr td.size { +.messagelist tr > .size { width: 60px; text-align: right; } -#messagelist thead tr td.size { +.messagelist thead tr th.size { text-align: left; } -#messagelist tr td.fromto, -#messagelist tr td.from, -#messagelist tr td.to, -#messagelist tr td.cc, -#messagelist tr td.replyto { +.messagelist tr > .fromto, +.messagelist tr > .from, +.messagelist tr > .to, +.messagelist tr > .cc, +.messagelist tr > .replyto { width: 200px; } -#messagelist tr td.date { +.messagelist tr > .date { + width: 155px; +} + +.messagelist tr > .folder { width: 135px; } -#messagelist tr.message { +.messagelist tr > .hidden { + display: none; +} + +.messagelist tr.message { /* background-color: #fff; */ } -#messagelist tr.thread.expanded td { +.messagelist tr.thread.expanded td { background-color: #ededed; } -#messagelist tr.unread { +.messagelist tr.unread { font-weight: bold; /* background-color: #fff; */ } -#messagelist tr.flagged td, -#messagelist tr.flagged td a { +.messagelist tr.flagged th, +.messagelist tr.flagged td, +.messagelist tr.flagged td a { color: #f30; } -#messagelist thead tr td.sortedASC a, -#messagelist thead tr td.sortedDESC a { +.messagelist thead tr th.sortedASC a, +.messagelist thead tr th.sortedDESC a { color: #004458; text-decoration: underline; - background: url(images/listicons.png) right -912px no-repeat; + background-image: url(images/listicons.png); + background-repeat: no-repeat; + background-position: right -912px; } -#messagelist thead tr td.sortedASC a { +.messagelist thead tr th.sortedASC a { background-position: right -944px; } -#messagelist td img { +.messagelist td img { vertical-align: middle; display: inline-block; } -#messagelist tbody td a { +.messagelist tbody td a { color: #333; text-decoration: none; white-space: nowrap; cursor: default; } -#messagelist tbody tr td.flag, -#messagelist tbody tr td.status, -#messagelist tbody tr td.subject span.status { +.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 { +.messagelist tr > .flag span, +.messagelist tr > .status span, +.messagelist tr > .attachment span, +.messagelist tr > .priority span { display: block; width: 20px; + text-indent: -5000px; + overflow: hidden; } -#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 { +.messagelist tr td div.collapsed, +.messagelist tr td div.expanded, +.messagelist tr > .threads .listmenu, +.messagelist tr > .attachment span.attachment, +.messagelist tr > .attachment span.report, +.messagelist tr > .priority span.priority, +.messagelist tr > .priority span.prio1, +.messagelist tr > .priority span.prio2, +.messagelist tr > .priority span.prio3, +.messagelist tr > .priority span.prio4, +.messagelist tr > .priority span.prio5, +.messagelist tr > .flag span.flagged, +.messagelist tr > .flag span.unflagged, +.messagelist tr > .flag span.unflagged:hover, +.messagelist tr > .status span.status, +.messagelist tr > .status span.msgicon, +.messagelist tr > .status span.deleted, +.messagelist tr > .status span.unread, +.messagelist tr > .status span.unreadchildren, +.messagelist tr > .subject span.msgicon, +.messagelist tr > .subject span.deleted, +.messagelist tr > .subject span.unread, +.messagelist tr > .subject span.replied, +.messagelist tr > .subject span.forwarded, +.messagelist tr > .subject span.unreadchildren { display: inline-block; vertical-align: middle; height: 18px; @@ -550,135 +406,149 @@ background: url(images/listicons.png) -100px 0 no-repeat; } -#messagelist tbody tr td.attachment span.attachment { +.messagelist tbody tr td.attachment span.attachment { background-position: 0 -996px; } -#messagelist thead tr td.attachment span.attachment { - background-position: -24px -997px; +.messagelist thead tr th.attachment span.attachment { + background-position: -24px -996px; } -#messagelist tbody tr td.attachment span.report { +.messagelist tbody tr td.attachment span.report { background-position: -24px -1116px; } -#messagelist tr td.priority span.prio5 { +.messagelist thead tr th.priority span.priority { + background-position: -25px -1845px; +} + +.messagelist tr td.priority span.prio5 { background-position: 0 -1905px; } -#messagelist tr td.priority span.prio4 { +.messagelist tr td.priority span.prio4 { background-position: 0 -1885px; } -#messagelist tr td.priority span.prio2 { +.messagelist tr td.priority span.prio2 { background-position: 0 -1865px; } -#messagelist tr td.priority span.prio1 { +.messagelist tr td.priority span.prio1 { background-position: 0 -1845px; } -#messagelist tbody tr td.flag span.flagged { +.messagelist tbody tr td.flag span.flagged { background-position: 0 -1036px; } -#messagelist thead tr td.flag span.flagged { - background-position: -24px -1036px; +.messagelist thead tr th.flag span.flagged { + background-position: -22px -1037px; } -#messagelist tr td.status span.msgicon:hover { - background-position: -23px -1056px; +.messagelist tr:hover td.status span.msgicon { + background-position: -23px -1057px; } -#messagelist tr td.flag span.unflagged:hover { +.messagelist tr:hover td.flag span.unflagged { background-position: -23px -1076px; } -#messagelist tr td.subject span.msgicon, -#messagelist tr td.subject span.unreadchildren { +.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 { +.messagelist tr td.subject span.replied { background-position: 0 -1076px; } -#messagelist tr td.subject span.forwarded { +.messagelist tr td.subject span.forwarded { background-position: 0 -1096px; } -#messagelist tr td.subject span.replied.forwarded { +.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 { +.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 { +.messagelist tr td.status span.msgicon:hover { background-position: 0 -272px; } */ -#messagelist tr td.status span.deleted, -#messagelist tr td.status span.deleted:hover, -#messagelist tr td.subject span.deleted { - background-position: -22px -1096px; +.messagelist tr td.status span.deleted, +.messagelist tr:hover td.status span.deleted, +.messagelist tr td.subject span.deleted { + background-position: -21px -1096px; } -#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 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 -1017px !important; } -#messagelist thead tr td.status span.status { - background-position: -24px -1016px; +.messagelist thead tr th.status span.status { + background-position: -23px -1017px; } -#messagelist tr td div.collapsed { +.messagelist tr td div.collapsed { background-position: 0 -1137px; cursor: pointer; } -#messagelist tr td div.expanded { +.messagelist tr td div.expanded { background-position: 0 -1157px; cursor: pointer; } -#messagelist tr td.threads div.listmenu { - background-position: 0 -976px; +.messagelist tr th.threads .listmenu { + background-position: 4px -972px; cursor: pointer; - width: 26px; + width: 24px; + height: 21px; + overflow: hidden; + text-indent: -5000px; + margin: -3px -5px -2px -6px; + padding: 3px 5px 2px 6px; } -#messagelist thead tr td.subject, -#messagelist tbody tr td.subject { +.messagelist tr th.threads .listmenu:focus { + background-color: rgba(73,180,210,0.7); + outline: none; +} + +.messagelist thead tr th.subject, +.messagelist tbody tr td.subject { width: 99%; white-space: nowrap; } -#messagelist tbody tr td.subject a { +.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 { +.messagelist tbody tr.unroot td.subject a { text-decoration: underline; } /**** tree indicators ****/ -#messagelist tbody tr td span.branch div { +.messagelist tbody tr td span.branch div { display: inline-block; } -#messagelist tbody tr td span.branch div.tree { +.messagelist tbody tr td span.branch div.tree { width: 15px; } @@ -694,12 +564,12 @@ top: 0; left: 0; width: 100%; - bottom: 28px; + bottom: 0px; } #messagecontframe { border: 0; - border-radius: 4px 4px 0 0; + border-radius: 4px; } #messagecontent { @@ -707,8 +577,9 @@ top: 110px; left: 0; width: 100%; - bottom: 27px; + bottom: 1px; overflow: auto; + -webkit-overflow-scrolling: touch; } #messageheader, @@ -720,7 +591,7 @@ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0)); background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); - background: linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%); border-bottom: 1px solid #dfdfdf; } @@ -747,7 +618,7 @@ h3.subject { font-size: 14px; - margin: 0 12em 0 0; + margin: 0 15em 0 0; padding: 8px 8px 4px 8px; white-space: nowrap; overflow: hidden; @@ -839,6 +710,16 @@ border-radius: 3px 0 0 0; /* for Opera */ } +.moreheaderstoggle:focus { + background: #f2f2f2; + background: -moz-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0,#66bcd9), color-stop(100%,#49b3d2)); + background: -o-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: -ms-linear-gradient(left, #66bcd9 0, #49b3d2 100%); + background: linear-gradient(left, #66bcd9 0, #49b3d2 100%); + border-right-color: #149cc5; +} + .moreheaderstoggle .iconlink { display: inline-block; position: absolute; @@ -881,10 +762,8 @@ border: 1px solid #ccc; border-radius: 4px; background: #fdfdfd; - -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); - -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); - -o-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); + -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1); } #headers-source { @@ -971,7 +850,6 @@ } #messageheader .pagenav .countdisplay { - min-width: 0; padding-right: 0.5em; white-space: nowrap; } @@ -979,7 +857,6 @@ #messagecontent .leftcol, #messagepreview .leftcol { margin-right: 252px; - overflow-x: auto; } #messagecontent .rightcol, @@ -1009,20 +886,20 @@ margin: 8px; } -#message-objects div.notice, -#message-buttons div.notice { +#message-objects div.notice { display: block; color: #960; border: 1px solid #ffdf0e; background-color: #fef893; background-position: 5px -83px; - padding: 6px 12px 4px 30px; + padding: 6px 12px 6px 30px; white-space: normal; } #message-objects div a.button, #messagebody span.part-notice a.button { margin-left: 10px; + margin-top: -1px; } div.message-part, @@ -1037,16 +914,11 @@ border-top: 0; } -div.message-part pre, -div.message-htmlpart pre, div.message-part div.pre { margin: 0; padding: 0; font-family: monospace; font-size: 12px; - white-space: -moz-pre-wrap !important; - white-space: pre-wrap !important; - white-space: pre; } div.message-part span.sig { @@ -1058,8 +930,10 @@ border-left: 2px solid blue; border-right: 2px solid blue; background-color: #F6F6F6; - margin: 2px 0 2px 0; - padding: 1px 8px 1px 10px; + margin: 2px 0; + padding: 0 0.4em; + overflow: hidden; + text-overflow: ellipsis; } div.message-part blockquote blockquote { @@ -1118,6 +992,7 @@ #messagebody p.image-attachment { position: relative; padding: 1em; + margin-bottom: 0; border-top: 1px solid #ccc; } @@ -1146,7 +1021,7 @@ #messagepartcontainer { position: absolute; - top: 42px; + top: 0; left: 232px; right: 0; bottom: 0; @@ -1160,7 +1035,7 @@ #messagepartheader { position: absolute; - top: 42px; + top: 0; left: 0; width: 220px; bottom: 0; @@ -1173,10 +1048,12 @@ #messagepartheader table td { text-overflow: ellipsis; + overflow: hidden; } #messagepartheader table td.title { width: 60px; + padding-right: 0; } @@ -1186,41 +1063,28 @@ position: absolute; top: 0; left: 0; - width: 250px; + width: 200px; bottom: 0; } #composeview-right { position: absolute; top: 0; - left: 262px; + left: 212px; right: 0; bottom: 0; } #compose-contacts { position: absolute; - top: 42px; + top: 0; left: 0; width: 100%; bottom: 0; } -#composequicksearch { - position: relative; - padding: 4px; - background: #c7e3ef; -} - -#composequicksearch .searchbox input { - width: 100%; - height: 26px; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#composequicksearch #searchmenulink { - width: 15px; +#compose-contacts .listsearchbox { + display: block; } #compose-contacts #directorylist { @@ -1251,11 +1115,17 @@ margin-left: 0.5em; } -#compose-contacts li a, #contacts-table td { - background: url(images/listicons.png) -100px 0 no-repeat; +#compose-contacts li a, +#contacts-table td { + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; overflow: hidden; - padding-left: 36px; text-overflow: ellipsis; +} + +#compose-contacts li a { + padding-left: 36px; } #contacts-table td.contactgroup a { @@ -1279,6 +1149,7 @@ background-position: 6px -766px; } +#compose-contacts li.addressbook a:focus, #compose-contacts li.addressbook.selected a { background-position: 6px -791px; } @@ -1287,7 +1158,6 @@ background-position: 6px -1555px; } -#contacts-table tr.unfocused td.contactgroup, #contacts-table tr.selected td.contactgroup { background-position: 6px -1579px; } @@ -1296,19 +1166,16 @@ background-position: 6px -1603px; } -#contacts-table tr.unfocused td.contact, #contacts-table tr.selected td.contact { background-position: 6px -1627px; } #compose-content { position: absolute; - top: 42px; + top: 0; left: 0; - width: 100%; - bottom: 28px; - border-radius: 4px 4px 0 0; - border-bottom: none; + right: 0; + bottom: 0px; overflow: hidden; } @@ -1378,8 +1245,6 @@ .compose-headers td input { width: 100%; resize: none; - font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - font-size: 11px; } #compose-cc, #compose-bcc, #compose-replyto, #compose-followupto { @@ -1392,10 +1257,7 @@ white-space: normal; border-top: 1px solid #dfdfdf; box-shadow: inset 0 1px 0 0 #fff; - -o-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; - -moz-box-shadow: inset 0 1px 0 0 #fff; - } .composeoption { @@ -1429,6 +1291,7 @@ left: 0; right: 260px; bottom: 0; + border-radius: 0 0 0 4px; } #composebodycontainer.buttons { @@ -1442,24 +1305,20 @@ bottom: 0; width: 99%; border: 0; - border-radius: 0; - padding: 8px 0 8px 8px; + border-radius: 0 0 0 4px; + padding: 4px; resize: none; font-family: monospace; font-size: 9pt; outline: none; - box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); - -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); - -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); - -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); + -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); } #composebody:active, #composebody:focus { box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); - -o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); } #compose-attachments { @@ -1486,17 +1345,13 @@ #compose-attachments.droptarget.active { border-color: #019bc6; box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); - -moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); - -o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); } #compose-attachments.droptarget.hover { background-color: #d9ecf4; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); } #composeview-bottom .formbuttons.floating { @@ -1507,16 +1362,13 @@ padding-bottom: 8px; } -.defaultSkin table.mceLayout, -.defaultSkin table.mceLayout tr.mceLast td { +#composebodycontainer .mce-tinymce { border: 0 !important; + margin-top: 1px; } -.defaultSkin td.mceToolbar { - border: 0 !important; -} - -.defaultSkin table.mceLayout tr.mceFirst td { +#composebodycontainer .mce-panel { + border-color: #ccc !important; background: #f0f0f0; } @@ -1532,4 +1384,3 @@ #uploadform form div { margin: 4px 0; } - -- Gitblit v1.9.1