Fine tuning Larry styles + browser specific css quirks

thomascube

2012-01-20 071c78c3a4f344f1005c8be8ba895a91452de6b9

Fine tuning Larry styles + browser specific css quirks

 program/js/common.js

@@ -121,14 +121,16 @@
    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;

 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

 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 @@
    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 @@
    width: 26px;
}

.chrome #messagelist tr td.threads {
.webkit #messagelist tr td.threads {
    width: 30px;
}

@@ -617,7 +617,7 @@
#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 @@
    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 @@
    border-bottom: 4px solid #c7e3ef;
}

#compose-contacts .scroller {
    top: 65px;
    border-top: 1px solid #fff;
}

#contacts-table {
    table-layout: fixed;
}
@@ -966,6 +976,10 @@
    text-overflow: ellipsis;
}

#contacts-table tr:first-child td {
    border-top: 0;
}

#compose-contacts li.addressbook a {
    background-position: 6px -766px;
}

 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

 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;
}

 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
@@ -18,6 +18,11 @@
    color: #333;
    background: url(images/linen.jpg) repeat #d1d5d8;
    margin: 0;
}

body.noscroll {
    /* also avoids bounce effect in Chrome and Safari */
    overflow: hidden;
}

a {
@@ -238,7 +243,7 @@
.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 @@
    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 @@
    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 @@
    display: table-cell;
    padding-bottom: 5px;
    height: auto;
    min-height: 14px;
}

.webkit .listing tbody td {
    height: 14px;
}

.listbox .listitem.selected,
@@ -922,7 +933,7 @@
    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 @@
    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 @@
    /* 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 @@

.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%);

 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" />


 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>

 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" />


 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" />


 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>

 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" />


 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" />


 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" />


 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" />


 skins/larry/ui.js

@@ -82,7 +82,7 @@
        $('#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 @@
        }).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 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());
  }