diff options
Diffstat (limited to 'frontend/src/components/CodeEditor.svelte')
| -rw-r--r-- | frontend/src/components/CodeEditor.svelte | 27 |
1 files changed, 9 insertions, 18 deletions
diff --git a/frontend/src/components/CodeEditor.svelte b/frontend/src/components/CodeEditor.svelte index 544a6a4..da11555 100644 --- a/frontend/src/components/CodeEditor.svelte +++ b/frontend/src/components/CodeEditor.svelte @@ -15,6 +15,7 @@ } let { value, onInput, height = 420, readOnly = false, label }: Props = $props(); + const hostClass = 'rounded-md border border-border overflow-hidden bg-card [&>.cm-editor]:min-h-[60px]'; let host: HTMLDivElement; let view: EditorView | null = null; let applyingExternal = false; @@ -41,8 +42,8 @@ EditorView.theme({ '&': { fontSize: '13px', - background: 'var(--surface)', - color: 'var(--text)', + background: 'var(--card)', + color: 'var(--foreground)', fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, 'Noto Sans Mono CJK SC', monospace" }, @@ -50,12 +51,12 @@ '.cm-scroller': { lineHeight: '1.55' }, '&.cm-focused': { outline: 'none' }, '.cm-gutters': { - background: 'var(--surface)', + background: 'var(--card)', border: 'none', - color: 'var(--text-3)' + color: 'var(--muted-foreground)' }, - '.cm-activeLine': { background: 'var(--surface-2)' }, - '.cm-activeLineGutter': { background: 'var(--surface-2)' } + '.cm-activeLine': { background: 'var(--secondary)' }, + '.cm-activeLineGutter': { background: 'var(--secondary)' } }), EditorView.updateListener.of((u) => { if (applyingExternal) return; @@ -88,17 +89,7 @@ </script> <div> - {#if label}<span class="hint editor-label">{label}</span>{/if} - <div bind:this={host} class="cm-host"></div> + {#if label}<span class="block text-sm text-muted-foreground mb-1">{label}</span>{/if} + <div bind:this={host} class={hostClass}></div> </div> -<style> - .cm-host { - border: 1px solid var(--border-strong); - border-radius: var(--radius); - overflow: hidden; - background: var(--surface); - } - .cm-host :global(.cm-editor) { min-height: 60px; } - .editor-label { display: block; margin-bottom: 0.25rem; } -</style> |