updated cardDeckView code

1 files changed, 16 insertions, 9 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index babc604b5..a089b248d 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -12,6 +12,7 @@
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     // width: 100%;
+    transform-origin: top left;
 
     position: absolute;
     align-items: center;
@@ -22,15 +23,15 @@
 }
 
 .card-button-container {
-    display: flex;         
+    display: flex;
     padding: 3px;
-    // width: 300px;        
+    // width: 300px;
     background-color: rgb(218, 218, 218); /* Background color of the container */
-    border-radius: 50px;    /* Rounds the corners of the container */
-    transform: translateY(-50px); 
+    border-radius: 50px; /* Rounds the corners of the container */
+    transform: translateY(75px);
     // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
-    align-items: center;    /* Centers buttons vertically */
-    justify-content: start;/* Centers buttons horizontally */
+    align-items: center; /* Centers buttons vertically */
+    justify-content: start; /* Centers buttons horizontally */
 }
 
 button {
@@ -39,11 +40,11 @@ button {
     border-radius: 50%;
     background-color: $dark-gray;
     // border-color: $medium-blue;
-    margin: 5px;    // transform: translateY(-50px); 
+    margin: 5px; // transform: translateY(-50px);
 }
 
 // button:hover {
-//     transform: translateY(-50px); 
+//     transform: translateY(-50px);
 // }
 
 // .card-wrapper::after {
@@ -62,13 +63,19 @@ button {
 //     align-items: center;
 //     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-
 // }
 
+.card-item-inactive,
 .card-item-active,
 .card-item {
     position: relative;
     transition: transform 0.5s ease-in-out;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-item-inactive {
+    opacity: 0.5;
 }
 
 .card-item-active {