add new card component

2026-05-16 21:50:35 +02:00 · 2025-09-25 00:20:59 -07:00
parent c0317aca58
commit 1108cb7e9a
4 changed files with 649 additions and 0 deletions
@@ -0,0 +1,154 @@
+.container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    display: grid;
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--theme-spacing-sm);
+    width: 100%;
+    height: 100%;
+}
+
+.container.compact {
+    opacity: 0;
+    transform: scale(0.8);
+    transition:
+        opacity 0.2s ease-in-out,
+        transform 0.2s ease-in-out;
+}
+
+.container.visible.compact {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.top-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.secondary-controls {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    gap: var(--theme-spacing-xs);
+    justify-content: flex-end;
+    width: 100%;
+    height: 15%;
+    margin-right: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-lg);
+}
+
+.play-button {
+    all: unset;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: none;
+    border-radius: 100%;
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1);
+    transition: opacity 0.1s ease-in-out;
+    transition: transform 0.1s ease-in-out;
+
+    &:hover {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:active {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0.9);
+    }
+
+    svg {
+        stroke: rgb(0 0 0);
+    }
+}
+
+.play-button.primary {
+    left: 50%;
+    width: 25%;
+    height: 25%;
+
+    svg {
+        fill: rgb(0 0 0);
+    }
+}
+
+.play-button.secondary {
+    width: 15%;
+    height: 15%;
+}
+
+.play-button.left {
+    left: 25%;
+}
+
+.play-button.right {
+    left: 75%;
+}
+
+.play-button.left-top {
+    top: 40%;
+    left: 25%;
+}
+
+.play-button.left-bottom {
+    top: 60%;
+    left: 25%;
+}
+
+.play-button.right-bottom {
+    top: 60%;
+    left: 75%;
+}
+
+.play-button.right-top {
+    top: 40%;
+    left: 75%;
+}
+
+.secondary-button {
+    all: unset;
+    position: absolute;
+    padding: var(--theme-spacing-md);
+    border-radius: var(--theme-radius-md);
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    transition: scale 0.2s linear;
+
+    &:hover {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+
+    &:active {
+        opacity: 1;
+        transform: scale(0.9);
+    }
+
+    svg {
+        fill: rgb(255 255 255);
+        stroke: rgb(255 255 255);
+    }
+}
+
+.secondary-button.favorite {
+    top: 0;
+    right: 0;
+}
+
+.secondary-button.options {
+    right: 0;
+    bottom: 0;
+}