Fine tuning Larry styles + browser specific css quirks

16 files changed, 113 insertions, 44 deletions

diff --git a/program/js/common.js b/program/js/common.js
index fc2d10bdd..da158f604 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -121,14 +121,16 @@ function roundcube_browser()
     else if (this.konq)
       classname += ' konqueror';
     else if (this.safari)
-      classname += ' safari';
-
-    if (this.chrome)
       classname += ' chrome';
-    else if (this.iphone)
+    else if (this.chrome)
+      classname += ' chrome';
+
+    if (this.iphone)
       classname += ' iphone';
     else if (this.ipad)
       classname += ' ipad';
+    else if (this.safari || this.chrome)
+      classname += ' webkit';
 
     if (document.documentElement)
       document.documentElement.className += classname;
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index c1a8e54dc..7349a5809 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -1,7 +1,7 @@
 /**
  * Roundcube webmail styles for the Address Book section
  *
- * 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
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 73c7672e6..266464ab7 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -1,7 +1,7 @@
 /**
  * Roundcube webmail styles for the Email section
  *
- * 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
@@ -324,11 +324,11 @@ a.iconbutton.threadmode.selected {
 	padding: 2px 3px;
 }
 
-.chrome #messagelist tr td.attachment,
-.chrome #messagelist tr td.threads,
-.chrome #messagelist tr td.status,
-.chrome #messagelist tr td.flag,
-.chrome #messagelist tr td.priority {
+.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;
 }
 
@@ -336,7 +336,7 @@ a.iconbutton.threadmode.selected {
 	width: 26px;
 }
 
-.chrome #messagelist tr td.threads {
+.webkit #messagelist tr td.threads {
 	width: 30px;
 }
 
@@ -617,7 +617,7 @@ a.iconbutton.threadmode.selected {
 #composeheaders {
 	position: relative;
 	padding: 3px 0;
-	background: #fff;
+	background: #f9f9f9;
 	background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9));
 	background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
@@ -711,7 +711,12 @@ h3.subject {
 	position: relative;
 	color: #666;
 	text-align: center;
-	background-color: #EBEBEB;
+	background-color: #f9f9f9;
+	background: -moz-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#e9e9e9));
+	background: -o-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
+	background: -ms-linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
+	background: linear-gradient(top, #eaeaea 0%, #e9e9e9 100%);
 }
 
 div.more-headers {
@@ -947,6 +952,11 @@ div.message-part blockquote blockquote blockquote {
 	border-bottom: 4px solid #c7e3ef;
 }
 
+#compose-contacts .scroller {
+	top: 65px;
+	border-top: 1px solid #fff;
+}
+
 #contacts-table {
 	table-layout: fixed;
 }
@@ -966,6 +976,10 @@ div.message-part blockquote blockquote blockquote {
 	text-overflow: ellipsis;
 }
 
+#contacts-table tr:first-child td {
+	border-top: 0;
+}
+
 #compose-contacts li.addressbook a {
 	background-position: 6px -766px;
 }
diff --git a/skins/larry/print.css b/skins/larry/print.css
index 97545a557..484905d4f 100644
--- a/skins/larry/print.css
+++ b/skins/larry/print.css
@@ -1,7 +1,7 @@
 /**
  * Roundcube webmail styles for message printing
  *
- * Copyright (c) 2011, The Roundcube Dev Team
+ * Copyright (c) 2012, The Roundcube Dev Team
  *
  * The contents are subject to the Creative Commons Attribution-ShareAlike
  * License. It is allowed to copy, distribute, transmit and to adapt the work
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 8de91d877..1d99b7599 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -1,7 +1,7 @@
 /**
  * Roundcube webmail styles for the Settings section
  *
- * 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
@@ -184,13 +184,24 @@
 	bottom: 0;
 }
 
+#subscription-table {
+	table-layout: fixed;
+}
+
 #subscription-table tr.root td {
 	font-size: 5%;
 	height: 5px;
 	padding: 2px;
 }
 
+#subscription-table td.name {
+	width: 85%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 #subscription-table td.subscribed {
+	min-width: 30px;
 	padding: 3px 12px 3px 3px;
 	text-align: right;
 }
@@ -199,8 +210,16 @@
 	width: 5em;
 }
 
+.webkit #pluginlist td.version {
+	width: 6em;
+}
+
 #pluginlist td.license,
 #pluginlist td.source {
 	width: 8em;
 }
 
+.webkit #pluginlist td.license,
+.webkit #pluginlist td.source {
+	width: 9em;
+}
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 02014dc4e..9a08a2368 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
@@ -20,6 +20,11 @@ body {
 	margin: 0;
 }
 
+body.noscroll {
+	/* also avoids bounce effect in Chrome and Safari */
+	overflow: hidden;
+}
+
 a {
 	color: #0069a6;
 }
@@ -238,7 +243,7 @@ input.button:active {
 .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%);
@@ -352,6 +357,7 @@ 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;
 }
@@ -499,7 +505,7 @@ a.iconlink.upload {
 	height: 46px;
 	margin-bottom: 10px;
 	padding: 0 0 0 10px;
-	background: #3a3a3a;
+	background: #111;
 	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%);
