Elastic: Various cross-browser fixes and improvements

7 files changed, 38 insertions, 17 deletions

diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index a3101c022..90f9b4b1c 100644
--- a/skins/elastic/styles/layout.less
+++ b/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;
-            line-height: @layout-footer-height;
+
+            & when not (@layout-footer-height = @layout-header-height) {
+                height: @layout-footer-height;
+                min-height: @layout-footer-height;
+                line-height: @layout-footer-height;
+            }
 
             &.small {
                 height: @layout-footer-small-height;
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 69c284d1f..320843d09 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/skins/elastic/styles/widgets/buttons.less
@@ -160,7 +160,7 @@ a.button.icon {
 
 html.touch {
     .btn:focus {
-        box-shadow: none;
+        box-shadow: none !important;
     }
 }
 
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index 133c05098..217b55f70 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/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);
-        border-radius: .3rem;
+        background-color: rgba(0, 0, 0, .3);
+        border-radius: .25rem;
         border: 2px solid #fff;
     }
 }
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 3586e5eb9..ee8860771 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/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;
 }
 
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index 51a275257..2698c82b8 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/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 {
diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less
index bfe049b77..7bafda318 100644
--- a/skins/elastic/styles/widgets/mail.less
+++ b/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;
+        }
+    }
 }
diff --git a/skins/elastic/styles/widgets/menu.less b/skins/elastic/styles/widgets/menu.less
index 6af224929..27595646d 100644
--- a/skins/elastic/styles/widgets/menu.less
+++ b/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;
             }
         }