From fd5df851ad5dff22167f02876dd22fb97e1bbf4c Mon Sep 17 00:00:00 2001
From: P-Hellmann <phtijger@gmail.com>
Date: Fri, 29 Nov 2024 12:14:24 +0100
Subject: [PATCH] networks page rework

---
 javascript/black-teal-reimagined.css | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css
index eb6942b8c..b1e840348 100644
--- a/javascript/black-teal-reimagined.css
+++ b/javascript/black-teal-reimagined.css
@@ -816,11 +816,6 @@ svg.feather.feather-image,
   background: var(--highlight-color);
 }
 
-/* Extra Networks Page */
-.extra-networks-page {
-  display: flex;
-}
-
 /* Network Cards Container */
 .extra-network-cards {
   display: flex;
@@ -828,6 +823,8 @@ svg.feather.feather-image,
   overflow-y: auto;
   overflow-x: hidden;
   align-content: flex-start;
+  padding-top: 20px;
+  justify-content: center;
   width: 100%;
   /* Ensures it takes full width */
 }
@@ -872,16 +869,23 @@ svg.feather.feather-image,
   box-shadow: var(--button-shadow);
   min-height: 30px;
   border-radius: var(--radius-md);
+  z-index: 9999;
 }
 
 /* Hover Effects */
+.extra-network-cards .card:hover {
+  transform: scale(1.3);
+  z-index: 9999; /* Use a high value to ensure it appears on top */
+  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
+}
+
 .extra-network-cards .card:hover .overlay {
-  background: rgba(0, 0, 0, 0.70);
+  z-index: 10000; /* Ensure overlay is also on top */
 }
 
 .extra-network-cards .card:hover .preview {
   box-shadow: none;
-  filter: grayscale(100%);
+  filter: grayscale(0%);
 }
 
 /* Tags Styles */
@@ -913,6 +917,15 @@ svg.feather.feather-image,
   font-size: 34px !important;
 }
 
+.extra-network-cards .card .actions {
+  background: none;
+}
+
+.extra-network-cards .card .actions .details {
+  bottom: 50px;
+  background-color: var(--neutral-800);
+}
+
 .extra-network-cards .card .actions>span:hover {
   color: var(--highlight-color);
 }