mcp-test-frontend.css•11.8 kB
/* CSS Variables for consistent theming */
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--secondary-color: #64748b;
--success-color: #10b981;
--error-color: #ef4444;
--warning-color: #f59e0b;
--background-color: #ffffff;
--surface-color: #f8fafc;
--border-color: #e2e8f0;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
/* Dark theme variables */
@media (prefers-color-scheme: dark) {
:root {
--background-color: #0f172a;
--surface-color: #1e293b;
--border-color: #334155;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #64748b;
}
}
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--text-primary);
background-color: var(--background-color);
min-height: 100vh;
}
/* Main layout using CSS Grid */
.app-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"sidebar history";
grid-template-columns: 300px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: var(--spacing-md);
padding: var(--spacing-md);
}
/* Header */
.header {
grid-area: header;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
}
.header h1 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
}
.header p {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
/* Sidebar - Connection Panel */
.sidebar {
grid-area: sidebar;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
height: fit-content;
}
/* Main content - Tools and Execution */
.main-content {
grid-area: main;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.tools-panel, .execution-panel {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
}
/* History Panel */
.history-panel {
grid-area: history;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
max-height: 300px;
overflow-y: auto;
}
/* Panel headers */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--border-color);
}
.panel-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
/* Form elements */
.form-group {
margin-bottom: var(--spacing-md);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.form-input {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
background-color: var(--background-color);
color: var(--text-primary);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}
.form-input:invalid {
border-color: var(--error-color);
}
.form-textarea {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-family: inherit;
background-color: var(--background-color);
color: var(--text-primary);
min-height: 100px;
resize: vertical;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right var(--spacing-sm) center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: var(--spacing-xl);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
min-height: 36px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
}
.btn-secondary {
background-color: transparent;
color: var(--text-secondary);
border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--surface-color);
color: var(--text-primary);
}
.btn-success {
background-color: var(--success-color);
color: white;
border-color: var(--success-color);
}
.btn-error {
background-color: var(--error-color);
color: white;
border-color: var(--error-color);
}
.btn-sm {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
min-height: 28px;
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-base);
min-height: 44px;
}
/* Status indicators */
.status-indicator {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.status-connected {
background-color: rgb(16 185 129 / 0.1);
color: var(--success-color);
}
.status-disconnected {
background-color: rgb(239 68 68 / 0.1);
color: var(--error-color);
}
.status-connecting {
background-color: rgb(245 158 11 / 0.1);
color: var(--warning-color);
}
/* Status dot */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: currentColor;
}
/* Cards and containers */
.card {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.card-header {
margin-bottom: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--border-color);
}
.card-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
/* Tool cards */
.tool-card {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-md);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
}
.tool-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg) !important;
border-color: var(--primary-color) !important;
}
.tool-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.tool-card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
}
.tool-card-category {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
background-color: rgb(37 99 235 / 0.1);
color: var(--primary-color);
}
.tool-card-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-sm);
}
.tool-card-metadata {
display: flex;
gap: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.tool-card-metadata span {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-color); }
.text-error { color: var(--error-color); }
.text-warning { color: var(--warning-color); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
/* Responsive design */
@media (max-width: 768px) {
.app-container {
grid-template-areas:
"header"
"sidebar"
"main"
"history";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
padding: var(--spacing-sm);
gap: var(--spacing-sm);
}
.sidebar {
height: auto;
}
.history-panel {
max-height: 200px;
}
.panel-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.app-container {
padding: var(--spacing-xs);
}
.header, .sidebar, .tools-panel, .execution-panel, .history-panel {
padding: var(--spacing-md);
}
.form-input, .btn {
font-size: var(--font-size-base);
}
}
/* Print styles */
@media print {
.app-container {
grid-template-areas:
"header header"
"main history";
grid-template-columns: 1fr 1fr;
}
.sidebar {
display: none;
}
.btn {
display: none;
}
body {
background: white;
color: black;
}
.tools-panel, .execution-panel, .history-panel {
box-shadow: none;
border: 1px solid #ccc;
}
}