checkpoint

static/css/components/recipe-card.css

@@ -0,0 +1,153 @@
+.recipe-card {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-base);
+    backdrop-filter: blur(16px);
+    transition: transform 160ms ease-out;
+    aspect-ratio: 896/1152;
+    max-width: 260px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.recipe-card:hover {
+    transform: translateY(-2px);
+    background: oklch(100% 0 0 / 0.6);
+}
+
+.recipe-card:focus-visible {
+    outline: 2px solid var(--lora-accent);
+    outline-offset: 2px;
+}
+
+.recipe-indicator {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 24px;
+    height: 24px;
+    background: var(--lora-accent);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    z-index: 2;
+    font-size: 0.9em;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.recipe-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 12px;
+    margin-top: var(--space-2);
+    padding-top: 4px;
+    padding-bottom: 4px;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.card-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-base);
+    overflow: hidden;
+}
+
+.card-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+}
+
+.card-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(oklch(0% 0 0 / 0.75), transparent 85%);
+    backdrop-filter: blur(8px);
+    color: white;
+    padding: var(--space-1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;
+    min-height: 20px;
+}
+
+.base-model-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 32px;
+}
+
+.card-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.card-actions i {
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.card-actions i:hover {
+    opacity: 1;
+}
+
+.card-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent 15%, oklch(0% 0 0 / 0.75));
+    backdrop-filter: blur(8px);
+    color: white;
+    padding: var(--space-1);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    min-height: 32px;
+    gap: var(--space-1);
+}
+
+.lora-count {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.85em;
+}
+
+/* 响应式设计 */
+@media (max-width: 1400px) {
+    .recipe-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    }
+    
+    .recipe-card {
+        max-width: 240px;
+    }
+}
+
+@media (max-width: 768px) {
+    .recipe-grid {
+        grid-template-columns: minmax(260px, 1fr);
+    }
+    
+    .recipe-card {
+        max-width: 100%;
+    }
+}