root
4c4d61600d
- lotus-terminal.css.ts: add reaction chip styles for dark + light TDS modes (cyan border/bg for unselected, orange accent for own/pressed reactions) - useRoomReadPositions: debounce receipt handler at 150ms (M-3) - lotus-boot.ts: Escape key skips boot animation (I-3) - RoomInput.tsx: replace (uploadRes as any) with typed assertion (M-7) - CallEmbedProvider: call mention detection, audio cleanup, display name (C-1, C-2, M-5) - EventReaders: timestamps in seen-by modal, filter self, TDS styling - ReadReceiptAvatars: StackedAvatar pill, TDS visual treatment - chatBackground: add waves/neon/aurora backgrounds - RoomView: auto-apply tactical bg when TDS active and bg is none - settings: extend ChatBackground union type
629 lines
24 KiB
TypeScript
629 lines
24 KiB
TypeScript
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||
|
||
const glitch1 = keyframes({
|
||
'0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
|
||
'92%': { clipPath: 'inset(15% 0 72% 0)', transform: 'skewX(-4deg)' },
|
||
'94%': { clipPath: 'inset(54% 0 22% 0)', transform: 'skewX(3deg)' },
|
||
'96%': { clipPath: 'inset(30% 0 48% 0)', transform: 'skewX(-2deg)' },
|
||
});
|
||
|
||
const glitch2 = keyframes({
|
||
'0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
|
||
'92%': { clipPath: 'inset(60% 0 8% 0)', transform: 'skewX(3deg)' },
|
||
'94%': { clipPath: 'inset(8% 0 68% 0)', transform: 'skewX(-3deg)' },
|
||
'96%': { clipPath: 'inset(42% 0 38% 0)', transform: 'skewX(1deg)' },
|
||
});
|
||
|
||
export const lotusTerminalBodyClass = style({
|
||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
|
||
letterSpacing: '0.02em',
|
||
// Dot-grid background — TDS exact (on body since we're scoped to body class)
|
||
backgroundColor: '#030508',
|
||
backgroundImage: 'radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px)',
|
||
backgroundSize: '28px 28px',
|
||
vars: {
|
||
// Backgrounds
|
||
'--lt-bg-primary': '#030508',
|
||
'--lt-bg-secondary': '#060c14',
|
||
'--lt-bg-tertiary': '#0d1520',
|
||
'--lt-bg-card': '#07101a',
|
||
'--lt-bg-terminal': '#010304',
|
||
// Accent — Orange
|
||
'--lt-accent-orange': '#FF6B00',
|
||
'--lt-accent-orange-bright': '#FF8C2B',
|
||
'--lt-accent-orange-dim': 'rgba(255,107,0,0.12)',
|
||
'--lt-accent-orange-border': 'rgba(255,107,0,0.35)',
|
||
// Accent — Amber
|
||
'--lt-accent-amber': '#FFB300',
|
||
'--lt-accent-amber-dim': 'rgba(255,179,0,0.10)',
|
||
// Accent — Cyan
|
||
'--lt-accent-cyan': '#00D4FF',
|
||
'--lt-accent-cyan-bright': '#33DFFF',
|
||
'--lt-accent-cyan-dim': 'rgba(0,212,255,0.10)',
|
||
'--lt-accent-cyan-border': 'rgba(0,212,255,0.22)',
|
||
// Accent — Green
|
||
'--lt-accent-green': '#00FF88',
|
||
'--lt-accent-green-bright': '#33FFAA',
|
||
'--lt-accent-green-dim': 'rgba(0,255,136,0.10)',
|
||
'--lt-accent-green-border': 'rgba(0,255,136,0.22)',
|
||
// Accent — Red
|
||
'--lt-accent-red': '#FF2D55',
|
||
'--lt-accent-red-dim': 'rgba(255,45,85,0.12)',
|
||
// Accent — Gold
|
||
'--lt-accent-gold': '#FFD700',
|
||
'--lt-accent-gold-dim': 'rgba(255,215,0,0.10)',
|
||
// Accent — Purple
|
||
'--lt-accent-purple': '#BF5FFF',
|
||
'--lt-accent-purple-dim': 'rgba(191,95,255,0.10)',
|
||
// Text
|
||
'--lt-text-primary': '#c4d9ee',
|
||
'--lt-text-secondary': '#7fa3bf',
|
||
'--lt-text-muted': '#3e607a',
|
||
'--lt-text-dim': '#1e3347',
|
||
// Borders
|
||
'--lt-border-color': 'rgba(0,212,255,0.16)',
|
||
'--lt-border-color-hi': '#00D4FF',
|
||
'--lt-border-color-dim': 'rgba(0,212,255,0.07)',
|
||
// Glows — text
|
||
'--lt-glow-orange': '0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55)',
|
||
'--lt-glow-orange-intense':'0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45)',
|
||
'--lt-glow-cyan': '0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45)',
|
||
'--lt-glow-cyan-intense': '0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35)',
|
||
'--lt-glow-green': '0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45)',
|
||
'--lt-glow-green-intense': '0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35)',
|
||
'--lt-glow-amber': '0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40)',
|
||
'--lt-glow-amber-intense': '0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45)',
|
||
'--lt-glow-red': '0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45)',
|
||
// Glows — box
|
||
'--lt-box-glow-orange': '0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08)',
|
||
'--lt-box-glow-cyan': '0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06)',
|
||
'--lt-box-glow-green': '0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06)',
|
||
'--lt-box-glow-red': '0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08)',
|
||
'--lt-box-glow-amber': '0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06)',
|
||
// Fonts
|
||
'--lt-font-mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
|
||
'--lt-font-display': "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
|
||
'--lt-font-crt': "'VT323', 'Courier New', monospace",
|
||
} as any,
|
||
});
|
||
|
||
// Font on all descendants
|
||
globalStyle(`body.${lotusTerminalBodyClass} *`, {
|
||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
|
||
});
|
||
|
||
// Scanlines — EXACT from TDS body::before
|
||
globalStyle(`body.${lotusTerminalBodyClass}::before`, {
|
||
content: "''",
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 3px)',
|
||
pointerEvents: 'none',
|
||
zIndex: 9999,
|
||
});
|
||
|
||
// Vignette — EXACT from TDS body::after
|
||
globalStyle(`body.${lotusTerminalBodyClass}::after`, {
|
||
content: "''",
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.60) 100%)',
|
||
pointerEvents: 'none',
|
||
zIndex: 9998,
|
||
});
|
||
|
||
// Orange caret
|
||
globalStyle(`body.${lotusTerminalBodyClass} input, body.${lotusTerminalBodyClass} textarea`, {
|
||
caretColor: '#FF6B00',
|
||
});
|
||
|
||
// Glitch class support
|
||
globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch`, { position: 'relative' });
|
||
|
||
globalStyle(
|
||
`body.${lotusTerminalBodyClass} .lt-glitch::before, body.${lotusTerminalBodyClass} .lt-glitch::after`,
|
||
{
|
||
content: 'attr(data-text)' as any,
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
overflow: 'hidden',
|
||
}
|
||
);
|
||
|
||
globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::before`, {
|
||
color: '#00D4FF',
|
||
opacity: 0.65,
|
||
animationName: glitch1,
|
||
animationDuration: '4s',
|
||
animationIterationCount: 'infinite',
|
||
});
|
||
|
||
globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::after`, {
|
||
color: '#FF6B00',
|
||
animationName: glitch2,
|
||
animationDuration: '4s',
|
||
animationIterationCount: 'infinite',
|
||
});
|
||
|
||
// Scrollbar styling — matching TDS
|
||
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar`, { width: '6px', height: '6px' });
|
||
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, { background: '#030508' });
|
||
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
|
||
background: 'rgba(0,212,255,0.25)',
|
||
borderRadius: '3px',
|
||
});
|
||
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',
|
||
});
|
||
|
||
// ── Structural elements — scoped TDS layout chrome ────────────────────────
|
||
|
||
// Sidebar/nav: subtle cyan right border
|
||
globalStyle(`body.${lotusTerminalBodyClass} nav`, {
|
||
borderRight: '1px solid rgba(0,212,255,0.10)',
|
||
});
|
||
|
||
// Page headers / toolbars: subtle bottom border glow
|
||
globalStyle(`body.${lotusTerminalBodyClass} header`, {
|
||
borderBottom: '1px solid rgba(0,212,255,0.14)',
|
||
boxShadow: '0 4px 24px rgba(0,0,0,0.55)',
|
||
});
|
||
|
||
// kbd — TDS terminal key style
|
||
globalStyle(`body.${lotusTerminalBodyClass} kbd`, {
|
||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
|
||
fontSize: '0.75em',
|
||
background: '#0d1520',
|
||
border: '1px solid rgba(0,212,255,0.35)',
|
||
borderBottom: '2px solid rgba(0,212,255,0.50)',
|
||
borderRadius: '3px',
|
||
padding: '0.1em 0.45em',
|
||
color: '#00D4FF',
|
||
textShadow: '0 0 4px rgba(0,212,255,0.4)',
|
||
boxShadow: '0 1px 3px rgba(0,0,0,0.6)',
|
||
});
|
||
|
||
// Tooltip / title popups: abbr only — avoid cursor:help on buttons/links
|
||
globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
|
||
textDecoration: 'underline dotted rgba(0,212,255,0.35)',
|
||
cursor: 'help',
|
||
});
|
||
|
||
// abbr
|
||
globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
|
||
textDecoration: 'underline dotted #00D4FF',
|
||
});
|
||
|
||
// time elements — amber muted
|
||
globalStyle(`body.${lotusTerminalBodyClass} time`, {
|
||
color: '#7fa3bf',
|
||
fontSize: '0.78em',
|
||
});
|
||
|
||
// Images: cyan border on hover
|
||
globalStyle(`body.${lotusTerminalBodyClass} img:hover`, {
|
||
outline: '1px solid rgba(0,212,255,0.35)',
|
||
boxShadow: '0 0 12px rgba(0,212,255,0.12)',
|
||
});
|
||
|
||
// Ensure body text color is correct regardless of vanilla-extract theme loading order
|
||
globalStyle(`body.${lotusTerminalBodyClass}`, {
|
||
color: '#c4d9ee',
|
||
});
|
||
|
||
|
||
|
||
// ── Reaction chips (emoji reactions on messages) ────────────────────────────
|
||
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
|
||
backgroundColor: 'rgba(0,212,255,0.06)',
|
||
border: '1px solid rgba(0,212,255,0.22)',
|
||
borderRadius: '6px',
|
||
color: 'rgba(0,212,255,0.85)',
|
||
transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
|
||
});
|
||
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`, {
|
||
backgroundColor: 'rgba(0,212,255,0.13)',
|
||
borderColor: 'rgba(0,212,255,0.45)',
|
||
boxShadow: '0 0 8px rgba(0,212,255,0.18)',
|
||
});
|
||
// Own reaction (aria-pressed = true) → orange accent
|
||
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`, {
|
||
backgroundColor: 'rgba(255,107,0,0.12)',
|
||
border: '1px solid rgba(255,107,0,0.38)',
|
||
color: 'rgba(255,140,0,0.90)',
|
||
});
|
||
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`, {
|
||
backgroundColor: 'rgba(255,107,0,0.20)',
|
||
borderColor: 'rgba(255,107,0,0.60)',
|
||
boxShadow: '0 0 8px rgba(255,107,0,0.22)',
|
||
});
|
||
|
||
// ═══════════════════════════════════════════════════════════════════════════
|
||
// LIGHT MODE — TDS "daylight reading" variant
|
||
// html[data-theme="light"] + body.lotusTerminalBodyClass
|
||
// Mirrors base.css:3614–3684: desaturated accents, off-white bg, no CRT
|
||
// ═══════════════════════════════════════════════════════════════════════════
|
||
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass}`, {
|
||
backgroundColor: '#edf0f5',
|
||
backgroundImage: 'radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px)',
|
||
color: '#111827',
|
||
vars: {
|
||
'--lt-bg-primary': '#edf0f5',
|
||
'--lt-bg-secondary': '#e2e7ef',
|
||
'--lt-bg-tertiary': '#d4dae6',
|
||
'--lt-bg-card': '#ffffff',
|
||
'--lt-bg-terminal': '#f4f6fa',
|
||
'--lt-accent-orange': '#c44e00',
|
||
'--lt-accent-orange-bright':'#d45800',
|
||
'--lt-accent-orange-dim': 'rgba(196,78,0,0.10)',
|
||
'--lt-accent-orange-border':'rgba(196,78,0,0.28)',
|
||
'--lt-accent-amber': '#8a5a00',
|
||
'--lt-accent-amber-dim': 'rgba(138,90,0,0.10)',
|
||
'--lt-accent-cyan': '#0062b8',
|
||
'--lt-accent-cyan-bright': '#0070cc',
|
||
'--lt-accent-cyan-dim': 'rgba(0,98,184,0.10)',
|
||
'--lt-accent-cyan-border': 'rgba(0,98,184,0.22)',
|
||
'--lt-accent-green': '#006d35',
|
||
'--lt-accent-green-bright': '#007d3e',
|
||
'--lt-accent-green-dim': 'rgba(0,109,53,0.10)',
|
||
'--lt-accent-green-border': 'rgba(0,109,53,0.22)',
|
||
'--lt-accent-red': '#b5001f',
|
||
'--lt-accent-red-dim': 'rgba(181,0,31,0.12)',
|
||
'--lt-accent-gold': '#8a5a00',
|
||
'--lt-accent-gold-dim': 'rgba(138,90,0,0.10)',
|
||
'--lt-accent-purple': '#6b2fb8',
|
||
'--lt-accent-purple-dim': 'rgba(107,47,184,0.10)',
|
||
'--lt-text-primary': '#111827',
|
||
'--lt-text-secondary': '#2d3d56',
|
||
'--lt-text-muted': '#5a6e8c',
|
||
'--lt-text-dim': '#8a9ab8',
|
||
'--lt-border-color': 'rgba(50,80,130,0.18)',
|
||
'--lt-border-color-hi': '#0062b8',
|
||
'--lt-border-color-dim': 'rgba(50,80,130,0.09)',
|
||
'--lt-glow-orange': '0 0 0 1px rgba(196,78,0,0.25), 0 1px 6px rgba(196,78,0,0.18)',
|
||
'--lt-glow-orange-intense': '0 0 0 2px rgba(196,78,0,0.35), 0 2px 10px rgba(196,78,0,0.25)',
|
||
'--lt-glow-cyan': '0 0 0 1px rgba(0,98,184,0.25), 0 1px 6px rgba(0,98,184,0.18)',
|
||
'--lt-glow-cyan-intense': '0 0 0 2px rgba(0,98,184,0.35), 0 2px 10px rgba(0,98,184,0.25)',
|
||
'--lt-glow-green': '0 0 0 1px rgba(0,109,53,0.25), 0 1px 6px rgba(0,109,53,0.18)',
|
||
'--lt-glow-green-intense': '0 0 0 2px rgba(0,109,53,0.35), 0 2px 10px rgba(0,109,53,0.25)',
|
||
'--lt-glow-amber': '0 0 0 1px rgba(138,90,0,0.25), 0 1px 6px rgba(138,90,0,0.18)',
|
||
'--lt-glow-amber-intense': '0 0 0 2px rgba(138,90,0,0.35), 0 2px 10px rgba(138,90,0,0.25)',
|
||
'--lt-glow-red': '0 0 0 1px rgba(181,0,31,0.25), 0 1px 6px rgba(181,0,31,0.18)',
|
||
'--lt-box-glow-orange': '0 0 0 2px rgba(196,78,0,0.22), 0 2px 8px rgba(196,78,0,0.12)',
|
||
'--lt-box-glow-cyan': '0 0 0 2px rgba(0,98,184,0.22), 0 2px 8px rgba(0,98,184,0.12)',
|
||
'--lt-box-glow-green': '0 0 0 2px rgba(0,109,53,0.22), 0 2px 8px rgba(0,109,53,0.12)',
|
||
'--lt-box-glow-red': '0 0 0 2px rgba(181,0,31,0.22), 0 2px 8px rgba(181,0,31,0.12)',
|
||
'--lt-box-glow-amber': '0 0 0 2px rgba(138,90,0,0.22), 0 2px 8px rgba(138,90,0,0.12)',
|
||
} as any,
|
||
});
|
||
|
||
// Scanlines + vignette: OFF in light mode (base.css:3676-3678)
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass}::before,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass}::after`,
|
||
{ display: 'none' }
|
||
);
|
||
|
||
// Caret
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} input,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} textarea`,
|
||
{ caretColor: '#c44e00' }
|
||
);
|
||
|
||
// Scrollbar
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, {
|
||
background: '#e2e7ef',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
|
||
background: 'rgba(0,98,184,0.25)',
|
||
borderRadius: '3px',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`, {
|
||
background: 'rgba(0,98,184,0.50)',
|
||
});
|
||
|
||
// Selection
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::selection`, {
|
||
background: 'rgba(196,78,0,0.18)',
|
||
color: '#030508',
|
||
});
|
||
|
||
// Links
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a`, { color: '#0062b8' });
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:hover`, {
|
||
color: '#c44e00',
|
||
textShadow: 'none',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:focus-visible`, {
|
||
outline: '2px solid #0062b8',
|
||
outlineOffset: '2px',
|
||
});
|
||
|
||
// Code
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} code`, {
|
||
background: '#f0f4f8',
|
||
border: '1px solid rgba(0,98,184,0.18)',
|
||
color: '#006d35',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} pre`, {
|
||
background: '#f0f4f8',
|
||
border: '1px solid rgba(0,98,184,0.14)',
|
||
borderLeft: '2px solid #006d35',
|
||
color: '#006d35',
|
||
textShadow: 'none',
|
||
});
|
||
|
||
// Inline semantics
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} strong,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} b`,
|
||
{ color: '#c44e00' }
|
||
);
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} em,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} i`,
|
||
{ color: '#0062b8' }
|
||
);
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} mark`, {
|
||
background: 'rgba(138,90,0,0.15)',
|
||
color: '#8a5a00',
|
||
});
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} del,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} s`,
|
||
{ color: '#b5001f' }
|
||
);
|
||
|
||
// Blockquote
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} blockquote`, {
|
||
borderLeft: '2px solid #c44e00',
|
||
background: 'rgba(196,78,0,0.05)',
|
||
color: '#5a6e8c',
|
||
});
|
||
|
||
// HR
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} hr`, {
|
||
borderTop: '1px solid rgba(0,98,184,0.18)',
|
||
boxShadow: 'none',
|
||
});
|
||
|
||
// Input focus
|
||
globalStyle(
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} input:focus,` +
|
||
`html[data-theme="light"] body.${lotusTerminalBodyClass} textarea:focus`,
|
||
{
|
||
borderColor: '#c44e00',
|
||
boxShadow: '0 0 0 2px rgba(196,78,0,0.22), 0 1px 6px rgba(196,78,0,0.12)',
|
||
}
|
||
);
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [contenteditable="true"]:focus`, {
|
||
boxShadow: '0 0 0 1px rgba(196,78,0,0.40), 0 1px 6px rgba(196,78,0,0.10)',
|
||
});
|
||
|
||
// Tables
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} table`, {
|
||
border: '1px solid rgba(0,98,184,0.18)',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} th`, {
|
||
color: '#c44e00',
|
||
background: 'rgba(196,78,0,0.06)',
|
||
borderBottom: '1px solid rgba(0,98,184,0.18)',
|
||
textShadow: 'none',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} td`, {
|
||
color: '#2d3d56',
|
||
borderBottom: '1px solid rgba(0,98,184,0.08)',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} tr:hover td`, {
|
||
background: 'rgba(196,78,0,0.03)',
|
||
});
|
||
|
||
// Lists
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ul li::marker`, {
|
||
color: '#0062b8',
|
||
content: '"▸ "',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ol li::marker`, {
|
||
color: '#c44e00',
|
||
});
|
||
|
||
// Structural chrome
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} nav`, {
|
||
borderRight: '1px solid rgba(0,98,184,0.12)',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} header`, {
|
||
borderBottom: '1px solid rgba(0,98,184,0.14)',
|
||
boxShadow: '0 1px 8px rgba(0,0,0,0.07)',
|
||
});
|
||
|
||
// kbd
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} kbd`, {
|
||
background: '#e2e7ef',
|
||
border: '1px solid rgba(0,98,184,0.28)',
|
||
borderBottom: '2px solid rgba(0,98,184,0.42)',
|
||
color: '#0062b8',
|
||
textShadow: 'none',
|
||
boxShadow: '0 1px 3px rgba(0,0,0,0.10)',
|
||
});
|
||
|
||
// abbr / time / img
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} abbr[title]`, {
|
||
textDecoration: 'underline dotted #0062b8',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} time`, {
|
||
color: '#5a6e8c',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} img:hover`, {
|
||
outline: '1px solid rgba(0,98,184,0.28)',
|
||
boxShadow: '0 1px 8px rgba(0,98,184,0.08)',
|
||
});
|
||
|
||
// Reaction chips — light TDS
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
|
||
backgroundColor: 'rgba(0,98,184,0.06)',
|
||
border: '1px solid rgba(0,98,184,0.22)',
|
||
borderRadius: '6px',
|
||
color: '#0062b8',
|
||
transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`, {
|
||
backgroundColor: 'rgba(0,98,184,0.12)',
|
||
borderColor: 'rgba(0,98,184,0.42)',
|
||
boxShadow: '0 0 7px rgba(0,98,184,0.16)',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`, {
|
||
backgroundColor: 'rgba(196,78,0,0.10)',
|
||
border: '1px solid rgba(196,78,0,0.35)',
|
||
color: '#c44e00',
|
||
});
|
||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`, {
|
||
backgroundColor: 'rgba(196,78,0,0.18)',
|
||
borderColor: 'rgba(196,78,0,0.55)',
|
||
boxShadow: '0 0 7px rgba(196,78,0,0.18)',
|
||
});
|
||
|