feat: reaction TDS styling, debounce read receipts, Escape to skip boot, type fixes
- 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
This commit is contained in:
@@ -325,8 +325,8 @@ globalStyle(`body.${lotusTerminalBodyClass} kbd`, {
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.6)',
|
||||
});
|
||||
|
||||
// Tooltip / title popups: if browser renders them, style if possible
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [title]`, {
|
||||
// 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',
|
||||
});
|
||||
@@ -354,6 +354,32 @@ globalStyle(`body.${lotusTerminalBodyClass}`, {
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ── 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
|
||||
@@ -575,3 +601,28 @@ 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)',
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user