diff options
Diffstat (limited to 'skins/larry/mail.css')
-rw-r--r-- | skins/larry/mail.css | 469 |
1 files changed, 128 insertions, 341 deletions
diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b9f24b8d0..7eb324254 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; @@ -38,6 +38,9 @@ left: 0; right: 0; bottom: 0px; +} + +html.ie #mailview-top { overflow: visible; /* fixes display issues of fixed list header in IE */ } @@ -92,6 +95,7 @@ html>/**/body #messagelist { background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); border-radius: 0 0 4px 4px; + white-space: nowrap; } #messagelistfooter.rightalign { @@ -133,227 +137,32 @@ a.iconbutton.threadmode.selected { 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 { 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.trash.empty > a { - background-position: 6px -1924px; -} - -#mailboxlist li.mailbox.trash.empty.selected > a { - background-position: 6px -1948px; -} - -#mailboxlist li.mailbox.archive > a { - background-position: 6px -1699px; -} - -#mailboxlist li.mailbox.archive.selected > a { - background-position: 6px -1723px; -} - -#mailboxlist li.mailbox ul li.drafts > a { - background-position: 23px -238px; -} - -#mailboxlist li.mailbox ul li.drafts.selected > a { - background-position: 23px -262px; -} - -#mailboxlist li.mailbox ul li.sent > a { - background-position: 23px -286px; -} - -#mailboxlist li.mailbox ul li.sent.selected > a { - background-position: 23px -310px; -} - -#mailboxlist li.mailbox ul li.junk > a { - background-position: 23px -334px; -} - -#mailboxlist li.mailbox ul li.junk.selected > a { - background-position: 23px -358px; -} - -#mailboxlist li.mailbox ul li.trash > a { - background-position: 23px -382px; -} - -#mailboxlist li.mailbox ul li.trash.selected > a { - background-position: 23px -406px; -} - -#mailboxlist li.mailbox ul li.trash.empty > a { - background-position: 23px -1924px; -} - -#mailboxlist li.mailbox ul li.trash.empty.selected > a { - background-position: 23px -1948px; -} - -#mailboxlist li.mailbox ul li.archive > a { - background-position: 23px -1699px; -} - -#mailboxlist li.mailbox ul li.archive.selected > a { - background-position: 23px -1723px; -} - #mailboxlist li.unread { font-weight: bold; } -#mailboxlist li.virtual > a { - color: #aaa; -} - #mailboxlist 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 { 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%); @@ -362,9 +171,7 @@ a.iconbutton.threadmode.selected { 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; @@ -380,9 +187,7 @@ a.iconbutton.threadmode.selected { 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; } #mailboxlist li.mailbox.recent > a .unreadcount { @@ -393,9 +198,7 @@ a.iconbutton.threadmode.selected { background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%); background: linear-gradient(top, #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 { @@ -437,7 +240,7 @@ a.iconbutton.threadmode.selected { #mailpreviewtoggle { display: block; position: absolute; - top: 6px; + top: 7px; right: 4px; width: 20px; height: 18px; @@ -459,66 +262,54 @@ table.messagelist.fixedcopy { z-index: 2; } -.messagelist thead td:first-child { +.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; -} - -.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 { - width: 26px; + padding: 2px 3px !important; } -.messagelist tr td.threads { +.messagelist tr > .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 td.folder { +.messagelist tr > .folder { width: 135px; } -.messagelist tr td.hidden { +.messagelist tr > .hidden { display: none; } @@ -535,19 +326,22 @@ table.messagelist.fixedcopy { /* background-color: #fff; */ } +.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; } @@ -569,39 +363,41 @@ table.messagelist.fixedcopy { 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 > .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; @@ -614,16 +410,16 @@ table.messagelist.fixedcopy { 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 { background-position: -24px -1116px; } -.messagelist thead tr td.priority span.priority { - background-position: -24px -1845px; +.messagelist thead tr th.priority span.priority { + background-position: -25px -1845px; } .messagelist tr td.priority span.prio5 { @@ -646,15 +442,15 @@ table.messagelist.fixedcopy { background-position: 0 -1036px; } -.messagelist thead tr td.flag span.flagged { - background-position: -22px -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; } @@ -688,19 +484,19 @@ table.messagelist.fixedcopy { } */ .messagelist tr td.status span.deleted, -.messagelist tr td.status span.deleted:hover, +.messagelist tr:hover td.status span.deleted, .messagelist tr td.subject span.deleted { - background-position: -22px -1096px; + 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; + background-position: 0 -1017px; } -.messagelist thead tr td.status span.status { +.messagelist thead tr th.status span.status { background-position: -23px -1017px; } @@ -714,13 +510,23 @@ table.messagelist.fixedcopy { 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 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; @@ -763,7 +569,7 @@ table.messagelist.fixedcopy { #messagecontframe { border: 0; - border-radius: 4px 4px 0 0; + border-radius: 4px; } #messagecontent { @@ -812,7 +618,7 @@ h2.subject { 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; @@ -904,6 +710,16 @@ h3.subject { 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; @@ -946,10 +762,8 @@ div.hide-headers { 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 { @@ -1036,7 +850,6 @@ div.hide-headers { } #messageheader .pagenav .countdisplay { - min-width: 0; padding-right: 0.5em; white-space: nowrap; } @@ -1102,16 +915,11 @@ div.message-partheaders { 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 { @@ -1123,8 +931,10 @@ div.message-part blockquote { 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 { @@ -1253,14 +1063,14 @@ div.message-partheaders .headers-table td.header { 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; } @@ -1273,21 +1083,8 @@ div.message-partheaders .headers-table td.header { 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 { @@ -1318,13 +1115,19 @@ div.message-partheaders .headers-table td.header { 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 { color: #376572; text-decoration: none; @@ -1346,6 +1149,7 @@ div.message-partheaders .headers-table td.header { background-position: 6px -766px; } +#compose-contacts li.addressbook a:focus, #compose-contacts li.addressbook.selected a { background-position: 6px -791px; } @@ -1354,7 +1158,6 @@ div.message-partheaders .headers-table td.header { background-position: 6px -1555px; } -#contacts-table tr.unfocused td.contactgroup, #contacts-table tr.selected td.contactgroup { background-position: 6px -1579px; } @@ -1363,7 +1166,6 @@ div.message-partheaders .headers-table td.header { background-position: 6px -1603px; } -#contacts-table tr.unfocused td.contact, #contacts-table tr.selected td.contact { background-position: 6px -1627px; } @@ -1443,8 +1245,6 @@ div.message-partheaders .headers-table td.header { .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 { @@ -1457,9 +1257,7 @@ div.message-partheaders .headers-table td.header { 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 { @@ -1514,17 +1312,13 @@ div.message-partheaders .headers-table td.header { 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); } #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 { @@ -1551,17 +1345,13 @@ div.message-partheaders .headers-table td.header { #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 { @@ -1572,16 +1362,13 @@ div.message-partheaders .headers-table td.header { padding-bottom: 8px; } -.defaultSkin table.mceLayout, -.defaultSkin table.mceLayout tr.mceLast td { - border: 0 !important; -} - -.defaultSkin td.mceToolbar { +#composebodycontainer .mce-tinymce { border: 0 !important; + margin-top: 1px; } -.defaultSkin table.mceLayout tr.mceFirst td { +#composebodycontainer .mce-panel { + border-color: #ccc !important; background: #f0f0f0; } |