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

test

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-14 20:53:32 +02:00
parent e05b60cee8
commit 8b18c4c27f
1 changed files with 12 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7098,41 +7098,29 @@ button#togglebg {
animation: none;
}
/* ─── Posts Grid Skeleton: always visible shimmer while image loads ──────────────────
The <a.thumb> 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 <a.thumb> 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;
}