diff --git a/webui/src/app.css b/webui/src/app.css index 389522e..94fa9d1 100644 --- a/webui/src/app.css +++ b/webui/src/app.css @@ -7,9 +7,9 @@ --t-surface-high: #1e3350; --t-border: #345070; --t-text: #e3edff; - --t-text-dim: #b7cbe8; - --t-primary: #7c8bff; - --t-primary-text: #eceaff; + --t-text-dim: #f2f7ff; + --t-primary: #4fae82; + --t-primary-text: #d9f5e6; --t-on-primary: #0a0e2e; --t-secondary: #bcff5f; --t-error: #ff6b6b; diff --git a/webui/src/lib/Universe.svelte b/webui/src/lib/Universe.svelte index 976fce2..a5852f2 100644 --- a/webui/src/lib/Universe.svelte +++ b/webui/src/lib/Universe.svelte @@ -239,11 +239,7 @@ backgroundColor: 0x000000, antialias: false, resolution: window.devicePixelRatio * resLevels[resIndex], - autoDensity: true, - // keep the last rendered frame in the canvas buffer; without this the - // browser can discard it while the ticker is idle-paused, causing - // black flickering whenever the page recomposites - preserveDrawingBuffer: true + autoDensity: true }); container.appendChild(app.canvas); resButtonText = `res x${resLevels[resIndex]}`; diff --git a/webui/src/lib/components/InfoPanel.svelte b/webui/src/lib/components/InfoPanel.svelte index c5f7cf2..e9c4d20 100644 --- a/webui/src/lib/components/InfoPanel.svelte +++ b/webui/src/lib/components/InfoPanel.svelte @@ -67,7 +67,7 @@ } - + {#key JSON.stringify(info)} diff --git a/webui/src/lib/components/SearchPanel.svelte b/webui/src/lib/components/SearchPanel.svelte index dcffde1..ee00bfd 100644 --- a/webui/src/lib/components/SearchPanel.svelte +++ b/webui/src/lib/components/SearchPanel.svelte @@ -16,7 +16,7 @@ import { onMount, onDestroy } from 'svelte'; export let left = 200; - export let top = 10; + export let top = 56; export let search_results: SearchResult | null = null; export let universe_data: UniverseData; export let hidden = false; @@ -74,7 +74,7 @@ let ro: ResizeObserver | null = null; let spMaxHeight: number | undefined; const spMinWidth = 360; - const spDefaultWidth = 720; + const spDefaultWidth = 780; const spMaxWidth = 960; function normalizeColor(v: string): string | '' { if (!v) return ''; @@ -138,7 +138,7 @@ ro?.disconnect(); ro = new ResizeObserver((entries) => { const w = entries[0].contentRect.width; - sizeClass = w < 420 ? 'xs' : w < 500 ? 'sm' : w < 660 ? 'md' : ''; + sizeClass = w < 420 ? 'xs' : w < 500 ? 'sm' : w < 710 ? 'md' : ''; }); ro.observe(formEl); } @@ -721,7 +721,6 @@ } .input::placeholder { color: var(--t-text-dim); - opacity: 0.8; } .select option { background: var(--t-surface-high); @@ -788,7 +787,7 @@ .pill-wrap { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 0.4rem; } .pill-wrap :global(.tri-pill) { @@ -796,21 +795,21 @@ justify-content: flex-start; } .form.md .pill-wrap { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .form.sm .pill-wrap { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .form.xs .pill-wrap { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(min-content, 1fr)); } .star-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 0.3rem; } .form.md .star-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .form.sm .star-grid { grid-template-columns: repeat(3, 1fr); diff --git a/webui/src/lib/components/SearchResults.svelte b/webui/src/lib/components/SearchResults.svelte index 22b423d..edf1b10 100644 --- a/webui/src/lib/components/SearchResults.svelte +++ b/webui/src/lib/components/SearchResults.svelte @@ -413,12 +413,10 @@ display: flex; gap: 0.8rem; font-size: 0.72rem; - opacity: 0.8; margin: -0.3rem 0 0.4rem; } .empty { font-size: 0.8rem; - opacity: 0.7; padding: 0.25rem 0; } .row { @@ -456,12 +454,10 @@ .row .type, .row .size { font-size: 0.7rem; - opacity: 0.85; } .row .coord { font-size: 0.75rem; font-family: monospace; - opacity: 0.8; margin-right: 0.35rem; } .row .size { diff --git a/webui/src/lib/components/TriPill.svelte b/webui/src/lib/components/TriPill.svelte index 63d7136..c079201 100644 --- a/webui/src/lib/components/TriPill.svelte +++ b/webui/src/lib/components/TriPill.svelte @@ -72,7 +72,6 @@ display: flex; align-items: center; justify-content: center; - opacity: 0.9; } .tri-pill-check svg { width: 0.85rem; diff --git a/webui/src/lib/components/Window.svelte b/webui/src/lib/components/Window.svelte index e1bd8eb..aeeb734 100644 --- a/webui/src/lib/components/Window.svelte +++ b/webui/src/lib/components/Window.svelte @@ -11,6 +11,7 @@ export let minHeight: number | undefined = undefined; export let maxHeight: number | undefined = undefined; export let autoWidth = false; + export let zIndex = 900; let startX = 0; let startY = 0; @@ -28,17 +29,8 @@ effMaxH: number | undefined; let savedHeight = 0; let headerHeight = 0; - let uiScale = 1; - - function readScale() { - if (typeof window === 'undefined') return 1; - const v = getComputedStyle(document.documentElement).getPropertyValue('--ui-scale').trim(); - const n = parseFloat(v); - return isNaN(n) ? 1 : n; - } function dragStart(e: MouseEvent) { - uiScale = readScale(); startX = e.clientX; startY = e.clientY; baseL = left; @@ -73,7 +65,6 @@ e.stopPropagation(); if (d.includes('n') || d.includes('s')) userResized = true; dir = d; - uiScale = readScale(); startX = e.clientX; startY = e.clientY; baseL = left; @@ -106,35 +97,31 @@ function resizeMove(e: MouseEvent) { const dxScreen = e.clientX - startX; const dyScreen = e.clientY - startY; - const dxInternal = dxScreen / uiScale; - const dyInternal = dyScreen / uiScale; let newW = startW; let newH = startH; let newL = baseL; let newT = baseT; if (dir.includes('e')) { - newW = clamp(startW + dxInternal, effMinW, effMaxW); + newW = clamp(startW + dxScreen, effMinW, effMaxW); } if (dir.includes('s')) { - newH = clamp(startH + dyInternal, effMinH, effMaxH); + newH = clamp(startH + dyScreen, effMinH, effMaxH); } if (dir.includes('w')) { - const desired = startW - dxInternal; + const desired = startW - dxScreen; if (effMaxW !== undefined && desired >= effMaxW) { newW = effMaxW; - newL = baseL + (startW - effMaxW) * uiScale; + newL = baseL + (startW - effMaxW); } else { newW = clamp(desired, effMinW, effMaxW); - const internalDelta = startW - newW; - newL = baseL + internalDelta * uiScale; + newL = baseL + (startW - newW); } } if (dir.includes('n')) { - const raw = startH - dyInternal; + const raw = startH - dyScreen; newH = clamp(raw, effMinH, effMaxH); - const internalDelta = startH - newH; - newT = baseT + internalDelta * uiScale; + newT = baseT + (startH - newH); } left = newL; @@ -226,6 +213,7 @@ style:height={collapsed ? headerHeight + 'px' : height ? height + 'px' : undefined} style:min-height={collapsed ? headerHeight + 'px' : minHeight ? minHeight + 'px' : undefined} style:max-height={collapsed ? headerHeight + 'px' : maxHeight ? maxHeight + 'px' : undefined} + style:z-index={zIndex} >