jinghui/hermes-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 1 (#4662): strengthen skeleton shimmer contrast for perceptible motion

Browse Source 
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.
This commit is contained in:
nesquena-hermes authored and nesquena-hermes committed 2026-06-22 18:12:25 +00:00
1 parent b084535b24
commit bafd7ddfd2
1 file changed
+13 -7
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+13 -7
View File
@@ -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;}