mix
c6a75ce775
test / test (push) Has been cancelled
Domains and Inbound keep the add field in the list card. The DMARC candidate hub drills into a domain roll-up and a parsed aggregate report, including a third-party fail. The running panel is unchanged. Co-Authored-By: Cursor <cursoragent@cursor.com>
129 lines
4.1 KiB
CSS
129 lines
4.1 KiB
CSS
/* Panel UI system primitives.
|
|
Source of truth: system.html. Screens are separate HTML files composed from
|
|
these classes. Do not “fix” empty columns, Host/Type height, or split
|
|
actions by one-off rules — compose with these instead. */
|
|
|
|
.stack {
|
|
display: flex; flex-direction: column; gap: 1rem;
|
|
width: 100%; min-width: 0;
|
|
}
|
|
.stack > .card,
|
|
.stack > .pair,
|
|
.stack > .measure,
|
|
.stack > .fill { margin-top: 0; }
|
|
.stack > .card + .card { margin-top: 0; }
|
|
|
|
.measure { width: 100%; max-width: var(--form-max); min-width: 0; }
|
|
|
|
.fill { width: 100%; max-width: var(--ops-max); min-width: 0; }
|
|
.fill > .card { margin-top: 0; }
|
|
.fill .card:has(table) { overflow-x: auto; }
|
|
.card > .measure { margin-bottom: 1rem; }
|
|
|
|
/* Two peer jobs. One child → reading measure (domain-admin Settings).
|
|
Never a full-width lonely card on an ops page. */
|
|
.pair {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 1rem;
|
|
width: 100%; max-width: var(--ops-max); min-width: 0;
|
|
}
|
|
.pair > * { min-width: 0; }
|
|
.card > .stack { min-width: 0; }
|
|
.pair > .card { margin-top: 0; }
|
|
.pair > .card + .card { margin-top: 0; }
|
|
.pair:has(> :only-child) {
|
|
display: block;
|
|
max-width: var(--form-max);
|
|
}
|
|
|
|
.actions-row {
|
|
display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
|
|
margin-top: 1.1rem;
|
|
}
|
|
.actions-row > button,
|
|
.actions-row > a.btn,
|
|
.actions-row > a.danger { margin-top: 0; }
|
|
|
|
/* Two labelled controls on one row. Labels share row 1, values share row 2
|
|
so they are the same height by construction — not by matching padding. */
|
|
.field-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-rows: auto minmax(2.5rem, auto);
|
|
column-gap: 1rem;
|
|
align-items: stretch;
|
|
margin-top: 0.45rem;
|
|
}
|
|
.field-row.equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
.field-row > .field { display: contents; }
|
|
.field-row > .field:first-child > * { grid-column: 1; }
|
|
.field-row > .field:last-child > * { grid-column: 2; }
|
|
.field-row > .field > label { grid-row: 1; margin-top: 0.45rem; }
|
|
.field-row > .field > :not(label) {
|
|
grid-row: 2; align-self: stretch; min-width: 0;
|
|
margin-top: 0.3rem; box-sizing: border-box;
|
|
}
|
|
.field-row > .field > .code,
|
|
.field-row > .field > .code-row {
|
|
height: 100%;
|
|
}
|
|
.field-row > .field > .code {
|
|
display: flex; align-items: center;
|
|
padding-top: 0.45rem; padding-bottom: 0.45rem;
|
|
}
|
|
.field-row > .field:last-child > .code {
|
|
width: fit-content; min-width: 2.75rem;
|
|
justify-content: center; text-align: center;
|
|
}
|
|
.field-row .code-row {
|
|
display: flex; align-items: stretch; gap: 0.5rem; height: 100%;
|
|
}
|
|
.field-row .code-row .code {
|
|
flex: 1; min-width: 0; margin-top: 0; height: auto;
|
|
display: flex; align-items: center;
|
|
padding-top: 0.45rem; padding-bottom: 0.45rem;
|
|
}
|
|
.field-row .code-row .copy { margin-top: 0; align-self: stretch; }
|
|
|
|
.card-head {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.card-head h2 { margin: 0; }
|
|
|
|
@media (max-width: 52rem) {
|
|
.pair { grid-template-columns: 1fr; }
|
|
/* field-row stays two columns: Type is a token, not a second form. */
|
|
}
|
|
|
|
/* Specimens on the system page */
|
|
.sys-wrap { max-width: 70rem; }
|
|
.sys-wrap > header p,
|
|
.sys-wrap section > p,
|
|
.sys-wrap li { max-width: 68ch; }
|
|
.sys-toc {
|
|
display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
|
|
margin: 1rem 0 0; padding: 0; list-style: none;
|
|
}
|
|
.sys-toc a { font-size: 0.92rem; }
|
|
.specimen {
|
|
margin: 1rem 0 0; padding: 0.9rem 1rem 1.1rem;
|
|
border: 1px dashed var(--border); border-radius: 6px; background: var(--code-bg);
|
|
}
|
|
.specimen > figcaption {
|
|
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
|
|
text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem;
|
|
}
|
|
.specimen.bad {
|
|
border-color: var(--danger-border); background: var(--danger-bg);
|
|
}
|
|
.specimen.bad > figcaption { color: var(--danger-fg); }
|
|
.recipes {
|
|
width: 100%; margin-top: 0.8rem; font-size: 0.92rem;
|
|
}
|
|
.recipes th, .recipes td { white-space: normal; vertical-align: top; }
|
|
.recipes code { font-size: 0.82rem; }
|
|
.forbid { margin: 0.4rem 0 0; padding-left: 1.1rem; }
|
|
.forbid li { margin: 0.35rem 0; }
|