mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-30 08:28:48 +02:00
fix: resolve Quick Prompt popup visibility and model picker issues
- Replace translucent glass background with solid surface-1 color; backdrop-filter does not work with transparent BrowserWindows on Windows, leaving the panel nearly invisible - Add data-quickprompt body attribute to quickprompt.html and CSS overrides to ensure body/root are truly transparent, eliminating the visible rectangle behind the rounded panel - Remove overflow-hidden from qp-panel so model selector dropdown is no longer clipped; the dropdown was positioned absolute and rendered entirely outside the panel bounds - Change ModelSelector to open downward (top-full) instead of upward (bottom-full) for natural command-bar flow - Update dropdown animation direction to match downward opening - Increase blur handler delay to 200ms for safer dropdown interactions Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
+18
-7
@@ -705,17 +705,28 @@ body {
|
||||
|
||||
/* ── Quick Prompt — Glass Command Bar ────────────────────────── */
|
||||
|
||||
/* Override body/root backgrounds when inside the quickprompt window so the
|
||||
transparent BrowserWindow doesn't show a colored rectangle behind the
|
||||
rounded panel. The data attribute is set on the <body> in quickprompt.html. */
|
||||
body[data-quickprompt] {
|
||||
background: transparent !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
body[data-quickprompt] #root {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.qp-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.qp-panel {
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(24px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
||||
background: var(--color-surface-1);
|
||||
box-shadow:
|
||||
0 24px 80px rgba(0, 0, 0, 0.55),
|
||||
0 0 1px rgba(255, 255, 255, 0.06) inset;
|
||||
0 24px 80px rgba(0, 0, 0, 0.6),
|
||||
0 8px 24px rgba(0, 0, 0, 0.4),
|
||||
0 0 1px rgba(255, 255, 255, 0.08) inset;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -795,11 +806,11 @@ body {
|
||||
animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
|
||||
}
|
||||
|
||||
/* Dropdown entrance — opens upward */
|
||||
/* Dropdown entrance — opens downward */
|
||||
@keyframes qp-dropdown-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px) scale(0.97);
|
||||
transform: translateY(-6px) scale(0.97);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user