52 lines
985 B
CSS
52 lines
985 B
CSS
/**
|
|
* Igny8 Image Injection CSS
|
|
*
|
|
* Responsive image display styles for marker-based image injection
|
|
*
|
|
* @package Igny8
|
|
* @version 1.0.0
|
|
*/
|
|
|
|
/* Desktop and larger screens (769px+) */
|
|
@media (min-width: 769px) {
|
|
.igny8-article-image-desktop {
|
|
display: block !important;
|
|
}
|
|
.igny8-article-image-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Mobile and smaller screens (768px and below) */
|
|
@media (max-width: 768px) {
|
|
.igny8-article-image-desktop {
|
|
display: none !important;
|
|
}
|
|
.igny8-article-image-mobile {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* Image wrapper styling */
|
|
.igny8-image-wrapper {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.igny8-image-wrapper img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Loading state */
|
|
.igny8-image-wrapper img[loading="lazy"] {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.igny8-image-wrapper img[loading="lazy"].loaded {
|
|
opacity: 1;
|
|
}
|