From bafd7ddfd281f4a32cbcadda2ff4cf904d5fe3bc Mon Sep 17 00:00:00 2001 From: nesquena-hermes Date: Mon, 22 Jun 2026 05:46:55 +0000 Subject: [PATCH] Phase 1 (#4662): strengthen skeleton shimmer contrast for perceptible motion The initial sheen (15% sheen / 9% base, 1.4s) was too subtle to read as animation. Bump to a 5-stop gradient (22-24% sheen / 8% base, 1.25s), define explicit light-mode --skeleton-base/--skeleton-sheen tokens (was relying on fallbacks only), and give the tree glyph the same shimmering gradient so it animates with the bars. prefers-reduced-motion still disables the sweep. --- static/style.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/static/style.css b/static/style.css index ab8162af..3c57dece 100644 --- a/static/style.css +++ b/static/style.css @@ -1217,18 +1217,23 @@ padding:8px;margin-bottom:2px;border-radius:8px;min-height:17px;} .skeleton-bar{height:10px;border-radius:var(--radius-pill); background:linear-gradient(90deg, - var(--skeleton-base,color-mix(in srgb,var(--text) 9%,transparent)) 0%, - var(--skeleton-sheen,color-mix(in srgb,var(--text) 15%,transparent)) 50%, - var(--skeleton-base,color-mix(in srgb,var(--text) 9%,transparent)) 100%); - background-size:200% 100%;animation:skeletonSheen 1.4s ease-in-out infinite;} + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 0%, + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 28%, + var(--skeleton-sheen,color-mix(in srgb,var(--text) 24%,transparent)) 50%, + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 72%, + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 100%); + background-size:200% 100%;animation:skeletonSheen 1.25s ease-in-out infinite;} .skeleton-row .skeleton-title{min-width:0;} .skeleton-row .skeleton-stamp{height:8px;width:16px;flex:0 0 auto;opacity:.55;} /* Tree-row skeleton for the workspace file panel */ .skeleton-tree{padding:8px;} .skeleton-tree-row{display:flex;align-items:center;gap:8px;height:28px;padding:0 2px;} .skeleton-tree-row .skeleton-glyph{width:13px;height:13px;border-radius:3px;flex:0 0 auto; - background:var(--skeleton-base,color-mix(in srgb,var(--text) 9%,transparent)); - animation:skeletonSheen 1.4s ease-in-out infinite;background-size:200% 100%;} + background:linear-gradient(90deg, + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 0%, + var(--skeleton-sheen,color-mix(in srgb,var(--text) 24%,transparent)) 50%, + var(--skeleton-base,color-mix(in srgb,var(--text) 8%,transparent)) 100%); + animation:skeletonSheen 1.25s ease-in-out infinite;background-size:200% 100%;} .skeleton-tree-row .skeleton-name{min-width:0;} .skeleton-tree-row .skeleton-size{height:8px;width:22px;flex:0 0 auto;margin-left:auto;opacity:.5;} /* Gentle entrance so the skeleton itself doesn't pop in harshly */ @@ -1242,7 +1247,8 @@ .skeleton-row:nth-child(8){animation-delay:.175s;} @keyframes skeletonSheen{0%{background-position:200% 0;}100%{background-position:-200% 0;}} @keyframes skeletonFadeIn{from{opacity:0;}to{opacity:1;}} - :root.dark{--skeleton-base:color-mix(in srgb,#fff 7%,transparent);--skeleton-sheen:color-mix(in srgb,#fff 13%,transparent);} + :root{--skeleton-base:color-mix(in srgb,var(--text) 8%,transparent);--skeleton-sheen:color-mix(in srgb,var(--text) 22%,transparent);} + :root.dark{--skeleton-base:color-mix(in srgb,#fff 6%,transparent);--skeleton-sheen:color-mix(in srgb,#fff 20%,transparent);} @media (prefers-reduced-motion:reduce){ .skeleton-bar,.skeleton-tree-row .skeleton-glyph{animation:none;background:var(--skeleton-base,color-mix(in srgb,var(--text) 10%,transparent));} .skeleton-row,.skeleton-tree-row,.skeleton-group-label{animation:none;}