fixed 增加相册模式

themes/Ying/assets/css/main.css

@@ -3709,6 +3709,141 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
     to { opacity: 1; transform: translateX(0); }
 }
 
+/* Album / Light and Shadow Page Styles - Waterfall Flow Refined */
+.album-content {
+    column-count: 4;
+    column-gap: 5px; /* Tighter gap */
+    margin-top: 20px;
+}
+
+.album-item {
+    position: relative;
+    width: 100%;
+    margin-bottom: 5px; /* Tighter vertical gap */
+    break-inside: avoid;
+    border-radius: 2px; /* Sharper corners */
+    background: #f0f0f0;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    overflow: hidden;
+    backface-visibility: hidden;
+    opacity: 0; /* Start hidden for fade-in */
+    animation: fadeIn 0.6s ease forwards; /* Fade in animation */
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.album-img-box {
+    width: 100%;
+    position: relative;
+    font-size: 0;
+}
+
+.album-img-box img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.5s ease;
+}
+
+.album-item:hover .album-img-box img {
+    transform: scale(1.05); /* Subtler zoom */
+}
+
+/* Date Badge - Top Left */
+.album-date-badge {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(2px);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 0.7rem;
+    pointer-events: none;
+    z-index: 2;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+}
+
+/* Title Info - Bottom Overlay */
+.album-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 30px 8px 8px;
+    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
+    color: #fff;
+    opacity: 0; /* Default hidden */
+    transform: translateY(0); /* No movement, just fade */
+    transition: opacity 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    pointer-events: none;
+}
+
+.album-item:hover .album-info {
+    opacity: 1;
+}
+
+.album-title {
+    font-size: 0.85rem;
+    font-weight: 400;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+    margin: 0;
+    line-height: 1.2;
+}
+
+/* Dark Mode Adjustments */
+[data-theme="dark"] .album-item {
+    background: #1a1a1a;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .album-content {
+        column-count: 3;
+    }
+}
+
+@media (max-width: 768px) {
+    .album-content {
+        column-count: 2;
+        column-gap: 4px;
+    }
+    
+    .album-item {
+        margin-bottom: 4px;
+    }
+    
+    .album-info {
+        opacity: 1; /* Always show text on mobile */
+        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
+        padding: 20px 6px 6px;
+    }
+    
+    .album-title {
+        font-size: 0.8rem;
+    }
+    
+    .album-date-badge {
+        top: 4px;
+        left: 4px;
+        font-size: 0.65rem;
+        padding: 1px 4px;
+    }
+
+    /* Hide specific elements on mobile */
+    .mobile-hidden {
+        display: none !important;
+    }
+}
+