` inside `` (`wrapcode`), which the Markdown rule above would
otherwise box and tint like an inline span. */
.md .hl code, .hl code, pre.plain code {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: inherit;
}
/* ── the administrator's queue ──────────────────────────────────────────────── */
/* The wrapper is what guarantees the PAGE never scrolls sideways, whatever a submitter typed
into the title field. On a tall queue it also becomes the scrollport the sticky header sticks
to — a header that stuck to the viewport instead would need the wrapper gone, and then a long
title would push the approve button off-screen. */
div.scroll {
overflow: auto;
max-height: 78vh;
border: 1px solid var(--rule);
background: var(--surface);
}
table.queue {
min-width: 58rem;
font-size: var(--t-caption);
line-height: 1.45;
}
table.queue th, table.queue td {
padding: var(--s2) var(--s3);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--rule);
}
table.queue th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface);
border-bottom: 1px solid var(--ink);
color: var(--ink-soft);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
table.queue tr:last-child td { border-bottom: 0; }
table.queue td.id { font-family: var(--mono); white-space: nowrap; color: var(--ink-soft); }
/* `break-word`, not `anywhere`: `anywhere` lets the column shrink to a single character, and a
submitter's title then renders as "Osman metastrat egy". This breaks a word only when the
word alone does not fit. */
table.queue td.title { font-weight: 600; overflow-wrap: break-word; }
table.queue td.email { color: var(--ink-soft); overflow-wrap: break-word; }
table.queue td.stage { color: var(--ink-soft); font-family: var(--mono); }
table.queue td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.queue td.when { color: var(--ink-soft); }
table.queue td.link { white-space: nowrap; }
/* The detail column needs a floor AND a ceiling: `table-layout: auto` hands the widest column
whatever is left over, and 160 characters wrapped into 158 px is eight lines — but left
ungoverned the same column is what pushes the actions off the right edge at 1280. The whole
text stays on the cell's `title`. */
table.queue td.detail {
width: 13rem;
min-width: 11rem;
color: var(--ink-soft);
}
/* Stacked rather than in a row: two buttons side by side are what makes the actions column
wide enough to overflow the table at 1280, and a column of them is easier to hit anyway. */
/* In the queue the chip may wrap: `en attente d’une source` on one line is a 230 px column, and
the ten columns then no longer fit 1280 px. It is still a padded box, so it still reads as a
chip on two lines. */
table.queue .chip { white-space: normal; }
table.queue td.actions form { display: block; }
table.queue td.actions button {
display: block;
width: 100%;
text-align: left;
white-space: normal;
}
table.queue form { display: inline; margin: 0; }
table.queue button {
display: inline-block;
min-height: 0;
margin: 0 var(--s1) var(--s1) 0;
padding: var(--s1) var(--s2);
border-color: var(--ink-line);
background: transparent;
color: var(--ink);
font-size: var(--t-caption);
font-weight: 600;
white-space: nowrap;
}
table.queue button:hover { border-color: var(--ink); background: var(--ink-wash); color: var(--ink); }
table.queue button.act-approve {
border-color: var(--teal);
background: var(--teal);
color: var(--surface);
}
table.queue button.act-approve:hover { background: var(--ink); border-color: var(--ink); }
table.queue button.act-cancel { color: var(--red); border-color: var(--red); }
table.queue button.act-cancel:hover { background: var(--red-wash); border-color: var(--red); color: var(--red); }
:root[data-theme="dark"] table.queue button { color: var(--ink); }
:root[data-theme="dark"] table.queue button.act-approve { color: #10181E; }
:root[data-theme="dark"] table.queue button.act-cancel { color: var(--red); }
@media (prefers-color-scheme: dark) {
table.queue button { color: var(--ink); }
table.queue button.act-approve { color: #10181E; }
table.queue button.act-cancel { color: var(--red); }
}
.table-hint {
margin: var(--s2) 0 0;
color: var(--ink-soft);
font-size: var(--t-caption);
letter-spacing: .02em;
}
@media (min-width: 80rem) { .table-hint { display: none; } }
.queue-empty {
border: 1px dashed var(--rule);
background: var(--surface);
padding: var(--s8);
text-align: center;
color: var(--ink-soft);
}
/* ── the small centred pages: sign-in, not-found, unavailable ───────────────── */
/* The sign-in and refusal pages are one column all the way up: the header rule, the field and
the footer line share a single left edge, so the page reads as a card rather than as a wide
frame with something small dropped into the middle of it. */
body.is-slim .masthead-inner, body.is-slim .pagefoot p { max-width: 30rem; }
main.slim { max-width: 30rem; }
main.slim h1 { font-size: 1.5rem; }
/* ── reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.step.is-current .step-mark {
animation: none;
box-shadow: 0 0 0 3px var(--orange-wash);
}
}