add new card component

2026-05-17 06:00:20 +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,121 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: var(--theme-spacing-md);
+    overflow: hidden;
+    background-color: var(--theme-colors-surface);
+    border-radius: var(--theme-radius-md);
+}
+
+.image-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+        background-color: rgb(0 0 0);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+        &::before {
+            opacity: 0.6;
+        }
+    }
+}
+
+.image-container.is-round {
+    &::before {
+        border-radius: 50%;
+    }
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: var(--theme-image-fit);
+}
+
+.image.is-round {
+    border-radius: 50%;
+}
+
+.detail-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    padding-top: var(--theme-spacing-sm);
+    overflow: hidden;
+}
+
+.row {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.6;
+    white-space: nowrap;
+
+    a {
+        display: inline;
+        max-width: 100%;
+        color: inherit;
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.row.muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.container.poster {
+    padding: 0;
+    background-color: inherit;
+}
+
+.container.compact {
+    position: relative;
+    padding: 0;
+}
+
+.detail-container.compact {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: var(--theme-spacing-xs);
+    text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
+    background-color: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(2px);
+    transform: translateY(0);
+    transition:
+        transform 0.2s ease-in-out,
+        opacity 0.2s ease-in-out;
+}
+
+.image-container:hover .detail-container.compact {
+    opacity: 0;
+    transform: translateY(100%);
+}
+
+.row.muted.compact {
+    color: var(--theme-colors-foreground);
+}