kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

jfg

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-12 22:07:27 +02:00
parent 9c6db72d5b
commit f486123cb7
1 changed files with 8 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/s/css/f0ckm.css
View File

@@ -7166,44 +7166,25 @@ button#togglebg {
animation: none; animation: none;
} }
/* ─── Posts Grid Skeleton: GPU-composited shimmer while thumbnail loads ───── */ /* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */
/* Uses ::before + transform:translateX instead of background-position. */
/* background-position forces a CPU repaint every frame for every element; */
/* transform runs on the compositor thread — no main-thread blocking. */
div.posts>a.lazy-thumb:not(.loaded) { div.posts>a.lazy-thumb:not(.loaded) {
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
position: relative;
}
div.posts>a.lazy-thumb:not(.loaded)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, background: linear-gradient(90deg,
transparent 0%, rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.10) 40%,
transparent 100%); rgba(255, 255, 255, 0.04) 80%);
transform: translateX(-100%); background-size: 600px 100%;
animation: shimmer-slide 1.6s ease-in-out infinite; animation: skeleton-shimmer 1.6s ease-in-out infinite;
will-change: transform;
pointer-events: none;
} }
/* Stagger shimmer phases so items feel alive individually */ /* Stagger shimmer phases so items feel alive individually */
div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+2)::before { div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+2) {
animation-delay: 0.2s; animation-delay: 0.2s;
} }
div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+3)::before { div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+3) {
animation-delay: 0.4s; animation-delay: 0.4s;
} }
@keyframes shimmer-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Make individual item entry subtler and faster for infinite scroll */ /* Make individual item entry subtler and faster for infinite scroll */
@keyframes fadeInFX { @keyframes fadeInFX {