From 50a2fe17430afd009eae5c40f9086e0e4a402d01 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Aug 2024 19:01:55 +0800
Subject: [PATCH] Trying out new hover style for top nav bar

---
 src/components/shortcuts.css | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index 99ddf153..d701fd37 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -121,13 +121,31 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+#shortcuts .tab-bar li a {
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 4px 0;
+    border-radius: 8px;
+    background-color: var(--bg-color);
+    z-index: -1;
+    transform: scale(0.5);
+    opacity: 0;
+    transition: all 0.1s ease-in-out;
+  }
+}
 #shortcuts .tab-bar li a.is-active {
   color: var(--link-color);
-  background-image: radial-gradient(
+  /* background-image: radial-gradient(
     closest-side at 50% 50%,
     var(--bg-color),
     transparent
-  );
+  ); */
+  &:before {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 #app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
   #shortcuts