134 lines
3.6 KiB
CSS
134 lines
3.6 KiB
CSS
/* earth-stats.css — compact KPI grid panel */
|
|
|
|
.hud-panel-stats {
|
|
top: var(--hud-offset);
|
|
right: var(--hud-offset);
|
|
border-radius: 0; /* square / angular — matches layer panel */
|
|
padding: 0;
|
|
width: min(calc(240px * var(--hud-scale)), calc(100vw - 32px));
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Thin drag bar ────────────────────────────────────────────── */
|
|
|
|
.stats-drag-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: calc(8px * var(--hud-scale)) calc(12px * var(--hud-scale));
|
|
border-bottom: 1px solid var(--hud-line);
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.stats-drag-bar:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.stats-kicker {
|
|
color: var(--hud-text-soft);
|
|
font-size: calc(0.64rem * var(--hud-scale));
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Reuse hud-panel-close — just override size to match kicker line */
|
|
.stats-drag-bar .hud-panel-close {
|
|
width: calc(20px * var(--hud-scale));
|
|
height: calc(20px * var(--hud-scale));
|
|
min-width: calc(20px * var(--hud-scale));
|
|
}
|
|
|
|
.stats-drag-bar .hud-panel-close .material-symbols-rounded {
|
|
font-size: calc(12px * var(--hud-scale));
|
|
}
|
|
|
|
/* ── 2-column KPI grid ────────────────────────────────────────── */
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.stat-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(2px * var(--hud-scale));
|
|
padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
|
|
border-right: 1px solid var(--hud-line);
|
|
border-bottom: 1px solid var(--hud-line);
|
|
}
|
|
|
|
/* Right column cells: remove right border */
|
|
.stat-cell:nth-child(even) {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Bottom row cells: remove bottom border */
|
|
.stat-cell:nth-last-child(-n+2) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.stat-num {
|
|
color: var(--hud-title);
|
|
font-size: calc(1.3rem * var(--hud-scale));
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Smaller number for multi-word values like "256/314" */
|
|
.stat-num--sm {
|
|
font-size: calc(0.94rem * var(--hud-scale));
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--hud-text-soft);
|
|
font-size: calc(0.62rem * var(--hud-scale));
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ── BGP status footer ────────────────────────────────────────── */
|
|
|
|
.stats-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(6px * var(--hud-scale));
|
|
padding: calc(7px * var(--hud-scale)) calc(12px * var(--hud-scale));
|
|
border-top: 1px solid var(--hud-line);
|
|
}
|
|
|
|
.stats-footer-dot {
|
|
flex-shrink: 0;
|
|
width: calc(5px * var(--hud-scale));
|
|
height: calc(5px * var(--hud-scale));
|
|
border-radius: 50%;
|
|
background: var(--hud-accent);
|
|
box-shadow: 0 0 5px var(--hud-accent);
|
|
}
|
|
|
|
.stats-footer-text {
|
|
color: var(--hud-text-muted);
|
|
font-size: calc(0.7rem * var(--hud-scale));
|
|
line-height: 1.3;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Layout-expanded: slide off-screen ───────────────────────── */
|
|
|
|
.earth-app.layout-expanded .hud-panel-stats:not([data-dragged="true"]) {
|
|
top: var(--hud-offset);
|
|
right: var(--hud-offset);
|
|
transform: translate(calc(100% - var(--hud-offset)), calc(-100% + var(--hud-offset)));
|
|
}
|