5700 lines
113 KiB
CSS
5700 lines
113 KiB
CSS
/* Claudian Plugin Styles */
|
|
/* Built from src/style/ modules */
|
|
|
|
|
|
/* ============================================
|
|
base/variables.css
|
|
============================================ */
|
|
/* Brand & semantic color tokens */
|
|
.claudian-container {
|
|
--claudian-brand: #D97757;
|
|
--claudian-brand-rgb: 217, 119, 87;
|
|
--claudian-error: #dc3545;
|
|
--claudian-error-rgb: 220, 53, 69;
|
|
--claudian-compact: #5bc0de;
|
|
}
|
|
|
|
/* Provider-specific brand overrides */
|
|
body.theme-dark .claudian-container[data-provider="codex"] {
|
|
--claudian-brand: #d0d0d0;
|
|
--claudian-brand-rgb: 208, 208, 208;
|
|
}
|
|
|
|
body.theme-light .claudian-container[data-provider="codex"] {
|
|
--claudian-brand: #000000;
|
|
--claudian-brand-rgb: 0, 0, 0;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
base/container.css
|
|
============================================ */
|
|
.claudian-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
font-family: var(--font-text);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
base/animations.css
|
|
============================================ */
|
|
@keyframes thinking-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes external-context-glow {
|
|
0%,
|
|
100% {
|
|
filter: drop-shadow(0 0 2px rgba(var(--claudian-brand-rgb), 0.4));
|
|
}
|
|
|
|
50% {
|
|
filter: drop-shadow(0 0 6px rgba(var(--claudian-brand-rgb), 0.8));
|
|
}
|
|
}
|
|
|
|
@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));
|
|
}
|
|
}
|
|
|
|
@keyframes claudian-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/header.css
|
|
============================================ */
|
|
/* Header - logo, title/tabs slot, and actions */
|
|
.claudian-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px 12px 12px;
|
|
}
|
|
|
|
/* Title slot: contains logo + title (or tabs in header mode) */
|
|
.claudian-title-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1;
|
|
min-width: 0; /* Allow flex item to shrink below content size */
|
|
}
|
|
|
|
/* Legacy class for backwards compatibility */
|
|
.claudian-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-title-text {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--claudian-brand);
|
|
}
|
|
|
|
/* Header actions (end side - always stays at end via margin-inline-start: auto) */
|
|
.claudian-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.claudian-header-actions-slot {
|
|
/* No margin-inline-start: auto here; it's set by the base .claudian-header-actions */
|
|
}
|
|
|
|
.claudian-header .claudian-tab-bar-container {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-header-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: var(--text-faint);
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.claudian-header-btn:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-header-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-new-tab-btn svg {
|
|
width: 16.8px;
|
|
height: 16.8px;
|
|
}
|
|
|
|
/* ============================================
|
|
components/tabs.css
|
|
============================================ */
|
|
.claudian-tab-bar-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-tab-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-tab-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--background-modifier-border);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
background: var(--background-primary);
|
|
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.claudian-tab-badge:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-tab-badge-active {
|
|
border-color: var(--interactive-accent);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-tab-badge-streaming {
|
|
border-color: var(--claudian-brand, #da7756);
|
|
}
|
|
|
|
.claudian-tab-badge-attention {
|
|
border-color: var(--text-error);
|
|
}
|
|
|
|
.claudian-tab-badge-idle {
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-tab-content-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-tab-content {
|
|
position: relative; /* For scroll-to-bottom button positioning */
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/history.css
|
|
============================================ */
|
|
.claudian-history-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* History dropup menu (opens upward since it's at bottom of view) */
|
|
.claudian-history-menu {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
inset-inline-end: 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.25);
|
|
z-index: 1000;
|
|
max-height: 400px;
|
|
overflow: hidden;
|
|
width: 280px;
|
|
}
|
|
|
|
.claudian-history-menu.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Header mode: dropdown instead of dropup */
|
|
.claudian-container--header-mode .claudian-history-menu {
|
|
bottom: auto;
|
|
top: 100%;
|
|
margin-bottom: 0;
|
|
margin-top: 4px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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-inline-start: 2px solid var(--interactive-accent);
|
|
padding-inline-start: 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-inline-start: 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);
|
|
}
|
|
|
|
.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 wrapper (for scroll-to-bottom button positioning) */
|
|
.claudian-messages-wrapper {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.claudian-message {
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
max-width: 95%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.claudian-message-user {
|
|
position: relative;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
align-self: flex-end;
|
|
border-end-end-radius: 4px;
|
|
}
|
|
|
|
/* Text selection in user messages - visible highlight */
|
|
.claudian-message-user ::selection {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
color: inherit;
|
|
}
|
|
|
|
.claudian-message-assistant {
|
|
background: transparent;
|
|
align-self: stretch;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-end-start-radius: 4px;
|
|
text-align: start;
|
|
}
|
|
|
|
.claudian-message-content {
|
|
line-height: 1.5;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
unicode-bidi: plaintext; /* Proper BiDi text handling for mixed RTL/LTR */
|
|
}
|
|
|
|
.claudian-interrupted {
|
|
color: #d45d5d;
|
|
}
|
|
|
|
.claudian-interrupted-hint {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-text-block {
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
|
|
.claudian-text-copy-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
inset-inline-end: 0;
|
|
border: none;
|
|
color: var(--text-faint);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-text-copy-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-text-block:hover .claudian-text-copy-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-text-copy-btn:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-text-copy-btn.copied {
|
|
color: var(--text-accent);
|
|
font-size: 11px;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.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-inline-start: 20px;
|
|
}
|
|
|
|
/* Full-width tables */
|
|
.claudian-message-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-message-content th,
|
|
.claudian-message-content td {
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 6px 10px;
|
|
text-align: start;
|
|
}
|
|
|
|
.claudian-message-content th {
|
|
background: var(--background-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-message-content tr:hover {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Response duration footer - styled as another line of content */
|
|
.claudian-response-footer {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-baked-duration {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Action buttons toolbar below user messages */
|
|
.claudian-user-msg-actions {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
right: 0;
|
|
display: flex;
|
|
gap: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.claudian-message-user:hover .claudian-user-msg-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-user-msg-actions span {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-faint);
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.claudian-user-msg-actions span svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-user-msg-actions span:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-user-msg-actions span.copied {
|
|
color: var(--text-accent);
|
|
font-size: 11px;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* Compact boundary indicator */
|
|
.claudian-compact-boundary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.claudian-compact-boundary::before,
|
|
.claudian-compact-boundary::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-compact-boundary-label {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/nav-sidebar.css
|
|
============================================ */
|
|
/* Navigation Sidebar */
|
|
.claudian-nav-sidebar {
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
z-index: 100;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.claudian-nav-sidebar.visible {
|
|
opacity: 0.15;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.claudian-nav-sidebar.visible:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-nav-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 16px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.claudian-nav-btn:hover {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.claudian-nav-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Specific button spacing/grouping if needed */
|
|
.claudian-nav-btn-top {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-nav-btn-bottom {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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: rgba(0, 0, 0, 0.2);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Light mode: use a lighter background so hljs comment colors stay readable */
|
|
body.theme-light .claudian-code-wrapper pre,
|
|
body.theme-light .claudian-message-content pre {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* 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;
|
|
inset-inline-end: 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;
|
|
inset-inline-end: 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
|
|
============================================ */
|
|
.claudian-thinking {
|
|
color: var(--claudian-brand);
|
|
font-style: italic;
|
|
padding: 4px 0;
|
|
text-align: start;
|
|
animation: thinking-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.claudian-thinking.claudian-thinking--compact {
|
|
color: var(--claudian-compact);
|
|
}
|
|
|
|
.claudian-thinking-hint {
|
|
color: var(--text-muted);
|
|
font-style: normal;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.claudian-thinking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-thinking-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--claudian-brand);
|
|
}
|
|
|
|
/* Thinking block content - tree-branch style */
|
|
.claudian-thinking-content {
|
|
padding: 4px 0;
|
|
padding-inline-start: 24px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border-inline-start: 2px solid var(--background-modifier-border);
|
|
margin-inline-start: 7px;
|
|
}
|
|
|
|
.claudian-thinking-content p {
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.claudian-thinking-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.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
|
|
============================================ */
|
|
.claudian-tool-call {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-tool-header:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.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-name {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-tool-summary {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-tool-summary:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Legacy: StatusPanel bash entries still use claudian-tool-label */
|
|
.claudian-tool-label {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-tool-current {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-tool-current:empty {
|
|
display: none;
|
|
}
|
|
|
|
.claudian-tool-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Tool call content - border style (like thinking block) */
|
|
.claudian-tool-content {
|
|
padding: 4px 0;
|
|
padding-inline-start: 16px;
|
|
margin-inline-start: 7px;
|
|
border-inline-start: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Tool content variants that render inline widgets instead of bordered results */
|
|
.claudian-tool-content-todo,
|
|
.claudian-tool-content-ask {
|
|
border-inline-start: none;
|
|
margin-inline-start: 0;
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
/* Expanded content: per-line rendering */
|
|
.claudian-tool-lines {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.claudian-tool-line {
|
|
padding: 1px 0;
|
|
color: var(--text-muted);
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Hover highlight for file search results */
|
|
.claudian-tool-line.hoverable:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Truncation indicator: "... N more lines" */
|
|
.claudian-tool-truncated {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
padding: 4px 0;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ToolSearch expanded: icon + tool name rows */
|
|
.claudian-tool-search-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 0;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-tool-search-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.claudian-tool-search-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Web search links */
|
|
.claudian-tool-link {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
padding: 3px 0;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.claudian-tool-link:hover {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-tool-link-icon {
|
|
flex-shrink: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: 2px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.claudian-tool-link-icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-tool-link-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Web search summary section */
|
|
.claudian-tool-web-summary {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
margin-top: 4px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Empty state for file search */
|
|
.claudian-tool-empty {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.claudian-tool-result-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.claudian-tool-result-item {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.claudian-tool-patch-section + .claudian-tool-patch-section {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.claudian-tool-patch-header {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-tool-result-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/status-panel.css
|
|
============================================ */
|
|
/* Status Panel - persistent bottom panel for todos and command output */
|
|
|
|
.claudian-status-panel-container {
|
|
flex-shrink: 0;
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.claudian-status-panel {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* Todo Section */
|
|
|
|
.claudian-status-panel-todos {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.claudian-status-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background 0.15s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-status-panel-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-status-panel-header:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.claudian-status-panel-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-status-panel-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-status-panel-label {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-status-panel-current {
|
|
flex: 1;
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-status-panel-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-status-panel-status svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-status-panel-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-status-panel-content {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* Individual todo item - shared by status panel and inline tool via .claudian-todo-list-container */
|
|
.claudian-todo-list-container .claudian-todo-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 1px 0;
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-status-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-status-icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-text {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-pending .claudian-todo-status-icon {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-pending .claudian-todo-status-icon svg {
|
|
transform: scale(2);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-pending .claudian-todo-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-status-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-status-icon svg {
|
|
transform: scale(2);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-completed .claudian-todo-status-icon {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-todo-list-container .claudian-todo-completed .claudian-todo-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Bash Output Section */
|
|
|
|
.claudian-status-panel-bash {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-status-panel-bash-header {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.claudian-status-panel-bash-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.claudian-status-panel-bash-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-status-panel-bash-action:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-status-panel-bash-content {
|
|
padding-top: 2px;
|
|
max-height: 320px;
|
|
max-height: min(40vh, 320px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.claudian-status-panel-bash-entry {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.claudian-status-panel-bash-entry .claudian-tool-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.claudian-status-panel-bash-entry .claudian-tool-call {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Keep bash output blocks from growing without bound */
|
|
.claudian-status-panel-bash-entry .claudian-tool-result-text {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
word-break: break-word;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/subagent.css
|
|
============================================ */
|
|
.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;
|
|
}
|
|
|
|
.claudian-subagent-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
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);
|
|
}
|
|
|
|
.claudian-subagent-content {
|
|
padding: 4px 0;
|
|
padding-inline-start: 16px;
|
|
margin-inline-start: 7px;
|
|
border-inline-start: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-subagent-section {
|
|
margin: 2px 0 6px;
|
|
}
|
|
|
|
.claudian-subagent-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.claudian-subagent-section-header:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-subagent-section-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-subagent-section-body {
|
|
padding-inline-start: 6px;
|
|
}
|
|
|
|
.claudian-subagent-prompt-text,
|
|
.claudian-subagent-result-output {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: var(--text-muted);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.claudian-subagent-result-output {
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-subagent-tools {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-subagent-tool-item {
|
|
display: block;
|
|
}
|
|
|
|
.claudian-subagent-tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.claudian-subagent-tool-header:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.claudian-subagent-tool-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-tool-icon svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.claudian-subagent-tool-name {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-tool-summary {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-subagent-tool-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-subagent-tool-status svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-subagent-tool-status.status-running {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-subagent-tool-status.status-completed {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-subagent-tool-status.status-error,
|
|
.claudian-subagent-tool-status.status-blocked {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-subagent-tool-content {
|
|
padding: 2px 0 2px 16px;
|
|
}
|
|
|
|
.claudian-subagent-tool-empty {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.claudian-subagent-status-text {
|
|
font-size: 11px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-muted);
|
|
margin-inline-start: auto;
|
|
padding-inline-start: 8px;
|
|
}
|
|
|
|
.claudian-subagent-list.async .claudian-subagent-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-subagent-list.async.pending .claudian-subagent-status-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-subagent-list.async.running .claudian-subagent-status-text {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.claudian-subagent-list.async.awaiting .claudian-subagent-status-text {
|
|
color: var(--color-yellow);
|
|
}
|
|
|
|
.claudian-subagent-list.async.completed .claudian-subagent-status-text {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.claudian-subagent-list.async.error .claudian-subagent-status-text {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.claudian-subagent-list.async.orphaned .claudian-subagent-status-text {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/input.css
|
|
============================================ */
|
|
/* Input area */
|
|
.claudian-input-container {
|
|
position: relative;
|
|
padding: 12px 0 0 0;
|
|
}
|
|
|
|
/* Input wrapper (border container) - flex column so textarea expands when no chips */
|
|
/* Height calculation: context row (36px) + textarea min (60px) + toolbar (38px) + border (2px) = 136px */
|
|
.claudian-input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 140px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
/* Context row (file chip start, selection indicator end) - inside input wrapper at top */
|
|
/* Collapsed by default; expanded via .has-content class; textarea fills remaining space */
|
|
.claudian-context-row {
|
|
display: none;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-shrink: 0;
|
|
padding: 6px 10px 0 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Show context row when it has visible content */
|
|
.claudian-context-row.has-content {
|
|
display: flex;
|
|
}
|
|
|
|
/* Nav row (tab badges start, header icons end) - above input wrapper */
|
|
.claudian-input-nav-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 0 8px 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Header mode: hide nav row above input (content moved to header) */
|
|
.claudian-container--header-mode .claudian-input-nav-row {
|
|
display: none;
|
|
}
|
|
|
|
/* Selection indicator (shown when text is selected in editor) */
|
|
/* Match file chip height (24px): chip has 16px remove button + 6px padding + 2px border */
|
|
/* Indicator: 12px text + 10px padding (5+5) + 2px border = 24px */
|
|
.claudian-selection-indicator,
|
|
.claudian-browser-selection-indicator,
|
|
.claudian-canvas-indicator {
|
|
color: #7abaff;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
padding: 5px 6px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
margin-inline-start: auto;
|
|
flex-shrink: 0;
|
|
order: 4;
|
|
max-width: min(100%, clamp(220px, 64vw, 560px));
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-input {
|
|
width: 100%;
|
|
flex: 1 1 0;
|
|
min-height: 60px;
|
|
/* max-height dynamically set by JS: max(150px, 55% of view height) */
|
|
resize: none;
|
|
padding: 8px 10px 10px 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;
|
|
overflow-y: auto;
|
|
unicode-bidi: plaintext; /* Proper BiDi text handling for mixed RTL/LTR */
|
|
}
|
|
|
|
.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;
|
|
flex-shrink: 0;
|
|
padding: 4px 6px 6px 6px;
|
|
}
|
|
|
|
/* File indicator (attached files) */
|
|
.claudian-file-indicator {
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.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;
|
|
line-height: 1;
|
|
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);
|
|
}
|
|
|
|
/* Composer queue status row (queued follow-up preview + steer action) */
|
|
.claudian-input-queue-row {
|
|
display: none;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-style: normal;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 2px 8px 2px;
|
|
}
|
|
|
|
.claudian-queue-indicator-text {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-queue-indicator-action {
|
|
flex: 0 0 auto;
|
|
padding: 1px 8px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--interactive-accent);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-queue-indicator-action:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.claudian-queue-indicator-action[disabled] {
|
|
color: var(--text-faint);
|
|
cursor: default;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Light blue border when instruction mode is active */
|
|
.claudian-input-instruction-mode {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 1px #60a5fa;
|
|
}
|
|
|
|
/* Pink border when bash mode is active */
|
|
.claudian-input-bang-bash-mode {
|
|
border-color: #f472b6 !important;
|
|
box-shadow: 0 0 0 1px #f472b6;
|
|
}
|
|
|
|
/* Monospace input while in bash mode */
|
|
.claudian-input-wrapper.claudian-input-bang-bash-mode .claudian-input {
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
components/context-footer.css
|
|
============================================ */
|
|
/* Context usage meter (inline in toolbar) */
|
|
|
|
.claudian-context-meter {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-inline-start: 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: var(--claudian-brand);
|
|
transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
|
|
}
|
|
|
|
.claudian-context-meter-percent {
|
|
font-size: 11px;
|
|
color: var(--claudian-brand);
|
|
min-width: 24px;
|
|
text-align: end;
|
|
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(--claudian-brand);
|
|
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-group {
|
|
padding: 3px 8px;
|
|
font-size: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claudian-model-group:not(:first-child) {
|
|
margin-top: 4px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.claudian-model-provider-icon {
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.claudian-model-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
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(var(--claudian-brand-rgb), 0.15);
|
|
color: var(--claudian-brand);
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/thinking-selector.css
|
|
============================================ */
|
|
/* Thinking selector (effort for adaptive models, token budget for custom) */
|
|
.claudian-thinking-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Effort / budget container (shared layout) */
|
|
.claudian-thinking-effort,
|
|
.claudian-thinking-budget {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.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: var(--claudian-brand);
|
|
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(var(--claudian-brand-rgb), 0.15);
|
|
color: var(--claudian-brand);
|
|
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-permission-label.plan-active {
|
|
color: rgb(92, 148, 140);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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(var(--claudian-brand-rgb), 0.3);
|
|
}
|
|
|
|
.claudian-toggle-switch.active::after {
|
|
transform: translateX(14px);
|
|
background: var(--claudian-brand);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/service-tier-toggle.css
|
|
============================================ */
|
|
/* Codex fast-mode / service-tier toggle */
|
|
.claudian-service-tier-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.claudian-service-tier-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: color 0.15s ease, background 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-service-tier-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.claudian-service-tier-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.claudian-service-tier-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-service-tier-button.active {
|
|
color: var(--claudian-brand);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
toolbar/external-context.css
|
|
============================================ */
|
|
/* External Context Selector */
|
|
.claudian-external-context-selector {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.claudian-external-context-icon-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.claudian-external-context-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--text-faint);
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.claudian-external-context-icon-wrapper:hover .claudian-external-context-icon {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-external-context-icon.active {
|
|
color: var(--claudian-brand);
|
|
animation: external-context-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.claudian-external-context-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-external-context-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: var(--claudian-brand);
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.claudian-external-context-badge.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-external-context-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-external-context-selector:hover .claudian-external-context-dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.claudian-external-context-header {
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.claudian-external-context-list {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-external-context-empty {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-external-context-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.claudian-external-context-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.claudian-external-context-text {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-external-context-lock {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
opacity: 0.4;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.claudian-external-context-lock:hover {
|
|
background: var(--background-modifier-hover);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.claudian-external-context-lock.locked {
|
|
color: var(--claudian-brand);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.claudian-external-context-lock.locked:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-external-context-lock svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.claudian-external-context-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-external-context-remove:hover {
|
|
background: rgba(var(--claudian-error-rgb), 0.15);
|
|
color: var(--claudian-error);
|
|
opacity: 1;
|
|
}
|
|
|
|
.claudian-external-context-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;
|
|
color: var(--text-faint);
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.claudian-mcp-selector-icon-wrapper:hover .claudian-mcp-selector-icon {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-mcp-selector-icon.active {
|
|
color: var(--claudian-brand);
|
|
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: var(--claudian-brand);
|
|
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(var(--claudian-brand-rgb), 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: var(--claudian-brand);
|
|
}
|
|
|
|
.claudian-mcp-selector-item.enabled .claudian-mcp-selector-check {
|
|
background: rgba(var(--claudian-brand-rgb), 0.2);
|
|
border-color: var(--claudian-brand);
|
|
}
|
|
|
|
.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(var(--claudian-brand-rgb), 0.2);
|
|
color: var(--claudian-brand);
|
|
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-item.vault-folder .claudian-mention-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.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: var(--claudian-brand);
|
|
}
|
|
|
|
.claudian-mention-item.context-file .claudian-mention-text {
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-mention-item.context-file .claudian-mention-name-context {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Context folder filter items in @-mention dropdown */
|
|
.claudian-mention-item.context-folder .claudian-mention-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-mention-name-folder {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.claudian-mention-name-context {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Agent folder items in @-mention dropdown */
|
|
.claudian-mention-item.agent-folder .claudian-mention-icon {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.claudian-mention-name-agent-folder {
|
|
color: var(--link-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Agent items in @-mention dropdown (inside @Agents/) */
|
|
.claudian-mention-item.agent .claudian-mention-icon {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.claudian-mention-item.agent .claudian-mention-text {
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-mention-item.agent .claudian-mention-name-agent {
|
|
color: var(--text-normal);
|
|
font-size: 13px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-mention-item.agent .claudian-mention-agent-desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/file-link.css
|
|
============================================ */
|
|
/* Clickable file links that open files in Obsidian */
|
|
.claudian-file-link {
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.claudian-file-link:hover {
|
|
color: var(--text-accent-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* File link inside inline code */
|
|
code .claudian-file-link {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
code .claudian-file-link:hover {
|
|
color: var(--text-accent-hover);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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 {
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
flex-shrink: 0;
|
|
font-size: 0; /* Hide text character */
|
|
}
|
|
|
|
.claudian-image-remove::before,
|
|
.claudian-image-remove::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 2px;
|
|
background: var(--text-muted);
|
|
border-radius: 1px;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.claudian-image-remove::before {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.claudian-image-remove::after {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
.claudian-image-remove:hover {
|
|
background: var(--background-modifier-error);
|
|
}
|
|
|
|
.claudian-image-remove:hover::before,
|
|
.claudian-image-remove:hover::after {
|
|
background: var(--text-on-accent);
|
|
}
|
|
|
|
/* Drop overlay - inside input wrapper */
|
|
.claudian-drop-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(var(--claudian-brand-rgb), 0.08);
|
|
border: 2px dashed var(--claudian-brand);
|
|
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: var(--claudian-brand);
|
|
}
|
|
|
|
.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-embed.css
|
|
============================================ */
|
|
/* Image embed styles - displays ![[image.png]] wikilinks as actual images */
|
|
|
|
.claudian-embedded-image {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
margin: 0.5em 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.claudian-embedded-image img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.claudian-embedded-image img:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* When image is inline with text */
|
|
.claudian-text-block p .claudian-embedded-image {
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
/* Block-level image (standalone on its own line) */
|
|
.claudian-text-block p > .claudian-embedded-image:only-child {
|
|
display: block;
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
/* Fallback when image file not found */
|
|
.claudian-embedded-image-fallback {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
background: var(--background-modifier-hover);
|
|
padding: 0.1em 0.4em;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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;
|
|
}
|
|
|
|
/* Preview mode selection highlight via CSS Custom Highlight API */
|
|
::highlight(claudian-selection) {
|
|
background: var(--text-selection);
|
|
}
|
|
|
|
/* 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 8px;
|
|
padding-inline-end: 30px;
|
|
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 end side */
|
|
.claudian-inline-spinner {
|
|
position: absolute;
|
|
inset-inline-end: 8px;
|
|
top: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-top: -7px;
|
|
border: 2px solid var(--background-modifier-border);
|
|
border-top-color: var(--claudian-brand);
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
animation: claudian-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-inline-start: 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;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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: 8px;
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-write-edit-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-write-edit-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Two-part header: name (fixed) + summary (flexible) */
|
|
.claudian-write-edit-name {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-write-edit-summary {
|
|
font-family: var(--font-monospace);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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-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;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.claudian-slash-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.claudian-slash-desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/resume-session.css
|
|
============================================ */
|
|
/* Resume Session Dropdown */
|
|
.claudian-resume-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: 400px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.claudian-resume-dropdown.visible {
|
|
display: block;
|
|
}
|
|
|
|
.claudian-resume-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-resume-list {
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.claudian-resume-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-resume-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.claudian-resume-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.claudian-resume-item:hover,
|
|
.claudian-resume-item.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-resume-item.current {
|
|
background: var(--background-secondary);
|
|
border-inline-start: 2px solid var(--interactive-accent);
|
|
padding-inline-start: 10px;
|
|
}
|
|
|
|
.claudian-resume-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-resume-item-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.claudian-resume-item.current .claudian-resume-item-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-resume-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-resume-item-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.claudian-resume-item-date {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
.claudian-resume-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.claudian-resume-list::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.claudian-resume-list::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/ask-user-question.css
|
|
============================================ */
|
|
/* AskUserQuestion - inline widget rendered in chat panel */
|
|
|
|
.claudian-ask-question-inline {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.claudian-ask-inline-title {
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
padding: 6px 10px 0;
|
|
}
|
|
|
|
/* ── Tab bar ─────────────────────────────────── */
|
|
|
|
.claudian-ask-tab-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.claudian-ask-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
color: var(--text-muted);
|
|
transition:
|
|
background 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.claudian-ask-tab:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-tab.is-active {
|
|
background: hsla(55, 30%, 50%, 0.18);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-tab-label {
|
|
font-weight: 600;
|
|
max-width: 14ch;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-ask-tab-tick {
|
|
color: var(--color-green);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.claudian-ask-tab-submit-check {
|
|
color: var(--color-green);
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ── Content area ────────────────────────────── */
|
|
|
|
.claudian-ask-content {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.claudian-ask-question-text {
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ── Item list ───────────────────────────────── */
|
|
|
|
.claudian-ask-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-ask-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 3px 4px;
|
|
cursor: pointer;
|
|
line-height: 1.4;
|
|
color: var(--text-normal);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.claudian-ask-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-ask-cursor {
|
|
display: inline-block;
|
|
width: 2ch;
|
|
flex-shrink: 0;
|
|
color: var(--text-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.claudian-ask-item-num {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-ask-item-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-ask-label-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.claudian-ask-item-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-ask-item-desc {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* Selected items: green text */
|
|
.claudian-ask-item.is-selected .claudian-ask-item-label {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* Disabled items: muted text */
|
|
.claudian-ask-item.is-disabled .claudian-ask-item-label {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ── Multi-select brackets ───────────────────── */
|
|
|
|
.claudian-ask-check {
|
|
color: var(--text-faint);
|
|
flex-shrink: 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
.claudian-ask-check.is-checked {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* ── Single-select check mark ────────────────── */
|
|
|
|
.claudian-ask-check-mark {
|
|
color: var(--color-green);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Custom input ────────────────────────────── */
|
|
|
|
.claudian-ask-item input.claudian-ask-custom-text,
|
|
.claudian-ask-item input.claudian-ask-custom-text:hover,
|
|
.claudian-ask-item input.claudian-ask-custom-text:focus {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
font-family: var(--font-monospace);
|
|
font-size: inherit;
|
|
color: var(--text-normal);
|
|
outline: none;
|
|
padding: 0;
|
|
width: 0;
|
|
height: auto;
|
|
min-height: 0;
|
|
line-height: 1.4;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-ask-custom-text::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ── Submit review tab ───────────────────────── */
|
|
|
|
.claudian-ask-review-title {
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.claudian-ask-review {
|
|
font-family: var(--font-monospace);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-tool-content .claudian-ask-review {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.claudian-ask-review:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.claudian-ask-review-pair {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-ask-review-pair:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.claudian-ask-review-num {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-ask-review-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-ask-review-q-text {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-ask-review-a-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-review-empty {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-ask-review-prompt {
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* ── Hints ───────────────────────────────────── */
|
|
|
|
.claudian-ask-hints {
|
|
color: var(--text-faint);
|
|
padding-top: 6px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* ── Approval header (inline permission request) ── */
|
|
|
|
.claudian-ask-approval-info {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.claudian-ask-approval-tool {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-ask-approval-icon {
|
|
color: var(--claudian-brand);
|
|
}
|
|
|
|
.claudian-ask-approval-tool-name {
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-ask-approval-reason {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.claudian-ask-approval-blocked-path {
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
padding: 3px 6px;
|
|
background: var(--background-primary-alt);
|
|
border-radius: 4px;
|
|
margin-bottom: 6px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.claudian-ask-approval-agent {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.claudian-ask-approval-desc {
|
|
padding: 8px 10px;
|
|
background: var(--background-primary-alt);
|
|
border-radius: 6px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
word-break: break-all;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
features/plan-mode.css
|
|
============================================ */
|
|
/* Plan Mode - inline cards for EnterPlanMode / ExitPlanMode */
|
|
|
|
.claudian-plan-approval-inline {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.claudian-plan-inline-title {
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
padding: 6px 10px 0;
|
|
}
|
|
|
|
/* ── Plan content preview ────────────────────────── */
|
|
|
|
.claudian-plan-content-preview {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin: 6px 10px 8px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-plan-content-preview::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.claudian-plan-content-preview::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.claudian-plan-content-preview p {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.claudian-plan-content-preview p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.claudian-plan-content-preview h1,
|
|
.claudian-plan-content-preview h2,
|
|
.claudian-plan-content-preview h3,
|
|
.claudian-plan-content-preview h4 {
|
|
margin: 8px 0 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.claudian-plan-content-preview ul,
|
|
.claudian-plan-content-preview ol {
|
|
margin: 2px 0 6px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.claudian-plan-content-preview li {
|
|
margin: 0;
|
|
}
|
|
|
|
.claudian-plan-content-preview code {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.claudian-plan-content-text {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* ── Permissions list ──────────────────────────── */
|
|
|
|
.claudian-plan-permissions {
|
|
padding: 4px 10px 8px;
|
|
}
|
|
|
|
.claudian-plan-permissions-label {
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-plan-permissions-list {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--text-normal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.claudian-plan-permissions-list li {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Plan mode input border ──────────────────────── */
|
|
|
|
.claudian-input-wrapper.claudian-input-plan-mode {
|
|
border-color: rgb(92, 148, 140) !important;
|
|
box-shadow: 0 0 0 1px rgb(92, 148, 140);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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-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-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;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
modals/fork-target.css
|
|
============================================ */
|
|
/* Fork Target Modal */
|
|
.claudian-fork-target-modal {
|
|
max-width: 340px;
|
|
}
|
|
|
|
.claudian-fork-target-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.claudian-fork-target-option {
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: var(--text-normal);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.claudian-fork-target-option:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/base.css
|
|
============================================ */
|
|
/* ── Settings tab navigation ── */
|
|
|
|
.claudian-settings-tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.claudian-settings-tab {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--font-medium);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.claudian-settings-tab:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-settings-tab--active {
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-settings-tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.claudian-settings-tab-content--active {
|
|
display: block;
|
|
}
|
|
|
|
/* Codex placeholder */
|
|
.claudian-settings-codex-placeholder {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* 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-sp-settings-desc,
|
|
.claudian-mcp-settings-desc,
|
|
.claudian-plugin-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);
|
|
}
|
|
|
|
/* Hotkey grid - 3 columns */
|
|
.claudian-hotkey-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px 12px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.claudian-hotkey-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-hotkey-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-hotkey-name {
|
|
flex: 1;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.claudian-hotkey-badge {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
background: var(--background-modifier-hover);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* Media folder input width */
|
|
.claudian-settings-media-input {
|
|
width: 200px;
|
|
}
|
|
|
|
/* ── Shared settings panel layout (used by slash-settings + agent-settings) ── */
|
|
|
|
.claudian-sp-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-sp-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-sp-header-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.claudian-sp-empty-state {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-sp-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-sp-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-sp-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-sp-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-sp-item-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-sp-item-name {
|
|
font-weight: 600;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-sp-item-desc {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.claudian-sp-item-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-sp-advanced-section {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 0 12px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.claudian-sp-advanced-summary {
|
|
cursor: pointer;
|
|
padding: 8px 0;
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-sp-advanced-section[open] .claudian-sp-advanced-summary {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.claudian-sp-modal .modal-content {
|
|
max-width: 600px;
|
|
width: auto;
|
|
}
|
|
|
|
.claudian-sp-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-sp-content-area:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.claudian-sp-modal-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/env-snippets.css
|
|
============================================ */
|
|
/* Context Limits Styles */
|
|
.claudian-context-limits-container {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.claudian-context-limits-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
margin-top: 16px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-context-limits-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-context-limits-desc {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
padding: 0 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.claudian-context-limits-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-context-limits-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-context-limits-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-context-limits-model {
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.claudian-context-limits-input-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-left: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-context-limits-input {
|
|
width: 80px;
|
|
padding: 4px 8px;
|
|
font-size: var(--font-ui-small);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-context-limits-input:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.claudian-context-limits-input.claudian-input-error {
|
|
border-color: var(--text-error);
|
|
}
|
|
|
|
.claudian-context-limit-validation {
|
|
display: none;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-error);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Context limits section in snippet modal */
|
|
.claudian-snippet-context-limits {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.claudian-snippet-context-limits .setting-item-description {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.claudian-snippet-limit-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.claudian-snippet-limit-model {
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.claudian-snippet-limit-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.claudian-snippet-limit-input {
|
|
width: 80px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/slash-settings.css
|
|
============================================ */
|
|
/* Slash Command Settings — unique rules only (shared layout in base.css .claudian-sp-*) */
|
|
|
|
.claudian-slash-item-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.claudian-slash-item-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/plugin-settings.css
|
|
============================================ */
|
|
/* Plugin Settings */
|
|
.claudian-plugin-settings-desc {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.claudian-plugins-container {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.claudian-plugin-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.claudian-plugin-label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.claudian-plugin-empty {
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.claudian-plugin-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.claudian-plugin-section-header {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
padding: 8px 12px 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-plugin-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-plugin-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.claudian-plugin-item-disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.claudian-plugin-item-error {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.claudian-plugin-status {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-top: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-plugin-status-enabled {
|
|
background: var(--color-green);
|
|
}
|
|
|
|
.claudian-plugin-status-disabled {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.claudian-plugin-status-error {
|
|
background: var(--text-error);
|
|
}
|
|
|
|
.claudian-plugin-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.claudian-plugin-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claudian-plugin-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.claudian-plugin-version-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.claudian-plugin-error-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--text-error);
|
|
color: var(--text-on-accent);
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.claudian-plugin-preview {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.claudian-plugin-preview-error {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.claudian-plugin-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.claudian-plugin-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-plugin-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.claudian-plugin-action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
settings/agent-settings.css
|
|
============================================ */
|
|
/* Agent Settings — all structural rules live in base.css .claudian-sp-* */
|
|
/* This file is kept as a placeholder for future agent-specific overrides. */
|
|
|
|
|
|
/* ============================================
|
|
accessibility.css
|
|
============================================ */
|
|
/* Accessibility - Focus Visible Styles */
|
|
|
|
/* outline + offset + border-radius */
|
|
.claudian-tool-header:focus-visible,
|
|
.claudian-thinking-header:focus-visible,
|
|
.claudian-subagent-header:focus-visible,
|
|
.claudian-header-btn:focus-visible,
|
|
.claudian-model-btn:focus-visible,
|
|
.claudian-thinking-current:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* outline + offset only */
|
|
.claudian-action-btn:focus-visible,
|
|
.claudian-toggle-switch:focus-visible,
|
|
.claudian-file-chip:focus-visible,
|
|
.claudian-image-chip:focus-visible,
|
|
.claudian-file-chip-remove:focus-visible,
|
|
.claudian-image-remove:focus-visible,
|
|
.claudian-image-modal-close:focus-visible,
|
|
.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,
|
|
.claudian-code-lang-label:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* outline + negative offset + border-radius */
|
|
.claudian-history-item-content:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: -2px;
|
|
border-radius: 4px;
|
|
}
|