Varius css improvements

skins/elastic/styles/colors.less

@@ -11,6 +11,8 @@
 
 @color-font:                        #141823;
 @color-main:                        #37beff;
+@color-link:                        #00acff;
+
 
 // Layout elements
 @color-layout-border:               #ddd;
@@ -52,12 +54,15 @@
 // Listings
 @color-list:                        @color-font;
 @color-list-selected:               inherit;
-@color-list-selected-background:    #f9f9f9;
+@color-list-selected-background:    tint(@color-main, 96%); /*#f8fafb;*/
+@color-list-flagged:                #ff5c33;
+@color-list-deleted:                #ccc;
+@color-list-unimportant:            #666;
 @color-list-droptarget-background:  #ffffcc;
 @color-list-focus-indicator:        #ccc;
 
 @color-list-badge:                  #fff;
-@color-list-badge-background:       #1e70bf;
+@color-list-badge-background:       @color-main;
 @color-list-recent:                 blue;
 @color-list-recent-badge:           #fff;
 @color-list-recent-badge-background: @color-list-recent;

skins/elastic/styles/styles.less

@@ -76,6 +76,10 @@ button, input, select, textarea {
     line-height: initial;
 }
 
+a {
+    color: @color-link;
+}
+
 @import "layout";
 
 

skins/elastic/styles/widgets/lists.less

@@ -38,6 +38,10 @@
     tbody td {
         display: table-cell;
         outline: none;
+
+        a {
+            color: @color-list;
+        }
     }
 
     li.selected,
@@ -395,17 +399,18 @@ table.fixedcopy {
 
     td.subject {
         width: 99%;
-        white-space: wrap;
         position: relative; /* for span.date positioning in Firefox */
+        background-clip: padding-box; /* fixes Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=688556 */
 
         span {
             line-height: 2em;
 
             &.date {
-                right: 2px;
+                right: 0;
-                top: 3px;
+                top: 0;
                 position: absolute;
-                color: #666; /* TODO */
+                font-size: 90%;
+                color: @color-list-unimportant;
             }
 
             &.fromto {
@@ -414,13 +419,12 @@ table.fixedcopy {
                 margin-right: 10em;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                color: #666; /* TODO */
+                font-size: 90%;
+                color: @color-list-unimportant;
             }
 
             &.subject {
-                clear: both;
                 display: block;
-                font-size: 1em;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
@@ -432,11 +436,12 @@ table.fixedcopy {
     }
 
     td.flags {
-        span {
+        width: 2.5em;
-            width: 20px;
+
-            height: 20px;
+        & > span {
+            height: 1.7em;
+            line-height: 1.7em;
             display: block;
-            margin-left: 1px;
 
             &.flag {
                 cursor: pointer;
@@ -444,14 +449,15 @@ table.fixedcopy {
         }
     }
 
+    tr.flagged td.subject span.subject a,
     tr.flagged td.subject span.date,
     tr.flagged td.subject span.fromto {
-        color: #ff5c33; /* TODO */
+        color: @color-list-flagged;
     }
 
     tr.deleted td.subject span.date,
     tr.deleted td.subject span.fromto {
-        color: #ccc; /* TODO */
+        color: @color-list-deleted;
     }
 
     tr.unread td.subject span.subject {

skins/elastic/styles/widgets/taskmenu.less

@@ -13,6 +13,7 @@
 
 #taskmenu {
     background-color: @color-taskmenu-background;
+    height: 100%;
 
     a {
         text-decoration: none;
@@ -102,6 +103,12 @@
                     color: @color-taskmenu-button-logout-hover !important;
                 }
             }
+
+            @media screen and (max-width: @screen-width-xs) {
+                &.logout {
+                    color: @color-taskmenu-button-logout-hover !important;
+                }
+            }
         }
     }
 

skins/elastic/styles/widgets/toolbar.less

@@ -253,6 +253,21 @@
     a.filterlink:before {
         content: @fa-var-filter;
     }
+    a.reply.list:before,
+    a.reply.all:before {
+        content: @fa-var-mail-reply-all;
+    }
+    a.forward:before,
+    a.forward.bounce:before,
+    a.forward.attachment:before,
+    a.forward.inline:before {
+        content: @fa-var-mail-forward;
+    }
+    a.download.mbox:before,
+    a.download.eml:before,
+    a.download.maildir:before {
+        content: @fa-var-download;
+    }
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {

skins/elastic/templates/includes/mail-menu.html

@@ -43,9 +43,9 @@
 <div id="forward-menu" class="popupmenu">
 	<h3 id="aria-label-forward-menu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forward-menu">
-		<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward active" class="forward" />
+		<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline" classAct="forward inline active" />
-		<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachment active" class="forwardattachment" />
+		<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment" classAct="forward attachment active" />
-		<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" classAct="bounce active" class="bounce" />
+		<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce" classAct="forward bounce active" />
 		<roundcube:container name="forwardmenu" id="forward-menu" />
 	</ul>
 </div>
@@ -53,8 +53,8 @@
 <div id="replyall-menu" class="popupmenu">
 	<h3 id="aria-label-replyall-menu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
-		<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="replyall" classAct="replyall active" />
+		<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
-		<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="replylist" classAct="replylist active" />
+		<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
 		<roundcube:container name="replyallmenu" id="replyall-menu" />
 	</ul>
 </div>

skins/elastic/templates/message.html

@@ -14,7 +14,7 @@
 			<roundcube:include file="includes/mail-menu.html" />
 		</div>
 	<roundcube:endif />
-	<div class="content" role="main">
+	<div class="content frame-content" role="main">
 		<div id="message-header">
 			<span class="moreheaderstoggle"></span>
 			<h2 class="subject">