vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

visuals: frosted-glass terminal/msgflow, row fade-in, badge pulses

Browse source 
agent terminal-wrap + dashboard msgflow get a translucent bg with
backdrop-filter blur+saturate so page-bg glow softens behind them.
new rows in the live panel and the dashboard message flow fade in
with a 4px slide-up. unread badge pulses; pending-operator-questions
section pulses its glow. history-backfilled rows skip the animation
(.no-anim) so the page doesn't stagger 100 fade-ins on load.
This commit is contained in:
müde 2026-05-15 19:20:15 +02:00
parent 3f2aba4adc
commit fd39226883
3 changed files with 49 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
hive-c0re/assets/dashboard.css
View file

@ -215,6 +215,11 @@ summary:hover { color: var(--purple); }
border: 1px solid var(--amber);
box-shadow: 0 0 12px -4px var(--amber);
padding: 0.6em 0.9em;
animation: questions-pulse 2.4s ease-in-out infinite;
}
@keyframes questions-pulse {
0%, 100% { box-shadow: 0 0 12px -4px rgba(250, 179, 135, 0.55); }
50% { box-shadow: 0 0 22px -2px rgba(250, 179, 135, 0.95); }
}
.questions li.question {
padding: 0.4em 0;
@ -261,7 +266,9 @@ summary:hover { color: var(--purple); }
.inbox .msg-sep { color: var(--muted); }
.inbox .msg-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.msgflow {
background: var(--bg-elev);
background: rgba(24, 24, 37, 0.78);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border: 1px solid var(--border);
padding: 0.8em;
font-size: 0.85em;
@ -269,6 +276,13 @@ summary:hover { color: var(--purple); }
max-height: 32em;
overflow-y: auto;
}
.msgflow .msgrow {
animation: row-fade-in 220ms ease-out both;
}
@keyframes row-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; }
.msgrow.sent .msg-arrow { color: var(--cyan); }
.msgrow.delivered .msg-arrow { color: var(--green); }