mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
feat(voice): reconcile preview and settings with main
add the shared Voice Preview and Settings panel with browser-local preview and inactivity preferences, keyboard controls and responsive positioning preserve main’s Rotation and Context behavior, clarify panel routing and refresh schema pins within the unchanged prompt limit
This commit is contained in:
manjunath committed
1 parent
9d3548c27c
commit
5c3b66c263
39 files changed
+5274
-111
No files matched your search
@@ -387,3 +387,249 @@ body.recording-mode .gev-pointer-reticle {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Opt-in shared panel: header stays fixed while only the body scrolls. */
|
||||
#gev-voice-control .gev-voice-panel {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.7rem);
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: clamp(18rem, 26vw, 22rem);
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
max-height: min(
|
||||
28rem,
|
||||
max(7.5rem, calc(100dvh - 12rem - var(--gev-provider-lift, 0px)))
|
||||
);
|
||||
box-sizing: border-box;
|
||||
padding: 0.6rem 0.7rem 0.65rem;
|
||||
color: rgba(223, 245, 250, 0.92);
|
||||
background: rgba(7, 22, 31, 0.96);
|
||||
border: 1px solid rgba(54, 220, 255, 0.34);
|
||||
border-radius: 0.6rem;
|
||||
box-shadow:
|
||||
0 0.85rem 2rem rgba(0, 0, 0, 0.58),
|
||||
0 0 1.2rem rgba(0, 212, 255, 0.08);
|
||||
backdrop-filter: blur(24px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.3);
|
||||
color-scheme: dark;
|
||||
font: 0.75rem/1.45 var(--font-sans);
|
||||
text-align: left;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
:root[data-ui-theme='cyber'] #gev-voice-control .gev-voice-panel {
|
||||
background-color: var(--cyber-panel-surface);
|
||||
background-image: var(--cyber-panel-surface-detail);
|
||||
border-color: var(--glass-border);
|
||||
box-shadow: var(--cyber-panel-shadow);
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel[hidden],
|
||||
#gev-voice-control .gev-voice-panel [hidden] {
|
||||
display: none;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel-header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.35rem;
|
||||
padding: 0 0 0.5rem;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.gev-voice-panel-title {
|
||||
color: var(--voice-panel-accent, var(--accent));
|
||||
font: 600 0.65rem/1 var(--font-mono);
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.gev-voice-panel-tabs {
|
||||
margin-left: auto;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel-header .gev-voice-panel-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel-tab-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.gev-voice-panel-header [role='tablist'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
#gev-voice-control
|
||||
.gev-voice-panel
|
||||
:is(.gev-voice-panel-header button, select, input[type='number']) {
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
color: var(--text-primary);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 0.3rem;
|
||||
font: inherit;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel .gev-voice-panel-header button {
|
||||
padding: 0 0.6rem;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
#gev-voice-control #gev-voice-settings-close {
|
||||
width: 2rem;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel-header button:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--voice-panel-accent, var(--accent));
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel [role='tab'][aria-selected='true'] {
|
||||
color: var(--voice-panel-accent, var(--accent));
|
||||
border-color: currentColor;
|
||||
box-shadow: 0 -2px 0 currentColor inset;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel [role='tab']:focus,
|
||||
#gev-voice-control .gev-voice-panel :focus-visible {
|
||||
outline: 2px solid var(--voice-panel-accent, var(--accent));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.gev-voice-panel-body {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
padding: 0.55rem 0.75rem 3px 3px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.gev-voice-panel-body .gev-voice-card-who {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.gev-voice-panel-body p {
|
||||
margin: 0;
|
||||
}
|
||||
.gev-voice-preference {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.gev-voice-preference-toggle {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
min-height: 2.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gev-voice-preference-toggle input {
|
||||
flex: 0 0 auto;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: var(--voice-panel-accent, var(--accent));
|
||||
}
|
||||
.gev-voice-setting-title {
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.gev-voice-timeout-group {
|
||||
margin-top: 0.65rem;
|
||||
padding-top: 0.65rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
.gev-voice-timeout-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
#gev-voice-timeout-select {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 0 0.45rem;
|
||||
}
|
||||
#gev-voice-timeout-input {
|
||||
flex: 0 0 4.5rem;
|
||||
width: 4.5rem;
|
||||
padding: 0 0.45rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.gev-voice-timeout-unit {
|
||||
order: 1;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
.gev-voice-timeout-controls:has(#gev-voice-timeout-input[hidden])
|
||||
.gev-voice-timeout-unit {
|
||||
display: none;
|
||||
}
|
||||
.gev-voice-settings-note {
|
||||
color: rgba(190, 221, 230, 0.72);
|
||||
font-size: 0.63rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.gev-voice-settings-note:not(:empty) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
#gev-voice-control .gev-voice-panel .gev-voice-card {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
animation: none;
|
||||
}
|
||||
#command-dock > #gev-voice-control:has(.gev-voice-panel:not([hidden])) {
|
||||
z-index: 101;
|
||||
}
|
||||
#gev-voice-control:has(.gev-voice-panel:not([hidden])) .gev-voice-help-tray {
|
||||
display: none;
|
||||
}
|
||||
#command-dock #gev-voice-control[data-provider-choice='true'] .gev-voice-panel {
|
||||
bottom: min(
|
||||
calc(100% + 4.8rem + var(--gev-provider-lift)),
|
||||
calc(100dvh - 7.75rem)
|
||||
);
|
||||
}
|
||||
|
||||
#command-dock.dock-has-pinned-tray
|
||||
#gev-voice-control:not([data-provider-choice='true'])
|
||||
.gev-voice-panel {
|
||||
bottom: min(
|
||||
calc(100% + 1.7rem + var(--dock-pinned-stack-height)),
|
||||
calc(100dvh - 18rem)
|
||||
);
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
#gev-voice-control
|
||||
.gev-voice-panel
|
||||
:is(
|
||||
.gev-voice-panel-header button,
|
||||
select,
|
||||
input[type='number'],
|
||||
.gev-voice-card-dismiss
|
||||
) {
|
||||
min-height: 44px;
|
||||
}
|
||||
#gev-voice-control
|
||||
.gev-voice-panel
|
||||
:is(.gev-voice-panel-header button, .gev-voice-card-dismiss) {
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* A connection error remains reachable even while the manual panel is open. */
|
||||
#gev-voice-control:has(.gev-voice-panel) .gev-voice-error-tray {
|
||||
z-index: 12;
|
||||
}
|
||||
Reference in new issue
Block a user