Deepen TDS integration: full terminal CSS coverage + 3 new backgrounds

Terminal Mode: - Text selection: orange highlight rgba(255,107,0,0.28) - Links: cyan (#00D4FF) with orange hover glow (#FF6B00) - Code/pre: TDS green (#00FF88) on terminal bg, left green border - Strong/b → orange, em/i → cyan, mark → amber, del → red - Blockquote: orange left border (matches chat reply quotes) - HR: cyan border with dim glow - Input/textarea/[contenteditable] focus: orange glow ring - Tables: TDS headers (orange+uppercase), cyan borders, hover rows - List markers: cyan ▸ for ul, orange for ol - Boot box-drawing alignment fixed (51→52 ═) - data-theme=\"dark\" set on html element when terminal active - Updated description: correct TDS palette names - ▶ Boot replay button in settings (visible when terminal on) Chat backgrounds (+3): - Tactical: LotusGuild TDS exact cyan dot-grid (28px) - Circuit: green grid + node dots on dark terminal bg - Hex Grid: isometric cyan hexagonal outlines Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-13 22:44:34 -04:00
parent 9ebce5b00c
commit c6b1a9d75f
6 changed files with 240 additions and 7 deletions
@@ -157,3 +157,143 @@ globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
 globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`, {
  background: 'rgba(0,212,255,0.50)',
 });
+
+// ── Text selection — orange highlight (TDS aesthetic) ─────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} ::selection`, {
+  background: 'rgba(255,107,0,0.28)',
+  color: '#ffffff',
+});
+
+// ── Links — cyan primary, orange on hover with glow ────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} a`, {
+  color: '#00D4FF',
+  textDecoration: 'none',
+  transition: 'color 0.12s ease, text-shadow 0.12s ease',
+});
+globalStyle(`body.${lotusTerminalBodyClass} a:hover`, {
+  color: '#FF6B00',
+  textShadow: '0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55)',
+});
+globalStyle(`body.${lotusTerminalBodyClass} a:focus-visible`, {
+  outline: '2px solid #00D4FF',
+  outlineOffset: '2px',
+});
+
+// ── Code blocks — TDS exact: green text, dark bg, left border ──────────────
+globalStyle(`body.${lotusTerminalBodyClass} code`, {
+  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
+  fontSize: '0.8em',
+  background: '#010304',
+  border: '1px solid rgba(0,212,255,0.16)',
+  color: '#00FF88',
+  padding: '0.1em 0.4em',
+  borderRadius: '2px',
+});
+globalStyle(`body.${lotusTerminalBodyClass} pre`, {
+  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
+  fontSize: '0.8rem',
+  background: '#010304',
+  border: '1px solid rgba(0,212,255,0.16)',
+  borderLeft: '2px solid #00FF88',
+  color: '#00FF88',
+  textShadow: '0 0 6px rgba(0,255,136,0.35)',
+  padding: '1rem',
+  overflowX: 'auto',
+  whiteSpace: 'pre-wrap',
+  lineHeight: 1.6,
+});
+globalStyle(`body.${lotusTerminalBodyClass} pre code`, {
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+  fontSize: 'inherit',
+  color: 'inherit',
+  textShadow: 'inherit',
+});
+
+// ── Inline text semantics ──────────────────────────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} strong, body.${lotusTerminalBodyClass} b`, {
+  color: '#FF6B00',
+  fontWeight: '700',
+});
+globalStyle(`body.${lotusTerminalBodyClass} em, body.${lotusTerminalBodyClass} i`, {
+  color: '#00D4FF',
+  fontStyle: 'italic',
+});
+globalStyle(`body.${lotusTerminalBodyClass} mark`, {
+  background: 'rgba(255,179,0,0.25)',
+  color: '#FFB300',
+  padding: '0 0.25em',
+});
+globalStyle(`body.${lotusTerminalBodyClass} del, body.${lotusTerminalBodyClass} s`, {
+  color: '#FF2D55',
+  opacity: 0.7,
+});
+
+// ── Blockquote — TDS orange left border (matches reply quotes in chat) ──────
+globalStyle(`body.${lotusTerminalBodyClass} blockquote`, {
+  borderLeft: '2px solid #FF6B00',
+  background: 'rgba(255,107,0,0.05)',
+  color: '#7fa3bf',
+  padding: '0.4rem 0.75rem',
+  margin: '0.25rem 0',
+  fontStyle: 'italic',
+});
+
+// ── Horizontal rule — cyan dim glow ────────────────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} hr`, {
+  border: 'none',
+  borderTop: '1px solid rgba(0,212,255,0.22)',
+  boxShadow: '0 0 6px rgba(0,212,255,0.15)',
+  margin: '1rem 0',
+});
+
+// ── Input / textarea / contenteditable focus — orange glow ─────────────────
+globalStyle(
+  `body.${lotusTerminalBodyClass} input:focus,` +
+  `body.${lotusTerminalBodyClass} textarea:focus`,
+  {
+    outline: 'none',
+    borderColor: '#FF6B00',
+    boxShadow: '0 0 0 2px rgba(255,107,0,0.25), 0 0 12px rgba(255,107,0,0.12)',
+  }
+);
+globalStyle(`body.${lotusTerminalBodyClass} [contenteditable="true"]:focus`, {
+  outline: 'none',
+  boxShadow: '0 0 0 1px rgba(255,107,0,0.45), 0 0 12px rgba(255,107,0,0.12)',
+});
+
+// ── Tables — TDS style ──────────────────────────────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} table`, {
+  width: '100%',
+  borderCollapse: 'collapse',
+  fontSize: '0.8rem',
+  border: '1px solid rgba(0,212,255,0.16)',
+});
+globalStyle(`body.${lotusTerminalBodyClass} th`, {
+  color: '#FF6B00',
+  fontWeight: '700',
+  textTransform: 'uppercase',
+  letterSpacing: '0.10em',
+  padding: '0.5rem 0.75rem',
+  borderBottom: '1px solid rgba(0,212,255,0.22)',
+  background: 'rgba(255,107,0,0.06)',
+  textAlign: 'left',
+});
+globalStyle(`body.${lotusTerminalBodyClass} td`, {
+  padding: '0.5rem 0.75rem',
+  borderBottom: '1px solid rgba(0,212,255,0.07)',
+  color: '#c4d9ee',
+});
+globalStyle(`body.${lotusTerminalBodyClass} tr:hover td`, {
+  background: 'rgba(255,107,0,0.035)',
+});
+
+// ── Lists — add TDS prefix character ───────────────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} ul li::marker`, {
+  color: '#00D4FF',
+  content: '"▸ "',
+});
+globalStyle(`body.${lotusTerminalBodyClass} ol li::marker`, {
+  color: '#FF6B00',
+});