.sbtt-converting-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 10px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
z-index: 10;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} .sbtt-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: sbtt-spin 0.8s linear infinite;
}
@keyframes sbtt-spin {
to {
transform: rotate(360deg);
}
} .sbtt-post-item img[src*=".heic"]:not([data-heic-processed]) {
opacity: 0;
} .sbtt-post-item img[data-heic-processed="converted"],
.sbtt-post-item img[data-heic-processed="temp"],
.sbtt-post-item img[data-heic-processed="native"],
.sbtt-post-item img[data-heic-processed="cached"] {
opacity: 1;
transition: opacity 0.3s ease-in-out;
} .sbtt-post-item img[data-heic-processed="failed"] {
opacity: 1;
} .sbtt-post-item[data-processing-attempted="1"] .sb-post-item-image:has(img[src*=".heic"]:not([data-heic-processed]))::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: sbtt-shimmer 1.5s infinite;
border-radius: inherit;
z-index: 0;
}
@keyframes sbtt-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
} .sbtt-post-item img[data-heic-processed] {
position: relative;
z-index: 1;
}