Changeset 28e18c7 in github

Timestamp:

Dec 14, 2011 4:35:22 AM (18 months ago)

Author:

thomascube <thomas@…>

Branches:

master, HEAD, courier-fix, dev-browser-capabilities, pdo, release-0.8

Children:

e19229c

Parents:

0ea1f1e

Message:

More CSS styling for Larry

Location:

skins/larry

Files:

• includes/settingstabs.html (modified) (1 diff)
• mail.css (modified) (2 diffs)
• settings.css (modified) (1 diff)
• styles.css (modified) (9 diffs)
• templates/settingsedit.html (modified) (1 diff)
• ui.js (modified) (3 diffs)

skins/larry/includes/settingstabs.html

@@ -2 +2 @@
 <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>

skins/larry/mail.css

@@ -680 +680 @@
 }
 
+.headers-table td.header span {
+        white-space: nowrap;
+}
+
 .rcmaddcontact {
         position: relative;
         top: 1px;
         margin-left: 0.5em;
+}
+
+.rcmaddcontact imp {
+        width: 20px;
+        height: 13px;
 }
 
@@ -751 +760 @@
 div.message-part,
 div.message-htmlpart {
-        padding: 10px 8px;
+        padding: 10px 2px;
         border-top: 1px solid #ccc;
 }

skins/larry/settings.css

@@ -43 +43 @@
 
 #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

@@ -65 +65 @@
 
 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;
@@ -79 +100 @@
 }
 
-input.button:hover {
+.formbuttons input.button:hover {
         color: #ededed;
         box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6);
@@ -87 +108 @@
 }
 
-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%);
@@ -159 +180 @@
 
 a.button.pressed,
-a.button:active {
+a.button:active,
+input.button:active {
         background: #e6e6e6;
         background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
@@ -484 +506 @@
 
 .listbox .listitem,
+.listbox .tablink,
 .listing tbody td,
 .listing li {
@@ -495 +518 @@
 
 .listbox .listitem a,
+.listbox .tablink a,
 .listing tbody td,
 .listing li a {
@@ -506 +530 @@
 
 .listbox .listitem.selected,
+.listbox .tablink.selected,
 .listing tbody tr.selected td,
 .listing li.selected {
@@ -517 +542 @@
         margin: 0;
         padding: 0;
+}
+
+ul.listing li {
+        background-color: #d9ecf4;
+}
+
+ul.listing li.droptarget {
+        background-color: #c7e3ef;
 }
 
@@ -913 +946 @@
         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

@@ -14 +14 @@
 
 <div id="formfooter">
-<div class="footerleft">
+<div class="footerleft formbuttons">
 <roundcube:button command="save" type="input" class="button mainaction" label="save" />
 </div>

skins/larry/ui.js

@@ -39 +39 @@
       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; });
     }
 
@@ -71 +79 @@
       }
     });
+    
+    $(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();
+    }
   }
 
@@ -76 +96 @@
    * Adjust UI objects of the mail view screen
    */
-  function init_messageview()
+  function layout_messageview()
   {
     $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 10) + 'px');