Elastic: Fix so closing mobile popup menu does not close dialogs below, plus some css improvements

skins/elastic/styles/colors.less

@@ -142,6 +142,7 @@
 @color-input-addon-background:      @color-black-shade-bg;
 @color-recipient-input-border:      @color-input-border;
 @color-recipient-input-background:  @color-black-shade-bg;
+@color-input-placeholder:           #bbb;
 
 @color-checkbox:                    @color-main;
 @color-checkbox-checked:            @color-main;

skins/elastic/styles/widgets/dialogs.less

@@ -119,6 +119,10 @@ html.layout-phone {
         color: @color-popover-mobile-header;
         background-color: @color-popover-mobile-header-background;
 
+        &:before {
+            display: none; // hide the Bootstrap's popover arrow element
+        }
+
         a {
             display: inline-block;
             width: 100%;

skins/elastic/styles/widgets/forms.less

@@ -1344,6 +1344,10 @@ td.input-group input {
             box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
         }
     }
+
+    &::placeholder {
+        color: @color-input-placeholder;
+    }
 }
 
 .invalid-feedback {

skins/elastic/styles/widgets/jqueryui.less

@@ -167,6 +167,7 @@
         height: 100% !important;
         display: flex;
         flex-direction: column;
+        border: 0;
 
         .ui-resizable-handle,
         .ui-dialog-titlebar-close {
@@ -202,14 +203,17 @@
 
                 button {
                     margin: 0 !important;
+                    padding: .45rem;
                     border: 0 !important;
                     height: @layout-header-height;
                     box-shadow: none;
+                    font-size: 90%;
 
                     &:before {
                         display: block !important;
                         width: auto;
-                        height: 1.25em;
+                        height: 1.75rem;
+                        line-height: 1.75;
                         margin: 0;
                     }
 
@@ -237,9 +241,13 @@
                 a.btn-link {
                     color: @color-toolbar-button;
                     margin: 0;
+                    padding: .45rem;
+                    font-size: 90%;
 
                     &.options:before {
                         display: block !important;
+                        height: 1.75rem;
+                        line-height: 1.75;
                     }
 
                     &.options:after {

skins/elastic/ui.js

@@ -1888,13 +1888,18 @@ function rcube_elastic_ui()
                         class_name = 'button icon ' + (label == 'back' ? 'back' : 'cancel');
 
                     $('.popover-header', popover).empty()
-                        .append($('<a>').attr('class', class_name).text(title))
-                        .off('click').on('click', function(e) {
-                            $(item).popover('hide');
-                            if (level > 1) {
+                        .append($('<a>').attr('class', class_name).text(title)
+                            .on('click', function(e) {
+                                $(item).popover('hide');
+                                if (level > 1) {
+                                    e.stopPropagation();
+                                }
+                            })
+                            .on('mousedown', function(e) {
+                                // stop propagation to i.e. do not close jQuery-UI dialogs below
                                 e.stopPropagation();
-                            }
-                        });
+                            })
+                        );
                 }
 
                 // Hide other menus on the same level