Files
cinny/src/lotus-terminal.css.ts
T
Lotus CIandClaude Opus 5.5 1e217592fc
CI / Build & Quality Checks (pull_request) Successful in 1m35s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 6s
CI / Playwright smoke (e2e) (pull_request) Successful in 7m55s
fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246)
Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard
radiogroup, voters) is unchanged.

- Every row shows "N votes · P%". Multiple choice looked broken as
  "100% / 100%" with no counts; the footer now says "voters" there.
- Results are a thin progress bar under each answer: accent for your pick,
  success for the winner, neutral otherwise. The old full-row fill was the
  same grey as the row, so a 100% answer just looked disabled.
- Radio and checkbox indicators are 18px with a 2px border in a colour mixed
  from the theme's text colour. Primary.ContainerLine was nearly invisible,
  especially in dark themes.
- The winner shows a star and "Winner" instead of a second check mark.
- Bordered card, 460px wide (max 100%, same width for every poll). The header
  is now "Poll · Single choice | Pick up to N | Results hidden until the end |
  Final results", replacing the letter-spaced "◉ POLL · …" line.
- Footer: plain muted text that wraps, and chips ("Who voted", "End poll")
  that never wrap. Previously the chip label broke onto two lines inside a
  one-line chip and spilled out of it. Reproduced before/after in Lotus
  Terminal at 150% zoom, a 360px phone, and dark at 125%.
- Lotus Terminal theme: data-winner gets its own green border rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
2026-09-27 23:18:25 -04:00

