More CSS styling for Larry

6 files changed, 120 insertions, 12 deletions

diff --git a/skins/larry/includes/settingstabs.html b/skins/larry/includes/settingstabs.html
index 6662c189f..8b23afc1f 100644
--- a/skins/larry/includes/settingstabs.html
+++ b/skins/larry/includes/settingstabs.html
@@ -1,7 +1,7 @@
 <div id="settings-sections" class="uibox listbox">
 <h2 class="boxtitle"><roundcube:label name="settings" /></h2>
 <div id="settings-tabs" class="scroller">
-	<span id="settingstabdefault" class="listitem preferences"><roundcube:button command="preferences" type="link" label="preferences" title="editpreferences" /></span>
+	<span id="settingstabpreferences" class="listitem preferences"><roundcube:button command="preferences" type="link" label="preferences" title="editpreferences" /></span>
 	<span id="settingstabfolders" class="listitem folders"><roundcube:button command="folders" type="link" label="folders" title="managefolders" /></span>
 	<span id="settingstabidentities" class="listitem identities"><roundcube:button command="identities" type="link" label="identities" title="manageidentities" /></span>
 	<span id="settingstababout" class="listitem about"><roundcube:button command="about" type="link" label="about" title="about" /></span>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 15046d2a3..34fe36b38 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -679,12 +679,21 @@ h2.subject {
 	font-weight: bold;
 }
 
+.headers-table td.header span {
+	white-space: nowrap;
+}
+
 .rcmaddcontact {
 	position: relative;
 	top: 1px;
 	margin-left: 0.5em;
 }
 
+.rcmaddcontact imp {
+	width: 20px;
+	height: 13px;
+}
+
 #messageheader #countcontrols {
 	position: absolute;
 	top: 8px;
@@ -750,7 +759,7 @@ h2.subject {
 
 div.message-part,
 div.message-htmlpart {
-	padding: 10px 8px;
+	padding: 10px 2px;
 	border-top: 1px solid #ccc;
 }
 
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 13c011587..70e3599ae 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -42,7 +42,8 @@
 }
 
 #sections-table tbody td.section,
