From 4b96ed76a96602215bb75208d6b01473ebef09b8 Mon Sep 17 00:00:00 2001 From: alecpl <alec@alec.pl> Date: Mon, 21 Jun 2010 08:04:13 -0400 Subject: [PATCH] - place quota indicator styles in one place --- skins/default/mail.css | 798 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 507 insertions(+), 291 deletions(-) diff --git a/skins/default/mail.css b/skins/default/mail.css index 84d4395..8534e17 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -5,31 +5,149 @@ { position: absolute; top: 47px; - left: 200px; - right: 200px; + 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 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 { + background-position: -288px 0; +} + +#messagetoolbar a.spellcheck { + background-position: -384px 0; +} + +#messagetoolbar a.spellcheckSel { + background-position: -384px -32px; +} + +#messagetoolbar a.attach { + background-position: -352px 0; +} + +#messagetoolbar a.attachSel { + background-position: -352px -32px; +} + +#messagetoolbar a.insertsig { + background-position: -448px 0; +} + +#messagetoolbar a.insertsigSel { + background-position: -448px -32px; +} + +#messagetoolbar a.savedraft { + background-position: -322px 0; +} + +#messagetoolbar a.savedraftSel { + background-position: -322px -32px; +} + +#messagetoolbar a.send { + background-position: -416px 0; +} + +#messagetoolbar a.sendSel { + 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: absolute; - top: 8px; + position: relative; + margin: 0 8px; + top: 6px; } #messagetoolbar select.mboxlist option @@ -42,88 +160,19 @@ padding-left: 2px; } -#markmessagemenu, -#searchmenu, -#messagemenu -{ - 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; -} - #searchmenu { - width: 172px; + width: 160px; } -ul.toolbarmenu +#searchmenu ul.toolbarmenu { margin: 0; - padding: 0; - list-style: none; } -ul.toolbarmenu li +#searchmenu ul.toolbarmenu li { - font-size: 11px; - white-space: nowrap; - min-width: 130px; -} - -ul.toolbarmenu li a -{ - display: block; - color: #a0a0a0; - padding: 2px 8px 3px 22px; - text-decoration: none; - min-height: 14px; -} - -ul.toolbarmenu li a.active, -ul.toolbarmenu li a.active:active, -ul.toolbarmenu li a.active:visited -{ - color: #333; -} - -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; + margin: 1px 4px 1px; } #messagemenu li a.active:hover, @@ -135,55 +184,61 @@ #messagemenu li a { - background: url('images/messageactions.png') no-repeat 1px 0; + 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: 7px -71px; } #markmessagemenu a.readlink { - background: url('images/icons/dot.png') no-repeat 2px; + background: url(images/icons/dot.png) no-repeat 7px 2px; } #markmessagemenu a.unreadlink { - background: url('images/icons/unread.png') no-repeat 2px; + background: url(images/icons/unread.png) no-repeat 7px 2px; } #markmessagemenu a.flaggedlink { - background: url('images/icons/flagged.png') no-repeat 2px; + background: url(images/icons/flagged.png) no-repeat 7px 2px; } #markmessagemenu a.unflaggedlink { - background: url('images/icons/unflagged.png') no-repeat 2px; + background: url(images/icons/unflagged.png) no-repeat 7px 2px; } #searchfilter { + white-space: nowrap; position: absolute; - right: 18px; - top: 8px; - text-align: right; + right: 190px; + vertical-align: middle; } #searchfilter label @@ -191,12 +246,6 @@ font-size: 11px; } -#listcontrols a, -#listcontrols a:active, -#listcontrols a:visited, -#mailboxcontrols a, -#mailboxcontrols a:active, -#mailboxcontrols a:visited, td.formlinks a, td.formlinks a:visited { @@ -205,63 +254,47 @@ text-decoration: none; } -#listcontrols a.active, -#listcontrols a.active:active, -#listcontrols a.active:visited, -#mailboxcontrols a.active, -#mailboxcontrols a.active:active, -#mailboxcontrols a.active:visited, td.formlinks a, td.formlinks a:visited { color: #CC0000; } -#listcontrols a.active:hover, -#mailboxcontrols a.active:hover -{ - text-decoration: underline; -} - -#listcontrols, -#mailboxcontrols -{ - padding-right: 2em; -} - -#messagecountbar -{ - position: absolute; - bottom: 16px; - right: 20px; - width: 300px; - height: 20px; - text-align: right; - white-space: nowrap; -} - -#messagecountbar span -{ - font-size: 11px; - color: #333333; -} - -#mainscreen +#mainscreen { position: absolute; top: 85px; right: 20px; - bottom: 40px; + bottom: 30px; left: 20px; +} + +#mailleftcontainer +{ + position: absolute; + 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: 0; + left: 0; + right: 0; + bottom: 0; } #messagepartcontainer @@ -277,11 +310,11 @@ { position: absolute; width: 100%; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; - overflow: auto; + overflow: hidden; } #mailpreviewframe @@ -340,29 +373,16 @@ /** 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; - width: 160px; - bottom: 0px; + top: 0; + left: 0; + width: 100%; + bottom: 0; border: 1px solid #999; background-color: #F9F9F9; - overflow: auto; + overflow: hidden; } #mailboxlist @@ -375,6 +395,7 @@ list-style-type: none; overflow: hidden; white-space: nowrap; + background-color: #FFF; } #mailboxlist li @@ -382,7 +403,7 @@ 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; } @@ -391,7 +412,7 @@ position: absolute; left: 8px !important; left: -16px; - top: 2px; + top: 1px; width: 14px; height: 16px; } @@ -404,37 +425,37 @@ #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 @@ -484,34 +505,132 @@ border-top: 1px solid #EBEBEB; padding-left: 15px; background-position: 25px 1px; - background-color: #F9F9F9; + background-color: #FFF; color: blue; font-weight: normal; } +#listcontrols +{ + position: relative; + white-space: nowrap; + left: 4px; + height: 22px; + width: auto; + min-width: 300px; +} -#mailfooter +#listcontrols a, +#listcontrols span +{ + display: block; + float: left; + margin-top: 4px; + font-size: 11px; +} + +#listcontrols input +{ + margin-top: 6px; +} + +#listcontrols a.button, +#listcontrols a.buttonPas +{ + display: block; + float: left; + width: 15px; + height: 15px; + padding: 0; + margin-right: 2px; + overflow: hidden; + 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 +{ + opacity: 0.35; +} + +#listcontrols a.all { + background-position: -30px 0; +} + +#listcontrols a.allsel { + 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; +} + +#listcontrols a.unreadsel { + background-position: -45px -15px; +} + +#listcontrols a.invert { + background-position: -60px 0; +} + +#listcontrols a.invertsel { + background-position: -60px -15px; +} + +#listcontrols a.none { + background-position: -75px 0; +} + +#listcontrols a.nonesel { + 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 { position: absolute; - left: 20px; - right: 20px; - bottom: 18px; - height: 20px; -} - -#mailfooter table tr td -{ - white-space: nowrap; - vertical-align: bottom; -} - -#mailboxcontrols, -#listcontrols, -#countcontrols, -#quotabox -{ + top: 4px; + right: 4px; + min-width: 25em; white-space: nowrap; font-size: 11px; +} + +#countcontrols a.button, +#countcontrols a.buttonPas +{ + float: right; } @@ -533,14 +652,11 @@ #messagelist thead tr td { height: 20px; - padding-top: 0px; - padding-bottom: 0px; - padding-left: 2px; - padding-right: 4px; + 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; } @@ -548,17 +664,17 @@ #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 @@ -570,15 +686,26 @@ 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; border-bottom: 1px solid #EBEBEB; cursor: default; } @@ -591,24 +718,44 @@ cursor: inherit; } -#messagelist tbody tr td.subject a -{ - cursor: default; -} - -#messagelist col -{ - display: table-column; - text-align: left; - vertical-align: middle; -} - #messagelist tr td.icon, +#messagelist tr td.threads, +#messagelist tr td.attachment, #messagelist tr td.flag { - width: 16px; + width: 18px; + padding: 0px 1px 1px 3px; +} + +#messagelist tbody td span.branch, +#messagelist tbody td img +{ vertical-align: middle; + display: inline-block; +} + +#messagelist tbody td img.msgicon +{ + margin: 0 2px; +} + +#messagelist tr td div.collapsed, +#messagelist tr td div.expanded, +#messagelist tr td img.flagicon, +#messagelist tr td img.msgicon, +#messagelist tbody tr td.flag +{ cursor: pointer; +} + +#messagelist tr td div.collapsed +{ + background: url(images/messageactions.png) -1px -91px no-repeat; +} + +#messagelist tr td div.expanded +{ + background: url(images/messageactions.png) -1px -109px no-repeat; } #messagelist tbody tr td.flag img:hover, @@ -617,40 +764,47 @@ background: url(images/icons/unflagged.png) center no-repeat; } -#messagelist tr td.subject +#messagelist tbody tr td.subject { - overflow: hidden; - vertical-align: middle; + width: 99%; +} + +#messagelist tbody tr td.subject a +{ + cursor: default; +} + +/* thread parent message with unread children */ +#messagelist tbody tr.unroot td.subject a +{ + text-decoration: underline; } #messagelist tr td.size { - width: 70px; + width: 60px; text-align: right; - vertical-align: middle; -} - -#messagelist thead tr td.size -{ - text-align: left; + 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; } /* @@ -700,25 +854,36 @@ color: #CCCCCC; } -/* safari hacks \*/ -html>body*#messagelist[id$="messagelist"]:not([class="none"]) { width: 99.8%; } -html>body*#messagelist[id$="messagelist"]:not([class="none"]) tr td.flag, -html>body*#messagelist[id$="messagelist"]:not([class="none"]) tr td.icon { width: 20px; } -html>body*input[type$="file"]:not([class="none"]) { background-color: transparent; border: 0; } -/**/ +/***** tree indicators *****/ -#quotadisplay +td span.branch div { - color: #666666; - font-size: 11px; + float: left; + height: 16px; } -#quotadisplay img +td span.branch div.tree { - vertical-align: middle; - margin-left: 4px; - border: 1px solid #999; + 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 */ @@ -726,25 +891,14 @@ #messageframe { position: absolute; - top: 0px; - left: 170px; - right: 0px; - bottom: 0px; + top: 0; + left: 180px; + right: 0; + bottom: 0; border: 1px solid #999; background-color: #FFF; overflow: auto; -} - -#printmessageframe -{ - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - border: 1px solid #999; - background-color: #FFF; - overflow: auto; + z-index: 1; } div.messageheaderbox @@ -801,8 +955,17 @@ color: #666666; text-align: left; padding-right: 10px; - vertical-align: center; 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 @@ -851,7 +1014,8 @@ background-color: #FFFFFF; } -div.message-part +div.message-part, +div.message-htmlpart { padding: 10px 8px; border-top: 1px solid #ccc; @@ -877,10 +1041,13 @@ padding: 0px; font-family: monospace; white-space: -moz-pre-wrap !important; - white-space: -o-pre-wrap !important; white-space: pre-wrap !important; white-space: pre; - word-wrap: break-word; /* IE (and Safari) */ +} + +div.message-part span.sig +{ + color: #666666; } div.message-part blockquote @@ -953,18 +1120,11 @@ white-space: nowrap; } -#priority-selector, -#receipt-selector -{ - padding-left: 30px; - white-space: nowrap; -} - #compose-container { position: absolute; top: 90px; - left: 190px; + left: 205px; right: 25px; bottom: 30px; margin: 0px; @@ -974,11 +1134,6 @@ { text-align: right; padding-top: 3px; -} - -#editor-select -{ - float: left; } #compose-div @@ -1005,7 +1160,7 @@ #compose-subject td.title { width: 80px !important; - color: #666666; + color: #666; font-size: 11px; font-weight: bold; padding-right: 10px; @@ -1036,7 +1191,7 @@ min-height: 100px; height: 100%; font-size: 9pt; - font-family: "Courier New", Courier, monospace; + font-family: monospace; } #compose-attachments @@ -1044,7 +1199,7 @@ position: absolute; top: 100px; left: 20px; - width: 160px; + width: 175px; } #compose-attachments ul @@ -1077,20 +1232,17 @@ #attachment-title { + color: #666666; + font-weight: bold; + font-size: 11px; background: url(images/icons/attachment.png) top left no-repeat; - padding: 0px 0px 3px 22px; + 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 @@ -1103,18 +1255,24 @@ margin-top: 4px; } -table.headers-table tr td.more-headers +#editor-select { - cursor: pointer; - width: 100%; - height: 8px; - border-bottom: 0; + float: left; + white-space: nowrap; + width: auto; } -table.headers-table tr td.all +#editor-select label { - padding: 2px 6px 4px 6px; - border-bottom: 0; + color: #666; + font-size: 11px; + font-weight: bold; + padding-left: 20px; +} + +#editor-select input +{ + width: auto !important; } td.show-headers @@ -1152,3 +1310,61 @@ { font-weight: bold; } + +#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; + clear: both; +} + +/** quota indicator */ + +#quota +{ + position: absolute; + top: 3px; + right: 8px; + width: 100px; +} + +#quotaimg +{ + position: absolute; + top: 3px; + right: 6px; + z-index: 101; +} + +.quota_text { + text-align: center; + font-size: 10px; + color: #666; + border: 1px solid #999; + cursor: default; +} +.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; } + -- Gitblit v1.9.1