Implement LotusGuild TDS v1.2 terminal mode
- Rewrite lotus-terminal.css.ts: TDS-exact dot-grid bg, scanlines, vignette, glitch keyframes, orange caret, cyan scrollbars, all --lt-* CSS vars - Fix lotusTerminalTheme in colors.css.ts: full TDS color palette (Orange primary, Cyan secondary, Green success, Amber warning, Red critical) - Add lotus-boot.ts: matrix boot sequence at 65ms intervals, green phosphor glow - Update ThemeManager.tsx: call runLotusBootSequence on terminal mode activate, UnAuthRouteThemeManager now supports lotusTerminal setting - Update index.html: add JetBrains Mono + VT323 from Google Fonts
This commit is contained in:
root
+147
-16
@@ -1,28 +1,159 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const lotusTerminalBodyClass = style({});
|
||||
|
||||
globalStyle(`body.${lotusTerminalBodyClass}`, {
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace",
|
||||
letterSpacing: '0.01em',
|
||||
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', Consolas, 'Courier New', monospace !important" as any,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
|
||||
});
|
||||
|
||||
globalStyle(`body.${lotusTerminalBodyClass}::after`, {
|
||||
content: '""',
|
||||
// Scanlines — EXACT from TDS body::before
|
||||
globalStyle(`body.${lotusTerminalBodyClass}::before`, {
|
||||
content: "''",
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
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,
|
||||
backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px)',
|
||||
});
|
||||
|
||||
globalStyle(`body.${lotusTerminalBodyClass} input, body.${lotusTerminalBodyClass} textarea`, {
|
||||
caretColor: '#ff3300',
|
||||
// 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)',
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user