diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 0272e52..64a0392 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -7098,41 +7098,29 @@ button#togglebg { animation: none; } -/* ─── Posts Grid Skeleton: always visible shimmer while image loads ────────────────── - The is always visible — skeleton shimmer shows immediately. - Once the image is loaded (.loaded class added), the shimmer is removed and - the background-image (set via --thumb-bg) is shown. Children stay on top - via their own stacking context. */ +/* ─── Posts Grid Skeleton: always visible, no animation lag ───────────────────────── + Simple static dark placeholder — always painted, zero CPU/GPU cost. + The is always visible; placeholder disappears when .loaded is added. */ -/* Skeleton shimmer on unloaded thumbs — always visible */ +/* Static dark placeholder — always shown, no animation */ div.posts>a.lazy-thumb:not(.loaded) { - background: linear-gradient(90deg, - rgba(255,255,255,0.04) 0%, - rgba(255,255,255,0.09) 45%, - rgba(255,255,255,0.04) 90%); - background-size: 300% 100%; - animation: thumb-shimmer 1.8s ease-in-out infinite; + background: rgba(255, 255, 255, 0.05); } -@keyframes thumb-shimmer { - 0% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} - -/* Once loaded: show the real image and fade in smoothly */ +/* Once loaded: apply real image and briefly fade in */ div.posts>a.thumb.loaded { background-image: var(--thumb-bg); - animation: thumb-reveal 0.3s ease-out both; + animation: thumb-reveal 0.25s ease-out both; } @keyframes thumb-reveal { - from { opacity: 0.4; } + from { opacity: 0.5; } to { opacity: 1; } } -/* Ensure child elements (indicators, labels) are always visible above background */ -div.posts>a.thumb > *, -div.posts>a.thumb .thumb-indicators { +/* Ensure child elements (labels, indicators) stay above the background */ +div.posts>a.thumb > .thumb-indicators, +div.posts>a.thumb > p { position: relative; z-index: 1; } @@ -10443,6 +10431,7 @@ div.posts>a.thumb[data-size="2"] { z-index: 5; pointer-events: none; opacity: 0; + animation: none; /* cancel the global video fadeInFX */ transition: opacity 0.2s ease-in; }