Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
9.7 kB · 315 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316@tailwind base;@tailwind components;@tailwind utilities;
/* Self-hosted terminal fonts. The .ttf are bundled from nixpkgs by the flake (`terminalFonts`) and served at /fonts/*.ttf (dev: client/public/fonts via scripts/sync-terminal-fonts.sh; prod: dist/fonts). Every family declares all four real faces (Regular/Bold/Italic/ BoldItalic) so terminal attributes render without browser synthesis. Selectable per emulator in Settings — see settings.ts TERMINAL_FONTS. Keep families/files in sync with both. */@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");}@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/JetBrainsMono-Bold.ttf") format("truetype");}@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/JetBrainsMono-Italic.ttf") format("truetype");}@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/JetBrainsMono-BoldItalic.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IosevkaNerdFont-Regular.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IosevkaNerdFont-Bold.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/IosevkaNerdFont-Italic.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/IosevkaNerdFont-BoldItalic.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IosevkaNerdFontMono-Regular.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IosevkaNerdFontMono-Bold.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font Mono"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/IosevkaNerdFontMono-Italic.ttf") format("truetype");}@font-face { font-family: "Iosevka Nerd Font Mono"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/IosevkaNerdFontMono-BoldItalic.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IosevkaTermNerdFont-Regular.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IosevkaTermNerdFont-Bold.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/IosevkaTermNerdFont-Italic.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/IosevkaTermNerdFont-BoldItalic.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IosevkaTermNerdFontMono-Regular.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IosevkaTermNerdFontMono-Bold.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font Mono"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/IosevkaTermNerdFontMono-Italic.ttf") format("truetype");}@font-face { font-family: "IosevkaTerm Nerd Font Mono"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fonts/IosevkaTermNerdFontMono-BoldItalic.ttf") format("truetype");}
/* Theme tokens. Each theme is a named block of semantic color variables (space- separated RGB channels, consumed via `rgb(var(--x) / <alpha-value>)` from tailwind.config.js). `:root` holds the dark defaults; a theme is applied by setting `data-theme="<name>"` on <html>. Add a new theme = one more `:root[data-theme="<name>"]` block. `color-scheme` flips native chrome (scrollbars, form controls, the canvas) to match. */:root,:root[data-theme="dark"] { color-scheme: dark; --color-canvas: 15 15 15; --color-canvas-dark: 10 10 10; --color-canvas-light: 26 26 26; --color-canvas-lighter: 37 37 37; --color-surface: 26 26 26; --color-surface-hover: 31 31 31; --color-surface-active: 37 37 37; --color-border: 42 42 42; --color-border-light: 51 51 51; --color-border-strong: 113 113 122; --color-content: 250 250 250; --color-content-muted: 161 161 170; --color-content-subtle: 113 113 122; --color-content-faint: 82 82 91; --color-inverse: 255 255 255; --color-inverse-content: 15 15 15; --color-popover: 38 38 38; --color-popover-border: 51 51 51; --color-dot: 37 37 37; --color-terminal-bg: 13 13 13;}
:root[data-theme="light"] { color-scheme: light; --color-canvas: 255 255 255; --color-canvas-dark: 244 244 245; --color-canvas-light: 250 250 250; --color-canvas-lighter: 244 244 245; --color-surface: 244 244 245; --color-surface-hover: 228 228 231; --color-surface-active: 228 228 231; --color-border: 228 228 231; --color-border-light: 212 212 216; --color-border-strong: 161 161 170; --color-content: 24 24 27; --color-content-muted: 82 82 91; --color-content-subtle: 113 113 122; --color-content-faint: 161 161 170; --color-inverse: 24 24 27; --color-inverse-content: 250 250 250; --color-popover: 255 255 255; --color-popover-border: 228 228 231; --color-dot: 212 212 216; --color-terminal-bg: 250 250 250;}
:root { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
* { box-sizing: border-box;}
html, body { margin: 0; padding: 0; height: 100%; width: 100%; background: rgb(var(--color-canvas)); color: rgb(var(--color-content)); overflow: hidden;}
/* React Flow canvas */.react-flow { background: rgb(var(--color-canvas)) !important;}
.react-flow__background { background-color: rgb(var(--color-canvas)) !important;}
.react-flow__pane { cursor: grab;}
.react-flow__pane:active { cursor: grabbing;}
/* React Flow node - reset any default styles */.react-flow__node { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;}
.react-flow__node-agent { background: transparent !important;}
.react-flow__controls { background: rgb(var(--color-surface)) !important; border: 1px solid rgb(var(--color-border)) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; overflow: hidden;}
.react-flow__controls-button { background: transparent !important; border: none !important; border-bottom: 1px solid rgb(var(--color-border)) !important; color: rgb(var(--color-content-subtle)) !important; width: 28px !important; height: 28px !important; padding: 6px !important;}
.react-flow__controls-button:last-child { border-bottom: none !important;}
.react-flow__controls-button:hover { background: rgb(var(--color-surface-active)) !important; color: rgb(var(--color-content)) !important;}
.react-flow__controls-button svg { fill: currentColor !important; width: 14px !important; height: 14px !important;}
.react-flow__minimap { background: rgb(var(--color-surface)) !important; border: 1px solid rgb(var(--color-border)) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;}
/* Hide edges/connections */.react-flow__edges { display: none !important;}
.react-flow__handle { display: none !important;}
/* Terminal styling */.xterm { padding: 16px;}
.xterm-viewport::-webkit-scrollbar { width: 6px;}
.xterm-viewport::-webkit-scrollbar-track { background: transparent;}
.xterm-viewport::-webkit-scrollbar-thumb { background: rgb(var(--color-border-light)); border-radius: 3px;}
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-border-strong));}
/* Custom scrollbar */::-webkit-scrollbar { width: 6px; height: 6px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { background: rgb(var(--color-border-light)); border-radius: 3px;}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-border-strong));}
/* Animations */@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; }}
.animate-pulse-ring { animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
/* Beautiful glow pulse animation for active agents */@keyframes glow-pulse { 0%, 100% { filter: brightness(1) drop-shadow(0 0 8px var(--glow-color, #22C55E)); } 50% { filter: brightness(1.02) drop-shadow(0 0 20px var(--glow-color, #22C55E)) drop-shadow(0 0 40px var(--glow-color, #22C55E)); }}
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite;}