More CSS styling for Larry

thomascube

2011-12-14 28e18c75ef693740edc05e7474cf52452cc76157

More CSS styling for Larry

 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>

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


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

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


 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>

 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');