@@ -736,6 +742,11 @@ a.iconlink.upload {
 	display: table-cell;
 	padding-bottom: 5px;
 	height: auto;
+	min-height: 14px;
+}
+
+.webkit .listing tbody td {
+	height: 14px;
 }
 
 .listbox .listitem.selected,
@@ -922,7 +933,7 @@ table.records-table {
 	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(14px,#d6eaf3), color-stop(100%,#d6eaf3));
+	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%);
@@ -1485,6 +1496,10 @@ ul.toolbarmenu li a {
 	padding: 6px 10px 6px 10px;
 }
 
+.googie_list td span {
+	padding: 3px 10px;
+}
+
 .googie_list td span,
 ul.toolbarmenu li a.active {
 	color: #fff;
@@ -1676,16 +1691,18 @@ ul.toolbarmenu li span.conversation {
 	/* 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;
 }
 
 
@@ -1845,7 +1862,7 @@ ul.toolbarmenu li span.conversation {
 
 .tabsbar .tablink.selected a {
 	color: #004458;
-	background: #fff;
+	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%);
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index f04ca2981..5f32887fd 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 1d8c46b96..e2b835d7f 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -5,7 +5,7 @@
 <roundcube:include file="/includes/links.html" />
 <link rel="stylesheet" type="text/css" href="/googiespell.css" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
@@ -16,10 +16,10 @@
 <!-- inline address book -->
 <div id="compose-contacts" class="uibox listbox">
 <h2 class="boxtitle"><roundcube:label name="contacts" /></h2>
-<div class="scroller withfooter">
 	<roundcube:object name="adressbooks" id="directorylist" class="listing" />
-	<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
-</div>
+	<div class="scroller withfooter">
+		<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
+	</div>
 <div class="boxfooter">
 	<roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
 </div>
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html
index 0b263e9fe..0b19d1a7f 100644
--- a/skins/larry/templates/folders.html
+++ b/skins/larry/templates/folders.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html
index a48821871..428ebcee0 100644
--- a/skins/larry/templates/identities.html
+++ b/skins/larry/templates/identities.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html
index 7c861e8d3..b155f9a69 100644
--- a/skins/larry/templates/login.html
+++ b/skins/larry/templates/login.html
@@ -34,5 +34,19 @@
 
 <roundcube:include file="/includes/footer.html" />
 
+<roundcube:object name="preloader" images="
+  /images/ajaxloader.gif
+  /images/buttons.png
+  /images/addcontact.png
+  /images/filetypes.png
+  /images/listicons.png
+  /images/messages.png
+  /images/quota.png
+  /images/messageicons.png
+  /images/selector.png
+  /images/splitter.png
+  /images/watermark.jpg
+" />
+
 </body>
 </html>
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index d82b8927d..2608c93f6 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -10,9 +10,8 @@
 	#mailpreviewframe { display: block; }
 <roundcube:endif />
 </style>
-
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 144d464be..2509662fe 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/plugin.html b/skins/larry/templates/plugin.html
index 3a589ff26..341f604ac 100644
--- a/skins/larry/templates/plugin.html
+++ b/skins/larry/templates/plugin.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html
index 15ce1e94f..0b398351f 100644
--- a/skins/larry/templates/settings.html
+++ b/skins/larry/templates/settings.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
+<body class="noscroll">
 
 <roundcube:include file="/includes/header.html" />
 
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index f4d44af48..36159eaa2 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -82,7 +82,7 @@ function rcube_mail_ui()
         $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
       }
       else if (rcmail.env.action == 'compose') {
-        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
+        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
         rcmail.addEventListener('aftersend-attachment', show_uploadform);
         rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); });
         layout_composeview();
@@ -95,7 +95,7 @@ function rcube_mail_ui()
         }).css('cursor', 'pointer');
 
         new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
-          orientation:'v', relative:true, start:248, min:170, size:12 }).init();
+          orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init();
       }
       else if (rcmail.env.action == 'list' || !rcmail.env.action) {
           mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
@@ -271,22 +271,26 @@ function rcube_mail_ui()
   function layout_composeview()
   {
     var body = $('#composebody'),
+      form = $('#compose-content'),
       bottom = $('#composeview-bottom'),
       w, h;
 
-    bottom.css('height', (bottom.parent().height() - bottom.position().top) + 'px');
+    bottom.css('height', (form.height() - bottom.position().top) + 'px');
 
-    w = body.parent().width() - 8;
+    w = body.parent().width() - 6;
     h = body.parent().height() - 36;
     body.width(w).height(h);
 
     if (window.tinyMCE && tinyMCE.get('composebody')) {
-      $('#composebody_tbl').width((w+12)+'px').height('').css('margin-top', '1px');
-      $('#composebody_ifr').width((w+12)+'px').height((h-22)+'px');
+      $('#composebody_tbl').width((w+10)+'px').height('').css('margin-top', '1px');
+      $('#composebody_ifr').width((w+10)+'px').height((h-22)+'px');
     }
     else {
       $('#googie_edit_layer').height(h+'px');
     }
+    
+    var abooks = $('#directorylist');
+    $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
   }