/* =====================================================================
wc-crt-ftelnet.css -- Manic Modem CRT, the in-browser terminal
---------------------------------------------------------------------
Skins the fTelnet client on http\public\telnet\default.htm, plus that
page's own shell.
THE VENDOR SHEET IS NOT EDITED
http\public\ftelnet\ftelnet.css belongs to fTelnet and is replaced
wholesale whenever the client is updated -- the header comment on
default.htm dates the current copy to 2026-09-14. Anything written
into it would be lost on the next drop, so it is left untouched and
answered from here instead.
SPECIFICITY, NOT SOURCE ORDER
fTelnet does not its own stylesheet from the page. The client
script injects it at runtime (look for id="fTelnetCss" in the live
DOM, alongside id="fTelnetKeyboardCss"), which means it lands in
AFTER this file no matter where this file's sits. A
plain .fTelnetStatusBar here would lose on source order.
So every colliding rule is written one specificity step higher, via
the #fTelnetContainer id the page supplies. The vendor's own colour
rules are all single-class (0,1,0); an id descendant is (1,1,0) and
wins regardless of order.
That handles the stylesheet. It does NOT handle the status bar, which
the client paints inline from JavaScript -- the only two !important
declarations in this file are there, and the block above them says
why they are earned and why they are not a flat override.
Same trick, same reason as custom\wcsmq.css -- see section 1 of
THEME.md, "Overrides".
THE CANVAS IS DELIBERATELY UNTOUCHED
.fTelnetCrtCanvas is the ANSI screen itself. Its colours are the
BBS's own ANSI, drawn by the client from the CP437 font sheets in
http\public\ftelnet\fonts\. Re-tinting it would falsify what the
board actually looks like over a real telnet session, which is the
one thing this page exists to show. Only the chrome around it is
themed.
AT-RULES ARE SAFE HERE
This file is reached by and served raw, and default.htm is a
.htm under http\public\ which wcWEB does NOT run through the WCT
macro processor (verified: a probe file containing macros came back
with them unsubstituted). So at-rules and at-signs are both fine --
unlike wc10.css and the .wct pages. That is why this file may carry a
media query and the home page may not.
===================================================================== */
:root{
--r-box: 6px; /* containers: cards, panels, dialogs */
--r-ctl: 3px; /* controls: buttons, inputs, chips, tabs, scrollbar thumbs */
--r-pill: 999px; /* status badges only */
--void: #070b09;
--panel: #0d1411;
--panel-2: #121b17;
--rule: #1c2b24;
--rule-lit: #274034;
--phosphor: #4df08a;
--phosphor-dim: #2a9d5c;
--phosphor-deep: #1b6b3d;
--amber: #ffb454;
--alert: #ff6b5e;
--text: #b9d6c6;
--text-dim: #6d8a7c;
--text-faint: #3f574c;
--mono: ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,
"SFMono-Regular",Menlo,"DejaVu Sans Mono",monospace;
--glow: 0 0 6px rgba(77,240,138,.30);
}
/* ---------------------------------------------------------------------
1. The page shell
Stock default.htm carried BGCOLOR="#FFFFFF" TEXT="#000000" as body
attributes. Those are presentational attributes, not inline style, so
a plain body rule outranks them -- but they are removed from the page
anyway rather than left to be overridden.
------------------------------------------------------------------ */
html,body{ height:100% }
body{
margin:0;
background:var(--void);
color:var(--text);
font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
"Helvetica Neue",Arial,sans-serif;
}
a{ color:var(--phosphor-dim); text-decoration:none }
a:hover{ color:var(--phosphor); text-decoration:underline }
a:focus-visible{ outline:2px solid var(--amber); outline-offset:2px }
/* Slim bar, not the full masthead: this page is a terminal and the
screen is the content. Matches the home page's header rule so the two
read as the same site. */
.crt-tbar{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap;
max-width:1100px; margin:0 auto; padding:12px 16px;
border-bottom:1px solid var(--rule);
}
.crt-tbar .crt-brand{ display:flex; align-items:center; gap:10px }
/* The mark, same data URI and same derivation as wc10.css and
wc-crt.css. Master artwork with the full notes:
http\public\graphics\manicmodem-crt.svg */
.crt-tbar .crt-mark{
width:34px; height:29px; flex:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 84'%3E%3Cpath d='M37.5,0L54.5,30.4L64,15.3L93.3,64.1L72.6,64.1L62.2,47.7L52.5,64.1L0,64.1Z' fill='%231b6b3d'/%3E%3Cpath d='M42.5,19L59.5,49.4L69,34.3L98.3,83.1L77.6,83.1L67.2,66.7L57.5,83.1L5,83.1Z' fill='%234df08a'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:contain;
filter:drop-shadow(0 0 5px rgba(77,240,138,.28));
}
/* The board name renders exactly as config\WILDCAT.domain spells it:
"Manic Modem BBS", never uppercased. House rule -- see README. */
.crt-tbar h1{
font-family:var(--mono); font-size:15px; font-weight:600;
letter-spacing:.06em;
margin:0; color:var(--phosphor); text-shadow:var(--glow);
}
/* Same chip as .btn on the home page and .pagebutton on the client
pages, restated here because this page loads no other sheet. */
.crt-btn{
display:inline-block;
font-family:var(--mono); font-size:12px; font-weight:500;
letter-spacing:.04em;
padding:7px 12px; border-radius: var(--r-ctl);
background:var(--panel-2); color:var(--phosphor);
border:1px solid var(--rule-lit);
transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.crt-btn:hover{
background:var(--phosphor-deep); border-color:var(--phosphor-dim);
color:#eafff2; text-shadow:var(--glow); text-decoration:none;
}
.crt-stage{ padding:20px 16px 28px }
.crt-note{
max-width:1100px; margin:16px auto 0; padding:0 4px;
font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
text-align:center;
}
/* ---------------------------------------------------------------------
2. fTelnet chrome
Every selector below is id-scoped for the reason in the header.
------------------------------------------------------------------ */
/* The bezel around the ANSI screen. Vendor: 1px solid black. */
#fTelnetContainer .fTelnetClientContainer{
border:1px solid var(--rule-lit);
box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(77,240,138,.10);
}
/* THE ONE PLACE !important IS EARNED, AND WHY IT IS NOT A FLAT OVERRIDE
The status bar is the connection line -- "Connecting to bbs:23 via
manic-modem.com". The stylesheet paints it blue, but the client also
writes the colour INLINE as the connection changes state, and an
inline style beats every selector (constraint 6 in THEME.md section
5). Grepping ftelnet.norip.xfer.min.js for the assignments gives all
seven of them, and they carry meaning:
blue Connecting to ... / Connecting via ... / Connected to ...
red Disconnected from ... / Unable to connect to ...
So the colour is a state signal, not decoration. Forcing one value
with !important would theme the bar and throw the signal away -- you
would no longer be able to tell a live session from a dead one at a
glance, which on a terminal page is the single most useful thing the
chrome tells you.
Instead: the normal state is answered with !important, and the fault
state is matched on the inline attribute text and answered again, one
specificity step higher, in the theme's alert colour. Same technique
as the whos_online.htm row highlights in section 15 of wc-crt.css --
match the attribute rather than fight it.
If a future fTelnet drop changes those literals, this bar silently
goes back to blue. Re-run the grep. */
#fTelnetContainer .fTelnetStatusBar{
background-color:var(--panel) !important;
border:1px solid var(--rule-lit);
border-top:0;
color:var(--text-dim);
font:12px/1.5 var(--mono);
padding:7px 10px;
}
#fTelnetContainer .fTelnetStatusBar[style*="red"]{
background-color:rgba(255,107,94,.12) !important;
border-color:var(--alert);
color:var(--alert);
}
#fTelnetContainer .fTelnetStatusBarLabel{ color:inherit }
/* The 80x25 canvas is taller than its box, so the client container
carries a permanent scrollbar -- default chrome, and bright white
against everything else here. */
#fTelnetContainer .fTelnetClientContainer{ scrollbar-color:var(--rule-lit) var(--void) }
#fTelnetContainer .fTelnetClientContainer::-webkit-scrollbar{ width:10px; height:10px }
#fTelnetContainer .fTelnetClientContainer::-webkit-scrollbar-track{ background:var(--void) }
#fTelnetContainer .fTelnetClientContainer::-webkit-scrollbar-thumb{
background:var(--rule-lit); border-radius: var(--r-ctl);
}
#fTelnetContainer .fTelnetClientContainer::-webkit-scrollbar-thumb:hover{
background:var(--phosphor-deep);
}
/* Vendor: white chip, black text, 5px radius, Arial. */
#fTelnetContainer .fTelnetMenuButton,
#fTelnetContainer .fTelnetConnectButton{
background-color:var(--panel-2);
border:1px solid var(--rule-lit);
border-radius: var(--r-ctl);
color:var(--phosphor);
font:12px/1 var(--mono);
letter-spacing:.04em;
padding:7px 12px;
text-shadow:none;
}
#fTelnetContainer .fTelnetMenuButton:hover,
#fTelnetContainer .fTelnetConnectButton:hover{
background-color:var(--phosphor-deep);
border-color:var(--phosphor-dim);
color:#eafff2;
text-decoration:none;
}
/* The Menu popup: a white panel with white buttons and a white table. */
#fTelnetContainer .fTelnetMenuButtons{
background-color:var(--panel);
border:1px solid var(--rule-lit);
color:var(--text);
box-shadow:0 8px 24px rgba(0,0,0,.6);
}
#fTelnetContainer .fTelnetMenuButtons table{ background-color:transparent }
#fTelnetContainer .fTelnetMenuButtons a{
background-color:var(--panel-2);
border:1px solid var(--rule-lit);
border-radius: var(--r-ctl);
color:var(--phosphor);
font:12px/1 var(--mono);
padding:8px 12px;
}
#fTelnetContainer .fTelnetMenuButtons a:hover{
background-color:var(--phosphor-deep);
border-color:var(--phosphor-dim);
color:#eafff2;
text-decoration:none;
}
#fTelnetContainer .fTelnetMenuButtons select{
background-color:var(--void);
border:1px solid var(--rule-lit);
border-radius: var(--r-ctl);
color:var(--phosphor);
font:12px/1.4 var(--mono);
padding:7px 10px;
}
/* Vendor paints this solid green -- which in this theme reads as a
normal surface rather than the "you are scrolled back" state it is.
Amber is the theme's one attention hue (THEME.md section 3), and
being scrolled away from live output is exactly that. */
#fTelnetContainer .fTelnetScrollback{
background-color:var(--panel);
border:1px solid var(--amber);
color:var(--amber);
font:12px/1.5 var(--mono);
padding:7px 10px;
}
#fTelnetContainer .fTelnetScrollback a{
color:var(--amber);
text-decoration:underline;
}
/* Vendor: solid red. Kept as a genuine alert, pulled to the theme's
red so it does not vibrate against the near-black. */
#fTelnetContainer .fTelnetFocusWarning{
background-color:rgba(255,107,94,.12);
border:1px solid var(--alert);
color:var(--alert);
font:12px/1.5 var(--mono);
padding:7px 10px;
}
/* The on-screen keyboard, shown on touch devices. Vendor keys are
#444 on #eee from keyboard-320.min.css, injected as id
fTelnetKeyboardCss -- same runtime-injection story as above. */
#fTelnetContainer .fTelnetKeyboard{ background-color:var(--panel) }
#fTelnetContainer .fTelnetKeyboardKey{
background-color:var(--panel-2);
border:1px solid var(--rule);
color:var(--text);
font-family:var(--mono);
}
#fTelnetContainer .fTelnetKeyboardKey:active{
background-color:var(--phosphor-deep);
border-color:var(--phosphor-dim);
color:#eafff2;
}
/* The client writes this while the script boots. */
#fTelnetContainer .fTelnetInitMessage{
color:var(--text-dim);
font-family:var(--mono); font-size:12.5px;
text-align:center;
}
/* ---------------------------------------------------------------------
3. Small screens
The terminal is a fixed 80x25 canvas and does not reflow, so there is
nothing to rearrange -- only the shell needs to stop competing with it
for width. Permitted here because this file is ed, not included.
------------------------------------------------------------------ */
@media (max-width: 560px){
.crt-tbar{ padding:10px 12px }
.crt-tbar h1{ font-size:13px }
.crt-stage{ padding:12px 8px 20px }
}