-#settings-sections span.listitem a {
+#settings-sections span.listitem a,
+#settings-sections span.tablink a {
 	padding-left: 36px;
 	background: url(images/listicons.png) -100px 0 no-repeat;
 }
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 18c987d65..d3a117b2d 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -64,11 +64,32 @@ textarea.placeholder {
 /*** buttons ***/
 
 input.button {
+	display: inline-block;
+	margin: 0 2px;
+	padding: 4px 6px;
+	color: #525252;
+	text-shadow: 1px 1px 1px #fff;
+	border: 1px solid #c0c0c0;
+	border-radius: 4px;
+	background: #f7f7f7;
+	background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
+	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;
+	text-decoration: none;
+}
+
+.formbuttons input.button {
 	color: #dddddd;
 	font-size: 110%;
 	text-shadow: 1px 1px 1px #333;
 	padding: 4px 12px;
-	border: 1px solid #465864;
+	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+ */
@@ -78,7 +99,7 @@ input.button {
 	background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
 }
 
-input.button:hover {
+.formbuttons input.button:hover {
 	color: #ededed;
 	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);
@@ -86,7 +107,7 @@ input.button:hover {
 	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
 }
 
-input.button:active {
+.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)));
@@ -158,7 +179,8 @@ a.button.disabled span.inner {
 }
 
 a.button.pressed,
-a.button:active {
+a.button:active,
+input.button:active {
 	background: #e6e6e6;
 	background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9));
@@ -483,6 +505,7 @@ a.iconbutton.reset {
 }
 
 .listbox .listitem,
+.listbox .tablink,
 .listing tbody td,
 .listing li {
 	font-size: 11px;
@@ -494,6 +517,7 @@ a.iconbutton.reset {
 }
 
 .listbox .listitem a,
+.listbox .tablink a,
 .listing tbody td,
 .listing li a {
 	display: block;
@@ -505,6 +529,7 @@ a.iconbutton.reset {
 }
 
 .listbox .listitem.selected,
+.listbox .tablink.selected,
 .listing tbody tr.selected td,
 .listing li.selected {
 	color: #004458;
@@ -518,6 +543,14 @@ ul.listing {
 	padding: 0;
 }
 
+ul.listing li {
+	background-color: #d9ecf4;
+}
+
+ul.listing li.droptarget {
+	background-color: #c7e3ef;
+}
+
 table.listing {
 	width: 100%;
 	border-spacing: 0;
@@ -912,3 +945,48 @@ ul.toolbarmenu li label {
 	padding: 4px 8px;
 	text-shadow: 1px 1px 1px #333;
 }
+
+
+#rcmdraglayer {
+	min-width: 300px;
+	width: auto !important;
+	width: 300px;
+	padding: 6px 8px;
+	background: #444;
+	border: 1px solid #555;
+	border-radius: 4px;
+	box-shadow: 0 2px 6px 0 #333;
+	-moz-box-shadow: 0 2px 6px 0 #333;
+	-webkit-box-shadow: 0 2px 6px 0 #333;
+	-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;
+}
+
+#rcmdraglayer:after {
+	content: "";
+	position: absolute;
+	top: 6px;
+	left: -6px;
+	border-style: solid;
+	border-width: 6px 6px 6px 0;
+	border-color: transparent #444;
+	/* reduce the damage in FF3.0 */
+	display: block; 
+	width: 0;
+}
+
+._draglayercopy:before {
+	position: absolute;
+	bottom: -5px;
+	left: -6px;
+	content: " ";
+	width: 15px;
+	height: 15px;
+	background: url(images/buttons.png) -8px -360px no-repeat;
+}
+
diff --git a/skins/larry/templates/settingsedit.html b/skins/larry/templates/settingsedit.html
index 9311af788..ada5b57ee 100644
--- a/skins/larry/templates/settingsedit.html
+++ b/skins/larry/templates/settingsedit.html
@@ -13,7 +13,7 @@
 </div>
 
 <div id="formfooter">
-<div class="footerleft">
+<div class="footerleft formbuttons">
 <roundcube:button command="save" type="input" class="button mainaction" label="save" />
 </div>
 </div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index b20b53879..36a68938e 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -38,13 +38,21 @@ function rcube_mail_ui()
 //      rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui);
       rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
       $('#mailpreviewtoggle').click(function(e){ toggle_preview_pane(e); return false });
-      $('#maillistmode').addClass(rcmail.env.threading ? 'unselected' : 'selected').click(function(e){ switch_view_mode('list'); return false });
-      $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : 'unselected').click(function(e){ switch_view_mode('thread'); return false });
+      $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
+      $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
       
       if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
-        init_messageview();
+        layout_messageview();
       }
     }
+    else if (rcmail.env.task == 'settings') {
+      var tab = '#settingstabpreferences';
+      if (rcmail.env.action)
+        tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));
+
+      $(tab).addClass('selected')
+        .children().first().removeAttr('onclick').click(function() { return false; });
+    }
 
     $(document.body).bind('mouseup', function(e){
       var config, obj, target = e.target;
@@ -70,12 +78,24 @@ function rcube_mail_ui()
         }
       }
     });
+    
+    $(window).resize(resize);
+  }
+
+  /**
+   * Update UI on window resize
+   */
+  function resize()
+  {
+    if (rcmail.env.task == 'mail' && (rcmail.env.action == 'show' || rcmail.env.action == 'preview')) {
+      layout_messageview();
+    }
   }
 
   /**
    * Adjust UI objects of the mail view screen
    */
-  function init_messageview()
+  function layout_messageview()
   {
     $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');
     $('#message-objects div a').addClass('button');