perf(ui): improve hover effect for post preview cards

- home cards
- navigator buttons at the bottom post

_sass/addon/commons.scss

@@ -395,6 +395,32 @@ i {
 
 /* --- post --- */
 
+.post-preview {
+  @extend %rounded;
+
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+
+  &::before {
+    @extend %rounded;
+
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: var(--card-hovor-bg);
+    opacity: 0;
+    transition: opacity 0.35s ease-in-out;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.3;
+    }
+  }
+}
+
 .post {
   h1 {
     margin-top: 3rem;
@@ -636,22 +662,6 @@ i {
   @extend %no-decoration;
 }
 
-.card.post-preview {
-  border-radius: $card-radius;
-  border: 0;
-  background: var(--card-bg);
-  box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0,
-    var(--card-border-color) 0 0 0 1px;
-
-  &:hover {
-    background-color: var(--card-hovor-bg);
-
-    img {
-      filter: brightness(0.7) !important;
-    }
-  }
-}
-
 /* overwrite bootstrap muted */
 .text-muted {
   color: var(--text-muted-color) !important;
@@ -666,7 +676,7 @@ i {
 
 /* Overwrite bootstrap outline button */
 .btn.btn-outline-primary {
-  &:hover {
+  &:not(.disabled):hover {
     border-color: #007bff !important;
   }
 }