fix session with split screens

This commit is contained in:
2026-05-24 06:37:59 +00:00
parent 330cf01985
commit 45e18b5423
9 changed files with 760 additions and 224 deletions
+60 -4
View File
@@ -33,6 +33,12 @@ html, body { height: 100%; background: #0d0f14; color: #e2e8f0;
border-color: rgba(255,255,255,0.08);
}
.tab-label { cursor: pointer; }
.tab-rename-input {
background: #0d0f14; border: 1px solid rgba(110,231,183,0.45);
border-radius: 3px; color: #e2e8f0; font-size: 11px;
font-family: inherit; padding: 1px 5px; outline: none;
width: 90px; min-width: 40px;
}
.tab-x {
width: 16px; height: 16px; border: none; border-radius: 3px;
background: transparent; color: inherit; cursor: pointer;
@@ -54,7 +60,53 @@ html, body { height: 100%; background: #0d0f14; color: #e2e8f0;
#termContainer {
position: fixed; top: 36px; left: 0; right: 0; bottom: 48px;
}
.term-pane { width: 100%; height: 100%; }
/* One per tab — holds the entire pane tree for that tab */
.tab-pane { width: 100%; height: 100%; }
/* Leaf node — wraps an xterm canvas */
.term-pane { width: 100%; height: 100%; overflow: hidden; }
/* Active pane highlight (shown only when 2+ panes exist in a tab) */
.pane-active { box-shadow: inset 0 0 0 1px rgba(110,231,183,0.45); }
/* ── Split containers ── */
/* dir 'h': side-by-side with a vertical divider */
.split-h {
display: flex; flex-direction: row;
width: 100%; height: 100%; overflow: hidden;
}
/* dir 'v': stacked with a horizontal divider */
.split-v {
display: flex; flex-direction: column;
width: 100%; height: 100%; overflow: hidden;
}
/* ── Draggable dividers ── */
.split-div-h {
flex: 0 0 4px; height: 100%;
background: rgba(255,255,255,0.07);
cursor: col-resize;
transition: background 0.15s;
position: relative;
}
.split-div-h::after {
content: ''; position: absolute; inset: 0 -2px;
/* wider hit target without affecting layout */
}
.split-div-h:hover { background: rgba(110,231,183,0.35); }
.split-div-v {
flex: 0 0 4px; width: 100%;
background: rgba(255,255,255,0.07);
cursor: row-resize;
transition: background 0.15s;
position: relative;
}
.split-div-v::after {
content: ''; position: absolute; inset: -2px 0;
}
.split-div-v:hover { background: rgba(110,231,183,0.35); }
/* ── Compact toolbar ── */
.toolbar {
@@ -91,9 +143,13 @@ html, body { height: 100%; background: #0d0f14; color: #e2e8f0;
}
.tb-btn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.tb-btn svg { flex-shrink: 0; }
.tb-btn.accent { background: rgba(110,231,183,0.1); color: #6ee7b7;
border: 1px solid rgba(110,231,183,0.15); }
.tb-btn.accent:hover { background: rgba(110,231,183,0.18); }
.tb-btn.accent { background: rgba(110,231,183,0.1); color: #6ee7b7;
border: 1px solid rgba(110,231,183,0.15); }
.tb-btn.accent:hover { background: rgba(110,231,183,0.18); }
.tb-btn.tb-danger { background: rgba(239,68,68,0.08); color: #f87171;
border: 1px solid rgba(239,68,68,0.15); }
.tb-btn.tb-danger:hover { background: rgba(239,68,68,0.16); color: #fca5a5; }
.tb-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.07); flex-shrink: 0; margin: 0 2px; }
/* ── Toast ── */
.toast {