From de3dba3c6211c4b2ce90dcfc0b46d277eb5380ce Mon Sep 17 00:00:00 2001 From: dobby-d-elf Date: Tue, 12 May 2026 21:58:22 -0600 Subject: [PATCH] feat: soften sweep edges and widen band for Activity animation --- static/style.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/static/style.css b/static/style.css index 98661718..86bb1891 100644 --- a/static/style.css +++ b/static/style.css @@ -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);}