ec51bf3fec
The cap was 44em, set before the swarm UI went wide. The create-agent panel reads the same width.
133 lines
2.9 KiB
CSS
133 lines
2.9 KiB
CSS
/* <CreateAgentForm> — the create-agent dialog, a stepper rendered inside a
|
|
`Dialog` from `AgentsPage`. Input/button chrome comes from the shared `ui/`
|
|
form kit; this file owns the layout: a header, the step tabs and a footer
|
|
that stay put while only the step's own fields scroll.
|
|
|
|
`.create-agent-panel` is a column no taller than the dialog (85vh, the
|
|
dialog's own cap), and its body hands all that height to the step. */
|
|
.create-agent-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: var(--ui-dialog-width, min(90vw, 64em));
|
|
max-height: 85vh;
|
|
}
|
|
.create-agent-panel > .ui-panel-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
.create-agent-wizard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
gap: 0.75em;
|
|
}
|
|
.create-agent-steps {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35em;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.create-agent-step-tab {
|
|
padding: 0.3em 0.7em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--bg);
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
}
|
|
.create-agent-step-tab:disabled {
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
.create-agent-step-current {
|
|
border-color: var(--purple);
|
|
color: var(--fg);
|
|
}
|
|
/* The one part that scrolls. A floor keeps the dialog from changing height
|
|
as the steps change. */
|
|
.create-agent-step {
|
|
flex: 1 1 auto;
|
|
min-height: 18em;
|
|
overflow-y: auto;
|
|
}
|
|
/* On a short window the floor gives way, so the footer stays on screen. */
|
|
@media (max-height: 45em) {
|
|
.create-agent-step {
|
|
min-height: 8em;
|
|
}
|
|
}
|
|
.create-agent-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75em;
|
|
}
|
|
.create-agent-intro {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
.create-agent-heading {
|
|
margin: 0.5em 0 0;
|
|
font-size: 1em;
|
|
}
|
|
.create-agent-footer {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding-top: 0.75em;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
/* Back on the left, then why next waits, then next (or create) on the right. */
|
|
.create-agent-footer > :last-child {
|
|
margin-left: auto;
|
|
}
|
|
.create-agent-hint {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
margin-left: 0.25em;
|
|
color: var(--muted);
|
|
font-size: 0.9em;
|
|
}
|
|
.create-agent-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35em;
|
|
margin: 0;
|
|
}
|
|
.create-agent-summary-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25em 1em;
|
|
}
|
|
.create-agent-summary-row dt {
|
|
flex: 0 0 9em;
|
|
color: var(--muted);
|
|
}
|
|
.create-agent-summary-row dd {
|
|
flex: 1 1 12em;
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.create-agent-result-ok {
|
|
color: var(--green);
|
|
}
|
|
/* The controller's refusal of the AGENTS.md text, under its box. */
|
|
.create-agent-field-error {
|
|
margin: 0;
|
|
color: var(--red);
|
|
}
|
|
/* The picked archetype's description, under its select. */
|
|
.create-agent-archetype-description {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|