Charcoal colour palette and improved terminal resize on connect
Theme: - Replace all purple/blue-tinted backgrounds (#1a1a2e, #1f1f35, etc.) with true neutral charcoal greys (#1c1c1c, #232323, #2a2a2a, etc.) - Neutralise text colours (remove blue tint from secondary/tertiary) - Update xterm.js theme and session overlay to match Terminal resize: - Add fitSession(sessionId) method for targeted terminal fitting - Fire fit at 30ms, 150ms, and 500ms after 'connected' state event - Ensures terminal fills container even when layout settles late
This commit is contained in:
@@ -347,7 +347,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(26, 26, 46, 0.85);
|
||||
background: rgba(28, 28, 28, 0.85);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
+17
-17
@@ -8,38 +8,38 @@
|
||||
/* -----------------------------------------------------------------------
|
||||
Colour palette — dark charcoal theme
|
||||
----------------------------------------------------------------------- */
|
||||
--bg-base: #1a1a2e; /* deepest background */
|
||||
--bg-surface: #1f1f35; /* primary surface (sidebar, bars) */
|
||||
--bg-elevated: #252540; /* elevated panels, cards */
|
||||
--bg-overlay: #2a2a4a; /* overlays, dropdowns */
|
||||
--bg-hover: #30304f; /* hover state backgrounds */
|
||||
--bg-active: #353560; /* active / pressed state */
|
||||
--bg-input: #1c1c32; /* input field backgrounds */
|
||||
--bg-base: #1c1c1c; /* deepest background */
|
||||
--bg-surface: #232323; /* primary surface (sidebar, bars) */
|
||||
--bg-elevated: #2a2a2a; /* elevated panels, cards */
|
||||
--bg-overlay: #303030; /* overlays, dropdowns */
|
||||
--bg-hover: #363636; /* hover state backgrounds */
|
||||
--bg-active: #3c3c3c; /* active / pressed state */
|
||||
--bg-input: #1e1e1e; /* input field backgrounds */
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Border colours
|
||||
----------------------------------------------------------------------- */
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--border-default: rgba(255, 255, 255, 0.10);
|
||||
--border-strong: rgba(255, 255, 255, 0.16);
|
||||
--border-subtle: rgba(255, 255, 255, 0.07);
|
||||
--border-default: rgba(255, 255, 255, 0.12);
|
||||
--border-strong: rgba(255, 255, 255, 0.18);
|
||||
--border-focus: var(--accent);
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Text colours
|
||||
----------------------------------------------------------------------- */
|
||||
--text-primary: #e8e8f0;
|
||||
--text-secondary: #a0a0b8;
|
||||
--text-tertiary: #6e6e88;
|
||||
--text-disabled: #4a4a60;
|
||||
--text-inverse: #1a1a2e;
|
||||
--text-primary: #e4e4e4;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-tertiary: #707070;
|
||||
--text-disabled: #4a4a4a;
|
||||
--text-inverse: #1c1c1c;
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Accent colours — teal / cyan
|
||||
----------------------------------------------------------------------- */
|
||||
--accent: #4ecdc4;
|
||||
--accent-hover: #45b7af;
|
||||
--accent-muted: rgba(78, 205, 196, 0.15);
|
||||
--accent-strong: rgba(78, 205, 196, 0.25);
|
||||
--accent-muted: rgba(78, 205, 196, 0.12);
|
||||
--accent-strong: rgba(78, 205, 196, 0.22);
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Status colours
|
||||
|
||||
@@ -134,9 +134,13 @@ class App {
|
||||
window.runtime.EventsOn('session:state', (payload) => {
|
||||
this.tabs.updateSessionState(payload.sessionID, payload.state, payload.error);
|
||||
this.updateStatusBar();
|
||||
// Re-fit the terminal once connected so it picks up the final container size
|
||||
// Re-fit the terminal once connected so it picks up the final container size.
|
||||
// Use multiple delays because the panel layout may still be settling.
|
||||
if (payload.state === 'connected') {
|
||||
setTimeout(() => this.terminals.fitActive(), 50);
|
||||
const fit = () => this.terminals.fitSession(payload.sessionID);
|
||||
setTimeout(fit, 30);
|
||||
setTimeout(fit, 150);
|
||||
setTimeout(fit, 500);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -172,8 +172,15 @@ class TerminalManager {
|
||||
*/
|
||||
fitActive() {
|
||||
const id = this.app.state.activeSessionId;
|
||||
if (!id) return;
|
||||
const entry = this.terminals.get(id);
|
||||
if (id) this.fitSession(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-fits a specific session's terminal to its container.
|
||||
* @param {string} sessionId
|
||||
*/
|
||||
fitSession(sessionId) {
|
||||
const entry = this.terminals.get(sessionId);
|
||||
if (entry) {
|
||||
requestAnimationFrame(() => {
|
||||
try { entry.fitAddon.fit(); } catch (_) { /* noop */ }
|
||||
@@ -266,21 +273,21 @@ class TerminalManager {
|
||||
*/
|
||||
_buildTheme() {
|
||||
return {
|
||||
background: '#1a1a2e',
|
||||
foreground: '#e8e8f0',
|
||||
background: '#1c1c1c',
|
||||
foreground: '#e4e4e4',
|
||||
cursor: '#4ecdc4',
|
||||
cursorAccent: '#1a1a2e',
|
||||
cursorAccent: '#1c1c1c',
|
||||
selectionBackground: 'rgba(78, 205, 196, 0.3)',
|
||||
selectionForeground: '#ffffff',
|
||||
black: '#1a1a2e',
|
||||
black: '#1c1c1c',
|
||||
red: '#ef5350',
|
||||
green: '#66bb6a',
|
||||
yellow: '#ffa726',
|
||||
blue: '#42a5f5',
|
||||
magenta: '#ab47bc',
|
||||
cyan: '#4ecdc4',
|
||||
white: '#e8e8f0',
|
||||
brightBlack: '#464670',
|
||||
white: '#e4e4e4',
|
||||
brightBlack: '#555555',
|
||||
brightRed: '#ff7043',
|
||||
brightGreen: '#81c784',
|
||||
brightYellow: '#ffcc02',
|
||||
|
||||
Reference in New Issue
Block a user