b5f21e5fdd
- terminal-session.ts: track SessionStatus (connecting/connected/reconnecting/ exited) + onStatus callback; FIX: wire onTitleChange (onTitle was in opts but never bound — auto-title was dead) - tabs.ts: per-tab status dot (color = connection state), unread flag set on background output + cleared on activate, HTML5 drag-to-reorder (preserves active tab, persisted) - style.css: .tab-dot colors, .unread ring, .dragging/.drag-over feedback - Browser-verified: green dot connected, unread ring after bg output, reorder AAA|BBB→BBB|AAA persists across reload. 191 tests green, typechecks + build ok.
233 lines
4.5 KiB
CSS
233 lines
4.5 KiB
CSS
/* Web Terminal Styling */
|
||
|
||
:root {
|
||
/* Key bar is shown on ALL devices (clickable shortcut buttons). Touch
|
||
devices get a taller bar with bigger tap targets. */
|
||
--tabbar-h: 36px;
|
||
--keybar-h: 42px;
|
||
}
|
||
|
||
/* Touch devices: bigger tap targets for tabs and the key bar. */
|
||
@media (pointer: coarse) {
|
||
:root {
|
||
--tabbar-h: 44px;
|
||
--keybar-h: 58px;
|
||
}
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #1a1a1a;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Tab bar (top) ───────────────────────────────────────────────── */
|
||
#tabbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--tabbar-h);
|
||
background-color: #222;
|
||
border-bottom: 1px solid #3a3a3a;
|
||
display: flex;
|
||
align-items: stretch;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
z-index: 1001;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 4px 0 12px;
|
||
color: #aaa;
|
||
background-color: #2a2a2a;
|
||
border-right: 1px solid #1a1a1a;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
user-select: none;
|
||
max-width: 200px;
|
||
}
|
||
|
||
.tab.active {
|
||
background-color: #1a1a1a;
|
||
color: #fff;
|
||
box-shadow: inset 0 -2px 0 #4a9eff; /* active underline accent */
|
||
}
|
||
|
||
/* Status dot — color reflects connection state. */
|
||
.tab-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
flex: none;
|
||
background-color: #666;
|
||
}
|
||
.dot-connected {
|
||
background-color: #3fb950; /* green */
|
||
}
|
||
.dot-connecting,
|
||
.dot-reconnecting {
|
||
background-color: #d29922; /* amber */
|
||
}
|
||
.dot-exited {
|
||
background-color: #f85149; /* red */
|
||
}
|
||
|
||
/* Unread: an inactive tab got new output — blue ring + brighter label. */
|
||
.tab.unread .tab-dot {
|
||
box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.6);
|
||
}
|
||
.tab.unread .tab-label {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Drag-to-reorder feedback. */
|
||
.tab.dragging {
|
||
opacity: 0.4;
|
||
}
|
||
.tab.drag-over {
|
||
box-shadow: inset 3px 0 0 #4a9eff; /* drop-position indicator */
|
||
}
|
||
|
||
.tab-label {
|
||
padding-right: 8px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Inline rename input (double-click a tab) */
|
||
.tab-rename {
|
||
width: 110px;
|
||
margin: 0 4px;
|
||
padding: 2px 4px;
|
||
font: inherit;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
background: #111;
|
||
border: 1px solid #4a9eff;
|
||
border-radius: 3px;
|
||
outline: none;
|
||
}
|
||
|
||
.tab-close {
|
||
background: none;
|
||
border: none;
|
||
color: #888;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
flex: none;
|
||
}
|
||
|
||
.tab-close:hover {
|
||
background-color: #444;
|
||
color: #fff;
|
||
}
|
||
|
||
/* Desktop (mouse): reveal × on hover/active to reduce clutter.
|
||
Touch devices keep × always visible (no hover). */
|
||
@media (pointer: fine) {
|
||
.tab:not(.active):not(:hover) .tab-close {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.tab-add {
|
||
background: none;
|
||
border: none;
|
||
color: #aaa;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
padding: 0 14px;
|
||
user-select: none;
|
||
flex: none;
|
||
}
|
||
|
||
.tab-add:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Terminal area (holds one .term-pane per tab) ────────────────── */
|
||
#term {
|
||
position: absolute;
|
||
top: var(--tabbar-h);
|
||
left: 0;
|
||
right: 0;
|
||
bottom: var(--keybar-h);
|
||
background-color: #1a1a1a;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.term-pane {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Shortcut key bar (bottom) — shown on ALL devices ────────────── */
|
||
#keybar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--keybar-h);
|
||
background-color: #2a2a2a;
|
||
border-top: 1px solid #3a3a3a;
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
z-index: 1000;
|
||
gap: 0;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
#keybar button {
|
||
flex: 1 0 auto;
|
||
min-width: 48px;
|
||
height: var(--keybar-h);
|
||
padding: 0 8px;
|
||
border: 1px solid #444;
|
||
border-top: none;
|
||
border-bottom: none;
|
||
background-color: #333;
|
||
color: #ddd;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
border-radius: 0;
|
||
transition: background-color 0.12s;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
#keybar button:active {
|
||
background-color: #555;
|
||
}
|
||
|
||
/* Esc is the most-used (interrupt) — make it prominent. */
|
||
#keybar button.keybar-btn-primary {
|
||
background-color: #5a3a12;
|
||
color: #ffcf8f;
|
||
font-weight: 600;
|
||
min-width: 56px;
|
||
}
|
||
|
||
#keybar button.keybar-btn-primary:active {
|
||
background-color: #7a4f18;
|
||
}
|