a few style tweaks and improvements

skins/elastic/swipe.less

@@ -5,6 +5,10 @@
 @import (reference) "../../../../skins/elastic/styles/variables";
 @import (reference) "../../../../skins/elastic/styles/mixins";
 
+// Calculate default colors from default list background color
+@color-swipe-default-background: contrast(@color-layout-list-background, darken(@color-layout-list-background, 10%), lighten(@color-layout-list-background, 40%));
+@color-swipe-default: contrast(@color-swipe-default-background, lighten(@color-swipe-default-background, 30%), darken(@color-swipe-default-background, 40%), 57%);
+
 #swipe-action {
   position: absolute;
   display: flex;
@@ -12,9 +16,18 @@
   border-collapse: collapse;
 
   &.horizontal {
-    background-color: lighten(@color-black, 80%);
+    background-color: @color-swipe-default-background;
-    color: lighten(@color-black, 50%);
+    color: @color-swipe-default;
+  }
+
+  &.vertical {
+    top: 2em;
+    z-index: 1000;
+    color: @color-swipe-default;
+  }
 
+  &.horizontal,
+  &.vertical > .swipe-container {
     &.swipe_active,
     &.swipe_mark {
       background-color: @color-message-information;
@@ -38,16 +51,6 @@
     }
   }
 
-  &.vertical {
-    top: 2em;
-    z-index: 1000;
-    color: lighten(@color-black, 50%);
-
-    &.swipe_active {
-      color: @color-main;
-    }
-  }
-
   > .swipe-container {
     margin: 0;
     padding: 0;

skins/elastic/swipe.min.css

@@ -1 +1 @@
-#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action>.swipe-container.down .swipe-action>.swipe-label,.toolbar.menu a.button.swipe{display:none}#swipe-action.horizontal{background-color:#e2e7e9;color:#8b9fa7}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark{background-color:#37beff;color:#fff}#swipe-action.horizontal.swipe_danger{background-color:#ff5552;color:#fff}#swipe-action.horizontal.swipe_move{background-color:#ffd452;color:#2c363a}#swipe-action.horizontal.swipe_compose,#swipe-action.horizontal.swipe_success{background-color:#41b849;color:#fff}#swipe-action.vertical{top:2em;z-index:1000;color:#8b9fa7}#swipe-action.vertical.swipe_active{color:#37beff}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .25em 0 .5em;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right;margin:0 .5em 0 .25em}#swipe-action>.swipe-container.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>.swipe-container.down .swipe-action::before{float:none;padding:0;margin:.4em;line-height:1;font-size:1.2em;width:auto;height:auto}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe{display:inline-block}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe:before,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none}
+#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action>.swipe-container.down .swipe-action>.swipe-label,.toolbar.menu a.button.swipe{display:none}#swipe-action.horizontal{background-color:#e6e6e6;color:grey}#swipe-action.vertical{top:2em;z-index:1000;color:grey}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark,#swipe-action.vertical>.swipe-container.swipe_active,#swipe-action.vertical>.swipe-container.swipe_mark{background-color:#37beff;color:#fff}#swipe-action.horizontal.swipe_danger,#swipe-action.vertical>.swipe-container.swipe_danger{background-color:#ff5552;color:#fff}#swipe-action.horizontal.swipe_move,#swipe-action.vertical>.swipe-container.swipe_move{background-color:#ffd452;color:#2c363a}#swipe-action.horizontal.swipe_compose,#swipe-action.horizontal.swipe_success,#swipe-action.vertical>.swipe-container.swipe_compose,#swipe-action.vertical>.swipe-container.swipe_success{background-color:#41b849;color:#fff}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .25em 0 .5em;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right;margin:0 .5em 0 .25em}#swipe-action>.swipe-container.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>.swipe-container.down .swipe-action::before{float:none;padding:0;margin:.4em;line-height:1;font-size:1.2em;width:auto;height:auto}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe{display:inline-block}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe:before,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none}

swipe.js

@@ -315,11 +315,11 @@ rcube_webmail.prototype.swipe = {
                 // do not activate if there is no callback
                 if (((swipedata.axis == 'vertical' && changeY > opts[swipedata.axis].minmove) ||
                     (swipedata.axis == 'horizontal' && (changeX < (opts[swipedata.axis].minmove * -1) || changeX > opts[swipedata.axis].minmove))) && action.callback) {
-                    $('#swipe-action').addClass(action.class);
+                    $('#swipe-action.horizontal,#swipe-action.vertical > .swipe-container').addClass(action.class);
                 }
                 else {
                     // reset the swipe if the user takes the row back to the start
-                    $('#swipe-action').removeClass(action.class);
+                    $('#swipe-action.horizontal,#swipe-action.vertical > .swipe-container').removeClass(action.class);
                     $('#swipe-action').data('callback', null);
                 }