bak

public/css/style.css

@@ -132,6 +132,70 @@ body::after {
 .card-drop-before::before { left: -6px; }
 .card-drop-after::after { right: -6px; }
 
+/* Group fan preview */
+.group-fan {
+    position: fixed;
+    z-index: 50;
+    padding: 8px;
+    background: var(--t-bg);
+    border: 1px solid var(--t-border);
+    border-radius: 6px;
+    box-shadow: 0 8px 30px -6px rgba(0,0,0,0.4);
+    pointer-events: auto;
+    animation: fanIn 0.25s ease;
+    max-width: min(720px, 95vw);
+}
+@keyframes fanIn {
+    from { opacity: 0; transform: translateY(6px) scale(0.95); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.group-fan-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--fan-cols, 6), 104px);
+    gap: 5px;
+    position: relative;
+    overflow: hidden;
+}
+.group-fan-grid::after {
+    content: '';
+    position: absolute;
+    top: 0; bottom: 0; right: 0;
+    width: 0;
+    background: linear-gradient(to right, transparent, var(--t-bg));
+    pointer-events: none;
+    transition: width 0.2s;
+}
+.group-fan-grid.has-more::after { width: 40px; }
+.group-fan-card {
+    width: 104px;
+    background: var(--t-surface);
+    border: 1px solid var(--t-border);
+    border-radius: 4px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: border-color 0.12s, transform 0.12s;
+}
+.group-fan-card:hover {
+    border-color: var(--t-muted);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+}
+.group-fan-bar { height: 2px; }
+.group-fan-title {
+    padding: 5px 6px;
+    font-size: 9px;
+    line-height: 1.3;
+    color: var(--t-bright);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.group-fan-thumb {
+    height: 44px;
+    background-size: cover;
+    background-position: center;
+}
+
 /* Board card animation */
 #board > div {
     transition: transform 0.2s ease, opacity 0.2s ease;