/* ========================================================================= cws_pixel.css — pixel skin for the ContestWebServer. Loaded LAST, after bootstrap.css and cws_style.css, so it wins without either of those having to change. Tokens and primitives come from ../pixel/pixel-tokens.css (do not edit that file); anything this sheet needs on its own is namespaced --cws-*. Rules of the look: * warm off-white paper with a faint dotted grid (body.px-paper) * square corners, 1px near-black borders, hard 3px offset shadows * no gradients, no blurred shadows, no text-shadows * Silkscreen for display type ONLY at >= 20px; JetBrains Mono elsewhere * flat semantic colours; scores keep their numeric text, never colour alone Nothing here renames or removes an id, name, data-* or class that cws_utils.js, web_editor.js, proctoring_tracker.js or the inline page scripts look up. It only adds appearance. ========================================================================= */ :root { --cws-nav-h: 52px; /* fixed navbar height (JS reads outerHeight) */ --cws-field-bg: #ffffff; /* pixel-tokens hardcodes #fff inside .px-input */ --cws-shadow-lg: 6px 6px 0 var(--px-ink); --cws-rule: 1px solid var(--px-ink); --cws-rule-soft: 1px solid var(--px-grid); --cws-ink-inv: #ffffff; /* text on a saturated fill */ /* Measured fallbacks for two token colours that miss WCAG AA as TEXT. --px-ink-3 (#77776f) is 4.06:1 on --px-paper and 3.9:1 on --px-paper-2; --px-amber (#8f6300) is 4.38:1 on --px-amber-soft. Both stay in use for borders and rules, where the ratio does not apply; these two take over wherever the colour carries words. */ --cws-meta: #63635b; /* 5.45:1 on paper, 4.99:1 on paper-2 */ --cws-amber-text: #7a5400; /* 5.59:1 on amber-soft, 6.10:1 on paper */ } /* ------------------------------------------------------------------------- 1. Ground rules ---------------------------------------------------------------------- */ /* Deliberately NO background on : with html bare, the body's dotted paper propagates to the canvas and fills the viewport. Painting html here instead would win on pages whose content is entirely floated (error.html), where the body box collapses to zero height and the grid would vanish. */ body, body.px-paper { font-family: var(--px-font-mono); font-size: var(--px-text); line-height: var(--px-leading); color: var(--px-ink); background-attachment: fixed; min-height: 100vh; } /* Bootstrap 2 rounds and gradients nearly everything. Flatten it once. */ body .btn, body .btn-group > .btn, body .well, body .alert, body .label, body .badge, body .modal, body .dropdown-menu, body .nav-tabs > li > a, body .nav-pills > li > a, body .hero-unit, body .table-bordered, body .table-bordered th, body .table-bordered td, body input, body select, body textarea, body .input-xlarge, body .pagination ul, body .pagination ul > li > a, body .progress, body .thumbnail, body .breadcrumb, body .navbar-inner, body .popover, body .tooltip-inner { border-radius: var(--px-radius) !important; background-image: none !important; text-shadow: none !important; filter: none !important; } body a { color: var(--px-green); text-decoration: none; } body a:hover, body a:focus { color: var(--px-green-2); text-decoration: underline; } /* A visible focus ring everywhere — never rely on the browser default, which Bootstrap 2 sometimes suppresses. */ body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible, body [tabindex]:focus-visible { outline: 2px solid var(--px-green); outline-offset: 2px; } body ::selection { background: var(--px-green-soft); color: var(--px-ink); } body hr { border-top: 2px dotted var(--px-grid); border-bottom: 0; } body code, body pre, body kbd, body samp { font-family: var(--px-font-mono); border-radius: 0; border: var(--cws-rule); background: var(--px-paper-2); color: var(--px-ink); box-shadow: none; } body pre { padding: 10px 12px; font-size: var(--px-text-sm); line-height: 1.5; } body code { padding: 1px 5px; font-size: 0.92em; } /* ------------------------------------------------------------------------- 2. Type scale Silkscreen never below 20px. Everything smaller is JetBrains Mono. ---------------------------------------------------------------------- */ body h1, body h2, body .px-display { font-family: var(--px-font-display); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; color: var(--px-ink); -webkit-font-smoothing: none; text-rendering: optimizeSpeed; overflow-wrap: break-word; } body h1 { font-size: clamp(22px, 4.2vw, 34px); margin: 0 0 10px; } body h2 { font-size: clamp(20px, 2.6vw, 22px); margin: 26px 0 12px; } /* Below 20px Silkscreen is unreadable: mono, uppercase, tracked out. */ body h3, body h4, body h5, body h6 { font-family: var(--px-font-mono); font-weight: 700; color: var(--px-ink); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.35; } body h3 { font-size: 15px; margin: 22px 0 10px; } body h4 { font-size: 14px; margin: 16px 0 8px; } body h5, body h6 { font-size: 13px; margin: 14px 0 6px; } body h1 small, body h2 small { font-family: var(--px-font-mono); font-weight: 400; font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cws-meta); display: inline-block; vertical-align: middle; margin-left: 6px; } body p { margin: 0 0 12px; } body .lead { font-size: 15px; line-height: 1.55; color: var(--px-ink-2); } body small { font-size: var(--px-text-sm); } body strong, body b { font-weight: 700; } body em, body i { font-style: italic; } body .page-header { padding-bottom: 12px; margin: 0 0 22px; border-bottom: 2px solid var(--px-ink); } body .page-header h1 { margin-bottom: 4px; } /* ------------------------------------------------------------------------- 3. Showcase hero (login + overview) ---------------------------------------------------------------------- */ .cws-hero { position: relative; } /* Silkscreen glyphs already fill their em box, so the token's 0.12em gap reads as part of the last letter. Give the block a little more air. */ body .px-cursor::after { margin-left: 0.22em; height: 0.18em; } .cws-brand { display: block; margin: 0 0 14px; font-family: var(--px-font-mono); font-size: var(--px-text-sm); letter-spacing: 0.04em; color: var(--cws-meta); } .cws-hero-title { font-family: var(--px-font-display); font-weight: 700; font-size: clamp(30px, 6.4vw, 60px); line-height: 1.04; letter-spacing: 0.01em; margin: 0 0 14px; color: var(--px-ink); -webkit-font-smoothing: none; text-rendering: optimizeSpeed; overflow-wrap: break-word; word-break: break-word; } .cws-hero-sub { display: block; margin: 0 0 26px; font-family: var(--px-font-mono); font-size: var(--px-text-sm); letter-spacing: 0.04em; color: var(--cws-meta); } /* Inside a boxed hero (login, register) the measure is ~520px, and Silkscreen runs about 0.77em per character. Cap the size so a 12-character word like "Registration" still fits on one line instead of breaking mid-word. */ body .hero-unit .cws-hero-title, body .contest_gate_card .cws-hero-title { font-size: clamp(28px, 5vw, 46px); } /* The page-header variant used on overview and the task pages. */ .page-header.cws-hero { border-bottom: 2px solid var(--px-ink); } .page-header.cws-hero .cws-hero-title { font-size: clamp(26px, 5vw, 46px); } .page-header.cws-hero .cws-hero-sub { margin-bottom: 12px; } /* ------------------------------------------------------------------------- 4. Navbar ---------------------------------------------------------------------- */ body .navbar { margin-bottom: 0; } body #navigation_bar.navbar .navbar-inner, body .navbar .navbar-inner { min-height: var(--cws-nav-h); padding: 0; background: var(--px-paper); border: 0; border-bottom: 2px solid var(--px-ink); box-shadow: none; } body .navbar .container { display: flex; align-items: center; gap: 10px; min-height: var(--cws-nav-h); padding: 6px 18px; box-sizing: border-box; } body .navbar .brand { order: 0; margin: 0; margin-right: auto; padding: 0; font-family: var(--px-font-display); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: 0.01em; color: var(--px-ink); text-shadow: none; -webkit-font-smoothing: none; text-rendering: optimizeSpeed; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .navbar .brand:hover { color: var(--px-green); text-decoration: none; } body .navbar .navbar-text, body .navbar .navbar-form { order: 1; float: none; margin: 0; padding: 0; font-family: var(--px-font-mono); font-size: var(--px-text-sm); line-height: 1.3; color: var(--px-ink-2); text-shadow: none; } body .navbar .navbar-text strong { color: var(--px-ink); } body .navbar .navbar-text em { color: var(--cws-meta); font-style: normal; } /* The pull-right elements are laid out by flex order, not float, so the reading order becomes: brand … who you are, language, logout. */ body .navbar .pull-right { float: none; } body .navbar .cws-nav-user { order: 1; } body .navbar .cws-nav-lang { order: 2; } body .navbar .cws-nav-logout { order: 3; } body .navbar-form .btn, body #lang { margin: 0; font-size: var(--px-text-sm); padding: 6px 10px; box-shadow: var(--px-shadow-sm); } body #lang { width: auto; height: auto; background: var(--px-paper); color: var(--px-ink); border: var(--cws-rule); font-family: var(--px-font-mono); } /* Content clears the fixed bar. #main also gets an inline `top` from cws_utils.js (it is position:relative), so keep that mechanism working. */ body #main.container { padding-top: 22px; padding-bottom: 40px; } @media (min-width: 980px) { body #main { padding-top: 22px; } } /* ------------------------------------------------------------------------- 5. Left rail: clock, countdown, nav list, licence ---------------------------------------------------------------------- */ body #server_time_box, body #countdown_box { font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--px-ink); text-align: left; margin: 0 0 6px; padding: 6px 10px; border: var(--cws-rule); background: var(--px-paper-2); display: flex; justify-content: space-between; gap: 8px; } body #countdown_box { margin-bottom: 14px; } body #server_time_label, body #countdown_label { color: var(--cws-meta); font-weight: 400; } body #server_time, body #countdown { font-weight: 700; font-variant-numeric: tabular-nums; } body .span3 > .well, body .well.cws-rail, body .well { background: var(--px-paper); border: var(--cws-rule); box-shadow: var(--px-shadow); padding: var(--px-gap); margin-bottom: 18px; } body .well-small { padding: 10px 12px; } /* The rail's nav list supplies its own padding. */ body .well.cws-rail { padding: 8px 0; } body .nav-list { padding: 0; margin: 0; } /* Bootstrap pulls list items 15px outside the well; the pixel rail has its own padding, so cancel that. */ body .nav-list > li > a, body .nav-list .nav-header { margin-left: 0; margin-right: 0; text-shadow: none; } body .nav-list > li > a { display: block; padding: 7px 12px; font-family: var(--px-font-mono); font-size: 13px; letter-spacing: 0.03em; color: var(--px-ink); border: 0; border-left: 3px solid transparent; text-shadow: none; } body .nav-list > li > a:hover, body .nav-list > li > a:focus { background: var(--px-paper-2); border-left-color: var(--px-ink); color: var(--px-ink); text-decoration: none; } body .nav-list > .active > a, body .nav-list > .active > a:hover, body .nav-list > .active > a:focus { background: var(--px-green-soft); color: var(--px-ink); border-left-color: var(--px-green); font-weight: 700; text-shadow: none; } body .nav-list > .nav-header { padding: 12px 12px 4px; font-family: var(--px-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cws-meta); text-shadow: none; } body .nav-list > .divider { height: 0; margin: 10px 12px; border-top: 2px dotted var(--px-grid); border-bottom: 0; background: none; } body .license_notice { font-family: var(--px-font-mono); font-size: 11px; line-height: 1.5; color: var(--cws-meta); text-align: left; padding: 0 2px; } body .license_notice a { color: var(--px-ink-2); text-decoration: underline; } body .license_notice a:hover { color: var(--px-green); } /* ------------------------------------------------------------------------- 6. Buttons ---------------------------------------------------------------------- */ body .btn, body button.btn, body input[type="submit"].btn { display: inline-block; font-family: var(--px-font-mono); font-size: var(--px-text); font-weight: 500; line-height: 1.2; padding: 9px 14px; color: var(--px-ink); background: var(--px-paper); border: var(--cws-rule); box-shadow: var(--px-shadow); text-decoration: none; text-shadow: none; cursor: pointer; transition: transform 60ms steps(2), box-shadow 60ms steps(2); } body .btn:hover, body .btn:focus { color: var(--px-ink); background: var(--px-paper-2); text-decoration: none; transform: translate(1px, 1px); box-shadow: var(--px-shadow-sm); outline: none; } body .btn:active, body .btn.active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--px-ink); } body .btn:focus-visible { outline: none; box-shadow: var(--px-shadow-sm), var(--px-focus); } body .btn-large { font-size: 15px; padding: 11px 18px; } body .btn-small { font-size: var(--px-text-sm); padding: 6px 10px; } body .btn-mini { font-size: 11px; padding: 4px 8px; } body .btn-primary, body .btn-success, body .px-btn-primary { background: var(--px-green); color: var(--cws-ink-inv); border-color: var(--px-ink); } body .btn-primary:hover, body .btn-primary:focus, body .btn-success:hover, body .btn-success:focus { background: var(--px-green-2); color: var(--cws-ink-inv); } body .btn-warning { background: var(--px-amber); color: var(--cws-ink-inv); border-color: var(--px-ink); } body .btn-warning:hover, body .btn-warning:focus { background: #a37200; color: var(--cws-ink-inv); } body .btn-danger { background: var(--px-red); color: var(--cws-ink-inv); border-color: var(--px-ink); } body .btn-danger:hover, body .btn-danger:focus { background: #bf3a24; color: var(--cws-ink-inv); } body .btn-info { background: var(--px-blue); color: var(--cws-ink-inv); border-color: var(--px-ink); } body .btn-info:hover, body .btn-info:focus { background: #2c5b95; color: var(--cws-ink-inv); } body .btn.disabled, body .btn[disabled], body .btn.disabled:hover, body .btn[disabled]:hover { color: var(--cws-meta); background: var(--px-paper-2); border-color: var(--px-grid); box-shadow: none; transform: none; opacity: 1; cursor: not-allowed; } body .btn-group > .btn { box-shadow: none; } body .btn-group { box-shadow: var(--px-shadow); } body .btn-group > .btn + .btn { margin-left: -1px; } body .caret { border-top-color: currentColor; border-bottom-color: currentColor; margin-left: 5px; } body .close { font-family: var(--px-font-mono); font-size: 18px; font-weight: 400; color: var(--px-ink); opacity: 1; text-shadow: none; } body .close:hover { color: var(--px-red); opacity: 1; } /* ------------------------------------------------------------------------- 7. Forms ---------------------------------------------------------------------- */ body label, body .control-label { font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--px-ink-2); text-shadow: none; } body input[type="text"], body input[type="password"], body input[type="email"], body input[type="number"], body input[type="search"], body input[type="file"], body select, body textarea, body .uneditable-input { font-family: var(--px-font-mono); font-size: var(--px-text); line-height: 1.4; color: var(--px-ink); background: var(--cws-field-bg); border: var(--cws-rule); box-shadow: none; padding: 8px 10px; height: auto; transition: none; } body select { padding: 7px 8px; } body input::placeholder, body textarea::placeholder { color: var(--cws-meta); opacity: 1; } /* Bootstrap 2 focuses fields with a blue blurred glow via input[type="text"]:focus (specificity 0,2,1), so the override has to match per-type or it loses. */ body input:focus, body select:focus, body textarea:focus, body input[type="text"]:focus, body input[type="password"]:focus, body input[type="email"]:focus, body input[type="number"]:focus, body input[type="search"]:focus, body input[type="url"]:focus, body input[type="tel"]:focus, body input[type="file"]:focus, body .uneditable-input:focus { outline: none; border-color: var(--px-ink); box-shadow: var(--px-focus); transition: none; } body input[type="checkbox"], body input[type="radio"] { accent-color: var(--px-green); width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; } body .help-block, body .help-inline { font-family: var(--px-font-mono); font-size: var(--px-text-sm); color: var(--cws-meta); } body .control-group.error .control-label, body .control-group.error .help-block, body .control-group.error .help-inline { color: var(--px-red); } body .control-group.error input, body .control-group.error select, body .control-group.error textarea { border-color: var(--px-red); box-shadow: 0 0 0 2px var(--px-red-soft); } /* Bootstrap's horizontal forms right-align a 160px label gutter. The pixel look stacks label over field everywhere, so the whole site reads the same way. cws_style.css sets its own gutter for #submit_solution / .submit_test; both are overridden here. */ body .form-horizontal .control-label, body #submit_solution .control-label, body .submit_test .control-label { float: none; width: auto; text-align: left; display: block; padding: 0 0 5px; margin-bottom: 0; } body .form-horizontal .controls, body #submit_solution .controls, body .submit_test .controls { margin-left: 0; } body .form-horizontal .control-group { margin-bottom: 14px; } body #submit_solution .control-group, body .submit_test .control-group { margin-bottom: 12px; } body fieldset { border: 0; margin: 0; padding: 0; } body legend { font-family: var(--px-font-mono); font-size: var(--px-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--px-ink); border-bottom: 2px solid var(--px-ink); } /* ------------------------------------------------------------------------- 8. Tables ---------------------------------------------------------------------- */ body .table { font-family: var(--px-font-mono); font-size: 13px; background: var(--px-paper); border-collapse: collapse; margin-bottom: 22px; } body .table, body .table-bordered { border: var(--cws-rule); border-collapse: collapse; } body .table th, body .table td, body .table-bordered th, body .table-bordered td { border: var(--cws-rule-soft); padding: 8px 10px; vertical-align: top; line-height: 1.5; } body .table thead th, body .table-bordered thead th { background: var(--px-paper-3); border-bottom: 2px solid var(--px-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--px-ink); white-space: nowrap; } body .table tbody th { background: var(--px-paper-2); font-weight: 700; color: var(--px-ink); } body .table-striped tbody > tr:nth-child(odd) > td, body .table-striped tbody > tr:nth-child(odd) > th { background: var(--px-paper-2); } body .table-striped tbody > tr:nth-child(even) > td { background: var(--px-paper); } body .table tbody tr:hover > td, body .table tbody tr:hover > th { background: var(--px-green-soft); } body .table.table-nohover > tbody > tr:hover > td, body .table.table-nohover > tbody > tr:hover > th { background: transparent !important; } /* Tables must never push the page sideways on a narrow screen. */ body .table { width: 100%; } @media (max-width: 767px) { body .table { display: block; overflow-x: auto; } } /* ------------------------------------------------------------------------- 9. Scores get_score_class() in cms/server/contest/formatting.py emits exactly score_0 / score_0_100 / score_100; the same three names are produced client-side by get_score_class() inside task_submissions.html. The numeric text always stays — colour is a second channel, never the only one. ---------------------------------------------------------------------- */ body .task_score_container { display: flex; gap: var(--px-gap); justify-content: stretch; margin-bottom: 24px; } body .task_score { /* flex-basis MUST stay auto. Bootstrap gives .row-fluid [class*="span"] a width:100% and min-height:28px; with flex-basis:0 the panel's cross size resolves from that 28px instead of its content, and the explanatory text spills out over the heading below (visible at 390px). */ flex: 1 1 auto; min-width: 0; display: block; margin: 0; padding: 12px 14px; border: var(--cws-rule); border-left-width: 6px; box-shadow: var(--px-shadow); background: var(--px-paper); font-family: var(--px-font-mono); font-weight: 400; font-size: 13px; color: var(--px-ink-2); text-align: left; } /* Only the caption shouts; the explanatory sentence underneath stays sentence case so it is still readable. */ body .task_score > span:first-child { display: block; font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; } body .task_score br { display: none; } body .task_score .score { display: block; margin-top: 4px; font-family: var(--px-font-display); font-size: 24px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: var(--px-ink); -webkit-font-smoothing: none; text-rendering: optimizeSpeed; } body .task_score .score img { margin-left: 6px; vertical-align: middle; } body .task_score.score_0 { background: var(--px-score-0-bg); border-left-color: var(--px-score-0); } body .task_score.score_0_100 { background: var(--px-score-p-bg); border-left-color: var(--px-score-p); } body .task_score.score_100 { background: var(--px-score-100-bg); border-left-color: var(--px-score-100); } body .task_score.undefined { background: var(--px-paper-2); border-left-color: var(--cws-meta); } body .task_score.undefined .score { color: var(--px-ink-2); font-size: 16px; } /* Score cells in the submission table. Keep the hover rules from cws_style.css overridden so the tint does not vanish on hover. */ body .submission_list td.public_score, body .submission_list td.total_score, body .submission_list tr:hover td.public_score, body .submission_list tr:hover td.total_score { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } body .submission_list td.public_score.score_0, body .submission_list td.total_score.score_0, body .submission_list tr:hover td.public_score.score_0, body .submission_list tr:hover td.total_score.score_0 { background: var(--px-score-0-bg); color: var(--px-score-0); box-shadow: inset 4px 0 0 var(--px-score-0); } body .submission_list td.public_score.score_0_100, body .submission_list td.total_score.score_0_100, body .submission_list tr:hover td.public_score.score_0_100, body .submission_list tr:hover td.total_score.score_0_100 { background: var(--px-score-p-bg); color: var(--cws-amber-text); box-shadow: inset 4px 0 0 var(--px-score-p); } body .submission_list td.public_score.score_100, body .submission_list td.total_score.score_100, body .submission_list tr:hover td.public_score.score_100, body .submission_list tr:hover td.total_score.score_100 { background: var(--px-score-100-bg); color: var(--px-score-100); box-shadow: inset 4px 0 0 var(--px-score-100); } /* cws_style.css greys the empty user-test cells to #AAA (1.9:1 — unreadable) with a 4-class selector, so match its weight here. */ body .submission_list tbody tr td.public_score.undefined, body .submission_list tbody tr td.total_score.undefined, body .user_test_list tbody tr td.undefined, body .user_test_list tbody tr td.time.undefined, body .user_test_list tbody tr td.memory.undefined, body .user_test_list tbody tr td.execution_time.undefined { background: var(--px-paper-2); color: var(--cws-meta); font-weight: 400; } /* ------------------------------------------------------------------------- 10. Submission and user-test tables ---------------------------------------------------------------------- */ body .submission_list, body .user_test_list { margin-bottom: 24px; } body .submission_list tbody tr td.datetime, body .submission_list tbody tr td.time, body .user_test_list tbody tr td.datetime, body .user_test_list tbody tr td.time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--px-ink-2); } body .submission_list tbody tr td.status, body .user_test_list tbody tr td.status { font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } body .submission_list tbody tr td.status .details, body .user_test_list tbody tr td.status .details { display: inline-block; margin-left: 6px; padding: 1px 6px; border: var(--cws-rule); background: var(--px-paper); color: var(--px-ink); font-size: 11px; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; } body .submission_list tbody tr td.status a.details:hover, body .user_test_list tbody tr td.status a.details:hover { background: var(--px-green-soft); text-decoration: none; } body .submission_list tbody tr td.status img.details, body .user_test_list tbody tr td.status img.details { border: 0; padding: 0; background: none; } body .submission_list tbody tr td.no_submissions, body .user_test_list tbody tr td.no_user_tests { text-align: center; color: var(--cws-meta); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.1em; padding: 22px 10px; } body .submission_list tbody tr td.token, body .submission_list tbody tr td.files, body .user_test_list tbody tr td.files, body .user_test_list tbody tr td.input, body .user_test_list tbody tr td.output { text-align: center; } body .submission_list tbody tr td.token form { margin: 0; } body .submission_list tbody tr td.token .btn, body .submission_list tbody tr td.files .btn, body .user_test_list tbody tr td.files .btn, body .user_test_list tbody tr td.input .btn, body .user_test_list tbody tr td.output .btn { font-size: 11px; padding: 4px 9px; box-shadow: var(--px-shadow-sm); } /* ------------------------------------------------------------------------- 11. Alerts, labels, badges, notifications ---------------------------------------------------------------------- */ body .alert { font-family: var(--px-font-mono); font-size: 13px; padding: 11px 13px; border: var(--cws-rule); border-left-width: 5px; background: var(--px-blue-soft); border-left-color: var(--px-blue); color: var(--px-ink); box-shadow: var(--px-shadow-sm); text-shadow: none; } body .alert h4, body .alert .alert-heading { margin: 0 0 4px; font-size: var(--px-text-sm); letter-spacing: 0.08em; color: inherit; } body .alert-error, body .alert-danger { background: var(--px-red-soft); border-left-color: var(--px-red); color: var(--px-ink); } body .alert-success { background: var(--px-green-soft); border-left-color: var(--px-green); } body .alert-warning, body .alert-block { background: var(--px-amber-soft); border-left-color: var(--px-amber); } body .alert .close { position: relative; top: -2px; right: -2px; } body .label, body .badge, body .px-tag { font-family: var(--px-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border: var(--cws-rule); background: var(--px-paper-2); color: var(--px-ink); text-shadow: none; vertical-align: baseline; } body .label-warning, body .badge-warning { background: var(--px-amber-soft); color: var(--cws-amber-text); } body .label-important, body .badge-important { background: var(--px-red-soft); color: var(--px-red); } body .label-success, body .badge-success { background: var(--px-green-soft); color: var(--px-green); } body .label-info, body .badge-info { background: var(--px-blue-soft); color: var(--px-blue); } /* Unread-message counter in the left rail. cws_utils.js toggles .no_unread and writes the text, so only appearance is touched here. */ body #unread_count { margin-left: 6px; background: var(--px-amber-soft); color: var(--cws-amber-text); border-color: var(--px-amber); } body #unread_count.no_unread { display: none; } body .notifications { top: calc(var(--cws-nav-h) + 12px); right: 0; } body .notifications .notification { width: 250px; margin-right: 18px; box-shadow: var(--px-shadow); } /* ------------------------------------------------------------------------- 12. Modals and dropdowns ---------------------------------------------------------------------- */ body .modal { background: var(--px-paper); border: 2px solid var(--px-ink); box-shadow: var(--cws-shadow-lg); } body .modal-header { padding: 12px 16px; border-bottom: 2px solid var(--px-ink); background: var(--px-paper-2); } body .modal-header h3 { margin: 0; font-size: 14px; letter-spacing: 0.09em; } body .modal-body { padding: 16px; background: var(--px-paper); } body .modal-footer { padding: 12px 16px; border-top: 2px solid var(--px-ink); background: var(--px-paper-2); box-shadow: none; } body .modal-backdrop, body .modal-backdrop.fade.in { background: var(--px-ink); opacity: 0.35; } body .dropdown-menu { border: var(--cws-rule); background: var(--px-paper); box-shadow: var(--px-shadow); padding: 4px 0; } body .dropdown-menu > li > a { font-family: var(--px-font-mono); font-size: 13px; color: var(--px-ink); padding: 6px 12px; } body .dropdown-menu > li > a:hover, body .dropdown-menu > li > a:focus { background: var(--px-green-soft); color: var(--px-ink); } /* Submission-detail modal internals (built by the inline script). */ body #submission_detail .modal-body .loading { font-family: var(--px-font-mono); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cws-meta); } body #submission_detail .subtask { border: var(--cws-rule); background: var(--px-paper); margin-bottom: 8px; } body #submission_detail .subtask-head { padding: 8px 10px; background: var(--px-paper-2); border: 0; border-bottom: var(--cws-rule-soft); font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer; } body #submission_detail .subtask .subtask-head .score { float: right; font-weight: 700; /* cws_style.css stretches this badge to 20% of the modal; size it to its own text instead. */ width: auto; min-width: 84px; height: auto; line-height: 1.5; margin: 0; padding: 1px 9px; border: var(--cws-rule); border-radius: 0; background: var(--px-paper); color: var(--px-ink); text-transform: none; } body #submission_detail .subtask.correct .subtask-head .score { background: var(--px-score-100-bg); color: var(--px-score-100); } body #submission_detail .subtask.notcorrect .subtask-head .score { background: var(--px-score-0-bg); color: var(--px-score-0); } body #submission_detail .subtask.partiallycorrect .subtask-head .score { background: var(--px-score-p-bg); color: var(--cws-amber-text); } body #submission_detail .subtask.undefined .subtask-head .score { background: var(--px-paper-2); color: var(--cws-meta); } body #submission_detail table.testcase-list tbody tr td.outcome .outcome { display: inline-block; width: auto; height: auto; line-height: 1.5; border-radius: 0; padding: 1px 7px; border: var(--cws-rule); background: var(--px-paper-2); color: var(--px-ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } body #submission_detail table.testcase-list tbody tr.correct td.outcome .outcome { background: var(--px-score-100-bg); color: var(--px-score-100); } body #submission_detail table.testcase-list tbody tr.notcorrect td.outcome .outcome { background: var(--px-score-0-bg); color: var(--px-score-0); } body #submission_detail table.testcase-list tbody tr.partiallycorrect td.outcome .outcome { background: var(--px-score-p-bg); color: var(--cws-amber-text); } body .score_details { font-family: var(--px-font-mono); font-size: 13px; } /* ------------------------------------------------------------------------- 13. Tabs and pills ---------------------------------------------------------------------- */ body .nav-tabs, body .nav-pills { border-bottom: 2px solid var(--px-ink); margin-bottom: 20px; padding: 0; } body .nav-pills { border-bottom: 0; } body .nav-tabs > li, body .nav-pills > li { margin-bottom: -2px; } body .nav-tabs > li > a, body .nav-pills > li > a { font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 14px; margin: 0 -1px 0 0; color: var(--px-ink-2); background: var(--px-paper-2); border: var(--cws-rule); border-bottom-color: var(--px-ink); line-height: 1.3; } body .nav-tabs > li > a:hover, body .nav-pills > li > a:hover { background: var(--px-paper-3); border-color: var(--px-ink); color: var(--px-ink); } body .nav-tabs > .active > a, body .nav-tabs > .active > a:hover, body .nav-pills > .active > a, body .nav-pills > .active > a:hover { background: var(--px-green); color: var(--cws-ink-inv); border-color: var(--px-ink); font-weight: 700; } body .test_interface .nav-tabs li a { margin-right: -1px; } body .tab-content { overflow: visible; } body .pagination ul { box-shadow: none; border: 0; } body .pagination ul > li > a, body .pagination ul > li > span { font-family: var(--px-font-mono); font-size: 13px; border: var(--cws-rule); margin-right: -1px; background: var(--px-paper); color: var(--px-ink); } body .pagination ul > .active > a, body .pagination ul > .active > span { background: var(--px-green); color: var(--cws-ink-inv); } /* ------------------------------------------------------------------------- 14. Login page (contest.html, logged out) + registration ---------------------------------------------------------------------- */ body .hero-unit { background: var(--px-paper); border: var(--cws-rule); box-shadow: var(--px-shadow); padding: 32px 34px; margin-bottom: 24px; font-size: var(--px-text); line-height: var(--px-leading); color: var(--px-ink); } /* Override the fixed/centred positioning from cws_style.css: the hero is taller than the old box and must not be clipped on short screens. */ body div.login_container, body div.login_container.px-login { position: static; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--cws-nav-h)); padding: 40px 20px 56px; margin: 0; box-sizing: border-box; } @media (max-width: 979px) and (min-height: 488px) { body div.login_container { position: static; top: auto; margin: 0; padding: 32px 18px 48px; } body div.login_box { margin-top: 0; } } @media (min-width: 980px) and (min-height: 468px) { body div.login_container { position: static; top: auto; margin: 0; } body div.login_box { margin-top: 0; } } body div.login_box { width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; } body .cws-login-lead { margin: 0 0 20px; font-size: 13px; color: var(--px-ink-2); } body .login_box .control-group { margin-bottom: 14px; } body .login_box .form-horizontal .control-label { float: none; width: auto; text-align: left; padding: 0 0 5px; display: block; } body .login_box .form-horizontal .controls { margin-left: 0; } body .login_box .form-horizontal .controls input, body .login_box .form-horizontal .controls input.input-xlarge { width: 100%; box-sizing: border-box; max-width: none; } body .login_box .cws-login-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } body .login_box .cws-login-actions .btn { margin: 0; } body .cws-login-register { margin: 18px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); } body .register_box { max-width: 620px; margin: 40px auto; box-sizing: border-box; } body .register_box .form-horizontal .control-label { float: none; width: auto; text-align: left; display: block; padding: 0 0 5px; } body .register_box .form-horizontal .controls { margin-left: 0; } body .register_box .form-horizontal .controls input, body .register_box .form-horizontal .controls select, body .register_box .form-horizontal .controls input.input-xlarge { width: 100%; box-sizing: border-box; max-width: none; } body #show-username { font-family: var(--px-font-display) !important; font-size: 30px !important; -webkit-font-smoothing: none; color: var(--px-green); border: var(--cws-rule); background: var(--px-green-soft); padding: 14px; margin: 12px 0 18px; } /* Contest chooser (contest_list.html). */ body .contest-list { max-width: 560px; margin: 60px auto; } body .contest-list ul { border: var(--cws-rule); margin: 16px 0 0; } body .contest-list li > a, body .contest-list li:first-child > a, body .contest-list li:last-child > a { display: block; padding: 12px 14px; border-radius: 0; border-bottom: var(--cws-rule-soft); background: var(--px-paper); color: var(--px-ink); font-family: var(--px-font-mono); } body .contest-list li:last-child > a { border-bottom: 0; } body .contest-list li > a:hover { background: var(--px-green-soft); text-decoration: none; } body .contest-list li > a.cws-contest-ended { color: var(--cws-meta); background: var(--px-paper-2); } /* ------------------------------------------------------------------------- 15. Contest gate (contest_gate.html) and contest selection ---------------------------------------------------------------------- */ .contest_gate_wrap { display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px 56px; } .contest_gate_card { width: 100%; max-width: 620px; box-sizing: border-box; background: var(--px-paper); border: var(--cws-rule); border-radius: 0; box-shadow: var(--px-shadow); padding: 30px 32px 26px; } .contest_gate_card h1 { font-family: var(--px-font-display); font-size: clamp(24px, 4vw, 34px); margin: 0 0 12px; -webkit-font-smoothing: none; } .gate_lead { color: var(--px-ink-2); margin: 0 0 20px; line-height: 1.55; font-size: 13px; } .gate_lead strong { color: var(--px-ink); } .gate_terms_title { font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 8px; color: var(--px-ink-2); } .gate_terms { max-height: 260px; overflow-y: auto; padding: 14px 16px; border: var(--cws-rule); border-radius: 0; background: var(--px-paper-2); font-family: var(--px-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--px-ink); } .gate_terms:focus { outline: none; box-shadow: var(--px-focus); } .gate_terms_list { margin: 0 0 0 18px; padding: 0; } .gate_terms_list li { margin: 0 0 10px; } .gate_terms_list li:last-child { margin-bottom: 0; } .gate_terms_list strong { color: var(--px-ink); } .gate_accept { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 20px; font-family: var(--px-font-mono); font-size: 13px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--px-ink); cursor: pointer; } .gate_accept input { margin: 2px 0 0; flex: none; } .gate_label { display: block; margin-bottom: 6px; font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--px-ink-2); } body .gate_input { width: 100%; box-sizing: border-box; font-family: var(--px-font-mono); font-size: 20px; padding: 11px 13px; border: var(--cws-rule); border-radius: 0; letter-spacing: 0.08em; background: var(--cws-field-bg); color: var(--px-ink); } body .gate_input:focus { outline: none; box-shadow: var(--px-focus); } body .gate_button { width: 100%; margin-top: 16px; padding: 13px; font-family: var(--px-font-mono); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cws-ink-inv); background: var(--px-green); border: var(--cws-rule); border-radius: 0; box-shadow: var(--px-shadow); cursor: pointer; transition: transform 60ms steps(2), box-shadow 60ms steps(2); } body .gate_button:hover { background: var(--px-green-2); transform: translate(1px, 1px); box-shadow: var(--px-shadow-sm); } body .gate_button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--px-ink); } .gate_error { background: var(--px-red-soft); border: var(--cws-rule); border-left: 5px solid var(--px-red); border-radius: 0; color: var(--px-ink); padding: 11px 13px; margin-bottom: 18px; font-size: 13px; } .gate_help { margin: 20px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); line-height: 1.55; } .gate_logout { margin: 10px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); } /* Contest selection screen (contest_selection.html). */ body .contest_gate { background: transparent; padding: 40px 18px; } body .contest_gate_inner { max-width: 720px; margin: 0 auto; } body .contest_gate h1 { font-family: var(--px-font-display); font-size: clamp(26px, 4.6vw, 40px); -webkit-font-smoothing: none; } body .contest_card { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px; background: var(--px-paper); border: var(--cws-rule); border-radius: 0; box-shadow: var(--px-shadow); cursor: pointer; } /* cws_style.css swaps in a soft green glow when selected; keep the hard offset shadow so the selected card does not look like it lost its box. */ body .contest_card.selected { background: var(--px-green-soft); border-color: var(--px-green); box-shadow: var(--px-shadow); } body .contest_card.selected .contest_name::after { content: " \2713"; /* selection is not colour-only */ color: var(--px-green); } body .contest_card .contest_name { display: block; font-family: var(--px-font-mono); font-size: var(--px-text); font-weight: 700; color: var(--px-ink); } body .contest_card .contest_id { display: block; font-family: var(--px-font-mono); font-size: var(--px-text-sm); color: var(--cws-meta); } body .permission_box { border: var(--cws-rule); border-radius: 0; background: var(--px-paper-2); padding: 16px; margin: 18px 0; box-shadow: none; } body .permission_row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--px-ink); margin-bottom: 8px; } body #contest-gate-status { font-family: var(--px-font-mono); font-size: var(--px-text-sm); color: var(--cws-meta); margin-left: 10px; } /* ------------------------------------------------------------------------- 16. Communication: announcements, questions, answers, messages ---------------------------------------------------------------------- */ body div.announcement_list div.announcement, body div.question_list div.question, body div.question_list div.answer, body div.question_list div.no_answer, body div.message_list div.message { border: var(--cws-rule); border-left-width: 5px; border-radius: 0; background: var(--px-paper); box-shadow: var(--px-shadow-sm); padding: 12px 14px; margin-bottom: 14px; color: var(--px-ink); text-shadow: none; } body div.announcement_list div.announcement { border-left-color: var(--px-blue); background: var(--px-blue-soft); } body div.question_list div.question { border-left-color: var(--cws-meta); background: var(--px-paper-2); } body div.question_list div.answer { border-left-color: var(--px-green); background: var(--px-green-soft); } body div.message_list div.message { border-left-color: var(--px-amber); background: var(--px-amber-soft); } body div.question_list div.no_answer { border-left-color: var(--px-grid); background: var(--px-paper-2); color: var(--cws-meta); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-top: -10px; } body div.announcement_list h4.subject, body div.question_list h4.subject, body div.message_list div.message h4.subject { margin: 0 0 4px; font-family: var(--px-font-mono); font-size: var(--px-text); font-weight: 700; text-transform: none; letter-spacing: 0.01em; color: var(--px-ink); } body h4.subject.empty { color: var(--cws-meta); font-style: italic; } body div.announcement_list span.timestamp, body div.question_list span.timestamp, body div.message_list div.message span.timestamp { display: block; font-family: var(--px-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--cws-meta); margin-bottom: 8px; } body div.announcement_list div.body, body div.question_list div.body, body div.message_list div.message div.body { font-size: 13px; line-height: 1.6; color: var(--px-ink); } body div.announcement_list div.body p:last-child, body div.question_list div.body p:last-child, body div.message_list div.body p:last-child { margin-bottom: 0; } body .question_submit { background: var(--px-paper); } body .question_submit .form-horizontal .control-label { float: none; width: auto; text-align: left; display: block; padding: 0 0 5px; } body .question_submit .form-horizontal .controls { margin-left: 0; } body .question_submit input, body .question_submit textarea, body .question_submit .input-xlarge { width: 100%; box-sizing: border-box; max-width: none; } /* ------------------------------------------------------------------------- 17. Task description page ---------------------------------------------------------------------- */ body .task_description .problem_statement { border: var(--cws-rule); border-radius: 0; background: var(--px-paper); box-shadow: var(--px-shadow); padding: 18px 20px; margin-bottom: 24px; } body .task_description .problem_statement h2 { margin-top: 0; } body .task_description .problem_statement pre { background: var(--px-paper-2); border: var(--cws-rule); border-radius: 0; font-size: var(--px-text-sm); } body .task_description .problem_statement .sample_explanation { font-size: var(--px-text-sm); color: var(--px-ink-2); } body .task_description .statement.no_statements { border: var(--cws-rule); background: var(--px-paper-2); color: var(--cws-meta); padding: 18px; margin: 0 0 22px; font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.1em; } body .task_description .statement.embedded_statement { border: var(--cws-rule); background: var(--px-paper); box-shadow: var(--px-shadow); margin-bottom: 24px; } body .task_description .statement.embedded_statement .statement_toolbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; border-bottom: var(--cws-rule); background: var(--px-paper-2); } body .task_description .statement.embedded_statement object { border: 0; border-radius: 0; display: block; width: 100%; } body .task_description .statement.many_statements .all_statements { border: var(--cws-rule); background: var(--px-paper-2); box-shadow: none; } body .compilation_command_cell { padding: 6px 8px; } body .compilation_command { display: block; font-size: 11.5px; padding: 4px 7px; white-space: pre-wrap; word-break: break-all; } body .token_rules p { font-size: 13px; } body td.token_rules p:last-child { margin-bottom: 0; } body #attachments ul li a { display: block; border: var(--cws-rule); border-radius: 0; background: var(--px-paper); box-shadow: var(--px-shadow-sm); padding: 9px 11px; color: var(--px-ink); } body #attachments ul li a:hover { background: var(--px-green-soft); text-decoration: none; } body #attachments ul li .name { font-weight: 700; } body #attachments ul li .size, body #attachments ul li .type { color: var(--cws-meta); font-size: 11px; } /* ------------------------------------------------------------------------- 18. The web editor — the page contestants live on for five hours. Calm, high contrast, square. No animation, no tint games. ---------------------------------------------------------------------- */ body .cms-web-editor { margin: 16px 0 28px; border: var(--cws-rule); border-radius: 0; background: var(--px-paper); box-shadow: var(--px-shadow); clear: both; } body .cms-editor-toolbar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: var(--cws-rule); background: var(--px-paper-2); border-radius: 0; } body .cms-editor-toolbar label { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--px-ink-2); } body .cms-editor-toolbar select { width: auto; margin: 0; padding: 5px 8px; font-size: var(--px-text-sm); background: var(--cws-field-bg); } body .cms-editor-save-status { margin-left: auto; font-family: var(--px-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cws-meta); padding: 3px 8px; border: 1px solid var(--px-grid); background: var(--px-paper); white-space: nowrap; } body .cms-editor-save-status[data-state="saved"] { color: var(--px-green); border-color: var(--px-green); background: var(--px-green-soft); } body .cms-editor-save-status[data-state="error"] { color: var(--px-red); border-color: var(--px-red); background: var(--px-red-soft); font-weight: 700; } body .cms-code-editor { background: var(--cws-field-bg); color: var(--px-ink); border-radius: 0; } body .cms-code-editor .cm-editor { font-family: var(--px-font-mono); font-size: 13.5px; line-height: 1.6; background: var(--cws-field-bg); } body .cms-code-editor .cm-gutters { border-right: var(--cws-rule); background: var(--px-paper-2); color: var(--cws-meta); } /* Deliberately quiet: five hours of staring at this. The active line is a faint paper tint, not the accent colour. */ body .cms-code-editor .cm-activeLine { background: var(--px-paper-2); } body .cms-code-editor .cm-activeLineGutter { background: var(--px-paper-3); color: var(--px-ink); } body .cms-code-editor .cm-selectionBackground, body .cms-code-editor .cm-content ::selection { background: var(--px-green-soft) !important; } body .cms-code-editor .cm-cursor { border-left-color: var(--px-green); border-left-width: 2px; } body .cms-code-editor .cm-focused { outline: 2px solid var(--px-green); outline-offset: -2px; } body .cms-editor-message { margin: 10px 12px 0; padding: 9px 12px; border: var(--cws-rule); border-left-width: 5px; border-left-color: var(--px-blue); border-radius: 0; background: var(--px-blue-soft); font-size: 13px; color: var(--px-ink); } body .cms-editor-message.error { background: var(--px-red-soft); border-left-color: var(--px-red); color: var(--px-ink); } body .cms-editor-message.success { background: var(--px-green-soft); border-left-color: var(--px-green); color: var(--px-ink); } body .cms-editor-conflict-actions { padding: 10px 12px 0; } body .cms-editor-run-controls { padding: 12px; border-top: var(--cws-rule); background: var(--px-paper); } body .cms-editor-run-controls label { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: 0.1em; } body .cms-editor-run-controls textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--px-font-mono); font-size: 13px; background: var(--cws-field-bg); border: var(--cws-rule); } body .cms-editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-top: var(--cws-rule); background: var(--px-paper-2); } body .cms-editor-actions .btn { margin: 0; } body .cms-editor-run-result, body .cms-editor-history { padding: 12px; border-top: var(--cws-rule); background: var(--px-paper); } body .cms-editor-run-result strong { font-family: var(--px-font-mono); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; } body .cms-editor-run-result pre, body .cms-editor-history pre { background: var(--px-paper-2); border: var(--cws-rule); border-radius: 0; font-size: var(--px-text-sm); } body .cms-editor-history h3 { margin: 0 0 10px; font-size: var(--px-text-sm); } body .cms-editor-history-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--px-grid); font-size: var(--px-text-sm); } body .cms-web-editor [hidden] { display: none !important; } /* The "you can submit N more" note lives in a bare .span5, which Bootstrap floats and indents 20px even outside a .row. Make it an ordinary block. */ body .cws-quota-note { float: none; width: auto; margin: 0 0 14px; padding: 6px 10px; border-left: 3px solid var(--px-grid); background: var(--px-paper-2); font-size: 13px; color: var(--px-ink-2); } body .cws-quota-note p { margin: 0; } /* ------------------------------------------------------------------------- 19. Error page ---------------------------------------------------------------------- */ /* error.html has no navbar and no #main, so it supplies its own frame. */ body .cws-error-wrap { padding: 56px 20px; overflow: hidden; /* contain the floated .span9 */ } body .cws-error { float: none; width: auto; max-width: 760px; margin: 0 auto; } body .cws-error p { color: var(--px-ink-2); max-width: 70ch; } /* ------------------------------------------------------------------------- 20. Narrow screens (must stay usable at 390px) ---------------------------------------------------------------------- */ @media (max-width: 979px) { body div.navbar.navbar-fixed-top { margin-bottom: 0; } body .navbar .container { flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; } body .navbar .brand { max-width: 100%; font-size: 17px; } body #main.container { padding-left: 14px; padding-right: 14px; } } @media (max-width: 767px) { /* The rail stacks above the content column; give the page header air so the hero label does not sit on the licence notice. */ body #main .span3 { margin-bottom: 26px; } /* Stacked, the rail's 15-item vertical list buries the page. Wrap it into rows of chips so the content is reachable without a long scroll. */ body .well.cws-rail { padding: 10px; } body .well.cws-rail .nav-list { display: flex; flex-wrap: wrap; gap: 6px; } body .well.cws-rail .nav-list > li { margin: 0; } body .well.cws-rail .nav-list > li > a { border: 1px solid var(--px-grid); border-left-width: 3px; padding: 6px 10px; } body .well.cws-rail .nav-list > .active > a { border-color: var(--px-green); } body .well.cws-rail .nav-list > .nav-header { flex-basis: 100%; padding: 8px 2px 0; } body .well.cws-rail .nav-list > .divider { flex-basis: 100%; margin: 6px 2px; } body #main .span3 + .span9 > .page-header, body #main .span3 + .span9 > .cws-hero { margin-top: 0; } body .license_notice { margin-bottom: 10px; } body .task_score_container { flex-direction: column; } body .cws-hero-title { font-size: clamp(28px, 9vw, 40px); } body .contest_gate_card { padding: 22px 18px 20px; } body .hero-unit { padding: 24px 20px; } body .cms-editor-toolbar, body .cms-editor-actions { flex-direction: column; align-items: stretch; } body .cms-editor-save-status { margin-left: 0; text-align: center; } body .cms-editor-actions .btn { width: 100%; box-sizing: border-box; text-align: center; } body .statement.embedded_statement .statement_toolbar .btn { width: 100%; box-sizing: border-box; text-align: center; } body #attachments ul { column-count: 1; } body .login_box .cws-login-actions .btn { flex: 1 1 auto; text-align: center; } } /* Nothing on the page may push the document sideways. */ body { overflow-x: hidden; } body #main.container, body .container { max-width: 100%; } @media (prefers-reduced-motion: reduce) { body .btn, body .gate_button { transition: none; } }