Merge branch 'master' into nathan-starter

1 files changed, 84 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
new file mode 100644
index 000000000..a089b248d
--- /dev/null
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -0,0 +1,84 @@
+@import '../global/globalCssVariables.module.scss';
+
+.collectionCardView-outer {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background-color: white;
+    overflow: hidden;
+}
+
+.card-wrapper {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    // width: 100%;
+    transform-origin: top left;
+
+    position: absolute;
+    align-items: center;
+    justify-items: center;
+    justify-content: center;
+
+    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.card-button-container {
+    display: flex;
+    padding: 3px;
+    // width: 300px;
+    background-color: rgb(218, 218, 218); /* Background color of the container */
+    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 */
+}
+
+button {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    background-color: $dark-gray;
+    // border-color: $medium-blue;
+    margin: 5px; // transform: translateY(-50px);
+}
+
+// button:hover {
+//     transform: translateY(-50px);
+// }
+
+// .card-wrapper::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping */
+// }
+
+// .card-wrapper > .card-item:nth-child(10n)::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping after every 10th item */
+// }
+
+// .card-row{
+//     display: flex;
+//     position: absolute;
+//     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 {
+    position: absolute;
+    z-index: 100;
+}