gooneyryan/hermes-webui
1
0
Fork 0
mirror of https://github.com/nesquena/hermes-webui.git synced 2026-05-25 11:10:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: soften sweep edges and widen band for Activity animation

Browse Source
This commit is contained in:
dobby-d-elf
2026-05-12 21:58:22 -06:00
parent 9268f411d8
commit de3dba3c62
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+28
View File
@@ -1883,6 +1883,34 @@ body.resizing .sidebar{transition:none!important;}
.tool-call-group:not(.tool-call-group-collapsed) .tool-call-group-chevron{transform:rotate(90deg);}
.tool-call-group-body{display:block;padding-left:var(--space-3);}
.tool-call-group.tool-call-group-collapsed .tool-call-group-body{display:none;}
.tool-call-group-label{font-weight:600;color:var(--muted);position:relative;display:inline-block;overflow:hidden;}
.tool-call-group[data-live-tool-call-group="1"] .tool-call-group-label{
color:var(--accent);
}
/* Sweep overlay — a bg-colored bar with a narrow transparent gap moves across, hiding text under the solid parts */
@keyframes _tool-shimmer-sweep{
from{-webkit-mask-position:100% 0;mask-position:100% 0;}
to{-webkit-mask-position:-200% 0;mask-position:-200% 0;}
}
.tool-call-group[data-live-tool-call-group="1"] .tool-call-group-label::after{
content:"";
position:absolute;inset:0;
background-color:var(--bg);
pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.6) 47%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.6) 53%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.6) 47%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.6) 53%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
-webkit-mask-size:250% 100%;
mask-size:250% 100%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
animation:_tool-shimmer-sweep 2s linear infinite;
}
/* Fallback for browsers without CSS mask support */
@supports not (mask-image:none){
.tool-call-group[data-live-tool-call-group="1"] .tool-call-group-label::after{
display:none;
}
}
.tool-card{background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-card);margin:2px 0;overflow:hidden;transition:border-color .15s,background-color .15s;}
.tool-card:hover{border-color:var(--border-muted);background:var(--surface-subtle-hover);}
.tool-card-running{border-color:var(--accent-bg-strong);background:var(--accent-bg);}