fix(ui): simplify Vocero controls and correct session feedback
This commit is contained in:
+48
-216
@@ -505,7 +505,7 @@ a:hover {
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform .22s cubic-bezier(.2,.7,.2,1),
|
||||
box-shadow .3s ease,
|
||||
@@ -541,6 +541,11 @@ a:hover {
|
||||
0 6px 22px rgba(0,0,0,0.28),
|
||||
0 0 34px -6px color-mix(in srgb, var(--brand) 60%, transparent);
|
||||
}
|
||||
#ident-user-name[hidden],
|
||||
#white-stop-btn[hidden],
|
||||
#white-mic-subcaption[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@keyframes pulseDot {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: .78; transform: scale(.9); }
|
||||
@@ -2459,88 +2464,6 @@ body.cam-on .footer {
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* ─── Chat input row (bottom of chat panel, above the button) ──────── */
|
||||
/* NOTE: currently HIDDEN in index.html. Kept seamless here so if/when we
|
||||
re-enable it the form melts visually into the page bg, no separator frame. */
|
||||
.chat-form {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 8px 2px 0;
|
||||
border-top: 0 solid transparent;
|
||||
background: transparent;
|
||||
flex: none;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--bg) 70%, rgba(255,255,255,0.02));
|
||||
border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1;
|
||||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
.chat-input::placeholder {
|
||||
color: color-mix(in srgb, var(--text-dim) 72%, transparent);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.chat-input:hover {
|
||||
border-color: color-mix(in srgb, var(--brand-2) 44%, var(--border));
|
||||
}
|
||||
.chat-input:focus {
|
||||
border-color: color-mix(in srgb, var(--brand-3) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--bg) 82%, rgba(255,255,255,0.04));
|
||||
box-shadow:
|
||||
0 0 0 3px color-mix(in srgb, var(--brand-3) 22%, transparent),
|
||||
0 0 26px -8px color-mix(in srgb, var(--brand-3) 70%, transparent);
|
||||
}
|
||||
.chat-send-btn {
|
||||
flex: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.18), transparent 58%),
|
||||
linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--brand) 82%, transparent),
|
||||
color-mix(in srgb, var(--brand-2) 70%, transparent) 55%,
|
||||
color-mix(in srgb, var(--brand-3) 70%, transparent));
|
||||
border: 1px solid color-mix(in srgb, var(--brand-2) 50%, var(--border));
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.1) inset,
|
||||
0 6px 18px rgba(0,0,0,0.30),
|
||||
0 0 24px -8px color-mix(in srgb, var(--brand-2) 70%, transparent);
|
||||
cursor: pointer;
|
||||
transition: transform .22s ease, box-shadow .3s ease, filter .3s ease;
|
||||
}
|
||||
.chat-send-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.05);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.12) inset,
|
||||
0 10px 22px rgba(0,0,0,0.34),
|
||||
0 0 34px -6px color-mix(in srgb, var(--brand-2) 80%, transparent);
|
||||
}
|
||||
.chat-send-btn:active { transform: translateY(0) scale(0.98); }
|
||||
.chat-send-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 3px color-mix(in srgb, var(--brand-3) 40%, transparent),
|
||||
0 6px 18px rgba(0,0,0,0.30);
|
||||
}
|
||||
|
||||
/* ─── Reports sidebar (LEFT) ───────────────────────────────────────── */
|
||||
/* Behaviour:
|
||||
- desktop (>= 1024px): FIXED to the left edge, 320px, always visible.
|
||||
@@ -4396,29 +4319,14 @@ html[data-theme="white"] .talk-unlocker-spinner {
|
||||
html[data-theme="white"] .talk-unlocker-title { color: #0f172a; }
|
||||
html[data-theme="white"] .talk-unlocker-sub { color: rgba(15,23,42,0.65); }
|
||||
|
||||
/* ── Topbar — flat, no card, center brand, hamburger left, avatar right ── */
|
||||
/* ── Topbar — flat, no card, centered brand and avatar right ── */
|
||||
html[data-theme="white"] .topbar {
|
||||
padding: 18px 18px 6px 18px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
html[data-theme="white"] .menu-btn {
|
||||
color: #0f172a;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.9;
|
||||
}
|
||||
html[data-theme="white"] .menu-btn:hover {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
opacity: 1;
|
||||
}
|
||||
/* ── Topbar layout (theme=white): 3-column grid ──────────────────────────
|
||||
Col1 = hamburger 52 px · Col2 = brand centered · Col3 = user avatar 52 px
|
||||
Balanced side gutters keep the brand centered with an optional avatar.
|
||||
Using a real grid eliminates absolute-position overlap bugs between the
|
||||
avatar circle and the 2-line brand title/subtitle that plagued the previous
|
||||
implementation. Every item lives inside its own grid cell → no collision. */
|
||||
@@ -4437,13 +4345,6 @@ html[data-theme="white"] .topbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
html[data-theme="white"] .menu-btn {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
/* Brand card → strip glass, becomes a transparent centered title block */
|
||||
html[data-theme="white"] .brand {
|
||||
grid-column: 2 / 3;
|
||||
@@ -4502,7 +4403,7 @@ html[data-theme="white"] .ident-user-name {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
@@ -4511,6 +4412,10 @@ html[data-theme="white"] .ident-user-name {
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(59, 130, 246, 0.25);
|
||||
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
|
||||
text-shadow: none;
|
||||
}
|
||||
html[data-theme="white"] .ident-user-name::before {
|
||||
content: none;
|
||||
}
|
||||
html[data-theme="white"] .ident-title {
|
||||
font-size: clamp(24px, 6vw, 32px);
|
||||
@@ -4682,7 +4587,10 @@ html[data-theme="white"] .white-mic-circle .wmc-icon {
|
||||
rules below are written with high specificity and !important on the
|
||||
display property so they cannot be overridden by accidental resets. */
|
||||
html[data-theme="white"] .white-mic-circle.state-idle > svg.wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-idle .wmc-icon.wmc-mic {
|
||||
html[data-theme="white"] .white-mic-circle.state-idle .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-listening .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-user-speaking .wmc-icon.wmc-mic,
|
||||
html[data-theme="white"] .white-mic-circle.state-ai-speaking .wmc-icon.wmc-mic {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-your-turn > svg.wmc-icon.wmc-mic,
|
||||
@@ -4711,13 +4619,13 @@ html[data-theme="white"] .white-mic-circle.state-queued .wmc-icon.wmc-spinner {
|
||||
background: transparent !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle.state-ai-speaking > svg.wmc-icon.wmc-stop,
|
||||
html[data-theme="white"] .white-mic-circle.state-ai-speaking .wmc-icon.wmc-stop {
|
||||
display: inline-flex !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
margin: 7px !important;
|
||||
border-radius: 4px !important;
|
||||
html[data-theme="white"] .white-mic-circle:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
html[data-theme="white"] .white-mic-circle:focus-visible,
|
||||
html[data-theme="white"] .white-stop-btn:focus-visible {
|
||||
outline: 3px solid #1d4ed8;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
/* Subtle ring pulse while listening — uses box-shadow because the ring
|
||||
itself is a hard 4-px painted border and transform:scale() would also
|
||||
@@ -4789,6 +4697,14 @@ html[data-theme="white"] .white-mic-caption {
|
||||
}
|
||||
html[data-theme="white"] .white-mic-caption.muted { color: #64748b; }
|
||||
html[data-theme="white"] .white-mic-caption.error { color: #dc2626; }
|
||||
html[data-theme="white"] .white-mic-subcaption {
|
||||
margin: 0;
|
||||
max-width: 440px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── "Detener" pill ─────────────────────────────────────────────────── */
|
||||
html[data-theme="white"] .white-stop-btn {
|
||||
@@ -4911,32 +4827,38 @@ html[data-theme="white"] .chat-panel-header {
|
||||
border-bottom-width: 1px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
/* Online status pill — green dot + text */
|
||||
/* Session status uses connection events rather than a permanent online badge. */
|
||||
html[data-theme="white"] .chat-status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 5px 11px 5px 8px;
|
||||
background: rgba(22, 163, 74, 0.08);
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
color: #16a34a;
|
||||
color: #475569;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
flex: none;
|
||||
}
|
||||
html[data-theme="white"] .chat-status-pill[data-status="online"] {
|
||||
background: #ecfdf5;
|
||||
color: #15803d;
|
||||
}
|
||||
html[data-theme="white"] .chat-status-pill[data-status="waiting"] {
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
}
|
||||
html[data-theme="white"] .chat-status-pill[data-status="error"] {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
html[data-theme="white"] .chat-status-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 999px;
|
||||
background: #16a34a;
|
||||
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
|
||||
background: currentColor;
|
||||
display: block;
|
||||
flex: none;
|
||||
animation: chatStatusDotPulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes chatStatusDotPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
|
||||
}
|
||||
|
||||
/* ── Chat header actions row: online status pill + conversation export button.
|
||||
@@ -5297,95 +5219,6 @@ html[data-theme="white"] .chat-history .hist-msg.tool .hist-body::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── Chat form (input footer bar): clip · rounded input · blue send ────── */
|
||||
html[data-theme="white"] .chat-form {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 6px 6px 6px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
border-radius: 999px;
|
||||
margin: 4px 0 0;
|
||||
box-shadow: var(--shadow-soft);
|
||||
/* Keep the input row pinned at the bottom of the chat card header; never
|
||||
let the history (flex:1) squeeze the form out of the panel. */
|
||||
flex: none !important;
|
||||
}
|
||||
html[data-theme="white"] .chat-form[hidden],
|
||||
html[data-theme="white"] .chat-form[style*="display:none"] {
|
||||
display: flex !important;
|
||||
}
|
||||
html[data-theme="white"] .chat-attach-btn {
|
||||
flex: none;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
color: #64748b;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
html[data-theme="white"] .chat-attach-btn:hover {
|
||||
color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
html[data-theme="white"] .chat-input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
padding: 0 10px 0 6px;
|
||||
margin: 0;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
color: #0f172a;
|
||||
font-size: clamp(14px, 3.2vw, 16px);
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
html[data-theme="white"] .chat-input::placeholder {
|
||||
color: rgba(15, 23, 42, 0.48);
|
||||
}
|
||||
html[data-theme="white"] .chat-input:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
/* Hide original square send button in white theme */
|
||||
html[data-theme="white"] .chat-form .chat-send-btn {
|
||||
display: none !important;
|
||||
}
|
||||
/* New big round blue send button with paper airplane */
|
||||
html[data-theme="white"] .chat-send-btn-round {
|
||||
flex: none;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
transition: transform 140ms ease, filter 140ms ease;
|
||||
}
|
||||
html[data-theme="white"] .chat-send-btn-round:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
html[data-theme="white"] .chat-send-btn-round svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
stroke-width: 2.2;
|
||||
fill: #ffffff;
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
||||
/* ── App footer: thin white bar, just a subtle separator + brand line ─── */
|
||||
html[data-theme="white"] .app-footer {
|
||||
background: #ffffff;
|
||||
@@ -5512,7 +5345,6 @@ html[data-theme="white"] .switch input:checked + .switch-track {
|
||||
html[data-theme="white"] .white-mic-circle.state-processing .wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-connecting .wmc-spinner,
|
||||
html[data-theme="white"] .white-mic-circle.state-queued .wmc-spinner { width: 34px; height: 34px; }
|
||||
html[data-theme="white"] .white-mic-circle.state-ai-speaking .wmc-stop { width: 30px; height: 30px; }
|
||||
html[data-theme="white"] .white-waveform .w-bar { height: calc(var(--bar-h, 0.5) * 56px); }
|
||||
html[data-theme="white"] .white-waveform { height: 56px; }
|
||||
html[data-theme="white"] .white-waveform-left { left: calc(50% - 49px - 76px); top: calc(14px + 49px); }
|
||||
|
||||
Reference in New Issue
Block a user