/** * Sentio Skeleton Loader — shared styles (extension + panel widget). * Prefix: .sentio-skel (collision-checked unique) * * The entire rendering path is CSS. JavaScript builds the shape DOM once, * toggles classes and gates readiness — it never animates and never writes * per-frame styles, so there is no layout thrash. * * NO-JS SAFETY: every rule that hides anything is scoped to `html.sentio-skel-js`, * a class the head-loaded script stamps on before first paint. With * JavaScript disabled that class never exists, so nothing is ever hidden. * * Server-rendered masking is GONE (see the engine header). Skeleton cards now * live in the grid's NORMAL FLOW as siblings of the real items — there is no * overlay, no absolute positioning and no duplicated grid geometry, which is * what lets the host grid size the incoming slots exactly like the outgoing * ones. */ :root { --sentio-skel-base: #e9e6ef; --sentio-skel-shimmer: #f7f5fa; --sentio-skel-speed: 1400ms; --sentio-skel-radius: 6px; } /* ── Outgoing items (REPLACEMENT mode only) ─────────────────── */ /* Taken out of flow immediately — never overlaid, never left visible under a skeleton. Scoped to the JS class so a no-JS visitor never loses content. */ .sentio-skel-js .sentio-skel-outgoing { display: none !important; } /* ── Skeleton cards (in normal flow) ────────────────────────── */ .sentio-skel-card { min-width: 0; pointer-events: none; } .sentio-skel-card__inner { display: flex; flex-direction: column; gap: 10px; height: 100%; min-width: 0; } /* ── Embed placeholder (EMBED mode) ─────────────────────────── */ .sentio-skel-js .sentio-skel-target.is-embed-loading { position: relative; } /* * RESTORED behaviour (regression fix): while the skeleton is up, the embed * underneath is hidden, so the skeleton is the only thing painted in that box. * * This is the old mask rule (`.is-masked > *:not(.sentio-skel)`), re-scoped to * embeds only. Dropping it during the mask removal is what made embed * skeletons imperceptible: overlaying a loading iframe leaves the vendor's own * placeholder painting underneath and, on a composited cross-origin layer, * there is no guarantee the overlay wins. Hiding the embed removes the * question entirely — which is exactly how it behaved when it was visibly * working. * * `visibility` (not `display`) keeps the box, so nothing shifts on swap, and * it does not stop the iframe from loading. */ .sentio-skel-js .sentio-skel-target.is-embed-loading > *:not(.sentio-skel-embed) { visibility: hidden; } .sentio-skel-embed { inset: 0; pointer-events: none; position: absolute; z-index: 2; } .sentio-skel-embed .sentio-skel__shape { height: 100%; width: 100%; } /* ── Standalone panel-widget placeholder ────────────────────── */ .sentio-skel { position: relative; } .sentio-skel__grid { display: grid; gap: var(--sentio-skel-gap, 24px); grid-template-columns: repeat(var(--sentio-skel-cols, 1), minmax(0, 1fr)); } .sentio-skel__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* ── Shapes ─────────────────────────────────────────────────── */ .sentio-skel__shape { background-color: var(--sentio-skel-base); border-radius: var(--sentio-skel-radius); display: block; flex: 0 0 auto; overflow: hidden; position: relative; } .sentio-skel__shape--rect { width: 100%; } .sentio-skel__shape--bar { height: var(--sentio-skel-bar-h, 14px); } .sentio-skel__shape--circle { border-radius: 50%; } .sentio-skel__shape--fill { flex: 1 1 auto; } .sentio-skel__shape--w85 { width: 85%; } .sentio-skel__shape--w70 { width: 70%; } .sentio-skel__shape--w60 { width: 60%; } .sentio-skel__shape--w45 { width: 45%; } .sentio-skel__shape--avatar { height: 56px; width: 56px; } /* Editor-only hint when no target selector is set. */ .sentio-skel-notice { background: #faf8fc; border: 1px dashed #d9d4e4; border-radius: 8px; color: #5a566b; font-size: 13px; padding: 14px 16px; text-align: center; } /* The selector-mode controller renders nothing itself. */ .sentio-skel-controller { display: none; } /* ── Animation: wave ────────────────────────────────────────── */ .sentio-skel--wave .sentio-skel__shape::after, .sentio-skel-card--wave .sentio-skel__shape::after { animation: sentio-skel-wave var(--sentio-skel-speed) linear infinite; background-image: linear-gradient( 90deg, transparent 0, var(--sentio-skel-shimmer) 50%, transparent 100% ); content: ''; inset: 0; position: absolute; transform: translateX(-100%); } @keyframes sentio-skel-wave { 100% { transform: translateX(100%); } } /* ── Animation: pulse ───────────────────────────────────────── */ .sentio-skel--pulse .sentio-skel__shape, .sentio-skel-card--pulse .sentio-skel__shape { animation: sentio-skel-pulse var(--sentio-skel-speed) ease-in-out infinite; } @keyframes sentio-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ── Admin settings page ────────────────────────────────────── */ .sentio-skel-settings__note { max-width: 46em; } /* ── Reduced motion: shapes stay, movement stops ────────────── */ @media (prefers-reduced-motion: reduce) { .sentio-skel--wave .sentio-skel__shape::after, .sentio-skel-card--wave .sentio-skel__shape::after { animation: none; background-image: none; } .sentio-skel--pulse .sentio-skel__shape, .sentio-skel-card--pulse .sentio-skel__shape { animation: none; } }