From 071c78c3a4f344f1005c8be8ba895a91452de6b9 Mon Sep 17 00:00:00 2001 From: thomascube Date: Fri, 20 Jan 2012 15:46:15 +0000 Subject: Fine tuning Larry styles + browser specific css quirks --- program/js/common.js | 10 +++++---- skins/larry/addressbook.css | 2 +- skins/larry/mail.css | 32 ++++++++++++++++++++--------- skins/larry/print.css | 2 +- skins/larry/settings.css | 21 ++++++++++++++++++- skins/larry/styles.css | 37 +++++++++++++++++++++++++--------- skins/larry/templates/addressbook.html | 2 +- skins/larry/templates/compose.html | 8 ++++---- skins/larry/templates/folders.html | 2 +- skins/larry/templates/identities.html | 2 +- skins/larry/templates/login.html | 14 +++++++++++++ skins/larry/templates/mail.html | 3 +-- skins/larry/templates/message.html | 2 +- skins/larry/templates/plugin.html | 2 +- skins/larry/templates/settings.html | 2 +- skins/larry/ui.js | 16 +++++++++------ 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 @@ <roundcube:object name="pagetitle" /> - + 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 @@ - + @@ -16,10 +16,10 @@

-
- -
+
+ +
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 @@ <roundcube:object name="pagetitle" /> - + 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 @@ <roundcube:object name="pagetitle" /> - + 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 @@ + + 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; } - - + 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 @@ <roundcube:object name="pagetitle" /> - + 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 @@ <roundcube:object name="pagetitle" /> - + 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 @@ <roundcube:object name="pagetitle" /> - + 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()); } -- cgit v1.2.3