mirror of
https://github.com/razzant/ouroboros.git
synced 2026-10-03 04:07:04 +00:00
9d37246148
`display: inline-block` on `.model-role-details > summary` (since f6711d336)
dropped the native ::marker and nothing replaced it, so the collapsed
override read as one more help sentence on Settings › Models, Settings ›
Agents and in the first-run wizard; opened, its panel was squeezed beside
the status text.
CSS only, web/model_roles.css: hide the marker explicitly and draw the
house ▸/▾ pair on summary::before (the settings.css recipe, redrawn because
the wizard does not load settings.css); the disclosure takes its own line
under the status so the opened panel spans the row; the label takes
control ink while the value span stays meta; padding-inline: 0 cancels the
14px .wizard-collapse summary leak on the nested wizard summaries.
Static pin in web/tests/model_roles.test.js (fails on the base sheet),
computed ::before assertions in the existing ui_browser click-through,
and one DESIGN.md §5 rule. Rows with a status line grow by one 12px line;
the · separator turns to control ink with the label. No JS, markup or
version change.
Fixes #876.
Co-authored-by: Ouroboros <311266734+ouroboros-agent@users.noreply.github.com>
84 lines
3.3 KiB
CSS
84 lines
3.3 KiB
CSS
/* Shared role rows: one source/model/account line on desktop, natural wrap on
|
|
narrow screens. Both wizard and Settings load this same component sheet. */
|
|
.model-role-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.model-role-group {
|
|
min-width: 0;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.model-role-head,
|
|
.model-role-controls,
|
|
.model-role-order,
|
|
.model-role-context {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.model-role-head h4 {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
.model-role-head { margin-bottom: var(--space-1); }
|
|
.model-role-notes { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
|
|
.model-role-notes > .model-role-details { flex-basis: 100%; }
|
|
.model-role-copy,
|
|
.model-role-meta,
|
|
.model-role-details {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
.model-role-copy { margin: var(--space-1) 0 var(--space-2); }
|
|
.model-role-meta:empty { display: none; }
|
|
.model-role-meta { margin-top: var(--space-1); }
|
|
.model-role-row + .model-role-row { margin-top: var(--space-2); }
|
|
.model-role-controls > input,
|
|
.model-role-controls > .ui-model-chooser { flex: 2 1 220px; min-width: 0; }
|
|
.model-role-controls > select { flex: 1 1 170px; min-width: 0; }
|
|
.model-role-controls > [data-model-role-account] { flex-basis: 220px; }
|
|
.model-role-order { flex: 0 0 auto; }
|
|
.model-role-order .btn { padding-inline: var(--space-2); }
|
|
.model-role-details { margin-top: var(--space-1); }
|
|
/* The context/processing override is a disclosure, not a note. `display`
|
|
other than list-item drops the native ::marker, so the house ▸/▾ pair is
|
|
drawn here (settings.css .settings-subsection has it, but the wizard does
|
|
not load settings.css); the label takes control ink while the value span
|
|
stays meta. padding-inline cancels the 14px that .wizard-collapse summary
|
|
leaks onto the nested Available subagents / Reviewers summaries. */
|
|
.model-role-details > summary {
|
|
display: inline-block;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding-block: var(--space-1);
|
|
padding-inline: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
.model-role-details > summary::-webkit-details-marker { display: none; }
|
|
.model-role-details > summary::before { content: "▸ "; }
|
|
.model-role-details[open] > summary::before { content: "▾ "; }
|
|
.model-role-details > summary [data-processing-summary] { color: var(--text-meta); }
|
|
.model-role-details > summary:focus-visible,
|
|
.model-role-editor button:focus-visible {
|
|
outline: 2px solid var(--focus-accent-border);
|
|
outline-offset: 2px;
|
|
}
|
|
.model-role-context { flex-wrap: wrap; padding-top: var(--space-1); }
|
|
.model-role-context label { display: flex; align-items: center; gap: var(--space-2); }
|
|
.model-role-context input { width: 150px; }
|
|
.model-role-controls [hidden] { display: none; }
|
|
@media (max-width: 720px) {
|
|
.model-role-controls { flex-wrap: wrap; }
|
|
.model-role-controls > input,
|
|
.model-role-controls > .ui-model-chooser { flex-basis: 100%; order: 1; }
|
|
.model-role-controls > select { flex-basis: 150px; }
|
|
.model-role-order { order: 2; margin-left: auto; }
|
|
}
|