423 lines
7.3 KiB
CSS
423 lines
7.3 KiB
CSS
:root {
|
|
--bg-primary: oklch(11% 0.013 305);
|
|
--bg-secondary: oklch(20% 0.015 305);
|
|
--bg-hover: oklch(24% 0.015 305);
|
|
--text-primary: oklch(87% 0.009 305);
|
|
--text-secondary: oklch(65% 0.011 305);
|
|
--border-color: oklch(24% 0.017 305);
|
|
--accent-color: oklch(72% 0.18 305);
|
|
--success-color: oklch(66% 0.19 145);
|
|
--warn-color: oklch(71% 0.16 73);
|
|
--error-color: oklch(61% 0.22 22);
|
|
--bottom-grid-height: clamp(80vh, 95vh, 100vh);
|
|
--scrollbar-track: color-mix(in oklch, var(--text-primary) 8%, transparent);
|
|
--scrollbar-thumb: color-mix(in oklch, var(--text-primary) 22%, transparent);
|
|
--scrollbar-thumb-hover: color-mix(
|
|
in oklch,
|
|
var(--text-primary) 35%,
|
|
transparent
|
|
);
|
|
--font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
|
|
--text-xs: 0.6875rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-md: 1.125rem;
|
|
--text-lg: 1.75rem;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-12: 3rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg-primary: oklch(97.5% 0.007 305);
|
|
--bg-secondary: oklch(94% 0.009 305);
|
|
--bg-hover: oklch(91% 0.011 305);
|
|
--text-primary: oklch(17% 0.013 305);
|
|
--text-secondary: oklch(40% 0.013 305);
|
|
--border-color: oklch(84% 0.014 305);
|
|
--accent-color: oklch(38% 0.18 305);
|
|
--success-color: oklch(40% 0.18 145);
|
|
--warn-color: oklch(46% 0.16 73);
|
|
--error-color: oklch(44% 0.22 22);
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
max-width: 75rem;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.625rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.grid-bottom {
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
|
align-items: stretch;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stat {
|
|
background: var(--bg-secondary);
|
|
padding: 1rem 1.875rem;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.label {
|
|
font-family: var(--font-body);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin: 0 0 var(--space-3) 0;
|
|
}
|
|
|
|
.metric-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(auto, 11.25rem) auto;
|
|
gap: clamp(var(--space-4), 6vw, 7.5rem);
|
|
min-height: 1.875rem;
|
|
align-items: center;
|
|
padding: 0.125rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.metric-label {
|
|
font: inherit;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.metric-label:focus-visible {
|
|
outline: 2px solid var(--accent-color);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.metric-row > [role="definition"] {
|
|
font-weight: 600;
|
|
font-size: var(--text-base);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.metric-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table-scroll {
|
|
overflow: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.table-scroll,
|
|
#activity-log {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
.table-scroll::-webkit-scrollbar,
|
|
#activity-log::-webkit-scrollbar {
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
}
|
|
|
|
.table-scroll::-webkit-scrollbar-track,
|
|
#activity-log::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-track);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.table-scroll::-webkit-scrollbar-thumb,
|
|
#activity-log::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.table-scroll::-webkit-scrollbar-thumb:hover,
|
|
#activity-log::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.table-scroll table {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#activity-log {
|
|
overflow: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: var(--space-3);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
td {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
th {
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.error {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.flag {
|
|
font-size: 1.25rem;
|
|
margin-right: var(--space-2);
|
|
}
|
|
|
|
.left-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
#activity-log {
|
|
font-size: var(--text-sm);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
#activity-log .loading {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.activity-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.activity-table th,
|
|
.activity-table td {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.activity-table td {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.activity-table td:first-child {
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.activity-table .rate {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
display: block;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
@keyframes data-refresh {
|
|
from {
|
|
opacity: 0.55;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.refreshed {
|
|
animation: data-refresh 350ms cubic-bezier(0.25, 0, 0, 1);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.grid-bottom {
|
|
height: var(--bottom-grid-height);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.left-column {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.left-column > .stat:first-child {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.left-column > .stat:last-child {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.grid-bottom > .stat:last-child {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.grid-bottom > .stat:last-child #activity-log {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.grid-bottom > .stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.grid-bottom > .stat .table-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 0.625rem;
|
|
}
|
|
|
|
.grid {
|
|
gap: 0.625rem;
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
|
|
.left-column {
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.grid-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
.left-column {
|
|
display: contents;
|
|
}
|
|
|
|
.left-column > .stat:first-child {
|
|
order: 1;
|
|
}
|
|
|
|
.left-column > .stat:last-child {
|
|
order: 3;
|
|
}
|
|
|
|
.grid-bottom > .stat:last-child {
|
|
order: 2;
|
|
}
|
|
|
|
.stat {
|
|
padding: var(--space-2) var(--space-3);
|
|
}
|
|
|
|
.label {
|
|
font-size: var(--text-base);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: var(--space-2) var(--space-1);
|
|
}
|
|
|
|
#countries td:nth-child(3) {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
#countries td,
|
|
.activity-table td {
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.activity-table td:first-child {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.metric-row {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.metric-row > [role="definition"] {
|
|
text-align: right;
|
|
}
|
|
|
|
#activity-log {
|
|
max-height: clamp(50vh, 60vh, 70vh);
|
|
}
|
|
|
|
.table-scroll {
|
|
max-height: clamp(45vh, 55vh, 65vh);
|
|
}
|
|
}
|