// MCP Plugin Styles
.mcp-settings {
max-width: 600px;
h3 {
margin-bottom: 1.5rem;
color: var(--theme-fg);
}
h4 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.1rem;
color: var(--theme-fg);
}
.form-group {
margin-bottom: 1rem;
}
.form-control {
background: var(--theme-bg);
border-color: var(--theme-border);
color: var(--theme-fg);
&:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25);
}
}
.checkbox label {
cursor: pointer;
user-select: none;
}
.status-container {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #dc3545;
transition: background-color 0.3s;
&.running {
background-color: #28a745;
box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}
}
.button-group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.connection-info {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
code {
background: rgba(0, 0, 0, 0.2);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.9em;
}
}
.config-example {
background: rgba(0, 0, 0, 0.3);
padding: 1rem;
border-radius: 4px;
font-family: monospace;
font-size: 0.85em;
overflow-x: auto;
white-space: pre;
}
hr {
border-color: var(--theme-border);
margin: 1.5rem 0;
}
}
// Confirmation dialog styles
.mcp-confirm-dialog {
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px 8px 0 0;
}
.command-preview {
background: rgba(0, 0, 0, 0.3);
padding: 1rem;
border-radius: 4px;
font-family: monospace;
margin: 1rem 0;
border-left: 3px solid #667eea;
}
.modal-footer {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
}
// Status bar indicator
.mcp-status-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
background: rgba(0, 0, 0, 0.2);
&.running {
color: #28a745;
}
&.stopped {
color: #dc3545;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
}
