slight adjustments to styling and positioning of help tour elements

js_src/libs/jquery-joyride-2-1.js

@@ -632,11 +632,14 @@
         expose = $(settings.template.expose);
         settings.$body.append(expose);
 //        console.log("JOYRIDE >> EXPOSE INFO >> el[0].clientWidth: " + el[0].clientWidth + ", el: " , el , ", el[0]: " , el[0] , ", el.offset: " , el.offset() , ", el.clientWidth: " + el.clientWidth + ", el.outerWidth: " + el.outerWidth(true))
+//        console.log("JOYRIDE >> EXPOSE INFO >> el.css('margin'): " + el.css('margin'));
+//        console.log("JOYRIDE >> EXPOSE INFO >> el.css('margin-left'): " + el.css('margin-left'));
         expose.css({
-          top: el.offset().top,
-          left: el.offset().left,
-          width: el[0].clientWidth,
-          height: el[0].clientHeight
+//          margin: el.css('margin'),
+          top: el.offset().top - 2,         // CAVEMAN PADDING!
+          left: el.offset().left - 2,       // CAVEMAN PADDING!
+          width: el[0].clientWidth + 4,     // CAVEMAN PADDING!
+          height: el[0].clientHeight + 4    // CAVEMAN PADDING!
 //          width: el.outerWidth(true),
 //          height: el.outerHeight(true)
         });
@@ -651,10 +654,14 @@
         }
         el.data('expose-css',origCSS);
         exposeCover.css({
-          top: el.offset().top,
-          left: el.offset().left,
-          width: el.outerWidth(true),
-          height: el.outerHeight(true)
+          top: el.offset().top - 2,         // CAVEMAN PADDING!
+          left: el.offset().left - 2,       // CAVEMAN PADDING!
+          width: el[0].clientWidth + 4,     // CAVEMAN PADDING!
+          height: el[0].clientHeight + 4    // CAVEMAN PADDING!
+//          top: el.offset().top,
+//          left: el.offset().left,
+//          width: el.outerWidth(true),
+//          height: el.outerHeight(true)
         });
         settings.$body.append(exposeCover);
         expose.addClass(randId);

less/help_joyride-2.1.less

@@ -1,14 +1,16 @@
 //@helpBlue: #2470E2;
+@modalBgColor: rgba(0,0,0, 0.30);
 @darkBlue: #013;
 @helpBlue: #1B76FF;
 @helpFullBlue: rgb(0,85,214);
 @helpDarkBlue: darken(desaturate(@helpBlue, 25%), 35%);
+@tipBgColor: rgba(255, 255, 255, 1.0);
 
 /* Default styles for the container */
 .joyride-tip-guide {
   position: absolute;
 //  background: #000;
-  background: rgba(255, 255, 255, 0.92);
+  background: @tipBgColor;
   display: none;
   color: @darkBlue;
 //  color: rgb(0,99,255);
@@ -248,12 +250,7 @@
   position: fixed;
   height: 100%;
   width: 100%;
-//  background: rgb(0,0,0);
-//  background: transparent;
-  background: rgba(0,0,0, 0.30);
-//  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-//  filter: alpha(opacity=50);
-//  opacity: 0.5;
+  background: @modalBgColor;
   z-index: 100;
   display: none;
   top: 0;
@@ -262,12 +259,10 @@
 }
 
 .joyride-expose-wrapper {
-  background-color: #ffffff;
+  background-color: #fff;
   position: absolute;
   z-index: 102;
-  -moz-box-shadow: 0px 0px 30px #ffffff;
-  -webkit-box-shadow: 0px 0px 30px #ffffff;
-  box-shadow: 0px 0px 30px #ffffff;
+  box-shadow: 0px 0px 30px #fff;
   border-radius: 5px;
 }