From 28e18c75ef693740edc05e7474cf52452cc76157 Mon Sep 17 00:00:00 2001 From: thomascube Date: Wed, 14 Dec 2011 09:35:22 +0000 Subject: More CSS styling for Larry --- skins/larry/includes/settingstabs.html | 2 +- skins/larry/mail.css | 11 ++++- skins/larry/settings.css | 3 +- skins/larry/styles.css | 86 +++++++++++++++++++++++++++++++-- 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 6662c189f..8b23afc1f 100644 --- a/skins/larry/includes/settingstabs.html +++ b/skins/larry/includes/settingstabs.html @@ -1,7 +1,7 @@

- + 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 @@
-
+
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'); -- cgit v1.2.3