116 lines
5.0 KiB
CSS
116 lines
5.0 KiB
CSS
/* Administration. Six sub-tabs: four tables, one form and the cluster. The
|
|
header, the table and the labels repeat the ones in Lists so that the
|
|
console's four tables read the same; the SSO form repeats Settings' `210px 1fr`
|
|
rows for the same reason. */
|
|
|
|
|
|
.mono { composes: mono from '../../ui/text.module.css'; }
|
|
.nowrap { white-space:nowrap; }
|
|
|
|
|
|
/* The count is `ui/count.module.css`'s: see there for why. */
|
|
.count { composes: bar below from '../../ui/count.module.css'; }
|
|
|
|
/* The first column's user / group / section name opens its record. */
|
|
/* No `word-break: break-all` of its own: it cut a name letter by letter wherever
|
|
the column was narrow. The shared rule breaks one only when it cannot fit. */
|
|
.link { composes: entityLink from '../../ui/Table.module.css'; }
|
|
|
|
.node { font-size: var(--t-4); padding: var(--s-3) var(--s-6); border:1px solid var(--line-field); border-radius: var(--r-2); background:var(--field); color:var(--ink); }
|
|
|
|
/*
|
|
Permissions: the concession map and its index on top, then one card per section
|
|
with its two tables side by side.
|
|
|
|
The rows themselves are no longer here. They were a CSS grid (`.prow`, `.phd`,
|
|
`.pchk`), which is exactly why a structural read of the DOM on 2026-09-04 found
|
|
no table with 84 cells inside it. They are `ui/Matrix` now, which is a real table with both
|
|
axes; what stays here is only the LAYOUT, which is what belongs to a screen.
|
|
*/
|
|
|
|
/*
|
|
The index runs beside the whole screen, and it is the narrow column.
|
|
|
|
`--index-col` is the dense form's index column and this is its first wiring. Below
|
|
`--bp-index` the index becomes a horizontal strip on its own (that behaviour
|
|
lives inside `ui/SectionIndex`), so here it only has to stop being a column, and
|
|
it goes FIRST so the strip lands above what it indexes and not under it.
|
|
*/
|
|
.withIndex {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) var(--index-col);
|
|
gap: var(--s-10);
|
|
align-items: start;
|
|
}
|
|
|
|
.column { min-width: 0; }
|
|
|
|
/* The map scrolls sideways inside its panel: eleven sections do not fit at 390,
|
|
and the panel must not be what grows. */
|
|
.map { padding: var(--s-7) var(--s-9); min-width: 0; margin-bottom: var(--s-11); }
|
|
|
|
.perm { margin-bottom: var(--s-8); }
|
|
.permCols { display:grid; grid-template-columns:1fr 1fr; }
|
|
.permCol { padding: var(--s-7) var(--s-9); min-width:0; }
|
|
.permCol + .permCol { border-left:1px solid var(--line); }
|
|
/* A user or group name. It wraps between words, and a single word breaks only when it
|
|
still does not fit once the column has its room: `break-all` cut every name letter
|
|
by letter at the column's edge. */
|
|
.who { color:var(--ink); font-family:var(--font-mono); font-size: var(--t-4); overflow-wrap: break-word; }
|
|
|
|
/* The matrix's EDITABLE checkbox: 18 px tall, and until now not enlarged. The
|
|
read-only one is `ui/Matrix`'s, is disabled and is no target for anything. */
|
|
/* The ReUI checkbox carries its own hit area; this only centres it under its header. */
|
|
.chkPerm { display: flex; justify-content: center; }
|
|
|
|
@media (max-width: 960px) {
|
|
.withIndex { grid-template-columns: minmax(0, 1fr); }
|
|
.withIndex > :last-child { order: -1; margin-bottom: var(--s-10); }
|
|
|
|
/* The strip pins at the top (`ui/SectionIndex`), so a jump from it lands each
|
|
section below the strip, not under it. */
|
|
.anchor { scroll-margin-top: calc(var(--stuck-top, 0px) + var(--index-strip) + var(--s-9)); }
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.permCols { grid-template-columns:1fr; }
|
|
.permCol + .permCol { border-left:0; border-top:1px solid var(--line); }
|
|
}
|
|
|
|
/* SSO and the Cluster modals: label + control rows, as in Settings. */
|
|
|
|
.ctlLine { composes: inline from '../../ui/PanelForm.module.css'; }
|
|
.suffix { composes: trailer from '../../ui/text.module.css'; }
|
|
.help { composes: help from '../../ui/Form.module.css'; }
|
|
.group { composes: group from '../../ui/Form.module.css'; }
|
|
.area { composes: area from '../../ui/PanelForm.module.css'; }
|
|
/* The width only: the trigger's box is set by `ui/Select`. */
|
|
.select { max-width: 420px; }
|
|
|
|
/* Editable table inside a form: SSO scopes and group map. */
|
|
/*
|
|
The editable table is `ui/EditableTable.module.css`'s. It was written here and in
|
|
two other modules with the same values copied by hand.
|
|
*/
|
|
.edit { composes: table from '../../ui/EditableTable.module.css'; }
|
|
|
|
.edit input, .edit select { width:100%; }
|
|
|
|
/* An editable list inside a dense-form block: the table, its `Add` and its help,
|
|
read as one thing. */
|
|
.list { display: grid; gap: var(--s-7); }
|
|
.tdel { width:84px; }
|
|
/* The same save bar as Settings and DHCP: STICKY. Without that, in a form as
|
|
long as SSO's the button stays up top as you scroll down. */
|
|
.bar { composes: bar from '../../ui/PanelForm.module.css'; }
|
|
|
|
/* Modal body: the same rows, but with a narrower label. */
|
|
.mval { font-size: var(--t-4); font-weight: 600; color:var(--ink); padding-top: var(--s-5); }
|
|
.paragraph { composes: paragraph from '../../ui/text.module.css'; }
|
|
.sub { margin: var(--s-10) 0 var(--s-5); font-size: var(--t-4); font-weight: 550; color:var(--ink); }
|
|
.output { display:flex; flex-direction:column; gap: var(--s-5); }
|
|
.link { font-size: var(--t-3); }
|
|
.link a { color:var(--acc-ink); }
|
|
|
|
|