From 651da7934ed4c13e2cbc2e4a82caf2ebaba87373 Mon Sep 17 00:00:00 2001 From: alecpl <alec@alec.pl> Date: Sat, 14 Apr 2012 02:28:10 -0400 Subject: [PATCH] - Fix folder collapsing/expanding broken with framework merge (#1488430) --- skins/larry/styles.css | 1100 +++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 981 insertions(+), 119 deletions(-) diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 0aeb2fa..4868ed9 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1,7 +1,7 @@ /** * Roundcube webmail styles for skin "Larry" * - * Copyright (c) 2011, The Roundcube Dev Team + * Copyright (c) 2012, The Roundcube Dev Team * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com * * The contents are subject to the Creative Commons Attribution-ShareAlike @@ -14,10 +14,15 @@ body { font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - font-size: 12px; + font-size: 11px; color: #333; background: url(images/linen.jpg) repeat #d1d5d8; margin: 0; +} + +body.noscroll { + /* also avoids bounce effect in Chrome and Safari */ + overflow: hidden; } a { @@ -35,6 +40,7 @@ input[type="text"], input[type="password"], textarea { + margin: 0; /* Safari by default adds a margin */ padding: 4px; border: 1px solid #b2b2b2; border-radius: 4px; @@ -53,6 +59,7 @@ -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); + outline: none; } input.placeholder, @@ -60,15 +67,18 @@ color: #aaa; } +.bold { + font-weight: bold; +} /*** buttons ***/ input.button { display: inline-block; margin: 0 2px; - padding: 4px 6px; + padding: 2px 5px; color: #525252; - text-shadow: 1px 1px 1px #fff; + text-shadow: 0px 1px 1px #fff; border: 1px solid #c0c0c0; border-radius: 4px; background: #f7f7f7; @@ -77,64 +87,78 @@ background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); - box-shadow: 0 1px 1px 0 #ccc; - -o-box-shadow: 0 1px 1px 0 #ccc; - -webkit-box-shadow: 0 1px 1px 0 #ccc; - -moz-box-shadow: 0 1px 1px 0 #ccc; + box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); text-decoration: none; + outline: none; } .formbuttons input.button { color: #ddd; font-size: 110%; - text-shadow: 1px 1px 1px #333; + text-shadow: 0px 1px 1px #333; padding: 4px 12px; border-color: #465864; border-radius: 5px; background: #7a7b7d; - background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(123,123,123,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */ - background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */ + background: -moz-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#606060)); /* Chrome,Safari4+ */ + background: -o-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */ + background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */ + box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; + -o-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; + -webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; + -moz-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; } -.formbuttons input.button:hover { +.formbuttons input.button:hover, +.formbuttons input.button:focus, +input.button.mainaction:hover, +input.button.mainaction:focus { color: #f2f2f2; - box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); - -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); - -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); - -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); + border-color: #465864; + box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; + -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; + -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; + -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888; } .formbuttons input.button:active { color: #fff; - background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1))); - background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); - background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); - background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); + background: -moz-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#7b7b7b)); + background: -o-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%); + background: -ms-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%); + background: linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%); } input.button.mainaction { color: #ededed; + text-shadow: 0px 1px 1px #333; border-color: #1f262c; background: #505050; - background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(42,46,49,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1))); - background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); - background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); - background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); + background: -moz-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31)); + background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: linear-gradient(top, #505050 0%, #2a2e31 100%); + box-shadow: inset 0 1px 0 0 #777; + -moz-box-shadow: inset 0 1px 0 0 #777; + -webkit-box-shadow: inset 0 1px 0 0 #777; + -o-box-shadow: inset 0 1px 0 0 #777; } input.button.mainaction:active { color: #fff; - background: rgba(42,46,49,1); - background: -moz-linear-gradient(top, rgba(42,46,49,1) 0%, rgba(80,80,80,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,46,49,1)), color-stop(100%,rgba(80,80,80,1))); - background: -o-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); - background: -ms-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); - background: linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); + background: #515151; + background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050)); + background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: linear-gradient(top, #2a2e31 0%, #505050 100%); } input.button[disabled], @@ -154,7 +178,7 @@ margin: 0 2px; padding: 2px 5px; color: #525252; - text-shadow: 1px 1px 1px #fff; + text-shadow: 0px 1px 1px #fff; border: 1px solid #c6c6c6; border-radius: 4px; background: #f7f7f7; @@ -163,19 +187,44 @@ background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); - box-shadow: 0 1px 1px 0 #ccc; - -o-box-shadow: 0 1px 1px 0 #ccc; - -webkit-box-shadow: 0 1px 1px 0 #ccc; - -moz-box-shadow: 0 1px 1px 0 #ccc; + box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); text-decoration: none; } +a.button:focus, +input.button:focus { + border-color: #4fadd5; + box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + outline: none; +} + +label.disabled, a.button.disabled { color: #999; } +a.button.disabled, +input.button.disabled, +input.button[disabled], +a.button.disabled:hover, +input.button.disabled:hover, +input.button[disabled]:hover { + border-color: #c6c6c6; + box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); + -o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); + -webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); + -moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4); +} + a.button.disabled span.inner { opacity: 0.4; + filter: alpha(opacity=40); } a.button.pressed, @@ -192,7 +241,7 @@ .pagenav.dark a.button { font-weight: bold; border-color: #e6e6e6; - background: #f7f7f7; + background: #d8d8d8; background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa)); background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%); @@ -215,6 +264,8 @@ .pagenav a.button { padding: 1px 3px; + height: 16px; + vertical-align: middle; } .pagenav a.button span.inner { @@ -239,14 +290,22 @@ } .pagenav a.pageup span.inner { - background-position: -7px -256px; + background-position: -7px -241px; } .pagenav a.pagedown span.inner { + background-position: -29px -241px; +} + +.pagenav a.reply span.inner { + background-position: -7px -256px; +} + +.pagenav a.forward span.inner { background-position: -29px -256px; } -.pagenav a.viewsource span.inner { +.pagenav a.replyall span.inner { background-position: -7px -271px; } @@ -256,10 +315,14 @@ .pagenav .countdisplay { display: inline-block; - padding:0 0.5em; - font-size: 11px; - text-shadow: 1px 1px 1px #fff; - min-width: 20em; + padding:0 1em; + text-shadow: 0px 1px 1px #fff; + min-width: 16em; +} + +.pagenavbuttons { + position: relative; + top: -2px; } a.iconbutton { @@ -273,15 +336,57 @@ a.iconbutton.disabled { opacity: 0.4; + filter: alpha(opacity=40); cursor: default; } a.iconbutton.searchoptions { - background-position: -2px -337px; + background-position: -2px -317px; } a.iconbutton.reset { - background-position: -25px -337px; + background-position: -25px -317px; +} + +a.iconbutton.cancel { + background-position: -7px -377px; +} + +a.iconlink { + display: inline-block; + color: #888; + text-decoration: none; + white-space: nowrap; + padding: 2px 8px 2px 20px; + background: url(images/buttons.png) -1000px 0 no-repeat; +} + +a.iconlink:hover { + text-decoration: underline; +} + +a.iconlink.delete { + background-position: -7px -337px; +} + +a.iconlink.add { + background-position: -7px -357px; +} + +a.iconlink.remove { + background-position: -7px -378px; +} + +a.iconlink.cancel { + background-position: -7px -397px; +} + +a.iconlink.edit { + background-position: -7px -417px; +} + +a.iconlink.upload { + background-position: -6px -437px; } @@ -304,7 +409,7 @@ #message div.warning { color: #960; - background-position: 0 -25px; + background-position: 0 -86px; } #message div.error { @@ -314,11 +419,22 @@ #message div.confirmation { color: #093; - background-position: 0 -86px; + background-position: 0 -25px; } #message div.loading { background: url(images/ajaxloader.gif) 2px 6px no-repeat; +} + +#message div a, +#message div span { + padding-right: 0.5em; + text-decoration: none; +} + +#message div a:hover { + text-decoration: underline; + cursor: pointer; } #message.statusbar { @@ -341,6 +457,49 @@ text-overflow: ellipsis; } +.ui-dialog.error .ui-dialog-title, +.ui-dialog.warning .ui-dialog-title, +.ui-dialog.confirmation .ui-dialog-title { + padding-left: 25px; + background: url(images/messages.png) 0 5px no-repeat; + text-shadow: 0 1px 1px #fff; +} + +.ui-dialog.warning .ui-dialog-title { + color: #960; + background-position: 0 -90px; +} + +.ui-dialog.error .ui-dialog-title { + color: #cf2734; + background-position: 0 -60px; +} + +.ui-dialog.confirmation .ui-dialog-title { + color: #093; + background-position: 0 -30px; +} + +.ui-dialog.popupmessage .ui-dialog-titlebar { + padding: 8px 1em 4px 1em; + background: #e3e3e3; + background: -moz-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#cfcfcf)); + background: -o-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%); + background: -ms-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%); + background: linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%); +} + +.ui-dialog.popupmessage .ui-widget-content { + font-size: 12px; + background: #eee; + background: -moz-linear-gradient(top, #eee 0%, #dcdcdc 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dcdcdc)); + background: -o-linear-gradient(top, #eee 0%, #dcdcdc 100%); + background: -ms-linear-gradient(top, #eee 0%, #dcdcdc 100%); + background: linear-gradient(top, #eee 0%, #dcdcdc 100%); +} + /*** basic page layout ***/ @@ -349,7 +508,6 @@ background: url(images/linen_header.jpg) repeat #666; border-bottom: 1px solid #4f4f4f; padding: 2px 0 2px 10px; - font-size: 11px; color: #aaa; } @@ -357,12 +515,12 @@ height: 46px; margin-bottom: 10px; padding: 0 0 0 10px; - background: #3a3a3a; - background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(6,6,6,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(6,6,6,1))); - background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); - background: -ms-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); - background: linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); + background: #111; + background: -moz-linear-gradient(top, #404040 0%, #060606 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#060606)); + background: -o-linear-gradient(top, #404040 0%, #060606 100%); + background: -ms-linear-gradient(top, #404040 0%, #060606 100%); + background: linear-gradient(top, #404040 0%, #060606 100%); } #topline a, @@ -371,8 +529,7 @@ text-decoration: none; } -#topline a:hover, -#topnav a:hover { +#topline a:hover { text-decoration: underline; } @@ -423,7 +580,7 @@ display: inline-block; font-size: 110%; font-weight: normal; - text-shadow: 1px 1px 1px black; + text-shadow: 0px 1px 1px black; padding: 5px 0 0 34px; height: 19px; background: url(images/buttons.png) -1000px 0 no-repeat; @@ -482,6 +639,10 @@ top: 130px; } +#mainscreen .offset { + margin-top: 42px; +} + .uibox { border: 1px solid #a3a3a3; border-radius: 4px; @@ -499,6 +660,7 @@ .readtext { width: 42em; padding: 12px; + font-size: 12px; } .readtext > h1, @@ -541,11 +703,17 @@ .uibox .listing thead td { font-size: 12px; font-weight: bold; - padding: 10px 8px 8px 8px; + padding: 10px 8px 3px 8px; + height: 20px; /* doesn't affect table-cells in FF */ margin: 0; - text-shadow: 1px 1px 1px #fff; + text-shadow: 0px 1px 1px #fff; border-bottom: 1px solid #bbd3da; white-space: nowrap; +} + +.uibox .listing thead td { + padding-bottom: 8px; + height: auto; } .uibox .boxtitle, @@ -560,7 +728,6 @@ .listing tbody td, .listing li { display: block; - font-size: 11px; border-top: 1px solid #fff; border-bottom: 1px solid #bbd3da; cursor: default; @@ -573,21 +740,33 @@ .listing li a { display: block; color: #376572; - text-shadow: 1px 1px 1px #fff; + text-shadow: 0px 1px 1px #fff; text-decoration: none; cursor: default; - padding: 7px 8px 5px 8px; + padding: 6px 8px 2px 8px; + height: 17px; /* doesn't affect table-cells in FF */ white-space: nowrap; } .listing tbody td { display: table-cell; + padding-bottom: 5px; + height: auto; + min-height: 14px; +} + +.webkit .listing tbody td { + height: 14px; } .listbox .listitem.selected, .listbox .tablink.selected, +.listbox .listitem.selected > a, +.listbox .tablink.selected > a, +.listing tbody tr.unfocused td, .listing tbody tr.selected td, -.listing li.selected { +.listing li.selected, +.listing li.selected > a { color: #004458; font-weight: bold; } @@ -608,9 +787,15 @@ background-color: #c7e3ef; } -table.listing { +table.listing, +table.layout { + border: 0; width: 100%; border-spacing: 0; +} + +table.layout td { + vertical-align: top; } .listbox .boxfooter { @@ -624,6 +809,8 @@ -webkit-box-shadow: inset 0 1px 0 0 #fff; -moz-box-shadow: inset 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #fff; + white-space: nowrap; + overflow: hidden; } .boxfooter .listbutton { @@ -645,16 +832,89 @@ } .boxfooter .listbutton.add .inner { - background-position: 10px -1210px; + background-position: 10px -1301px; +} + +.boxfooter .listbutton.delete .inner { + background-position: 10px -1342px; } .boxfooter .listbutton.groupactions .inner { - background-position: 5px -1292px; + background-position: 5px -1382px; +} + +.boxfooter .listbutton.addto .inner { + background-position: 5px -1422px; +} + +.boxfooter .listbutton.addcc .inner { + background-position: 5px -1462px; +} + +.boxfooter .listbutton.addbcc { + width: 54px; +} + +.boxfooter .listbutton.addbcc .inner { + width: 54px; + background-position: 2px -1502px; +} + +.boxfooter .listbutton.removegroup .inner { + background-position: 5px -1540px; +} + +.boxfooter .listbutton.disabled .inner { + opacity: 0.4; + filter: alpha(opacity=40); +} + +.boxfooter .countdisplay { + display: inline-block; + position: relative; + top: 10px; + color: #69929e; + padding: 3px 6px; +} + +.boxpagenav { + position: absolute; + top: 10px; + right: 6px; + width: auto; +} + +.boxpagenav a.icon { + display: inline-block; + padding: 1px 3px; + height: 13px; + width: 14px; + text-indent: 1000px; + vertical-align: bottom; + overflow: hidden; + background: url(images/buttons.png) -4px -286px no-repeat; +} + +.boxpagenav a.icon.prevpage { + background-position: -4px -301px; +} + +.boxpagenav a.icon.nextpage { + background-position: -28px -301px; +} + +.boxpagenav a.icon.lastpage { + background-position: -28px -286px; +} + +.boxpagenav a.icon.disabled { + opacity: 0.4; + filter: alpha(opacity=40); } .centerbox { width: 40em; - margin: 36px auto; + margin: 16px auto; } .errorbox { @@ -668,11 +928,114 @@ } +/*** Records table ***/ + +table.records-table { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: collapse; + border-spacing: 0; + border: 1px solid #bbd3da; +} + +.boxlistcontent .records-table { + border: 0; +} + +.records-table thead td { + color: #69939e; + font-size: 11px; + font-weight: bold; + background: #d6eaf3; + background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(8%,#d6eaf3), color-stop(100%,#d6eaf3)); + background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%); + background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%); + background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%); + border-left: 1px solid #bbd3da; + padding: 8px 7px; + overflow: hidden; + text-overflow: ellipsis; +} + +.records-table.sortheader thead td { + padding: 0; +} + +.records-table thead td a, +.records-table thead td span { + display: block; + padding: 7px 7px; + color: #69939e; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; +} + +.records-table tbody td { + padding: 2px 7px; + border-bottom: 1px solid #ddd; + border-left: 1px dotted #bbd3da; + white-space: nowrap; + cursor: default; + overflow: hidden; + text-overflow: ellipsis; + background-color: #fff; +} + +.records-table thead tr td:first-child, +.records-table tbody tr td:first-child { + border-left: 0; +} + +.records-table tr.selected td { + color: #fff !important; + background: #019bc6; + background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4)); + background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: linear-gradient(top, #019bc6 0%, #017cb4 100%); +} + +.records-table tr.selected td a, +.records-table tr.selected td span { + color: #fff !important; +} + +.records-table tr.unfocused td { + color: #fff !important; + background: #4db0d2; +} + +.records-table tr.unfocused td a, +.records-table tr.unfocused td span { + color: #fff !important; +} + +.records-table tr.deleted td, +.records-table tr.deleted td a { + color: #ccc !important; +} + + /*** iFrames ***/ + +#aboutframe { + width: 97%; + height: 100%; + border: 0; + padding: 0; +} body.iframe { background: #fff; - margin: 38px 0 20px 0; + margin: 38px 0 10px 0; +} + +body.iframe.footerbuttons { + margin-bottom: 42px; } body.iframe.fullheight { @@ -696,6 +1059,17 @@ top: 0; left: 0; width: 100%; + z-index: 100; +} + +body.iframe .footerbuttons { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + z-index: 110; + background: #fff; + padding: 8px; } .boxcontent { @@ -734,12 +1108,19 @@ font-size: 12px; } +fieldset.floating { + float: left; + margin-right: 10px; + margin-bottom: 10px; +} + table.propform { width: 100%; border-spacing: 0; border-collapse: collapse; } +ul.proplist li, table.propform td { width: 80%; padding: 4px 10px; @@ -757,6 +1138,24 @@ table.propform .mceLayout td { padding: 0; border-bottom: 0; +} + +ul.proplist { + list-style: none; + margin: 0; + padding: 0; +} + +ul.proplist li { + width: auto; +} + +#pluginbody { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } @@ -788,39 +1187,58 @@ } #login-form td.input { + width: 80%; padding: 8px; } #login-form input[type="text"], #login-form input[type="password"] { - width: 24em; + width: 100%; border-color: #666; } #login-form input.button { color: #444; - text-shadow: 1px 1px 1px #fff; + text-shadow: 0px 1px 1px #fff; border-color: #f9f9f9; background: #f9f9f9; - background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(226,226,226,1))); - background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); - background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); - background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); + background: -moz-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e2e2e2)); + background: -o-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: -ms-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + background: linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%); + box-shadow: inset 0 1px 0 0 #fff; + -moz-box-shadow: inset 0 1px 0 0 #fff; + -webkit-box-shadow: inset 0 1px 0 0 #fff; + -o-box-shadow: inset 0 1px 0 0 #fff; +} + +#login-form input.button:hover, +#login-form input.button:focus { + box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; + -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; + -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; + -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff; } #login-form input.button:active { color: #333; - background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(249,249,249,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(249,249,249,1))); - background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); - background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); - background: linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); + background: -moz-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#f9f9f9)); + background: -o-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: -ms-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); + background: linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%); +} + +#login-form form table { + width: 98%; } #login-form td.title { + width: 20%; + white-space: nowrap; color: #cecece; - text-shadow: 1px 1px 1px black; + text-shadow: 0px 1px 1px black; text-align: right; padding-right: 1em; } @@ -837,12 +1255,12 @@ #login-form #message { min-height: 40px; padding: 5px 25px; + text-align: center; } #login-form #message div { - display: block; - width: 200px; - margin: 0 auto; + display: inline-block; + padding-right: 0; } #bottomline { @@ -889,11 +1307,12 @@ color: #555; min-width: 50px; max-width: 75px; + height: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - padding: 28px 2px 2px 2px; - text-shadow: 1px 1px 1px #eee; + padding: 28px 2px 0 2px; + text-shadow: 0px 1px 1px #eee; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; @@ -903,7 +1322,8 @@ } .toolbar a.button.disabled { - opacity: 0.5; + opacity: 0.4; + filter: alpha(opacity=40); } .dropbutton { @@ -914,24 +1334,40 @@ .dropbutton .dropbuttontip { display: block; position: absolute; - right: 2px; + right: 0; top: 0; height: 42px; width: 18px; - background: url(images/buttons.png) -24px -1129px no-repeat; + background: url(images/buttons.png) 0 -1255px no-repeat; cursor: pointer; } .dropbutton .dropbuttontip:hover { - background-position: 0 -1129px; + background-position: -26px -1255px; +} + +.dropbutton a.button.disabled + .dropbuttontip { + opacity: 0.5; + filter: alpha(opacity=50); +} + +.dropbutton a.button.disabled + .dropbuttontip:hover { + background-position: 0 -1255px; +} + +.dropbutton a.button { + margin-left: 0; + padding-left: 0; + margin-right: 0; + padding-right: 0; } .toolbar a.button.back { - background-position: 0 -1170px; + background-position: 0 -1216px; } .toolbar a.button.checkmail { - background-position: center -490px; + background-position: center -1176px; } .toolbar a.button.compose { @@ -943,11 +1379,13 @@ } .toolbar a.button.reply-all { - background-position: center -610px; + min-width: 64px; + background-position: left -610px; } .toolbar a.button.forward { - background-position: center -650px; + min-width: 64px; + background-position: left -650px; } .toolbar a.button.delete { @@ -966,14 +1404,126 @@ background-position: center -810px; } -.toolbar a.button.markmessage, +.toolbar a.button.markmessage { + background-position: center -1094px; +} + .toolbar a.button.more { background-position: center -850px; } +.toolbar a.button.attach { + background-position: center -890px; +} + +.toolbar a.button.spellcheck { + min-width: 64px; + background-position: left -930px; +} + +.toolbar a.button.spellcheck.selected { + background-position: left -1610px; + color: #1978a1; +} + +.toolbar a.button.insertsig { + background-position: center -1135px; +} + +.toolbar a.button.search { + background-position: center -970px; +} + +.toolbar a.button.import { + background-position: center -1012px; +} + +.toolbar a.button.export { + background-position: center -1054px; +} + +a.menuselector { + display: inline-block; + border: 1px solid #ababab; + border-radius: 4px; + background: #f8f8f8; + background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); + background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); + background: -ms-linear-gradient(top, #f9f9f9 0%, #dddddd 100%); + background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%); + text-decoration: none; + color: #333; +} + +a.menuselector .handle { + display: inline-block; + padding: 3px 32px 0 8px; + min-height: 18px; + text-shadow: 0px 1px 1px #fff; + background: url(images/selector.png) right center no-repeat; + border-radius: 4px; +} + +a.menuselector:active { + background: #dddddd; + background: -moz-linear-gradient(top, #dddddd 0%, #f8f8f8 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f8f8f8)); + background: -o-linear-gradient(top, #dddddd 0%, #f8f8f8 100%); + background: -ms-linear-gradient(top, #dddddd 0%, #f8f8f8 100%); + background: linear-gradient(top, #dddddd 0%, #f8f8f8 100%); + text-decoration: none; +} + +a.dropdownselector { + position: absolute; + z-index: 1; +} + +select.decorated { + position: relative; + z-index: 10; + opacity: 0; + height: 22px; + cursor: pointer; + filter: alpha(opacity=0); + -khtml-appearance: none; + -webkit-appearance: none; +} + +html.opera select.decorated { + opacity: 1; + height: auto; +} + +select.decorated option { + color: #fff; + background: #444; + border: 0; + border-top: 1px solid #5a5a5a; + border-bottom: 1px solid #333; + text-shadow: 0px 1px 1px #333; + padding: 6px 10px; + outline: none; +} + + +/*** quota indicator ***/ + +#quotadisplay { + left: 6px; + font-size: 12px; + font-weight: bold; + text-shadow: 0px 1px 1px #fff; + padding-left: 30px; + height: 18px; + background: url(images/quota.png) -100px 0 no-repeat; +} + /*** popup menus ***/ -.popupmenu { +.popupmenu, +#rcmKSearchpane { display: none; position: absolute; top: 32px; @@ -989,15 +1539,22 @@ -o-box-shadow: 0 2px 6px 0 #333; } -ul.toolbarmenu { +.popupmenu.dropdown { + border-radius: 0 0 4px 4px; + border-top: 0; +} + +ul.toolbarmenu, +#rcmKSearchpane ul { margin: 0; padding: 0; list-style: none; } -ul.toolbarmenu li { +.googie_list td, +ul.toolbarmenu li, +#rcmKSearchpane ul li { color: #fff; - font-size: 11px; white-space: nowrap; min-width: 130px; margin: 0; @@ -1005,28 +1562,43 @@ border-bottom: 1px solid #333; } -ul.toolbarmenu li:first-child { +.googie_list tr:first-child td, +ul.toolbarmenu li:first-child, +select.decorated option:first-child { border-top: 0; } -ul.toolbarmenu li:last-child { +.googie_list tr:last-child td, +ul.toolbarmenu li:last-child, +select.decorated option:last-child { border-bottom: 0; } +.googie_list td span, ul.toolbarmenu li a { display: block; color: #666; - text-shadow: 1px 1px 1px #333; + text-shadow: 0px 1px 1px #333; text-decoration: none; min-height: 14px; padding: 6px 10px 6px 10px; } -ul.toolbarmenu li a.active { - color: #fff; +.googie_list td span { + padding: 3px 10px; } -ul.toolbarmenu li a.active:hover { +.googie_list td span, +ul.toolbarmenu li a.active { + color: #fff; + cursor: default; +} + +.googie_list td.googie_list_onhover, +ul.toolbarmenu li a.active:hover, +#rcmKSearchpane ul li.selected, +select.decorated option:hover, +select.decorated option[selected='selected'] { background-color: #00aad6; background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9)); @@ -1035,15 +1607,132 @@ background: linear-gradient(top, #00aad6 0%, #008fc9 100%); } -ul.toolbarmenu.iconized li a { - padding-left: 28px; +ul.toolbarmenu.iconized li a, +ul.toolbarmenu.selectable li a { + padding-left: 30px; +} + +ul.toolbarmenu.selectable li a.selected { + background: url(images/messages.png) 4px -27px no-repeat; } ul.toolbarmenu li label { display: block; color: #fff; padding: 4px 8px; - text-shadow: 1px 1px 1px #333; + text-shadow: 0px 1px 1px #333; +} + +ul.toolbarmenu li a.icon { + color: #eee; + padding: 2px 6px; +} + +ul.toolbarmenu li span.icon { + display: block; + min-height: 14px; + padding: 4px 4px 1px 24px; + height: 17px; + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; + opacity: 0.2; + filter: alpha(opacity=20); +} + +ul.toolbarmenu li a.active span.icon { + opacity: 0.99; + filter: alpha(opacity=100); +} + +ul.toolbarmenu li span.read { + background-position: 0 -1220px; +} + +ul.toolbarmenu li span.unread { + background-position: 0 -1196px; +} + +ul.toolbarmenu li span.flagged { + background-position: 0 -1244px; +} + +ul.toolbarmenu li span.unflagged { + background-position: 0 -1268px; +} + +ul.toolbarmenu li span.mail { + background-position: 0 -1293px; +} + +ul.toolbarmenu li span.list { + background-position: 0 -1317px; +} + +ul.toolbarmenu li span.invert { + background-position: 0 -1340px; +} + +ul.toolbarmenu li span.cross { + background-position: 0 -1365px; +} + +ul.toolbarmenu li span.print { + background-position: 0 -1436px; +} + +ul.toolbarmenu li span.download { + background-position: 0 -1412px; +} + +ul.toolbarmenu li span.edit { + background-position: 0 -1388px; +} + +ul.toolbarmenu li span.viewsource { + background-position: 0 -1460px; +} + +ul.toolbarmenu li span.extwin { + background-position: 0 -1484px; +} + +ul.toolbarmenu li span.conversation { + background-position: 0 -1532px; +} + +#rcmKSearchpane { + border-radius: 0 0 4px 4px; + border-top: 0; +} + +#rcmKSearchpane ul li { + text-shadow: 0px 1px 1px #333; + text-decoration: none; + min-height: 14px; + padding: 6px 10px 6px 10px; + border: 0; + cursor: default; +} + +.popupdialog { + display: none; + padding: 10px; +} + +.popupdialog .formbuttons { + margin: 20px 0 4px 0; +} + +.ui-dialog .prompt input { + display: block; + margin: 8px 0; +} + +.hint { + margin: 4px 0; + color: #999; + text-shadow: 0px 1px 1px #fff; } .splitter { @@ -1084,10 +1773,10 @@ -o-box-shadow: 0 2px 6px 0 #333; z-index: 250; color: #ccc; - font-size: 11px; white-space: nowrap; opacity: 0.92; - text-shadow: 1px 1px 1px #333; + filter: alpha(opacity=92); + text-shadow: 0px 1px 1px #333; } #rcmdraglayer:after { @@ -1101,15 +1790,188 @@ /* reduce the damage in FF3.0 */ display: block; width: 0; + z-index: 251; } -._draglayercopy:before { +.draglayercopy:before { position: absolute; - bottom: -5px; + bottom: -6px; left: -6px; content: " "; - width: 15px; - height: 15px; - background: url(images/buttons.png) -8px -360px no-repeat; + width: 16px; + height: 16px; + background: url(images/buttons.png) -7px -358px no-repeat; + z-index: 255; } + +/*** attachment list ***/ + +.attachmentslist { + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.attachmentslist li { + display: block; + position: relative; + background: url(images/filetypes.png) 0 0 no-repeat; + margin-bottom: 1px; +} + +.attachmentslist li.pdf { + background-position: 0 -26px; +} + +.attachmentslist li.doc, +.attachmentslist li.docx, +.attachmentslist li.msword { + background-position: 0 -52px; +} + +.attachmentslist li.odt { + background-position: 0 -78px; +} + +.attachmentslist li.xls, +.attachmentslist li.xlsx, +.attachmentslist li.msexcel { + background-position: 0 -104px; +} + +.attachmentslist li.ods { + background-position: 0 -130px; +} + +.attachmentslist li.zip, +.attachmentslist li.gz { + background-position: 0 -156px; +} + +.attachmentslist li.rar { + background-position: 0 -182px; +} + +.attachmentslist li.image { + background-position: 0 -208px; +} + +.attachmentslist li.jpg, +.attachmentslist li.jpeg { + background-position: 0 -234px; +} + +.attachmentslist li.png { + background-position: 0 -260px; +} + +.attachmentslist li.m4p { + background-position: 0 -286px; +} + +.attachmentslist li.mp3, +.attachmentslist li.audio { + background-position: 0 -312px; +} + +.attachmentslist li.video { + background-position: 0 -338px; +} + +.attachmentslist li.ics, +.attachmentslist li.calendar { + background-position: 0 -364px; +} + +.attachmentslist li a, +#compose-attachments ul li { + display: block; + color: #333; + font-weight: bold; + padding: 8px 4px 3px 30px; + text-shadow: 0px 1px 1px #fff; + text-decoration: none; + white-space: nowrap; +} + +.attachmentslist li a:hover { + text-decoration: underline; +} + +.attachmentslist li.uploading { + background: url(images/ajaxloader.gif) 2px 6px no-repeat; +} + +.attachmentslist li a.delete, +.attachmentslist li a.cancelupload { + position: absolute; + top: 6px; + right: 0; + width: 24px; + height: 18px; + padding: 0; + text-decoration: none; + text-indent: -1000px; + background: url(images/buttons.png) -7px -337px no-repeat; +} + +.attachmentslist li a.cancelupload { + background-position: -7px -377px; +} + + +/*** fieldset tabs ***/ + +.tabsbar { + margin-bottom: 12px; + padding-top: 15px; + height: 27px; +} + +.tabsbar .tablink { + padding: 15px 1px 15px 0; + background: #f8f8f8; + background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8)); + background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); +} + +.tabsbar .tablink:last-child { + background: none; +} + +.tabsbar .tablink:last-child a { + border-right: 0; +} + +.tabsbar .tablink a { + padding: 15px; + color: #999; + font-size: 12px; + font-weight: bold; + text-decoration: none; + background: #fff; + border-right: 1px solid #fafafa; +} + +.tabsbar .tablink.selected a { + color: #004458; + background: #f6f6f6; + background: -moz-linear-gradient(top, #fff 40%, #efefef 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef)); + background: -o-linear-gradient(top, #fff 40%, #efefef 100%); + background: -ms-linear-gradient(top, #fff 40%, #efefef 100%); + background: linear-gradient(top, #fff 40%, #efefef 100%); +} + +fieldset.tab { + border: 0; + padding: 0; + margin-left: 0; +} -- Gitblit v1.9.1