Adding b/w outline to application icons on their page

assets/scss/components/common/button.scss

@@ -38,11 +38,13 @@
         &:active {
             box-shadow: 0px 0px 8px 0px #000000;
             filter: brightness(80%);
+            z-index: 2
         }
     
         &:hover {
             box-shadow: 0px 0px 8px 0px #000000;
-            filter: brightness(90%);
+            filter: brightness(98%);
+            z-index: 2
         }
         
         & a, &:not(div) {

assets/scss/components/common/icon.scss

@@ -51,21 +51,14 @@
     vertical-align: middle;
 }
 
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'omegicons';
-    src: url('../font/omegicons.svg?71804627#omegicons') format('svg');
-  }
-}
-*/
-
 .shadowed {
     filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6));
 }
 
+.text-white .shadowed {
+    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6));
+}
+
 [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "omegicons";
   font-style: normal;

layouts/partials/section-app-header.html

@@ -6,7 +6,7 @@
     <div class="columns-container">
         <div class="column col3 center text-right vertical-center {{ if .TextWhite }}text-white{{ end }}">
             <br>
-            <h1 class="flex flex-right">&nbsp;<img src="/icons/apps/{{ .AppIndex | safeHTML }}.svg" class="icon-larger-text" alt=""/>{{ $appdata.name | safeHTML }}</h1>
+            <h1 class="flex flex-right">&nbsp;<img src="/icons/apps/{{ .AppIndex | safeHTML }}.svg" class="icon-larger-text shadowed" alt="{{ .AppIndex | safeHTML }} app icon"/>{{ $appdata.name | safeHTML }}</h1>
             <h2>{{ $appdata.description | safeHTML }}</h2>
             {{ if .ShowPlatforms }}
             <p class="flex flex-right">{{ i18n "availableOn" }}&nbsp;