mailn

2026-04-30 15:14:09 +03:00
parent 08fe53fa5c
commit e5a88665cd
25 changed files with 13697 additions and 0 deletions
@@ -0,0 +1,165 @@
+/**
+ * VH Flickr Mosaic - Styles
+ * Beautiful photo mosaic with fade animations
+ */
+
+.vh-flickr-mosaic {
+    width: 100%;
+    overflow: hidden;
+    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 100%);
+    padding: 20px 0;
+    position: relative;
+}
+
+.vh-mosaic-container {
+    display: grid;
+    gap: 8px;
+    padding: 0 20px;
+    justify-content: center;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.vh-mosaic-item {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    background: #f0f0f0;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.vh-mosaic-item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+    z-index: 10;
+}
+
+.vh-mosaic-item a {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.vh-mosaic-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 0.8s ease-in-out;
+    display: block;
+}
+
+/* Fade animation for image swap */
+.vh-mosaic-item img.vh-fading-out {
+    opacity: 0;
+}
+
+.vh-mosaic-item img.vh-fading-in {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    animation: vhFadeIn 0.8s ease-in-out forwards;
+}
+
+@keyframes vhFadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/* Loading state */
+.vh-mosaic-item.vh-loading {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: vhShimmer 1.5s infinite;
+}
+
+@keyframes vhShimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* Title overlay on hover */
+.vh-mosaic-item .vh-photo-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 8px 10px;
+    background: linear-gradient(transparent, rgba(0,0,0,0.7));
+    color: white;
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vh-mosaic-item:hover .vh-photo-title {
+    opacity: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .vh-flickr-mosaic {
+        padding: 15px 0;
+    }
+
+    .vh-mosaic-container {
+        gap: 6px;
+        padding: 0 10px;
+    }
+
+    .vh-mosaic-item {
+        border-radius: 6px;
+    }
+}
+
+@media (max-width: 480px) {
+    .vh-mosaic-container {
+        gap: 4px;
+        padding: 0 5px;
+    }
+
+    .vh-mosaic-item {
+        border-radius: 4px;
+    }
+
+    .vh-mosaic-item .vh-photo-title {
+        font-size: 10px;
+        padding: 5px 8px;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .vh-flickr-mosaic {
+        background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.03) 100%);
+    }
+
+    .vh-mosaic-item {
+        background: #2a2a2a;
+    }
+
+    .vh-mosaic-item.vh-loading {
+        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+        background-size: 200% 100%;
+    }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+    .vh-mosaic-item,
+    .vh-mosaic-item img {
+        transition: none;
+    }
+
+    .vh-mosaic-item img.vh-fading-in {
+        animation: none;
+        opacity: 1;
+    }
+
+    .vh-mosaic-item.vh-loading {
+        animation: none;
+    }
+}