972 lines
37 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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",
// Semantic surface aliases (poll, location, upload card, gif picker)
'--bg-surface': '#07101a',
'--bg-surface-low': '#060c14',
'--bg-surface-active': 'rgba(0,212,255,0.12)',
'--bg-surface-border': 'rgba(0,212,255,0.20)',
'--text-primary': '#c4d9ee',
},
});
// 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)',
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)',
// Semantic surface aliases — light overrides
'--bg-surface': '#ffffff',
'--bg-surface-low': '#e2e7ef',
'--bg-surface-active': 'rgba(0,98,184,0.10)',
'--bg-surface-border': 'rgba(0,98,184,0.22)',
'--text-primary': '#111827',
},
});
// 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)',
},
);
// ── GIF picker (terminal mode) ───────────────────────────────────────────────
globalStyle(
`body.${lotusTerminalBodyClass} [data-gif-terminal] input,` +
`body.${lotusTerminalBodyClass} [data-gif-terminal] form`,
{
background: '#030c14 !important',
color: '#e8edf5 !important',
fontFamily: "'JetBrains Mono','Cascadia Code','Fira Code',monospace !important",
border: '1px solid rgba(255,107,0,0.35) !important',
borderRadius: '4px !important',
fontSize: '12px !important',
boxShadow: 'none !important',
},
);
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] input:focus`, {
borderColor: 'rgba(255,107,0,0.70) !important',
boxShadow: '0 0 0 2px rgba(255,107,0,0.12) !important',
outline: 'none !important',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`, {
color: 'rgba(255,107,0,0.40) !important',
});
globalStyle(
`body.${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
`body.${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`,
{
display: 'none !important',
},
);
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar`, {
width: '4px',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`, {
background: '#030508',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`, {
background: 'rgba(255,107,0,0.40)',
borderRadius: '2px',
});
// ── URL preview cards (terminal mode) ───────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview]`, {
backgroundColor: 'rgba(3,12,20,0.92)',
border: '1px solid rgba(0,212,255,0.22)',
borderLeft: '3px solid rgba(255,107,0,0.60)',
borderRadius: '4px',
color: '#e8edf5',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a`, {
color: 'rgba(0,212,255,0.85) !important',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a:hover`, {
color: 'rgba(255,107,0,0.90) !important',
textShadow: '0 0 6px rgba(255,107,0,0.30)',
});
// light TDS
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview]`, {
backgroundColor: 'rgba(240,244,252,0.97)',
border: '1px solid rgba(0,98,184,0.22)',
borderLeft: '3px solid rgba(196,78,0,0.55)',
color: '#2d3d56',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview] a`, {
color: '#0062b8 !important',
});
// ── GIF picker light TDS (dark-mode rules already exist via [data-gif-terminal]) ──
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input,` +
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] form`,
{
background: '#f4f6fa !important',
color: '#111827 !important',
border: '1px solid rgba(196,78,0,0.28) !important',
fontFamily: "'JetBrains Mono','Cascadia Code','Fira Code',monospace !important",
fontSize: '12px !important',
boxShadow: 'none !important',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input:focus`,
{
borderColor: 'rgba(196,78,0,0.60) !important',
boxShadow: '0 0 0 2px rgba(196,78,0,0.12) !important',
outline: 'none !important',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`,
{
color: 'rgba(196,78,0,0.45) !important',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`,
{
display: 'none !important',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`,
{
background: '#e2e7ef',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`,
{
background: 'rgba(196,78,0,0.35)',
borderRadius: '2px',
},
);
// ── Tooltip TDS ──────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
background: '#060c14 !important',
border: '1px solid rgba(0,212,255,0.30) !important',
color: '#b0cbe8 !important',
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important",
fontSize: '11px !important',
borderRadius: '4px !important',
boxShadow: '0 4px 12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.08) !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
background: '#f0f4fc !important',
border: '1px solid rgba(0,98,184,0.30) !important',
color: '#2d3d56 !important',
});
// ── Switch toggle TDS ─────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"]`, {
background: 'rgba(0,212,255,0.12) !important',
border: '1px solid rgba(0,212,255,0.30) !important',
borderRadius: '99px !important',
transition: 'background 0.2s, border-color 0.2s',
});
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`, {
background: 'rgba(255,107,0,0.22) !important',
borderColor: 'rgba(255,107,0,0.60) !important',
boxShadow: '0 0 8px rgba(255,107,0,0.20) !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"]`, {
background: 'rgba(0,98,184,0.10) !important',
borderColor: 'rgba(0,98,184,0.35) !important',
});
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`,
{
background: 'rgba(196,78,0,0.18) !important',
borderColor: 'rgba(196,78,0,0.55) !important',
},
);
// ── Spinner TDS ───────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._31czpko`, {
stroke: 'rgba(0,212,255,0.20) !important',
});
globalStyle(`body.${lotusTerminalBodyClass} ._31czpkp`, {
stroke: 'rgba(255,107,0,0.85) !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpko`, {
stroke: 'rgba(0,98,184,0.20) !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpkp`, {
stroke: 'rgba(196,78,0,0.85) !important',
});
// ── EmojiBoard TDS ────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board]`, {
background: '#060c14 !important',
border: '1px solid rgba(0,212,255,0.20) !important',
borderRadius: '4px !important',
boxShadow: '0 8px 32px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,212,255,0.08) !important',
color: '#b0cbe8 !important',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input`, {
background: 'rgba(0,212,255,0.06) !important',
border: '1px solid rgba(0,212,255,0.22) !important',
color: '#b0cbe8 !important',
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important",
borderRadius: '4px !important',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input:focus`, {
borderColor: 'rgba(255,107,0,0.60) !important',
boxShadow: '0 0 0 2px rgba(255,107,0,0.12) !important',
outline: 'none !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-emoji-board]`, {
background: '#f0f4fc !important',
border: '1px solid rgba(0,98,184,0.22) !important',
color: '#2d3d56 !important',
});
// ── PopOut / Menu / floating panels TDS ──────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._1v6ozra1`, {
background: '#060c14 !important',
border: '1px solid rgba(0,212,255,0.22) !important',
borderRadius: '6px !important',
boxShadow: '0 8px 32px rgba(0,0,0,0.80), 0 0 0 1px rgba(0,212,255,0.06) !important',
color: '#b0cbe8 !important',
});
globalStyle(`body.${lotusTerminalBodyClass} ._1fptcza0`, {
background: 'transparent !important',
});
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6`, {
color: '#b0cbe8 !important',
borderRadius: '3px !important',
});
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
background: 'rgba(0,212,255,0.08) !important',
color: '#00d4ff !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._1v6ozra1`, {
background: '#f0f4fc !important',
border: '1px solid rgba(0,98,184,0.22) !important',
boxShadow: '0 8px 32px rgba(0,0,0,0.15) !important',
color: '#2d3d56 !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6`, {
color: '#2d3d56 !important',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
background: 'rgba(0,98,184,0.08) !important',
color: '#0062b8 !important',
});
// ── Poll card TDS ─────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]`, {
background: 'rgba(0,212,255,0.04) !important',
border: '1px solid rgba(0,212,255,0.22) !important',
color: '#c4d9ee !important',
transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]:hover`, {
background: 'rgba(0,212,255,0.08) !important',
borderColor: 'rgba(0,212,255,0.40) !important',
boxShadow: '0 0 8px rgba(0,212,255,0.08)',
});
globalStyle(
`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-selected="true"]`,
{
background: 'rgba(255,107,0,0.10) !important',
border: '1px solid rgba(255,107,0,0.55) !important',
boxShadow: '0 0 10px rgba(255,107,0,0.10)',
},
);
// [Gitea #246] The poll's winning answer (after it ends).
globalStyle(
`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
{
border: '1px solid rgba(0,255,136,0.55) !important',
boxShadow: '0 0 10px rgba(0,255,136,0.10)',
},
);
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
color: 'rgba(0,212,255,0.60) !important',
opacity: '1 !important',
textShadow: '0 0 8px rgba(0,212,255,0.25)',
});
// light TDS
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]`,
{
background: 'rgba(0,98,184,0.04) !important',
border: '1px solid rgba(0,98,184,0.22) !important',
color: '#111827 !important',
},
);
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-selected="true"]`,
{
background: 'rgba(196,78,0,0.08) !important',
border: '1px solid rgba(196,78,0,0.50) !important',
},
);
// ── Voice recorder TDS ───────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`, {
background: 'rgba(0,212,255,0.05) !important',
border: '1px solid rgba(0,212,255,0.22) !important',
borderRadius: '6px',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
background: '#00FF88 !important',
boxShadow: '0 0 6px rgba(0,255,136,0.55)',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
background: '#00D4FF !important',
});
// light TDS
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`,
{
background: 'rgba(0,98,184,0.05) !important',
border: '1px solid rgba(0,98,184,0.22) !important',
},
);
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
background: '#006d35 !important',
boxShadow: 'none',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
background: '#0062b8 !important',
});
// ── Caption input TDS focus ring ──────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-caption-input]:focus-visible`, {
borderColor: 'rgba(255,107,0,0.65) !important',
boxShadow: '0 0 0 2px rgba(255,107,0,0.14), 0 0 6px rgba(255,107,0,0.10) !important',
});
globalStyle(
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-caption-input]:focus-visible`,
{
borderColor: 'rgba(196,78,0,0.60) !important',
boxShadow: '0 0 0 2px rgba(196,78,0,0.12) !important',
},
);