1 files changed, 50 insertions, 15 deletions

diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
index 00f2246..5442ba5 100644
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>
 
 <template>
   <router-link :to="tool.path">
-    <c-card class="tool-card">
+    <c-card class="tool-card" shadow>
       <div flex items-center justify-between>
         <n-icon class="icon" size="40" :component="tool.icon" />
         <div flex items-center gap-8px>
@@ -32,15 +29,14 @@ const appTheme = useAppTheme();
           <FavoriteButton :tool="tool" />
         </div>
       </div>
-      <n-h3 class="title">
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
+      <n-h3 class="title" truncate>
+        {{ tool.name }}
       </n-h3>
 
       <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
+        <div line-clamp-2 style="min-height: 44.78px">
           {{ tool.description }}
-          <br>&nbsp;
-        </n-ellipsis>
+        </div>
       </div>
     </c-card>
   </router-link>
@@ -52,16 +48,14 @@ a {
 }
 
 .tool-card {
-  transition: border-color ease 0.5s;
   border-width: 2px !important;
   color: transparent;
-
-  &:hover {
-    border-color: v-bind('appTheme.primary.colorHover');
-  }
+  position: relative;
+  border-radius: 15px;
+  border: none;
 
   .icon {
-    opacity: 0.6;
+    opacity: 0.4;
     color: v-bind('theme.textColorBase');
   }
 
@@ -74,5 +68,46 @@ a {
     color: v-bind('theme.textColorBase');
     margin: 5px 0;
   }
+
+  &::after {
+    --mask-radius: 20em;
+
+    border-radius: 15px;
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+    display: block;
+    height: calc(100% - 4px) ;
+    width:  calc(100% - 4px) ;
+    background: #18a05818;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+
+    -webkit-mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    will-change: mask;
+  }
+
+  &:hover {
+    &::after {
+      --mask-radius: 50em;
+      border: 2px solid #18a058;
+    }
+  }
 }
 </style>