/* ========================================================================= 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 or the inline page scripts look up. It only adds appearance. ========================================================================= */ :root { --cws-nav-h: 52px; /* fixed navbar height (JS reads outerHeight) */ --cws-shadow-lg: 6px 6px 0 var(--px-ink); --cws-rule: 1px solid var(--px-ink); --cws-rule-soft: 1px solid var(--px-grid); /* These four used to be literals here. A literal cannot follow the dark palette, so they were promoted into pixel-tokens.css and this sheet aliases them: every rule below still says --cws-*, and the value now swaps with the theme. Do not put a hex back into this file. --cws-meta and --cws-amber-text exist because two tokens miss WCAG AA as TEXT: --px-ink-3 is 4.06:1 on --px-paper, --px-amber is 4.38:1 on --px-amber-soft. Both stay in use for borders and rules, where the ratio does not apply; these take over wherever the colour carries words. */ --cws-field-bg: var(--px-field-bg); --cws-ink-inv: var(--px-on-accent); /* text on a saturated fill */ --cws-meta: var(--px-meta); --cws-amber-text: var(--px-amber-text); } /* ------------------------------------------------------------------------- 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); 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; } /* The appearance control. base.html renders it as the first thing in (so it exists on error.html and the login page, which have no navbar), and cws_utils.js moves it into the navbar's flex container when there is one. Its two homes are styled here; the control itself is .px-theme, shared. */ body .navbar .cws-theme-slot { order: 4; display: flex; align-items: center; } body .cws-theme-slot.cws-theme-floating { position: fixed; top: 10px; right: 12px; z-index: 1040; /* above Bootstrap 2's .navbar-fixed-top (1030) */ } @media print { body .cws-theme-slot { display: none; } } 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: var(--px-amber-2); 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: var(--px-red-2); 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: var(--px-blue-2); 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; } /* The contest chooser that used to live here (a bare .contest-list of links) became the landing page on 2026-09-07, when the contest server moved to multi-contest mode and the root stopped being "pick one of these" and started being the front page. Its rules are in section 17. */ /* ------------------------------------------------------------------------- 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; } /* ---- Editor font size --------------------------------------------------- A− / A+ either side of the current value. The value is the live region, so a screen reader hears "16 px" once per press instead of the whole toolbar being re-announced. Sizes are a fixed ladder (12/14/16/18/20), not a free-form number: every step has to stay legible in JetBrains Mono and the gutter has to keep lining up. */ body .cms-editor-fontsize { display: inline-flex; align-items: stretch; border: var(--cws-rule); background: var(--px-paper); box-shadow: var(--px-shadow-sm); line-height: 1; } body .cms-editor-fontsize button { margin: 0; padding: 4px 9px; border: 0; border-radius: 0; background: transparent; color: var(--px-ink); font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; line-height: 1.3; cursor: pointer; } body .cms-editor-fontsize button:hover { background: var(--px-paper-2); } body .cms-editor-fontsize button:focus-visible { outline: none; box-shadow: var(--px-focus); position: relative; } body .cms-editor-fontsize button[disabled] { color: var(--cws-meta); cursor: not-allowed; background: transparent; } body .cms-editor-fontsize-value { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5em; padding: 0 6px; border-left: 1px solid var(--px-grid); border-right: 1px solid var(--px-grid); font-family: var(--px-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--px-ink-2); white-space: nowrap; } /* ---- Keyboard shortcut legend ------------------------------------------- Under the toolbar, above the code: a shortcut nobody is told about is a shortcut nobody uses, and the same strings are also set as title= on the buttons they drive. The modifier word is rewritten to the Mac symbol by the editor bundle, so the markup ships one spelling. */ body .cms-editor-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 12px; border-bottom: var(--cws-rule-soft); background: var(--px-paper); font-family: var(--px-font-mono); font-size: 11px; color: var(--cws-meta); } body .cms-editor-shortcuts kbd { font-family: var(--px-font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--px-grid); border-radius: 0; background: var(--px-paper-2); color: var(--px-ink); box-shadow: none; } body .cms-code-editor { background: var(--cws-field-bg); color: var(--px-ink); border-radius: 0; } /* The size control writes --cm-font-size on #cms-code-editor (see web_editor/src/editor.js). It is a custom property rather than a CodeMirror theme so nothing has to be rebuilt or re-dispatched per size, and the gutter, the content and the measuring layer all read the same number. */ body .cms-code-editor { --cm-font-size: 14px; } body .cms-code-editor .cm-editor { font-family: var(--px-font-mono); font-size: var(--cm-font-size); 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; } /* Stacked, the size control would stretch to the full width and put 200px between A− and A+. Keep it a compact unit and centre it. */ body .cms-editor-fontsize { align-self: center; } body .cms-editor-shortcuts { justify-content: 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; } } /* ------------------------------------------------------------------------- 16. Public booking pages (host_calendar.html, host_status.html) ------------------------------------------------------------------------- Reached without a login and from a search result, so it carries its own card rather than sitting inside the contest chrome. Every colour is a token: a literal cannot follow the dark-theme swap (PLATFORM.md §11). ---------------------------------------------------------------------- */ .host_wrap { display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px 56px; } .host_card { width: 100%; max-width: 820px; box-sizing: border-box; background: var(--px-paper); border: var(--cws-rule); border-radius: 0; box-shadow: var(--px-shadow); padding: 30px 32px 26px; } .host_title { font-size: clamp(24px, 4vw, 34px); margin: 0 0 12px; -webkit-font-smoothing: none; } .host_lead { color: var(--px-ink-2); margin: 0 0 22px; line-height: var(--px-leading); font-size: 13px; } .host_lead strong { color: var(--px-ink); } /* --- the month grid --- */ .host_cal { margin: 0 0 26px; } .host_cal_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .host_cal_month { font-family: var(--px-font-display); font-size: clamp(15px, 2.6vw, 20px); margin: 0; text-align: center; flex: 1 1 auto; -webkit-font-smoothing: none; } body a.host_cal_nav { flex: none; font-family: var(--px-font-mono); font-size: var(--px-text-sm); text-decoration: none; padding: 6px 10px; } .host_cal_caption { caption-side: top; text-align: left; font-size: var(--px-text-sm); color: var(--cws-meta); padding-bottom: 6px; } table.host_cal_grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--px-font-mono); } table.host_cal_grid th { font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--px-ink-2); padding: 4px 2px; text-align: left; border-bottom: var(--cws-rule); } td.host_cal_cell { vertical-align: top; border: var(--cws-rule-soft); padding: 4px 5px 6px; height: 62px; background: var(--px-paper-hi); /* The day panel is absolutely positioned against this. */ position: relative; } td.host_cal_out { background: var(--px-paper-2); } td.host_cal_out .host_cal_daynum { color: var(--px-ink-3); } td.host_cal_today { box-shadow: inset 0 0 0 2px var(--px-green); } .host_cal_daynum { display: block; font-size: var(--px-text-sm); color: var(--px-ink-2); margin-bottom: 3px; } .host_cal_taken, .host_cal_pending { display: block; font-size: 11px; line-height: 1.35; padding: 1px 3px; margin-bottom: 2px; border: var(--cws-rule-soft); overflow-wrap: anywhere; } .host_cal_taken { background: var(--px-green-soft); color: var(--px-ink); } /* Pending days say only that: no name, no times, no requester. */ .host_cal_pending { background: var(--px-amber-soft); color: var(--px-amber-text); font-style: italic; } /* --- how much of a day is booked --------------------------------------- A track one day wide with the approved hours filled from the left and the requested ones hatched after them, plus the hours in words. The bar is the glance; the words are the answer, because colour is never the only signal (PLATFORM.md §11) and a hatch survives forced colours where a fill does not. The only inline style is --fill, set from the fraction computed in schedule_calendar.py: percentages are data, and data does not belong in a stylesheet. */ .host_cal_note { margin: 0 0 8px; font-size: var(--px-text-sm); color: var(--cws-meta); line-height: 1.5; } .host_cal_load { display: block; margin: 0 0 3px; } .host_cal_load_track { display: flex; height: 8px; border: 1px solid var(--px-ink-3); background: var(--px-paper-3); overflow: hidden; } .host_cal_load_fill { display: block; width: var(--fill, 0%); height: 100%; flex: none; } .host_cal_load_approved { background: var(--px-green); } /* Hatched, not merely paler: "asked for" is a different fact from "taken", and a pattern says so without relying on the eye telling two greens apart. */ .host_cal_load_pending { background: repeating-linear-gradient( 45deg, var(--px-amber) 0, var(--px-amber) 3px, var(--px-amber-soft) 3px, var(--px-amber-soft) 6px); } .host_cal_load_text { display: block; font-size: 10px; line-height: 1.3; color: var(--px-ink-2); margin-top: 1px; } td.host_cal_full .host_cal_load_text { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* --- the day panel ------------------------------------------------------ Clicking a day opens what is on it. It is a native

: the cell's contents are the

, so it opens on click, on Enter and on Space with no script at all, and cws_utils.js only adds the manners (one open at a time, Escape, click away). The panel is absolutely positioned against the cell, which is why td.host_cal_cell is position: relative above. Two things would clip it: a scroll container between it and the page (there is none -- neither .host_card nor the table sets overflow), and `body { overflow-x: hidden }` further down, which makes the document a horizontal clip. That one is real, so the last three columns open leftwards (.host_cal_panel_left, set by the macro from the column index) and the panel is never wider than the viewport. */ .host_cal_details { display: block; } .host_cal_summary { display: block; /* not list-item: the marker would eat the cell */ list-style: none; cursor: pointer; } .host_cal_summary::-webkit-details-marker { display: none; } /* A caret, so the cell looks like something that opens. Decoration only: the accessible name is the summary's aria-label, which says the date, the hours and "show details". It inherits the day number's colour, which is a measured pair (check_contrast.py: ink-2 on paper-hi). */ .host_cal_summary .host_cal_daynum::after { content: " \25B8"; } .host_cal_details[open] .host_cal_summary .host_cal_daynum::after { content: " \25BE"; } .host_cal_summary:hover .host_cal_daynum { color: var(--px-ink); } .host_cal_summary:focus-visible { outline: none; box-shadow: var(--px-focus); } /* The open cell paints over its neighbours. Every cell is positioned, so without this the panel would slide under the cells that come after it. */ .host_cal_details[open] { position: relative; z-index: 5; } .host_cal_panel { position: absolute; top: 100%; left: 0; z-index: 5; width: 210px; 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: var(--cws-rule); box-shadow: var(--px-shadow); font-size: 11px; line-height: 1.45; color: var(--px-ink); white-space: normal; } /* The right-hand columns open leftwards: body clips the page sideways. */ .host_cal_panel_left { left: auto; right: 0; } .host_cal_panel_day { margin: 0 0 6px; padding-bottom: 4px; border-bottom: var(--cws-rule-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--px-ink-2); } .host_cal_panel_list { list-style: none; margin: 0 0 6px; padding: 0; } .host_cal_panel_item { display: block; margin: 0 0 3px; padding: 2px 4px; border: var(--cws-rule-soft); overflow-wrap: anywhere; } .host_cal_panel_time { display: block; font-variant-numeric: tabular-nums; } .host_cal_panel_what { display: block; } .host_cal_panel_taken { background: var(--px-green-soft); color: var(--px-ink); } /* A pending row says "requested" and no more: on this page the entry has no name on it to print (schedule_calendar.py, include_private). */ .host_cal_panel_requested { background: var(--px-amber-soft); color: var(--px-amber-text); font-style: italic; } .host_cal_panel_free { margin: 0; color: var(--px-green); } .host_cal_panel_none, .host_cal_panel_empty { margin: 0; color: var(--cws-meta); font-style: normal; } .host_cal_key { margin: 8px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); line-height: 1.6; } .host_cal_key .host_cal_taken, .host_cal_key .host_cal_pending { display: inline; margin: 0 2px; } /* --- the form --- */ .host_form_title { font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 22px 0 12px; color: var(--px-ink-2); } .host_field { margin: 0 0 14px; flex: 1 1 220px; } .host_row { display: flex; flex-wrap: wrap; gap: 0 16px; } .host_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 .host_input { width: 100%; box-sizing: border-box; font-family: var(--px-font-mono); font-size: 14px; padding: 9px 11px; border: var(--cws-rule); border-radius: 0; background: var(--cws-field-bg); color: var(--px-ink); height: auto; } body .host_input:focus { outline: none; box-shadow: var(--px-focus); } body textarea.host_textarea { resize: vertical; line-height: 1.5; } .host_hint { margin: 2px 0 16px; font-size: var(--px-text-sm); color: var(--cws-meta); line-height: 1.55; } .host_agree { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 20px; font-family: var(--px-font-mono); font-size: 12.5px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--px-ink); cursor: pointer; } .host_agree input { margin: 3px 0 0; flex: none; } /* The honeypot. Off-screen rather than display:none, because a bot that reads computed styles skips a hidden field; a person never reaches it (aria-hidden, tabindex=-1). */ .host_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } body .host_button { width: 100%; 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 .host_button:hover { background: var(--px-green-2); transform: translate(1px, 1px); box-shadow: var(--px-shadow-sm); } body .host_button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--px-ink); } .host_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: 0 0 18px; font-size: 13px; } .host_help { margin: 20px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); line-height: 1.55; } /* --- the status page --- */ .host_status { display: inline-block; font-family: var(--px-font-mono); font-size: var(--px-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 11px; border: var(--cws-rule); margin: 0 0 18px; } .host_status_pending { background: var(--px-amber-soft); color: var(--px-amber-text); } .host_status_approved { background: var(--px-green-soft); color: var(--px-green); } .host_status_rejected { background: var(--px-red-soft); color: var(--px-red); } table.host_detail { width: 100%; border-collapse: collapse; font-family: var(--px-font-mono); font-size: 13px; } table.host_detail th, table.host_detail td { border-bottom: var(--cws-rule-soft); padding: 7px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; } table.host_detail th { width: 34%; color: var(--px-ink-2); font-weight: 700; font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 600px) { body .host_card { padding: 22px 18px 20px; } body .host_row { display: block; } body td.host_cal_cell { height: 54px; padding: 3px; } body .host_cal_taken strong { display: block; } /* Narrower cells, so a narrower panel: 180 px from the fourth column still lands inside a 390 px viewport, and the page never scrolls sideways. */ body .host_cal_panel { width: 180px; } } @media (prefers-reduced-motion: reduce) { body .host_button { transition: none; } } /* 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; } } /* ------------------------------------------------------------------------- 17. Public navigation and the landing page ------------------------------------------------------------------------- The four pages a stranger can reach -- / (contest_list.html), /schedule, /host and /host/ -- share one bar, and the per-contest login page carries the same four links as a footer line. None of them is inside the contest chrome, so none of them can use the Bootstrap navbar; this is a plain flex row that needs no JavaScript and no fixed positioning (the theme buttons float over the top-right corner on these pages, which is why the bar leaves room for them). Every colour is a token. A literal cannot follow the dark palette swap (PLATFORM.md §11). ---------------------------------------------------------------------- */ .cws-topnav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; max-width: 980px; margin: 0 auto; /* Right padding clears the floating theme switcher on wide screens. */ padding: 16px 190px 14px 16px; box-sizing: border-box; } body a.cws-topnav-brand { font-size: 20px; /* Silkscreen is illegible below 20px */ color: var(--px-green); -webkit-font-smoothing: none; margin-right: auto; text-decoration: none; } body a.cws-topnav-brand:hover, body a.cws-topnav-brand:focus-visible { color: var(--px-green-2); } .cws-topnav-links { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; } .cws-topnav-links > li { margin: 0; } body .cws-topnav-link { display: inline-block; font-family: var(--px-font-mono); font-size: var(--px-text-sm); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; border: 1px solid transparent; color: var(--px-ink-2); text-decoration: none; } body a.cws-topnav-link:hover, body a.cws-topnav-link:focus-visible { color: var(--px-ink); background: var(--px-green-soft); border-color: var(--px-ink); text-decoration: none; } body .cws-topnav-here { color: var(--px-ink); border-color: var(--px-ink); background: var(--px-paper-2); box-shadow: var(--px-shadow-sm); } /* Admin is an organiser door, not an invitation: it reads as secondary whether or not it is a link, and as plain text when unconfigured. */ body .cws-topnav-admin { color: var(--cws-meta); } body .cws-topnav-off { cursor: default; } /* The same links as one line at the foot of the per-contest login page. */ .cws-footnav { margin: 18px 0 0; font-size: var(--px-text-sm); color: var(--cws-meta); text-align: center; } .cws-footnav-sep { margin: 0 6px; color: var(--px-grid); } /* --- the landing itself --- */ .cws-landing { max-width: 980px; margin: 0 auto; padding: 8px 16px 64px; box-sizing: border-box; } .cws-landing-head { border-top: 2px solid var(--px-ink); padding: 22px 0 26px; } .cws-landing-title { font-size: clamp(28px, 6vw, 52px); margin: 0 0 14px; -webkit-font-smoothing: none; } .cws-landing-lead { max-width: 62ch; margin: 0; color: var(--px-ink-2); line-height: var(--px-leading); } .cws-landing-section { margin: 0 0 34px; } .cws-landing-section-title { margin: 0 0 12px; color: var(--px-ink-2); } .cws-landing-empty { border: var(--cws-rule); background: var(--px-paper-2); color: var(--cws-meta); padding: 16px; margin: 0; } /* One card per row: name, then what it is, then the path it lives at. The path is shown because these URLs get typed and dictated, not only clicked. */ .cws-cardlist { list-style: none; margin: 0; padding: 0; border: var(--cws-rule); background: var(--px-paper); } .cws-cardlist-item { margin: 0; border-bottom: var(--cws-rule-soft); } .cws-cardlist-item:last-child { border-bottom: 0; } body .cws-cardlist-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 14px 16px; color: var(--px-ink); font-family: var(--px-font-mono); text-decoration: none; } body a.cws-cardlist-link:hover, body a.cws-cardlist-link:focus-visible { background: var(--px-green-soft); text-decoration: none; } .cws-cardlist-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; } .cws-cardlist-path { grid-column: 2; grid-row: 1 / span 2; color: var(--cws-meta); font-size: var(--px-text-sm); overflow-wrap: anywhere; text-align: right; } .cws-cardlist-meta { grid-column: 1; color: var(--px-ink-2); font-size: var(--px-text-sm); line-height: 1.5; } .cws-cardlist-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: var(--cws-rule-soft); background: var(--px-paper-2); color: var(--cws-meta); text-transform: uppercase; letter-spacing: 0.06em; } /* A finished contest stays listed and stays reachable -- analysis mode and a contestant's own submissions live behind it -- it just stops competing for attention. */ .cws-cardlist-past { background: var(--px-paper-2); } .cws-cardlist-past .cws-cardlist-name { color: var(--px-ink-2); } /* The unconfigured Admin row: not a link, so it must not look like one. */ body .cws-cardlist-off { cursor: default; color: var(--cws-meta); } body .cws-cardlist-off .cws-cardlist-name { color: var(--cws-meta); } @media (max-width: 700px) { body .cws-topnav { padding: 14px 16px 10px; } body .cws-cardlist-link { grid-template-columns: minmax(0, 1fr); } body .cws-cardlist-path { grid-column: 1; grid-row: auto; text-align: left; } } /* ------------------------------------------------------------------------- Forced colours (Windows High Contrast) ------------------------------------------------------------------------- The focus styles above are `outline: none` + box-shadow. Forced-colors mode drops box-shadows entirely, so the ring would disappear and keyboard users would have no focus indicator at all. Give them a real outline instead. ---------------------------------------------------------------------- */ @media (forced-colors: active) { body a:focus-visible, body button:focus-visible, body .btn:focus-visible, body .gate_button:focus-visible, body .host_button:focus-visible, body .cws-topnav-link:focus-visible, body .cws-cardlist-link:focus-visible, body .host_cal_summary:focus-visible, body textarea:focus, body select:focus, body input:focus, body .uneditable-input:focus, body [tabindex]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } /* Forced colours repaint every background as Canvas, which would empty the day-load bar. The hours next to it still say what it said, but a bar that is always empty is worse than no bar, so opt these two out and paint them in system colours. */ .host_cal_load_track { border-color: CanvasText; } .host_cal_load_approved { forced-color-adjust: none; background: Highlight; } .host_cal_load_pending { forced-color-adjust: none; background: repeating-linear-gradient( 45deg, Highlight 0, Highlight 2px, Canvas 2px, Canvas 5px); } }