Improve .webkit-scroller class use

skins/elastic/styles/layout.less

@@ -153,13 +153,6 @@ body > #layout {
 }
 
 html.iframe {
-    &.ipad,
-    &.iphone,
-    &.webkit.mobile,
-    &.webkit.tablet {
-        .webkit-scroller;
-    }
-
     body {
         overflow: auto;
 

skins/elastic/styles/mixins.less

@@ -55,23 +55,3 @@
 .font-family {
     font-family: Roboto, sans-serif;
 }
-
-.webkit-scroller {
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-    }
-
-    ::-webkit-scrollbar:vertical {
-        width: .6rem;
-    }
-
-    ::-webkit-scrollbar:horizontal {
-        height: .6rem;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, .4);
-        border-radius: .3rem;
-        border: 2px solid #fff;
-    }
-}

skins/elastic/styles/widgets/buttons.less

@@ -47,6 +47,7 @@ button.btn {
     &.back-list-button:before {
         content: @fa-var-chevron-left;
     }
+    &.generate:before,
     &.yes:before,
     &.submit:before,
     &.continue:before,
@@ -115,6 +116,9 @@ button.btn {
     &.folders:before {
         content: @fa-var-folder-open;
     }
+    &.settings:before {
+        content: @fa-var-wrench;
+    }
 }
 
 a.btn,

skins/elastic/styles/widgets/common.less

@@ -251,6 +251,26 @@ fieldset.image-attachment {
     }
 }
 
+.webkit-scroller {
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+    }
+
+    &::-webkit-scrollbar:vertical {
+        width: .6rem;
+    }
+
+    &::-webkit-scrollbar:horizontal {
+        height: .6rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, .4);
+        border-radius: .3rem;
+        border: 2px solid #fff;
+    }
+}
+
 .quota-widget {
     width: 5rem;
     max-width: 8rem;

skins/elastic/styles/widgets/dialogs.less

@@ -79,13 +79,11 @@ html.layout-phone {
         border: 0;
         display: flex;
         flex-direction: column;
-        .webkit-scroller;
 
         div.arrow {
             display: none;
         }
 
-
         .listing li:last-child {
             border-bottom: 1px solid @color-list-border;
         }

skins/elastic/styles/widgets/taskmenu.less

@@ -140,7 +140,7 @@
         a {
             width: @layout-menu-width;
             height: @layout-header-height;
-            font-size: 1.1rem;
+            font-size: 1rem;
 
             &:before {
                 width: @layout-menu-width;
@@ -165,8 +165,6 @@
 }
 
 .menu {
-    .webkit-scroller;
-
     .popover-header {
         @media screen and (min-width: (@screen-width-xs + 1px)) {
             display: none !important;

skins/elastic/templates/compose.html

@@ -140,7 +140,7 @@
 			<roundcube:container name="toolbar" id="compose-toolbar" />
 		</div>
 	</div>
-	<div id="compose-content" class="formcontainer content">
+	<div id="compose-content" class="formcontainer content scroller">
 		<roundcube:object name="composeFormHead" role="main" class="formcontent" />
 		<!-- message headers -->
 		<div id="compose-headers" role="region" aria-labelledby="aria-label-composeheaders">

skins/elastic/ui.js

@@ -295,6 +295,10 @@ function rcube_elastic_ui()
         if (ios = $('html').is('.ipad,.iphone')) {
             $('.iframe-wrapper, .scroller').addClass('ios-scroll');
         }
+
+        if ($('html').filter('.ipad,.iphone,.webkit.mobile,.webkit.tablet').addClass('webkit-scroller').length) {
+            $(layout.menu).addClass('webkit-scroller');
+        }
     };
 
     /**
@@ -1858,7 +1862,8 @@ function rcube_elastic_ui()
                 }
             })
             .on('shown.bs.popover', function(event) {
-                var mobile = is_mobile();
+                var mobile = is_mobile(),
+                    popover = $('#' + $(item).attr('aria-describedby'));
 
                 level = $(item).data('level') || 1;
 
@@ -1868,7 +1873,7 @@ function rcube_elastic_ui()
                         title = rcmail.gettext(label),
                         class_name = 'button icon ' + (label == 'back' ? 'back' : 'cancel');
 
-                    $('#' + $(item).attr('aria-describedby') + ' > .popover-header').empty()
+                    $('.popover-header', popover).empty()
                         .append($('<a>').attr('class', class_name).text(title))
                         .off('click').on('click', function(e) {
                             $(item).popover('hide');
@@ -1895,6 +1900,8 @@ function rcube_elastic_ui()
                         .appendTo('body')
                         .click(function() { $(this).remove(); });
                 }
+
+                $('.popover-body', popover).addClass('webkit-scroller');
             })
             .on('hide.bs.popover', function() {
                 if (level == 1) {