Andy Dixon
421bdb9ee8
- Added a latency indicator to the status bar, displaying round-trip time for SSH sessions. - Implemented functionality to select specific sessions for broadcasting input, allowing users to manage broadcast targets. - Enhanced SFTP functionality with bookmark management, enabling users to bookmark directories and navigate to them easily. - Introduced a modal for user-defined snippet variables, allowing dynamic command execution with placeholders. - Added port forwarding management for SSH sessions, including the ability to start and stop port forwards. - Improved terminal output export functionality, allowing users to download or copy terminal output to clipboard.
202 lines
4.6 KiB
CSS
202 lines
4.6 KiB
CSS
/* ==========================================================================
|
|
Nexus Terminal — Application Layout
|
|
Grid shell, sidebar, tab bar, workspace, and status bar structure.
|
|
========================================================================== */
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Main application grid
|
|
----------------------------------------------------------------------- */
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-width) 1fr;
|
|
grid-template-rows: var(--tab-bar-height) 1fr var(--status-bar-height);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--bg-base);
|
|
}
|
|
|
|
/* Collapsed sidebar variant */
|
|
.app.sidebar-collapsed {
|
|
grid-template-columns: var(--sidebar-width-collapsed) 1fr;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Sidebar
|
|
----------------------------------------------------------------------- */
|
|
.sidebar {
|
|
grid-row: 1 / -1;
|
|
grid-column: 1;
|
|
background: var(--bg-surface);
|
|
border-right: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
z-index: var(--z-sticky);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Tab bar
|
|
----------------------------------------------------------------------- */
|
|
.tab-bar {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: var(--tab-bar-height);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
.tab-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Workspace
|
|
----------------------------------------------------------------------- */
|
|
.workspace {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--bg-base);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Panel container — fills workspace, holds session panels */
|
|
.panel-container {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Individual session panel — one per tab, fills the panel container */
|
|
.session-panel {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Terminal container — fills workspace */
|
|
.terminal-container {
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Status bar
|
|
----------------------------------------------------------------------- */
|
|
.status-bar {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
background: var(--bg-surface);
|
|
border-top: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--space-3);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
gap: var(--space-4);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-bar span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.status-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.status-update {
|
|
border: 1px solid var(--accent);
|
|
background: rgba(78, 205, 196, 0.12);
|
|
color: var(--accent);
|
|
font-size: var(--text-xs);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition:
|
|
background 150ms ease,
|
|
color 150ms ease,
|
|
border-color 150ms ease;
|
|
}
|
|
|
|
.status-update:hover {
|
|
background: rgba(78, 205, 196, 0.2);
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-strong, var(--accent));
|
|
}
|
|
|
|
.status-update.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Status bar indicator dots */
|
|
.status-bar .status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
.status-dot.is-connected {
|
|
background: var(--success);
|
|
}
|
|
.status-dot.is-connecting {
|
|
background: var(--warning);
|
|
}
|
|
.status-dot.is-error {
|
|
background: var(--error);
|
|
}
|
|
.status-dot.is-disconnected {
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
/* Latency indicator */
|
|
#status-latency {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#status-latency.latency-good {
|
|
color: var(--success);
|
|
}
|
|
#status-latency.latency-warn {
|
|
color: var(--warning);
|
|
}
|
|
#status-latency.latency-bad {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Resize handle (between sidebar and workspace)
|
|
----------------------------------------------------------------------- */
|
|
.resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
width: 6px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
z-index: var(--z-sticky);
|
|
}
|
|
.resize-handle:hover,
|
|
.resize-handle.is-dragging {
|
|
background: var(--accent-muted);
|
|
}
|