feat: start of popup

packages/website-ue/src/components/AvatarCard/index.module.css

@@ -0,0 +1,80 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+
+  .series {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 7 / 8;
+
+    .entry {
+      position: absolute;
+
+      border-radius: var(--space-3);
+      box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+
+      background-size: cover;
+      background-position: center;
+
+      &.skeleton {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .count {
+      position: absolute;
+      bottom: var(--space-3);
+      right: var(--space-3);
+
+      box-shadow: var(--shadow-aggressive);
+    }
+  }
+
+  .label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+
+    .skeleton {
+      width: 100%;
+    }
+  }
+}
+
+.details {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+
+  .preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .image {
+      aspect-ratio: 7 / 8;
+      width: 8rem;
+
+      background-size: cover;
+      background-position: center;
+    }
+
+    .grade {
+      margin-top: calc(var(--space-3) * -1);
+    }
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+
+    max-width: 20rem;
+  }
+}