Widen the administration interface
This commit is contained in:
+56
-30
@@ -202,50 +202,76 @@ header nav form { display: inline; }
|
||||
header nav .who { color: var(--muted); }
|
||||
header nav .who::before { content: "\1F511\00a0"; }
|
||||
|
||||
/* A listing needs far more room than the reading measure a form wants. */
|
||||
body.wide header,
|
||||
body.wide main,
|
||||
body.wide footer { max-width: 72rem; }
|
||||
|
||||
dl.stats { grid-template-columns: auto 1fr; }
|
||||
dl.stats em { font-style: normal; color: var(--muted); }
|
||||
|
||||
/* Tables scroll on their own rather than making the page scroll sideways. */
|
||||
.tablewrap { overflow-x: auto; margin: 0 -.25rem; }
|
||||
|
||||
table.admin { border-collapse: collapse; width: 100%; font-size: .8125rem; }
|
||||
table.admin th, table.admin td { padding: .4rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
|
||||
table.admin th,
|
||||
table.admin td {
|
||||
padding: .45rem .5rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
table.admin th { color: var(--muted); font-weight: 500; white-space: nowrap; }
|
||||
table.admin th a { color: inherit; text-decoration: none; }
|
||||
table.admin th a:hover { color: var(--accent); text-decoration: underline; }
|
||||
table.admin tr:last-child td { border-bottom: 0; }
|
||||
table.admin .num { text-align: right; white-space: nowrap; }
|
||||
table.admin .small { font-size: .75rem; color: var(--muted); white-space: nowrap; }
|
||||
table.admin .wrap { overflow-wrap: anywhere; min-width: 8rem; }
|
||||
table.admin .num { text-align: right; }
|
||||
table.admin .nowrap { white-space: nowrap; }
|
||||
table.admin form { margin: 0; }
|
||||
table.admin .actions-cell { text-align: right; width: 1%; }
|
||||
|
||||
/* The filename carries the link and the identifier sits under it, which saves
|
||||
a whole column of UUID. */
|
||||
table.admin .filecell a { overflow-wrap: anywhere; font-weight: 500; }
|
||||
table.admin .filecell .id {
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
color: var(--muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
button.small { padding: .2rem .5rem; font-size: .75rem; }
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
margin: -1px; padding: 0; border: 0;
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Narrow screens get one card per row rather than a horizontal scrollbar,
|
||||
which is unusable for picking a row and pressing a button in it. */
|
||||
@media (max-width: 46rem) {
|
||||
table.admin,
|
||||
table.admin tbody,
|
||||
table.admin tr,
|
||||
table.admin td { display: block; width: 100%; }
|
||||
table.admin thead { display: none; }
|
||||
table.admin tr {
|
||||
padding: .625rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
table.admin td { border: 0; padding: .1rem 0; }
|
||||
table.admin td[data-label]::before {
|
||||
content: attr(data-label) ": ";
|
||||
color: var(--muted);
|
||||
}
|
||||
table.admin .num,
|
||||
table.admin .actions-cell { text-align: left; width: auto; }
|
||||
table.admin .actions-cell { padding-top: .5rem; }
|
||||
table.admin .filecell::before { content: none; }
|
||||
}
|
||||
|
||||
.cli code, .hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }
|
||||
|
||||
/* Disclosure sections and inline errors ----------------------------------- */
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
padding: .125rem 0;
|
||||
}
|
||||
details[open] > summary { margin-bottom: .75rem; }
|
||||
details .field { margin-top: .75rem; max-width: 28rem; }
|
||||
|
||||
p.error {
|
||||
margin: 0 0 .75rem;
|
||||
padding: .5rem .75rem;
|
||||
color: var(--danger);
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 6px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.card .actions { margin: 1.25rem 0; }
|
||||
.card > .field:last-child { margin-bottom: 0; }
|
||||
|
||||
/* One-off token, tucked away so the common path stays a single button. */
|
||||
.onceoff { margin-bottom: 1rem; }
|
||||
.onceoff summary { font-weight: 400; font-size: .875rem; color: var(--muted); }
|
||||
|
||||
Reference in New Issue
Block a user