; it must not pick up
the frame above. */
body.admin table.jqplot-table-legend,
body.admin table.jqplot-table-legend td,
body.admin table.jqplot-table-legend th {
width: auto;
border: none;
background: transparent;
box-shadow: none;
text-transform: none;
letter-spacing: 0;
padding: 0 2px;
font-size: 11px;
}
/* ---- Toggling section headers ------------------------------------------ */
body.admin .toggling_on,
body.admin .toggling_off {
cursor: pointer;
user-select: none;
}
body.admin h2.toggling_on:hover,
body.admin h2.toggling_off:hover,
body.admin h3.toggling_on:hover,
body.admin h3.toggling_off:hover { color: var(--px-green); }
/* The ▾ / ▸ markers come from aws_style.css :before rules — left untouched,
they are the only affordance telling a section apart from a closed one. */
/* ---- Code, pre, Prism --------------------------------------------------- */
body.admin pre,
body.admin code {
font-family: var(--px-font-mono);
}
body.admin pre {
font-size: 12px;
line-height: 1.5;
padding: 8px 10px;
background: var(--px-paper-2);
border: 1px solid var(--px-grid);
border-left: 3px solid var(--px-green);
overflow-x: auto;
min-height: 1.5em;
/* white-space stays `pre`: aws_style.css gives every width:1px, so a
wrapping (the log message column) collapses to one glyph wide. */
}
body.admin td > code,
body.admin p > code {
background: var(--px-paper-2);
border: 1px solid var(--px-grid);
padding: 0 4px;
font-size: 11.5px;
}
/* Prism-highlighted source in the file/diff popup: keep the token palette
(it is tuned for a light ground and stays legible) but drop the glow and
the rounded chrome, and use the theme's monospace face. */
body.admin code[class*="language-"],
body.admin pre[class*="language-"] {
font-family: var(--px-font-mono);
font-size: 12px;
text-shadow: none;
background: none;
white-space: pre;
}
body.admin pre[class*="language-"] {
background: var(--px-paper-hi);
border: 1px solid var(--px-ink);
border-left: 1px solid var(--px-ink);
border-radius: 0;
padding: 12px;
margin: 8px 0;
box-shadow: var(--px-shadow-sm);
}
body.admin pre[class*="language-"].line-numbers { padding-left: 3.8em; }
body.admin .line-numbers .line-numbers-rows { border-right: 1px solid var(--px-grid); }
body.admin .line-numbers-rows > span::before { color: var(--px-ink-3); }
body.admin pre.diff-highlight > code .token.deleted:not(.prefix),
body.admin pre > code.diff-highlight .token.deleted:not(.prefix) {
background-color: var(--px-red-soft);
}
body.admin pre.diff-highlight > code .token.inserted:not(.prefix),
body.admin pre > code.diff-highlight .token.inserted:not(.prefix) {
background-color: var(--px-green-soft);
}
/* ---- Notifications & communications ------------------------------------ */
body.admin #notifications { margin: 0; padding: 12px 0 4px; }
body.admin #notifications .notification,
body.admin .notifications .notification {
position: relative;
text-align: left;
margin-bottom: 8px;
font-size: 12.5px;
line-height: 1.5;
border-radius: 0;
background-color: var(--px-paper);
border: 1px solid var(--px-ink);
border-left: 4px solid var(--px-amber);
box-shadow: var(--px-shadow-sm);
}
body.admin #notifications .notification_msg,
body.admin .notifications .notification_msg { padding: 8px 10px; }
/* The close button, the timestamp and the Reply / Ignore / Claim controls are
all floats with nothing clearing them, so without a block formatting
context they spill through the bottom border of the card. */
body.admin #notifications .notification,
body.admin .notifications .notification,
body.admin #notifications .notification_msg,
body.admin .notifications .notification_msg { display: flow-root; }
body.admin #notifications .notification_close,
body.admin .notifications .notification_close {
float: right;
cursor: pointer;
width: 1.8em;
padding: 1px 0;
margin: 0;
text-align: center;
font-weight: 700;
color: var(--px-ink);
background-color: var(--px-paper-2);
border: 0;
border-left: 1px solid var(--px-ink);
border-bottom: 1px solid var(--px-ink);
border-radius: 0;
}
body.admin #notifications .notification_close:hover,
body.admin .notifications .notification_close:hover {
background-color: var(--px-red-soft);
color: var(--px-red);
}
body.admin .notification_subject {
font-weight: 700;
color: var(--px-ink);
}
body.admin .notifications .notification_timestamp {
float: right;
padding-right: 0.5em;
font-size: 11px;
color: var(--aws-ink-meta);
}
body.admin .notification_text { padding-top: 2px; }
body.admin .notifications .notification_admin_owner {
font-style: italic;
font-size: 11px;
color: var(--aws-ink-meta);
}
/* Semantic left bars. */
body.admin .notification_type_announcement { border-left-color: var(--px-blue); }
body.admin .notification_type_message,
body.admin .notification_type_question,
body.admin .notification_type_new_question { border-left-color: var(--px-green); }
body.admin .notifications .communication {
background-color: var(--px-paper);
border: 1px solid var(--px-ink);
border-left: 4px solid var(--px-blue);
}
body.admin .notifications .ignored {
background-color: var(--px-paper-2);
border: 1px solid var(--px-ink-3);
border-left: 4px solid var(--px-ink-3);
color: var(--aws-ink-meta);
box-shadow: none;
}
body.admin .notifications .answered {
background-color: var(--px-green-soft);
border: 1px solid var(--px-ink);
border-left: 4px solid var(--px-green);
}
body.admin .notifications .claim_reply,
body.admin .notifications .ignore_reply,
body.admin .notifications .reply_question_toggle {
float: right;
padding-right: 0.75em;
font-size: 12px;
}
body.admin .notifications .announcement_remove {
float: right;
width: auto;
padding-right: 0.75em;
font-size: 12px;
font-weight: 400;
}
body.admin .notifications .announcement_remove a { color: var(--px-red); border-bottom: none; }
body.admin .notifications .announcement_remove a:hover { background: var(--px-red-soft); }
body.admin .reply_question_quick_answer {
margin-left: 15px;
font-style: italic;
text-decoration: underline;
}
body.admin .preserve_line_breaks { white-space: pre-line; }
/* The capacity estimator reuses .notification as a result card, but outside
any .notifications wrapper, so it needs the box spelled out here. */
body.admin #capacity_result {
display: block;
margin: 10px 0;
padding: 10px 12px;
font-size: 12.5px;
background: var(--px-paper);
border: 1px solid var(--px-ink);
border-left: 4px solid var(--px-blue);
box-shadow: var(--px-shadow-sm);
}
body.admin #capacity_result strong { display: block; margin-bottom: 4px; }
body.admin #capacity_result ul { list-style: square; margin: 6px 0 0 18px; }
body.admin #capacity_result li { margin: 2px 0; }
/* ---- Flash / error boxes ----------------------------------------------- */
body.admin .login_error,
body.admin .aws-flash {
display: block;
padding: 8px 12px;
margin: 10px 0;
font-family: var(--px-font-mono);
font-size: 12.5px;
background: var(--px-amber-soft);
border: 1px solid var(--px-ink);
border-left: 4px solid var(--px-amber);
color: var(--px-ink);
}
body.admin .login_error,
body.admin .aws-flash-error,
body.admin #login-content .alert {
color: var(--px-red);
background: var(--px-red-soft);
border-left-color: var(--px-red);
font-weight: 700;
}
/* ---- Login page -------------------------------------------------------- */
body.admin.login-page {
display: flex;
/* A column now: the way-out nav sits above the centred panel rather than
beside it. The pair is still centred as a group. */
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 0;
box-sizing: border-box; /* with min-height: 100vh, or the padding scrolls */
padding: 24px 16px 32px;
}
/* The links back to the public site, and the appearance control. One row,
links to the left and the theme to the right; on a narrow screen the
theme wraps onto its own line and stays right. Held to the panel's width
so the two read as one card. */
body.admin.login-page .login-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
width: 400px;
max-width: 100%;
margin: 0 0 14px;
font-size: 11px;
letter-spacing: 0.06em;
}
body.admin.login-page .login-nav a {
color: var(--px-ink-2);
text-decoration: none;
border-bottom: 1px solid var(--px-grid);
white-space: nowrap;
}
body.admin.login-page .login-nav a:hover,
body.admin.login-page .login-nav a:focus-visible {
color: var(--px-green-2);
border-bottom-color: var(--px-green-2);
}
/* The sidebar layout of .aws-theme-slot does not apply here: no bottom
margin, and the buttons sit next to their label instead of being pushed
to the far end of a full-width column. The auto margin moves to the slot
itself, which is what holds it against the right edge of the nav row. */
body.admin.login-page .login-theme {
margin: 0 0 0 auto;
font-size: 10px;
color: var(--aws-ink-meta);
}
body.admin.login-page .login-theme .px-theme { margin-left: 0; }
body.admin.login-page #login-content {
width: 400px;
padding: 32px 34px 26px;
background: var(--px-paper);
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow);
}
body.admin.login-page .login-brand {
font-size: 12px;
letter-spacing: 0.08em;
color: var(--aws-ink-meta);
margin-bottom: 10px;
}
body.admin.login-page #login-content h1 {
font-family: var(--px-font-display);
font-size: 30px;
line-height: 1.1;
font-weight: 700;
color: var(--px-ink);
border: none;
padding: 0;
margin: 0;
-webkit-font-smoothing: none;
text-rendering: optimizeSpeed;
}
body.admin.login-page .login-tagline {
font-size: 12px;
color: var(--aws-ink-meta);
padding: 6px 0 0;
margin-bottom: 18px;
}
body.admin.login-page #login-content h4 {
font-family: var(--px-font-mono);
font-size: 13px;
font-weight: 700;
padding: 8px 12px;
}
body.admin.login-page #login-content .section {
padding: 0 0 12px;
}
body.admin.login-page #login-content .section:last-child {
float: none;
clear: both;
padding-top: 8px;
border-top: 2px dotted var(--px-grid);
margin-top: 6px;
}
body.admin.login-page #login-content form label {
display: flex;
align-items: center;
gap: 10px;
}
body.admin.login-page #login-content form label span {
flex: 0 0 92px;
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aws-ink-meta);
}
body.admin.login-page #login-content form label input {
flex: 1 1 auto;
width: auto;
min-width: 0;
padding: 8px 10px;
font-size: 13px;
}
body.admin.login-page .login-already { font-size: 13px; }
/* ---- Subpage dialog (file viewer / diff) -------------------------------- */
body.admin #subpage_popup {
background: var(--px-paper);
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: var(--px-shadow);
padding: 20px 22px;
color: var(--px-ink);
}
body.admin #subpage_popup::backdrop { background: var(--px-scrim); }
body.admin #subpage_close {
right: 0.75em;
top: 0.75em;
margin: 0;
padding: 2px 9px;
font-weight: 700;
line-height: 1.3;
}
body.admin #subpage_content h1 {
font-family: var(--px-font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--px-ink);
padding-bottom: 8px;
margin: 0 0 12px;
}
body.admin #subpage_border { border: none; }
/* ---- jqplot (resource charts) ------------------------------------------ */
/* The plots draw onto a canvas, so only the chrome is themeable. Give each
one a light card so the series stay legible over the dotted paper. */
body.admin .jqplot-target {
font-family: var(--px-font-mono);
font-size: 11px;
color: var(--px-ink);
background: var(--px-paper-hi);
border: 1px solid var(--px-ink);
box-sizing: content-box;
}
body.admin .jqplot-axis,
body.admin .jqplot-xaxis-tick,
body.admin .jqplot-yaxis-tick {
font-family: var(--px-font-mono);
font-size: 10px;
color: var(--px-ink-2);
}
body.admin .jqplot-table-legend {
background: var(--px-paper);
border: 1px solid var(--px-ink);
border-radius: 0;
}
body.admin .jqplot-table-legend-label {
font-family: var(--px-font-mono);
font-size: 10px;
color: var(--px-ink);
padding: 0 4px;
}
/* ---- Misc -------------------------------------------------------------- */
body.admin ul.normal_list { list-style: square; list-style-position: outside; padding-left: 1.4em; }
body.admin #core ul { list-style: square; padding-left: 1.4em; margin: 4px 0; }
body.admin #core ul.menu, body.admin #sidebar ul { list-style: none; padding-left: 0; }
body.admin #core li { margin: 2px 0; }
body.admin span.info {
color: var(--px-on-accent);
font-size: 10px;
background-color: var(--px-ink-2);
border-radius: 0;
width: 14px;
height: 14px;
line-height: 14px;
font-weight: 700;
margin: 0 6px 0 0;
cursor: help;
vertical-align: middle;
}
body.admin fieldset {
border: 1px solid var(--px-ink);
border-radius: 0;
background: var(--px-paper);
padding: 12px 14px;
margin: 0 0 14px;
}
body.admin legend {
font-family: var(--px-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 8px;
border: 1px solid var(--px-ink);
background: var(--px-paper-3);
}
body.admin .inline { display: inline; }
body.admin .displayed { display: block; }
body.admin .markdown_input { width: 100%; }
body.admin .markdown_preview {
border: 1px dotted var(--px-grid);
padding: 6px 8px;
margin-top: 6px;
}
body.admin details > summary {
cursor: pointer;
font-family: var(--px-font-mono);
font-size: 12.5px;
}
body.admin #diffchooser {
border: 1px solid var(--px-ink);
background: var(--px-paper);
padding: 8px 10px;
margin-bottom: 10px;
box-shadow: var(--px-shadow-sm);
}
body.admin #diffchooser > summary { font-weight: 700; }
body.admin #diffchooser input[type="number"] { width: 6em; }
body.admin th.diff-only,
body.admin td.diff-only { display: none; }
body.admin table.diff-open th.diff-only,
body.admin table.diff-open td.diff-only { display: table-cell; }
body.admin .score_details table { font-size: 11.5px; }
body.admin .language-item label { display: block; white-space: nowrap; cursor: pointer; }
body.admin .language-item input[type="checkbox"] { margin-right: 6px; }
body.admin table td.wrapping-options { display: flex; flex-wrap: wrap; width: 100%; }
body.admin table td.wrapping-options label { margin-right: 15px; }
body.admin img[src$="loading.gif"] { image-rendering: pixelated; }
/* ---- Forced colours (Windows High Contrast) ---------------------------- */
/* Focus here is `outline: none` + box-shadow (see .jump_input in base.html and
the token sheet); box-shadows are not painted in forced-colors mode. */
@media (forced-colors: active) {
body.admin a:focus-visible,
body.admin button:focus-visible,
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus,
body.admin .jump_input:focus,
body.admin [tabindex]:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
/* ---- Contest admins and scheduling ------------------------------------- */
/* Additive only, and every colour comes from the token sheet: a literal here
would not follow the dark palette, and these rows are read in both. */
/* A value the current admin may see but not change: contest times on the
General page, the task type on a task page. Deliberately not a disabled
: the cell is the summary, so it opens on click, on Enter and on
Space with no script, and aws_utils.js only adds the manners.
It is absolutely positioned against the cell. #core sets overflow-x:auto
and is therefore a clip in both axes; the right-hand columns open
leftwards so nothing is cut off sideways, and downwards there is always
the rest of the page (the intake, pending and agenda sections) below the
calendar. */
body.admin .schedule_cal_details { display: block; }
body.admin .schedule_cal_summary {
display: block; /* not list-item: the marker would eat the cell */
list-style: none;
cursor: pointer;
}
body.admin .schedule_cal_summary::-webkit-details-marker { display: none; }
/* A caret, so a cell looks like something that opens. Decoration: the
accessible name is the summary's aria-label. It inherits the day
number's colour, which is a measured pair. */
body.admin .schedule_cal_summary .schedule_cal_daynum::after {
content: " \25B8";
}
body.admin .schedule_cal_details[open] .schedule_cal_summary
.schedule_cal_daynum::after {
content: " \25BE";
}
body.admin .schedule_cal_summary:hover .schedule_cal_daynum {
color: var(--px-ink);
}
body.admin .schedule_cal_summary:focus-visible {
outline: none;
box-shadow: var(--px-focus);
}
/* Every cell is positioned, so the open one has to be lifted or the panel
slides under the cells that come after it. */
body.admin .schedule_cal_details[open] {
position: relative;
z-index: 5;
}
body.admin .schedule_cal_panel {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
width: 230px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
margin-top: 2px;
padding: 8px 10px 9px;
text-align: left;
cursor: auto;
background: var(--px-paper);
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow);
font-family: var(--px-font-mono);
font-size: 11px;
line-height: 1.45;
color: var(--px-ink);
white-space: normal;
}
body.admin .schedule_cal_panel_left {
left: auto;
right: 0;
}
body.admin .schedule_cal_panel_day {
margin: 0 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--px-grid);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--px-ink-2);
}
body.admin .schedule_cal_panel_list {
list-style: none;
margin: 0 0 6px;
padding: 0;
}
body.admin .schedule_cal_panel_item {
display: block;
margin: 0 0 3px;
padding: 2px 4px;
border: 1px solid var(--px-grid);
overflow-wrap: anywhere;
}
body.admin .schedule_cal_panel_time {
display: block;
font-variant-numeric: tabular-nums;
}
body.admin .schedule_cal_panel_what { display: block; }
/* The link at the request keeps the row's own ink rather than the admin
link green: green on the amber tint of a pending row is not one of the
pairs check_contrast.py measures, and the underline is the affordance
here anyway. */
body.admin .schedule_cal_panel_item a {
color: inherit;
text-decoration: underline;
}
body.admin .schedule_cal_panel_status,
body.admin .schedule_cal_panel_who {
display: block;
font-size: 10px;
}
body.admin .schedule_cal_panel_taken {
background: var(--px-green-soft);
color: var(--px-ink);
}
/* Only this page names a pending booking: it is PERMISSION_ALL and its
calendar is built with include_private=True. The public one is not. */
body.admin .schedule_cal_panel_requested {
background: var(--px-amber-soft);
color: var(--px-amber-text);
}
body.admin .schedule_cal_panel_requested .schedule_cal_panel_status {
font-style: italic;
}
body.admin .schedule_cal_panel_free {
margin: 0;
color: var(--px-green);
}
body.admin .schedule_cal_panel_none,
body.admin .schedule_cal_panel_empty {
margin: 0;
color: var(--aws-ink-meta);
}
@media (forced-colors: active) {
/* Forced colours repaint every background as Canvas and would empty the
bar. The words beside it still carry the meaning, but an always-empty
bar is worse than none, so paint these in system colours. */
body.admin .schedule_cal_summary:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
body.admin .schedule_cal_load_track { border-color: CanvasText; }
body.admin .schedule_cal_load_approved {
forced-color-adjust: none;
background: Highlight;
}
body.admin .schedule_cal_load_pending {
forced-color-adjust: none;
background: repeating-linear-gradient(
45deg, Highlight 0, Highlight 2px, Canvas 2px, Canvas 5px);
}
}
/* The create-contest form: label above field, wrapped, so the six inputs
stay readable next to the booking they belong to. */
body.admin .schedule_intake_form {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: flex-end;
margin: 6px 0 10px;
}
body.admin .schedule_intake_form label {
display: flex;
flex-direction: column;
gap: 3px;
font-family: var(--px-font-mono);
font-size: var(--px-text-sm);
color: var(--px-ink-2);
}
body.admin .schedule_intake_form textarea { width: 260px; }
body.admin table.schedule_intake { margin-bottom: 6px; }
/* The one-time password notice. Loud on purpose: reloading the page does
not bring the password back. */
body.admin .schedule_once {
border: 1px solid var(--px-ink);
border-left: 5px solid var(--px-amber);
background: var(--px-amber-soft);
color: var(--px-ink);
padding: 11px 13px;
margin: 0 0 16px;
line-height: 1.55;
}
body.admin textarea.schedule_block {
width: 100%;
box-sizing: border-box;
font-family: var(--px-font-mono);
font-size: 13px;
line-height: 1.5;
background: var(--px-field-bg);
color: var(--px-ink);
border: 1px solid var(--px-ink);
padding: 10px 12px;
}