71e66c651c
This adds a completely separate frontend based on React because I found that code gen works better with React once the application gets bigger. In particular it was getting very hard to move past add connectors and actions. The idea is to replace the standard UI with this once it has been tested. But for now it is available at /app in addition to the original at / Signed-off-by: Richard Palethorpe <io@richiejp.com>
222 lines
3.3 KiB
CSS
222 lines
3.3 KiB
CSS
/* Agent Form Section Styles */
|
|
|
|
.form-section {
|
|
padding: 1.5rem;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
color: #333;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-description {
|
|
color: #666;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Form Controls */
|
|
.form-controls {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 2rem;
|
|
padding: 1rem;
|
|
background-color: #f8f9fa;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #4a6cf7;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background-color: #3a5ce5;
|
|
}
|
|
|
|
.submit-btn:disabled {
|
|
background-color: #a0a0a0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Error Message */
|
|
.error-message {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #721c24;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Navigation Sidebar */
|
|
.wizard-sidebar {
|
|
width: 250px;
|
|
background-color: #f8f9fa;
|
|
border-right: 1px solid #eee;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.wizard-nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.wizard-nav-item {
|
|
padding: 0.75rem 1.5rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.wizard-nav-item:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.wizard-nav-item.active {
|
|
background-color: #e9ecef;
|
|
border-left: 4px solid #4a6cf7;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wizard-nav-item i {
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Form Layout */
|
|
.agent-form-container {
|
|
display: flex;
|
|
min-height: 80vh;
|
|
border: 1px solid #eee;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-content-area {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Input Styles */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Add and Remove Buttons */
|
|
.add-btn,
|
|
.remove-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.add-btn {
|
|
color: #4a6cf7;
|
|
font-weight: 600;
|
|
padding: 0.5rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.add-btn:hover {
|
|
color: #3a5ce5;
|
|
}
|
|
|
|
.remove-btn {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.remove-btn:hover {
|
|
color: #c82333;
|
|
}
|
|
|
|
/* Item Containers */
|
|
.action-item,
|
|
.mcp-server-item {
|
|
border: 1px solid #eee;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.action-header,
|
|
.mcp-server-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.action-header h4,
|
|
.mcp-server-header h4 {
|
|
margin: 0;
|
|
}
|