[mod] Added stylised outline

This commit removes all outline: none,
as this makes keyboard navigation near impossible
Instead, a mixin and element rules are used to style the outline

client/simple/src/less/mixins.less

@@ -38,3 +38,11 @@
     color: var(--color-btn-font);
   }
 }
+
+.focus-outline (@zIndex: 5000, @color: var(--color-base-font)) {
+  &:focus {
+    outline: 1.5px solid @color;
+    outline-offset: 3px;
+    z-index: @zIndex;
+  }
+}

client/simple/src/less/preferences.less

@@ -77,7 +77,6 @@ table {
 
     select:focus,
     input:focus {
-      outline: none;
       box-shadow: 0 0 1px 1px var(--color-btn-background);
     }
   }

client/simple/src/less/search.less

@@ -157,7 +157,7 @@ button.category_button {
   padding: 0.8rem 0.2rem;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: none;
-  outline: none;
+  .focus-outline;
   color: var(--color-search-font);
   font-size: 1.1rem;
   z-index: 1000;
@@ -182,7 +182,7 @@ html.no-js #clear_search.hide_if_nojs {
   padding: 0.8rem;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: none;
-  outline: none;
+  .focus-outline;
   color: var(--color-search-font);
   font-size: 1.1rem;
   z-index: 100;

client/simple/src/less/style.less

@@ -173,6 +173,13 @@ article[data-vim-selected].category-social {
   .rounded-corners;
 }
 
+a,
+button,
+input,
+select {
+  .focus-outline;
+}
+
 .result {
   margin: @results-margin 0;
   padding: @result-padding;
@@ -199,7 +206,6 @@ article[data-vim-selected].category-social {
       &:hover {
         text-decoration: underline;
         border: none;
-        outline: none;
       }
     }
   }
@@ -467,7 +473,6 @@ article[data-vim-selected].category-social {
 
   & > a {
     position: relative;
-    outline: none;
   }
 
   img {

client/simple/src/less/toolkit.less

@@ -366,7 +366,6 @@ select {
     background-size: 2rem;
     background-origin: content-box;
     background-color: var(--color-toolkit-select-background);
-    outline: medium none;
     text-overflow: ellipsis;
     .rounded-corners-tiny;
 
@@ -412,12 +411,6 @@ input.checkbox-onoff[type="checkbox"] {
   border-radius: 10px;
   position: relative;
 
-  /* focus & hover */
-  &:focus,
-  &:hover {
-    outline: none;
-  }
-
   &:focus::after {
     content: "";
     position: absolute;