wraith/src/assets/css/terminal.css
Vantz Stockwell aa2ef88ed7
All checks were successful
Build & Sign Wraith / Build Windows + Sign (push) Successful in 3m51s
fix: 6 UX regressions — popups, themes, cursor, selection, status bar
Popup windows (tools/editor/help):
- CSP script-src 'self' blocked Tauri's inline IPC bridge scripts in
  child WebviewWindows. Added 'unsafe-inline' to script-src. Still
  restrictive (was null before SEC-4).

Theme application:
- Watcher on sessionStore.activeTheme needed { deep: true } — Pinia
  reactive proxy identity doesn't change on object replacement
- LocalTerminalView.vue had ZERO theme support — added full applyTheme()
  with watcher and mount-time application
- Container background now syncs with theme (was stuck on CSS variable)

Cursor blink:
- terminal.focus() after mount in useTerminal.ts — terminal opened
  without focus, xterm.js rendered static outline instead of blinking block

Selection highlighting:
- applyTheme() was overwriting theme without selectionBackground/
  selectionForeground/selectionInactiveBackground — selection invisible
  after any theme change
- Removed !important from terminal.css that overrode canvas selection
- Bumped default selection opacity 0.3 → 0.4

Status bar:
- h-6 text-[10px] → h-8 text-xs (24px/10px → 32px/12px)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 09:52:43 -04:00

52 lines
1.2 KiB
CSS

/* xterm.js terminal container styling */
.terminal-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: var(--wraith-bg-primary);
}
.terminal-container .xterm {
height: 100%;
}
.terminal-container .xterm-viewport {
overflow-y: auto !important;
}
.terminal-container .xterm-screen {
height: 100%;
}
/* Selection styling — let xterm.js theme handle selection colors.
The !important override was removed because it conflicts with
theme-driven selectionBackground set via terminal.options.theme. */
.terminal-container .xterm-selection div {
background-color: rgba(88, 166, 255, 0.3);
}
/* Cursor styling */
.terminal-container .xterm-cursor-layer {
z-index: 4;
}
/* Scrollbar inside terminal */
.terminal-container .xterm-viewport::-webkit-scrollbar {
width: 8px;
}
.terminal-container .xterm-viewport::-webkit-scrollbar-track {
background: var(--wraith-bg-primary);
}
.terminal-container .xterm-viewport::-webkit-scrollbar-thumb {
background: var(--wraith-border);
border-radius: 4px;
}
.terminal-container .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: var(--wraith-text-muted);
}