Elastic: Various cross-browser fixes and improvements

plugins/help/skins/elastic/templates/help.html

@@ -20,7 +20,7 @@
 
 <div id="layout-content" class="selected" role="main">
 	<div class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span class="header-title"><roundcube:label name="help.help" /></span>
 	</div>
 	<div class="iframe-wrapper">

program/js/app.js

@@ -4758,7 +4758,7 @@ function rcube_webmail()
       var dialog,
         prompt_value = $('<input>').attr({type: 'text', size: 40}),
         myprompt = $('<div class="prompt">')
-          .append($('<div class="message">').text(this.get_label('nosubjectwarning')))
+          .append($('<p class="message">').text(this.get_label('nosubjectwarning')))
           .append(prompt_value),
         save_func = function() {
           input_subject.val(prompt_value.val());

skins/elastic/styles/layout.less

@@ -60,7 +60,6 @@ body {
 
         & > .header,
         & > .footer {
-            background-color: @color-layout-header-background;
             font-size: @layout-header-font-size;
             font-weight: bold;
             line-height: @layout-header-height;
@@ -78,6 +77,7 @@ body {
         & > .header {
             border-bottom: 1px solid @color-layout-border;
             color: @color-layout-header;
+            background-color: @color-layout-header-background;
 
             .header-title {
                 .overflow-ellipsis;
@@ -99,9 +99,12 @@ body {
         & > .footer {
             border-top: 1px solid @color-layout-border;
             background-color: @color-layout-footer-background;
-            height: @layout-footer-height;
+
-            min-height: @layout-footer-height;
+            & when not (@layout-footer-height = @layout-header-height) {
-            line-height: @layout-footer-height;
+                height: @layout-footer-height;
+                min-height: @layout-footer-height;
+                line-height: @layout-footer-height;
+            }
 
             &.small {
                 height: @layout-footer-small-height;

skins/elastic/styles/widgets/buttons.less

@@ -160,7 +160,7 @@ a.button.icon {
 
 html.touch {
     .btn:focus {
-        box-shadow: none;
+        box-shadow: none !important;
     }
 }
 

skins/elastic/styles/widgets/common.less

@@ -255,16 +255,16 @@ fieldset.image-attachment {
     }
 
     &::-webkit-scrollbar:vertical {
-        width: .6rem;
+        width: .5rem;
     }
 
     &::-webkit-scrollbar:horizontal {
-        height: .6rem;
+        height: .5rem;
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, .4);
+        background-color: rgba(0, 0, 0, .3);
-        border-radius: .3rem;
+        border-radius: .25rem;
         border: 2px solid #fff;
     }
 }

skins/elastic/styles/widgets/forms.less

@@ -451,9 +451,16 @@ html.ms .propform {
         }
     }
 
-    // We don't need buttons element on small devices
+    // We don't need buttons element on small devices, nor flex display
     html.layout-small &,
     html.layout-phone & {
+        display: initial;
+        overflow: initial !important;
+
+        .formcontent {
+            overflow: initial !important;
+        }
+
         .formbuttons {
             display: none;
         }
@@ -716,7 +723,7 @@ html.ms .propform {
 /*** Forms in popups ***/
 
 .popup form.propform {
-    padding: .5rem;
+    padding: .25rem;
     overflow-x: hidden;
 }
 

skins/elastic/styles/widgets/jqueryui.less

@@ -175,6 +175,7 @@
         display: flex;
         flex-direction: column;
         border: 0;
+        top: 0 !important; // for Chrome
 
         .ui-resizable-handle,
         .ui-dialog-titlebar-close {

skins/elastic/styles/widgets/mail.less

@@ -301,11 +301,19 @@
 
 #composestatusbar {
     position: absolute;
-    height: 2.5rem;
-    padding-top: .25rem;
     opacity: .3;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         display: none;
     }
+
+    a.button {
+        display: inline-block;
+        height: 2.5rem;
+        margin-right: .25rem;
+
+        &:before {
+            line-height: 2.5rem;
+        }
+    }
 }

skins/elastic/styles/widgets/menu.less

@@ -681,17 +681,19 @@ a.toolbar-button {
         padding: .5rem;
         line-height: normal; // fixes placeholder misalignment in IE11
         outline: 0; // removes focus outline in Chrome
+
+        &::-ms-clear {
+            display: none; // for IE
+        }
     }
 
     a {
-        height: @layout-searchbar-height;
-        min-width: auto;
         color: @color-toolbar-button;
 
         &:before {
             &:extend(.font-icon-class);
             width: 2rem;
-            line-height: @layout-searchbar-height;
+            height: @layout-searchbar-height;
             margin: 0;
         }
 
@@ -706,7 +708,7 @@ a.toolbar-button {
 
             &:before {
                 content: @fa-var-times;
-                font-size: 1em;
+                font-size: 1rem;
             }
         }
 

skins/elastic/ui.js

@@ -1587,7 +1587,7 @@ function rcube_elastic_ui()
 
         screen_resize_logo(mode);
         screen_resize_headers();
-
+/*
         // On iOS and Android the content frame height is never correct, fix it
         if (bw.webkit) {
             $('.iframe-wrapper').each(function() {
@@ -1597,6 +1597,7 @@ function rcube_elastic_ui()
                 }
             });
         }
+*/
     };
 
     /**