fix(posimai-dev): aurora visibility, scrollbar styling

- Force xterm-viewport/screen/canvas to transparent so container aurora shows through
- theme.background: 'transparent' (was rgba with 0 alpha — some renderers ignored it)
- Scrollbar: 5px, violet 40% opacity, thin Firefox fallback via scrollbar-color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-03-31 07:26:06 +09:00
parent 57fd704497
commit f57125c5b6
1 changed files with 12 additions and 5 deletions

View File

@ -111,10 +111,17 @@
#terminal-container .xterm { height: 100%; } #terminal-container .xterm { height: 100%; }
#terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; } #terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; }
.xterm-viewport::-webkit-scrollbar { width: 4px; } /* xterm 内部の不透明レイヤーを透明化 → aurora が透ける */
.xterm-viewport::-webkit-scrollbar-track { background: transparent; } #terminal-container .xterm-viewport,
.xterm-viewport::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.25); border-radius: 2px; } #terminal-container .xterm-screen,
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); } #terminal-container .xterm-screen canvas { background: transparent !important; }
/* スクロールバー — 右端に固定、細く鮮明に */
.xterm-viewport { scrollbar-width: thin; scrollbar-color: rgba(167,139,250,0.35) transparent; }
.xterm-viewport::-webkit-scrollbar { width: 5px; }
.xterm-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
.xterm-viewport::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.4); border-radius: 3px; }
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.7); }
/* ── Input wrapper (relative anchor for slash popup) ── */ /* ── Input wrapper (relative anchor for slash popup) ── */
.input-wrapper { .input-wrapper {
@ -427,7 +434,7 @@
cursorBlink: true, cursorBlink: true,
allowTransparency: true, allowTransparency: true,
theme: { theme: {
background: 'rgba(12, 18, 33, 0.0)', background: 'transparent',
foreground: '#F3F4F6', foreground: '#F3F4F6',
cursor: '#A78BFA', cursor: '#A78BFA',
selectionBackground: 'rgba(167,139,250,0.3)', selectionBackground: 'rgba(167,139,250,0.3)',