66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
/**
|
|
* Instagram Gallery Sync Pro - Masonry Layout
|
|
*
|
|
* Pinterest-style masonry layout
|
|
*
|
|
* @package Instagram_Gallery_Sync_Pro
|
|
*/
|
|
|
|
.igsp-masonry {
|
|
display: block;
|
|
}
|
|
|
|
/* CSS-only masonry fallback */
|
|
.igsp-masonry.no-js {
|
|
column-count: var(--columns);
|
|
column-gap: var(--spacing);
|
|
}
|
|
|
|
.igsp-masonry.no-js .igsp-item {
|
|
break-inside: avoid;
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
|
|
/* JS-powered masonry */
|
|
.igsp-masonry.masonry-initialized {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: calc(var(--spacing) / -2);
|
|
}
|
|
|
|
.igsp-masonry.masonry-initialized .igsp-item {
|
|
padding: calc(var(--spacing) / 2);
|
|
}
|
|
|
|
/* Natural height for masonry */
|
|
.igsp-masonry .igsp-image-wrapper {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.igsp-masonry .igsp-image {
|
|
position: relative !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Responsive masonry */
|
|
@media (max-width: 1024px) {
|
|
.igsp-masonry.no-js {
|
|
column-count: var(--columns-tablet, 2);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.igsp-masonry.no-js {
|
|
column-count: var(--columns-mobile, 1);
|
|
}
|
|
}
|
|
|
|
/* Loading state */
|
|
.igsp-masonry.loading .igsp-item {
|
|
opacity: 0;
|
|
}
|
|
|
|
.igsp-masonry.loaded .igsp-item {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
} |