Merge pull request #9604 from piwik/9578_2

Only show the ouline when the keyboard is used (do not show the outline when mouse is used)

plugins/CoreHome/javascripts/corehome.js

@@ -192,4 +192,13 @@ $( document ).ready(function() {
         $('a[name="main"]').attr('tabindex', -1).focus();
         $(window).scrollTo($('a[name="main"]'));
     });
+
+    // Only use the "outline" CSS property on focus, when the keyboard is being used (do not show the outline when clicking with the mouse)
+    $("body").on("mousedown", "*", function(e) {
+        if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
+            $(this).css("outline", "none").on("blur", function() {
+                $(this).off("blur").css("outline", "");
+            });
+        }
+    });
 });
\ No newline at end of file

plugins/CoreHome/stylesheets/layout.less

  body {
      :focus {
-         outline: 0;
-         -moz-box-shadow: inset 0 0 0 2px @theme-color-background-highContrast;
-         -webkit-box-shadow: inset 0 0 0 2px @theme-color-background-highContrast;
-         box-shadow: inset 0 0 0 2px @theme-color-background-highContrast;
-         border-radius: 2px;
-         -moz-border-radius:2px;
-         -webkit-border-radius:2px;
-         }
+         outline:@theme-color-background-highContrast solid 2px;
+     }
  }
 
  #header {