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