From 28e18c75ef693740edc05e7474cf52452cc76157 Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Wed, 14 Dec 2011 04:35:22 -0500
Subject: [PATCH] More CSS styling for Larry
---
skins/larry/settings.css | 3
skins/larry/styles.css | 86 +++++++++++++++++++++++++++-
skins/larry/includes/settingstabs.html | 2
skins/larry/mail.css | 11 +++
skins/larry/templates/settingsedit.html | 2
skins/larry/ui.js | 28 ++++++++-
6 files changed, 120 insertions(+), 12 deletions(-)
diff --git a/skins/larry/includes/settingstabs.html b/skins/larry/includes/settingstabs.html
index 6662c18..8b23afc 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 15046d2..34fe36b 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -679,10 +679,19 @@
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 {
@@ -750,7 +759,7 @@
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 13c0115..70e3599 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 18c987d..d3a117b 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -64,11 +64,32 @@
/*** 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 @@
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 @@
-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.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 @@
}
.listbox .listitem,
+.listbox .tablink,
.listing tbody td,
.listing li {
font-size: 11px;
@@ -494,6 +517,7 @@
}
.listbox .listitem a,
+.listbox .tablink a,
.listing tbody td,
.listing li a {
display: block;
@@ -505,6 +529,7 @@
}
.listbox .listitem.selected,
+.listbox .tablink.selected,
.listing tbody tr.selected td,
.listing li.selected {
color: #004458;
@@ -516,6 +541,14 @@
list-style: none;
margin: 0;
padding: 0;
+}
+
+ul.listing li {
+ background-color: #d9ecf4;
+}
+
+ul.listing li.droptarget {
+ background-color: #c7e3ef;
}
table.listing {
@@ -912,3 +945,48 @@
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 9311af7..ada5b57 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 b20b538..36a6893 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -38,12 +38,20 @@
// 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){
@@ -70,12 +78,24 @@
}
}
});
+
+ $(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');
--
Gitblit v1.9.1