4824 lines
95 KiB
CSS
4824 lines
95 KiB
CSS
/* Claudian Plugin Styles */
|
|
/* Built from src/style/ modules */
|
|
|
|
|
|
/* ============================================
|
|
base/container.css
|
|
============================================ */
|
|
.claudian-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
base/animations.css
|
|
============================================ */
|
|
/* Thinking pulse animation */
|
|
@keyframes thinking-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Spinner rotation */
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Context path icon glow */
|
|
@keyframes context-path-glow {
|
|
0%,
|
|
100% {
|
|
filter: drop-shadow(0 0 2px rgba(217, 119, 87, 0.4));
|
|
}
|
|
|
|
50% {
|
|
filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.8));
|
|
}
|
|
}
|
|
|
|
/* MCP selector icon glow */
|
|
@keyframes mcp-glow {
|
|
0%,
|
|
100% {
|
|
filter: drop-shadow(0 0 2px rgba(124, 58, 237, 0.4));
|
|
}
|
|
|
|
50% {
|
|
filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.9));
|
|
}
|
|
}
|
|
|
|
/* Inline edit spinner */
|
|
@keyframes claudian-inline-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Instruction modal spinner */
|
|
@keyframes claudian-instruction-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* MCP test spinner */
|
|
@keyframes claudian-mcp-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ============================================
|
|
components/header.css
|
|
============================================ */
|
|
/* Header */
|
|
.claudian-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px 12px 12px;
|
|
}
|
|
|
|
.claudian-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.claudian-header h4 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Header actions (right side) */
|
|
.claudian-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Header icon buttons (history, new, etc.) */
|
|
.claudian-header-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-header-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-header-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/history.css
|
|
============================================ */
|
|
/* History dropdown container */
|
|
.claudian-history-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* History dropdown menu */
|
|
.claudian-history-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
margin-top: 4px;
|
|
background: var(--background-secondary);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
z-index: 1000;
|
|
max-height: 400px;
|
|
overflow: hidden;
|
|
width: 280px;
|
|
}
|
|
|
|
.claudian-history-menu.visible {
|
|
display: block;
|
|
}
|
|
|
|
.claudian-history-header {
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-history-list {
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-history-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* History item */
|
|
.claudian-history-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-history-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-history-item-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-history-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.claudian-history-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-history-item.active {
|
|
background: var(--background-secondary);
|
|
border-left: 2px solid var(--interactive-accent);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.claudian-history-item.active .claudian-history-item-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-history-item.active .claudian-history-item-content {
|
|
cursor: default;
|
|
}
|
|
|
|
.claudian-history-item.active .claudian-history-item-date {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.claudian-history-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-history-item-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-history-item-date {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.claudian-history-item-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 8px;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.claudian-history-item:hover .claudian-history-item-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-action-btn {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-delete-btn:hover {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Rename input */
|
|
.claudian-rename-input {
|
|
width: 100%;
|
|
padding: 2px 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--interactive-accent);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-rename-input:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--interactive-accent-hover);
|
|
}
|
|
|
|
/* Loading indicator for title generation */
|
|
.claudian-action-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: spin 1s linear infinite;
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/messages.css
|
|
============================================ */
|
|
/* Messages area */
|
|
.claudian-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Focusable messages panel for vim-style navigation */
|
|
.claudian-messages-focusable:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Welcome message - claude.ai style */
|
|
.claudian-welcome {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 20px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.claudian-welcome-greeting {
|
|
font-family: 'Copernicus', 'Tiempos Headline', 'Tiempos', Georgia, 'Times New Roman', serif;
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Individual messages */
|
|
.claudian-message {
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
max-width: 95%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.claudian-message-user {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: var(--text-on-accent);
|
|
align-self: flex-end;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
/* Text selection in user messages - visible highlight */
|
|
.claudian-message-user ::selection {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
color: inherit;
|
|
}
|
|
|
|
.claudian-message-user ::-moz-selection {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
color: inherit;
|
|
}
|
|
|
|
.claudian-message-assistant {
|
|
background: transparent;
|
|
align-self: stretch;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-bottom-left-radius: 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Message content */
|
|
.claudian-message-content {
|
|
line-height: 1.5;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
|
|
/* Interrupted message */
|
|
.claudian-interrupted {
|
|
color: #d45d5d;
|
|
}
|
|
|
|
.claudian-interrupted-hint {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Text blocks within message content */
|
|
.claudian-text-block {
|
|
margin: 0;
|
|
}
|
|
|
|
.claudian-text-block+.claudian-tool-call {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-tool-call+.claudian-text-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-message-content p {
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.claudian-message-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.claudian-message-content ul,
|
|
.claudian-message-content ol {
|
|
margin: 8px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
.claudian-messages::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.claudian-messages::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.claudian-messages::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.claudian-messages::-webkit-scrollbar-thumb:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/code.css
|
|
============================================ */
|
|
/* Code block wrapper - contains pre + button outside scroll area */
|
|
.claudian-code-wrapper {
|
|
position: relative;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
/* Code blocks in chat messages */
|
|
.claudian-code-wrapper pre,
|
|
.claudian-message-content pre {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Code blocks without language - wrap content */
|
|
.claudian-code-wrapper:not(.has-language) pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Unwrapped pre still needs margin */
|
|
.claudian-message-content>pre {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-message-content code {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Clickable language label - positioned outside scroll area */
|
|
.claudian-code-wrapper .claudian-code-lang-label {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-faint);
|
|
background: var(--background-primary);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
transition: color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.claudian-code-wrapper .claudian-code-lang-label:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Hide default copy button when language label exists */
|
|
.claudian-code-wrapper.has-language .copy-code-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Copy button - positioned outside scroll area */
|
|
.claudian-code-wrapper .copy-code-button {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
background: var(--background-primary);
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
|
|
border-radius: 3px;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* If copy button uses an icon (svg) */
|
|
.claudian-code-wrapper .copy-code-button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Show copy button on hover */
|
|
.claudian-code-wrapper:not(.has-language):hover .copy-code-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-code-wrapper .copy-code-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/thinking.css
|
|
============================================ */
|
|
/* Thinking indicator */
|
|
.claudian-thinking {
|
|
color: #D97757;
|
|
font-style: italic;
|
|
padding: 4px 0;
|
|
text-align: left;
|
|
animation: thinking-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.claudian-thinking-hint {
|
|
color: var(--text-muted);
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Thinking block (extended thinking) */
|
|
.claudian-thinking-block {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-text-block+.claudian-thinking-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-thinking-block+.claudian-text-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-thinking-block+.claudian-tool-call {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-tool-call+.claudian-thinking-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Thinking block header - transparent */
|
|
.claudian-thinking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-thinking-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #D97757;
|
|
}
|
|
|
|
/* Thinking block content - tree-branch style */
|
|
.claudian-thinking-content {
|
|
padding: 4px 0 4px 24px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border-left: 2px solid var(--background-modifier-border);
|
|
margin-left: 7px;
|
|
}
|
|
|
|
.claudian-thinking-content p {
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.claudian-thinking-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Thinking content code blocks - inherits from wrapper, adjust spacing */
|
|
.claudian-thinking-content .claudian-code-wrapper {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-thinking-content .claudian-code-wrapper pre {
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.claudian-thinking-content code {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/toolcalls.css
|
|
============================================ */
|
|
/* Tool call container - transparent, no border */
|
|
.claudian-tool-call {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
/* Tool call header - transparent */
|
|
.claudian-tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-tool-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-tool-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-tool-label {
|
|
flex: 1;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-tool-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-tool-status svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-tool-status.status-running {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-tool-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-tool-status.status-error {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-tool-status.status-blocked {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
/* Spinner animation */
|
|
.claudian-spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid var(--background-modifier-border);
|
|
border-top-color: var(--text-accent);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Tool call content - tree-branch style */
|
|
.claudian-tool-content {
|
|
padding: 4px 0 4px 24px;
|
|
}
|
|
|
|
/* Tree-branch result row */
|
|
.claudian-tool-result-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-tool-branch {
|
|
font-family: monospace;
|
|
color: var(--text-faint);
|
|
flex-shrink: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.claudian-tool-result-text {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
white-space: pre-wrap;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Result items - regular text lines */
|
|
.claudian-tool-result-item {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.claudian-tool-result-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Bulleted items (WebSearch) - hanging indent for wrapped lines */
|
|
.claudian-tool-result-bullet {
|
|
display: block;
|
|
padding-left: 0.8em;
|
|
text-indent: -0.8em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.claudian-tool-result-bullet:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/todo-panel.css
|
|
============================================ */
|
|
/* Todo Panel - persistent bottom panel for todos */
|
|
|
|
/* Main container - no border/background, flows seamlessly */
|
|
.claudian-todo-panel {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Todos container */
|
|
.claudian-todo-panel-todos {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Header (collapsed view) - subtle hover only */
|
|
.claudian-todo-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-todo-panel-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-todo-panel-header:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* List icon */
|
|
.claudian-todo-panel-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--interactive-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-todo-panel-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Label */
|
|
.claudian-todo-panel-label {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Current task preview (collapsed state) */
|
|
.claudian-todo-panel-current {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Content (expanded list) */
|
|
.claudian-todo-panel-content {
|
|
padding: 4px 0 4px 18px;
|
|
}
|
|
|
|
/* Individual todo item - reuses existing styles */
|
|
.claudian-todo-panel-content .claudian-todo-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-status-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-status-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-text {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Status-specific styling */
|
|
.claudian-todo-panel-content .claudian-todo-pending .claudian-todo-status-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-pending .claudian-todo-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-in_progress .claudian-todo-status-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-in_progress .claudian-todo-text {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-completed .claudian-todo-status-icon {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-todo-panel-content .claudian-todo-completed .claudian-todo-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/subagent.css
|
|
============================================ */
|
|
/* Subagent List (Task tool) - follows TodoList pattern */
|
|
.claudian-subagent-list {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-text-block+.claudian-subagent-list {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-subagent-list+.claudian-text-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-tool-call+.claudian-subagent-list {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-subagent-list+.claudian-tool-call {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Subagent header */
|
|
.claudian-subagent-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-subagent-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--interactive-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-subagent-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-subagent-count {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-status svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-subagent-status.status-running {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-subagent-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-subagent-status.status-error {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Subagent content */
|
|
.claudian-subagent-content {
|
|
padding: 4px 0 4px 24px;
|
|
}
|
|
|
|
/* Tree branch indicator */
|
|
.claudian-subagent-branch {
|
|
font-family: monospace;
|
|
color: var(--text-faint);
|
|
flex-shrink: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Individual tool item container */
|
|
.claudian-subagent-tool-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* Tool row (branch + label) */
|
|
.claudian-subagent-tool-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-subagent-tool-text {
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Tool result area nested under tool (max 2 lines) */
|
|
.claudian-subagent-tool-result {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
padding: 2px 0 0 20px;
|
|
}
|
|
|
|
.claudian-subagent-result-text {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
white-space: pre-wrap;
|
|
overflow: hidden;
|
|
max-height: 2.8em;
|
|
}
|
|
|
|
/* DONE indicator */
|
|
.claudian-subagent-done {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.claudian-subagent-done-text {
|
|
font-size: 12px;
|
|
color: var(--text-faint);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Async Subagent (Task tool with run_in_background=true) */
|
|
|
|
/* Status text display (e.g., "pending", "running agent_123", etc.) */
|
|
.claudian-subagent-status-text {
|
|
font-size: 11px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-muted);
|
|
margin-left: auto;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
/* Async-specific status styling */
|
|
.claudian-subagent-list.async.pending .claudian-subagent-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-subagent-list.async.pending .claudian-subagent-status-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-subagent-list.async.running .claudian-subagent-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-subagent-list.async.running .claudian-subagent-status-text {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-subagent-list.async.awaiting .claudian-subagent-icon {
|
|
color: var(--color-yellow);
|
|
}
|
|
|
|
.claudian-subagent-list.async.awaiting .claudian-subagent-status-text {
|
|
color: var(--color-yellow);
|
|
}
|
|
|
|
.claudian-subagent-list.async.completed .claudian-subagent-icon {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-subagent-list.async.completed .claudian-subagent-status-text {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-subagent-list.async.error .claudian-subagent-icon {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-subagent-list.async.error .claudian-subagent-status-text {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-subagent-list.async.orphaned .claudian-subagent-icon {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
.claudian-subagent-list.async.orphaned .claudian-subagent-status-text {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/ask-user-question.css
|
|
============================================ */
|
|
/**
|
|
* AskUserQuestion styles - minimal design.
|
|
*/
|
|
|
|
/* ============================================
|
|
* Question Panel (replaces input area)
|
|
* ============================================ */
|
|
|
|
.claudian-ask-panel {
|
|
padding: 12px 0;
|
|
outline: none;
|
|
}
|
|
|
|
.claudian-ask-panel:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Tab navigation row */
|
|
.claudian-ask-panel-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-ask-panel-nav {
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.claudian-ask-panel-nav:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-panel-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: var(--font-monospace);
|
|
/* Completely reset button appearance */
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
-moz-appearance: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
text-decoration: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.claudian-ask-panel-tab:hover {
|
|
color: var(--text-normal);
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.claudian-ask-panel-tab:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.claudian-ask-panel-tab.active {
|
|
color: var(--interactive-accent);
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.claudian-ask-panel-tab-check {
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Green dot for answered tabs */
|
|
.claudian-ask-panel-tab.answered .claudian-ask-panel-tab-check {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
|
|
/* Question content */
|
|
.claudian-ask-panel-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-ask-panel-question {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Options list */
|
|
.claudian-ask-panel-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-ask-panel-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-panel-option:hover {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-ask-panel-option.focused {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-ask-panel-option.selected {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Caret indicator (> or space) */
|
|
.claudian-ask-panel-caret {
|
|
width: 12px;
|
|
flex-shrink: 0;
|
|
color: var(--interactive-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Number/checkbox indicator */
|
|
.claudian-ask-panel-indicator {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-ask-panel-option.focused .claudian-ask-panel-caret {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-ask-panel-option.focused .claudian-ask-panel-indicator {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Green checkmark for selected items */
|
|
.claudian-ask-panel-option.selected .claudian-ask-panel-indicator {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-ask-panel-option-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.claudian-ask-panel-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-ask-panel-option-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Checkmark after label for single-select */
|
|
.claudian-ask-panel-checkmark {
|
|
color: var(--color-green);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.claudian-ask-panel-option-desc {
|
|
color: var(--text-muted);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Other option */
|
|
.claudian-ask-panel-other {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claudian-ask-panel-other-input {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
padding: 2px 4px;
|
|
border: none;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-ask-panel-other-input:focus {
|
|
outline: none;
|
|
border-bottom-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-ask-panel-other-input::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* Keyboard hint */
|
|
.claudian-ask-panel-hint {
|
|
margin-top: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Submit review panel */
|
|
.claudian-ask-panel-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-ask-panel-summary-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.claudian-ask-panel-summary-question {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-panel-summary-answer {
|
|
color: var(--color-green);
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.claudian-ask-panel-summary-answer.unanswered {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-ask-panel-submit-prompt {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ============================================
|
|
* Tool Call Result Block - matches toolcalls.css style
|
|
* ============================================ */
|
|
|
|
.claudian-ask-question-block {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-ask-question-block.claudian-ask-question-pending {
|
|
display: none;
|
|
}
|
|
|
|
/* Header - transparent like other tool calls */
|
|
.claudian-ask-question-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-ask-question-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-ask-question-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-ask-question-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-ask-question-count {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-ask-question-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-ask-question-status svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-ask-question-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-ask-question-status.status-error,
|
|
.claudian-ask-question-status.status-blocked {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Content - indented to align under label */
|
|
.claudian-ask-question-content {
|
|
padding: 4px 0 4px 24px;
|
|
}
|
|
|
|
/* Q&A pairs */
|
|
.claudian-ask-question-qa {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.claudian-ask-question-qa + .claudian-ask-question-qa {
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.claudian-ask-question-q-header {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.claudian-ask-question-answer {
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
padding-left: 8px;
|
|
border-left: 2px solid var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-ask-question-error {
|
|
font-size: 12px;
|
|
color: var(--color-red);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Q&A list - tree symbol + aligned container */
|
|
.claudian-ask-question-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-ask-question-tree {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-ask-question-aligned {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-ask-question-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.claudian-ask-question-q {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
/* Hanging indent: wrapped lines align with text after "Q: " */
|
|
padding-left: 1.5em;
|
|
text-indent: -1.5em;
|
|
}
|
|
|
|
.claudian-ask-question-a {
|
|
font-size: 13px;
|
|
color: var(--color-green);
|
|
/* Hanging indent: wrapped lines align with text after "A: " */
|
|
padding-left: 1.5em;
|
|
text-indent: -1.5em;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/plan-approval.css
|
|
============================================ */
|
|
/**
|
|
* PlanApproval panel styles.
|
|
* Panel shows approval options (plan content is displayed in chat).
|
|
*/
|
|
|
|
/* ============================================
|
|
* Plan Approval Panel (replaces input area)
|
|
* ============================================ */
|
|
|
|
.claudian-plan-approval-panel {
|
|
/* Match input wrapper padding structure */
|
|
padding: 10px; /* Same as .claudian-input */
|
|
min-height: 60px; /* Same as .claudian-input min-height */
|
|
outline: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.claudian-plan-approval-panel:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Header: "Would you like to proceed?" */
|
|
.claudian-plan-approval-header {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* Options list - tighter spacing */
|
|
.claudian-plan-approval-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-plan-approval-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 0;
|
|
cursor: pointer;
|
|
color: var(--text-normal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.claudian-plan-approval-option:hover {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-plan-approval-option.focused {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Caret - narrower */
|
|
.claudian-plan-approval-caret {
|
|
width: 10px;
|
|
flex-shrink: 0;
|
|
color: var(--interactive-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.claudian-plan-approval-number {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-plan-approval-option.focused .claudian-plan-approval-caret,
|
|
.claudian-plan-approval-option.focused .claudian-plan-approval-number {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-plan-approval-option-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Placeholder text for revise option (muted) */
|
|
.claudian-plan-approval-placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Inline revise input - must blend perfectly with option text */
|
|
.claudian-plan-approval-revise-inline {
|
|
flex: 1;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
color: var(--text-normal);
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: 500;
|
|
outline: none;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
line-height: inherit;
|
|
letter-spacing: inherit;
|
|
text-indent: 0;
|
|
min-width: 0;
|
|
height: auto;
|
|
}
|
|
|
|
.claudian-plan-approval-revise-inline::placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ============================================
|
|
* Plan Message (distinct styling in chat)
|
|
* ============================================ */
|
|
|
|
.claudian-message-plan {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border-radius: 6px;
|
|
/* Match plan banner horizontal margin (0 12px 8px 12px) */
|
|
margin: 8px 12px;
|
|
padding: 10px 16px;
|
|
/* Override assistant message width/max-width to respect margins */
|
|
width: auto;
|
|
max-width: none;
|
|
/* Match plan banner font styling */
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ============================================
|
|
* Approval Indicator (user's choice display)
|
|
* ============================================ */
|
|
|
|
.claudian-approval-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 8px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-approval-indicator-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.claudian-approval-indicator-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Text always muted */
|
|
.claudian-approval-indicator-text {
|
|
color: var(--text-muted);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* Green check for approve (icon only) */
|
|
.claudian-approval-indicator-approve .claudian-approval-indicator-icon {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* Red x for revise (icon only) */
|
|
.claudian-approval-indicator-revise .claudian-approval-indicator-icon {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/plan-banner.css
|
|
============================================ */
|
|
/**
|
|
* PlanBanner styles.
|
|
* Collapsible banner below header showing approved plan.
|
|
*/
|
|
|
|
.claudian-plan-banner {
|
|
margin: 0 12px 8px 12px;
|
|
border-radius: 6px;
|
|
background: rgba(0, 168, 157, 0.08);
|
|
border: 1px solid rgba(0, 168, 157, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-plan-banner.expanded {
|
|
background: rgba(0, 168, 157, 0.05);
|
|
}
|
|
|
|
/* Header - clickable disclosure */
|
|
.claudian-plan-banner-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-plan-banner-header:hover {
|
|
background: rgba(0, 168, 157, 0.1);
|
|
}
|
|
|
|
.claudian-plan-banner-chevron {
|
|
font-size: 10px;
|
|
color: #00A89D;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.claudian-plan-banner.expanded .claudian-plan-banner-chevron {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.claudian-plan-banner-title {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #00A89D;
|
|
}
|
|
|
|
/* Content area */
|
|
.claudian-plan-banner-content {
|
|
padding: 0 12px 12px 12px;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
border-top: 1px solid rgba(0, 168, 157, 0.15);
|
|
}
|
|
|
|
.claudian-plan-banner-content h1,
|
|
.claudian-plan-banner-content h2,
|
|
.claudian-plan-banner-content h3 {
|
|
margin-top: 0.8em;
|
|
margin-bottom: 0.4em;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.claudian-plan-banner-content h1:first-child,
|
|
.claudian-plan-banner-content h2:first-child,
|
|
.claudian-plan-banner-content h3:first-child {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.claudian-plan-banner-content p {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.claudian-plan-banner-content ul,
|
|
.claudian-plan-banner-content ol {
|
|
margin: 0.5em 0;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.claudian-plan-banner-content code {
|
|
font-size: 12px;
|
|
padding: 2px 4px;
|
|
background: var(--background-primary);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.claudian-plan-banner-content pre {
|
|
padding: 8px;
|
|
background: var(--background-primary);
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/input.css
|
|
============================================ */
|
|
/* Input area */
|
|
.claudian-input-container {
|
|
position: relative;
|
|
padding: 12px 0 0 0;
|
|
}
|
|
|
|
/* Input wrapper (border container) */
|
|
.claudian-input-wrapper {
|
|
position: relative;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
/* Selection indicator (shown when text is selected in editor) */
|
|
.claudian-selection-indicator {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 8px;
|
|
color: #7abaff;
|
|
font-size: 11px;
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
background: var(--background-primary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.claudian-input {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
max-height: 200px;
|
|
resize: none;
|
|
padding: 10px;
|
|
border: none !important;
|
|
border-radius: 6px;
|
|
background: transparent !important;
|
|
color: var(--text-normal);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.claudian-input:hover,
|
|
.claudian-input:focus {
|
|
outline: none !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.claudian-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Input toolbar */
|
|
.claudian-input-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 4px 6px 6px 6px;
|
|
}
|
|
|
|
/* File indicator (attached files) */
|
|
.claudian-file-indicator {
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 4px 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-file-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 6px 3px 8px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
max-width: 200px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-file-chip-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-file-chip-icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-file-chip-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-file-chip-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-file-chip-remove:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-file-chip:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Message Queue Indicator (shown below flavor text in thinking indicator) */
|
|
.claudian-queue-indicator {
|
|
display: none;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-style: normal;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Light blue border when instruction mode is active */
|
|
.claudian-input-instruction-mode {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 1px #60a5fa;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/context-footer.css
|
|
============================================ */
|
|
/* Context usage meter (inline in toolbar) */
|
|
|
|
.claudian-context-meter {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: 8px;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Custom tooltip */
|
|
.claudian-context-meter::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-bottom: 6px;
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
color: var(--text-normal);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.claudian-context-meter:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-context-meter-gauge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.claudian-context-meter-gauge svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-meter-bg {
|
|
stroke: var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-meter-fill {
|
|
stroke: #D97757;
|
|
transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
|
|
}
|
|
|
|
.claudian-context-meter-percent {
|
|
font-size: 11px;
|
|
color: #D97757;
|
|
min-width: 24px;
|
|
text-align: right;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
/* Warning state (> 80%) - pale red */
|
|
.claudian-context-meter.warning .claudian-meter-fill {
|
|
stroke: #E57373;
|
|
}
|
|
|
|
.claudian-context-meter.warning .claudian-context-meter-percent {
|
|
color: #E57373;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/model-selector.css
|
|
============================================ */
|
|
/* Model selector */
|
|
.claudian-model-selector {
|
|
position: relative;
|
|
}
|
|
|
|
.claudian-model-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.claudian-model-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.claudian-model-chevron {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.claudian-model-chevron svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-model-dropdown {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
|
|
z-index: 1000;
|
|
width: max-content;
|
|
padding: 4px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
}
|
|
|
|
.claudian-model-selector:hover .claudian-model-dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-model-option {
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
border-radius: 3px;
|
|
transition: background 0.1s ease, color 0.1s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-model-option:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-model-option.selected {
|
|
background: rgba(217, 119, 87, 0.15);
|
|
color: #D97757;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/thinking-selector.css
|
|
============================================ */
|
|
/* Thinking budget selector */
|
|
.claudian-thinking-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.claudian-thinking-label-text {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-thinking-gears {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Current selection (visible when collapsed) */
|
|
.claudian-thinking-current {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
color: #D97757;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Options container - expands vertically upward */
|
|
.claudian-thinking-options {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 100%;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
}
|
|
|
|
/* Expand on hover */
|
|
.claudian-thinking-gears:hover .claudian-thinking-options {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-thinking-gear {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
transition: background 0.1s ease, color 0.1s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-thinking-gear:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-thinking-gear.selected {
|
|
background: rgba(217, 119, 87, 0.15);
|
|
color: #D97757;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/permission-toggle.css
|
|
============================================ */
|
|
/* Permission Mode Toggle */
|
|
.claudian-permission-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
padding-left: 12px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.claudian-permission-label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
min-width: 28px;
|
|
}
|
|
|
|
.claudian-toggle-switch {
|
|
width: 32px;
|
|
height: 18px;
|
|
border-radius: 9px;
|
|
background: var(--background-modifier-border);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: background 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--text-muted);
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: transform 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.claudian-toggle-switch:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-toggle-switch.active {
|
|
background: rgba(217, 119, 87, 0.3);
|
|
}
|
|
|
|
.claudian-toggle-switch.active::after {
|
|
transform: translateX(14px);
|
|
background: #D97757;
|
|
}
|
|
|
|
/* Plan mode state */
|
|
.claudian-permission-toggle.plan-mode {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-permission-toggle.plan-mode .claudian-permission-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #00A89D;
|
|
font-weight: 500;
|
|
min-width: auto;
|
|
}
|
|
|
|
.claudian-permission-toggle.plan-mode .claudian-toggle-switch {
|
|
display: none;
|
|
}
|
|
|
|
.claudian-plan-mode-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
letter-spacing: 2px;
|
|
transform: scaleX(1.3);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.claudian-permission-toggle.plan-mode:hover .claudian-permission-label {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/context-path.css
|
|
============================================ */
|
|
/* Context Path Selector */
|
|
.claudian-context-path-selector {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.claudian-context-path-icon-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-context-path-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
opacity: 0.5;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.claudian-context-path-icon-wrapper:hover .claudian-context-path-icon {
|
|
background: var(--background-modifier-hover);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.claudian-context-path-icon.active {
|
|
color: #D97757;
|
|
opacity: 1;
|
|
animation: context-path-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.claudian-context-path-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-context-path-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: #D97757;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claudian-context-path-badge.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-context-path-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 100%;
|
|
margin-bottom: 4px;
|
|
min-width: 260px;
|
|
max-width: 320px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
.claudian-context-path-selector:hover .claudian-context-path-dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-context-path-header {
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-context-path-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-context-path-empty {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-context-path-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.claudian-context-path-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.claudian-context-path-text {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-context-path-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
opacity: 0.6;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.claudian-context-path-remove:hover {
|
|
background: rgba(220, 53, 69, 0.15);
|
|
color: #dc3545;
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-context-path-remove svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/mcp-selector.css
|
|
============================================ */
|
|
/* MCP Server Selector */
|
|
.claudian-mcp-selector {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
opacity: 0.5;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon-wrapper:hover .claudian-mcp-selector-icon {
|
|
background: var(--background-modifier-hover);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon.active {
|
|
color: #D97757;
|
|
opacity: 1;
|
|
animation: mcp-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-mcp-selector-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: #D97757;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claudian-mcp-selector-badge.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-mcp-selector-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 100%;
|
|
margin-bottom: 4px;
|
|
min-width: 200px;
|
|
max-width: 280px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Bridge the gap between icon and dropdown to prevent hover breaks */
|
|
.claudian-mcp-selector-dropdown::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.claudian-mcp-selector-dropdown.visible,
|
|
.claudian-mcp-selector:hover .claudian-mcp-selector-dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-mcp-selector-header {
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-mcp-selector-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-mcp-selector-empty {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-mcp-selector-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-mcp-selector-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-mcp-selector-item.enabled {
|
|
background: rgba(217, 119, 87, 0.1);
|
|
}
|
|
|
|
.claudian-mcp-selector-check {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
color: #D97757;
|
|
}
|
|
|
|
.claudian-mcp-selector-item.enabled .claudian-mcp-selector-check {
|
|
background: rgba(217, 119, 87, 0.2);
|
|
border-color: #D97757;
|
|
}
|
|
|
|
.claudian-mcp-selector-check svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-mcp-selector-item-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-mcp-selector-item-name {
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-mcp-selector-cs-badge {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
background: rgba(217, 119, 87, 0.2);
|
|
color: #D97757;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/file-context.css
|
|
============================================ */
|
|
/* @ Mention dropdown */
|
|
.claudian-mention-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-bottom: 4px;
|
|
background: var(--background-secondary);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
|
|
z-index: 1000;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-mention-dropdown.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Fixed positioning for inline editor */
|
|
.claudian-mention-dropdown-fixed {
|
|
position: fixed;
|
|
z-index: 10001;
|
|
}
|
|
|
|
.claudian-mention-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.claudian-mention-item:hover,
|
|
.claudian-mention-item.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-mention-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-mention-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-mention-path {
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-mention-empty {
|
|
padding: 12px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Scrollbar for mention dropdown */
|
|
.claudian-mention-dropdown::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.claudian-mention-dropdown::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.claudian-mention-dropdown::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* MCP items in @-mention dropdown */
|
|
.claudian-mention-item.mcp-server .claudian-mention-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-mention-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.claudian-mention-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-mention-desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Context file items in @-mention dropdown */
|
|
.claudian-mention-item.context-file .claudian-mention-icon {
|
|
color: #D97757;
|
|
}
|
|
|
|
/* Context folder filter items in @-mention dropdown */
|
|
.claudian-mention-item.context-folder .claudian-mention-icon {
|
|
color: #D97757;
|
|
}
|
|
|
|
.claudian-mention-name-folder {
|
|
color: #D97757;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-mention-name-context {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
|
|
/* ============================================
|
|
features/image-context.css
|
|
============================================ */
|
|
/* Image Context - Preview & Attachments */
|
|
|
|
/* Image preview container (in input area) */
|
|
.claudian-image-preview {
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Individual image preview chip */
|
|
.claudian-image-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.claudian-image-chip:hover {
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Image thumbnail */
|
|
.claudian-image-thumb {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-image-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Image info */
|
|
.claudian-image-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.claudian-image-name {
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-image-size {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Remove button */
|
|
.claudian-image-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-image-remove:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Drop overlay - inside input wrapper */
|
|
.claudian-drop-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(217, 119, 87, 0.08);
|
|
border: 2px dashed #D97757;
|
|
border-radius: 6px;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claudian-drop-overlay.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.claudian-drop-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #D97757;
|
|
}
|
|
|
|
.claudian-drop-content svg {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.claudian-drop-content span {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Images in Messages (displayed above user bubble) */
|
|
|
|
/* Images container - right-aligned above user message */
|
|
.claudian-message-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
justify-content: flex-end;
|
|
margin-bottom: 6px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Individual image in message - standardized size */
|
|
.claudian-message-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-message-image:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.claudian-message-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/image-modal.css
|
|
============================================ */
|
|
/* Full-size Image Modal */
|
|
.claudian-image-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-image-modal {
|
|
position: relative;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
cursor: default;
|
|
}
|
|
|
|
.claudian-image-modal img {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.claudian-image-modal-close {
|
|
position: absolute;
|
|
top: -12px;
|
|
right: -12px;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--background-secondary);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
color: var(--text-muted);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-image-modal-close:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/inline-edit.css
|
|
============================================ */
|
|
/* Inline Edit (CM6 decorations) */
|
|
|
|
/* Selection highlight (shared by inline edit and chat) */
|
|
.cm-line .claudian-selection-highlight,
|
|
.claudian-selection-highlight {
|
|
background: var(--text-selection) !important;
|
|
border-radius: 2px;
|
|
padding: 3px 0;
|
|
margin: -3px 0;
|
|
}
|
|
|
|
/* CM6 widget container - ensure transparent background */
|
|
.cm-widgetBuffer,
|
|
.cm-line:has(.claudian-inline-input-container) {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Input container - fully transparent */
|
|
.claudian-inline-input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 2px 0;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Input wrapper - contains input and spinner */
|
|
.claudian-inline-input-wrap {
|
|
flex: 1;
|
|
position: relative;
|
|
background: transparent !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Input - fully transparent */
|
|
.claudian-inline-input {
|
|
width: 100%;
|
|
padding: 4px 30px 4px 8px;
|
|
border-width: 1px !important;
|
|
border-style: solid !important;
|
|
border-color: var(--background-modifier-border) !important;
|
|
border-radius: 8px !important;
|
|
background: transparent !important;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-interface, -apple-system, BlinkMacSystemFont, sans-serif) !important;
|
|
font-size: var(--font-ui-small, 13px) !important;
|
|
}
|
|
|
|
.claudian-inline-input:focus,
|
|
.claudian-inline-input:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.claudian-inline-input::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.claudian-inline-input:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Spinner - inside input box on right */
|
|
.claudian-inline-spinner {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-top: -7px;
|
|
border: 2px solid var(--background-modifier-border);
|
|
border-top-color: #D97757;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
animation: claudian-inline-spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Agent reply - shown when agent asks clarifying question */
|
|
.claudian-inline-agent-reply {
|
|
padding: 8px;
|
|
margin-bottom: 4px;
|
|
background: transparent;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
font-family: var(--font-interface, -apple-system, BlinkMacSystemFont, sans-serif);
|
|
font-size: var(--font-ui-small, 13px);
|
|
line-height: 1.4;
|
|
color: var(--text-muted);
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Inline Diff - replaces selection in place */
|
|
.claudian-inline-diff-replace {
|
|
/* Inherit all font properties from document */
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
/* Deleted text - red strikethrough */
|
|
.claudian-diff-del {
|
|
background: rgba(255, 80, 80, 0.2);
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Inserted text - green background */
|
|
.claudian-diff-ins {
|
|
background: rgba(80, 200, 80, 0.2);
|
|
}
|
|
|
|
/* Accept/Reject buttons inline with diff */
|
|
.claudian-inline-diff-buttons {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
margin-left: 6px;
|
|
background: none !important;
|
|
}
|
|
|
|
.claudian-inline-diff-btn {
|
|
padding: 4px 6px;
|
|
border: none !important;
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-inline-diff-btn.reject {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-inline-diff-btn.accept {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/diff.css
|
|
============================================ */
|
|
/* Write/Edit Diff Block - Subagent style */
|
|
.claudian-write-edit-block {
|
|
margin: 4px 0;
|
|
background: transparent;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.claudian-write-edit-block::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.claudian-text-block+.claudian-write-edit-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-write-edit-block+.claudian-text-block {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-write-edit-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.claudian-write-edit-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-write-edit-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-write-edit-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-write-edit-stats {
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-write-edit-stats .added {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-write-edit-stats .removed {
|
|
color: var(--color-red);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.claudian-write-edit-status {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Hide empty status on successful completion so stats align to right edge */
|
|
.claudian-write-edit-block.done .claudian-write-edit-status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.claudian-write-edit-status svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-write-edit-status.status-running .claudian-spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-write-edit-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-write-edit-status.status-error,
|
|
.claudian-write-edit-status.status-blocked {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-write-edit-content {
|
|
padding: 0;
|
|
background: transparent;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.claudian-write-edit-content::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.claudian-write-edit-diff-row {
|
|
display: flex;
|
|
}
|
|
|
|
.claudian-write-edit-diff {
|
|
flex: 1;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
background: transparent;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.claudian-write-edit-diff::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.claudian-write-edit-loading,
|
|
.claudian-write-edit-binary,
|
|
.claudian-write-edit-error,
|
|
.claudian-write-edit-done-text {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-write-edit-error {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Diff line styling */
|
|
.claudian-diff-hunk {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-diff-line {
|
|
display: flex;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.claudian-diff-prefix {
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
user-select: none;
|
|
}
|
|
|
|
.claudian-diff-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Diff colors - NO strikethrough for Write/Edit blocks */
|
|
.claudian-diff-equal {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-diff-delete {
|
|
background: rgba(255, 80, 80, 0.25);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-diff-delete .claudian-diff-prefix {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-diff-insert {
|
|
background: rgba(80, 200, 80, 0.25);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-diff-insert .claudian-diff-prefix {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* Hunk separator */
|
|
.claudian-diff-separator {
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
font-style: italic;
|
|
border-top: 1px dashed var(--background-modifier-border);
|
|
border-bottom: 1px dashed var(--background-modifier-border);
|
|
margin: 8px 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.claudian-diff-no-changes {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: 8px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/slash-commands.css
|
|
============================================ */
|
|
/* Slash Command Dropdown */
|
|
.claudian-slash-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-bottom: 4px;
|
|
background: var(--background-secondary);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
|
|
z-index: 1000;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-slash-dropdown.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Fixed positioning for inline editor */
|
|
.claudian-slash-dropdown-fixed {
|
|
position: fixed;
|
|
z-index: 10001;
|
|
}
|
|
|
|
.claudian-slash-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s ease;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-slash-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.claudian-slash-item:hover,
|
|
.claudian-slash-item.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-slash-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.claudian-slash-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-left: 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-slash-desc {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.claudian-slash-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
.claudian-slash-dropdown::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.claudian-slash-dropdown::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.claudian-slash-dropdown::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
modals/approval.css
|
|
============================================ */
|
|
/* Approval Modal */
|
|
.claudian-approval-modal {
|
|
padding: 16px;
|
|
}
|
|
|
|
.claudian-approval-info {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-approval-tool {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-approval-icon {
|
|
color: #D97757;
|
|
}
|
|
|
|
.claudian-approval-tool-name {
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-approval-desc {
|
|
padding: 12px;
|
|
background: var(--background-primary-alt);
|
|
border-radius: 6px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
word-break: break-all;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-approval-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.claudian-approval-btn {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-deny-btn {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
}
|
|
|
|
.claudian-deny-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.claudian-allow-btn {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-allow-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-always-btn {
|
|
background: #D97757;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.claudian-always-btn:hover {
|
|
background: #c56a4a;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
modals/instruction.css
|
|
============================================ */
|
|
/* Instruction Mode */
|
|
|
|
/* Instruction Confirm Modal */
|
|
.claudian-instruction-modal {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.claudian-instruction-section {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-instruction-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.claudian-instruction-original {
|
|
padding: 10px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.claudian-instruction-refined {
|
|
padding: 12px;
|
|
background: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
color: var(--text-normal);
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.claudian-instruction-clarification {
|
|
padding: 12px;
|
|
background: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
color: var(--text-normal);
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.claudian-instruction-edit-container {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.claudian-instruction-edit-textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.claudian-instruction-edit-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-instruction-response-textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.claudian-instruction-response-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-instruction-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.claudian-instruction-btn {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.claudian-instruction-reject-btn {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-instruction-reject-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-instruction-edit-btn {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-instruction-edit-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-instruction-accept-btn {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.claudian-instruction-accept-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Instruction loading state */
|
|
.claudian-instruction-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-instruction-spinner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--background-modifier-border);
|
|
border-top-color: var(--interactive-accent);
|
|
border-radius: 50%;
|
|
animation: claudian-instruction-spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Instruction modal content sections */
|
|
.claudian-instruction-content-section {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-instruction-clarification-section,
|
|
.claudian-instruction-confirmation-section {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
modals/mcp-modal.css
|
|
============================================ */
|
|
/* MCP Server Modal */
|
|
.claudian-mcp-modal .modal-content {
|
|
width: 480px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.claudian-mcp-type-fields {
|
|
margin: 12px 0;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-mcp-type-fields .setting-item {
|
|
padding: 8px 0;
|
|
border-top: none;
|
|
}
|
|
|
|
.claudian-mcp-type-fields .setting-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.claudian-mcp-cmd-setting,
|
|
.claudian-mcp-env-setting {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claudian-mcp-cmd-setting .setting-item-control,
|
|
.claudian-mcp-env-setting .setting-item-control {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-mcp-cmd-textarea,
|
|
.claudian-mcp-env-textarea {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
resize: vertical;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.claudian-mcp-cmd-textarea:focus,
|
|
.claudian-mcp-env-textarea:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.claudian-mcp-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* MCP Test Modal */
|
|
.claudian-mcp-test-modal {
|
|
width: 500px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.claudian-mcp-test-modal .modal-content {
|
|
padding: 0 20px 20px 20px;
|
|
}
|
|
|
|
.claudian-mcp-test-modal .modal-title {
|
|
padding: 20px 20px 12px 20px;
|
|
margin: 0 -20px;
|
|
}
|
|
|
|
.claudian-mcp-test-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 32px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-test-spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: claudian-mcp-spin 1s linear infinite;
|
|
}
|
|
|
|
.claudian-mcp-test-spinner svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.claudian-mcp-test-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-mcp-test-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.claudian-mcp-test-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.claudian-mcp-test-icon.success {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-mcp-test-icon.error {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.claudian-mcp-test-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.claudian-mcp-test-error {
|
|
padding: 10px 12px;
|
|
background: rgba(var(--color-red-rgb), 0.1);
|
|
border: 1px solid var(--text-error);
|
|
border-radius: 6px;
|
|
color: var(--text-error);
|
|
font-size: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-mcp-test-tools {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-mcp-test-tools-header {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-test-tools-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-mcp-test-tool {
|
|
padding: 10px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-test-tool-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-name {
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-toggle {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-toggle .checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-disabled {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.claudian-mcp-test-tool-disabled .claudian-mcp-test-tool-name {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-toggle-all-btn {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.claudian-mcp-toggle-all-btn.is-destructive {
|
|
background: rgba(var(--color-red-rgb), 0.1);
|
|
border-color: rgba(var(--color-red-rgb), 0.3);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.claudian-mcp-toggle-all-btn.is-destructive:hover {
|
|
background: rgba(var(--color-red-rgb), 0.2);
|
|
}
|
|
|
|
.claudian-mcp-test-tool-desc {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.claudian-mcp-test-no-tools {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-mcp-test-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/base.css
|
|
============================================ */
|
|
/* Settings page - remove separator lines from setting items */
|
|
.claudian-settings .setting-item {
|
|
border-top: none;
|
|
}
|
|
|
|
/* Settings section headings (via setHeading()) */
|
|
.claudian-settings .setting-item-heading {
|
|
padding-top: 18px;
|
|
margin-top: 12px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-settings .setting-item-heading:first-child {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
border-top: none;
|
|
}
|
|
|
|
.claudian-settings .setting-item-heading .setting-item-name {
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Custom section descriptions - align with items */
|
|
.claudian-slash-settings-desc,
|
|
.claudian-mcp-settings-desc,
|
|
.claudian-approved-desc {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* Unified icon action buttons for settings */
|
|
.claudian-settings-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-settings-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-settings-action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-settings-delete-btn:hover {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
/* Media folder input width */
|
|
.claudian-settings-media-input {
|
|
width: 200px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/approved-actions.css
|
|
============================================ */
|
|
/* Settings - Approved Actions List */
|
|
.claudian-approved-desc {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-approved-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-approved-list {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-approved-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-approved-item-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-approved-item-tool {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
background: rgba(217, 119, 87, 0.15);
|
|
color: #D97757;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.claudian-approved-item-pattern {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
margin-top: 4px;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-approved-item-date {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.claudian-approved-remove-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.claudian-approved-remove-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/env-snippets.css
|
|
============================================ */
|
|
/* Environment Snippets Styles */
|
|
.claudian-env-snippets-container {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.claudian-snippet-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
margin-top: 16px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-snippet-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-save-env-btn {
|
|
padding: 6px 16px;
|
|
font-size: 13px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.claudian-save-env-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.claudian-snippet-empty {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-snippet-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-snippet-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.claudian-snippet-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-snippet-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-snippet-name {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.claudian-snippet-description {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-snippet-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-restore-snippet-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-restore-snippet-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.claudian-edit-snippet-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-edit-snippet-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-delete-snippet-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-delete-snippet-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Env Snippet Modal */
|
|
.claudian-env-snippet-modal .modal-content {
|
|
max-width: 550px;
|
|
width: 550px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.claudian-env-snippet-modal h2 {
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.claudian-env-snippet-modal .setting-item {
|
|
padding: 8px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.claudian-env-snippet-modal .setting-item-info {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Full-width env vars textarea setting */
|
|
.claudian-env-snippet-setting {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claudian-env-snippet-setting .setting-item-info {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-env-snippet-control {
|
|
width: 100%;
|
|
}
|
|
|
|
.claudian-env-snippet-control textarea {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.claudian-snippet-preview {
|
|
margin: 8px 0;
|
|
padding: 6px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-env-preview {
|
|
background: var(--background-primary);
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
color: var(--text-muted);
|
|
max-height: 120px;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.claudian-snippet-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.claudian-cancel-btn,
|
|
.claudian-save-btn {
|
|
padding: 6px 16px;
|
|
font-size: 13px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-cancel-btn {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-cancel-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-save-btn {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.claudian-save-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/slash-settings.css
|
|
============================================ */
|
|
/* Slash Command Settings */
|
|
.claudian-slash-settings-desc {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-slash-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-slash-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-slash-header-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-add-slash-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-add-slash-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.claudian-export-btn,
|
|
.claudian-import-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-export-btn:hover,
|
|
.claudian-import-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-slash-empty-state {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-slash-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-slash-item-settings {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-slash-item-settings:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-slash-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-slash-item-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-slash-item-name {
|
|
font-weight: 600;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-slash-item-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-slash-item-desc {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.claudian-slash-item-preview {
|
|
font-size: 12px;
|
|
color: var(--text-faint);
|
|
font-family: var(--font-monospace);
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-slash-item-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-edit-slash-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-edit-slash-btn:hover {
|
|
background: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.claudian-delete-slash-btn {
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-delete-slash-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Slash Command Modal */
|
|
.claudian-slash-modal .modal-content {
|
|
max-width: 600px;
|
|
width: auto;
|
|
}
|
|
|
|
.claudian-slash-content-area {
|
|
width: 100%;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
padding: 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
resize: vertical;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-slash-content-area:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-slash-modal-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/mcp-settings.css
|
|
============================================ */
|
|
/* MCP Server Settings */
|
|
.claudian-mcp-settings-desc {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-mcp-container {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-mcp-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-mcp-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-mcp-add-container {
|
|
position: relative;
|
|
}
|
|
|
|
.claudian-add-mcp-btn {
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.claudian-add-mcp-btn:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.claudian-mcp-add-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
margin-top: 4px;
|
|
min-width: 180px;
|
|
background-color: var(--modal-background, var(--background-primary));
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-mcp-add-dropdown.is-visible {
|
|
display: block;
|
|
}
|
|
|
|
.claudian-mcp-add-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-mcp-add-option:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-mcp-add-option-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-add-option-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-mcp-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-mcp-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-mcp-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-mcp-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-mcp-item-disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.claudian-mcp-status {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-top: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-mcp-status-enabled {
|
|
background: var(--color-green);
|
|
}
|
|
|
|
.claudian-mcp-status-disabled {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mcp-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-mcp-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claudian-mcp-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-mcp-type-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.claudian-mcp-context-saving-badge {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-mcp-preview {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-mcp-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-mcp-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.claudian-mcp-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-mcp-action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-mcp-delete-btn:hover {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
accessibility.css
|
|
============================================ */
|
|
/* Accessibility - Focus Visible Styles */
|
|
|
|
/* Collapsible headers - keyboard focus indicators */
|
|
.claudian-tool-header:focus-visible,
|
|
.claudian-thinking-header:focus-visible,
|
|
.claudian-subagent-header:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Header buttons focus indicators */
|
|
.claudian-header-btn:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Action buttons in history dropdown */
|
|
.claudian-action-btn:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* History items focus indicator */
|
|
.claudian-history-item-content:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: -2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Approval modal buttons */
|
|
.claudian-approval-btn:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Toggle switch focus indicator */
|
|
.claudian-toggle-switch:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Model selector button */
|
|
.claudian-model-btn:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Thinking budget selector */
|
|
.claudian-thinking-current:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* File chips focus indicator */
|
|
.claudian-file-chip:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Image chips focus indicator */
|
|
.claudian-image-chip:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Remove buttons focus indicator */
|
|
.claudian-file-chip-remove:focus-visible,
|
|
.claudian-image-remove:focus-visible,
|
|
.claudian-image-modal-close:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Settings buttons */
|
|
.claudian-approved-remove-btn:focus-visible,
|
|
.claudian-save-env-btn:focus-visible,
|
|
.claudian-restore-snippet-btn:focus-visible,
|
|
.claudian-edit-snippet-btn:focus-visible,
|
|
.claudian-delete-snippet-btn:focus-visible,
|
|
.claudian-cancel-btn:focus-visible,
|
|
.claudian-save-btn:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Code language label (copy button) */
|
|
.claudian-code-lang-label:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|