blamouche_obsidian-any-ai-code/styles.css
blamouche eb05136a03 Replace fixed Claude/Codex switch with customizable runtime list
Settings now expose a list of CLI runtimes (each with a display name and
launch command) instead of two hardcoded entries. Users can add as many
runtimes as they want from the settings panel, remove unused ones (the
list always keeps at least one entry), and pick the default runtime
through a dropdown listing every configured entry.

The sidebar toolbar replaces the previous Claude/Codex toggle buttons
with a dropdown populated from the same configured list, so switching
runtime is a single action and reflects user-added entries.

A migration helper converts legacy `command`, `codexCommand`, and
`runtime` settings into the new `runtimes` + `selectedRuntimeId` shape
on first load, and the Codex-specific terminal workarounds (no-color
env, terminal reset) are now triggered by `isCodexLikeCommand` so they
keep working regardless of the entry id.

Adds vitest coverage for the migration and codex-like command helpers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-26 07:27:45 +02:00

215 lines
3.8 KiB
CSS

.claude-cli-view {
display: flex;
flex-direction: column;
height: 100%;
gap: 8px;
padding: 8px;
box-sizing: border-box;
}
.claude-cli-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.claude-cli-toolbar button {
border: 1px solid var(--background-modifier-border);
background: var(--interactive-normal);
color: var(--text-normal);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
}
.claude-cli-toolbar button:hover {
background: var(--interactive-hover);
}
.claude-cli-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.claude-cli-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.claude-cli-btn-icon svg {
width: 14px;
height: 14px;
stroke-width: 2.1;
}
.claude-cli-runtime-picker {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--background-modifier-border);
background: var(--interactive-normal);
border-radius: 6px;
padding: 2px 6px 2px 8px;
}
.claude-cli-runtime-picker-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.claude-cli-runtime-picker-icon svg {
width: 14px;
height: 14px;
stroke-width: 2.1;
}
.claude-cli-runtime-select {
border: 0;
background: transparent;
color: var(--text-normal);
font: inherit;
padding: 4px 4px 4px 0;
cursor: pointer;
outline: none;
}
.claude-cli-runtime-select:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.claude-cli-runtimes-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.claude-cli-runtime-item {
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
padding: 6px 8px;
background: var(--background-secondary);
}
.claude-cli-runtime-item .setting-item-control {
flex-wrap: wrap;
gap: 6px;
width: 100%;
}
.claude-cli-runtime-command-input {
flex: 1 1 240px;
min-width: 200px;
}
.claude-cli-status {
color: var(--text-muted);
font-size: 12px;
}
.claude-cli-terminal {
flex: 1;
min-height: 220px;
border: 1px solid var(--background-modifier-border);
border-radius: 8px;
overflow: hidden;
}
.claude-cli-terminal .xterm {
position: relative;
height: 100%;
padding: 8px;
}
.claude-cli-terminal .xterm .xterm-helpers {
position: absolute;
top: 0;
z-index: 5;
}
.claude-cli-terminal .xterm .xterm-helper-textarea {
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -5;
white-space: nowrap;
overflow: hidden;
resize: none;
border: 0;
margin: 0;
padding: 0;
}
/* Match xterm default accessibility styles to avoid visible ghost text. */
.claude-cli-terminal .xterm .xterm-accessibility,
.claude-cli-terminal .xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
color: transparent;
pointer-events: none;
}
.claude-cli-terminal .xterm .xterm-accessibility-tree *::selection {
color: transparent;
}
.claude-cli-terminal .xterm .xterm-accessibility-tree {
font-family: monospace;
user-select: text;
white-space: pre;
}
.claude-cli-terminal .xterm .xterm-accessibility-tree > div {
transform-origin: left;
width: fit-content;
}
.claude-cli-terminal .xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.claude-cli-terminal .xterm .xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
top: 0;
left: -9999em;
line-height: normal;
}
.claude-cli-terminal .xterm .xterm-viewport {
position: absolute;
inset: 0;
overflow-y: auto;
background-color: inherit;
}
.claude-cli-terminal .xterm .xterm-screen {
position: relative;
}
.claude-cli-terminal .xterm .xterm-screen canvas {
position: absolute;
left: 0;
top: 0;
}
.claude-cli-terminal .xterm-cursor-layer {
position: relative;
}