Astra
ba61708bed
Busiest hours and the heatmap count the different players on T or CT in each hour, open segments included, instead of averaging player-hours, so one player for part of an hour is 1, not 0.38. Their descriptions end in the span covered (Last 30 days, or Since <date>). Side-by-side chart panels match heights, and Players per day notes its busiest day. Dropped the page descriptions on Bans, Gags & mutes, Staff and Playtime, and the Verified badges on the staff Overview scoreboard and drawer header; the Verification page and the drawer's Verification section still show it. The GroupVerify DB test now checks the staff drawer, since the public site says nothing about verification.
1226 lines
35 KiB
CSS
1226 lines
35 KiB
CSS
:root {
|
|
--bg: #14161b;
|
|
--surface: #1b1e25;
|
|
--raised: #242832;
|
|
--line: #2e333f;
|
|
--line-soft: #252a34;
|
|
--text: #e6e8ee;
|
|
--muted: #8a91a0;
|
|
--faint: #5d6472;
|
|
--accent: #fe113d;
|
|
--accent-soft: rgba(254, 17, 61, 0.14);
|
|
--accent-line: rgba(254, 17, 61, 0.45);
|
|
--amber: #f0a63a;
|
|
--amber-soft: rgba(240, 166, 58, 0.14);
|
|
--green: #37c58f;
|
|
--green-soft: rgba(55, 197, 143, 0.13);
|
|
|
|
--display: "Barlow Condensed", "Arial Narrow", sans-serif;
|
|
--body: "Barlow", system-ui, sans-serif;
|
|
|
|
--r-sm: 4px;
|
|
--r-md: 8px;
|
|
--r-lg: 12px;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* min-height, not height: a body exactly one screen tall would carry the sticky top bar away
|
|
once the page scrolls past it. */
|
|
html { height: 100%; }
|
|
body { margin: 0; min-height: 100%; }
|
|
/* While a player's drawer is open only the drawer scrolls (see common.js). */
|
|
html.drawer-open { overflow: hidden; }
|
|
html.drawer-open body { overflow: hidden; }
|
|
|
|
body {
|
|
/* The server header's 24px grid, across the whole page (fainter: the page is darker than a
|
|
panel), fixed so content scrolls over it. Panels are solid, so it shows between them. */
|
|
background:
|
|
repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.028) 23px 24px),
|
|
repeating-linear-gradient(90deg, transparent 0 23px, rgba(255, 255, 255, 0.028) 23px 24px),
|
|
var(--bg);
|
|
background-attachment: fixed;
|
|
color: var(--text);
|
|
font: 400 15px/1.5 var(--body);
|
|
font-variant-numeric: tabular-nums;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
button, input, select, textarea { font: inherit; color: inherit; }
|
|
|
|
a { color: inherit; }
|
|
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* ---------- Shell ---------- */
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: 232px 1fr;
|
|
min-height: 100vh;
|
|
background: linear-gradient(90deg, var(--surface) 231px, var(--line) 231px 232px, transparent 232px);
|
|
}
|
|
|
|
.app > div { min-width: 0; }
|
|
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 22px 14px 18px;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 30px;
|
|
height: 30px;
|
|
flex: none;
|
|
}
|
|
|
|
.brand-name {
|
|
font: 700 22px/1 var(--display);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.brand-name span { color: var(--accent); }
|
|
|
|
.server-pick {
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--bg);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.server-pick b { font-weight: 600; font-size: 14px; }
|
|
.server-pick small { color: var(--muted); font-size: 13px; }
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-right: 6px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 3px var(--green-soft);
|
|
vertical-align: 1px;
|
|
}
|
|
|
|
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
|
|
|
|
.nav a.link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px 8px 12px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font: 600 17px/1.2 var(--display);
|
|
letter-spacing: 0.01em;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.nav a.link:hover { color: var(--text); background: var(--raised); }
|
|
|
|
.nav a.link[aria-current="page"] {
|
|
color: var(--text);
|
|
background: var(--accent-soft);
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.nav .count {
|
|
font: 500 13px/1 var(--body);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav a.link[aria-current="page"] .count { color: var(--text); }
|
|
|
|
.me {
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 8px 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.me b { display: block; font-weight: 600; font-size: 14px; }
|
|
.me small { color: var(--muted); font-size: 13px; }
|
|
|
|
.avatar {
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--raised);
|
|
color: var(--muted);
|
|
font: 700 14px/1 var(--display);
|
|
}
|
|
|
|
.avatar.lg { width: 56px; height: 56px; font-size: 24px; }
|
|
.avatar { position: relative; overflow: hidden; }
|
|
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
/* ---------- Main ---------- */
|
|
|
|
main {
|
|
min-width: 0;
|
|
padding: 28px 36px 64px;
|
|
}
|
|
|
|
.page-head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font: 700 38px/1 var(--display);
|
|
letter-spacing: 0.005em;
|
|
}
|
|
|
|
.sub { margin: 6px 0 0; color: var(--muted); max-width: 64ch; }
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font: 600 21px/1.2 var(--display);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
h3 { margin: 0; font: 600 17px/1.2 var(--display); letter-spacing: 0.01em; }
|
|
|
|
.panel {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
}
|
|
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.panel-head p { margin: 0; color: var(--muted); font-size: 14px; }
|
|
|
|
.panel-body { padding: 18px; }
|
|
|
|
/* Collapsible panels: a folded one shows only its head. */
|
|
.fold-head { cursor: pointer; user-select: none; }
|
|
.fold-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.fold-toggle svg { width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s; }
|
|
.fold-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
.panel.folded > .fold-head { border-bottom: 0; }
|
|
.panel.folded > :not(.fold-head), .panel.folded .fold-open, .panel:not(.folded) .fold-shut { display: none; }
|
|
|
|
/* ---------- Controls ---------- */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--raised);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn:hover { border-color: var(--faint); }
|
|
|
|
.btn.primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.primary:hover { background: #e60a33; }
|
|
|
|
.btn.ghost { background: transparent; }
|
|
|
|
.btn.danger { color: var(--accent); border-color: var(--accent-line); background: transparent; }
|
|
.btn.danger:hover { background: var(--accent-soft); }
|
|
|
|
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
|
|
|
|
.btn svg { width: 16px; height: 16px; }
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
padding: 12px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.search {
|
|
flex: 1 1 260px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--bg);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
|
|
.search:focus-within { border-color: var(--accent-line); }
|
|
.search svg { width: 16px; height: 16px; flex: none; }
|
|
|
|
.segmented {
|
|
display: inline-flex;
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--bg);
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.segmented button {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background: none;
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
flex: none;
|
|
}
|
|
|
|
.segmented button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
|
|
|
|
.field { display: grid; gap: 6px; align-content: start; }
|
|
.field > span { font-size: 14px; font-weight: 500; }
|
|
.field small { color: var(--muted); font-size: 13px; }
|
|
|
|
.input, select.input, textarea.input {
|
|
width: 100%;
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--bg);
|
|
outline: none;
|
|
}
|
|
|
|
textarea.input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
|
|
|
|
.input:focus { border-color: var(--accent-line); }
|
|
|
|
.input[readonly] { color: var(--muted); }
|
|
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
|
|
.chip-btn {
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 15px;
|
|
background: var(--bg);
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chip-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
|
|
|
|
.switch {
|
|
position: relative;
|
|
flex: none;
|
|
width: 38px;
|
|
height: 22px;
|
|
border-radius: 11px;
|
|
border: 1px solid var(--line);
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.switch::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--faint);
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
|
|
.switch[aria-checked="true"]::after { background: #fff; transform: translateX(16px); }
|
|
|
|
/* ---------- Tables ---------- */
|
|
|
|
.table-wrap { position: relative; overflow-x: auto; }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
|
|
th {
|
|
padding: 10px 18px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
td {
|
|
padding: 12px 18px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
tbody tr:last-child td { border-bottom: 0; }
|
|
|
|
tbody tr.clickable { cursor: pointer; }
|
|
tbody tr.clickable:hover td { background: rgba(255, 255, 255, 0.02); }
|
|
|
|
td.num, th.num { text-align: right; white-space: nowrap; }
|
|
|
|
.who { display: flex; align-items: center; gap: 10px; min-width: 180px; }
|
|
.who b { display: block; font-weight: 600; }
|
|
.sid { color: var(--muted); font-size: 13px; letter-spacing: 0.01em; }
|
|
|
|
.muted { color: var(--muted); }
|
|
.faint { color: var(--faint); }
|
|
|
|
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
|
|
|
|
/* Status tags */
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 22px;
|
|
padding: 0 8px;
|
|
border-radius: 11px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
background: var(--raised);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.tag.red { background: var(--accent-soft); color: #ff5a78; }
|
|
.tag.amber { background: var(--amber-soft); color: var(--amber); }
|
|
.tag.green { background: var(--green-soft); color: var(--green); }
|
|
.tag.verified { background: rgba(79, 179, 217, .14); color: #4fb3d9; }
|
|
|
|
.rank {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rank i {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 2px;
|
|
transform: rotate(45deg);
|
|
background: var(--c, var(--faint));
|
|
}
|
|
|
|
/* ---------- The term bar: time served vs. remaining ---------- */
|
|
|
|
.term { min-width: 190px; }
|
|
|
|
.term-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.term-top b { font-weight: 600; }
|
|
|
|
.term-bar {
|
|
position: relative;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: var(--raised);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.term-bar > span {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
border-radius: 3px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.term.comm .term-bar > span { background: var(--amber); }
|
|
|
|
.term.perm .term-bar {
|
|
background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, #b30b2b 6px 12px);
|
|
}
|
|
|
|
.term.perm.comm .term-bar {
|
|
background: repeating-linear-gradient(-45deg, var(--amber) 0 6px, #b87a22 6px 12px);
|
|
}
|
|
|
|
.term.done .term-bar > span { background: var(--faint); }
|
|
|
|
.term.lifted .term-top b { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--muted); }
|
|
.term.lifted .term-bar > span { background: var(--faint); opacity: 0.5; }
|
|
|
|
/* ---------- Overview ---------- */
|
|
|
|
.live {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 24px;
|
|
align-items: end;
|
|
padding: 22px 24px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
background:
|
|
linear-gradient(90deg, var(--surface) 35%, rgba(27, 30, 37, 0.7)),
|
|
repeating-linear-gradient(0deg, transparent 0 23px, var(--line-soft) 23px 24px),
|
|
repeating-linear-gradient(90deg, transparent 0 23px, var(--line-soft) 23px 24px),
|
|
var(--surface);
|
|
}
|
|
|
|
.live-map {
|
|
font: 700 56px/0.9 var(--display);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.live-host { margin: 0 0 10px; color: var(--muted); }
|
|
|
|
.live-stats { display: flex; gap: 28px; }
|
|
.live-stats div { display: grid; gap: 2px; }
|
|
.live-stats b { font: 600 28px/1 var(--display); }
|
|
.live-stats small { color: var(--muted); font-size: 13px; }
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.stack { display: grid; gap: 20px; }
|
|
|
|
.team {
|
|
display: inline-block;
|
|
width: 26px;
|
|
font: 700 13px/1 var(--display);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.live-stats .score { font: inherit; width: auto; }
|
|
.team.t { color: #e3b353; }
|
|
.team.ct { color: #6fa3e8; }
|
|
|
|
.feed { list-style: none; margin: 0; padding: 6px 0; }
|
|
|
|
.feed li {
|
|
display: grid;
|
|
grid-template-columns: 10px 1fr;
|
|
gap: 12px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.feed li::before {
|
|
content: "";
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-top: 7px;
|
|
border-radius: 50%;
|
|
background: var(--c, var(--faint));
|
|
}
|
|
|
|
.feed p { margin: 0; font-size: 14px; }
|
|
.feed small { color: var(--muted); font-size: 13px; }
|
|
|
|
.expiring li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; font-size: 14px; }
|
|
.expiring { list-style: none; margin: 0; padding: 6px 0; }
|
|
|
|
/* ---------- Ranks ---------- */
|
|
|
|
.ranks-layout {
|
|
display: grid;
|
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.rank-form { display: grid; gap: 18px; }
|
|
|
|
.ladder { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
|
|
|
|
.ladder button {
|
|
display: grid;
|
|
grid-template-columns: 14px 1fr auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 0;
|
|
border-radius: var(--r-md);
|
|
background: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ladder button:hover { background: var(--raised); }
|
|
.ladder button[aria-current="true"] { background: var(--raised); box-shadow: inset 2px 0 0 var(--c); }
|
|
|
|
.ladder i {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
transform: rotate(45deg);
|
|
background: var(--c);
|
|
}
|
|
|
|
.ladder b { font: 600 17px/1.1 var(--display); letter-spacing: 0.01em; }
|
|
.ladder small { display: block; color: var(--muted); font-size: 13px; }
|
|
.ladder .imm { color: var(--muted); font-size: 13px; text-align: right; }
|
|
|
|
.ladder .sep {
|
|
margin: 8px 12px 4px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.flag-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.flag {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.flag input { margin: 3px 0 0; accent-color: var(--accent); }
|
|
.flag b { display: block; font-weight: 600; font-size: 14px; }
|
|
.flag small { color: var(--muted); font-size: 13px; }
|
|
.flag:has(input:checked) { border-color: var(--accent-line); }
|
|
.flag:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
|
|
|
|
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
|
|
|
|
/* ---------- Settings ---------- */
|
|
|
|
.settings { display: grid; gap: 20px; max-width: 900px; }
|
|
.rcon-form { display: flex; gap: 8px; }
|
|
.rcon-form .input { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }
|
|
|
|
.setting {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
|
|
gap: 24px;
|
|
align-items: center;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.setting:last-child { border-bottom: 0; }
|
|
.setting b { display: block; font-weight: 600; }
|
|
.setting p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
|
|
.setting .control { display: flex; justify-content: flex-end; }
|
|
.setting code { font: 13px ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--faint); }
|
|
.setting b .tag { margin-left: 6px; vertical-align: 1px; }
|
|
|
|
/* Notifications page. */
|
|
.quiet-times { display: flex; align-items: center; gap: 8px; }
|
|
.quiet-times .input { width: 136px; min-width: 0; }
|
|
|
|
.savebar {
|
|
position: sticky;
|
|
bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
max-width: 900px;
|
|
margin-top: 20px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--accent-line);
|
|
border-radius: var(--r-lg);
|
|
background: #1f1519;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.savebar[hidden] { display: none; }
|
|
|
|
/* ---------- Drawer & modal ---------- */
|
|
|
|
.scrim {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(5, 6, 9, 0.6);
|
|
z-index: 20;
|
|
}
|
|
|
|
.drawer {
|
|
overscroll-behavior: contain;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: min(520px, 100vw);
|
|
overflow-y: auto;
|
|
background: var(--surface);
|
|
border-left: 1px solid var(--line);
|
|
z-index: 21;
|
|
animation: slide 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
|
|
|
|
.drawer-head {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 22px 22px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.drawer-head h2 { font-size: 28px; }
|
|
|
|
.close {
|
|
margin-left: auto;
|
|
align-self: flex-start;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 0;
|
|
border-radius: var(--r-md);
|
|
background: none;
|
|
color: var(--muted);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close:hover { background: var(--raised); color: var(--text); }
|
|
|
|
.drawer section { padding: 18px 22px; border-bottom: 1px solid var(--line); }
|
|
.drawer section:last-child { border-bottom: 0; }
|
|
.drawer section > h3 { margin-bottom: 12px; }
|
|
|
|
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
|
|
.kv dt { color: var(--muted); }
|
|
.kv dd { margin: 0; word-break: break-all; }
|
|
|
|
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
.action-grid .btn { justify-content: center; }
|
|
|
|
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
|
|
.history li { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
|
|
.history .top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
|
|
|
|
dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
dialog::backdrop { background: rgba(5, 6, 9, 0.65); }
|
|
|
|
.modal-head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
|
|
.modal-head h2 { font-size: 24px; }
|
|
.modal-body { display: grid; gap: 16px; padding: 20px; }
|
|
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
|
|
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 24px;
|
|
transform: translateX(-50%);
|
|
padding: 10px 16px;
|
|
border-radius: var(--r-md);
|
|
background: var(--raised);
|
|
border: 1px solid var(--line);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
font-weight: 500;
|
|
z-index: 40;
|
|
animation: rise 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } }
|
|
|
|
.empty { padding: 40px 18px; text-align: center; color: var(--muted); }
|
|
|
|
.mobile-bar { display: none; }
|
|
.nav-close, .nav-backdrop { display: none; }
|
|
|
|
/* ---------- Responsive ---------- */
|
|
|
|
@media (max-width: 1100px) {
|
|
.grid-2, .ranks-layout { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.app { grid-template-columns: 1fr; background: none; }
|
|
.nav {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
width: 260px;
|
|
z-index: 30;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.nav.open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
|
|
.nav-close { display: inline-flex; align-self: flex-end; margin-bottom: -12px; }
|
|
.nav.open ~ .nav-backdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 29;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.mobile-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
padding: 10px 16px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
main { padding: 20px 16px 48px; }
|
|
h1 { font-size: 32px; }
|
|
.live { grid-template-columns: 1fr; padding: 18px; }
|
|
.live-map { font-size: 42px; }
|
|
.setting { grid-template-columns: 1fr; gap: 10px; }
|
|
.setting .control { justify-content: flex-start; }
|
|
/* A setting that's one switch: the switch goes first, level with the name, and the description
|
|
and cvar stay under the name. */
|
|
.setting:has(> .control > .switch:only-child) { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
|
|
.setting:has(> .control > .switch:only-child) > .control { order: -1; margin-top: 1px; }
|
|
/* A text box, number or dropdown reads as a form field: the name with the cvar on its right, the
|
|
box, then the description as a hint. Rows with buttons or status tags keep the plain stack. */
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-areas: "label key" "control control" "help help";
|
|
gap: 0;
|
|
align-items: baseline;
|
|
}
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) > div:first-child { display: contents; }
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) b { grid-area: label; }
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) code { grid-area: key; margin-left: 12px; font-size: 12px; }
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) > .control { grid-area: control; margin: 8px 0 6px; }
|
|
.setting:has(> .control > :is(input, select, .quiet-times)) p { grid-area: help; margin: 0; font-size: 13px; }
|
|
.quiet-times { flex: 1; }
|
|
.quiet-times .input { flex: 1; width: auto; }
|
|
.action-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.hide-sm { display: none; }
|
|
th, td { padding-left: 12px; padding-right: 12px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation: none !important; transition: none !important; }
|
|
}
|
|
|
|
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
|
|
/* ---------- Public (guest) pages ---------- */
|
|
|
|
.public-link {
|
|
padding: 0 12px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.public-link:hover { color: var(--text); }
|
|
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.topbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
height: 60px;
|
|
}
|
|
|
|
.topbar .brand { padding: 0; }
|
|
|
|
.tabs { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; height: 60px; }
|
|
|
|
.tabs a {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 12px;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font: 600 18px/1 var(--display);
|
|
letter-spacing: 0.01em;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
.tabs a:hover { color: var(--text); }
|
|
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
|
|
|
|
.signin { margin-left: auto; text-decoration: none; }
|
|
.show-xs { display: none; }
|
|
|
|
.public-main {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 32px 24px 40px;
|
|
}
|
|
|
|
.public-foot {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px 48px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.public-foot p { margin: 0; max-width: 70ch; }
|
|
|
|
.crew-panel { overflow: hidden; }
|
|
|
|
.crew-row {
|
|
display: grid;
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
gap: 24px;
|
|
padding: 18px 20px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
box-shadow: inset 3px 0 0 var(--c);
|
|
}
|
|
|
|
.crew-row:last-child { border-bottom: 0; }
|
|
.crew-row .rank { --c: inherit; }
|
|
.crew-rank p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
|
|
|
|
.crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-content: start; }
|
|
|
|
.crew a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 14px 6px 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
background: var(--bg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.crew a:hover { border-color: var(--faint); }
|
|
.crew b { display: block; font-weight: 600; font-size: 14px; line-height: 1.2; }
|
|
.crew small { color: var(--muted); font-size: 13px; }
|
|
|
|
.crew-sep { margin: 28px 0 12px; }
|
|
.rank-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
|
|
|
|
@media (max-width: 820px) {
|
|
.topbar-inner { gap: 12px; padding: 0 16px; }
|
|
.topbar .brand-name { display: none; }
|
|
.tabs a { padding: 0 8px; font-size: 16px; }
|
|
.public-main { padding: 20px 16px 32px; }
|
|
.public-foot { padding: 0 16px 32px; }
|
|
.crew-row { grid-template-columns: 1fr; gap: 12px; }
|
|
}
|
|
|
|
.live-join {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
padding-top: 18px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.live-join .btn { text-decoration: none; }
|
|
|
|
.sides {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.side { overflow: hidden; }
|
|
.side.ct { box-shadow: inset 0 3px 0 #6fa3e8; }
|
|
.side.t { box-shadow: inset 0 3px 0 #e3b353; }
|
|
.side-score { display: grid; justify-items: end; gap: 2px; }
|
|
.side-score b { font: 700 32px/1 var(--display); }
|
|
.side-score small { color: var(--muted); font-size: 13px; }
|
|
.side.ct .side-score b { color: #6fa3e8; }
|
|
.side.t .side-score b { color: #e3b353; }
|
|
.side-warmup { color: var(--muted); font: 600 17px/1 var(--display); letter-spacing: 0.01em; }
|
|
.side .who .rank { display: flex; margin-top: 2px; font-size: 13px; }
|
|
|
|
@media (max-width: 900px) {
|
|
.sides { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
|
|
.live-join small { font-size: 14px; }
|
|
.tabs a { white-space: nowrap; }
|
|
|
|
@media (max-width: 480px) {
|
|
.topbar-inner { gap: 8px; padding: 0 12px; }
|
|
.tabs { gap: 0; }
|
|
.tabs a { padding: 0 6px; font-size: 15px; }
|
|
.topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
|
|
.signin { padding: 0 8px; }
|
|
.hide-xs { display: none; }
|
|
.show-xs { display: inline; }
|
|
}
|
|
|
|
/* ---------- Live panel additions ---------- */
|
|
|
|
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
.btn:disabled:hover { border-color: var(--line); }
|
|
a.btn { text-decoration: none; }
|
|
|
|
.pager {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 18px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.server-pick { cursor: default; }
|
|
.me #signout { margin-left: auto; }
|
|
.me > div { min-width: 0; }
|
|
.me b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.signin-page {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
}
|
|
|
|
.signin-card {
|
|
display: grid;
|
|
justify-items: start;
|
|
gap: 14px;
|
|
width: min(440px, 100%);
|
|
padding: 28px;
|
|
}
|
|
|
|
.signin-card .brand-mark { width: 40px; height: 40px; }
|
|
.signin-card .sub { margin: 0; }
|
|
.signin-back { font-size: 14px; }
|
|
|
|
.signin-error {
|
|
margin: 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--accent-line);
|
|
border-radius: var(--r-md);
|
|
background: var(--accent-soft);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ---------- Playtime (PlaytimeHistory) ---------- */
|
|
|
|
:root {
|
|
--t: #e3b353;
|
|
--ct: #6fa3e8;
|
|
--spec: #4b5162;
|
|
/* The heatmap's one-hue ramp, from the surface up to the accent. */
|
|
--heat-0: #23262e;
|
|
--heat-1: #3a1f29;
|
|
--heat-2: #5e1c2f;
|
|
--heat-3: #8f1934;
|
|
--heat-4: #c41438;
|
|
--heat-5: #fe113d;
|
|
}
|
|
|
|
.pt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
|
|
.pt-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
|
|
.pt-tile small { color: var(--muted); font-size: 13px; }
|
|
.pt-tile b { font: 600 30px/1 var(--display); }
|
|
.pt-tile .delta { font-size: 13px; color: var(--muted); }
|
|
.pt-tile .delta.up { color: var(--green); }
|
|
|
|
.pt-hbar { display: flex; align-items: center; gap: 10px; min-width: 140px; }
|
|
.pt-hbar .track { flex: 1; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
|
|
.pt-hbar .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--fill, var(--accent)); }
|
|
.pt-hbar span { min-width: 3.5em; text-align: right; font-size: 14px; }
|
|
|
|
/* T / CT / spectating as one stacked bar, 2px surface gaps between the parts. */
|
|
.pt-split { display: flex; gap: 2px; height: 14px; margin: 4px 0 10px; }
|
|
.pt-split i { display: block; height: 100%; }
|
|
.pt-split i:first-child { border-radius: 4px 0 0 4px; }
|
|
.pt-split i:last-child { border-radius: 0 4px 4px 0; }
|
|
.pt-split i:only-child { border-radius: 4px; }
|
|
.pt-split .t { background: var(--t); }
|
|
.pt-split .ct { background: var(--ct); }
|
|
.pt-split .spec { background: var(--spec); }
|
|
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
|
|
.pt-legend li { display: flex; align-items: center; gap: 6px; }
|
|
.pt-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
|
|
.pt-legend span { color: var(--muted); }
|
|
|
|
.pt-cols { padding: 18px 18px 12px; }
|
|
.pt-cols .plot {
|
|
position: relative;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
align-items: end;
|
|
gap: 2px;
|
|
height: 140px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.pt-cols .grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line-soft); pointer-events: none; }
|
|
.pt-cols .grid span { position: absolute; right: 0; top: -17px; font-size: 11px; color: var(--faint); }
|
|
.pt-cols .bar { position: relative; height: 100%; display: flex; align-items: end; justify-content: center; }
|
|
.pt-cols .bar i { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--fill, var(--accent)); opacity: 0.85; }
|
|
.pt-cols .bar:hover i, .pt-cols .bar:focus i { opacity: 1; outline: 1px solid var(--text); outline-offset: 1px; }
|
|
.pt-cols .ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 6px; font-size: 11px; color: var(--faint); text-align: center; }
|
|
.pt-cols .note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
|
|
|
|
.pt-heat { padding: 18px; overflow-x: auto; }
|
|
.pt-heat table { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; }
|
|
.pt-heat th, .pt-heat td { padding: 0; border: 0; background: none; }
|
|
.pt-heat th { font: 500 11px/1 var(--body); color: var(--faint); text-transform: none; letter-spacing: 0; }
|
|
.pt-heat th[scope="row"] { padding-right: 8px; text-align: right; font-size: 12px; color: var(--muted); }
|
|
.pt-heat td i { display: block; height: 22px; min-width: 16px; border-radius: 3px; background: var(--heat-0); }
|
|
.pt-heat td i:hover { outline: 1px solid var(--text); outline-offset: 1px; }
|
|
.pt-heat .scale { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--muted); }
|
|
.pt-heat .scale i { width: 18px; height: 10px; border-radius: 2px; }
|
|
|
|
.pt-place { display: inline-block; width: 2ch; font: 700 20px/1 var(--display); color: var(--faint); }
|
|
tr:nth-child(1) .pt-place { color: #f5c542; }
|
|
tr:nth-child(2) .pt-place { color: #c9ced8; }
|
|
tr:nth-child(3) .pt-place { color: #d08a52; }
|
|
.pt-who .rank { margin-left: 6px; }
|
|
|
|
.pt-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 18px; }
|
|
.pt-record { display: grid; align-content: start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
|
|
.pt-record ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; counter-reset: rec; }
|
|
.pt-record li { display: flex; gap: 8px; align-items: baseline; cursor: pointer; counter-increment: rec; }
|
|
.pt-record li::before { content: counter(rec); width: 1.2em; color: var(--faint); font: 700 14px/1 var(--display); }
|
|
.pt-record li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.pt-record li:hover span { text-decoration: underline; }
|
|
.pt-record p { margin: 0; font-size: 14px; }
|
|
.pt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
|
|
.pt-stats div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
|
|
.pt-stats b { font: 600 22px/1 var(--display); }
|
|
.pt-stats small { color: var(--muted); font-size: 12px; }
|
|
.pt-spark { display: flex; align-items: end; gap: 2px; height: 48px; margin-top: 4px; }
|
|
.pt-spark i { flex: 1; max-width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; }
|
|
.pt-spark i.zero { background: var(--line); opacity: 1; }
|
|
.pt-maps { display: grid; gap: 8px; }
|
|
.pt-maps div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 14px; }
|
|
.pt-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
|
|
.pt-names li { display: flex; justify-content: space-between; gap: 12px; }
|
|
.pt-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
|
|
.pt-sessions li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-size: 14px; }
|
|
.pt-sessions .top { display: flex; justify-content: space-between; gap: 10px; }
|
|
.pt-credit { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
|
|
.pt-credit a { color: var(--muted); }
|
|
.drawer .pt-credit { border-top: 0; padding: 14px 22px; }
|
|
.pt-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
|
|
.pt-stack > *, .pt-grid > * { min-width: 0; }
|
|
/* Side-by-side panels match heights; charts sit at the top and notes at the bottom. */
|
|
.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
|
|
.pt-grid > .panel { display: flex; flex-direction: column; }
|
|
.pt-grid > .panel > .pt-cols { flex: 1; display: flex; flex-direction: column; }
|
|
.pt-grid > .panel > .pt-cols .note { margin-top: auto; padding-top: 10px; }
|
|
|
|
#pt-tip {
|
|
position: fixed;
|
|
z-index: 50;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-sm);
|
|
background: var(--raised);
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
|
|
}
|
|
#pt-tip[hidden] { display: none; }
|
|
|
|
@media (max-width: 820px) {
|
|
.pt-tiles, .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.pt-grid { grid-template-columns: minmax(0, 1fr); }
|
|
.pt-cols .ticks span:nth-child(even) { visibility: hidden; }
|
|
}
|