137 lines
2.6 KiB
CSS
137 lines
2.6 KiB
CSS
/**
|
|
* Instagram Gallery Sync Pro - Lightbox Styles
|
|
*
|
|
* Custom styles for GLightbox
|
|
*
|
|
* @package Instagram_Gallery_Sync_Pro
|
|
*/
|
|
|
|
/* Override GLightbox styles */
|
|
.glightbox-container .gslide-media {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.glightbox-container .gslide-image img {
|
|
max-width: 90vw;
|
|
max-height: 85vh;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.glightbox-container .gslide-description {
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.glightbox-container .gdesc-inner {
|
|
padding: 0;
|
|
}
|
|
|
|
.glightbox-container .gslide-title {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Navigation */
|
|
.glightbox-container .gnext,
|
|
.glightbox-container .gprev {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.glightbox-container .gnext svg,
|
|
.glightbox-container .gprev svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #333;
|
|
}
|
|
|
|
.glightbox-container .gnext:hover,
|
|
.glightbox-container .gprev:hover {
|
|
background: var(--igsp-primary);
|
|
}
|
|
|
|
.glightbox-container .gnext:hover svg,
|
|
.glightbox-container .gprev:hover svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
/* Close button */
|
|
.glightbox-container .gclose {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 50%;
|
|
top: 20px;
|
|
right: 20px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.glightbox-container .gclose svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #333;
|
|
}
|
|
|
|
.glightbox-container .gclose:hover {
|
|
background: var(--igsp-primary);
|
|
}
|
|
|
|
.glightbox-container .gclose:hover svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
/* Counter */
|
|
.glightbox-container .gcounter {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 5px 12px;
|
|
border-radius: 20px;
|
|
top: 25px;
|
|
left: 25px;
|
|
}
|
|
|
|
/* Loading */
|
|
.glightbox-container .gloader {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
border-left-color: var(--igsp-primary);
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 767px) {
|
|
|
|
.glightbox-container .gnext,
|
|
.glightbox-container .gprev,
|
|
.glightbox-container .gclose {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.glightbox-container .gnext svg,
|
|
.glightbox-container .gprev svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.glightbox-container .gclose svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.glightbox-container .gclose {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.glightbox-container .gcounter {
|
|
top: 15px;
|
|
left: 15px;
|
|
}
|
|
} |