/* =========================================================================
RankingWebServer — pixel theme
-------------------------------------------------------------------------
Depends on pixel/pixel-tokens.css, which MUST be linked before this file
(see Ranking.html). That file is a copy of
cms/server/static/pixel/pixel-tokens.css and is kept in sync by hand.
Look: warm off-white paper with a faint dotted grid, small grey monospace
labels, chunky pixel display type for the title only, monospace body,
square 1px ink-bordered controls with a hard offset shadow. No gradients,
no rounded corners, flat semantic colours.
The board is projected on a wall, so: large mono numbers, 1px ink row
separators, zebra rows and flat score tints that never hide the number.
========================================================================= */
:root {
/* Chrome of the app. */
--rk-topbar: 56px;
--rk-side: 232px;
/* Score ramp for the partial bands: a flat step from the paper colour up
to --px-amber-soft, so ordering is still legible while the three
semantic states stay red / amber / green. Hand-computed because the
stops must be flat colours, not a gradient. */
--rk-p-00: #f4f1e8;
--rk-p-10: #f4f1e5;
--rk-p-20: #f4f0e1;
--rk-p-30: #f4efde;
--rk-p-40: #f3eeda;
--rk-p-50: #f3edd7;
--rk-p-60: #f3ecd3;
--rk-p-70: #f3ebd0;
--rk-p-80: #f3eacc;
--rk-p-90: var(--px-amber-soft);
/* The eight user-selection colours. Flat, dark enough for white text.
Overview.js duplicates these values for the raphael markers — keep the
two lists in sync. */
--rk-sel-1: #234a7a; --rk-sel-1-d: #16304f; /* blue */
--rk-sel-2: #8f6300; --rk-sel-2-d: #5e4100; /* amber */
--rk-sel-3: #a8321f; --rk-sel-3-d: #6f2115; /* red */
--rk-sel-4: #1f5e3a; --rk-sel-4-d: #143d26; /* green */
--rk-sel-5: #8a4a12; --rk-sel-5-d: #5a3009; /* rust */
--rk-sel-6: #5b3a6e; --rk-sel-6-d: #3c2649; /* plum */
--rk-sel-7: #46463f; --rk-sel-7-d: #2e2e29; /* slate */
--rk-sel-8: #14595c; --rk-sel-8-d: #0d3a3c; /* teal */
}
/******************************************************************************\
| |
| Base |
| ---- |
\******************************************************************************/
body {
font: 400 15px/1.5 var(--px-font-mono);
color: var(--px-ink);
margin: 0;
/* .px-paper (on ) paints the warm ground and the dotted grid. */
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
td {
padding: 0;
}
a {
outline: none;
color: var(--px-green);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
a:hover {
color: var(--px-green-2);
}
abbr {
text-decoration: none;
border: 0;
}
::selection {
background: var(--px-green);
color: var(--px-paper);
}
/* Every focusable thing gets the same square focus ring. */
:focus-visible {
outline: none;
box-shadow: var(--px-focus);
}
/******************************************************************************\
| |
| Page layout |
| ----------- |
\******************************************************************************/
#LogoPanel {
position: absolute;
top: calc(var(--rk-topbar) + 20px);
left: 16px;
width: 200px;
height: 88px;
text-align: center;
}
#LogoPanel img {
width: 152px;
max-height: 88px;
object-fit: contain;
margin-left: 0;
}
#UpperPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--rk-topbar);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border: 0;
border-bottom: 1px solid var(--px-ink);
border-radius: 0;
background-color: var(--px-paper-2);
box-shadow: none;
z-index: 100;
}
#SidePanel {
position: absolute;
left: 0;
top: 256px;
bottom: 16px;
width: var(--rk-side);
box-sizing: border-box;
display: flex;
flex-direction: column;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: var(--px-ink);
border-radius: 0;
background-color: var(--px-paper-2);
box-shadow: var(--px-shadow);
z-index: 8;
padding: 0;
}
#InnerFrame {
position: absolute;
top: var(--rk-topbar);
left: var(--rk-side);
right: 0;
bottom: 0;
margin: 0;
padding: 0 32px;
overflow-y: scroll;
}
/******************************************************************************\
| |
| Top bar: title & status |
| ----------------------- |
\******************************************************************************/
/* The one place Silkscreen is allowed at display size. */
#BrandTitle {
font-size: 22px;
letter-spacing: 0.02em;
color: var(--px-ink);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex: 0 0 auto;
}
#BrandTitle.px-cursor::after {
height: 0.2em;
vertical-align: 0.02em;
}
/* Style for the network status indicator */
#ConnectionStatus_box {
display: inline-block;
position: relative;
float: none;
margin: 0;
text-align: right;
z-index: 2;
flex: 0 0 auto;
}
#ConnectionStatus_label {
display: inline-block;
position: relative;
height: auto;
padding: 5px 14px;
z-index: 2;
font-family: var(--px-font-mono);
font-size: var(--px-text-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-radius: 0;
box-shadow: var(--px-shadow-sm);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#ConnectionStatus_box:hover #ConnectionStatus_label {
border-bottom-width: 1px;
border-radius: 0;
}
#ConnectionStatus_text {
display: none;
position: absolute;
top: calc(100% + 4px);
right: 0;
width: 260px;
padding: 10px 12px;
margin-top: 0;
z-index: 1;
text-align: left;
font-size: var(--px-text-sm);
line-height: var(--px-leading);
border-width: 1px;
border-style: solid;
border-radius: 0;
box-shadow: var(--px-shadow);
}
#ConnectionStatus_box:hover #ConnectionStatus_text,
#ConnectionStatus_text:hover {
display: block;
}
#ConnectionStatus_box[data-status="connected"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="connected"] #ConnectionStatus_text {
background-color: var(--px-green-soft);
color: var(--px-green);
border-color: var(--px-ink);
}
#ConnectionStatus_box[data-status="reconnecting"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="reconnecting"] #ConnectionStatus_text {
background-color: var(--px-amber-soft);
color: var(--px-amber);
border-color: var(--px-ink);
}
#ConnectionStatus_box[data-status="disconnected"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="disconnected"] #ConnectionStatus_text,
#ConnectionStatus_box[data-status="outdated"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="outdated"] #ConnectionStatus_text,
#ConnectionStatus_box[data-status="init_error"] #ConnectionStatus_label,
#ConnectionStatus_box[data-status="init_error"] #ConnectionStatus_text {
background-color: var(--px-red);
color: #fff;
border-color: var(--px-ink);
}
#ConnectionStatus_box a {
cursor: pointer;
color: inherit;
border-bottom: 1px solid currentColor;
}
/******************************************************************************\
| |
| Time View |
| --------- |
\******************************************************************************/
#TimeView {
position: absolute;
top: 176px;
left: 0;
width: var(--rk-side);
box-sizing: border-box;
padding: 0 16px;
z-index: 10;
text-align: center;
}
/* The contest name is a small grey mono label, not a display heading. */
#TimeView_name {
font-family: var(--px-font-mono);
font-size: var(--px-text-sm);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--px-ink-3);
margin-bottom: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#TimeView_selector {
display: inline-block;
box-sizing: border-box;
height: 40px;
padding: 0;
z-index: 10;
margin: 0;
overflow: hidden;
background-color: var(--px-paper);
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: var(--px-shadow-sm);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* #TimeView:not(.post_cont) #TimeView_selector:hover */
#TimeView.pre_cont #TimeView_selector:hover,
#TimeView.cont #TimeView_selector:hover,
#TimeView_selector.open {
margin: 0;
background-color: var(--px-paper);
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: var(--px-shadow);
}
#TimeView_selector.open {
height: auto;
}
#TimeView_time {
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 38px;
font-family: var(--px-font-mono);
font-size: 26px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--px-ink);
margin: 0 4px 0 14px;
}
#TimeView_expand {
display: inline-block;
position: relative;
width: 8px;
height: 38px;
vertical-align: top;
cursor: pointer;
margin: 0 10px 0 2px;
}
#TimeView_selector .caret {
position: absolute;
top: 17px;
width: 0;
height: 0;
vertical-align: middle;
border-top: 6px solid var(--px-ink-3);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 0;
}
#TimeView_selector:hover .caret {
border-top-color: var(--px-ink);
}
#TimeView_selector.open .caret {
top: 15px;
border-top: 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 6px solid var(--px-ink);
}
#TimeView.post_cont #TimeView_time {
margin-right: 14px;
}
#TimeView.post_cont #TimeView_expand {
display: none;
}
#TimeView_selector_elapsed,
#TimeView_selector_remaining,
#TimeView_selector_current {
padding: 7px 14px;
font-family: var(--px-font-mono);
font-size: var(--px-text-sm);
line-height: 1.2;
text-align: left;
letter-spacing: 0.04em;
color: var(--px-ink-3);
border-top: 1px solid var(--px-grid);
cursor: pointer;
}
#TimeView.pre_cont #TimeView_selector_elapsed,
#TimeView.post_cont #TimeView_selector_elapsed,
#TimeView.post_cont #TimeView_selector_remaining {
display: none;
}
#TimeView.elapsed #TimeView_selector_elapsed,
#TimeView.remaining #TimeView_selector_remaining,
#TimeView.current #TimeView_selector_current {
background-color: var(--px-green-soft);
color: var(--px-green);
font-weight: 500;
}
#TimeView_selector_elapsed:hover,
#TimeView_selector_remaining:hover,
#TimeView_selector_current:hover {
background-color: var(--px-paper-3) !important;
color: var(--px-ink);
}
/* The time selector is 40px tall whether or not it can be expanded, so the
panel below it sits at one height in every contest state. */
#TimeView + #SidePanel,
#TimeView.pre_cont + #SidePanel,
#TimeView.cont + #SidePanel {
top: 256px;
}
/******************************************************************************\
| |
| Right panel |
| ----------- |
\******************************************************************************/
#Overview {
position: relative;
flex: 1 1 auto;
height: auto;
min-height: 0;
width: 100%;
}
#PoweredBy {
flex: 0 0 auto;
text-align: center;
padding: 8px 4px 10px;
border-top: 1px solid var(--px-grid);
}
#PoweredBy a {
color: var(--px-green);
}
/******************************************************************************\
| |
| Team search |
| ----------- |
\******************************************************************************/
#TeamSearch_input {
position: absolute;
box-sizing: border-box;
top: 11px;
left: 260px;
width: 240px;
height: 34px;
margin: 0;
padding: 6px 10px;
z-index: 401;
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: var(--px-shadow-sm);
font-family: var(--px-font-mono);
font-size: var(--px-text);
color: var(--px-ink);
background-color: var(--px-paper);
outline: 0;
-webkit-appearance: none;
appearance: none;
}
#TeamSearch_input::placeholder {
color: var(--px-ink-3);
}
#TeamSearch_input:focus {
box-shadow: var(--px-shadow-sm), var(--px-focus);
}
.teams-hidden #TeamSearch_input {
display: none;
}
#TeamSearch_bg {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 400;
background-color: rgba(20,20,20,0.62);
}
#TeamSearch_bg.open {
display: block;
}
#TeamSearch {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 940px;
margin: 72px auto 56px;
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: 6px 6px 0 var(--px-ink);
background-color: var(--px-paper);
background-image: radial-gradient(var(--px-grid) 1px, transparent 1.4px);
background-size: var(--px-grid-size) var(--px-grid-size);
background-position: 12px 12px;
}
#TeamSearch_close {
position: absolute;
top: -13px;
right: -13px;
width: 26px;
height: 26px;
cursor: pointer;
background: var(--px-paper);
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow-sm);
padding: 3px;
box-sizing: border-box;
image-rendering: pixelated;
}
#TeamSearch_close:hover {
background: var(--px-paper-3);
}
#TeamSearch_body {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
overflow-y: auto;
}
#TeamSearch_body div.item {
float: left;
box-sizing: border-box;
width: 25%;
height: 44px;
padding: 0;
margin: 0;
border: 0 solid transparent;
border-width: 5px 6px;
background-color: transparent;
background-clip: padding-box;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#TeamSearch_body div.item.hidden {
display: none;
}
#TeamSearch_body div.item label {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 8px 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--px-font-mono);
font-size: var(--px-text);
color: var(--px-ink);
background-color: var(--px-paper-2);
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow-sm);
cursor: pointer;
}
#TeamSearch_body div.item label:hover {
background-color: var(--px-paper-3);
}
#TeamSearch_body div.item input {
margin: 0 6px 0 0;
vertical-align: middle;
accent-color: var(--px-green);
}
#TeamSearch_body div.item img {
display: inline-block;
max-height: 18px;
max-width: 30px;
vertical-align: middle;
margin: 0 4px 0 0;
border: 1px solid var(--px-grid);
}
/******************************************************************************\
| |
| Scoreboard |
| ---------- |
\******************************************************************************/
#Scoreboard {
width: 100%;
table-layout: fixed;
margin: 24px 0 32px;
border-collapse: collapse;
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow);
background-color: var(--px-paper);
}
#Scoreboard_cols col.sel {
width: 2.4em;
}
#Scoreboard_cols col.rank {
width: 56px;
}
#Scoreboard_cols col.user_id {
width: 78px;
}
#Scoreboard_cols col.team {
/* Minimum width that contains a flag, with symmetric padding. */
width: 62px;
}
/* Scoreboard.js always emits a , but it only emits the
matching | / | when PublicConfig.show_id_column is on. With the column
hidden the cells therefore cover one column fewer than the colgroup
declares, and the surplus column shows up as an empty strip inside the
table's right border. Collapse it — but only when the ID cells really are
absent, so the column still gets its width when the ID column is shown.
Browsers without :has() simply keep the (harmless) empty strip. */
#Scoreboard:not(:has(#Scoreboard_body td.user_id)) #Scoreboard_cols col:last-child {
width: 0;
}
.teams-hidden #Scoreboard .team {
display: none;
}
#Scoreboard_head tr {
height: 42px;
}
#Scoreboard_body tr {
height: 44px;
}
#Scoreboard_head tr th {
position: sticky;
top: 0;
z-index: 5;
background-color: var(--px-paper-2);
border: 0;
border-radius: 0;
/* Drawn with box-shadow, not border: collapsed borders do not stick. */
box-shadow: inset -1px 0 0 var(--px-ink), inset 0 -1px 0 var(--px-ink);
height: 42px;
padding: 0 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--px-font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--px-ink-2);
}
#Scoreboard_head tr th.score {
color: var(--px-ink);
}
#Scoreboard_head tr th:last-child {
box-shadow: inset 0 -1px 0 var(--px-ink);
}
#Scoreboard_body tr td.team {
vertical-align: middle;
}
#Scoreboard_body tr td.team img {
display: block;
max-width: 40px;
max-height: 20px;
margin: 0 auto;
border: 1px solid var(--px-grid);
}
#Scoreboard_head tr th,
#Scoreboard_body tr td {
text-align: center;
}
/* Zebra rows, so a long board still tracks across a projected wall. */
#Scoreboard_body tr.user {
background-color: var(--px-paper);
}
#Scoreboard_body tr.user:nth-child(even) {
background-color: var(--px-paper-2);
}
#Scoreboard_body tr td {
border-bottom: 1px solid var(--px-ink);
font-family: var(--px-font-mono);
font-size: 18px;
font-variant-numeric: tabular-nums;
}
#Scoreboard_body tr:last-child td {
border-bottom: 0;
}
#Scoreboard_body tr td.rank {
font-size: 19px;
font-weight: 700;
color: var(--px-ink);
}
#Scoreboard_body tr td.user_id,
#Scoreboard_body tr td.f_name,
#Scoreboard_body tr td.l_name {
text-align: left;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#Scoreboard_body tr td.user_id {
color: var(--px-ink-3);
font-size: var(--px-text-sm);
}
#Scoreboard_head tr th.sel {
background-image: url('img/tick_black.png');
background-repeat: no-repeat;
background-position: center;
image-rendering: pixelated;
}
#Scoreboard_head tr th.score {
cursor: pointer;
}
#Scoreboard_head tr th.score:hover {
background-color: var(--px-paper-3);
color: var(--px-ink);
}
#Scoreboard_body tr:hover td.user_id,
#Scoreboard_body tr:hover td.f_name,
#Scoreboard_body tr:hover td.l_name,
#Scoreboard_body tr:hover td.team,
#Scoreboard_body tr:hover td.rank {
background-color: var(--px-paper-3);
border-radius: 0;
}
#Scoreboard_body tr.selected td.user_id,
#Scoreboard_body tr.selected td.f_name,
#Scoreboard_body tr.selected td.l_name {
font-weight: 700;
}
#Scoreboard_body tr.selected td.rank {
box-shadow: inset 4px 0 0 var(--px-ink);
}
/* What follows is the CSS needed to manage the "checkboxes" in the Scoreboard,
used to select users. We're simulating checkboxes using table cells, so we
have to define their appearence in "normal" status as well as during user
interaction. We did this so we can be more flexible on the style: we need
to be able to set the background color of the checkbox and to make them a
little bigger so that the color can be seen better.
The eight colours are the flat --rk-sel-* palette declared at the top of
this file. Overview.js repeats the same values for the raphael markers.
*/
#Scoreboard_body tr td.sel {
background: url('img/tick_black.png') no-repeat center transparent;
image-rendering: pixelated;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
#Scoreboard_body tr td.sel:hover {
opacity: 0.35;
}
#Scoreboard_body tr td.sel:active {
opacity: 0.6;
}
#Scoreboard_body tr.selected td.sel {
background: url('img/tick_white.png') no-repeat center transparent;
border: 1px solid var(--px-ink);
border-radius: 0;
opacity: 1;
}
/* Colour 1: Blue */
#Scoreboard_body tr.color1 td.sel { background-color: var(--rk-sel-1); }
#Scoreboard_body tr.color1 td.sel:hover,
#Scoreboard_body tr.color1 td.sel:active { background-color: var(--rk-sel-1-d); }
/* Colour 2: Amber */
#Scoreboard_body tr.color2 td.sel { background-color: var(--rk-sel-2); }
#Scoreboard_body tr.color2 td.sel:hover,
#Scoreboard_body tr.color2 td.sel:active { background-color: var(--rk-sel-2-d); }
/* Colour 3: Red */
#Scoreboard_body tr.color3 td.sel { background-color: var(--rk-sel-3); }
#Scoreboard_body tr.color3 td.sel:hover,
#Scoreboard_body tr.color3 td.sel:active { background-color: var(--rk-sel-3-d); }
/* Colour 4: Green */
#Scoreboard_body tr.color4 td.sel { background-color: var(--rk-sel-4); }
#Scoreboard_body tr.color4 td.sel:hover,
#Scoreboard_body tr.color4 td.sel:active { background-color: var(--rk-sel-4-d); }
/* Colour 5: Rust */
#Scoreboard_body tr.color5 td.sel { background-color: var(--rk-sel-5); }
#Scoreboard_body tr.color5 td.sel:hover,
#Scoreboard_body tr.color5 td.sel:active { background-color: var(--rk-sel-5-d); }
/* Colour 6: Plum */
#Scoreboard_body tr.color6 td.sel { background-color: var(--rk-sel-6); }
#Scoreboard_body tr.color6 td.sel:hover,
#Scoreboard_body tr.color6 td.sel:active { background-color: var(--rk-sel-6-d); }
/* Colour 7: Slate */
#Scoreboard_body tr.color7 td.sel { background-color: var(--rk-sel-7); }
#Scoreboard_body tr.color7 td.sel:hover,
#Scoreboard_body tr.color7 td.sel:active { background-color: var(--rk-sel-7-d); }
/* Colour 8: Teal */
#Scoreboard_body tr.color8 td.sel { background-color: var(--rk-sel-8); }
#Scoreboard_body tr.color8 td.sel:hover,
#Scoreboard_body tr.color8 td.sel:active { background-color: var(--rk-sel-8-d); }
/* A rank that just moved flashes flat green (up) or flat red (down). Two
durations: longer for rows the operator has explicitly selected. */
#Scoreboard_body tr.score_up td.rank,
#Scoreboard_body tr.score_down td.rank {
border-radius: 0;
animation-duration: 5s;
animation-timing-function: steps(8, end);
}
#Scoreboard_body tr.score_up td.rank { animation-name: score_up; }
#Scoreboard_body tr.score_down td.rank { animation-name: score_down; }
#Scoreboard_body tr.selected.score_up td.rank,
#Scoreboard_body tr.selected.score_down td.rank {
animation-duration: 10s;
}
#Scoreboard_body tr.selected.score_up td.rank { animation-name: selected_score_up; }
#Scoreboard_body tr.selected.score_down td.rank { animation-name: selected_score_down; }
@keyframes score_up {
from { background-color: rgba(31,94,58,0); }
10% { background-color: rgba(31,94,58,0.55); }
to { background-color: rgba(31,94,58,0); }
}
@keyframes score_down {
from { background-color: rgba(168,50,31,0); }
10% { background-color: rgba(168,50,31,0.55); }
to { background-color: rgba(168,50,31,0); }
}
@keyframes selected_score_up {
from { background-color: rgba(31,94,58,0); }
5% { background-color: rgba(31,94,58,1); }
to { background-color: rgba(31,94,58,0); }
}
@keyframes selected_score_down {
from { background-color: rgba(168,50,31,0); }
5% { background-color: rgba(168,50,31,1); }
to { background-color: rgba(168,50,31,0); }
}
@media (prefers-reduced-motion: reduce) {
#Scoreboard_body tr.score_up td.rank,
#Scoreboard_body tr.score_down td.rank {
animation: none;
}
}
/* ---- Score cells ------------------------------------------------------- */
#Scoreboard_body tr td.score {
opacity: 1;
border-radius: 0;
border-left: 1px solid var(--px-ink);
font-size: 21px;
font-weight: 500;
letter-spacing: 0.02em;
}
#Scoreboard_body tr td.score.contest,
#Scoreboard_body tr td.score.global {
font-weight: 700;
}
#Scoreboard_body tr td.score.sort_key {
box-shadow: inset 0 0 0 2px var(--px-ink);
}
/* The tint says which of the three states the score is in; the number is
always shown, and the partial band steps from paper up to amber. */
.score_0 {
background-color: var(--px-score-0-bg);
color: var(--px-score-0);
}
.score_0_10 { background-color: var(--rk-p-00); color: var(--px-score-p); }
.score_10_20 { background-color: var(--rk-p-10); color: var(--px-score-p); }
.score_20_30 { background-color: var(--rk-p-20); color: var(--px-score-p); }
.score_30_40 { background-color: var(--rk-p-30); color: var(--px-score-p); }
.score_40_50 { background-color: var(--rk-p-40); color: var(--px-score-p); }
.score_50_60 { background-color: var(--rk-p-50); color: var(--px-score-p); }
.score_60_70 { background-color: var(--rk-p-60); color: var(--px-score-p); }
.score_70_80 { background-color: var(--rk-p-70); color: var(--px-score-p); }
.score_80_90 { background-color: var(--rk-p-80); color: var(--px-score-p); }
.score_90_100 { background-color: var(--rk-p-90); color: var(--px-score-p); }
.score_100 {
background-color: var(--px-score-100-bg);
color: var(--px-score-100);
font-weight: 700;
}
/******************************************************************************\
| |
| User panel |
| ---------- |
\******************************************************************************/
#UserDetail_bg {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
background-color: rgba(20,20,20,0.62);
overflow-y: scroll;
}
#UserDetail_bg.open {
display: block;
}
#UserDetail {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 920px;
margin: 56px auto;
padding: 24px;
border: 1px solid var(--px-ink);
border-radius: 0;
box-shadow: 6px 6px 0 var(--px-ink);
background-color: var(--px-paper);
background-image: radial-gradient(var(--px-grid) 1px, transparent 1.4px);
background-size: var(--px-grid-size) var(--px-grid-size);
background-position: 12px 12px;
}
#UserDetail_close {
position: absolute;
top: -13px;
right: -13px;
width: 26px;
height: 26px;
cursor: pointer;
background: var(--px-paper);
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow-sm);
padding: 3px;
box-sizing: border-box;
image-rendering: pixelated;
}
#UserDetail_close:hover {
background: var(--px-paper-3);
}
#UserDetail_header {
position: relative;
min-height: 242px;
}
#UserDetail_summary {
display: flex;
flex-direction: column;
font-family: var(--px-font-mono);
font-size: var(--px-text);
line-height: var(--px-leading);
text-align: center;
}
/* The contestant's name is a display heading, so Silkscreen is allowed. */
#UserDetail_f_name,
#UserDetail_l_name {
font-family: var(--px-font-display);
font-weight: 700;
font-size: 24px;
line-height: 1.35;
letter-spacing: 0.01em;
color: var(--px-ink);
-webkit-font-smoothing: none;
text-rendering: optimizeSpeed;
}
#UserDetail_team {
font-family: var(--px-font-mono);
font-size: var(--px-text-sm);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--px-ink-3);
margin-bottom: 6px;
}
#UserDetail_spacer {
flex-grow: 1;
min-height: 24px;
}
#UserDetail_flag {
max-width: 144px;
max-height: 96px;
object-fit: contain;
align-self: center;
border: 1px solid var(--px-ink);
background: var(--px-paper-2);
}
#UserDetail_face {
max-width: 160px;
max-height: 240px;
object-fit: contain;
align-self: center;
margin-top: 14px;
border: 1px solid var(--px-ink);
background: var(--px-paper-2);
}
#UserDetail_flag.hidden {
display: none;
}
#UserDetail_navigator {
width: 450px;
}
#UserDetail_navigator table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--px-ink);
background: var(--px-paper);
}
#UserDetail_navigator tr {
height: 30px;
}
#UserDetail_navigator thead td {
font-family: var(--px-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--px-ink-2);
background: var(--px-paper-2);
border-bottom: 1px solid var(--px-ink);
padding: 0 6px;
}
#UserDetail_navigator col.name {
width: 56%;
}
#UserDetail_navigator col.score,
#UserDetail_navigator col.rank {
width: 13%;
}
#UserDetail_navigator col.show {
width: 18%;
}
#UserDetail_navigator tbody td {
font-family: var(--px-font-mono);
font-size: var(--px-text);
border-bottom: 1px solid var(--px-grid);
}
#UserDetail_navigator tr td.score,
#UserDetail_navigator tr td.rank {
padding-left: 6px;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
#UserDetail_navigator tbody tr td.btn {
text-align: center;
border: 1px solid var(--px-ink);
box-shadow: var(--px-shadow-sm);
background-color: var(--px-paper);
border-radius: 0;
cursor: pointer;
font-size: var(--px-text-sm);
font-weight: 500;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#UserDetail_navigator tbody tr td.btn a {
color: inherit;
border-bottom: 0;
cursor: inherit;
}
#UserDetail_navigator tbody tr td.btn:hover {
background-color: var(--px-paper-2);
}
#UserDetail_navigator tbody tr td.btn:active {
background-color: var(--px-paper-3);
box-shadow: none;
}
#UserDetail_navigator tbody tr.active td.btn {
background-color: var(--px-paper-2);
color: var(--px-ink-3);
box-shadow: none;
opacity: 1;
cursor: default;
}
#UserDetail_navigator tr.global {
background-color: var(--px-paper-3);
font-weight: 700;
}
#UserDetail_navigator tr.contest {
background-color: var(--px-paper-2);
}
#UserDetail_navigator tr.task {
background-color: var(--px-paper);
}
#UserDetail_navigator tr.global td.name {
padding-left: 8px;
}
#UserDetail_navigator tr.contest td.name {
padding-left: 24px;
}
#UserDetail_navigator tr.task td.name {
padding-left: 44px;
}
/* Section heading over the charts — display size, so Silkscreen. */
#UserDetail_title {
margin-top: 28px;
font-family: var(--px-font-display);
font-weight: 700;
font-size: 20px;
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--px-ink);
text-align: center;
-webkit-font-smoothing: none;
text-rendering: optimizeSpeed;
}
#UserDetail_charts {
margin-top: 20px;
width: 100%;
}
#UserDetail_charts canvas {
display: block;
width: 100%;
border: 1px solid var(--px-ink);
background: var(--px-paper);
margin-bottom: 12px;
}
#UserDetail_submissions {
margin-top: 24px;
width: 100%;
}
#UserDetail_submissions:empty {
margin-top: 0;
}
#UserDetail_submissions table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--px-ink);
background: var(--px-paper);
}
#UserDetail_submissions td {
height: 30px;
padding-left: 8px;
font-family: var(--px-font-mono);
font-size: var(--px-text);
font-variant-numeric: tabular-nums;
border-bottom: 1px solid var(--px-grid);
}
#UserDetail_submissions thead {
background-color: var(--px-paper-2);
}
#UserDetail_submissions thead td {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--px-ink-2);
border-bottom: 1px solid var(--px-ink);
}
#UserDetail_submissions tbody tr:nth-child(even) {
background-color: var(--px-paper-2);
}
#UserDetail_submissions tbody tr:nth-child(odd) {
background-color: var(--px-paper);
}
#UserDetail_submissions tbody td[colspan] {
text-align: center;
font-style: normal;
color: var(--px-ink-3);
}
|