/* Terminal styling for terminal.html (#term-root, full page) and the embedded
TerminalPanel instances in app.html (.term-scope). Same hard-rule exception
policy as landing.css: every rule states why Bootstrap 5.3 cannot express it.
Theme switching sets data-term-* attributes â the markup never carries styles. */
/* ---- Theme variable sets -------------------------------------------------
Bootstrap has no terminal colour system (16 ANSI colours + cursor/prompt).
"site" follows the page's Bootstrap theme via its own CSS variables, so the
default look matches the rest of Salixus; the retro sets are opt-in (/term).
Two scopes carry these: #term-root (the full-page terminal on terminal.html)
and .term-scope (embedded TerminalPanel instances in app.html's device info
screen). Only the layout block further down is #term-root-specific. */
#term-root,
.term-scope {
/* A terminal must be monospace; the page body is sans-serif, so we set the
grid font here rather than inherit it. Default is the traditional, most
widely available monospace stack (Consolas on Windows, Menlo on macOS,
DejaVu/Liberation on Linux, Courier New as the universal last resort). The
font picker on terminal.html swaps this via data-term-font. */
--term-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
"DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
font-family: var(--term-font-family);
--term-bg: var(--bs-body-bg);
--term-fg: var(--bs-body-color);
--term-sys: var(--bs-secondary-color);
--term-tx: var(--bs-primary);
--term-err: var(--bs-danger);
--term-prompt: var(--bs-success);
--term-cursor: var(--bs-body-color);
--term-sel: rgba(13, 110, 253, .35);
--term-0: #6c757d; --term-1: #dc3545; --term-2: #198754; --term-3: #ffc107;
--term-4: #0d6efd; --term-5: #d63384; --term-6: #0dcaf0; --term-7: #dee2e6;
--term-8: #adb5bd; --term-9: #ff6b6b; --term-10: #20c997; --term-11: #ffda6a;
--term-12: #6ea8fe; --term-13: #e685b5; --term-14: #6edff6; --term-15: #f8f9fa;
}
[data-term-theme="green"] {
--term-bg: #0b0f0b; --term-fg: #33ff66; --term-sys: #1f9c46; --term-tx: #7dffa8;
--term-err: #ff5f5f; --term-prompt: #33ff66; --term-cursor: #33ff66;
--term-sel: rgba(51, 255, 102, .3);
}
[data-term-theme="amber"] {
--term-bg: #140d02; --term-fg: #ffb000; --term-sys: #9a6b00; --term-tx: #ffd27f;
--term-err: #ff5f5f; --term-prompt: #ffb000; --term-cursor: #ffb000;
--term-sel: rgba(255, 176, 0, .3);
}
[data-term-theme="solarized"] {
--term-bg: #002b36; --term-fg: #93a1a1; --term-sys: #586e75; --term-tx: #268bd2;
--term-err: #dc322f; --term-prompt: #859900; --term-cursor: #93a1a1;
--term-sel: rgba(38, 139, 210, .3);
--term-0: #073642; --term-1: #dc322f; --term-2: #859900; --term-3: #b58900;
--term-4: #268bd2; --term-5: #d33682; --term-6: #2aa198; --term-7: #eee8d5;
}
[data-term-theme="mono"] {
--term-bg: #000; --term-fg: #e6e6e6; --term-sys: #7a7a7a; --term-tx: #ffffff;
--term-err: #ff6b6b; --term-prompt: #e6e6e6; --term-cursor: #e6e6e6;
--term-sel: rgba(255, 255, 255, .28);
}
/* ---- Layout --------------------------------------------------------------
The terminal is framed as a desktop terminal WINDOW: it fills the viewport
below the status bar minus the page inset, and scrolls internally (never the
page). Bootstrap has no "viewport minus header minus padding" sizing utility,
so the height is computed here.
--term-bar-h the fixed status navbar above it
--term-inset the wrapper's p-2 / p-md-3 padding, top + bottom */
.term-window {
display: flex;
flex-direction: column;
/* --term-vph is set from visualViewport by term.js when a soft keyboard is
open; 100svh is the fallback. svh alone is NOT enough: it is the viewport
height with browser UI shown and does not shrink for the keyboard, which
left the input line stranded behind it on Android. */
height: calc(var(--term-vph, 100svh) - var(--term-bar-h, 3rem) - var(--term-inset, 1rem));
}
@media (min-width: 768px) { .term-window { --term-inset: 2rem; } }
/* The traffic-light dots. Bootstrap can make a circle (.rounded-circle) and
colour it (.bg-*), but has no utility for a fixed 0.7rem box. */
.term-dot {
width: .7rem;
height: .7rem;
flex: 0 0 auto;
}
#term-root {
display: flex;
flex-direction: column;
/* Inside the window frame the terminal just takes the leftover height;
min-height:0 is what lets the log scroll instead of stretching the flex
parent (a flex item's default min-height:auto would ignore overflow). */
flex: 1 1 auto;
min-height: 0;
background: var(--term-bg);
color: var(--term-fg);
font-size: var(--term-font-size, 14px);
}
#term-output {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding: .5rem .75rem 0;
}
#term-inputrow {
flex: 0 0 auto;
padding: 0 .75rem .5rem;
}
/* Shared by the full-page input line and the embedded CDC panel lines. The
block cursor is a span holding a single space; on an empty line that is
trailing whitespace and default white-space:normal collapses it to zero
width, hiding the cursor. Preserve spaces (still wrapping). No Bootstrap
utility does both. */
.term-inputline {
white-space: pre-wrap;
overflow-wrap: anywhere;
/* The line is drawn text, not an , so nothing tells the pointer it can
be clicked into or selected. Bootstrap has no cursor:text utility. */
cursor: text;
}
/* Font size steps come from /term; Bootstrap's .fs-* are heading-scaled and
would not give a stable monospace grid. */
[data-term-size="sm"] { --term-font-size: 12px; }
[data-term-size="md"] { --term-font-size: 14px; }
[data-term-size="lg"] { --term-font-size: 17px; }
[data-term-size="xl"] { --term-font-size: 20px; }
/* Font family picker (terminal.html settings). Each set names the OS-native
font first and falls back to the shared monospace stack, so it degrades to a
sensible terminal font even where the named font is not installed. Bootstrap
has no font-family utilities beyond .font-monospace (a single fixed stack). */
[data-term-font="consolas"] { --term-font-family: Consolas, "Cascadia Mono", "Segoe UI Mono", ui-monospace, monospace; }
[data-term-font="ubuntu"] { --term-font-family: "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace; }
[data-term-font="courier"] { --term-font-family: "Courier New", Courier, monospace; }
/* Terminal lines: preserve runs of spaces (column alignment, hex dumps, ANSI
art) while still wrapping long lines. No Bootstrap utility does both. */
.term-line {
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.35;
min-height: 1.35em;
}
#term-root ::selection,
.term-scope ::selection { background: var(--term-sel); }
/* ---- Embedded panel (app.html device screen: one per CDC port) -----------
A bounded terminal viewport inside a card. Bootstrap has no fixed-height
scroll box, and the panel must paint the theme's terminal colours rather
than the card's body background. */
.term-scope {
background: var(--term-bg);
color: var(--term-fg);
font-size: var(--term-font-size, 13px);
}
.term-panel-out {
height: 11rem;
overflow-y: auto;
overflow-x: hidden;
}
/* ---- Cursor --------------------------------------------------------------
A block cursor that blinks â Bootstrap has no keyframe animations. */
.term-cursor {
color: inherit;
animation: term-blink 1.7s ease-in-out infinite;
/* A thin vertical beam at the insertion point (slim, not a full block). The
span holds a single space; inline-block + min-width keeps a one-cell width
so the caret has a position even on an empty line and following text is not
overlapped. The beam is a left border, not a background, so it stays slim.
No Bootstrap utility draws a terminal caret. */
display: inline-block;
min-width: 1ch;
border-left: 2px solid var(--term-cursor);
}
/* IME composition preview (Android soft keyboards): the word being typed is
shown at the caret before it is committed. It must be visibly distinct from
text that is already in the line â underlined is the platform convention for
"composing". Bootstrap's .text-decoration-underline cannot carry the dotted
style or the reduced emphasis, and no utility expresses "uncommitted". */
.term-compose {
text-decoration: underline dotted;
text-underline-offset: 2px;
opacity: .85;
}
[data-term-cursor="steady"] .term-cursor { animation: none; }
@keyframes term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
@media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } }
/* ---- Semantic line colours (mapped to the active theme's variables) ----- */
.term-prompt { color: var(--term-prompt); font-weight: 600; }
.term-sys { color: var(--term-sys); }
.term-tx { color: var(--term-tx); }
.term-err { color: var(--term-err); }
.term-ts { color: var(--term-sys); opacity: .75; }
.term-raw-tag { color: var(--term-bg); background: var(--term-err); padding: 0 .4rem; font-weight: 600; }
/* ---- ANSI SGR classes ---------------------------------------------------
Emitted by Screen.js for ESC[âŚm sequences; no Bootstrap equivalent. */
.term-fg-0 { color: var(--term-0); } .term-fg-8 { color: var(--term-8); }
.term-fg-1 { color: var(--term-1); } .term-fg-9 { color: var(--term-9); }
.term-fg-2 { color: var(--term-2); } .term-fg-10 { color: var(--term-10); }
.term-fg-3 { color: var(--term-3); } .term-fg-11 { color: var(--term-11); }
.term-fg-4 { color: var(--term-4); } .term-fg-12 { color: var(--term-12); }
.term-fg-5 { color: var(--term-5); } .term-fg-13 { color: var(--term-13); }
.term-fg-6 { color: var(--term-6); } .term-fg-14 { color: var(--term-14); }
.term-fg-7 { color: var(--term-7); } .term-fg-15 { color: var(--term-15); }
.term-bg-0 { background: var(--term-0); } .term-bg-4 { background: var(--term-4); }
.term-bg-1 { background: var(--term-1); } .term-bg-5 { background: var(--term-5); }
.term-bg-2 { background: var(--term-2); } .term-bg-6 { background: var(--term-6); }
.term-bg-3 { background: var(--term-3); } .term-bg-7 { background: var(--term-7); }
.term-bold { font-weight: 700; }
.term-inverse { background: var(--term-fg); color: var(--term-bg); }
/* ---- Key capture --------------------------------------------------------
An invisible but focusable input keeps the mobile keyboard and paste events
working while LineEditor draws the visible line. Bootstrap's .visually-hidden
would clip it out of the layout and break iOS/Android focus behaviour. */
#term-capture,
.term-capture {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
border: 0;
padding: 0;
pointer-events: none;
}